bai 2 HTML bai 2 HTML

1

Giới thiệu HTML

• HTML=HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn bản – Ngôn ngữ để viết các trang web.

• Do Tim Berner Lee phát minh và được W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994.

2

Đặc điểm

• HTML sử dụng các thẻ (tags) để định dạng dữ liệu

• HTML không phân biệt chữ hoa, chữ thường• Các trình duyệt thường không báo lỗi cú pháp

HTML. Nếu viết sai cú pháp chỉ dẫn đến kết quả hiển thị không đúng với dự định.

3

Thẻ (tag)• Có nhiều thẻ, mỗi thẻ có 1 tên và mang ý nghĩa khác

nhau.• Có 2 loại thẻ: thẻ đóng và thẻ mở• Cách viết thẻ:

– Thẻ mở: <tên_thẻ>Ví dụ: , , <img>…

– Thẻ đóng tương ứng: </tên_thẻ>Ví dụ: , Chú ý: luôn có thẻ mở nhưng có thể không có thẻ đóng tương ứng. Ví dụ: <img> không có thẻ đóng

4

Thuộc tính (property) của thẻ

• Một thẻ có thể có các thuộc tính nhằm bổ sung tác dụng cho thẻ

• Mỗi thuộc tính có tên thuộc tính (attribute)• Viết thẻ có thuộc tính:<tên_attribute1=“value1” attribute2=“value2”…>

• Chú ý:– Có thể thay đổi thứ tự, số lượng các thuộc tính mà không gây ra

lỗi cú pháp– Sự hỗ trợ các thẻ, thuộc tính ở mỗi trình duyệt là khác nhau. Chỉ

giống nhau ở các thẻ, thuộc tính cơ bản.

5

Cấu trúc một trang html

<HTML><HEAD>

<TITLE>DOCUMENT TITLE</TITLE></HEAD>

<BODY>WEB PAGE CONTENT

</BODY></HTML>

6

Tag Heading (H1-H6)

7

Comment in HTML Page• Dùng để thêm ghi chú.• Tag mở và đóng “<!- -” and “- -!>” • Example:<!– Đây là comment inline --!>

8

HTML Paragraph

9

text bold text <a href=“google.com”>google</a> 

 here is text for paragraph. here is text for paragraph. here is text for paragraph. here is text for paragraph. here is text for paragraph.

here is text for paragraph here is text for paragraph. here is text for paragraph. 



HTML Paragraph

10

• Chỉ có thẻ mở .

• Cho phép xuống dòng.

• là một thẻ rỗng, nhưng nó cũng có thể có các attribute (id, class, style).Ví dụ: 

HTML Line Break

11

• Thẻ <hr/> tạo 1 đường thẳng ngang trong trang html.

• Thẻ <hr> chia trang html thành nhiều vùng khác nhau.

• Sử dụng css để format lại thẻ <hr/> CSS, dùng id, class hay style.

• Ví dụ: <hr style="width:50%; height:4px; color:#1111fe" />

HTML <Hr> tag

12

• Font element 

• , , , <del>, ,…

• Other elements used for text formatting

Format Text Element

13

• Attribute face: – Syntax: text– Example: abc

• Attribute size– Syntax: text– Example: abc

• Attribute color– Syntax: text– Example: abc

Font Element

14

Bold, italic, underline and other elements

• Bold: bold

• Italic: italic

• Underline: underline

• Emphasized: emphasized

• Strong: strong

15

Other Element – Pre, tt, cite

16

Other Element – Del, Big, Small, Sub, Sup

17

Other Element – dfn, code, samp, kbd, var

18

Other Element – q, blockquote, address

19

HTML Lists

• Unordered Lists• Ordered Lists• Definition Lists• Nested Lists

20

Unordered Lists• Bắt đầu là <ul> và kết thúc </ul>• Có nhiều item, mỗi item <li>….</li>• Attribute type=“disc” , “circle”, “ square”• Default type=“disc”• Example: <ul>

<li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>

21

Ordered Lists• Bắt đầu là <ol> và kết thúc </ol>• Có nhiều item, mỗi item <li>….</li>• Attribute type:

type="1" - style: 1, 2, 3, ...type="i" - style: i, ii, iii, iv, ...type="I" - style: I, II, III, IV, ...type="a" - style: a, b, c, ...

type="A" - style: A, B, C, ...

• Mặc định, bắt đầu là 1 cho type=“1”, nếu muốn bắt đầu là một số khác, ta dùng attribute start=“4” trong <ol>. Ex.: <ol start="4">

22

Definition Lists• Definition List là một bộ gồm 3 thẻ:• <dl></dl> viết tắt của chữ "definition list" là cặp thẻ

bắt đầu và kết thúc cho một definition list.

• <dt></dt> viết tắt của chữ "defines an item" có nghĩa là xác định (hay định nghĩa) một mục trong một definition list.

• <dd></dd> viết tắt của chữ "defines describe an item" có nghĩa là xác định (hay định nghĩa) một mô tả của một mục.

23

Nested Lists• Trong một list có thể có thêm một hoặc nhiều list.• Có thể thêm , <div>, <ul> vào thẻ <li>.• <ul>

<li>List item one</li> <li>List item two with subitems:

<ul> <li>Subitem 1</li> <li>Subitem 2</li>

</ul> </li> <li>Final list item</li>

</ul>

24

Adding images• Image format: GIF, JPEG, PNG, BMP, TIFF, PCX• Thẻ mở và đóng: <img>…</img>• Attribute:

src: đường dẫn – tương đối hoặc tuyệt đối .alt: text hiển thị nếu không có ảnh.align: Bottom, Middle, Top, Left, Right – không còn sử dụng trong HTML5.width: image length in pixels.height: image height in pixels. hspace, vspace – không còn sử dụng trong HTML5.

25

Adding images

26

Hyperlink

• General syntax• External link• Internal link

27

General syntax

<a href=“url” title=“Link title”>Link text</a>• a: the HTML element to create links• href: specifies the destination of a link• url: the address of the link• title: specifies a title for the hyperlink• Link text: text that appears in the web page

28

External link

• Absolute path: Definition: The URL contains the domain name too.Example:

<a href=“www.google.com” title=“Google”>Search</a>

• Relative path: Definition: The URL contains only the document name.Example:

<a href=“index.php” title=“Web Course”>Home</a>

http://www.google.com/

29

Internal link

• Allow to jump to another section on web page• To create internal link:

– Create bookmark– Use bookmark as value of href

• Example:<a name=“top”></a>…<a href=“#top”>Return top</a>

30

Image Map• Khái niệm: Image-map là một image với nhiều vùng có khả năng click

được.• Example:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"></map>

31

Create Image Map

• Step 1: Add attribute usemap inside <img> tag

• Step 2: Use <map> tag

• Step 3: In <map> tag, use <area> tag to define link

32

Create Image Map

33

Create Image Map

34

HTML Table

• Creating table• Table structure• Table attributes

35

Creating table

<table>: create table.<tr>: create row.<td>: create column.

36

Creating table

37

Table structure

38

Table structure

Using <th> tag, “rowspan”,”colspan” attribute

39

Table structure

40

Table structure

41

Table structure

Table with caption, thead and tbody

42

Table attributes

Table attributes

43

Table attributes

Using “width”, “cellspacing”, “frame”, “rule”

bai 2 HTML bai 2 HTML

Documents

Transcript of bai 2 HTML bai 2 HTML