Scribd
Upload
19 views

Intro To HTML

Uploaded by

Pharoah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

Intro To HTML

Uploaded by

Pharoah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 69

Introduction to HTML

Overview MarkUp languages


HTML Tags
Attributes and values
Comments
Basic structure of a web-
page
Basic Tags
Exercise 1
By the end of the lecture, you should be able to:
Describe the properties of a well-designed web-site.
Appreciate the basic tags used in HTML and their use in
creating web-pages.
Use of color, font and gradient
Sectioning the web-page
Appropriate use of images
Dynamism of content
Web-page security and validation
SEO
Given a document containing only plain text, we tag
certain parts of the document to indicate what they
are and how they should be formatted

This procedure is called marking-up the document


The mark-up language we will be mainly working
on in this module is HTML.
The acronym stands for Hypertext Markup
Language.
It is a standardized system for tagging text files to
achieve font, colour, graphic, and hyperlink effects
on World Wide Web pages.
Hypertext: Refers to the hyperlinks that an HTML
page may contain
Markup language: refers to the way tags are used to
define the page layout and elements within the page.
The code recognized by browsers are called tags.
Every tag tells the browser to do something
special.
A tag is written between angled brackets < >
Most tags are paired (they have an open and close
tag). <tag>…</tag>.
Closing tags are always preceded by a backslash
Some tags do not require a closing tag. <tag>
HTML defines the structure and layout of a Web
document by using a variety of tags and attributes.
It defines the structure on an HTML page, including
the placement of text and images and hypertext
links.
HTML tags begin with the less-than (<) character
and end with greater-than (>). .
These symbols are also called "angle brackets."
Note:
Tags are usually paired:
e.g. <title>My Memoirs</title>
A pair of tags plus their content constitute an
element
An Open/Empty tag:
Do not have closing tags.
Empty elements must also be closed .

<tag attribute="value" />


e.g.:

An image: <img src="image.gif" />


A break: <br />
A horizontal rule: <hr />

A PAIRED tag :
<tag attribute="value"> data </tag>
<font face="arial"> font type arial </font>
Free:
Sublime Text
NetBeans
Eclipse
Notepad++

To pay
Dreamweaver
Open a notepad document.
Put in the following tags
<html>
Hello World!!!
</html>
Save the document in any folder with the name
HelloWorld.html
Run the file by double-clicking on it so that it
opens in a browser.
Attributes
Only placed in the opening tag (not in the closing
tag)
Use one or multiple attributes in a single tag
separated by spaces

Values
Text or numeric to further describe attributes
Some values are case-sensitive
Values should be enclosed in straight quotes ( ""),
not curly ones ( “ ” )
Comments are delimited by <!-- and -->
<!– this is a comment -->

Comments may span multiple lines

<body>
<!--
this is
a comment
-->
</body>
First and last tags
The HEAD section
must come before the BODY section
contains generic information about the document
Elements specified in the HEAD section can include
– title, link, script, style
The BODY section
contains the content of the document (text, images
etc)
this content is structured by other tags
<html>…</html>

<head>…</head> (Header)
Not all browsers require this tag. Contains information about the
document

<title>…</title>
The text contained within these tags appears in your browser’s
title bar

<body>…</body>
Required. All of the information is contained between these tags.

<p>…</p> (Paragraph)
Used to create a new paragraph (inserts a new line and carriage
return on your page). The </p> Closing tag is optional. It is
required when using attributes with the <p> tag
<!DOCTYPE html PUBLIC "-//w3c/dtd html 4.0 final//en">
<html>
<head>
<title>Exercise 4-1</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the start of a new paragraph. You can just keep
on typing and typing and this is still part of the same
paragraph.
</p>
<p>This is the start of another paragraph. </p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//w3c/dtd html 4.0
final//en">
The <!DOCTYPE> element should be used as the
first line of all HTML documents.
Validation programs might use this construct when
determining the correctness of an HTML document.
The DOCTYPE declaration defines the document
type.
The "html" refers to the <html> root tag in the
document.
PUBLIC points to the document type definition that
is recorded with the International Standards
Organization.
Six levels of importance <h1>...<h6>
Use headings to divide document into sections

<html>
<head>
<title>Headings</title>
</head>
<body>
<h2>Chapter 1</h2>
<h3>1. Introduction</h3>
This is the introduction
<h3>2. Next section</h3>
This is the next section
<h4>2.1 A subsection</h4>
This is a subsection
</body>
</html>
Descriptive elements affect the <body>
appearance of text depending on A <em>fascinating</em>
how the text is described subject that I
• <em></em> emphasis, usually with <strong>must</strong>
italics understand
</body>
• <strong></strong> strong,
usually with bold
• <cite></cite> citation, usually in
italics
• <code></code> usually results in
monotype spacing
• <boldface></boldface>
• <big></big> bigger font than surrounding text
• <small></small> smaller font than surrounding text
• <i></i> italics
• <s></s> strikethrough
• <sub></sub> subscripts
• <sup></sup> superscripts
• <span></span> delimits text for stylesheet control
• <div></div> delimits blocks of text for stylesheet
control
<font> attributes
• face - name of font (must be installed)
– "arial", "times", "verdana", "helvetica"
• size - absolute size (1-7), or relative to previous text
– "2", "5", "7", "+1", "-2"...
• color - hexadecimal RGB, or a named color
– "3399dd", "blue", "red"
• weight - boldness from 100, 200, ..., 900
– "100", "300", "900"
e.g.

<font face="arial" size="+1" color="pink" weight="300">


Font Styles and Sizes (can be nested)

<b>..</b> - Sets bold text.


<big>..</big> - Sets larger than normal text.
<em>..</em> - Sets text in italics and denotes emphasis.
<i>..</i> - Sets text in italics.
<small>..</small> - Makes text smaller than normal.
<strike>..</strike> - Draws a line through the text as a "strikeout".
<strong>..</strong> - Same as bold but denotes strong emphasis.
<sup>..</sup> -Superscript
<sub>..</sub> -Subscript
<tt>..</tt> - Monospaced typewriter font.
<u>..</u> - Underlined text.
<var>..</var> - Mark a variable.
This is an example of the <b>&#60;b&#62; tag </b>.<br>

This is an example of the <big>&#60;big&#62; tag</big>.<br>

This is an example of the <em>&#60;em&#62; tag</em><br>

This is an example of the <i>&#60;i&#62; tag</i>.<br>

This is an example of the <small>&#60;small&#62; tag</small>.<br>

This is an example of the <strike>&#60;strike&#62;


tag</strike>.<br>

This is an example of the <strong>&#60;strong&#62; tag<strong>.<br>

This is an example of the <sup>&#60;sup&#62; tag<sup>.<br>

This is an example of the <sub>&#60;sub&#62; tag<sub>.<br>

This is an example of the <tt>&#60;tt&#62; tag<tt>.<br>

This is an example of the <u>&#60;u&#62; tag</u><br>

This is an example of the <var>&#60;var&#62; tag</var><br>


<html>
<head>
<title>Exercise 4-2</title>
</head>
<body>
<h1>Welcome</h1>
<h3>Here is an example of a smaller heading</h3>
You can type text <b>without any tags at all too! </b> You can just keep on typing
and typing and this is still <sup> part of the same paragraph.</sup>
<br />
But to get a <i>new line</i> you need the BREAK tag.
<u>This isn’t too difficult now is it? </u>
<br />
<b><i><u>You can even combine tags</u></i></b>
<br /><br /><br />
See how the subscript tag works.
<sub> Hey, are Spaces ignored?</sub>
<BR/><BR/>
And do not forget <strong> the strong tag </strong>
</body>
</html>
<li>…</li> (List Item)
Each item in the list must be preceded by this <li>
tag

<ul>…</ul> (Unordered list)


This tag creates a list of items with no ordering (no
numbering).

<ol>…</ol> (Ordered List)


Creates a list of items that are automatically
ordered for you (with numbering).
Specifies the symbol at the beginning of each
list item
(NOTE: this value must be in lowercase)

Unordered Lists: TYPE Attribute


Attribute and Values List Type Example
type = disc (default) Solid Round Bullet l
type = square Square n
type = circle Hollow o ¡

Ordered Lists: TYPE Attribute


Attribute and Values List Type Example
type = 1 (default) Numbers 1, 2, 3
type = A Uppercase Letters A, B, C
type = a Lowercase Letters a, b, c
type = I Uppercase Roman Numerals I, II, III
type = i Lowercase Roman Numerals i, ii, iii
<html> <li>Chocolate
<head> Cake</li>
<title>Exercise 4- <li>Steak</li>
3</title> </ol>
</head> My Favorite Animals
<body> <ol type = i>
My Favorite Places <li>Dogs</li>
<ul type = "square"> <li>Horses</li>
<li>Italy</li> <li>Iguanas</li>
<li>Greece</li> </ol>
<li>Germany</li> </body>
</ul> </html>
My Favorite Foods
<ol>
<li>Chicken</li>
<div>…</div>
Used to align paragraphs or blocks of
content in relation to the browser window.
e.g <div align= "center">…</div>

<hr /> (Horizontal Rule)


Creates a separator line across the screen with
a default size of two pixels.

<font>…</font>
Allows you to control how your text is
displayed.
WIDTH:
Used to control the width of items like
horizontal rules. (Specified in either pixels or
percentage %)

ALIGN:
Allows you to control which way to align text and
objects using values of "left", "right" or "center”
<html>
<!-- Notice how you can put tags either above or along side one
another //-->
<head>
<title>Exercise 4-4</title>
</head>
<body>
<font size= "4" face = "Arial">
<div align= "center"><h1>Welcome</h1></div>
<p>Learning HTML is pretty easy, isn’t it?</p>
</font>
<hr width="70%" align="center" />
<p>Note that the ALIGN attribute that can be used to center
text</p>
</body>
</html>
Color can be specified in 3 ways:
Standard colors (blue, red, black, white)
Hexadecimal (#FFFFFF, #99FF66)
Decimal (255,255,255 or 0,0,0)
• Example of web color chart:
http://html-color-codes.com/rgb.html
e.g :

<body bgcolor="#994422">
img element <img />
src attribute
Specifies the location of the image file
width and height

Gradients usually form the background while blending


in with the foreground or the rest of the page.
They sometimes form part of the banner – which can
be edited using software like photoshop.
Special graphics are useful which are able to blend
with the background.
SRC
Specifies where the graphic image resides

WIDTH
· Specifies the width of the image in pixels, as you want it displayed on your web page. It
may be different from the dimensions of the picture.

HEIGHT
Specifies the height of the image in pixels, as you want it displayed on your web page. It may
be different from the dimensions of the picture.

ALT
Very important. Specifies what text you want displayed for people whose browsers don’t
support graphics or for people who’ve turned them off in their browser settings.

BORDER
Adds a border.
Used the same as the border attribute used in Tables.
Measured in pixels.

ALIGN
Specifies the image alignment, can be “top, bottom, middle, left, or right”
There are 4 places you might want to link to:
1) Another web page in same folder you are linking
FROM.
2) Another web page in a different folder
The folder can be beside, above or below the one
you are linking from.
3) Another web page on a different server (another
website)
4) A specific location on the current web page
Links are defined by the <a> Anchor tag and consist of
two main parts: the target source specified by the
HREF attribute and the actual document needed to
create the "hotspot“.

<a>…</a> (Anchor)

This tag tells the browser that you will be linking to


another page.
The Hypertext Reference or href attribute accompanies
the anchor tag.

<a href="AnotherPage.htm">This text between the anchor


tags becomes the link</a>
You can link to a "Named Location" sometimes
called a "bookmark.
This named location can be one that is on the
same page, or it can be a different page.
The attribute needed here is the name.

NAME
Use this to give names to locations on a page
Use the pound sign ( # ) to reference a named
location
<!DOCTYPE html PUBLIC "-//w3c/dtd html 4.0 1 teaspoon dried rosemary<br />
final//en"> 2 tablespoons Parmesan cheese <br />
<!-- Linking to locations on the same page //-->
1 cup chopped onions<br />
<html> <head> <br /><br />
<title>Exercise 5</title> <a href="#Home">Top of Page</a>
</head> <br /><br /><br /><br /><br /><br /><br /><br />
<div align="center"><body><h1> <h3><a name="Chicken">Great Chicken</a></h3>
<a name="Home">Recipes R' Us</a></h1> 2 diced tomatoes<br />
<hr />
1 tablespoon fresh basil<br />
<!– Links to various sections of the page //-->
1 teaspoon olive oil<br />
<a href="#Pasta">Great Pasta</a><br />
<br /><br />
<a href="#Steak">Great Meat Loaf</a><br />
<a href="#Home">Top of Page</a>
<a href="#Chicken">Great Chicken</a><br /> <br /><br /><br /><br /><br /><br /><br /><br />
<hr /> <br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br />
<h3><a name="Pasta">Great Pasta</a></h3> </div>
1 pound pasta<br /> </body>
2 teaspoons olive oil<br />
</html>
1 cup chopped roasted pepper<br />
<br /><br />
<a href="#Home">Top of Page</a>
<br /><br /><br /><br /><br /><br /><br /><br />
<h3><a name="Steak">Great Meat Loaf</a></h3>
You just reference the name of the .html file
you want to link to in your anchor tag.
<html> 1 cup chopped roasted pepper<br />
<body>
</body>
<head> </html>
</head>
<div align="center"><body><h1><a
name="Home">Recipes R' Us</h1></a>
<hr />
<a href="#Pasta">Great Pasta</a><br />
<a href="#Steak">Great Meat Loaf</a><br />
<a href="#Chicken">Great Chicken</a><br />
<hr /> <br />
<a href="contact.htm">Contact us</a><br />
<br /><br /><br /><br /><br /><br /><br /><br
/>
<h3><a name="Pasta">Great Pasta</a></h3>
1 pound pasta<br />
2 teaspoons olive oil<br />
<html>
<body>

<head>
</head>
<div align="center"><body><h1><a
name="Home">Home</h1></a>
<hr />
<a href="http://www.cut.ac.zw">Chinhoyi
University</a><br />
<a href="http://www.google.co.zw">Google</a><br />
<br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>
Supposing that the folder is parallel (having the same
parent) to the one you’ve been working in.
The folder name needs to precede the file name.
IMPORTANT – A Backslash precedes the folder name to
access a file in a parallel folder or any other folder at
the same level or above the one you are linking
FROM. The whole path name should always be
included.
NOTE: Different browsers might react differently to
link syntax as described above. The most reliable way
to link to a document in another folder is to use the
Absolute address. e.g. <a
href="http://www.domainname.com/Folder2/contact.
htm">Contact us</a>
<html>
<body>

<div align="center"><body><h1><a name = "Home">Recipes R' Us</h1></a>


<hr />
<a href="#Pasta">Great Pasta</a><br />
<a href="#Steak">Great Meat Loaf</a><br />
<a href="#Chicken">Great Chicken</a><br />
<hr />
<br />
<!-- <a href="contact.htm">Contact us</a><br /> //-->
<a href="JavaScript\contact.htm">Contact us</a><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<h3><a name ="Pasta">Great Pasta</a></h3>
1 pound pasta<br />
2 teaspoons olive oil<br />

</body>
</html>
<html> <br /><br /><br /><br /><br /><br /><br
<body> /><br />
<h3><a name ="Pasta">Great
Pasta</a></h3>
<div align="center"><body><h1><a name =
"Home">Recipes R' Us</h1></a> 1 pound pasta<br />
<hr /> 2 teaspoons olive oil<br />
<a href="#Pasta">Great Pasta</a><br />
<a href="#Steak">Great Meat Loaf</a><br </body>
/> </html>
<a href="#Chicken">Great Chicken</a><br
/>
<hr />
<br />
<!-- <a href="contact.htm">Contact
us</a><br /> //-->
<a
href="..\SampleFiles2\contact.htm">C
ontact us</a><br />
The ..\ tells the browser to navigate up from
where it is.
Tags for Creating Tables

<table>…</table>
Defines the table structure

<tr>…</tr> (Table Row)


Defines a row in the table

<td>…</td> (Table Data)


Creates a cell for the table

<th>…</th> (Table Heading)


Creates one or more headings (Usually appears centered and
bold in most browsers)

<caption>…</caption>
Creates a title for a table. (By default, this title appears above
the table.)
BGCOLOR
Creates a background color

BORDER
Creates a border around a table

BORDERCOLOR
Adds a color to the border

COLSPAN
Makes a row cross multiple columns

ROWSPAN
Makes a column cross multiple rows

CELLPADDING
<!DOCTYPE html PUBLIC "-//w3c/dtd html 4.0 final//en"> </tr>
<html> <!-- Row #2 //-->
<head> <tr align="center">
<title>Tables</title> <td>Ziti</td>
</head> <td>Steak</td>
<body> <td>Swordfish</td>
<div align="center"><h1>Recipes R' US</h1></div> </tr>
<!-- Row #3 //-->
<table align="center" bgcolor="lavender" border="1" <tr align="center">
bordercolor="black" cellpadding="8">
<td>Ravioli</td>
<td>Pork</td>
<caption><b>Select a Recipe</b></caption>
<td>Tuna</td>
</tr>
<!-- New Row //-->
<tr align="center">
<tr align="center">
<td rowspan="4">It's Good Food</td> <td colspan="4"><b>Eat Healthy</b></td>
<th>Pasta</th>
</tr>
<th>Meat</th>
<th>Fish</th>
</table>
</tr> </body>
<!-- Row #1 //--> </html>
<tr align="center">
<td>Spaghetti</td>
<td><a href="Chicken">Chicken</a></td>
<td>Salmon</td>
<body bgcolor="skyblue"> <tr align="center">
<div align="center"><h1>Recipes R' <td>Ziti</td>
US</h1></div> <td>Steak</td>
<td>Swordfish</td>
<table align="center" bgcolor="PINK" border="1" </tr>
bordercolor="black" cellpadding="8">
<!-- Row #3 //-->
<tr align="center">
<caption><b>Select a Recipe</b></caption>
<td><img src="cake.png" height= "50"
<!-- New Row //--> width="50" ALT="Piece of
<tr align="center"> cake"/><br/>Cake</td>
<td rowspan="4">It's Good Food</td> <td><img src="pig.png" height= "50"
<th>Pasta</th> width="50" border="2"/><br/>Pork</td>

<th>Meat</th> <td><img src="1_fish.ico" height= "50"


width="50" align="right"/><br/>Tuna</td>
<th>Fish</th>
</tr>
</tr>
<!-- Row #1 //-->
<tr align="center">
<tr align="center">
<td colspan="4"><b>Eat
<td>Spaghetti</td> Healthy</b></td>
<td><a href=""><img src="chat.png" </tr>
border="0" alt="Chicken" height= "50"
width="50" /><br/>Chicken</a></td> </table>

<td>Salmon</td> </body>

</tr>
<!-- Row #2 //-->
You simply need to combine the Anchor tag with the Image tag.

<html>
<head>
<title>Thumbnail Images</title>
</head>
<body>

<a href="chat.png">
<img src="chat.png" height="40" width="40" border="0"
alt="Thumbnail of Chat" />
</a>

</body>
</html>
Make use of the ALIGN attribute as shown below.

<html>
<head>
<title>Thumbnail Images</title>
</head>
<body>

<a href="chat.png">
<img src="chat.png" height="60" width="60" border="1" alt="Thumbnail of Chat"
align="right"/>
</a>

<p align="center">Watching the Space Shuttle take off is a breathtaking site.


If you ever get a chance to go and watch it in person, it will be worth the trip.<br />
Click on the image to see a full picture of the launching.</p>

</body>
</html>
Numerous tags exist that allow you to:
Specify the layout of your web-site.
Specify the formatting of the web-site.
Embed different kinds of objects such as links, videos and
animations
The following were obtained from
https://www.w3schools.com/tags/ where usage
examples are also available

You might also like