Introduction to 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 browsers (like Internet Explorer) 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

Basic HTML Examples

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.
<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.
<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML Links

HTML links are defined with the <a> tag.
<a href="http://www.w3schools.com">This is a link</a>
Note: The <a> tag contains an attribute (href) to provide the link address.

HTML Images

HTML images are defined with the <img> tag.
<img src="constr4.gif" width="144" height="50" />
Note: The name of the image and the size are provided as attributes.


 

 

 

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.
<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 the HTML heading tags for headings only. Don't use headings to make something 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, and less important H3 headings, and so on.

HTML Comments

Comments can be inserted in the HTML code to make it more readable and understandable. Comments are ignored by the browser and not displayed.
Comments are written like this:
<!-- 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.
You will learn more about HTML tag 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
<!-->
Defines a comment
at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)