HTML web
Ngôn ngữ HTML
Giảng viên: Lê Bá Vui
Viện CNTT-TT - ĐH Bách Khoa Hà Nội
1
NGÔN NGỮ HTML
HTML là gì?
Các thẻ trong HTML.
2
HTML LÀ GÌ?
Hyper Text Markup Language - Ngôn ngữ đánh dấu siêu văn bản
Đƣợc sử dụng để tạo nên các trang web
Trình duyệt đọc file HTML để hiển thị nội dung
Là một file văn bản có chứa các thẻ (tag) và nội dung trang web
3
HTML LÀ GÌ?
Các thẻ đƣợc sử dụng để định dạng dữ liệu, quy định cách thức hiển thị nội dung trang web
HTML không phân biệt chữ hoa hay chữ thƣờng
HTML không báo lỗi cú pháp, nếu sai cú pháp kết quả hiển thị không đúng.
4
HTML LÀ GÌ?
Một file HTML phải có phần mở rộng là htm
hoặc html
File HTML có thể đƣợc tạo bởi bất kỳ chƣơng trình soạn thảo nào (word, notepad, ...)
5
CÁC THẺ TRONG HTML
Đƣợc sử dụng để đánh dấu các thành phần của
HTML
Có nhiều kiểu thẻ, mỗi kiểu thẻ có tác dụng
khác nhau
Có 2 loại: thẻ đóng và thẻ mở
6
CÚ PHÁP THẺ
Thẻ mở
<tên_thẻ>
Bắt đầu một lệnh HTML
Ví dụ <html>, <head>, <body>
Thẻ đóng
</tên_thẻ>
Kết thúc một lệnh HTML
Ví dụ </html>, </head>, </body>
7
CÚ PHÁP THẺ
Thẻ đóng và thẻ mở thƣờng đi liền với nhau
<tên_thẻ>...</tên_thẻ>
Tác động đến dữ liệu bên trong cặp thẻ
Một số thẻ chỉ có thẻ mở
<img>,
, <hr>
8
THUỘC TÍNH CỦA THẺ
Mỗi thẻ có thể có 1 hoặc nhiều thuộc tính
Mỗi thuộc tính có tên thuộc tính và giá trị, giá trị đƣợc đặt trong dấu ""
Cú pháp
<tên_thẻ tên_TT1="giá_trị1" tên_TT2="giá_trị2" ...>
9
THUỘC TÍNH CỦA THẺ
Thuộc tính đƣợc viết trong thẻ mở
<h1 align="center">Hello world</h1>
Các thuộc tính có thể đổi vị trí cho nhau
<img align="center" src="hello.png">
<img src="hello.png" align="center">
10
TRANG WEB ĐẦU TIÊN
<html>
<head>
<title>Title of page</title>
</head>
<body> This is my first homepage.
This text is bold
</body>
</html>
11
HIỂN THỊ TRÊN TRÌNH DUYỆT
12
HIỂN THỊ TRÊN TRÌNH DUYỆT
13
GIẢI THÍCH
Thành phần This text is bold
là thẻ mở
là thẻ đóng tƣơng ứng
Nội dung của thành phần nằm giữa 2 thẻ
Tác dụng: làm đậm nội dung khi hiển thị trên trình duyệt
14
CÁC THẺ HTML CƠ BẢN
<html> ... </html>
Đánh dấu một file HTML
<head> ... </head>
Đánh dấu phần đầu của file HTML
<body> ... </body>
Đánh dấu phần nội dung đƣợc hiển thị
Thuộc tính bgcolor xác định màu nền của trang web
Thuộc tính background xác định ảnh nền trang web
15
ẢNH NỀN TRANG WEB
<html> <head> <title>Background Image</title> </head> <body background="globe.png"> This is my first homepage. This text is bold </body> </html>
16
MÀU NỀN TRANG WEB
<html> <head> <title>Background Image</title> </head> <body bgcolor="green"> This is my first homepage. This text is bold </body> </html>
17
ĐỀ MỤC
Đƣợc sử dụng với các thẻ từ <h1> đến <h6>
<h1> có kích thƣớc lớn nhất
<h6> có kích thƣớc nhỏ nhất
Tự động thêm một dòng trống trƣớc và sau đề mục
Thuộc tính
align="left", "right", "center", "justify" căn chỉnh lề
18
ĐỀ MỤC
<h1> Đề mục mức 1 </h1>
<h2> Đề mục mức 2 </h2>
<h3> Đề mục mức 3 </h3>
<h4> Đề mục mức 4 </h4>
<h5> Đề mục mức 5 </h5> <h6> Đề mục mức 6 </h6>
19
ĐOẠN VĂN, NGẮT DÒNG
...
Đánh dấu một đoạn văn bản
Tự động thêm một dòng trống trƣớc và sau đoạn
Thuộc tính align căn lề cho đoạn văn bản, giá trị mặc định là "left"
Chèn ký tự xuống dòng
<hr>
Chèn đƣờng kẻ ngang
20
ĐOẠN VĂN, NGẮT DÒNG
<html> <head> <title>Paragraph</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head>
<body>
Đây là paragraph 1. Căn trái.
<p align="center">Đây là paragraph 2. Căn giữa.
<p align="right">Đây là paragraph 3. Căn phải.<hr> Dòng 1
Dòng 2
</body> </html> 21
ĐOẠN VĂN, NGẮT DÒNG
22
ĐỊNH DẠNG VĂN BẢN
... chữ đậm
... chữ nghiêng
<u>...</u> chữ gạch chân
<big>...</big> chữ to
<small>...</small> chữ nhỏ
<sup>...</sup> chỉ số trên
<sub>...</sub> chỉ số dưới
23
ĐỊNH DẠNG VĂN BẢN
<font>...</font>
Chọn font chữ cho văn bản
Thuộc tính face xác định kiểu font
Thuộc tính size xác định kích thƣớc
Thuộc tính color xác định màu sắc
24
ĐỊNH DẠNG VĂN BẢN
<html> <head> <title>Formating</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> Chữ đậm. Chữ nghiêng. <u>Chữ gạch chân.</u>
<big>Chữ to.</big> <small>Chữ nhỏ.</small>
<sup>Chỉ số trên.</sup> <sub>Chỉ số dưới.</sub>
<font size="1" color="blue">Font chữ kích thước 1</font>
<font size="5" color="red">Font chữ kích thước 5</font>
<font face="Arial" color="green">Font chữ Arial</font>
</body> </html> 25
ĐỊNH DẠNG VĂN BẢN
26
CÁC KÝ TỰ ĐẶC BIỆT
Không nhập trực tiếp đƣợc từ bàn phím
Trùng với các thẻ HTML, không đƣợc hiển thị
trên màn hình
Sử dụng các ký hiệu đƣợc quy định để chèn vào
trang web
27
CÁC KÝ TỰ ĐẶC BIỆT
Ký tự Tên ký hiệu Số hiệu
< < <
> > >
& & &
" " "
„ ' '
28
CÁC KÝ TỰ ĐẶC BIỆT
Ký tự Tên ký hiệu Số hiệu
¢ ¢ ¢
£ £ £
¥ ¥ ¥
€ € €
§ § §
© © ©
® ® ®
× × ×
÷ ÷ ÷ 29
CHÈN HÌNH ẢNH VÀO TRANG WEB
<img src="nguồn_ảnh">
Thuộc tính src chỉ ra vị trí chứa ảnh, có thể là trên máy có trang web hoặc trên máy khác đƣợc nối mạng
Thuộc tính alt chỉ ra hƣớng dẫn trong trƣờng hợp không hiển thị đƣợc ảnh.
Thuộc tính border tạo khung cho ảnh
Thuộc tính height, width xác định chiều cao và chiều rộng ảnh
Có thể theo giá trị tuyệt đối hoặc giá trị tƣơng đối
30
CHÈN HÌNH ẢNH VÀO TRANG WEB
<html>
<head>
<title>Image</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h2>Image</h2>
<img src="globe.png">
<img src="globe.png" border="1">
<img src="globe.png" width="100" height="100"> <img src="globe.jpg" alt="Ảnh địa cầu">
</body>
</html>
31
TẠO DANH SÁCH
Danh sách không sắp thứ tự
Danh sách sắp thứ tự
Các danh sách có thể lồng nhau
32
DANH SÁCH KHÔNG SẮP THỨ TỰ
<ul>
<li>Ô tô</li>
<li>Xe máy</li>
<li>Tàu hỏa</li>
</ul>
33
DANH SÁCH SẮP THỨ TỰ
<ol>
<li>Mục 1</li>
<li>Mục 2</li>
<li>Mục 3</li>
</ol>
34
DANH SÁCH LỒNG NHAU
<ol> <li> Phương tiện đi lại <ul> <li>Ô tô</li> <li>Xe máy</li> </ul> </li> <li>Sở thích <ol> <li>Bóng đá</li> <li>Bóng bàn</li> </ol> </li> </ol>
35
TẠO BẢNG
Sử dụng thẻ <table>...</table>
Mỗi dòng đƣợc định nghĩa bởi thẻ <tr>...</tr>
Mỗi ô đƣợc định nghĩa bởi thẻ <td>...</td>
Tiêu đề của dòng hoặc cột đƣợc định nghĩa bởi thẻ <th>...</th>
Dữ liệu trong các ô có thể là văn bản, hình ảnh,
hoặc một bảng khác.
36
TẠO BẢNG
<table border="1">
<tr>
<th>Thứ 2</th>
<th>Thứ 3</th>
<th>Thứ 4</th>
</tr>
<tr>
<td>Toán</td>
<td>Lý</td>
<td>Hóa</td>
</tr>
</table>
37
THẺ <TABLE>
Thuộc tính border xác định độ dày đƣờng kẻ của bảng Thuộc tính align căn lề cho bảng Thuộc tính background xác định ảnh nền Thuộc tính bgcolor xác định màu nền
Thuộc tính height, width xác định chiều cao và chiều rộng bảng
Thuộc tính cellspacing xác định khoảng cách giữa các ô
Thuộc tính cellpadding xác định khoảng cách giữa dữ liệu và các cạnh của ô
38
THẺ <TR>
Thuộc tính align căn lề cho các ô trong cùng
dòng
Thuộc tính valign căn lề theo chiều dọc
Thuộc tính bgcolor xác định màu nền cho dòng
39
THẺ <TH>, <TD>
Thuộc tính align, valign căn lề cho dữ liệu theo chiều ngang và chiều dọc
Thuộc tính background, bgcolor xác định ảnh nền và màu nền cho ô dữ liệu
Thuộc tính height, width xác định chiều cao và chiều dài của
ô
Thuộc tính rowspan xác định phạm vi mở rộng của ô theo hàng
Thuộc tính colspan xác định phạm vi mở rộng của ô theo cột
40
TẠO SIÊU LIÊN KẾT (HYPERLINK)
Mục đích để liên kết đến các trang web khác hoặc các phần
trong cùng trang web
Sử dụng thẻ <a>...</a> để tạo siêu liên kết hoặc đặt tên cho một liên kết
Thuộc tính href chỉ ra địa chỉ của trang web cần liên kết đến
Thêm #tên trong địa chỉ để liên kết đến các phần trong trang web
Thuộc tính target xác định nơi mà trang web đƣợc mở. Nếu có giá trị là _blank thì mở trên một cửa sổ trình duyệt mới.
41
ĐẶT TÊN CHO MỘT PHẦN CỦA TRANG WEB
Sử dụng thẻ <a> với thuộc tính name
Cú pháp <a name="tên">...</a>
42
VÍ DỤ
<h2>Trang web 1</h2>
<a href="link2.htm">Liên kết đến trang web 2</a>
<h2>Trang web 2</h2>
<a href="link1.htm">Liên kết đến trang web 1</a>
43
VÍ DỤ
44
SỬ DỤNG ẢNH LÀM LIÊN KẾT
<a href=http://www.google.com.vn target="_blank"><img src="globe.png"></a>
45
LIÊN KẾT ĐA PHƢƠNG TIỆN
<a href="globe.png">Hình ảnh</a>
<a href="hello.wma">Âm thanh</a>
<a href="movie.avi">Đoạn phim</a>
46
VÍ DỤ
Đặt tên cho một phần của trang
<a name="muc1">Đây là mục 1</a>
Tạo liên kết đến phần đã được đặt tên
<a href="#muc1">Di chuyển đến mục 1</a>
47
CHIA KHUNG CHO TRANG WEB
Chia cửa sổ trình duyệt thành các khung khác nhau, mỗi khung có thể hiển thị một trang web.
Chia thành các trang lựa chọn và trang nội dung, mỗi mục trên trang lựa chọn liên kết đến một trang nội dung.
48
VÍ DỤ
49
VÍ DỤ
50
THẺ <FRAMESET>
Chia cửa sổ trình duyệt thành các khung
Thuộc tính cols chia thành các cột
Xác định độ rộng cột theo giá trị tuyệt đối hoặc giá trị tƣơng đối
Các cột cách nhau bởi dấu phẩy ","
Ví dụ :
<frameset cols="50%,50%">...</frameset>
<frameset cols="25%,50%,25%">...</frameset>
<frameset cols="100,300">...</frameset>
<frameset cols="20%,*">...</frameset>
51
THẺ <FRAMESET>
Thuộc tính rows giống nhƣ thuộc tính cols nhƣng chia cửa sổ trình duyệt thành các hàng
Thuộc tính border xác định độ dày đƣờng kẻ phân chia các khung, giá trị mặc định là 1
Không đặt trong thẻ <body>
52
THẺ <FRAME>
Xác định trang web đƣợc hiển thị trong một
khung.
Thuộc tính src chỉ ra địa chỉ của trang web.
Thuộc tính noresize không cho phép thay đổi kích thƣớc của khung.
Thuộc tính scrolling cho phép hoặc không cho
phép sử dụng các thanh cuộn, có các giá trị "yes",
"no" và "auto"
53
VÍ DỤ - MAINFRAME.HTM
<html>
<head>
<title>Main Frame</title>
</head>
<frameset rows="50%,50%" >
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
<body></body>
</html>
54
VÍ DỤ - MAINFRAME2.HTML
<html> <head> <title>Main Frame</title> </head> <frameset rows="30%,*"> <frame src="first.htm" noresize scrolling="no"> <frameset cols="30%,*"> <frame src="frameselect.htm" noresize scrolling="no"> <frame src="frame_a.htm" name="ShowFrame"> </frameset> </frameset> <body></body> </html>
55
VÍ DỤ - FRAMESELECT.HTM
<html>
<head>
<title>Select Frame</title>
</head>
<body>
<a href="frame_a.htm" target="ShowFrame">Frame A</a>
<a href="frame_b.htm" target="ShowFrame">Frame B</a>
</body>
</html>
56
VÍ DỤ
57
TẠO FORM TRÊN TRANG WEB
Form đƣợc sử dụng để nhập thông tin về ngƣời sử dụng
Một form chứa nhiều thành phần
Mỗi thành phần cho phép ngƣời sử dụng nhập thông tin ở các dạng khác nhau nhƣ nhập văn bản, lựa chọn, đánh dấu
58
VÍ DỤ - YAHOO
59
TẠO FORM TRÊN TRANG WEB
Sử dụng thẻ <form>...</form>
Cú pháp
<form>
<input>
<input>
...
</form>
Mỗi thẻ <input> xác định một dạng nhập dữ liệu.
60
THẺ <INPUT>
Thuộc tính type xác định kiểu nhập dữ liệu
Có các kiểu button, checkbox, radio, text,
password,...
Thuộc tính name đặt tên cho đối tƣợng
Thuộc tính value xác định giá trị ban đầu cho đối tƣợng
61
NHẬP DỮ LIỆU VĂN BẢN
<html> <head> <title>TextField</title> </head>
<body> <form> Ho ten: <input type="text" name="hoten">
Dia chi: <input type="text" name="diachi" value="Ha Noi">
Mat khau: <input type="password" name="matkhau"> </form> </body> </html> 62
NHẬP DỮ LIỆU VĂN BẢN
<html>
<body>
<h2>Vi du ve TextArea</h2>
<textarea cols="50" rows="10"> Chao cac ban.
</textarea>
</body>
</html>
63
LỰA CHỌN, ĐÁNH DẤU
<html> <head> <title>Option</title> </head> <body> <form> Gioi tinh:
Nam <input type="radio" name="gioitinh" value="nam"> Nu <input type="radio" name="gioitinh" value="nu">
So thich:
<input type="checkbox" name="sothich" value="docsach">Doc sach <input type="checkbox" name="sothich" value="xemphim">Xem phim <input type="checkbox" name="sothich" value="nghenhac">Nghe nhac </form> </body> </html>
64
DANH SÁCH LỰA CHỌN
<html> <body>
<form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form>
</body> </html>
65
ĐẶT CHÚ THÍCH VÀO TRONG HTML
<body>
<h2>Hello world</h2>
<!--
Đây là dòng chú thích
-->
Chào các bạn.
</body>
66
BÀI TẬP VỀ NHÀ
Thực hành tất cả các ví dụ đã nêu trong bài
Đọc trƣớc về JavaScript
67
Bạn đang đọc truyện trên: Truyen247.Pro