HTML (Web Developing Tool)
What is HTML?
HTML is an abbreviation of "HyperText Mark-up Language", which makes it possible
to present information on the Internet. HTML is the language in which most websites are
written. HTML is used to create pages and make them functional. What you see, when you
view a page on the Internet is your web browser's interpretation of HTML.
The History of HTML
HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in
1989. 33YEARS OLD
Hypertext means that the document contains links that allow the reader to jump to
other places in the document or to another document altogether. The latest version is
known as HTML5.
HTML Editor
Any plain text editor
• Notepad – Window
• Text Edit – Mac
• notepad /Text Edit (html) + internet browser (view)
Declaration
All HTML documents must start with a <!DOCTYPE> declaration. The declaration is not an HTML tag.
It is an "information" to the browser about what document type to expect.
<!DOCTYPE html>
Java Script , PHP
S3 - HTML - 1
Golden Rules To Remember
The vast majority of tags must be opened (<tag>) and closed (</tag>) with the element
information such as a title or text.
When using multiple tags, the tags must be closed in the order in which they were
opened. For example:
<p><i><b>This is really important!</b></i></p>
HTML Tags
Tags are labels you use to mark up the beginning and end of an element. There are
two kinds of tags - opening tags: <html> and closing tags: </html>. The content is
between an opening tag and a closing tag.
Example
<b>This text is bold.</b>
HTML Elements
HTML Elements give structure to a HTML document and tells the browser how you
want your website to be presented. Generally an element consists of a start tag, some
content, and an end tag.
Example
<tagname>content</tagname>
S3 - HTML - 2
A simple HTML document, with the minimum of required tags:
<html>
<head>
<head>
<title> Title Title
<title> of theofdocument </title>
the document </title>
</head>
</head>
<body>
<body>
The content of the document......
The content of the document......
</body>
</body>
</html>
Title
The <title> tag defines the title of the document. The title element:
• defines a title in the browser toolbar
• provides a title for the page when it is added to favorites
• displays a title for the page in search-engine results
H1
Title
Body
Save the HTML Page
Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred
encoding for HTML files).
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>
S3 - HTML - 3
24 pt
18 pt
14 pt
12 pt
10 pt
8 pt
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML <br> Tag
The <br> tag inserts a single line break. The <br>
tag is an empty tag which means that it has no end tag.
HTML Lines
The <hr> tag creates a horizontal line in an HTML page.
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
<hr>
HTML style Attribute
The style attribute specifies an inline style for an element. Style_definitions are one
or more CSS properties and values separated by semicolons (e.g. style="color:blue;text-
align:center")
<element style = "style_definitions">
Some CSS properties
▪ color
▪ background-color
S3 - HTML - 4
▪ font-family
▪ font-size
▪ text-align
HTML Links
HTML links are defined with the <a> tag.
<a href="http://www.google.com"> This is a link </a>
<a href="http://www.google.com" target="_blank">GOOGLE</a>
HTML <img> Tag
The <img> tag embeds an image in an HTML page.
Images are not technically inserted into an HTML page.
Images are linked to HTML pages. The <img> tag creates a
holding space for the referenced image.
<img src="/R:\S3\HTML\angry.gif" alt="Angry face">
<img src="/R:\S3\HTML\happy.jpg" align=“center” width =“100” height=“100”>
Note: align="left" is the default alignment!
Link to Email
<a href="mailto:youremailaddress">Email Me</a>
HTML Lists
Ordered list <ol>
1. The first list item <li>Coffee</li> 1. Coffee
2. The second list item <li>Milk</li> 2. Milk
3. The third list item </ol>
S3 - HTML - 5
Unordered list <ul>
• List item <li>Coffee</li> • Coffee
• List item <li>Milk</li> • Milk
• List item </ul>
Syntax
<ul type="value">
Value Description
disc Default. A filled circle
circle An unfilled circle
square A filled square
Syntax
<ol type="value">
Value Description
1 Numerical ordered list (this is default) (1, 2, 3, 4)
a Alphabetically ordered list, lowercase (a, b, c, d)
A Alphabetically ordered list, uppercase (A, B, C, D)
i Roman numbers, lowercase (i, ii, iii, iv)
I Roman numbers, uppercase (I, II, III, IV)
Tables
➢ Tables are defined with the <table> tag.
➢ Tables are divided into table rows with the <tr> tag.
➢ Table rows are divided into table data with the <td> tag.
➢ A table row can also be divided into table headings with the <th> tag.
S3 - HTML - 6
An HTML Table with a Border Attribute
If you do not specify a border for the table, it will be displayed without borders.
A border can be added using the border attribute:
S3 - HTML - 7
Exercise 1 ( intro.html )
Write the title of your webpage : A Simple HTML Example
Use heading1 style for first line of paragraph.
Use paragraph style for all paragraphs.
Exercise 2 ( colors.html )
Write the title of your webpage : My Favorite Color List
Change all font name is “Cambria.”
Use heading style for each line . (h1, h2, h3, …..)
Change all different color for each line.
Exercise 3 ( styles.html )
Write the title of your webpage : Leadership
Change suitable background color
Self Responsibilities = H2
Paragraphs = Footlight MT Light, 16px, Darkred
Exercise 4 ( Break.html )
Web page title = Poem
A THORNY ROSE = H1
All lines = Hobo Std, 16 px, Purple
Insert a break after one sentence
Insert pictures from Resource R:
Exercise 5 ( lists.html )
Web page title = Order List
S3 - HTML - 8
Font = Courier
Font size = 15px
Hr = Width 90%, Size 3
Exercise 6 ( links.html )
Web page title = Testing Links
Font = Verdana
Font size = 22px
*Use Target command to open in new window for all web sites.
Link to Ex4 file from X:
Link to www.bing.com
Link to www.w3schools.com
Link to www.ixl.com
Link to [email protected]
Exercise 7 ( table.html )
Web page title = Making Table
Background Color = Lightgray
Font = Arial
Font Size =16
Table Border = 3
Extra Activity ( Extra.html )
❖ Check the instruction and sample from Resource R:
HTML Tags
Tag Description
<a> Defines a hyperlink
<b> Defines bold text
S3 - HTML - 9
<body> Defines the document's body
<br> Defines a single line break
<h1> to <h6> Defines HTML headings
<head> Defines information about the document
<hr> Defines a thematic change in the content
<html> Defines the root of an HTML document
<i> Defines a part of text in an italic
<img> Defines an image
<li> Defines a list item
<p> Defines a paragraph
<style> Defines style information for a document
<table> Defines a table
<tbody> Groups the body content in a table
<td> Defines a cell in a table (table data)
<th> Defines a header cell in a table
<time> Defines a date/time
<title> Defines a title for the document
<tr> Defines a row in a table
<u> Defines text that should be stylistically different from normal text
<ul> Defines an unordered list
<li>
Defines a list item
S3 - HTML - 10
<ol> Defines an ordered list
S3 - HTML - 11
