HTML Introduction: A Simple HTML Document

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
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.

HTML Introduction: A Simple HTML Document

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML Introduction: A Simple HTML Document

Caricato da

Copyright:

Formati disponibili

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:

HTML headings are defined with the <h1> to <h6> tags.

Try this: Output:

HTML paragraphs are defined with the <p> tag:

Try this: Output:

Try this: Output:

upon clicking Page 1….

HTML images are defined with the <img> tag.

Try this: Output:

Try this: Output:

 Empty HTML Elements

HTML elements with no content are called empty elements.

 All HTML elements can have attributes

The width and height Attributes

<img src="img_girl.jpg" width="500" height="600">

The alt Attribute

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

The style Attribute

<p style="color:red">I am a paragraph</p>

Body tag and attributes

Font tag and attributes

Text formatting tags

Exercise #6. Basic HTML tags

1. REFERENCE ARE NOTES ABOVE

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…

3rd – save it as Interests.html

Potrebbero piacerti anche