Scribd
Upload
19 views34 pages

2 Intro To HTML (Short Version)

Uploaded by

Mehrab
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
19 views34 pages

2 Intro To HTML (Short Version)

Uploaded by

Mehrab
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 34

Introduction to

HTML

1
Agenda
Introduction
I.Page creation and Editing (p.8)
II.Headings, Paragraphs, & Breaks (p.27)
III.Character formatting (p.35)
IV.Lists (p.42)
V.Anchors, URLs and Images (p.54)
VI.Tables(Not Required in Digital Marketing
Course) p.63
VII.Frames(Not Required in Digital Marketing
Course) p.79

2
Definitions
WWW – World Wide Web.
HTML – HyperText Markup Language – the
Language of Web Pages on the World Wide Web.
HTML is a text formatting language.
URL – Uniform Resource Locator.
Browser – A software program which is used to
show web pages.
Pages end with “.htm” or “.html”
HTML Editor – A word processor that has been
specialized to make the writing of HTML documents
more effortless. 3
Tags

Codes enclosed in brackets Usually


paired

<TITLE>My Web Page</TITLE>

Not case sensitive

<TITLE> = <title> = <TITLE>

4
1. Page
Creation &
Editing
5
HTML Page Creation & Editing

In this Section you will learn to create HTML


pages with a standard text editor.

Objectives
Upon completing this section, you should
be able to

1. Create a Basic Starting Document


2. Understand and set Document
Properties
6
Creating a Basic Starting
Document
<HTML>
<HEAD>
<TITLE>Tokyo International
University</TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML> 7
Format

8
Creating a Basic Starting
Document

 The HEAD of your document point to above


window part. The TITLE of your document
appears in the very top line of the user’s
browser. If the user chooses to
“Bookmark” your page or save as a
“Favorite”; it is the TITLE that is
added to the list.
 The text in your TITLE should be as
descriptive as possible because this is what
many search engines, on the internet, use
for indexing your site.
9
Setting Document
Properties
 Document properties are controlled
by attributes of the BODY element.
For example, there are color settings
for the background color of the page,
the document’s text and different
states of links.

10
16 Basic Colors

11
LINK, VLINK, and ALINK

These attributes control the colors of the different


link states:
1. LINK – initial appearance – default = Blue.
2. VLINK – visited link – default = Purple.
3. ALINK –active link being clicked–default=
Yellow.
The Format for setting these attributes is:
<BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000”
LINK=“#0000FF”
VLINK=“#FF00FF”
12
ALINK=“FFFF00”> </BODY>
Using Image Background
 The BODY element also gives you ability of setting
an image as the document’s background.
 An example of a background image’s HTML code is
as follows:

<BODY BACKGROUND=“hi.gif”
BGCOLOR=“#FFFFFF”></BODY

13
II. Headings,
Paragraphs, & Breaks

14
Headings, Paragraphs, Breaks
& Horizontal Rules

In this Section you will add headings to your


page, insert paragraphs, add some
breaks, and add horizontal rules.
Objectives
Upon completing this section, you should be
able to
 List and describe the different Heading
elements
 Use Paragraphs to add text to a
document
 Insert breaks where necessary
 Add a Horizontal Rule
15
Headings, <Hx> </Hx>
 Inside the BODY element, heading elements
H1 through H6 are generally used for major
divisions of the document.
 Headings are permitted to appear in any
order, but you will obtain the best results
when your documents are displayed in a
browser if you follow these guidelines:

1. H1: should be used as the highest level of


heading,
2. H2 as the next highest, and so forth.
3. You should not skip heading levels: e.g., an
H3 should not appear after an H1, unless
there is an H2 between them.

16
Headings, <Hx> </Hx>
<HTML>
<HEAD>
<TITLE> Example
Page</TITLE>
</HEAD> Heading 1
<BODY>
<H1> Heading 1 </H1> Heading 2
<H2> Heading 2 </H2> Heading 3
<H3> Heading 3 </H3>
Heading 4
<H4> Heading 4 </H4>
Heading 5
<H5> Heading 5 </H5>
Heading 6
<H6> Heading 6 </H6>
</BODY>
</HTML>

17
Paragraphs, <P> </P>

 Paragraphs allow you to add text to a


document in such a way that it will
automatically adjust the end of line to suite
the window size of the browser in which it is
being displayed. Each line of text will stretch
the entire length of the window.

18
Paragraphs, <P> </P>
<HTML><HEAD>
<TITLE> Example Page</TITLE>
Heading 1
</HEAD> Paragraph 1,….
<BODY><H1> Heading 1 </H1>
<P> Paragraph 1, ….</P>
Heading 2
Paragraph 2,….
<H2> Heading 2 </H2>
<P> Paragraph 2, ….</P> Heading 3
<H3> Heading 3 </H3> Paragraph 3,….
<P> Paragraph 3, ….</P>
Heading 4
<H4> Heading 4 </H4>
Paragraph 4,….
<P> Paragraph 4, ….</P>
<H5> Heading 5 </H5> Heading 5
<P> Paragraph 5, ….</P> Paragraph 5,….
<H6> Heading 6</H6> Heading 6
<P> Paragraph 6, ….</P> Paragraph 6,….
</BODY></HTML>

19
Break, <BR>
 Line breaks allow you to decide where the
text will break on a line or continue to the
end of the window.
 A <BR> is an empty Element, meaning that
it may contain attributes, but it does not
contain content.
 The <BR> element does not have a closing
tag.

20
Break, <BR>
<HTML>
<HEAD>
<TITLE> Example
Page</TITLE>
</HEAD>
Heading
<BODY>
<H1> Heading 1 </H1>
1
<P>Paragraph 1, <BR>
Paragraph 1,….
Line 2 <BR> Line 3 Line 2
<BR>….
Line 3
</P>
</BODY>
….
</HTML>
21
IV. Lists

22
Lists

In this section you will learn how to create a variety


of lists.

Objectives

Upon completing this section, you should be able to


 Create an unordered list
 Create an ordered list

23
List Elements
 HTML supplies several list elements.
Most list elements are composed of
one or more
 <LI> (List Item) elements.
 UL : Unordered List. Items in this list
start with a list mark such as a bullet.
Browsers will usually change the list
mark in nested lists.
<UL>
List item …
<LI> List item …</LI>
List item …
<LI> List item …</LI>
</UL>
24
List Elements
 You have the choice of three bullet types:
disc(default), circle, square.
 These are controlled in Netscape Navigator by
the “TYPE” attribute for the <UL> element.
<UL TYPE=“square”>
<LI> List item …</LI>  List item …
<LI> List item …</LI>  List item …
 List item …
<LI> List item …</LI>
</UL>

25
List Elements
OL: Ordered List. Items in this list are numbered
automatically by the browser.
<OL>
<LI> List item …</LI>
1. List item …
<LI> List item …</LI> 2. List item …
<LI> List item …</LI> 3. List item …
</OL>

You have the choice of setting the TYPE


Attribute to one of five numbering styles.

26
List Elements

TYPE Numbering Styles


1 Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……

27
List Elements
 You can specify a starting number for an
ordered list.

<OL TYPE =“i”>


<LI> List item …</LI>
<LI> List item …</LI>
</OL>
<P> text ….</P>
<OL TYPE=“i” START=“3”>
<LI> List item …</LI>
</OL>
28
V. Anchors, URLs and
Images

29
Images
In this section you will learn about images and how to place
images in your pages and about Uniform Resource Locator,
and how to add them as Anchor or Links inside your web
pages.
Objectives
Upon completing this section, you should be able to
 Add images to your pages
 Insert links into documents
 Define Link Types
 Define URL
 List some commonly used URLs
 Plan an Image Map

30
Images

 <IMG>This element defines a graphic


image on the page.
 Image File (SRC:source): This value will
be a URL (location of the image) E.g.
http://www.domain.com/dir/file.ext or
/dir/file.txt.
 Alternate Text (ALT): This is a text field
that describes an image or acts as a label.
It is displayed when they position the cursor
over a graphic image.
 Alignment (ALIGN): This allows you to
align the image on your page.

31
Images Attributes
 Width (WIDTH): is the width of the image in
pixels.
 Height (HEIGHT): is the height of the image in
pixels.
 Border (BORDER): is for a border around the
image, specified in pixels.
 HSPACE: is for Horizontal Space on both sides of
the image specified in pixels. A setting of 5 will
put 5 pixels of invisible space on both sides of
the image.
 VSPACE: is for Vertical Space on top and bottom
of the image specified in pixels. A setting of 5
will put 5 pixels of invisible space above and
bellow the image. 32
Some Examples on
images
1) <IMG SRC=“jordan.gif“ border=4>
2) <IMG SRC=" jordan.gif" width="60"
height="60">
3) <IMG SRC=“jordan.gif" ALT="This is a
text that goes with the image">
4) <IMG SRC=" jordan.gif “ Hspace="30"
Vspace="10" border=20>
5) < IMG SRC =" jordan.gif“ align="left">
blast blast blast blast blast

33
HOW TO MAKE A LINK

1) The tags used to produce links are the <A> and </A>.
2) The <A> tells where the link should start
3) The </A> indicates where the link ends.
4) Everything between these two will work as a link.
The example below shows how to make the
word
Here work as a link to yahoo.

Click <A
HREF="http://www.yahoo.com">here</A>
to go to yahoo.

34
Click here to go to yahoo.

You might also like