HTML Basic
My First Heading
My first paragraph.
headings
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
paragraph
This is a paragraph.
This is a paragraph.
This is a paragraph.
LINKS
This is a link
HTML Headings
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
SOURCE CODE:
This is a regular paragraph
INSERT HORIZONTAL LINES
The hr tag defines a horizontal rule:
This is a paragraph.
This is a paragraph.
This is a paragraph.
HTML Paragraphs
This is a paragraph.
This is a paragraph.
This is a paragraph.
MORE PARAGRAPH
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.
the use of line breks
This is
a para
graph with line breaks
Poem problems (some problems with HTML formatting)
This text is bold
This text is strong
This text is emphasized
This text is italic
This text is small
This is subscript and superscript
HTML Text Formatting
This text is bold
This text is strong
This text is emphasized
This text is italic
This text is small
This is subscript and superscript
Preformatted text (how to control line breaks and spaces)
This is
preformatted text.
It preserves both spaces
and line breaks.
The pre tag is good for displaying computer code:
for i = 1 to 10
print i
next i
Different computer-output tags
Computer codeKeyboard input
Sample text
Computer variable
Note: These tags are often used to display computer/programming code.
Insert contact information
Written by W3Schools.com
Email us
Address: Box 564, Disneyland
Phone: +12 34 56 78
Abbreviations and acronyms
The WHO was founded in 1948.
Can I get this ASAP?
The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.
text direction:
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
Here is some Hebrew text
Long and short quotations
The <blockquote> tag
The <blockquote> tag specifies a section that is quoted from another source.
Here is a quote from WWF's website:
For 50 years, WWF has been protecting the future of nature. The world?s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Note: Browsers usually indent <blockquote> elements.
The <q> tag
The <q> tag defines a short quotation.
WWF's goal is to:
Build a future where people live in harmony with nature.
We hope they succeed.
Note: Browsers insert quotation marks around the <q> tag.
How to mark deleted and inserted text
My favorite color is
Notice that browsers will strikethrough deleted text and underline inserted text.
HTML STYLES
STYLE HTML ELEMENTS
Look! Styles and colors
Manipulate Text
Colors
Boxes
and more...
Style background color
This is a heading
This is a paragraph.
Style font, color, and size
A heading
A paragraph.
Style alignment of text
Center-aligned heading
This is a paragraph.
Set the font of text
Center-aligned heading
This is a paragraph.
Set the font size of text
This is a heading
This is a paragraph.
Set the font color of text
This is a heading
This is a paragraph.
Set the font, font size, and font color of text
Using styles in HTML
All header 1 elements will be red
All header 2 elements will be blue
All text in paragraphs will be green.
Link that is not underlined
Visit W3Schools.com!
Link to an external style sheet
I am formatted with an external style sheet
Me too!
HTML Links
HTML Tutorial This is a link to a page on this website.
W3C This is a link to a website on the World Wide Web.
How to create hyperlinks
HTML Tutorial This is a link to a page on this website.
W3C This is a link to a website on the World Wide Web.
Open link in a new browser window
Visit W3Schools.com!
If you set the target attribute to "_blank", the link will open in a new browser window/tab.
Jump to another part of a document (on the same page)
See also Chapter 4.
Chapter 1
This chapter explains ba bla bla
Chapter 2
This chapter explains ba bla bla
Chapter 3
This chapter explains ba bla bla
Chapter 4
This chapter explains ba bla bla
Chapter 5
This chapter explains ba bla bla
Chapter 6
This chapter explains ba bla bla
Chapter 7
This chapter explains ba bla bla
Chapter 8
This chapter explains ba bla bla
Chapter 9
This chapter explains ba bla bla
Chapter 10
This chapter explains ba bla bla
Chapter 11
This chapter explains ba bla bla
Chapter 12
This chapter explains ba bla bla
Chapter 13
This chapter explains ba bla bla
Chapter 14
This chapter explains ba bla bla
Chapter 15
This chapter explains ba bla bla
Chapter 16
This chapter explains ba bla bla
Chapter 17
This chapter explains ba bla bla
Break out of a frame
Locked in a frame?
Click here!
How to link to a mail message (will only work if you have mail installed)
This is an email link:
Send Mail
Note: Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
Another mailto link
This is another mailto link:
Send mail!
Note: Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
HTML Images
Insert images
An image:
A moving image:
Note that the syntax of inserting a moving image is no different from a non-moving image.
Insert images from another folder or another server
An image from another folder:
An image from W3Schools:
Aligning images
Image with default alignment (align="bottom"):
This is some text.
This is some text.Image with align="middle":
This is some text.
This is some text.Image with align="top":
This is some text.
This is some text.Note: The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.
Let the image float to the left/right of a paragraph
A paragraph with an image. The image will float to the left of this text. A paragraph with an image. The image will float to the right of this text.Note: Here we have used the CSS "float" property to align the image; as the align attribute is deprecated in HTML 4, and is not supported in HTML5.
Make a hyperlink of an image
Create a link of an image:
No border around the image, but still a link:
Create an image-map, with clickable regions
Click on the sun or on one of the planets to watch it closer:
HTML Tables
Simple tables
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
One column:
100
One row and three columns:
100
200
300
Two rows and three columns:
100
200
300
400
500
600
Tables without borders
This table has no borders:
100
200
300
400
500
600
And this table has no borders:
100
200
300
400
500
600
Table headers
Table headers:
Name
Telephone
Telephone
Bill Gates
555 77 854
555 77 855
Vertical headers:
First Name:
Bill Gates
Telephone:
555 77 854
Telephone:
555 77 855
Table with a caption
Monthly savings
Month
Savings
January
$100
February
$50
Table cells that span more than one row/column
Cell that spans two columns:
Name
Telephone
Bill Gates
555 77 854
555 77 855
Cell that spans two rows:
First Name:
Bill Gates
Telephone:
555 77 854
555 77 855
Tags inside a table
This is a paragraph
This is another paragraph
This cell contains a table:
A
B
C
D
This cell contains a list
HELLO
Cell padding (control the white space between cell content and the borders
Without cellpadding:
First
Row
Second
Row
With cellpadding:
cellpadding="10">
| First | Row |
Second
Row
Cell spacing (control the distance between cells)
Without cellspacing:
First
Row
Second
Row
With cellspacing="0":
First
Row
Second
Row
With cellspacing="10":
First
Row
Second
Row
HTML Lists
An unordered list
An Unordered List:
An ordered list
An Ordered List:
Different types of ordered lists
Numbered list:
Letters list:
Lowercase letters list:
Roman numbers list:
Lowercase Roman numbers list:
Different types of unordered Lists
Note: The type attribute of the ul tag is deprecated in HTML 4, and is not supported in HTML5.
Therefore we have used the style attribute and the CSS list-style-type property, to define different types of unordered lists below:
Disc bullets list:
Circle bullets list:
Square bullets list:
Nested list
A nested List:
Nested list 2
A nested List:
Definition list
A Definition List:
HTML Forms and Input
Create text fields
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
Create password field
Username:
Password:
Note: The characters in a password field are masked (shown as asterisks or circles).
Checkboxes
I have a bike
I have a car
Radio buttons
Male
Female
Note: When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.
Simple drop-down list
Drop-down list with a pre-selected value
Textarea (a multi-line text input field)
Create a button
?
Draw a border around form-data
Name:
E-mail:
Date of birth:
Form with text fields and a submit button
First name:
Last name:
If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".
Form with checkboxes and a submit button
I have a bike
I have a car
If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".
Form with radiobuttons and a submit button
Male
Female
If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".
Send e-mail from a form
Send e-mail to someone@example.com:
Name:
E-mail:
Comment:
HTML IFrame
Some older browsers don't support iframes.
If they don't, the iframe will not be visible.
Inline frame (a frame inside an HTML page)
Some older browsers don't support iframes.
If they don't, the iframe will not be visible.
HTML head Elements
Specify a title for a document
The content of the body element is displayed in the browser.
The content of the title element is displayed in the browser's title.
One default URL and target for all links on a page
- Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "http://www.w3schools.com/images/stickman.gif"W3Schools - Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".
Provide metadata for a document
All meta information goes in the head section...
HTML Scripts
Insert a script
Use of the
A browser without support for JavaScript will show the text in the noscript element.
