Scribd
Upload
183 views

Training HTML

The document provides an introduction to HTML (Hypertext Markup Language) by describing what HTML is and its basic components and tags. It covers topics like what the internet and web are, what a browser is, how to get started writing HTML files, how to format text and pages, add links, tables, images, and includes an HTML color table. The document is presented over multiple slides in a learning format with definitions, explanations and examples of key HTML tags and their usage.

Uploaded by

api-3718662
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
183 views

Training HTML

The document provides an introduction to HTML (Hypertext Markup Language) by describing what HTML is and its basic components and tags. It covers topics like what the internet and web are, what a browser is, how to get started writing HTML files, how to format text and pages, add links, tables, images, and includes an HTML color table. The document is presented over multiple slides in a learning format with definitions, explanations and examples of key HTML tags and their usage.

Uploaded by

api-3718662
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 20

Prodapt Confidential

Slide 1
Unauthorized reproduction prohibited
Learning HTML
Introduction
Getting Started
Text format
Page format
Adding Links
Tables
Images
Index
HTML Color Table

Prodapt Confidential
Slide 2
Unauthorized reproduction prohibited
Introduction
What is the Internet?
Internet is a connection of all worldwide networks using the same network
communication.

What is the Web?


The Web is a term that is used to refer to the many files that are written in
HTML. HTML allows users to view text, graphic, video, sound, etc. The World
Wide Web (www) enables you to access documents linked across the Internet.

What is HTML?
HTML (Hypertext Markup Language) is a set of special codes embedded in text
which add formatting and linking information. HTML consists of “tags”
inserted by the user which enable the production of the WEB page on the
Internet. For example, in the statement <B>Sample</b>, the <B> indicates the
start of bold and the </b> indicates the ending of the bold.

What is a browser?
A browser is software that allows you to view or browse an HTML document,
i.e., Internet Explorer, Netscape.

Do I need a special software package to write my HTML file?


No, you can use any text editor or word processor to write your HTML code.
One of the most popular ones is Microsoft Notepad, which can be found under
START, PROGRAMS, ACCESSORIES using Windows 95.

Prodapt Confidential
Slide 3
Unauthorized reproduction prohibited
Getting Started with HTML
Before we start writing our own Web page, you should be familiar with the basic
HTML tags listed below.
All documents must begin with the <HTML> tag and end with the </html> tag.
This tells the browser that the document is written in standard HTML.
HTML tags consist of a left angle bracket (<), the name of the tag, and a right angle
bracket (>).
Tags are usually paired; opening the format and closing the format.
The closing tag looks like the opening tag except for a slash (/) that precedes the
text within the brackets.
HTML files are broken into two sections, the head and the body.
The HEAD tags indicate the page’s header section.
This HEAD section contains information about the document itself, including the
title.
The BODY tags are used to define the area of your page where text, images and
formatting tags are placed.

HTML Tag Close Tag Meaning


<HTML> </html> Defines a Web-formatted document
<HEAD> </head> Defines heading section of document
<TITLE> </title> Title of page
<BODY> </body> Defines the body of the HTML page
<BR> none Line break/one carriage return
<HR> none Horizontal line
<CENTER> </center> Places text within the center of a line
<P> </P>(Optional) Paragraph breaks; two carriage returns
Prodapt Confidential
Slide 4
Unauthorized reproduction prohibited
Getting started, cont.
1. In the Notepad text, the HTML tags surround the entire text.
2. This tells the web browser that the format is HTML.
3. Without it the browser could not interpret it.
4. Also, in order to do line breaks, you must put the tags in manually.
5. The <P> (paragraph) tag inserts an extra blank line or two carriage returns.
6. The <BR> (line break) tag inserts one line break or one carriage return.
7. HTML performs automatic word wrap in documents, and ignores carriage returns.
8. Therefore, you must include the paragraph or line break tags manually.
9. If you do not include any paragraph tags, it will appear as one, long paragraph.

Below is what our beginning Web page will look like in Notepad and Netscape.

Notepad Netscape

Prodapt Confidential
Slide 5
Unauthorized reproduction prohibited
Text Format
Below is a list of formatting tags to help dress up your Web page:

The <Hn> tag is to format headings. The n goes from 1-6; 1 being the biggest and 6
being the smallest.
Also listed are the tags for bolding, italics, underlining and teletype text.
HTML uses three different types of tags to create lists; <DL></dl>, <OL></ol>and
<UL></ul>. Below is a description. <LI> is used for each item in an ordered <OL> or
unordered <UL> list. <DT> is used when using the definition list, <DL>.

HTML Tag Close tag Meaning

<Hn> </hn> Document header level (n=1-6)


<B> </b> Bold
<I> </i> Italics
<U> </u> Underline
<TT> </tt> Teletype text
Lists
<OL> </ol> Ordered (numbered) list
<UL> </ul> Unordered (bulleted)list
<LI> none List item
<DL> </dl> Creates a glossary list
<DT> none Defined term in a glossary list
<DD> none Definition in a glossary list

Prodapt Confidential
Slide 6
Unauthorized reproduction prohibited
Text Format, Cont.

Below is an example in Notepad and Netscape of using headings, fonts, and lists.

Prodapt Confidential
Slide 7
Unauthorized reproduction prohibited
Page Format
1. Below is a partial list of different tags for formatting a page.
2. You can change the color of the background, text and links.
3. You can also change fonts (rrggbb indicates the amount of red, green and blue in a certain
color ranging from the number 0 to the letter F. For example, 000000=black, while
FF0000=red.)

Tag Meaning

<BASEFONT SIZE=n> Changes the default font size throughout the page to
the specified size (range 1-7).
<BODY>
bgcolor=#rrggbb Specifies background color for the page.
background=file Uses the specified file as the background image on
page
text=#rrggbb Sets text in specific color.
<FONT></font>
face=“font name” Defines the font of the text.
size=n Specifies size of font (range 1-7).
color=color Changes the font color.
<HR> Horizontal line
noshade Makes line solid black
size=n Sets the height of horizontal line.
width=n% Sets the width of line; n=0-100
color=rrggbb Specifies the color of the line.
Prodapt Confidential
Slide 8
Unauthorized reproduction prohibited
Page Format, cont.
Below are examples using different colors and fonts.

In Notepad

In Netscape

Prodapt Confidential
Slide 9
Unauthorized reproduction prohibited
Adding Links
As a hypertext system, HTML allows you to link portions of a document to other
locations that can be in either the same document or other documents.
When a Web browser sees a link, it signals the available links to the user by
underlining or coloring the link region.
The link markup tag in HTML is <A> (denoting “anchor”).
This is followed by the URL of the destination document. You can also include a
link to your e-mail. This is done by using the URL tag, mailto and then your e-mail
address.

To add a link follow these steps:

Begin your anchor with “<A”. Don’t forget the space after the A.
Enter the URL of the destination document by typing HREF=“URL” (HREF stands for hyper
reference.
Enter “>”.
Enter the text that serves as the name or pointer to the destination document.
Enter the closing container tag, </a>.

HTML Tag Close tag Meaning


<A> </a> Defines an anchor for the link.
HREF=“url address” Gives the destination of the link using
its URL
mailto:”e-mail address” Identifies address where e-mail will be
sent
<BODY LINK=#rrggbb> Sets the color of the link.
<BODY ALINK=#rrggbb> Sets the color of the active link.
<BODY VLINK=#rrggbb> Sets the color of the visited link.

Prodapt Confidential
Slide 10
Unauthorized reproduction prohibited
Adding links, cont.
Below is what your Notepad document would look like if you were to add
Suffolk’s Web page and your e-mail address to your Web page.

This is what it will look like in Netscape.

Prodapt Confidential
Slide 11
Unauthorized reproduction prohibited
Tables
Within HTML language, you are able to construct tables.

Below are the tags used to create tables.

HTML Tag Close Tag Meaning

<TABLE> </table> Defines the start and end of a table

border Displays the lines within a table.

align=left,
center
or right Defines the position of the table on the page.

width=n Width of entire table on the page; n=0-100%.

<TR> </tr> Defines the start and end of a row.

<TD> </td> Defines the start and end of a data table


entry.

Align=left, center, right Aligns entries in a row.

Prodapt Confidential
Slide 12
Unauthorized reproduction prohibited
Below are examples in Notepad and Netscape

Prodapt Confidential
Slide 13
Unauthorized reproduction prohibited
Adding Images
Including images in your Web document is very easy with the <IMG> (image) format tag.
The two formats supported by HTML are GIF, CompuServe’s Graphics Interchange Format
and JPEG, the industry-standard Joint Photographic Expert Group format.
The HTML tag that you use to place a graphic image is the Image tag <IMG>.
It is used along with the source attribute (SRC), which is a reference to the location of the
image file.

To place an image on a Web page follow these steps:

Type <IMG SRC=“filename.gif or .jpeg”


Type a closing angle bracket (>)

You can also modify the image on your web page. Below are tags and descriptions for
adding images and modifying images to you Web page.

HTML Tag Meaning


<IMG> Includes an inline image
src=graphic filename Filename of the image
align= left, right, top, middle or bottom Determines the alignment of a graphic
image,
and how the text around it will align.
alt=“text” Text description of the image
border=n Size of picture border
height=n Fixed height of image
width=n Fixed width of image

Prodapt Confidential
Slide 14
Unauthorized reproduction prohibited
Images, Cont.

Here are examples of using images in Notepad and Netscape.

Prodapt Confidential
Slide 15
Unauthorized reproduction prohibited
HTML Quick Reference
Tag Definition
Structure Tags
<HTML></html> Marks beginning and end of html document
<HEAD></head> Marks beginning and end of the header
<TITLE></title> Identifies the title of document
<BODY></body> Marks the beginning and end of the body
background=“…” Specifies image for background
bgcolor=color Specifies color for background
text=color Specifies color for text
link=color Specifies color for unvisited links
alink=color The color briefly seen when linked is clicked
vlink=color The color of visited links
Paragraphs and Text Dividers
<BR> Inserts a line break
<P> Paragraph break
align=center, left or right Aligns paragraph
<HR> Adds a horizontal line
align=left, right, center Aligns the line
size=n Specifies thickness of line
noshade Makes the line black
width=n% Specifies width of line; n=0-100
color=color Specifies color of line
<ADDRESS></address> Used to define contact info. on the author
<BLOCKQUOTE></blockquote> Creates a quotation block
Character Formatting
<B></b> Bold
<BIG></big> Large print font
<BLINK></blink> Makes blinking text
<CENTER></center> Centers text
<TT></tt> Teletype text
<U></u> Text is underlined

Prodapt Confidential
Slide 16
Unauthorized reproduction prohibited
Tags Definition
<I></i> Text is in italics
<FONT></font>
size=n Changes the font size; range is 1-7.
color=color Changes the font color
face=font name Changes the font style
<MARQUEE></marquee>(Internet Explorer) Inserts a marquee of moving text
align=left, right, center, bottom, top, middle Alignment of text surrounding marquee
behavior=scroll, slide alternate How the text moves
bgcolor=color Background color of the marquee
direction=left, right Direction of text scrolls
height=n Height of the marquee
width=n Width of the marquee
loop=n Scrolls the marquee n times
<S></s> Puts text in a strikethrough font
<SMALL></small> Text is a small-print font
<SUB></sub> Text is in subscript
<SUP></sup> Text is in superscript
Headings
<Hn></hn> Heading for a document; n=1-6
align=left, center, right, justify Sets alignment of heading
Tables
<TABLE></table> Defines a table
border=n Shows line of table in specifies thickness
align=left, right, center, justify Aligns table
width=n Fixed width of entire table; n=any number
bgcolor=color Background color of table
bordercolor=color Color of the table boarder
cellspacing=n Sets spacing between cells
<TR></tr> Starts a new row in a table
<TD></td> Data table entry
align=left, right, center Aligns entries in a row
Prodapt Confidential
Slide 17
Unauthorized reproduction prohibited
Tags Definition
Lists
<OL></ol> Creates an numbered list
type=A, a, I, i, or 1 Specifies type of numbering
start=n Starting number of list
<UL></ul> Creates a bulleted list
type=circle, disc or square Specifies type of bullet
<LI> Identifies a list item
<DL></dl> Creates glossary list
<DT> Defined term in a glossary list
<DD> Definition in a glossary list
Hyperlinks
<A></a> Defines an anchor for a link
HREF=“url” URL of the document where the link points
mailto:”…” Used to create link to an e-mail address
name=name Defines an anchor location in a document
Images
<IMG> Inserts a graphic image into an HTML document
src=graphic filename Filename of the image
alt=“text” Text description of image
align=left, right, top, middle or bottom Aligns the image and how the text around it will
align
border=n Size of picture border
height=n Height of image
width=n Width of image
hspace=n Space between an image and text to its left or
right
vspace=n Space between an image and the text above or
below it.

Prodapt Confidential
Slide 18
Unauthorized reproduction prohibited
HTML Color Table
Color rrggbb Color rrggbb
White FFFFFF Light Green 32CD32
Red FF0000 Maroon 8E236B
Green 00FF00 Medium Blue 3232CD
Blue 0000FF Navy Blue 23238E
Yellow FFFF00 Neon Blue 4D4DFF
Black 000000 Neon Pink FF6EC7
Blue Violet 9F5F9F Orchid DB70DB
Orange FF7F00 Pale Green 8FBC8F
Brown A62AA2 Pink BC8F8F
Dark Green 2F4F2F Plum EAADEA
Dark Brown 5C4033 Scarlet 8C1717
Dark Purple 871F78 Sea Green 238E68
Dark Slate Blue 6B238E Sky Blue 3299CC
Dusty Rose 856363 Slate Blue 007FFF
Forest Green 238E23 Summer Sky 38BODE
Gold CD7F32 Tan DB9370
Gray C0C0C0 Turquoise ADEAEA
Hunter Green 215E21 Violet 4F2F4F
Green Yellow 93DB70 Yellow Green 99CC32
Light Blue COD9D9

Prodapt Confidential
Slide 19
Unauthorized reproduction prohibited
THANK YOU

Prodapt Confidential
Slide 20
Unauthorized reproduction prohibited

You might also like