[r]
(1)4 – Ngôn ng HTMLữ 1
Ngôn ng HTMLữ
Phát tri n ng d ng web 1ể ứ ụ
(2)4 – Ngôn ng HTMLữ 2
N i dung bu i h c trộ ổ ọ ước
1 Các bước thi t l p website ế ậ
2 Thi t k l p trình websiteế ế ậ
• Thi t k giao di nế ế ệ
3 Xây d ng website dự ưới góc nhìn
(3)4 – Ngôn ng HTMLữ 3
N i dungộ
1 Gi i thi u v HTMLớ ệ ề
2 C u trúc 1 tài li u HTMLấ ệ
3 Các tag (th ) HTMLẻ
4 Hướng d n th c hành HTMLẫ ự
(4)4 – Ngôn ng HTMLữ 4
Gi i thi u v HTMLớ ệ ề
§ HTML (Hyper Text Markup Language): ngơn ng đánh d u siêu ữ ấ
văn b n, dùng đ xây d ng m t webpage.ả ể ự ộ
§ HTML: ch a các thành ph n đ nh d ng đ báo cho browser bi t ứ ầ ị ể ế
cách hi n th m t webpage.ể
Đ M ttrangwebthụngth ngg m:
ã D li u (văn b n, âm thanh, hình nh, …)ữ ệ ả ả
• Các tag (th ) HTML đ đ nh d ng mô t cách th c các d li u hi n th ẻ ể ị ả ứ ữ ệ ể ị
trên trình duy tệ
§ Web browser: phân tích & “hi u” các tags HTML, hi n th n i ể ệ ị ộ
dung web cho người dùng
(5)4 – Ngôn ng HTMLữ 5
Trình duy t – Trình so n th o ệ ạ ả Web browser – trình duy t webệ
Notepad
(6)4 – Ngôn ng HTMLữ 6
HTML căn b n Tag (th ) HTMLả ẻ
<html> <head>
<title>First page title</title>
</head> <body>
Hello world!<br>
It's my first html.
(7)4 – Ngơn ng HTMLữ 7
Cú pháp, đ c tính c a HTMLặ ủ
<TAG ten_thuoc_tinh=“gia tri” …… > D li u ữ ệ </TAG>
HTML tag:
§ Tên g i nhợ
§ Tag được quy đ nh trong c p d u ngo c ị ặ ấ ặ <>
§ Ph n l n tag g m 2 ph n m ầ ầ <tag> và đóng </tag>
§ M t s tag ch có 1 ph n & khơng có d li u: ộ ố ỉ ầ ữ ệ <br>, <hr> § C u trúc l ngấ
§ Thu c tính c a tag cung c p thơng tin b t bu c/tùy ch n cho tagộ ủ ấ ắ ộ ọ § M t s web browser khơng hi u m t s tag ho c thu c tínhộ ố ể ộ ố ặ ộ
(8)4 – Ngôn ng HTMLữ 8
C u trúc m t webpage HTMLấ ộ
(9)4 – Ngôn ng HTMLữ 9
C u trúc 1 tài li u HTMLấ ệ
§ <html></html> : Đ nh nghĩa ph m vi c a văn b n HTMLị ủ ả § <head></head> :
Đ nh nghĩa các mô t v trang HTML. Thông tin trong tag này ị ả ề không được hi n th trên trang webể ị
§ <title></title> : Mơ t tiêu đ trang webả ề § <body></body> :
(10)4 – Ngôn ng HTMLữ 10
Các tag HTML c b nơ ả
§ Tag x lý đ nh d ng văn b nử ị ả § Tag danh sách
(11)4 – Ngơn ng HTMLữ 11
Tag x lý đ nh d ng văn b nử ị ạ ả
§ Tiêu đ heading tags: <h1>, <h2>, …, <h6>ề § Đo n văn b n: <p>ạ ả
§ Đ nh d ng chu i: <em>, <i>, <b>, và <font>ị ỗ § Đường k ngang: <hr>ẻ
§ Xu ng dịng <br>ố
(12)4 – Ngơn ng HTMLữ 12
Ví d : Tag Headingụ
Ngơn ng HTMLữ Trong trình so n th oạ ả
(13)4 – Ngôn ng HTMLữ 13
Ví d : Tag Paragraphụ
Thu c tính c a tag <body>ộ ủ
(14)4 – Ngôn ng HTMLữ 14
Horizontal rules <HR …>
–Thu c ti nh :ộ ́
• align : Canh hàng đường k ngang so v i trang webẻ • width : Chi u dài đề ường k ngangẻ
• size : B r ng c a đề ộ ủ ường k ngangẻ • noshade : Khơng có bóng
(15)4 – Ngơn ng HTMLữ 15
Đ nh d ng chị ạ ữ
Đ nh d ng:ị ạ
<font>Hello world</font>
<font style="fontfamily:Verdana, Geneva, sansserif" color="#000099" size="3"> Hello world </font>
<b>This text is bold</b>
<strong>This text is strong </strong> <big>This text is big </big>
<em>This text is emphasized </em> <i>This text is italic </i>
<small>This text is small</small>
This text contains a<sub>2</sub>
(16)4 – Ngôn ng HTMLữ 16
Đ nh d ng chị ạ ữ
<EM>Computer Sciences</EM>
<STRONG> Computer Sciences </STRONG> <DFN> Computer Sciences </DFN>
<CODE> Computer Sciences </CODE> <KBD> Computer Sciences </KBD>
<VAR> Computer Sciences </VAR> <CITE> Computer Sciences </CITE> <BLINK> Computer Sciences </BLINK> <DEL> Computer Sciences </DEL>
(17)4 – Ngôn ng HTMLữ 17
Đ nh d ng theo tag <Pre>ị ạ
(18)4 – Ngôn ng HTMLữ 18
Các ký t đ c bi tự ặ ệ
Result Description Entity name Entity number Kho ng tr ngả ắ   & D u vàấ & &
“ Ngo c képặ " "
< Nh h nổ < <
> L n h > > v v
§ Hi n th các ký t đ c bi tể ị ự ặ ệ
Ví d :ụ
Đ hi n th để ể ị ược: <Dai hoc sai Gon> & “SGU” <Dai hoc sai Gon>  ; &
;   ; "SGU"
(19)4 – Ngơn ng HTMLữ 19
Tag hình nhả
§ <img> : Khơng có th đóngẻ
§ <img src=“URL” alt=“Description” width=“Number”
height=“Number”>
§ Các thu c ti nh c a tag <img>:ộ ́ ủ
–src : Đường d n đ n file hình nhẫ ế ả –alt : Chú thi ch cho hình nh́ ả
- width: chi u r ng c a hình khi hi n thề ộ ủ ể ị
- height: chi u dài c a hình khi hi n thề ủ ể ị
–position: Top, Bottom, Middle
(20)4 – Ngơn ng HTMLữ 20
Tag hình nhả
§ Giá tr m c đ nh c a 2 thu c tính width, height là kích thị ặ ị ủ ộ ước th t ậ
c a file nh.ủ ả
§ Đ t nh n n cho trang webặ ả ề
–S dung th ử ̣ ẻ <body background=‘Image Path’>
§ ví d :ụ
<body>
<img src=“123.jpg” alt=“Something is here” width =“45”
height=“45” >