Example |
<html> |
<body> |
<h1>My First Heading</h1> |
<p>My first paragraph.</p> |
</body> |
</html> |
What is HTML? |
HTML is a language for describing web pages. |
• HTML stands for Hyper Text Markup Language |
• HTML is not a programming language, it is a markup language |
• A markup language is a set of markup tags |
• HTML uses markup tags to describe web pages |
HTML Tags |
HTML markup tags are usually called HTML tags |
• HTML tags are keywords surrounded by angle brackets like <html> |
• HTML tags normally come in pairs like <b> and </b> |
• The first tag in a pair is the start tag, the second tag is the end tag |
• Start and end tags are also called opening tags and closing tags |
HTML Documents = Web Pages |
• HTML documents describe web pages |
• HTML documents contain HTML tags and plain text |
• HTML documents are also called web pages |
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents |
and display them as web pages. The browser does not display the HTML tags, but uses the |
tags to interpret the content of the page: |
<html> |
<body> |
<h1>My First Heading</h1> |
<p>My first paragraph</p> |
</body> |
</html> |
Example Explained |
• The text between <html> and </html> describes the web page |
• The text between <body> and </body> is the visible page content |
• The text between <h1> and </h1> is displayed as a heading |
• The text between <p> and </p> is displayed as a paragraph |
What You Need |
You don't need any tools to learn HTML at W3Schools. |
You don't need any HTML editor |
You don't need a web server |
You don't need a web site |
Editing HTML |
In this tutorial we use a plain text editor (like Notepad) to edit HTML. We believe this is the |
best way to learn HTML. |
However, professional web developers often prefer HTML editors like FrontPage or |
Dreamweaver, instead of writing plain text. |
Create Your Own Test Web |
If you just want to learn HTML, skip the rest of this chapter. |
If you want to create a test web on your own computer, just copy the 3 files below to your |
desktop. |
(Right click on each link, and select "save target as" or "save link as") |
page1.htm |
page2.htm |
After you have copied the files, you can double-click on the file called "mainpage.htm" and |
see your first web site in action. |
Use Your Test Web For Learning |
We suggest you experiment with everything you learn at W3Schools by editing your web |
files with a text editor (like Notepad). |
Note: If your test web contains HTML markup tags you have not learned, don't panic. You |
will learn all about it in the next chapters. |
HTM or HTML Extension? |
When you save an HTML file, you can use either the .htm or the .html extension. We use |
.htm in our examples. It is a habit from the past, when the software only allowed three letters |
in file extensions. |
With new software it is perfectly safe to use .html. |
Don't worry if the examples use tags you have not learned. |
You will learn about them in the next chapters. |
HTML Headings |
HTML headings are defined with the <h1> to <h6> tags. |
Example |
<h1>This is a heading</h1> |
<h2>This is a heading</h2> |
<h3>This is a heading</h3> |
HTML Paragraphs |
HTML paragraphs are defined with the <p> tag. |
Example |
<p>This is a paragraph</p> |
<p>This is another paragraph</p> |
HTML Links |
HTML links are defined with the <a> tag. |
Example |
<a href="http://www.w3schools.com">This is a link</a> |
Note: The link address is provided as an attribute. |
(You will learn about attributes in a later chapter of this tutorial) |
HTML Images |
HTML images are defined with the <img> tag. |
Example |
<img src="w3schools.jpg" width="104" height="142" /> |
Note: The name and the size of the image are provided as attributes. |
(You will learn about attributes in a later chapter of this tutorial) |
HTML Basic - 4 Examples |
Don't worry if the examples use tags you have not learned. |
You will learn about them in the next chapters. |
HTML Headings |
HTML headings are defined with the <h1> to <h6> tags. |
Example |
<h1>This is a heading</h1> |
<h2>This is a heading</h2> |
<h3>This is a heading</h3> |
HTML Paragraphs |
HTML paragraphs are defined with the <p> tag. |
Example |
<p>This is a paragraph</p> |
<p>This is another paragraph</p> |
HTML Links |
HTML links are defined with the <a> tag. |
Example |
<a href="http://www.imraninfo.co.cc">This is a link</a> |
Note: The link address is provided as an attribute. |
(You will learn about attributes in a later chapter of this tutorial) |
HTML Images |
HTML images are defined with the <img> tag. |
Example |
<img src="w3schools.jpg" width="104" height="142" /> |
Note: The name and the size of the image are provided as attributes. |
(You will learn about attributes in a later chapter of this tutorial) |
HTML Elements |
HTML documents are defined by HTML elements. |
HTML Elements |
An HTML element is everything from the start tag to the end tag: |
Start tag * Element content End tag * |
<p> |
This is a paragraph </p> |
<a href="default.htm" |
This is a link </a> |
> |
<br /> |
* The start tag is often called the opening tag. The end tag is often called the closing tag. |
HTML Element Syntax |
• An HTML element starts with a start tag / opening tag |
• An HTML element ends with an end tag / closing tag |
• The element content is everything between the start and the end tag |
• Some HTML elements have empty content |
• Empty elements are closed in the start tag |
• Most HTML elements can have attributes |
(You will learn about element attributes in the next chapter of this tutorial) |
Nested HTML Elements |
Most HTML elements can be nested (can contain other HTML elements). |
HTML documents consist of nested HTML elements. |
HTML Document Example |
<html> |
<body> |
<p>This is my first paragraph</p> |
</body> |
</html> |
The example above contains 3 HTML elements. |
Example Explained |
The <p> element: |
<p>This is my first paragraph</p> |
The <p> element defines a paragraph in the HTML document |
The element has a start tag <p> and an end tag </p> |
The element content is: This is my first paragraph |
The <body> element: |
<body> |
<p>This is my first paragraph</p> |
</body> |
The <body> element defines the body of the HTML document |
The element has a start tag <body> and an end tag </body> |
The element content is another HTML element (a paragraph) |
The <html> element: |
<html> |
<body> |
<p>This is my first paragraph</p> |
</body> |
</html> |
The <html> element defines the whole HTML document. |
The element has a start tag <html> and an end tag </html> |
The element content is another HTML element (the body) |
Don't Forget the End Tag |
Most browsers will display HTML correctly even if you forget the end tag: |
<p>This is a paragraph |
<p>This is a paragraph |
The example above will work in most browsers, but don't rely on it. Forgetting the end tag |
can produce unexpected results or errors. |
Note: Future version of HTML will not allow you to skip end tags. |
Empty HTML Elements |
HTML elements without content are called empty elements. Empty elements can be closed in |
the start tag. |
<br> is an empty element without a closing tag (it defines a line break). |
In XHTML, XML, and future versions of HTML, all elements must be closed. |
Adding a slash to the start tag, like <br />, is the proper way of closing empty elements, |
accepted by HTML, XHTML and XML. |
Even if <br> works in all browsers, writing <br /> instead is more future proof. |
HTML Tip: Use Lowercase Tags |
HTML tags are not case sensitive: <P> means the same as <p>. Plenty of web sites use |
uppercase HTML tags in their pages. |
W3Schools use lowercase tags because the World Wide Web Consortium (W3C) |
recommends lowercase in HTML 4, and demands lowercase tags in future versions of |
(X)HTML. |
HTML Attributes |
Attributes provide additional information about HTML elements. |
HTML Attributes |
• HTML elements can have attributes |
• Attributes provide additional information about the element |
• Attributes are always specified in the start tag |
• Attributes come in name/value pairs like: name="value" |
Attribute Example |
HTML links are defined with the <a> tag. The link address is provided as an attribute: |
Example |
<a href="http://www.w3schools.com">This is a link</a> |
(You will learn about links in a later chapter of this tutorial) |
Always Quote Attribute Values |
Attribute values should always be enclosed in quotes. |
Double style quotes are the most common, but single style quotes are also allowed. |
In some rare situations, like when the attribute value itself contains quotes, it is necessary to |
use single quotes: |
name='John "ShotGun" Nelson' |
HTML Tip: Use Lowercase Attributes |
Attribute names and attribute values are case-insensitive. |
However, the World Wide Web Consortium (W3C) recommends lowercase |
attributes/attribute values in their HTML 4 recommendation |
Newer versions of (X)HTML will demand lowercase attributes. |
HTML Attributes Reference |
A full list of legal attributes for each HTML element is listed in our: |
Complete HTML Reference |
Below is a list of some attributes that are standard for most HTML elements: |
Attribute Value |
Description |
class class_rule or style_rule The class of the element |
id id_name |
A unique id for the element |
style style_definition An inline style definition |
title tooltip_text A text to display in a tool tip |
For more information about standard attributes: |
HTML Standard Attributes Reference |
Your browser does not support inline frames or is currently configured not to |
display inline frames. |
HTML Headings |
Headings are important in HTML documents. |
HTML Headings |
Headings are defined with the <h1> to <h6> tags. |
<h1> defines the largest heading. <h6> defines the smallest heading. |
Example |
<h1>This is a heading</h1> |
<h2>This is a heading</h2> |
<h3>This is a heading</h3> |
Note: Browsers automatically adds an empty line before and after headings. |
Headings Are Important |
Use HTML headings for headings only. Don't use headings to make text BIG or bold. |
Search engines use your headings to index the structure and content of your web pages. |
Since users may skim your pages by its headings, it is important to use headings to show the |
document structure. |
H1 headings should be used as main headings, followed by H2 headings, then less important |
H3 headings, and so on. |
HTML Rules (Lines) |
The <hr /> tag is used to create an horizontal rule (line). |
Example |
<p>This is a paragraph</p> |
<hr /> |
<p>This is a paragraph</p> |
<hr /> |
<p>This is a paragraph</p> |
HTML Comments |
Comments can be inserted in the HTML code to make it more readable and understandable. |
Comments are ignored by the browser and are not displayed. |
Comments are written like this: |
Example |
<!-- This is a comment --> |
Note: There is an exclamation point after the opening bracket, but not before the closing |
bracket. |
HTML Tip - How to View HTML Source |
Have you ever seen a Web page and wondered "Hey! How did they do that?" |
To find out, click the VIEW option in your browser's toolbar and select SOURCE or PAGE |
SOURCE. This will open a window that shows you the HTML code of the page. |
Examples From This Page |
Headings |
This example demonstrates the tags that display headings in an HTML document. |
Hidden comments |
This example demonstrates how to insert a hidden comment in the HTML source code. |
Horizontal rule |
This example demonstrates how to insert a horizontal rule. |
HTML Tag Reference |
W3Schools' tag reference contains additional information about these tags and their |
attributes. |
You will learn more about HTML tags and attributes in the next chapters of this tutorial. |
Tag |
Description |
<html> |
Defines an HTML document |
<body> |
Defines the document's body |
<h1> to <h6> Defines header 1 to header 6 |
<hr /> |
Defines a horizontal rule |
<!--> |
Defines a comment |
HTML documents are divided into paragraphs. |
HTML Paragraphs |
Paragraphs are defined with the <p> tag. |
Example |
<p>This is a paragraph</p> |
<p>This is another paragraph</p> |
Note: Browsers automatically adds an empty line before and after paragraphs. |
Don't Forget the End Tag |
Most browsers will display HTML correctly even if you forget the end tag: |
Example |
<p>This is a paragraph |
<p>This is another paragraph |
The example above will work in most browsers, but don't rely on it. Forgetting the end tag |
can produce unexpected results or errors. |
Note: Future version of HTML will not allow you to skip end tags. |
HTML Line Breaks |
Use the <br /> tag if you want a line break (a new line) without starting a new paragraph: |
Example |
<p>This is<br />a para<br />graph with line breaks</p> |
The <br /> element is an empty HTML element. It has no end tag. |
<br> or <br /> |
In XHTML, XML, and future versions of HTML, HTML elements with no end tag (closing |
tag) are not allowed. |
Even if <br> works in all browsers, writing <br /> instead is more future proof. |
HTML Output - Useful Tips |
You cannot be sure how HTML will be displayed. Large or small screens, and resized |
windows will create different results. |
With HTML, you cannot change the output by adding extra spaces or extra lines in your |
HTML code. |
The browser will remove extra spaces and extra lines when the page is displayed. Any |
number of lines count as one space, and any number of spaces count as one space. |
Try it yourself |
(The example demonstrates some HTML formatting problems) |
Examples From This Page |
HTML paragraphs |
This example demonstrates how HTML paragraphs are displayed in a browser. |
Line breaks |
This example demonstrates the use of line breaks in an HTML document. |
Poem problems |
This example demonstrates some problems with HTML formatting. |
More Examples |
More paragraphs |
This example demonstrates some of the default behaviors of paragraph elements. |
HTML Tag Reference |
W3Schools' tag reference contains additional information about HTML elements and their |
attributes. |
Tag Description |
<p> Defines a paragraph |
<br /> Inserts a single line break |
No comments:
Post a Comment