Download - HTML cơ bản
Thiết kế Web 1
2
Gi i thi u HTMLớ ệ C u trúc tài li u HTMLấ ệ Các tag c b nơ ả Các tag danh sách Tag liên k tế Tag k b ngẻ ả Tag hình nhả
Nội dung
Thiết kế Web 1
3
HTML (HyperText Markup Language): Ngôn ng ữđánh d u siêu văn b nấ ả
Là m t ngôn ng đ xây d ng trang webộ ữ ể ự Ch a các thành ph n đ nh d ng đ báo cho trình ứ ầ ị ạ ể
duy t bi t cách hi n th m t trang webệ ế ể ị ộ Trang web có 2 thành ph n chínhầ
◦ D li u trang web (văn b n, âm thanh, hình nh,…)ữ ệ ả ả◦ Các th HTML (tag) đùng đ mô t cách th c d li u hi n ẻ ể ả ứ ữ ệ ể
th trên trình duy tị ệ Ph n m r ng: ầ ở ộ .html, .htm
Giới thiệu HTML
Thiết kế Web 1
4
Thẻ HTML (Tag)
Thiết kế Web 1
5
C u trúcấ<tag m >ở D li uữ ệ <tag đóng>
Tên tag th ng mang tính g i nhườ ợ ớ Đôi khi không c n tag đóng: <br>, <hr>ầ Cú pháp chung
<tag tên_thu c_tính=“…”ộ >D li uữ ệ </tag>
Thẻ HTML (Tag)
Thiết kế Web 1
6
L u ý:ư◦ Giá tr c a thu c tính nên đ t trong c p d u nháy đ n ị ủ ộ ặ ặ ấ ơ
ho c nháy képặ◦ Không phân bi t ch HOA/th ngệ ữ ườ◦ Trình duy t b qua các kho ng tr ng th a, d u ng t dòngệ ỏ ả ắ ừ ấ ắ
Thẻ HTML (Tag)
Thiết kế Web 1
7
Cấu trúc tài liệu HTML
Thiết kế Web 1
8
<html></html>: Đ nh nghĩa ph m vi văn b n HTMLị ạ ả <head></head>: Đ nh nghĩa mô t v trang HTMLị ả ề <title></title>: Tiêu đ trangề <body>/body>: Vùng thân trang web, n i ch a ơ ứ
thông tin
Cấu trúc tài liệu HTML
Thiết kế Web 1
9
Các tag x lý văn b nử ả Tag hình nhả Tag âm thanh
Các tag cơ bản
Thiết kế Web 1
10
Các tag đ nh d ng kh i văn b nị ạ ố ả◦ Tiêu đ (Heading): ề <h1>, <h2>, <h3>, <h4>, <h5>, <h6>◦ Đo n văn b n (Paragraph): ạ ả <p>◦ Danh sách (List Items): <li>◦ Đ ng k ngang (Horizontal Ruler): ườ ẻ <hr>◦ Hi n th đúng d ng văn b n: ể ị ạ ả <pre>
Các tag đ nh d ng chu i văn b nị ạ ỗ ả◦ Đ nh d ng ký t : ị ạ ự <i>, <em>, <b>, <font>◦ Liên k t: ế <a>◦ Xu ng dòng: ố <br>
Các tag xử lý văn bản
Thiết kế Web 1
11
Làm sao hi n th : ể ị “Khoa T Nhiên” <CĐSP>ự Dùng ký t đ c bi t:ự ặ ệ
"Khoa T Nhiênự " <CĐSP>
Các ký tự đặc biệt
Thiết kế Web 1
12
<img>: Không có th đóngẻ Các thu c tính c a tag ộ ủ <img>:
◦ src: đ ng d n đ n file hình nhườ ẫ ế ả◦ alt: Chú thích cho hình nhả◦ position: v trí (Top, Bottom, Middle)ị◦ border: đ dày đ ng vi n quanh nh (m c đ nh=0)ộ ườ ề ả ặ ị
Đ t nh n n cho trang webặ ả ề◦ S d ng th ử ụ ẻ <body background=“đ ng d n nh”ườ ẫ ả >
Tag hình ảnh
Thiết kế Web 1
13
<bgsound>: Không có tag đóng Thu c tính c a tag ộ ủ <bgsound>:
◦ src: Đ ng d n đ n file âm thanhườ ẫ ế◦ loop: s l n l p phát l i (ố ầ ặ ạ loop=-1: l p vô h n)ặ ạ◦ <bgsound> th ng đ t trong tag ườ ặ <head> c a trang webủ
Ví d : ụ<bgsound src=“ngoilaibennhau.mp3” loop=“1”>
Tag âm thanh
Thiết kế Web 1
14
Kiểu danh sách Thẻ Phần tử trong DS
Danh sách có thứ tự <ol> <li>
Danh sách không có thứ tự <ul> <li>
Danh sách tự định nghĩa <dl> <dt>,<dd>
Các tag danh sách
Thiết kế Web 1
15
Danh sách có thứ tự
Thiết kế Web 1
16
Danh sách không có thứ tự
Thiết kế Web 1
17
Danh sách tự định nghĩa
Thiết kế Web 1
18
Cú pháp<a href=“…” target=“”>N i dungộ </a>◦ href: Ch ra URL c n liên k t t i (t ng đ i/tuy t đ i)ỉ ầ ế ớ ươ ố ệ ố◦ Các giá tr c a ị ủ target:
name: T i trang web vào frame có tên là nameả _blank: T i trang web vào c a s m iả ử ổ ớ _parent: T i trang web vào c a s chaả ử ổ _self: T i trang web vào chính c a s hi n hànhả ử ổ ệ _top: T i trang web vào c a s m c cao nh tả ử ổ ứ ấ
Ví d :ụ
Tag liên kết
Thiết kế Web 1
19
Tên tag Mô tả
<table>…</table> Khởi tạo bảng
<tr>…</tr> Tạo một dòng. Tag <tr> phải nằm trong tag <table>
<th>…</th> Tạo một ô tiêu đề. Tag <th> phải nằm trong tag <tr>
<td>…</td> Tạo một ô (chứa dữ liệu). Tag <td> phải nằm trong tag <tr>
Tag kẻ bảng (Table)
Thiết kế Web 1
20
Bảng – Ví dụ
Thiết kế Web 1
21
Thuộc tính Mô tả
colspan Thiết lập ô có độ rộng bằng bao nhiêu cột
rowspan Thiết lập ô có độ cao bằng bao nhiêu dòng
background, bgcolor Thiết lập ảnh nền/màu nền cho thẻ <table>, <tr>,<td>
cellpadding Khoảng cách từ đường viền đến văn bản trong ô
cellspacing Khoảng cách giữa các ô trong bảng
Bảng - Các thuộc tính
Thiết kế Web 1
22
Bảng – Ví dụ
Thiết kế Web 1
23
Tạo bảng theo cấu trúc
Thiết kế Web 1
24
Tạo bảng theo cấu trúc
Thiết kế Web 1
25
Tạo bảng theo cấu trúc
Thiết kế Web 1
26
Tạo bảng theo cấu trúc
Thiết kế Web 1
27
Bài tập thực hành
Thiết kế Web 1
28
S d ng NotePad đ thi t k trang web cá nhân, ử ụ ể ế ếtrình bày các thông tin sau:◦ H và tênọ◦ Đ a ch liên l cị ỉ ạ◦ Đi n tho iệ ạ◦ Email◦ Hình cá nhân◦ Môn h c yêu thíchọ◦ Website yêu thích◦ Th i khóa bi u h c t pờ ể ọ ậ
Bài tập 1
Thiết kế Web 1
29
S d ng NotePad thi t k trang web gi i thi u v ử ụ ế ế ớ ệ ềl p mình, g m các thông tin:ớ ồ◦ Tên l p, sĩ sớ ố◦ Hình nh ho t đ ng c a l pả ạ ộ ủ ớ◦ Danh sách thành viên c a l pủ ớ◦ Đ a ch website c a l pị ỉ ủ ớ
Bài tập 2
Thiết kế Web 1
30
Gợi ý chủ đề website
Thiết kế Web 1
31
Website tr ng h c, khoaườ ọ Website nhà hàng, quán cafe, ti m bán hoa,…ệ Website công ty nhà đ t, cây c nh, nhà sách,…ấ ả Website t ch c, câu l c b , nhóm làm vi c,…ổ ứ ạ ộ ệ Website h tr h c t p, h c online,…ỗ ợ ọ ậ ọ Website gi i thi u các môn th thao, trò ch i dân ớ ệ ể ơ
gian,… …
Các chủ đề
Thiết kế Web 1
32
Gi i thi u v nhóm thi t kớ ệ ề ế ế Thông tin v ch s h u website, m c đích websiteề ủ ở ữ ụ Thông tin v s n ph m/n i dung c n gi i thi uề ả ẩ ộ ầ ớ ệ Thông tin v các website t ng tề ươ ự Đ a hình nh liên quanư ả
Yêu cầu về chức năng
Thiết kế Web 1
33
HTML◦ S d ng liên k t, hình nh, danh sáchử ụ ế ả◦ S d ng table t o layoutử ụ ạ
CSS JavaScript
Yêu cầu về kỹ thuật
Thiết kế Web 1
34
1. Phân tích yêu c u website: c nhómầ ả◦ M c đích?ụ◦ C n bao nhiêu trang web?ầ◦ Màu s c?ắ
2. Phác th o s b giao di n web: 1-2 ng iả ơ ộ ệ ườ3. Thu th p tài li u, hình nh liên quan: 1-2 ng iậ ệ ả ườ4. Thi t k hình nh giao di n (Photoshop): 1 ng iế ế ả ệ ườ5. Thi t k giao di n web (HTML, CSS, JavaScript): ế ế ệ
c nhómả6. Ki m tra hi n th trên các trình duy t: c nhómể ể ị ệ ả7. Đ a lên Internet (host)ư
Quy trình làm việc
Thiết kế Web 1
35
