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> t ag:
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
Name: ________________________________________ Score: ___________
Course, Yr. & Sec.: ______________________________ Date: ____________
Exercise #6. Basic HTML tags
1. REFERENCE ARE NOTES ABOVE
2. Open notepad or notepad++ on your computer and create a simple website.
3. It should have this output:
1st – save it as Home.html
Use<h1> for the heading of Welcometo my page.
2nd – save it as Aboutme.html
Should have a heading <h2> – All about myself…
Insert any picture/image in this file. Next,
Consist of 2 paragraphs.
The 1st paragraph is an autobiography.
The 2nd paragraph is about your family and everything that makes you happy.
3rd – save it as Interests.html
What are your interests or hobbies, what you like to do most of the time. It should be in bullets
use unordered list for this.
Tell something about your favorites like: foods, movies or mobile games etc. ( choose 1 among
your favorites) then it should be in numbering so use ordered list.
4. Use at least 4 HTML tags and their attributes reference on Page 6 for formatting and to have a
better output.
