[r]
Trang 1Ngôn ng HTML ữ
Đ i H c Sài Gòn – Khoa CNTT ạ ọ
Trang 2N i dung bu i h c tr ộ ổ ọ ướ c
Trang 3N i dung ộ
Trang 4Gi 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 t trang web thông thộ ường g 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
Webpage HTML: 1 file *.htm || *.html
Trang 5Trình duy t – Trình so n th o ệ ạ ả Web browser – trình duy t web ệ
Notepad
Dreamweaver
Trang 6HTML căn b n Tag (th ) HTML ả ẻ
<html>
<head>
</head>
<body>
It's my first html.
</body>
</html>
Trang 7Cú 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 ộ ố ể ộ ố ặ ộ
§ Không phân bi t ch hoa, th ệ ữ ườ ng
B qua các kho ng tr ng
Trang 8C u trúc m t webpage HTML ấ ộ
<html>
<head>
<title>First page title
</title>
</head>
<body>
Hello world!<br>
It's my first html
</body>
</html>
Trang 9C 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> :
Xác đ nh vùng thân c a trang web, n i ch a các thông tinị ủ ơ ứ
Trang 10Các tag HTML c b n ơ ả
§ Tag x lý đ nh d ng văn b nử ị ạ ả
§ Tag danh sách
§ Tag t o b ng <table>ạ ả
§ Tag liên k t trang <a>ế
§ Tag hình nh <img>ả
§ Tag âm thanh
Trang 11Tag 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>ố
§ Hi n th các ký t đ c bi tể ị ự ặ ệ
Trang 12Ví d : Tag Heading ụ
Ngôn ng HTML ữ Trong trình so n th o ạ ả
N i dung hi n th ộ ệ ị Trong trình duy t ệ
Trang 13Ví d : Tag Paragraph ụ
Thu c tính c a tag <body> ộ ủ
<body bgcolor=‘pink’>
Trang 14<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
<HR noshade size=‘5’ align=‘center’ width=‘40%’ ></HR>
<HR size=‘15’align=‘right’ width=‘80%’ ></HR>
Trang 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>
Trang 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>
<INS> Computer Sciences </INS>
Trang 17Đ nh d ng theo tag <Pre> ị ạ
Hi n th đúng d ng văn b n đã so n th o (kho ng tr ng, xu ng ể ị ạ ả ạ ả ả ắ ố dòng, tag,…)
Trang 18Các ký t đ c bi t ự ặ ệ
Result Description Entity name Entity number
Kho ng tr ng ả ắ  
“ Ngo c kép ặ " "
< Nh h n ổ ơ < <
> L n h n ớ ơ > > 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"
HTML special character Google
Trang 19Tag hình nh ả
§ <img> : Không có th đóngẻ
§ <img src=“URL” alt=“Description” width=“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́ ả
Trang 20Tag 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”
</body>