Upload
tran-vo-khoi-nguyen
View
23
Download
1
Embed Size (px)
DESCRIPTION
bai 2 HTMLbai 2 HTMLbai 2 HTMLbai 2 HTMLbai 2 HTMLbai 2 HTMLbai 2 HTMLbai 2 HTMLbai 2 HTMLbai 2 HTMLbai 2 HTML
Citation preview
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ụ: <u>, <p>, <img>…
– Thẻ đóng tương ứng: </tên_thẻ>Ví dụ: </u>, </p>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 --!>
<!-- Start Container --!><div class=“container”></div><!-- End container --!>
<! - -comment multi line////-->
8
HTML Paragraph
9
<p>text <b> bold text </b> <a href=“google.com”>google</a> </p>
<p> 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.</p>
<p>here is text for paragraph<br/>here is text for paragraph.<br/>here is text for paragraph.<br/>
</p>
HTML Paragraph
10
• Chỉ có thẻ mở <br/>.
• Cho phép xuống dòng.
• <br /> là một thẻ rỗng, nhưng nó cũng có thể có các attribute (id, class, style).Ví dụ: <br id="idb" />
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 <font>
• <b>, <i>, <u>, <del>, <sup>,…
• Other elements used for text formatting
Format Text Element
13
• Attribute face: – Syntax: <font face="typeface">text</font>– Example: <font face=“Arial Black”>abc</font>
• Attribute size– Syntax: <font size="value">text</font>– Example: <font size=“1”>abc</font>
• Attribute color– Syntax: <font color="a_color">text</font>– Example: <font color=“red”>abc</font>
Font Element
14
Bold, italic, underline and other elements
• Bold: <b>bold</b>
• Italic: <i>italic</i>
• Underline: <u>underline</u>
• Emphasized: <em>emphasized</em>
• Strong: <strong>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 <p>, <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>
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”