HTML Introduction

HTML INTRODUCTION
What is HTML?
HTML is the standard markup language for creating Web pages.
● HTML stands for Hyper Text Markup Language

● HTML describes the structure of Web pages using markup
● HTML elements are the building blocks of HTML pages
● HTML elements are represented by tags
● HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
● Browsers do not display the HTML tags, but use them to render the content of the page
A Simple HTML Document

Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Example Explained
● The <!DOCTYPE html> declaration defines this document to be HTML5

● The <html> element is the root element of an HTML page
● The <head> element contains meta information about the document
● The <title> element specifies a title for the document
● The <body> element contains the visible page content
● The <h1> element defines a large heading
● The <p> element defines a paragraph
HTML Tags
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
● HTML tags normally come in pairs like <p> and </p>

● The first tag in a pair is the start tag, the second tag is the end tag
● The end tag is written like the start tag, but with a forward slash inserted before the tag name
Tip: The start tag is also called the opening tag, and the end tag the closing tag.
Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.
The browser does not display the HTML tags, but uses them to determine how to display the document:
HTML Page Structure
Below is a visualization of an HTML page structure:
● HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Try this: Output:
● HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

Try this: Output:
● HTML Links
HTML links are defined with the <a> tag: The link's destination is specified in the href attribute. Attributes are
used to provide additional information about HTML elements.
Try this: Output:
upon clicking Page 1….
●
●
●
●
● HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
Try this: Output:
● ● HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag,
followed by <li> tags (list items):
Try this: Output:
●
Empty HTML
Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
● HTML Attributes
✔ All HTML elements can have attributes

✔ Attributes provide additional information about an element
✔ Attributes are always specified in the start tag
✔ Attributes usually come in name/value pairs like: name="value"
The width and height Attributes
Images in HTML have a set of size attributes, which specifies the width and height of the image:
Example:
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute

The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person,
can "hear" the element.
Example:
<img src="img_girl.jpg" alt="Girl with a jacket">
The style Attribute

The style attribute is used to specify the styling of an element, like color, font, size etc.
Example:
<p style="color:red">I am a paragraph</p>
Useful HTML tags and their attributes
Body tag and attributes
<body></body> Contain the actual content of the

page
<body bgcolor=”color”></body> Sets the color of the background
<body background=”filename.xxx”></body> Sets the image as a page’s

background
<body text=”color”></body> Specifies the color of normal text
<body link=”color”></body> Specifies the default color of unvisited

link
<body alink=”color”></body> Specifies the color of link on click
<body vlink=”color”></body> Specifies the color of followed link
Font tag and attributes
<font></font> Change the font attributes for text within the tags
<font size=”value”></font> Sets the font to a size from 1-7

<font face=”name”></font> Sets the font face or font name
<font color=”color”></font> Sets the font color
Text formatting tags
<b></b> Defines bold text
<strong></strong> Defines important text
<i></i> Defines italic text
<em></em> Defines emphasized text
<small></small> Defines smaller text
<sub></sub> Defines subscripted text
<sup></sup> Defines superscript text
<ins></ins> Defines inserted text
<del></del> Defines deleted text
<mark></mark> Defines marked/highlighted text
<tagname align=”direction”> Specifies the alignment according to surrounding

elements
Style attribute
<tagname style=”property:value;”> Use the style attribute for styling HTML

elements
<tagname style=”background:value;”> Use for background color
<tagname style=”color:value;”> Use for font color
<tagname style=”font-family:value;”> Use for font face
<tagname style=”font-size:value;”> Use for font size
<tagname style=”font-align:value;”> Use for text alignment

HTML Introduction

Uploaded by

Copyright:

Available Formats

HTML Introduction

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Introduction

Uploaded by

Copyright:

Available Formats

HTML INTRODUCTION

HTML is the standard markup language for creating Web pages.

● HTML stands for Hyper Text Markup Language

A Simple HTML Document

<h1>My First Heading</h1>

● The <!DOCTYPE html> declaration defines this document to be HTML5

HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>

● HTML tags normally come in pairs like <p> and </p>

HTML Page Structure

Below is a visualization of an HTML page structure:

Try this: Output:

HTML paragraphs are defined with the <p> tag:

Try this: Output:

upon clicking Page 1….

Try this: Output:

Try this: Output:

✔ All HTML elements can have attributes

The alt Attribute

<img src="img_girl.jpg" alt="Girl with a jacket">

The style Attribute

Useful HTML tags and their attributes

Body tag and attributes

<body></body> Contain the actual content of the

<body bgcolor=”color”></body> Sets the color of the background

<body background=”filename.xxx”></body> Sets the image as a page’s

<body text=”color”></body> Specifies the color of normal text

<body link=”color”></body> Specifies the default color of unvisited

<body alink=”color”></body> Specifies the color of link on click

<body vlink=”color”></body> Specifies the color of followed link

Font tag and attributes

<font size=”value”></font> Sets the font to a size from 1-7

<font color=”color”></font> Sets the font color

Text formatting tags

<b></b> Defines bold text

<strong></strong> Defines important text

<i></i> Defines italic text

<em></em> Defines emphasized text

<small></small> Defines smaller text

<sub></sub> Defines subscripted text

<sup></sup> Defines superscript text

<ins></ins> Defines inserted text

<del></del> Defines deleted text

<mark></mark> Defines marked/highlighted text

<tagname align=”direction”> Specifies the alignment according to surrounding

<tagname style=”property:value;”> Use the style attribute for styling HTML

<tagname style=”background:value;”> Use for background color

<tagname style=”color:value;”> Use for font color

<tagname style=”font-family:value;”> Use for font face

<tagname style=”font-size:value;”> Use for font size

<tagname style=”font-align:value;”> Use for text alignment

You might also like