Beginning html

California State University Dominguez Hills

Beginning Hypertext Markup
Language
(HTML)

Beginning HTML
 HTML - HyperText Markup Language

 Text Editor: NotePad, SimpleText

 Common HTML Editors: Netscape

Composer, MS Word, MS FrontPage
This workshop will enable you to understand
enough to make better use of such tools.

Beginning HTML
 A system of coding which special online
browsers receive and translate.

 HTML file is a text file.

 HTML is full of < > tags.

 Start Tag: < >

 End Tag: </ >

HTML Tag

 <HTML> - To begin the HTML file

 </HTML> - End of HTML file

Major Sections

 Head Section
<head> </head>

 Body Section
<body> </body>

Title Tag

 <Title> </Title>

 An element of Head
section

 Determines title bar
display on browser

Body Tag
 <Body> </Body>

 Body Attributes

Background Background image file address =”URL”
BGcolor Background color =”color reference”
Text Default text color =”color reference”
Link Hyperlink color =”color reference”
VLink Visited link color =”color reference”

Note: Color Reference is RGB Color. Please refer to handout on page 7.

Exercise 1
• Open a new file under NotePad.
• Create a basic HTML file with tags:
<Html>
<Head>
<Body>
<Title>

• Save the file and view it on the browser.

Exercise 1 – HTML Source
<HTML>
<HEAD>
<Title>My Web Page</title>
</HEAD>
Black White

<BODY bgcolor=”#000000” text=”#ffffff”
link=”red” vlink=”blue”>

This is a basic HTML file.
RGB Color #
</BODY>
</HTML>

Exercise 1 – On Browser

text=”#ffffff” bgcolor=”#000000”

Text Styling
 Boldfaces

 Italicizes

 Underline text

 Subscript
text
 Superscript
text
<big> </big> Text is made larger than current size
 Text is made smaller than current size

 Logical form for strong emphasis

Character Entities
• Strong: I am strong
• Emphasis: I am emphasized
• <ABBR> Abbreviation: I am abbreviated
• <CITE> Citation: Citation
• <CODE> Code: I am programming code

• <DFN> Definition: Definition
• <KBD> Keyboard: Quite like keyboard
strokes
• <SAMP> Sample: Sample
• <VAR> Programming Variable:
Programming Variable

Heading Fonts

<H1></H1> - Largest heading font
<H2></H2> - Bigger than H3
<H6></H6> - Smallest heading font

Exercise 2
• Open the same file created in Exercise 1 on
NotePad.
• Change the current text to heading font.
• Add text paragraph using different text
styling tags.
• Save the text file.

• Refresh browser to see the updated page.

<HTML>
<HEAD>
</HEAD>

<BODY bgcolor="#000000" text="#ffffff" link="red" vlink="blue">

<h1>This is a basic HTML file. </h1>

You can use the text style to emphasize a word or a phrase in a
paragraph, such as bold, italic, underline,
superscript, subscript.

</BODY>
</HTML>

Exercise 2 – Browser View
<h1>This is a basic HTML file. </h1>

You can use the text style to emphasize a word or a phrase in a paragraph,
such as bold, italic, underline,
superscript, subscript.

Image Tag
 <img> - Insert an image on the page
 No End Tag
 IMG Attributes:
Src Location of image file
Alt Substitute text for display
Align Text alignment: bottom, middle, top
Height Number of pixels of the height
Width Number of pixels of the width
Border Size of border, 0 for no border
e.g. <img src=”image.jpg” alt=”example image”
align = ”middle” border=”0”>

Horizontal Line
 <HR> - Start a new line and draw a horizontal line.
 No End Tag
 HR Attributes:
Width The length of the horizonal line from left
to right. (in pixel or % of screen size)
Align Alignment: left, center, right
Size Height size of the horizontal line.
NoShade Delete the shading below a regular
horizontal line.

e.g. <hr width=”500” align=”center” size=”2” noshade>

Exercise 3

• Open the same file from Exercise 2 on NotePad.

• Add an image on the page.

• Add a horizontal line.

• Save the file.

• Click the refresh button on browser to see the
updated page.

<HTML>
<HEAD><Title>My Web Page</title></HEAD>
<BODY bgcolor="#000000" text="#ffffff" link="red“ link="blue">
<h1>This is a basic HTML file.</h1>

<hr width="80%" align="center" size="3">
You can use the text style to emphasize a word or a phrase in a
paragraph, such as bold, italic,
underline, superscript,
subscript.
<img src="http://www.csudh.edu/Graphics/Dhbanner.gif"
Alt="CSUDH Banner" height="65" width="330" border="0">
</BODY>
</HTML>

Link Tag
<A Href> </a> - Insert a link on the page.
e.g. <a href=“ http://www.csudh.edu ”>CSUDH Home Page </a>
If the place where you desire to link to is on the same
server, all you need to put in is
<a href=“ /visitors/visitors.html”>CSUDH Visitors Page </a>

If the place where you desire to link to is within the same
folder, you can put in

<a href=” index.html ”> CSUDH Index Page </a>

Font Tag
 
 Font Attributes:

Size From 1 to 7, 7 is the largest
Color Color reference
Face Font type
e.g. Arial, Courier, Helvetics, etc.

e.g. Font
color is red

+/- Font Size
 BaseFont Size = 3 (default size)
 Specify a font size with a signed integer value
 Format: 
 
+n for bigger font size
-n for smaller font size
where n is a positive integer
 Font size +n/-n = BaseFont Size +n/-n

e.g.

Paragraph Tag
 
 Start a new paragraph with a blank line in
between the previous line.
 Paragraph attribute:
Align Alignment:
left, center, right, justify

e.g.

Line Break

 

 Start a new line without inserting a blank
line between the previous line.

 No End Tag, but in XHTML it has an
ending tags

Center Tag

 <Center> </Center>

 Start a new line and center the text within
the center tag.

 e.g. <center>Page Heading</center>

List Tags
 Unordered List
 Apple • Apple
 Orange (OR) • Orange
 Grapefruit • Grapefruit

 Ordered List
1. Apple i. Apple
2. Orange (OR) ii. Orange
3. Grapefruit iii. Grapefruit

 List Item

Unordered List
 <UL> </UL>
 Start an unordered (bulleted) list. The
items are tagged using the <Li> tag.
 Attribute: Type – disk, circle, square

• Apple o Apple  Apple

• Orange o Orange  Orange

• Grapefruit o Grapefruit  Grapefruit

Ordered List
 <OL> </OL>
 A numbered list structure is identical to an
unnumbered list structure, except it uses <OL>
instead of <UL>.
 Attribute: Type – 1, A, a, I, i

1. Apple a. Apple i. Apple
2. Orange b. Orange ii. Orange
3. Grapefruit c. Grapefruit iii. Grapefruit
I. Apple
A. Apple II. Orange
B. Orange III. Grapefruit
C. Grapefruit

List Item Tag
 <Li>
 No End Tag
 List item under <UL> or <OL> tag.

<UL type=”square”>  Item One
<Li>Item One  Item Two
<Li>Item Two
</UL>

Indent Tag
• <Blockquote> </Blockquote>
• Start a new line before and after the indented
paragraph.

e.g. This is a blockquote
example.
<Blockquote>
Increased indent line
</blockquote>
Decreased indent line This is a blockquote example.
Increased indent line
Decreased indent line

Comment Tag
• 
• Any Text within the comment tag
will be ignored by the browser as
remarks.

e.g.

Exercise 4
• Open the same file from exercise 3 on NotePad.
• Add a paragraph tag. 
• Add a font tag. 
• Add a link tag. <a href> </a>
• Add a line break tag. 
• Add a center tag. <center> </center>
• Add an ordered list. <ol> <li> </ol>

<HTML>
<HEAD><Title>My Web Page</title></HEAD>
<BODY bgcolor="#000000" text="#ffffff" link="red" vlink="blue">
<h1>This is a basic HTML file.</h1>
You can use the text style to emphasize a word or a phrase in a paragraph,
such as bold, italic, underline,
superscript, subscript. 
<a href="http://www.csudh.edu"><img
src="http://www.csudh.edu/Graphics/Dhbanner.gif" Alt="CSUDH
Banner" height="65" width="330" border="0"> </a> 
<a href="http://www.csudh.edu/index.html">CSUDH Index Page</
a>
<center>Here is the list</center>
<ol type="i"> <li>Orange <li>Yellow <li>Blue </ol>
</BODY>
</HTML>

face="courier">

<ol type="i">
<li>Orange
<li>Yellow
<li>Blue </ol> <center>Here
is the
list</center>

<a href="http://www.csudh.edu/index.html">CSUDH
Index Page</a>

Common Special Characters
Symbol Entity Example
Copyright Sign © Copyright ©
Registered Trademark ® MagiCo ®
Trademark ™ Webfarer™
Less Than &Lt; <
Greater Than > >
Ampersand & &
Nonbreaking Space  
Em Dash — —
Quotation Mark " “

RGB Color
White #FFFFFF
Red #FF0000
Green #00FF00
Blue #0000FF
Cyan #00FFFF
Yellow #FFFF00
Black #000000
Dim Grev #545454
Forest Green #238E23
Grey #C0C0C0
Midnight Blue #2F2F4F
Orange #FF7F00
Spring Green #00FF7F
Turquoise #ADEAEA

RGB Color Related Sites

http://www.hitbox.com/cgi-bin/page.cgi?reference/websafe

http://www.webreference.com/html/tools/colorizer/

http://www.webreference.com/dev/graphics/palette.html

http://www.hypersolutions.org/pages/rgbhex.html
http://www.htmlhelp.com/cgi-bin/color.cgi

Related Links Page 1
HTML Quick Reference
http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml

W3C HTML Guide
http://www.w3.org/MarkUp/

HTML Guide
http://html.about.com/compute/html/cs/htmltags/index.htm

HTML Tags Guide
http://www.willcam.com/cmat/html/crossref.html

The HTML Writers Guild
http://www.hwg.org/

Symbol Table for HTML
http://www.bbsinc.com/symbol.html

HTML Character Set
http://www.natural-innovations.com/boo/doc-charset.html

HTML Guide
http://html.about.com/compute/html/cs/htmltags/index.htm

Free Backgrounds
http://www.free-backgrounds.com/

Background – FAQ
http://www.two4u.com/bg-faq/

Buttons, Bullets, and Backgrounds
http://www.rewnet.com/bbb/
http://www.graphics-4free.com/
http://coolgraphics.com/gallery/

Beginning html

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Beginning html

Similar a Beginning html (20)

Último

Último (20)

Beginning html