42
1 Căn bản về HTML Căn bản về HTML (Hypertext Markup (Hypertext Markup Language) Language) Tài liệu tham khảo: http://www.w3schools.com a

Căn bản về HTML (Hypertext Markup Language)

  • Upload
    brinda

  • View
    34

  • Download
    0

Embed Size (px)

DESCRIPTION

Căn bản về HTML (Hypertext Markup Language). Tài liệu tham khảo: http://www.w3schools.com. a. Nội dung. 1. Cấu trúc trang HTML 2. Một số tag cơ bản trong HTML 3. Lists 4. Hyperlink & image 5. Form 6. Table 7. Frame. Cấu trúc trang HTML. Tiêu đề - PowerPoint PPT Presentation

Citation preview

Page 1: Căn bản về HTML  (Hypertext Markup Language)

1

Căn bản về HTMLCăn bản về HTML (Hypertext Markup Language) (Hypertext Markup Language)

Tài liệu tham khảo:

http://www.w3schools.com

a

Page 2: Căn bản về HTML  (Hypertext Markup Language)

2

Nội dungNội dung

1. 1. Cấu trúc trang HTMLCấu trúc trang HTML

2. Một số tag cơ bản trong HTML2. Một số tag cơ bản trong HTML

3. Lists3. Lists

4. Hyperlink & image4. Hyperlink & image

5. Form5. Form

6. Table6. Table

7. Frame7. Frame

Page 3: Căn bản về HTML  (Hypertext Markup Language)

3

Cấu trúc trang HTMLCấu trúc trang HTML

<HTML> <HTML> <HEAD> <HEAD> <TITLE>Tiêu đề </TITLE><TITLE>Tiêu đề </TITLE></HEAD></HEAD><BODY><BODY> Nội dung của trang HTML.Nội dung của trang HTML.</BODY></BODY>

</HTML></HTML>

Page 4: Căn bản về HTML  (Hypertext Markup Language)

4

Một số tag cơ bản(1)Một số tag cơ bản(1)

1) <html></html>: định nghĩa trang HTML

2) <head> </head>: định nghĩa phần đầu trang HTML

3) <title> </title>: tiêu đề của trang HTML

4) <body></body>: phần nội dung chính trang

5) h?> </h?> Các kiểu định dạng tiêu đề

? : 1-66) <p></p> định nghĩa đoạn văn bản<p align =“left/right/center”> </p>:canh lề trái/phải/giữa <p align =“left/right/center”> </p>:canh lề trái/phải/giữa

cho đoạn đoạn văn bản cho đoạn đoạn văn bản 7) <br> Chèn dấu kết thúc dòng8)<hr> đường kẻ ngang9)<!--phần này không hiển thị trên trang Web --> : chú

thích

Page 5: Căn bản về HTML  (Hypertext Markup Language)

5

Một số tag cơ bản (1)Một số tag cơ bản (1)

<html><html><head><head><title>Heading</title><title>Heading</title></head></head><body><body> <!- - sử dụng các heaing từ lớn <!- - sử dụng các heaing từ lớn đến nhỏ - ->đến nhỏ - -> <h1>This is a heading</h1><h1>This is a heading</h1> <h2>This is a heading</h2><h2>This is a heading</h2> <h3>This is a heading</h3><h3>This is a heading</h3> <h4>This is a heading</h4><h4>This is a heading</h4> <h5>This is a heading</h5> <h5>This is a heading</h5> <h6>This is a heading</h6><h6>This is a heading</h6></body></body>

</html></html>

Ví dụ Sử dụng tất các heading từ h1 đến h6 Ví dụ Sử dụng tất các heading từ h1 đến h6

Page 6: Căn bản về HTML  (Hypertext Markup Language)

6

Kết quả

Page 7: Căn bản về HTML  (Hypertext Markup Language)

7

Một số tag cơ bản (2)Một số tag cơ bản (2)

Các tag dùng để định dạng văn bảnCác tag dùng để định dạng văn bản

1) <b></b>: in đậm 1) <b></b>: in đậm

2)<i></i>: in nghiêng 2)<i></i>: in nghiêng

3) <u></u>: gạch chân3) <u></u>: gạch chân

4) <font face =“tên font” size = “cở chữ” color =“mã 4) <font face =“tên font” size = “cở chữ” color =“mã màu”> </font>: qui dạng font chữ, kích thước và màu màu”> </font>: qui dạng font chữ, kích thước và màu chữchữ

Page 8: Căn bản về HTML  (Hypertext Markup Language)

8

<html>

<head><title></title></head>

<body>

<font size="4" face=“Times New Roman">

<p align="center"> <u>TỜ TRÌNH </u> </p>

</font>

<font size="2" face="“Times New Roman"">

Kính đề nghị <b>BỘ GIÁO DỤC VÀ ĐÀO TẠO</b> cho phép trường CĐSP X được phép mở

<i>ngành đào tạo tin học trình độ cao đẩng</i>

<p>Lý do và đièu kiện mở ngành:</p>

</font>

<font size="2" face=“Arial"><p align ='right'>

<b><i>Hiệu trưởng</i></b></p></font>

</body>

</html>

Một số tag cơ bản (2)Một số tag cơ bản (2)Ví dụ sử dụng các tags định dang văn bảnVí dụ sử dụng các tags định dang văn bản

Page 9: Căn bản về HTML  (Hypertext Markup Language)

9

Kết quả

Page 10: Căn bản về HTML  (Hypertext Markup Language)

10

Một số ký tự đặc biệtMột số ký tự đặc biệt

Ký tựKý tự Mã sốMã số têntên

<< &#60&#60 &lt;&lt;

>> &#62&#62 &gt;&gt;

©© &#169&#169 &copy;&copy;

&& &#34&#34 &amp;&amp;

&nbsp;&nbsp;

Page 11: Căn bản về HTML  (Hypertext Markup Language)

11

MàuMàu (1)(1)

Ví dụ thiết lập màu chữ và màu nền cho trang webVí dụ thiết lập màu chữ và màu nền cho trang web

<html><html><head><head><title></title><title></title></head></head><body bgcolor = “#0000ff” text =“#ffffff"><body bgcolor = “#0000ff” text =“#ffffff"> Chữ trắng trên nền xanhChữ trắng trên nền xanh</body></body>

</html></html>

Page 12: Căn bản về HTML  (Hypertext Markup Language)

12

Màu (2)Màu (2)

MàuMàu Giá trịGiá trịBlackBlack “#000000”

WhiteWhite “#FFFFFF”

GrayGray “#808080”

GreenGreen “#008000”

YellowYellow “#FFFF00”

BlueBlue “#0000FF”

RedRed “#FF0000”

Một số màu cơ bảnMột số màu cơ bản

Page 13: Căn bản về HTML  (Hypertext Markup Language)

13

Màu (3)Màu (3)

Bảng màu Bảng màu thường dùngthường dùng

Page 14: Căn bản về HTML  (Hypertext Markup Language)

14

Danh sách (List)Danh sách (List)

1. Tạo danh sách có thứ tự (Ordered List)1. Tạo danh sách có thứ tự (Ordered List) <ol><ol> <li>option 1</li><li>option 1</li> <li>option 2</li><li>option 2</li> ……… ……… <li>option n</li><li>option n</li></ol></ol>2. Danh sách không có thứ tự (Unordered List)2. Danh sách không có thứ tự (Unordered List) <ul><ul> <li>option 1</li><li>option 1</li> <li>option 2</li><li>option 2</li> ……… ……… <li>option n</li><li>option n</li></ul></ul>

Page 15: Căn bản về HTML  (Hypertext Markup Language)

15

<html> <html> <head> <title>Order & UnOrderList</title> </head><head> <title>Order & UnOrderList</title> </head>

<body><body> <font size="4" face=“Time New Roman"> <font size="4" face=“Time New Roman"> Lý do mở ngành:Lý do mở ngành: <OL><OL> <LI>Phát triển nguồn nhân lực</LI><LI>Phát triển nguồn nhân lực</LI> <LI>Đội ngũ giáo viên có đủ khả năng phụ trách chương trình <LI>Đội ngũ giáo viên có đủ khả năng phụ trách chương trình

giảng day</LI>giảng day</LI> <LI>Về cơ sở vật chất:<LI>Về cơ sở vật chất:

<UL><UL><LI>04 phòng máy thực hành</LI><LI>04 phòng máy thực hành</LI><LI>02 phòng nghiên cứu của giáo viên</LI><LI>02 phòng nghiên cứu của giáo viên</LI>

</UL></UL> </LI></LI> </OL></OL> </font></font> </body> </body> </html></html>

Danh sách (List)Danh sách (List)Ví dụ: Tạo danh sách

Page 16: Căn bản về HTML  (Hypertext Markup Language)

16

Ví dụ: Tạo danh sách

Kết quả :

Page 17: Căn bản về HTML  (Hypertext Markup Language)

17

Liên kết & Hình ảnhLiên kết & Hình ảnh

1. 1. Liên kết (Link) và Siêu liên kết (HyperLink)Liên kết (Link) và Siêu liên kết (HyperLink)

- Liên kết (link): là 1 địa chỉ, chỉ đến 1 tài nguyên - Liên kết (link): là 1 địa chỉ, chỉ đến 1 tài nguyên trên web (trên web (một trang HTML, hình ảnh, file âm một trang HTML, hình ảnh, file âm thanh, một bộ phim, ...thanh, một bộ phim, ...).).

- Siêu liên kết (Hyperlink): - Siêu liên kết (Hyperlink): là 1 liên kết có thể là 1 liên kết có thể tương tác bằng cách nhấp chuột hoặc chọn tương tác bằng cách nhấp chuột hoặc chọn bằng bàn phím hay 1 thiết bị khác. bằng bàn phím hay 1 thiết bị khác.

- Một liên kết/ 1 siêu liên kết - Một liên kết/ 1 siêu liên kết dùng để chỉ đến 1 dùng để chỉ đến 1 tài nguyên trong cùng 1 website hoặc khác tài nguyên trong cùng 1 website hoặc khác website, cùng 1 trang web hay 1 trang khác.website, cùng 1 trang web hay 1 trang khác.

Page 18: Căn bản về HTML  (Hypertext Markup Language)

18

Liên kết & Hình ảnhLiên kết & Hình ảnh

1. 1. Liên kết (Link) và Siêu liên kết (HyperLink)Liên kết (Link) và Siêu liên kết (HyperLink)- …- …- Khai báo 1 siêu liên kết: dùng tag A- Khai báo 1 siêu liên kết: dùng tag A Cú pháp: Cú pháp: <a href=“Link”><a href=“Link”> Nhấn vào đâyNhấn vào đây </a></a> trong đó: trong đó: Nhấn vào đây:Nhấn vào đây: là dòng chữ được hiển thị là dòng chữ được hiển thị Link:Link: là liên kết được chỉ đến là liên kết được chỉ đến Ví dụ: Ví dụ: <a href=“<a href=“www.btu.edu.vn/index.phpwww.btu.edu.vn/index.php”> ”> Trường CĐ Cộng Đồng Bình ThuậnTrường CĐ Cộng Đồng Bình Thuận </a></a>

Page 19: Căn bản về HTML  (Hypertext Markup Language)

19

Liên kết & Hình ảnhLiên kết & Hình ảnh

1. 1. Liên kết (Link) và Siêu liên kết (HyperLink)Liên kết (Link) và Siêu liên kết (HyperLink)- …- …- Tạo 1 liên kết trong cùng 1 trang web: tạo 1 - Tạo 1 liên kết trong cùng 1 trang web: tạo 1

điểm neo và tạo liên kết chỉ đến điểm neođiểm neo và tạo liên kết chỉ đến điểm neo + + Tạo 1 điểm neoTạo 1 điểm neo:: Cp: Cp: <a <a namename =“=“tên vị trí điểm neotên vị trí điểm neo”> </a>”> </a> Ví dụ: Ví dụ: <a <a namename =“=“toptop”> </a> ”> </a> + + Tạo 1 liên kết chỉ đến điểm neoTạo 1 liên kết chỉ đến điểm neo:: Cp: Cp: <a <a hrefhref =“=“##tên vị trí điểm neotên vị trí điểm neo”> ”> Mo taMo ta </a> </a> Ví dụ: Ví dụ: <a <a hrefhref =“=“##toptop”> ”> Về đầu trangVề đầu trang </a> </a>

Page 20: Căn bản về HTML  (Hypertext Markup Language)

20

Liên kết & Hình ảnhLiên kết & Hình ảnh

1. 1. Liên kết (Link) và Siêu liên kết (HyperLink)Liên kết (Link) và Siêu liên kết (HyperLink)- …- …- Tạo 1 liên kết chỉ đến địa chỉ email- Tạo 1 liên kết chỉ đến địa chỉ email Cp: Cp: <a <a hrefhref =“=“mailto:mailto:tên địa chỉ emailtên địa chỉ email”>”>

Tên chủ sở hữu emailTên chủ sở hữu email </a></a> Ví dụ: Ví dụ: <a <a hrefhref=“=“mailto:mailto:[email protected]@btu.edu.vn”> ”>

Gửi mail cho Huỳnh Triệu VỹGửi mail cho Huỳnh Triệu Vỹ </a></a>

Page 21: Căn bản về HTML  (Hypertext Markup Language)

21

Liên kết & Hình ảnhLiên kết & Hình ảnh

1. 1. Liên kết (Link) và Siêu liên kết (HyperLink)Liên kết (Link) và Siêu liên kết (HyperLink)- …- …- Thuộc tính Target- Thuộc tính Target Cú pháp: Cú pháp: <a href=“<a href=“LinkLink” target =“” target =“Giá trịGiá trị”> ”> Nhấn vào đâyNhấn vào đây </a></a> trong đó: trong đó: Giá trịGiá trị: có thể là _blank, _parent, _self, … : có thể là _blank, _parent, _self, … Ví dụ: Ví dụ: <a href=“<a href=“www.btu.edu.vn/index.php”” target=“ target=“_blank_blank”> ”> Trường CĐ Cộng Đồng Bình ThuậnTrường CĐ Cộng Đồng Bình Thuận </a></a>

Page 22: Căn bản về HTML  (Hypertext Markup Language)

22

Liên kết & Hình ảnhLiên kết & Hình ảnh2. Hình ảnh (Image)2. Hình ảnh (Image)- Chèn hình vào trang web- Chèn hình vào trang web Cú pháp: Cú pháp: <img src=“<img src=“LinkLink” width=“” width=“Giá trịGiá trị” ” height=“height=“Giá trịGiá trị” border=“” border=“Giá trịGiá trị”> ”> trong đó: trong đó: widthwidth: là chiều rộng của hình : là chiều rộng của hình

heightheight: là chiều cao của hình : là chiều cao của hình borderborder: là độ dày của đường viền bao quanh hình. : là độ dày của đường viền bao quanh hình.

Ví dụ: Ví dụ: <img src=“<img src=“images/logo.jpgimages/logo.jpg” border=“” border=“00” > ” >

Page 23: Căn bản về HTML  (Hypertext Markup Language)

23

Kết quả

Page 24: Căn bản về HTML  (Hypertext Markup Language)

24

<HTML><HTML><head><title> Animal</title></head><head><title> Animal</title></head><body><body> <font face=“Time New Roman"> <font face=“Time New Roman"> Đây là Dolphin: Đây là Dolphin: <img src="delfin.jpg" alt ="Dolphin" width ="150" height="130"/> <br><img src="delfin.jpg" alt ="Dolphin" width ="150" height="130"/> <br> Kích vào để xem: <br>Kích vào để xem: <br> <a href = “Elephant.jpg"> Elephant </a><br><a href = “Elephant.jpg"> Elephant </a><br> <a href = “Crocodiles.jpg"> Crocodiles</a><br><a href = “Crocodiles.jpg"> Crocodiles</a><br> <a href = “Pinguini.jpg"> Pinguini</a><br><a href = “Pinguini.jpg"> Pinguini</a><br> <a href = "Kangroo.jpg">Kangroo</a><br> <a href = "Kangroo.jpg">Kangroo</a><br> Mọi chi tiết xin liên hệ Mọi chi tiết xin liên hệ <a href = "mailto:[email protected]"> email </a><a href = "mailto:[email protected]"> email </a> </font></font> </body></body></HTML></HTML>

Hyperlinks &ImageHyperlinks &Image

Ví dụ: tạo các liên kết

Page 25: Căn bản về HTML  (Hypertext Markup Language)

25

Form (1)Form (1)

<form <form name=name=tenformtenform method=method=POSTPOST//GETGET action= action=tenfiletenfile>>

Nội dung Form Nội dung Form </form></form>

Cấu trúc FormCấu trúc Form::

Một số điều khiển trên form:Một số điều khiển trên form: Text, password, file, radio Text, password, file, radio

button, check box, combo box, textbox,… button, check box, combo box, textbox,…

Các điều khiển định nghĩa bởi input tag:Các điều khiển định nghĩa bởi input tag:

1.1. Text Text : hộp nhập 1 dòng văn bản : hộp nhập 1 dòng văn bản

2. 2. PasswordPassword: sử dụng cho dữ liệu kiểu password: sử dụng cho dữ liệu kiểu password

3.3. File: File: Sử dụng để upload 1 fileSử dụng để upload 1 file

Page 26: Căn bản về HTML  (Hypertext Markup Language)

26

Form (2)Form (2)

4.4. Radio: Radio: radio button radio button

5. 5. Checkbox:Checkbox: hộp check box hộp check box

6. 6. SubmitSubmit: nút lệnh sử dụng để submit thông tin bên trong trang : nút lệnh sử dụng để submit thông tin bên trong trang

đến serverđến server

7. 7. Reset:Reset: nút lệnh sử dụng để nhập lại tất cá dữ liệu bên trong 1 nút lệnh sử dụng để nhập lại tất cá dữ liệu bên trong 1

formform

Các điều khiển không định nghĩa với input tag:Các điều khiển không định nghĩa với input tag:

Select:Select: sử dụng để tạo combo box sử dụng để tạo combo box

TextareaTextarea: vùng nhập dữ liệu trên nhiều dòng: vùng nhập dữ liệu trên nhiều dòng

Page 27: Căn bản về HTML  (Hypertext Markup Language)

27

Form (3)Form (3)

Ví dụ 1: tạo form gồm 2 text box họ tên và ngày Ví dụ 1: tạo form gồm 2 text box họ tên và ngày

sinh và 1 passwordsinh và 1 password

<form><form>

Họ tên: <input type=“text”> <br>Họ tên: <input type=“text”> <br>

Ngày sinh: <input type=“text”> <br>Ngày sinh: <input type=“text”> <br>

Password: <input type=“password”>Password: <input type=“password”>

</form></form>

Page 28: Căn bản về HTML  (Hypertext Markup Language)

28

Ví dụ: Tạo form nhập dữ liệu dùng để mở tài khoàn của NSD nhưu sau:Ví dụ: Tạo form nhập dữ liệu dùng để mở tài khoàn của NSD nhưu sau:<HTML><HTML><head><head><title> Nguoi dung moi </title><title> Nguoi dung moi </title></head></head><body><body> <form ><form > <font face=“Time New Roman"> <font face=“Time New Roman"> <h2> <h2> Đăng ký người dùngĐăng ký người dùng </h2> <br/> </h2> <br/> Họ tên: <input type ="text" name ="hoten" size="20"> <br/><br/>Họ tên: <input type ="text" name ="hoten" size="20"> <br/><br/> Giới tính: <input type ="radio" name ="gioitinh" value="nam"> NamGiới tính: <input type ="radio" name ="gioitinh" value="nam"> Nam <input type ="radio" name ="gioitinh" value="nu"> Nữ <br/><br/><input type ="radio" name ="gioitinh" value="nu"> Nữ <br/><br/> Ngày sinh: <input type ="text" name ="ngay" size="7"> Ngày sinh: <input type ="text" name ="ngay" size="7"> <input type ="text" name ="thang" size="7"><input type ="text" name ="thang" size="7"> <input type ="text" name ="nam" size="7"><br/><br/><input type ="text" name ="nam" size="7"><br/><br/>

Form (4) Form (4)

Page 29: Căn bản về HTML  (Hypertext Markup Language)

29

Trình độ chuyên môn: Trình độ chuyên môn:

<select name="trinhdo" size = "1"><select name="trinhdo" size = "1">

<option value ="tc">Trung cấp</option><option value ="tc">Trung cấp</option>

<option value ="cd"> Cao đẳng </option><option value ="cd"> Cao đẳng </option>

<option value ="dh"> Đại học </option><option value ="dh"> Đại học </option>

<option value ="ths"> Thạc sỹ </option><option value ="ths"> Thạc sỹ </option>

<option value ="ts"> Tiến sỹ </option> <br><br> <option value ="ts"> Tiến sỹ </option> <br><br> </select> </select>

<br><br><br><br>

Ngoại ngữ: <input type ="checkbox" name ="ngoaingu" value="Anh">Anh Ngoại ngữ: <input type ="checkbox" name ="ngoaingu" value="Anh">Anh

<input type ="checkbox" name ="ngoaingu" value="Phap">Pháp<input type ="checkbox" name ="ngoaingu" value="Phap">Pháp

<input type ="checkbox" name ="ngoaingu" value="Duc">Đức <input type ="checkbox" name ="ngoaingu" value="Duc">Đức

<input type ="checkbox" name ="ngoaingu" value="Trung">Trung <input type ="checkbox" name ="ngoaingu" value="Trung">Trung

<input type ="checkbox" name ="ngoaingu" value="Khac">Khác <input type ="checkbox" name ="ngoaingu" value="Khac">Khác

<br><br><br><br>

Form (5) Form (5)

Page 30: Căn bản về HTML  (Hypertext Markup Language)

30

Email : <input type ="text" name ="email" size="40"><br><br>Email : <input type ="text" name ="email" size="40"><br><br>

UserName: <input type ="text" name ="username“ size="20"><br><br>UserName: <input type ="text" name ="username“ size="20"><br><br>

Password: <input type ="password" name ="password1“ Password: <input type ="password" name ="password1“ size="20"><br><br>size="20"><br><br>

Nhập lại password: <input type ="password" name="password2“ Nhập lại password: <input type ="password" name="password2“ size="20"><br><br>size="20"><br><br>

Ghi chú: <br>Ghi chú: <br>

<textarea name = "ghichu" cols="30" rows="5"></textarea> <br><textarea name = "ghichu" cols="30" rows="5"></textarea> <br>

<input type ="submit" name ="submit" value=“Đồng ý"> <input type ="submit" name ="submit" value=“Đồng ý">

<input type ="reset" name ="reset" value=“Hủy bỏ"> <input type ="reset" name ="reset" value=“Hủy bỏ">

</form></form>

</body></body>

</html></html>

Page 31: Căn bản về HTML  (Hypertext Markup Language)

31

Kết quả

Page 32: Căn bản về HTML  (Hypertext Markup Language)

32

Table (1)Table (1)

<TABLE><TR>

<TD>…</TD>….<TD>…</TD>

</TR><TR>

<TD>…</TD><TD>…</TD>

</TR></TABLE>

Bắt đầu bảng

Dòng đầu

Cột đầu của dòng

Cột thứ n

Kết thúc dòng

Kết thúc bảng

Page 33: Căn bản về HTML  (Hypertext Markup Language)

33

Một số thuộc tính trong bảngMột số thuộc tính trong bảngThuộc tính Giá trị Chức năng

Border 0,1 ,2, .. Xác định độ rộng đường viền

cellpadding

cellspacing

align Left, right, center,Justify Canh lề trái, phải, giữa, đều 2 bên

valign top, middle, bottom Canh lề theo chiều dọc: trên, giữa

width Pixels % Quy định độ rộng của ô

colspan Số cột Quy định số cột của ô

rowspan Só dòng Quy định số dòng của ô

bgcolor #xxxxxx (mã màu) Quy định màu nền cho ô

Table (2)Table (2)

Page 34: Căn bản về HTML  (Hypertext Markup Language)

34

Table (3)Table (3)

Ví dụ:Ví dụ: tạo bảng tạo bảng

<TABLE border=1><TABLE border=1><TR><TR>

<TD>Row 1, Cell 1</TD><TD>Row 1, Cell 1</TD><TD>Row 1, Cell 2</TD><TD>Row 1, Cell 2</TD><TD>Row 1, Cell 3</TD><TD>Row 1, Cell 3</TD>

</TR></TR><TR><TR>

<TD rowspan=2>Row 2, <TD rowspan=2>Row 2, Cell 1</TD>Cell 1</TD>

<TD colspan=2>Row 2, <TD colspan=2>Row 2, Cell 2</TD>Cell 2</TD></TR></TR><TR><TR>

<TD>Row 3, Cell 2</TD><TD>Row 3, Cell 2</TD><TD>Row 3, Cell 3</TD><TD>Row 3, Cell 3</TD>

</TR></TR></TABLE></TABLE>

Page 35: Căn bản về HTML  (Hypertext Markup Language)

35

Kết quả

Page 36: Căn bản về HTML  (Hypertext Markup Language)

36

Table (4)Table (4)

Ví dụ:Ví dụ: tạo bảng tạo bảng

<TABLE border=1><TABLE border=1><TR><TR>

<TD>Row 1, Cell 1</TD><TD>Row 1, Cell 1</TD><TD>Row 1, Cell 2</TD><TD>Row 1, Cell 2</TD><TD>Row 1, Cell 3</TD><TD>Row 1, Cell 3</TD>

</TR></TR><TR><TR>

<TD rowspan=2>Row 2, <TD rowspan=2>Row 2, Cell 1</TD>Cell 1</TD>

<TD colspan=2>Row 2, <TD colspan=2>Row 2, Cell 2</TD>Cell 2</TD></TR></TR><TR><TR>

<TD>Row 3, Cell 2</TD><TD>Row 3, Cell 2</TD><TD>Row 3, Cell 3</TD><TD>Row 3, Cell 3</TD>

</TR></TR></TABLE></TABLE>

Page 37: Căn bản về HTML  (Hypertext Markup Language)

37

Kết quả

Page 38: Căn bản về HTML  (Hypertext Markup Language)

38

Table (5)Table (5)

Ví dụ: Tạo bảng và canh lề cho cột

<table width="400" border="1"> <tr> <th align="left">Money spent on....</th> <th align="right">January</th> <th align="right">February</th></tr> <tr><td align="left">Clothes</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr><td align="left">Make-Up</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr><td align="left">Food</td> <td align="right">$730.40</td> <td align="right">$650.00</td></tr></table>

Page 39: Căn bản về HTML  (Hypertext Markup Language)

39

Frame (1)Frame (1) Columns (Cột)Columns (Cột)

<frameset cols =“*,*”><frameset cols =“*,*”> <frame src =“page1.html”/><frame src =“page1.html”/>

<frame src =“page2.html”/><frame src =“page2.html”/>……

</frameset></frameset>

Rows (dòng)Rows (dòng)

<frameset rows =“*,*”><frameset rows =“*,*”> <frame src =“page1.html”/><frame src =“page1.html”/><frame src =“page2.html”/><frame src =“page2.html”/>……

</frameset></frameset>

Page 40: Căn bản về HTML  (Hypertext Markup Language)

40

Frame (2)Frame (2)

Ví dụ: Sử dụng FrameVí dụ: Sử dụng Frame

<!– <!– mainPage.htmlmainPage.html --> --><html><html><head><head><title> About HTML </title><title> About HTML </title></head></head><frameset rows="15%,*"><frameset rows="15%,*"> <frame src ="header.html" name= "header"/><frame src ="header.html" name= "header"/> <frameset cols="15%,*"><frameset cols="15%,*"> <frame src ="link.html" name= "links" /><frame src ="link.html" name= "links" /> <frame src ="introduction.html" name="content"/> <frame src ="introduction.html" name="content"/> </frameset> </frameset> </frameset></frameset></html></html>

Page 41: Căn bản về HTML  (Hypertext Markup Language)

41

Frame (3)Frame (3)

<!--links.html--><!--links.html--><html><html><head><title> Links</title><head><title> Links</title><base target = "content"><base target = "content"></head></head><body bgcolor="lightgrey"><body bgcolor="lightgrey"> <a href ="basichtml.html">Basic HTML</a><br/><a href ="basichtml.html">Basic HTML</a><br/> <a href ="format.html">formatting</a><br/><a href ="format.html">formatting</a><br/> <a href ="color.html">colour</a><br/><a href ="color.html">colour</a><br/> <a href="Order&unOrderList.html">order&UnorderList</a><br/><a href="Order&unOrderList.html">order&UnorderList</a><br/> <a href ="FormInput.html">formInput</a><br/><a href ="FormInput.html">formInput</a><br/> <a href ="InputtingTypes.html">InputtingTypes</a><br/><a href ="InputtingTypes.html">InputtingTypes</a><br/> <a href ="Links.html">Links</a><br/><a href ="Links.html">Links</a><br/> <a href ="table.html">tables</a><br/><a href ="table.html">tables</a><br/> </body> </body> </html></html>

Page 42: Căn bản về HTML  (Hypertext Markup Language)

42

Kết quảKết quả