Web Page

CP 22 -
Short History of Web Site

 In the beginnings of the Internet
It was very hard to

exchange data.
Created a way to connect

text on the Internet through Tim Berners-
Hypertext Links Lee
Hypertext Markup Language (HTML)

Become very popular, and
caught on better than other
developer's projects.
What is HTML
 Hypertext Markup Language, a standardized
system for tagging text files to achieve font,
color, graphic, and hyperlink effects on World
Wide Web pages.
 HTML stands for Hyper Text Markup Language
 HTML is not a programming language, it is a
markup language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web pages
HTML Tags
 HTML markup tags are usually called HTML
tags
 HTML tags are keywords surrounded by angle
brackets like <html>

 HTML tags normally come in pairs like 
and 
 The first tag in a pair is the start tag, the
second tag is the end tag

 Start and end tags are also called opening
tags and closing tags

4 Basic Elements of HTML Page
1. The HTML Tags
2. The Head Tags
3. The Title Tags
4. the body Tags
<html>
<head>
<title>My First Web Site</title>
</head>
<body>
This is my first web site. I hope you enjoy it!
</body>
</html>
The HTML Tags
 The <html> and </html> tags wrapped
around the text tells you this is an HTML
document. They signify the start of the web
page and the end of the web page.
The Head Tags
 The <head> and </head>
tags wrapped around the
title tags tell the web
browser this is where you
can get specific information
about this page, and how it
is displayed.
 The head tags must be at
the top of the page, after

the first HTML tag.
The Title Tag
The <title> and </title> tags
tells the browser that what is
in between here is the title
for the web page.
 It will be shown (in most
browser) at the top of the

menu and on the tab you are
browsing from.
The Body Tags
 The <body> and </body> tags wrapped
around the text tells you this is the "body" of
the web page, where the content you want
displayed in the browser goes.
HTML SAMPLE
 <html>
 <head>
 <title>My First Web Site</title>
 </head>
 <body>
 This is my first web site. I hope you enjoy it!
 </body>
 </html>
Viewed in the Web Browser
What is Web Page
 is a document or information resource that is
suitable for the World Wide Web and can be
accessed through a web browser and
displayed on a monitor or mobile device.
 HTML documents describe web pages
 HTML documents contain HTML tags and
plain text
 HTML documents are also called web pages.
Basic parts of a Web page
 Site ID
 Banner Ads
 Shopping Cart
 Meta Navigation
 Main or Tier 1 Navigation
 Search
 Sub Section or Tier 2 Navigation
 Local Navigation
 Page Name
 Content Area
 Footer
Site ID
 It is usually he company logo or name and
sometimes has the company tag line too.
Banner Ads
 This is usually an animated graphic which
endorses another product or company.
Shopping Cart
 It is a software for online shoppers to keep
track of their selection, and automatic
updates the items chosen.
Meta Navigation
 A navigation section of a web page which
usually about the company,
 Sometimes, it is placed separately from the
main navigation so as not to distract from the

main section, but still visible enough.
Main or Tier 1 Navigation
 This is usually the persistent navigation
throughout the site and tells you what the
main section of the website
Search
 When a website has 20 or more pages, It is
advisable to have a search feature.
 User will be able to search for information
they need by typing in a keyword.

Sub Section or Tier 2 Navigation
 A sub navigation for a particular section of a
website.
 It is persistent only within the section
Local Navigation
 An area of the web page where you can click
further and get details of the product or
information you are looking for.
Page Name or Title
 This the title of the page which tells the user
what page they are on.
Content Area
 This is the section where you find the
contents.
Footer
 The bottom part of the page and may contain
a disclaimer, contact information, or links to
main sections.
How to make HTML page
 You don't need any tools to learn HTML
 You don't need an HTML editor
 You don't need a web server
 You don't need a web site
We need only a Text editor Like:

Note Pad
Steps in Making basic HTML
 First thing you need to do is gather your
content.
 Create a Folder in your My document
example “My html”

 Open Note Pad
 Start Typing your HTML code
 After Typing your code save the file as .html
into your folder.

 Open the save .html file in your internet
browser.
A Simple HTML Example
 <html>
 <body>
 This is my first web site. I
hope you enjoy it!
 </body>
 </html>
Sample 2
 <HTML>
 <HEAD>
 <TITLE>Justin's Homepage</TITLE>
 </HEAD>
 <BODY>
 Welcome to Justin's Web Page!
 Hi, My name is Justin. I built this web page because I love
coding in HTML! I could do it all day long!
 I am a lover of programming languages, and love to design
and produce web content.
 Thanks for visiting my page!
 Yours Truly, 
 -Justin
 </BODY>
 </HTML>
Sample 3
 <html>
 <head>
 <title> favorites / bookmark title goes here
</title>
 </head>
 <body bgcolor=“white" text="blue">
 <h1> My first page </h1>
 This is my first web page and I can say anything I
want in here - I do that by putting text or images in
the body section - where I'm typing right now :)
 </body>
 </html>
html color - bgcolor
 The bgcolor attribute is used to control the
background of an HTML elmement,
specifically page and table backgrounds.
 Bgcolor can be placed within several of the
HTML tags.
 However, we suggest you only use it for your
page's main background (<body>) and in

tables. For additional background styling,
Syntax for HTML Color
 <TAGNAME bgcolor="value">
HTML Code: example

<body bgcolor="Silver">
We set the background...
</body>
Adding color to your tables
 This example shows how to add a
background color for an entire table using
generic values of color.
Table Color
Adding color to table rows & columns
and font color
Background color and font color
together!
 HTML Code:
 <table bgcolor="#000000">
 <tr><td bgcolor="#009900">
 Green Bay</td>
 <td>13</td></tr>
 <tr><td bgcolor="#0000FF">
 New
England</td>
 <td>27</td></tr>
 </table>
Colored Paragraph:
 HTML Code:
 <table bgcolor="#777777">
 <tr><td>
 
 This paragraph tag has...
 
 </td></tr>
 </table>
Insert Image
 <img src=“file name of image or properties" />
 Setting of image size and description

 <img src="Earth.gif" width="41" height="41"
border="0" alt="text describing the image" />

scrolling text
 <marquee bgcolor="#cccccc" loop="-1"
scrollamount="2" width="100%">Insert your
text here </marquee>
Color Names Supported by All
Browsers
147 color names are defined in the HTML and CSS
color specification (16 basic color names plus 130
more). The table below lists them all, along with
their hexadecimal values.
The 16 basic color names are: aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, and yellow.
Html Color Codes
HTML Color Codes
HTML Color Codes
html - layout
 HTML layout is very basic. Not many options
exist with the body tag alone.
 Tables on the other hand are the bread and
butter of HTML layouts.

 Any element may be placed inside of a table
including tables themselves.

Tables inside tables:
 HTML Code:
 <table id="shell" bgcolor="black" border="1"
heigh="200" width="300">
 <tr><td>
 <table id="inner" bgcolor="white" heigh="100"
width="100">
 <tr><td>Tables inside tables!</td></tr>
 </table>
 </td></tr></table>
html - standard layout
 A fairly standard layout consists of a banner
near the top, navigation, and your content or
display box. These are the backbone to any
great website.
Basic Layout:
HTML layout with tables
 Tables have been a popular method for
achieving advanced layouts in HTML.
 Generally, this involves putting the whole web
page inside a big table.

 This table has a different column or row for
each main section.

This HTML code...
<table width="400px" border="0">
<tr>
<td colspan="2" style="background-color:yellow;">
Header
</td>
</tr>
<tr>
<td style="background-color:orange;width:100px;text-align:top;">
Left menu 
Item 1 
Item 2 
Item 3...
</td>
<td style="background-color:#eeeeee;height:200px;width:300px;text-align:top;">
Main body
</td>
</tr>
<tr>
<td colspan="2" style="background-color:yellow;">
Footer
</td>
</tr>
</table>
Produces this layout...
Roller Coaster Font
 You could even make a rollercoaster!
Rainbow Font
 Or a RAINBOW

Web Page

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Page

Uploaded by

Copyright:

Available Formats

CP 22 -

Short History of Web Site

It was very hard to

Created a way to connect

Hypertext Markup Language (HTML)

brackets like <html>

second tag is the end tag

tags and closing tags

the top of the page, after

browser) at the top of the

main navigation so as not to distract from the

they need by typing in a keyword.

We need only a Text editor Like:

example “My html”

into your folder.

page's main background (<body>) and in

HTML Code: example

 Setting of image size and description

border="0" alt="text describing the image" />

butter of HTML layouts.

including tables themselves.

page inside a big table.

each main section.

You might also like