Basics of HTML presentation

About This Presentation

Transcript and Presenter's Notes

Title: Basics of HTML

1
Webpage Design

Basics of HTML
Dreamweaver creating a web page
Fireworks creating graphics for web pages
Flash creating animated movies for the internet
www.rockwood.k12.mo.us/rsummit/hancock

2
HTML
Hypertext Markup Language
Hypertext is the method by which documents,
files, and multimedia data are organized,
referenced, and navigated via the World Wide Web.
HTML is used to create Web Pages. HTML tags
determine the colors, pictures, and backgrounds
on Web Pages

HTML tags work with a web browser
Internet Explorer
Netscape Navigator

3
Getting Started With HTML

An HTML file can be created in Textpad or other
text applications
File is saved with htm or html as an extension
HTML is not case sensitive you can use upper
or lower case letters for tags
All tags are enclosed in angle brackets e.g.,
ltHEADgt
There are two types of tags
1. Container - has an opening ltgt closing tag
lt/gt
2. Empty - has only an opening tag

4
The Basic Template
Document structure tags that are placed around
entire document
ltHTMLgt ltHEADgt ltTITLEgtPlace page Title Here
lt/TITLEgt lt/HEADgt ltBODYgt lt/BODYgt lt/HTMLgt
Preliminary tags that are placed before main body
of page
Places Title in Web Browser
Tags placed around all text, graphics, etc., that
are not in the Head All Content placed Here
All of these are container tags
5
TITLE TAG

Whatever is placed between the Title Tag will
Display in the blue part of the Web Browser

Code to produce Page
ltHTMLgt ltHEADgt ltTITLEgtUSA
Hockeylt/TITLEgt
ltHEADgt

6
ltBRgt Empty tag that ends a line ltTITLEgt lt/TITLEgt
Container tags that name your page and appear at
the top of the browsers interface placed inside
the ltHEADgt lt/HEADgt tags. ltH1gt lt/H1gt Container
tags that place a heading these range from H1
through H6. (H1 is the largest!) ltCENTERgt
lt/CENTERgt Container tags that center
text. ltMARQUEEgtlt/MARQUEEgt Container tags that
make text scroll across your page. nbsp adds a
space!
7
ltPgt - Empty tag that causes a break
(twice) ltNOBRgt lt/NOBRgt - Container tags that
ensure there will not be a break to the next line
Physical Character Style browser dependent! ltBgt
lt/Bgt - Container tags that bold text ltIgt lt/Igt -
Container tags that italicize text ltUgt lt/Ugt -
Container tags that underline text ltSUPgt lt/SUPgt -
Container tags that superscript text ltSUBgt lt/SUBgt
- Container tags that subscript text
8
Attribute Syntax

Attribute - Enhances HTML tag (colors, size,
font, etc.)
Value - Assigns a value to an attribute (what
color, what size, what font, etc.)
Attributes are placed within the opening tag of a
container tag.
Attributes must be separated from the tag
element by a single space only.
Multiple attributes of a single tag may be
presented in any order.
Multiple attributes must be separated by a
single space.
If an attribute has a value consisting of more
than one word, enclose the attribute value in
quotation marks.

Tag Tag ltHR WIDTH75gt ltFONT FACEBook
Antiquagt HR tag element FONT tag
element WIDTH attribute FACE - attribute 75 -
value Book Antiqua value
9
Attributes for BODY tags TEXT - attribute that
specifies the color of the text in the body
values of TEXT are the RGB colors BGCOLOR -
attribute that specifies the background color of
the page values are the RGB colors BACKGROUND -
attribute that specifies a background image
value is the image path
10
HORIZONTAL RULE TAGS
ltHRgt Empty tag that places a horizontal rule on a
page used to separate page into different
sections.
Attributes of the ltHRgt tag Width - An attribute
that sets the width of a horizontal rule (sample
values 25, 50) Size- An attribute that
sets the height of a horizontal rule in pixels
(sample values 20, 30) Color - An attribute
that changes the lines color NOSHADE makes a
solid line
11
lt!- - Comment tag allows you to place text that
you do not wish to have appear in your Web page.
- - gt ltFONTgt lt/FONTgt Container tags that allow
you to change the text, with the following
attributes

SIZE - size of font values can be 1 - 7 or 1-7,
-1-7
COLOR- Color of text values can be 1 of 16
colors or can be specified by RGB hexadecimal
FACE - Font type values can be any true Type
font name

12
Inline Images

To insert an image into a web page
ltIMG SRCNameOfImage.ImageTypegt
Example ltIMG SRCdog.jpggt
GIF
Graphics Interchange Format
Most common image format found on the Internet
Advantage is compressed file format
Disadvantage is maximum color depth of only 256
(8 bits)
Example is drawing.gif

JPEG
Joint Photographic Experts Group
Advantage is maximum color depth of 16.7 million
(24 bits)
Disadvantage is compression algorithm loses the
quality of an image
Example is picture.jpg

13
GIF vs. JPEG
14

Logical Character Styles
ltEMgt lt/EMgt Container tags to emphasize text
ltSTRONGgt lt/STRONGgt Container tags to make text
stand out

Lists 1. Ordered 2. Unordered 3.
Definition

ltOLgt lt/OLgt Container tags around list
ltLIgt Empty tag for each list item

ltULgt lt/ULgt Container tags around list
ltLIgt Empty tag for each list item

ltDLgt lt/DLgt Container tags around list
ltDTgt Empty tag for the term to be defined
ltDDgt Empty tag for the definition

15
Other attributes for IMG tags ALT - Alternate
text that is displayed if user has turned off
images text also appears when the mouse moves
over the image ALIGN - can be set to right, left,
or center aligns the image HSPACE - attribute
that adds space to both the left and right of the
image value is 1 - 100 pixels VSPACE - attribute
that adds space to the top and bottom of the
image value is 1 - 100 pixels
16
HYPERLINKS within your document The anchor tag
to create the hyperlink to another location ltA
HREFSPOTgt Go to Spot lt/Agt The anchor tag to
identify the exact location to which you want to
link ltA NAMESPOTgt This is the Spot!
lt/Agt (THE Red/Italicized TEXT IS WHAT YOU DECIDE
TO CALL YOUR LINK!)
17
Table Tags ltTABLEgt lt/TABLEgt Container tags for
an HTML table ltTRgt lt/TRgt Container tags that
specify a table row ltTDgt (lt/TDgt) Container tags
(closing tag optional) that specify a table
cell Table Attributes (These attributes can only
be applied to an entire table!) BORDER -
specifies a visible border and its thickness
value range is 1 - 100 pixels BORDERCOLOR -
specifies the color of the border WIDTH
specifies the width of the entire table value
can be specified in pixels or percent CELLPADDING
- specifies the amount of spacing inside table
cells value range is 1 - 100 pixels CELLSPACING
- specifies the amount of spacing between table
cells value range is 1 - 100 pixels
18
Cell/Row Attributes (These attributes can be
applied to a row/cell or the entire table!) ALIGN
- Specifies the horizontal alignment of text
within row or individual cell values are left,
center, or right. When applied to an entire
table, it centers the table BGCOLOR - Specifies
the fill color for rows, cells, or the entire
table
19
Other HYPERLINKS To create a link to another
Web page on your computer ltA HREFAnotherPage.ht
mgt Another Page lt/Agt To create a link to a URL
or Web page anywhere on the WWW ltA
HREFhttp//www.microsoft.comgt Microsoft lt/Agt
20
To Change Colors of HYPERLINKS, use the following
attributes of the ltBODYgt tag LINK specifies
the color of the link as it first sits on
your page. ALINK specifies the color of an
active link on your page VLINK
specifies the color of a visited link on
your page EXAMPLE ltBODY LINK white
ALINKcyan VLINKyellowgt CLICK! lt/BODYgt

21
Good Morning

1) Login
2) Make sure you have a template.html in your
myWork folder on your Z drive
3)Open your template.html file
4)Do a File Save As Days of Week
5) Make a Web page that has the days of the week
Centered.

22
Months

1)Open your template.html file
2)Do a File Save As Months
3) Make a Web page that has the Months of the
year Centered. -Include a Marquee Heading at
top
4) Include the 4 seasons using ltH1gt - ltH4gt
BONUS Change your background and Text color

Basics of HTML PowerPoint PPT Presentation