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

23
Good Morning day3

• 1) Login
• 2) Finish Assignment 2 Top 10 songs
• 3) Submit work (Will Show how to)