EXAMPLES FOR HTML COURSECreate by mrtblack From : www.w3schools.com VP, 22-07-11 Table of contents : A very simple HTML document ...4 How text inside paragraphs is displayed More paragra
Trang 1EXAMPLES FOR HTML COURSE
Create by mrtblack From : www.w3schools.com
VP, 22-07-11
Table of contents :
A very simple HTML document 4
How text inside paragraphs is displayed More paragraphs
The use of line breaks Poem problems (some problems with HTML formatting) Heading tags
Center aligned heading Insert a horizontal rule Comments in the HTML source Add a background color 5
Add a background image
Formatting Text
Text formatting Preformatted text (how to control line breaks and spaces) Different computer-output tags
Insert an address 6
Abbreviations and acronyms Long and short quotations How to mark deleted and inserted text .7
How to link to a mail message (will only work if you have mail installed)
Frames
How to create a vertical frameset with 3 different documents 11
How to create a horizontal frameset with 3 different documents How to mix a frameset in rows and columns 12
How to create a navigation frame Inline frame (a frame inside an HTML page) 13
Jump to a specified section within a frame Jump to a specified section with frame navigation .14
Trang 2Simple tables
Different table borders 15
Table with no borders
Headings in a table 16
Empty cells
Table with a caption 17
Table cells that span more than one row/column 18
Tags inside a table 19
Cell padding (control the white space between cell content and the borders
Cell spacing (control the distance between cells)
Add a background color or a background image to a table 20
Add a background color or a background image to a table cell 21
Align the content in a table cell
The new frame attribute
Lists
An unordered list 22
An ordered list 23
Different types of ordered lists
Different types of unordered Lists 24
Nested list
Nested list 2 25
Definition list
Forms and Input
How to create input fields 26
Password fields
Checkboxes
Radiobuttons 27
Simple drop-down box (a selectable list)
Another drop-down box with a pre-selected value
Textarea (a multi-line text input field)
Create a button
Draw a border with a caption around data
Form with an input field and a submit button 28
Form with checkboxes and a submit button
Form with radiobuttons and a submit button
Send a mail from a form .29
Images
Insert images
Insert images from another folder or another server
Align an image within a text 30
Let the image float to the left/right of a paragraph 31
Adjust images to different sizes 32
Display an alternate text for an image (if the browser can't load images)
Make a hyperlink of an image
Create an image-map, with click-able regions
Trang 3Good background and text color
Bad background and text color
Good background image
Good background image 2
Bad background image
Styles
Styles in the head section of an HTML document 33
Link that is not underlined 34
Link to an external style sheet
The Head Section
Set a title of a document
One target for all links on a page
The Meta Tag
Document description
Document keywords
Redirect a user to another URL .35
Trang 41 A very simple HTML document
Trang 5<p>Use heading tags only for headings Don't use them just to make something bold Use other tags for that.</p>
This text is big
This text is emphasized This text is italic
This text is small
This text contains subscript
This text contains superscript
7 Insert a horizontal rule
Trang 69 How to create hyperlinks
<html>
<body>
<p>
<a href="lastpage.htm">
This text</a> is a link to a page on
this Web site
</p>
<p>
<a href="http://www.microsoft.com/">
This text</a> is a link to a page on
the World Wide Web
Trang 7It preserves both spaces
and line breaks
It preserves both spaces and line breaks.
The pre tag is good for displaying computer code:
for i = 1 to 10 print i next
11 How to mark deleted and inserted text
Most browsers will overstrike deleted text
and underline inserted text
</p>
a dozen is twelve pieces
Most browsers will overstrike deleted text and underline inserted text
Some older browsers will display deleted
or inserted text as plain text
Trang 8Some older browsers will display deleted
or inserted text as plain text
You can also use an image as a link:
13 Open a link in a new browser window
If you set the target attribute of a link to
"_blank", the link will open in a new window
14 Jump to another part of a document (on the same page)
<html>
<body>
See also Chapter 4
Trang 9<p>This chapter explains ba bla bla</p>
<a name="C4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla bla</p>
Trang 10This chapter explains ba bla bla
15.Break out of a frame
Trang 11<b>Note:</b> Spaces between words should be replaced by %20
to <b>ensure</b> that the browser will display your text properly
</p>
</body>
</html>
This is a mail link: Send Mail
Note: Spaces between words should be replaced by %20 to ensure
that the browser will display your text properly
17 How to create a vertical frameset with 3 different documents
Trang 15<body>
<p>
Each table starts with a table tag
Each table row starts with a tr tag
Each table data starts with a td tag
Trang 1625 Different table borders
Trang 1727.Table with a caption
<html>
<body>
This table has a caption, and a thick border:
My Caption
Trang 18This table has a caption,
and a thick border:
Cell that spans two rows:
First Name: Bill Gates Telephone: 555 77 854
555 77 855
Trang 19This cell contains a table:
A B
C DThis cell contains a list
• pineapples
HELLO
Trang 2131 Add a background color or a background image to a table
Trang 26White cold drink
40 How to create input fields
Trang 27Note that when you type characters in a password field,
the browser displays asterisks or bullets instead of the
Trang 28When a user clicks on a radio-button, the button becomes
checked, and all other buttons with the same name
If you click the "Submit" button, you will send your input
Trang 29Type your first name:
<input type="text" name="FirstName" value="Mickey"
size="20">
<br>Type your last name:
<input type="text" name="LastName" value="Mouse"
If you click the "Submit" button, you will send your input
to a new page called html_form_action.asp
</p>
</body>
</html>
to a new page called html_form_action.asp
46 Form with checkboxes and a submit button
If you click the "Submit" button, you send your input to a
new page called html_form_action.asp
Trang 3047 Send a mail from a form
<input type="submit" value="Send">
<input type="reset" value="Reset">
yourmailComment:
An image from another folder:
An image from W3Schools:
Trang 31Note that bottom alignment is the default alignment
An image before the text
An image after the text
Trang 32align ="left" width="100" height="50">
A paragraph with an image The align attribute of the
image is set to "left" The image will float to the left of
this text
</p>
<p>
<img src ="/images/xhtml.gif"
align ="right" width="100" height="50">
A paragraph with an image The align attribute of the
image is set to "right" The image will float to the right of
A paragraph with an image The align attribute of the image is set to "right" The image will float to the right of this text
51 Adjust images to different sizes
<html>
<body>
<p>
<img src="/images/hackanm.gif"
Trang 33You can make a picture larger or smaller changing the
values in the "height" and "width" attributes of the
img tag
</p>
</body>
</html>
You can make a picture larger or smaller changing the values
in the "height" and "width" attributes of the img tag
52 Create an image-map, with click-able regions
Click on one of the planets to watch it closer:
Note: We use both an id and a name attribute in the map
tag because some versions of Netscape don't understand the
id attribute
Trang 34<b>Note:</b> We use both an <b>id</b> and a
<b>name</b> attribute in the map tag
because some versions of Netscape don't understand the
Trang 35The meta attributes of this document identify the author
and the editor software
Trang 3656 The Meta Tag : Document keywords
The meta attributes of this document describe the
document and its keywords
Trang 37</html>