HTML Introduction: The Basics of HTML Markup Language

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 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
My First Html Page:
<html>
<body>
<h1>My First Webpage  </h1>
</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
Making it Work :
• Text editor (text pad) , save the file as .htm or .html
• Tool , Dreamweaver , Frontpage
Lesson Two :
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
• HTML elements can be nested
Empty HTML Elements
• HTML elements with no content are called empty elements. Empty elements can be
closed in the start tag.
• <br> is an empty element without a closing tag (the <br> tag defines a line break).
Lesson Three: HTML Basics

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<html>
<body>
<h1>This is a heading h1</h1>

<h3>This is a heading h3 </h3>
</body>
</html>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Links
HTML links are defined with the <a> tag.
<html>
<body>
<a href="http://www.drmossab.info">Dr. Mossab Website </a>
</body>
</html>
HTML Images
HTML images are defined with the <img> tag.
<html>
<body>
<img src="Ajman.jpg" width="104" height="142" />
</body>
</html>
HTML Lines
The <hr /> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:

HTML Comments
Comments can be inserted into 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: 
HTML break
<br /> Inserts a single line break
HTML Text Formatting
<html>
<body>
This text is bold
<p><b>This text is bold</b></p> This text is strong
This text is big
<p><strong>This text is strong</strong></p> This text is emphasized
This text is italic
<p><big>This text is big</big></p> This text is small
This is subscript and superscript
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and

<sup>superscript</sup></p>
</body>
</html>
<html> This is
<body> preformatted text.
It preserves both spaces

<pre>
and line breaks.
This is
The pre tag is good for displaying computer
preformatted text.
code:
It preserves both spaces for i = 1 to 10
and line breaks. print i
</pre> next i
<p>The pre tag is good for displaying

computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
<html>
<body> Computer code

Keyboard input
Teletype text
<code>Computer code</code> Sample text

Computer variable
<br />
Note: These tags are often used to display
<kbd>Keyboard input</kbd> computer/programming code.
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p><b>Note:</b> These tags are often used to

display computer/programming code.</p>
</body>
</html>
<html>
<body> Written by Ajman University
Email us
Address: Box 564, Ajman, UAE
Phone: +971500500
<address>
Ajman University<br />
<a href="mailto:us@ajman.ac.ae">Email
us</a><br />
Address: Box 564, Ajman , UAE <br />
Phone: +971500500
</address>
</body>
</html>
<html>
<body> The WHO was founded in 1948.

Can I get this ASAP?
The title attribute is used to show the spelled-
<p>The <abbr title="World Health out version when holding the mouse pointer
Organization">WHO</abbr> was founded in over the acronym or abbreviation.
1948.</p>
<p>Can I get this <acronym title="as soon as

possible">ASAP</acronym>?</p>
<p>The title attribute is used to show the

spelled-out version when holding the mouse
pointer over the acronym or abbreviation.</p>
</body>
</html>
<html> If your browser supports bi-directional
<body> override (bdo), the next line will be written
from the right to the left (rtl):
txet werbeH emos si ereH
<p>
If your browser supports bi-directional

override (bdo), the next line will be written
from the right to the left (rtl):
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
<html> A long quotation:
<body> This is a long quotation. This is a long

quotation. This is a long quotation. This is a
long quotation. This is a long quotation.
A long quotation: Note: The browser inserts white space before
<blockquote> and after a blockquote element. It also insert
margins.
This is a long quotation. This is a long A short quotation: This is a short quotation
quotation. This is a long quotation. This is a
long quotation. This is a long quotation. Notice that the browser inserts quotation
marks around the short quotation (Does not
</blockquote> work in IE).
<p><b>Note:</b> The browser inserts white

space before and after a blockquote element. It
also insert margins.</p>
A short quotation:
<q>This is a short quotation</q>
<p><b>Notice that the browser inserts

quotation marks around the short quotation
(Does not work in IE).</b></p>
</body>
</html>
<html>
<body> My favorite color is blue red!

Notice that browsers will strikethrough deleted
text and underline inserted text.
<p>My favorite color is <del>blue</del>
<ins>red</ins>!</p>
<p>Notice that browsers will strikethrough

deleted text and underline inserted text.</p>
</body>
</html>
<html>
<body style="background- Look! Styles and colors

color:PowderBlue;">
This text is in Verdana and red
This text is in Times and green
<h1>Look! Styles and colors</h1>
This text is 30 pixels
high
<p style="font-family:verdana;color:red">
This text is in Verdana and red</p>
<p style="font-family:times;color:green">
This text is in Times and green</p>
<p style="font-size:30px">This text is 30

pixels high</p>
</body>
</html>
The HTML Style Attribute

The purpose of the style attribute is:
To provide a common way to style all HTML elements.
Styles was introduced with HTML 4, as the new and preferred way to style HTML elements.
With HTML styles, styles can be added to HTML elements directly by using the style attribute,
or indirectly in separate style sheets (CSS files).
Deprecated Tags and Attributes

In HTML 4, several tags and attributes are deprecated. Deprecated means that they will not be
supported in future versions of HTML and XHTML.
These tags and attributes should be avoided:
Tags Description
<center> Defines centered content
<font>
Defines HTML fonts
<basefont>
<s>
Defines strikethrough text
<strike>
<u> Defines underlined text
Attributes Description
align Defines the alignment of text
bgcolor Defines the background color
color Defines the text color
For all of the above: Use styles instead!
HTML Style Example - Background Color

The background-color property defines the background color for an element:
<html>
This is a heading
<body style="background-color:yellow">
This is a paragra
<h2 style="background-color:red">This is a
heading</h2>
<p style="background-color:green">This is a
paragraph.</p>
</body>
</html>
<html>
This is a heading
This is a paragraph.
<body bgcolor="yellow"> The old bgcolor attribute only works on the
body element.
<h2>This is a heading</h2>
For future proof HTML, use styles instead:
<p>This is a paragraph.</p>
<p>The old bgcolor attribute only works on the

body element.</p>
<p>For future proof HTML, use styles

instead:</p>
</body>
</html>
HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and size of the text in an
element:
<html>
<body> A heading
<h1 style="font-family:verdana">A A paragraph.
heading</h1>
<p style="font-family:arial;color:red;font-
size:20px;">A paragraph.</p>
</body>
</html>
<html>
<body> A heading
A paragraph.
<h1><font face="verdana">A
heading</font></h1>
<p><font size="5" face="arial" color="red">A

paragraph.</font></p>
</body>
</html>
HTML Style Example - Text Alignment

The text-align property specifies the horizontal alignment of text in an element:
<html>
<body> This is a heading

The heading above is aligned to the center of
this page.
<h1 style="text-align:center">This is a
heading</h1>
<p>The heading above is aligned to the center
of this page.</p>
</body>
</html>
<html>
<body> This is a heading

The heading above is aligned to the center of
this page.
<h1 align="center">This is a heading</h1>
<p>The heading above is aligned to the center

of this page.</p>
</body>
</html>
Examples Summary:
HTML Text Formatting Tags
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
HTML "Computer Output" Tags

Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines preformatted text
HTML Citations, Quotations, and Definition Tags

Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term
HTML Links (hyperlinks):

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new
document or a new section within the current document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
Links are specified in HTML using the <a> tag.
The <a> tag can be used in two ways:
1. To create a link to another document, by using the href attribute
2. To create a bookmark inside a document, by using the name attribute
HTML Link Syntax
The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>
The href attribute specifies the destination of a link.
Example
<a href="http://www.drmossab.info/"> Dr Mossab</a>
which will display like this: Dr. Mossab
Clicking on this hyperlink will send the user to Dr.mossab.info homepage.
Tip: The "Link text" doesn't have to be text. You can link from an image or any other HTML
element.
HTML The <img> Tag and the <Src> Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The
value of the src attribute is the URL of the image you want to display.
<img src="url" alt="some_text"/>
HTML The Alt Attribute
The required alt attribute specifies an alternate text for an image, if the imad ge cannot be
displayed. The value of the alt attribute is an author-defined text:
<img src="boat.gif" alt="Big Boat" />
<html>
<body>
An image with align="bottom".
<p>An image
<img src="smiley.gif" alt="Smiley face" An image with align="middle".

align="bottom" width="32" height="32" />
with align="bottom".</p> An image with align="top".
Tip: align="bottom" is default!

<p>An image
<img src="smiley.gif" alt="Smiley face" An image before the text.

align="middle" width="32" height="32" />
with align="middle".</p>
An image after the text.
<p>An image
<img src="smiley.gif" alt="Smiley face"

align="top" width="32" height="32" />
with align="top".</p>
<p><b>Tip:</b> align="bottom" is default!

</p>
<p><img src="smiley.gif" alt="Smiley face"

width="32" height="32" />
An image before the text.</p>
<p>An image after the text.

width="32" height="32" /></p>
</body>
</html>
<html> A paragraph with an image. The align attribute

of the image is set to "left". The image will
<body>
float to the left of this text.
A paragraph with an image. The align
attribute of the image is set to "right". The
<p> image will float to the right of this text.

align="left" width="32" height="32" />
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>

align="right" width="32" height="32" />
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.
</p>
</body>
</html>
<html>
<body> Create a link of an image:

No border around the image, but still a link:
<p>Create a link of an image:
<a href=" http://www.drmossab.info ">
<img src="smiley.gif" alt="HTML tutorial"

width="32" height="32" />
</a></p>
<p>No border around the image, but still a

link:
<a href="http://www.drmossab.info">
<img border="0" src="smiley.gif" alt="HTML

tutorial" width="32" height="32" />
</a></p>
</body>
</html>
Tables and Cells

<html> Each table starts with a table tag. Each table
row starts with a tr tag. Each table data starts
<body>
with a td tag.
One column:
<p> 100
Each table starts with a table tag.

One row and three columns:
Each table row starts with a tr tag. 10 20 30
0 0 0
Each table data starts with a td tag.
</p> Two rows and three columns:

10 20 30
0 0 0
<h4>One column:</h4> 40 50 60
0 0 0
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>One row and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<html>
With a normal border:
<body> First Row
Secon
Row
d
<h4>With a normal border:</h4>
With a thick border:
<table border="1"> First Row
<tr> Secon
Row
d
<td>First</td>
<td>Row</td> With a very thick border:

First Row
</tr>
Secon
<tr> Row
d
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With a thick border:</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With a very thick border:</h4>

<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
<table border="1">
<tr> Header 1 Header 2
<th>Header 1</th> row 1, cell 1 row 1, cell 2
<th>Header 2</th> row 2, cell 1 row 2, cell 2
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
<html>
Without cellpadding:
<body> First Row
Secon
Row
d
<h4>Without cellpadding:</h4>
<table border="1">
With cellpadding:
<tr>
First Row
<td>First</td>
<td>Row</td> Secon
Ro
d
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
HTML Lists
An ordered list: An unordered list:
1. The first list item • List item
2. The second list item • List item
3. The third list item • List item
<ul> • Coffee
<li>Coffee</li>
<li>Milk</li> • Milk
</ul>
<ol> 1. Coffee
<li>Coffee</li>
<li>Milk</li> 2. Milk
</ol>
<dl> – Coffee
<dt>Coffee</dt>
<dd>- black hot drink</dd>
– Milk
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<html>
A nested List:
<body> • Coffee
• Tea
○ Black tea
<h4>A nested List:</h4>
○ Green tea
<ul>
• Mil
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
HTML List Tags

Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines an item in a definition list
<dd> Defines a description of an item in a definition list
HTML forms
Html forms are used to pass data to a server.
A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and
more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:
<form> How the HTML code above looks in a
First name: <input type="text"
browser:
name="firstname" /><br />
Top of Form
Last name: <input type="text"
name="lastname" />
</form>
First name:
Last name:
Bottom of Form
Note: The form itself is not visible. Also note
that the default width of a text field is 20
characters.
Password Field How the HTML code above looks in a

browser:
<form> Top of Form
Password: <input type="password"
name="pwd" />
</form> Password:
Bottom of Form
Note: The characters in a password field are

masked (shown as asterisks or circles).
Radio Buttons How the HTML code above looks in a

browser:
<input type="radio" /> defines a radio button. Top of Form
Radio buttons let a user select ONLY ONE one
of a limited number of choices:
<form> Male
<input type="radio" name="sex"
value="male" /> Male<br /> Female
<input type="radio" name="sex"
value="female" /> Female Bottom of Form
</form>
Checkboxes How the HTML code above looks in a

browser:
<input type="checkbox" /> defines a Top of Form
checkbox. Checkboxes let a user select ONE or
MORE options of a limited number of choices.
<form> I have a bike
<input type="checkbox"
name="vehicle" value="Bike" /> I have I have a car
a bike<br />
<input type="checkbox" Bottom of Form
name="vehicle" value="Car" /> I have a

car
</form>
Submit Button How the HTML code above looks in a
browser:
<input type="submit" /> defines a submit Top of Form
button.
A submit button is used to send form data to a Submit
server. The data is sent to the page specified in Username:

the form's action attribute. The file defined in
Bottom of Form
the action attribute usually does something
with the received input: If you type some characters in the text field
<form name="input" above, and click the "Submit" button, the
action="html_form_action.asp" browser will send your input to a page called
method="get"> "html_form_action.asp". The page will show
Username: <input type="text" you the received input.
name="user" />
<input type="submit"
value="Submit" />
</form>
Dropdown List
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Text Area
<html>
<body>
</p> <textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</body>
</html>
Button
<html>
<body>
<form action="">
<input type="button" value="Hello
world!">
</form>
</body>
</html>

HTML Introduction: The Basics of HTML Markup Language

Uploaded by

Document Information

Original Description:

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: The Basics of HTML Markup Language

Uploaded by

Copyright:

Available Formats

Introduction to HTML

<h1>My First Webpage  </h1>

– The start tag is often called the opening tag.

HTML Element Syntax

Lesson Three: HTML Basics

<h1>This is a heading h1</h1>

The hr element can be used to separate content:

<p><i>This text is italic</i></p>

<p><small>This text is small</small></p>

<p>This is<sub> subscript</sub> and

<body> preformatted text.

It preserves both spaces

and line breaks. print i

<p>The pre tag is good for displaying

<body> Computer code

<code>Computer code</code> Sample text

<p><b>Note:</b> These tags are often used to

Ajman University<br />

Address: Box 564, Ajman , UAE <br />

<body> The WHO was founded in 1948.

<p>Can I get this <acronym title="as soon as

<p>The title attribute is used to show the

If your browser supports bi-directional

Here is some Hebrew text

<body> This is a long quotation. This is a long

<p><b>Note:</b> The browser inserts white

<q>This is a short quotation</q>

<p><b>Notice that the browser inserts

<body> My favorite color is blue red!

<p>Notice that browsers will strikethrough

<body style="background- Look! Styles and colors

This text is in Verdana and red</p>

This text is in Times and green</p>

<p style="font-size:30px">This text is 30

The HTML Style Attribute

Deprecated Tags and Attributes

HTML Style Example - Background Color

<p>The old bgcolor attribute only works on the

<p>For future proof HTML, use styles

HTML Style Example - Font, Color and Size

<p><font size="5" face="arial" color="red">A

HTML Style Example - Text Alignment

<body> This is a heading

<body> This is a heading

<p>The heading above is aligned to the center

HTML "Computer Output" Tags

HTML Citations, Quotations, and Definition Tags

HTML Links (hyperlinks):

<img src="smiley.gif" alt="Smiley face" An image with align="middle".

with align="bottom".</p> An image with align="top".

Tip: align="bottom" is default!

<img src="smiley.gif" alt="Smiley face" An image before the text.

<img src="smiley.gif" alt="Smiley face"

<p><b>Tip:</b> align="bottom" is default!

<p><img src="smiley.gif" alt="Smiley face"

An image before the text.</p>

<p>An image after the text.

<img src="smiley.gif" alt="Smiley face"

<html> A paragraph with an image. The align attribute

<img src="smiley.gif" alt="Smiley face"

A paragraph with an image. The align attribute

<img src="smiley.gif" alt="Smiley face"