Lập trình HTML cơ bản đến nâng cao html
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.1 MB, 94 trang )
HTML
1
Content
• HTML Introduction
• Basic HTML elements
• HTML Headings and
Comments
• Paragraphs, Line break,
Horizontal rule
• HTML Text Formatting
• HTML Lists
• Adding images
• Hyperlinks – Links
•
•
•
•
•
•
•
•
Image Map
HTML Tables
Forms and Input
New Form elements and
attributes in HTML5
CSS – Cascading Style
Sheets in HTML
DIV and SPAN
HTML object and param
Reference
2
Content
• HTML Introduction
• Basic HTML elements
• HTML Headings and
Comments
• Paragraphs, Line break,
Horizontal rule
• HTML Text Formatting
• HTML Lists
• Adding images
• Hyperlinks – Links
•
•
•
•
•
•
•
•
Image Map
HTML Tables
Forms and Input
New Form elements and
attributes in HTML5
CSS – Cascading Style
Sheets in HTML
DIV and SPAN
HTML object and param
Reference
3
HTML introduction
• Web markup language
• Text format
• Graphic editors
– Macromedia Dreamweaver
– Adobe GoLive
– Microsoft Frontpage
4
Content
• HTML Introduction
• Basic HTML elements
– What is HTML?
– HTML Document Structure
• HTML Headings and
Comments
• Paragraphs, Line break,
Horizontal rule
• HTML Text Formatting
• HTML Lists
• Adding images
• Hyperlinks – Links
•
•
•
•
•
•
•
•
Image Map
HTML Tables
Forms and Input
New Form elements and
attributes in HTML5
CSS – Cascading Style
Sheets in HTML
DIV and SPAN
HTML object and param
Reference
5
What is HTML?
•
•
•
•
•
Element
Attributes
Values
Codes are written in “<” and “>”
Example
<FONT COLOR=“RED”>Red Text</FONT>
6
Content
• HTML Introduction
• Basic HTML elements
– What is HTML?
– HTML Document Structure
• HTML Headings and
Comments
• Paragraphs, Line break,
Horizontal rule
• HTML Text Formatting
• HTML Lists
• Adding images
• Hyperlinks – Links
•
•
•
•
•
•
•
•
Image Map
HTML Tables
Forms and Input
New Form elements and
attributes in HTML5
CSS – Cascading Style
Sheets in HTML
DIV and SPAN
HTML object and param
Reference
7
HTML Document Structure
<HTML>
<HEAD>
<TITLE>DOCUMENT TITLE</TITLE>
</HEAD>
<BODY>
WEB PAGE CONTENT
</BODY>
</HTML>
8
Content
• HTML Introduction
• Basic HTML elements
• HTML Headings and
Comments
– HTML Heading
– HTML Comment
• Paragraphs, Line break,
Horizontal rule
• HTML Text Formatting
• HTML Lists
• Adding images
• Hyperlinks – Links
•
•
•
•
•
•
•
•
Image Map
HTML Tables
Forms and Input
New Form elements and
attributes in HTML5
CSS – Cascading Style
Sheets in HTML
DIV and SPAN
HTML object and param
Reference
9
HTML Heading
Figure 1: HTML Heading
10
Content
• HTML Introduction
• Basic HTML elements
• HTML Headings and
Comments
– HTML Heading
– HTML Comment
• Paragraphs, Line break,
Horizontal rule
• HTML Text Formatting
• HTML Lists
• Adding images
• Hyperlinks – Links
•
•
•
•
•
•
•
•
Image Map
HTML Tables
Forms and Input
New Form elements and
attributes in HTML5
CSS – Cascading Style
Sheets in HTML
DIV and SPAN
HTML object and param
Reference
11
HTML Comment
• Used to insert note.
• Use “<!- -” and “- -!>”
• Example:
<!-- This tag is used in all HTML files --!>
<!-- Start tag --!>
<HTML>
</HTML>
<!-- End tag --!>
12
Content
• HTML Introduction
• Basic HTML elements
• HTML Headings and
Comments
• Paragraphs, Line break,
Horizontal rule
– HTML Paragraph
– Line break
– Horizontal rule
•
•
•
•
HTML Text Formatting
HTML Lists
Adding images
Hyperlinks – Links
•
•
•
•
•
•
•
•
Image Map
HTML Tables
Forms and Input
New Form elements and
attributes in HTML5
CSS – Cascading Style
Sheets in HTML
DIV and SPAN
HTML object and param
Reference
13
HTML Paragraph
Figure 2: HTML Paragraph
14
Content
• HTML Introduction
• Basic HTML elements
• HTML Headings and
Comments
• Paragraphs, Line break,
Horizontal rule
– HTML Paragraph
– Line break
– Horizontal rule
•
•
•
•
HTML Text Formatting
HTML Lists
Adding images
Hyperlinks – Links
•
•
•
•
•
•
•
•
Image Map
HTML Tables
Forms and Input
New Form elements and
attributes in HTML5
CSS – Cascading Style
Sheets in HTML
DIV and SPAN
HTML object and param
Reference
15
Line break
Figure 3: Line break
16
Content
• HTML Introduction
• Basic HTML elements
• HTML Headings and
Comments
• Paragraphs, Line break,
Horizontal rule
– HTML Paragraph
– Line break
– Horizontal rule
•
•
•
•
HTML Text Formatting
HTML Lists
Adding images
Hyperlinks – Links
•
•
•
•
•
•
•
•
Image Map
HTML Tables
Forms and Input
New Form elements and
attributes in HTML5
CSS – Cascading Style
Sheets in HTML
DIV and SPAN
HTML object and param
Reference
17
Horizontal rule
Figure 4: Horizontal rule
18
Content
• HTML Introduction
• Basic HTML elements
• HTML Headings and
Comments
• Paragraphs, Line break,
Horizontal rule
• HTML Text Formatting
– Font element
– Bold, italic, underline and other
elements
– Other elements used for text
formatting
•
•
•
•
•
•
•
•
•
Hyperlinks – Links
Image Map
HTML Tables
Forms and Input
New Form elements and
attributes in HTML5
CSS – Cascading Style Sheets in
HTML
DIV and SPAN
HTML object and param
Reference
• HTML Lists
• Adding images
19
Font element
• 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>
20
Content
• HTML Introduction
• Basic HTML elements
• HTML Headings and
Comments
• Paragraphs, Line break,
Horizontal rule
• HTML Text Formatting
– Font element
– Bold, italic, underline and other
elements
– Other elements used for text
formatting
•
•
•
•
•
•
•
•
•
Hyperlinks – Links
Image Map
HTML Tables
Forms and Input
New Form elements and
attributes in HTML5
CSS – Cascading Style Sheets in
HTML
DIV and SPAN
HTML object and param
Reference
• HTML Lists
• Adding images
21
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>
22
Content
• HTML Introduction
• Basic HTML elements
• HTML Headings and
Comments
• Paragraphs, Line break,
Horizontal rule
• HTML Text Formatting
– Font element
– Bold, italic, underline and other
elements
– Other elements used for text
formatting
•
•
•
•
•
•
•
•
•
Hyperlinks – Links
Image Map
HTML Tables
Forms and Input
New Form elements and
attributes in HTML5
CSS – Cascading Style Sheets in
HTML
DIV and SPAN
HTML object and param
Reference
• HTML Lists
• Adding images
23
Other elements used for text
formatting
Figure 5: Pre, tt and cite tag
24
Other elements used for text
formatting
Figure 6: del, big, small, sub and sup tag
25
