HTML Basic: Objectives

ICT KLIK 2018| Organized by Information Security & Assurance students| FST, USIM
HTML Basic
This workshop leads you through the basics of Hyper Text Markup Language (HTML). HTML is the
building block for web pages. You will learn to use HTML to author an HTML page to display in a web
browser.
Objectives:
By the end of this workshop, you will be able to:
 Use a text editor to author an HTML document.

 Be able to use basic tags to denote paragraphs, emphasis or special type.
 Create hyperlinks to other documents.
 Create an email link.
 Add images to your document.
 Use a table for layout.
 Apply colors to your HTML document.
HTML Elements
<html>
<head>
<title>Myself</title>
</head>
<body>
This is my first homepage.
</body>
</html>
This is an HTML element:
<body>
This is my first homepage.
</body>
This HTML element starts with the start tag <body>, and ends with the end tag </body>. The purpose of the
<body> tag is to define the HTML element that contains the body of the HTML document.
Basic HTML Tag

The most important tags in HTML are tags that define headings, paragraphs and line breaks.
Basic HTML Tags
Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break

<hr> Defines a horizontal rule
<!--> Defines a comment
Heading
Headings are defined with the <h1> to <h6>tags. <h1>defines the largest heading while <h6> defines the
smallest.
<h1>This is a heading</h1>
<h6> This is a heading
Pharagraph
Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text. You can use the align
attribute with a paragraph tag as well.
<p align="left">This is a paragraph</p>
<p align="center">this is another paragraph</p>
Line Break
The <br>tag is used when you want to start a new line, but don't want to start a new paragraph. The
<br>tag forces a line break wherever you place it. It is similar to single spacing in a document.
Code Display
This
<p>This <br> is a para<br> graph with line
is a para
breaks</p> graph with line breaks
The <br>tag has no closing tag.
It is vital when we want to make a poem .

HTML Tags
Logical Tags Physical Tags

Tag Description
Tag Description
<abbr> Defines an abbreviation
<b> Defines bold text
<acronym> Defines an acronym
<big> Defines big text
<address> Defines an address element
<cite> Defines a citation <i> Defines italic text
<code> Defines computer codetext <small> Defines small text
<sup> Defines superscripted text
<blockquote> Defines a long quotation
<sub> Defines subscripted text
<del> Defines text
<tt> Defines teletype text
<dfn> Defines a definition term
<u> Deprecated. Use styles instead
<em> Defines emphasized text
<ins> Defines inserted text

<kbd> Defines keyboard text
<pre> Defines preformatted text
<q> Defines a short quotation
<samp> Defines sample computer code
<strong> Defines strong text
<var> Defines a variable
Character tags like <strong> and <em> produce the same physical display as <b> and <i>but are more
uniformly supported across different browsers.
HTML Character Entities
The Most Common Character Entities:
Result Description Entity Name

non-breaking space
< less than <
> greater than >
& ampersand &
" quotation mark "
' apostrophe ' (does not work in IE)
Non-breaking Space
The most common character entity in HTML is the non-breaking space . To add spaces to
your text, use the character entity.
This Code Would Display

<p> This code would This code would appear with three extra spaces.
appear with three extra spaces.</p>
HTML Backgrounds
Backgrounds
The <body>tag has two attributes where you can specify backgrounds. The background can be a color or
an image.
Bgcolor
The value of this background-color for an HTML page can be a hexadecimal number, an RGB value, or a
color name:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
The lines above all set the background-color to black.
HTML Colors
Color Values and Names
Color Color HEX Color RGB Color Color HEX Color Name
#000000 rgb(0,0,0) #F0F8FF AliceBlue
#FF0000 rgb(255,0,0) #FAEBD7 AntiqueWhite
#00FF00 rgb(0,255,0) #7FFFD4 Aquamarine
#000000 Black
#0000FF rgb(0,0,255)
#0000FF Blue
#FFFF00 rgb(255,255,0)
#8A2BE2 BlueViolet
#00FFFF rgb(0,255,255)
#A52A2A Brown
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
HTML supports 140 standard color names

HTML Lists
HTML provides a simple way to show unordered lists (bullet lists) or ordered lists (numbered lists).
Unordered Lists
An unordered list is a list of items marked with bullets (typically small black circles). An unordered list
starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>
<li>Coffee</li>  Coffee
<li>Milk</li>  Milk
</ul>
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts
with the <ol> tag. Each list item starts with the <li> tag.

<ol>
<li>Coffee</li> 1. Coffee
<li>Milk</li> 2. Milk
</ol>
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
HTML Links
The Anchor Tag and the Href Attribute
HTML uses the <a>anchor tag to create a link to another document or web page. An anchor can point to any
resource on the Web: an HTML page, an image, a sound file, a movie, etc. The syntax of creating an anchor:
<a href="url">Text to be displayed</a>

<a href="http://www.usim.edu/">Visit ACC!</a> Visit USIM
The Target Attribute

With the target attribute, you can define where the linked document will be opened. By default, the link
will open in the current window. The code below will open the document in a new browser window:
<a href=http://www.usim.edu target="_blank">Visit USIM</a>
Email Links
To create an email link, you will use mailto: plus your email address.
<a href="mailto: miraizati97@yahoo.com?subject=Email Assistance">Email</a>
HTML Images
The Image Tag and the Src Attribute

The <img> tag has no closing tag. Src stands for "source". The value of the src attribute is the URL
of the image you want to display on your page. The syntax of defining an image:
<img src="graphics/chef.gif">
The Alt Attribute

<img src="graphics/chef.gif" alt="Smiling Happy Chef ">
The alt attribute tells the reader what he or she is missing on a page if the browser can't load
images. The browser will then display the alternate text instead of the image.
Image Dimensions
If you put in the image dimensions in pixels however, the browser simply reserves a space for the
image, then loads the rest of the page. Once the entire page is loads it can go back and fill in the
images. Without dimensions, when it runs into an image, the browser has to pause loading the
page, load the image, then continue loading the page. The chef image would then be:
<img src="graphics/chef.gif" width="130" height="101" alt="Smiling Happy Chef">
Table
Table Tags
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
 Cellspacing is the pixel width between the individual data cells in the table (The thickness of the lines
making the table grid).
 Cellpadding is the pixel space between the cell contents and the cell border
This code Would Display

<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<table border="2" cellspacing="5" cellpadding="5">
<th>Heading</th>
<th>Another Heading</th>
<tr>
<td>text1</td>
<td>text2</td>
</tr>
<tr>
<td>text3</td>
<td>text4</td>
</tr>
</table>
</body>
</html>
Try It Out!
Let's put everything you've learned together to create a simple page. Open your text editor and
type the following text:
<html>
<head>
<title>Myself </title>
</head>
<body>
<table width="90%" cellpadding="5" cellspacing="0" >
<tr bgcolor="#EDDD9E">
<td width="200" valign="top"><img src="graphics/contact.gif"
width="100" height="100"></td>
<td valign="top"><h1 align="right">Janet Doeson</h1>
<h3 align="right">Technical Specialist</h3></td>
</tr>
<tr>
<td width="200">
<h3>Menu</h3>
<ul>
<li><a href="home.html">Home</a></li>
<li> <a href="faq.html">FAQ</a></li>
<li> <a href="contact.html">Contact</a></li>
<li> <a href="http://www.austincc.edu">Links</a> </li>
</ul></td>
<td valign="top"><h2 align="center">Welcome!</h2>
<p>Welcome to my first webpage. I created this webpage without the assistance of a
webpage editor. Just my little text editor and a keen understanding of html.</p>
<p>Look around. Notice I'm able to use paragraphs, lists and headings. You may not
be able to tell, but the layout is done with a table. I'm very clever. </p>
<blockquote>
<p>I always wanted to be somebody, but now I realize I should have been
more specific.</p>
<cite>Lily Tomlin </cite> </blockquote> </td>
</tr>
</table>
<hr width="90%" align="left">
<address>
Janet Doeson<br>
Technical
Specialist<br>
512.555.5555
</address>
<p>Contact me at <a href="mailto:jdoeson@acme.com">jdoeson@acme.com</a> </p>
</body>
</html>

HTML Basic: Objectives

Uploaded by

HTML Basic: Objectives

Uploaded by

ICT KLIK 2018| Organized by Information Security & Assurance students| FST, USIM

 Use a text editor to author an HTML document.

This is an HTML element:

Basic HTML Tag

Basic HTML Tags

<br> Inserts a single line break

The <br>tag has no closing tag.

It is vital when we want to make a poem .

Logical Tags Physical Tags

<ins> Defines inserted text

HTML Character Entities

The Most Common Character Entities:

Result Description Entity Name

This Code Would Display

The lines above all set the background-color to black.

HTML supports 140 standard color names

This Code Would Display

This Code Would Display

The Anchor Tag and the Href Attribute

<a href="url">Text to be displayed</a>

This Code Would Display

The Target Attribute

<a href="mailto: miraizati97@yahoo.com?subject=Email Assistance">Email</a>

The Image Tag and the Src Attribute

This Code Would Display

The Alt Attribute

<img src="graphics/chef.gif" width="130" height="101" alt="Smiling Happy Chef">

This code Would Display

You might also like