html lecture

7/31/2019 HTML Lecture

1/8

1 Prepared By: Ms. Jenny Anne B. Cabiling

Subject Code: GEC-IT 2

History of HTML

Timothy Berners Lee originally developed HTML while he was at the CERN(1980). He proposed and

prototype ENQUIRE, a system for CERN RESEARCHERS to use and share documents Mosaic browser

develop at NCSA popularized HTML. 1990, HTML had blossomed with the explosive growth of WWW.

What is HTML?

HTML is a language for describing 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 ofmarkup tags

HTML uses markup tags to describe web pages

Types of Web Pages

There are basically six types of web pages.

News sites - News sites contain stories and articles related to current events, life, money, sports, andweather.

Business and marketing sites - Business and marketing sites contain information that promotes or sellsproducts or services.

Advocacy sites - Advocacy sites promote causes, opinions, and ideas in order to attempt to convince thereader of the validity of this point of view.

Personal sites - Personal sites are posted by private individuals for their own purposes.

Web portal - Web portals provide a variety of Internet services such as search engines, news, reference

tools, personal web pages, newsgroups, calendars, and chat rooms. Educational sites - Educational sites are provided for various educational purposes.

Basic Website Structure As the diagram below shows a website is composed of three main areas:

The structure of a website is like the skeleton or nervous system in the human body. Every joint or

synapse is connected together into a network of mechanical or electrical links, which in turn makes us

who and what we are.

So should a website be connected through a network of links into something that provides form and

function to your site. The website basic layout shown below is a simplified example of such a network.


2/8


HTML Tags

HTML markup tags are usually called HTML tags

Tagnameis the type of text being defined by the tag.

HTML tags are keywords surrounded by angle brackets like

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

Attributesgives extra or added info on how the element should behave. Not all HTML tags have attributes.

HTML BASIC STRUCTURE

-- defines the page as an html document

-- area at the beginning that provides information to the browser, but does not show on the page

-- element within heading that shows the title of the page. This is the title that

shows on the top of the browser and for bookmark purposes, but does not appear on the page

itself.

-- defines the actual body of the page

YOU WILL ALSO NEED A TEXT EDITOR PROGRAM

-capable of creating plain text files e.g. SimpleText for theMacintosh or NotePad for Windows.

Comment Tags enclosed by. The text between the tags is

NOT displayed in the web page but is for information that might be of use to you or anyone else

who

might look at the HTML code behind the web page.

Text IndentBy default the first line of paragraphs in html have an indent.

Code:

This paragraph does not

have an indent.

Output:

This paragraph does not have an indent.

Header Elements

Body Elements


3/8


The BODY Element Tags and Attributes

The tag is used to start the BODY element and the tag ends it. It is used to

divide a web page within one or more sections. Its tags and attributes are:

BACKGROUND="clouds.gif" - (Depreciated) Defines the name of a file to use for the

background for the page. The background can be specified as in the following line.

BGCOLOR="white" - Designates the page background color.

TEXT="black" - Designates the color of the page's text.

LINK="blue" - Designates the color of links that have not been visited.

ALINK="red" - Designates the color of the link currently being visited.

VliNK="green" - Designates the color of visited links.

HTML HeadingsText to appear in Heading

*Nis a number from 1 to 6 identifying the Heading Size

Level 1- most important: Level 6least important

Paragraph Tags-

Attrib:

Align = right:left:center

Style

Blockquote Tagsto indent a section of text from both side

Preformatted Tags- instruct your web browser to display the text exactly as typed in the text

editor.

Other Type of Breaks

Horizontal RuleThis places a line across your document

-

attrib = no shade

width

size

align

Line break

a tag which forces text to a new line


4/8


Formatting Text

The tags listed in the table below can be used to change the format of text, e.g. bold text, italic text etc.

Tag Function Output

bold text This is bold.

big text I am big

deleted text deleted text

emphasized text This is emphasized text

italic text This is italic

inserted text inserted text

small text I am small

strong text I am strong!

subscript Textsubscript

superscript Textsuperscript

underlined text This is underlined text

Remember to include the closing tags at the end of the formatted text.

Font Element:

The element can be used to style text, for example setting font color, size etc.

Wrap the text to be styled between the opening and closing font tags. Then use the attributes in the table below

to style the text.

AttributeFunction Sample Code Output

set the color red text red text

font type genevageneva

text size size 3 size 3

Note: The font element is deprecated in html 4.01, it is reccomended to use style sheets instead to perform the

above functions. It is included here for completeness.

Entities

What are Entities?

Some characters in html have special meanings and cannot be included as part of a documents text. Common

examples include '' which are used to open and close html tags.

Instead html provides entities that are used in place of these characters. Entities are also provided for characters

that are not common to keyboards such as and .


5/8


Entities are made up of the following format:

1. &

2. entity name

3. semicolon ;

Example:

Code:

The price is 50.

A registered trademark.

Output:

The price is 50.

A registered trademark.

Common Entities

Below is a table of some of the most frequently used html entities.

Entity Meaning Code

< Less than Greater than >

Copyright

Registered Trademark

euro

" double quotation mark "

& ampersand &

multiplication

plus minus

divide


6/8


Non-Breaking Space adding a space character

Here are some examples of how you might use the non-breaking space:

HTML Result

Two non-breaking spaces are used to spread the letters in a word farther apart

C H E E S E

C H E E S E

HTML Lists

An Overview

There are three main types of lists included in html which are shown in the table below:

1. Unordered List 2. Ordered List Definition List

United States

Australia

China

United Kingdom Japan

1. Spiderman 3

2. Pirates of the Carribean

3. Die Hard 4

4. The Simpsons Movie5. Fantastic Four

html

hypertext markup language

css

cascadsing style sheets

URL

uniform resource locator

Unordered Lists

Unordered lists are your bullet style lists. Declare an unordered list using the tag.

...Place list items here...

To insert a list item then use the tags within the element.

Code:

This is a list item.

Output

This is a list item


7/8


You can make the list as long as you like by simply adding in more list items using .

If you do not like the disc () style points then you can change these using the 'type' attribute. Place the 'type'

attribute in the opening tag. See the table below for styles:

Style Value

Circle

Square

disc

Ordered Lists

Ordered lists instead of being composed of bullets are composed of numbers or letters. Declare an unordered list

using the tag.

...Place list items here...

To insert a list item then use the tags within the element.

Code:

This is a list item.

Output

1. This is a list item

You can make the list as long as you like by simply adding in more list items using .

If you do not like your list to be ordered with numbers then you can change it to be ordered with letters orroman numerals. To do this use the 'type' attribute in the opening tag, see the table below.

Two attributes for

1. Type2. Start

Style Value

1., 2., 3.,...(Numbers)

a., b., c., ... (letters)

A., B., C., ... (capital letters)


8/8


Definition Lists

A definition list simply consists of a term followed by its definition. Where the definition is normally indented.

A definition list can be created using the element.

Code:

...Enter list items here...

Each list item includes two parts, a term and a definition. The tag is used to insert the term, where as the

tag is used to create the definition.

Code:

Jupiter

The biggest planet in the solar system

Output:

Jupiter

The biggest planet in the solar system

Add as many terms as you like to a definition list using the and tags.

*note= lists of list is also known as NESTED LIST or the combination of lists

html lecture

Documents