DePaul University

1
DePaul University

• SNL 262
• Web Page Design
• Starting To Use HTML
• Instructor David A. Lash

2
HTML Overview - Example
The header section of document

• ltHTMLgt
• ltHEADgt
• ltTITLEgtMypage
• lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Welcome to Website
• Design
• lt/BODYgt
• lt/HTMLgt

Indicates start and end of HTML document
Appears in upper left hand corner of browser
window
This is where most of TAGS usually are and text
your displaying (w/i BODY tags).
3
HTML Only Responds To Tags

• Blank spaces without tags are ignored
• ltHTMLgt
• ltHEADgt
• ltTITLEgt Formatting a WWW Page lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Welcome To Exploring The Internet
• Hopefully you will find this course to be
  informative and interesting. I
• hope that you have fun while learning
  about the Internet.
• ltHRgt
• But the class does have some work to do.
• lt/BODYgt
• lt/HTMLgt
• http//www.depaul.edu/dlash/extra/Website/example
  s/02HTMLsimp2.html

These spaces are ignored.
4
HTML Only Responds To Tags

• The Tag lt!--- . ---gt
• used to indicate
  comment
• ltHTMLgt
• lt!--
• ! Example of a Basic HTML Program
• ! Written by Dave Lash For Web Page Design
• ! To demonstrate the use of comments.
• --gtltHEADgt
• ltTITLEgt THIS is a sample web Page lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Welcome To Exploring The Internet
• lt/BODYgt
• lt/HTMLgt
• http//www.depaul.edu/dlash/extra/Webpage/example
  s/02HTMLSimpWComments.html

These comments are ignored.
5
Paragraph and Break Tags

• Two of the most basic tags are
• ltPgt lt/Pgt -- Causes a new paragraphltbrgt
  . ltbr /gt -- Causes a line break
• lthrgt .. lthr /gt --- Draws a solid horizontal
  line

6
Paragraph and Break Tags

• ltHTMLgtltHEADgtltTITLEgt Web Page With "P" Taglt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Welcome To Exploring The Internet
• ltHRgt
• Hopefully you will find this course interesting.
• ltPgt
• In this course,
• you will develop
• a broad knowledge of the Internet
• lt/PgtltPgt
• This class meets at night.
• lt/PgtltPgt
• CLASS 1 - Introduction To The Internet
• ltBRgt
• CLASS 2 - Email
• ltBRgt
• CLASS 3 - HTMLltBRgt
• lt/BODYgtlt/HTMLgt

Creates a line
Create a new paragraph
Line Break
Note gt 1 tag per line
http//www.depaul.edu/dlash/extra/Webpage/exampl
es/02paraExample.html
7
Paragraph and Break Tags

• For Each Of these Tags you have parameters
• ltP gt lt/Pgt -- Causes a new paragraph
• aligncenterrightleft
• aligns the text to the center, right or
  left.E.g., ltP alignleftgt
• ltbrgt . ltbr /gt -- Causes a line break
• clearallleftright
• breaks the flow and resumes the next line after
  the margin is clear.
• E.g., ltbr clearleftgt
• lthrgt .. lthr /gt --- Draws a solid horizontal
  line
• aligncenterleftright - sets horizontal
  alignment
• noshade - Display as a solid (noshaded) bar
• sizenumber - thickness of rule in pixels
• widthnumber or - Length of rule in pixels or
  of screen.
• E.g., ltHR noshade size12 width50gt

8
Paragraph and Break Tags

• ltHTMLgtltHEADgtltTITLEgt Web Page With "P" Tag
  lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Welcome To Exploring The Internet
• ltHRgt
• Hopefully you will find this course interesting.
• ltP alignleftgt
• In this course,
• you will develop
• a broad knowledge of the internet
• lt/PgtltP alignrightgt
• This class meets at night.
• ltP aligncentergt
• CLASS 1 - Introduction To The Internet
• ltBR clearrightgt
• CLASS 2 - Email
• ltHR noshade width30 size10gt
• ltHR width30 size10 alignleftgt
• ltHR size12 WIDTH155 alignrightgt

Create a left justified paragraph
Center it
Solid HR thats 30 of screen 10 pixels
http//www.depaul.edu/dlash/extra/Webpage/exampl
es/02paraparameter.html
9
Paragraph and Break Tags

• Headers are used to create section titles
• - not the lttitlegt tag
• ltH1gt lt/H1gt -- First Level HeaderltH2gt .
  lt/H2gt -- Second Level
• ltH3gt .. lt/H3gt --- Third Level
• ltH4gt .. lt/H4gt --- Fourth Level
• ltH5gt .. lt/H5gt --- Fifth Level

10
Header Example

• ltHTMLgtltHEADgtltTITLEgt THIS is a sample web Page
  lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gt INTRODUCTION lt/H1gt
• Welcome To Website Design.
• Hopefully you will find this course to be
  informative and interesting.ltH1gt Overview lt/H1gtIn
  this course, you will develop a broad knowledge
  of the Internet technology.
• ltH1gt Meeting Times lt/H1gt
• The class will meet every other week on
  Thursday's (naperville) or
• Saturday's (O'hare)
• ltH2gt Dates and Times lt/H2gtltH3gtCLASS 1lt/H3gt
• Introduction To The Internet
• ltH3gtCLASS 2lt/H3gtEmailltH3gtCLASS 3 lt/H3gt
• HTMLlt/BODYgtlt/HTMLgt

http//www.depaul.edu/dlash/extra/Webpage/exampl
es/02headers.html
11
Header Example

• ltHTMLgtltHEADgt ltTITLEgt THIS is a sample web Page
• lt/TITLEgtlt/HEADgtltBODYgt
• ltH1gt INTRODUCTION lt/H1gtWelcome To Exploring The
  InternetHopefully you will find this course to be
  informative and interesting. I hope that you
  have fun while learning about the Internet.
  ltPgtltH1gt Overview lt/H1gt
• In this course, you will develop a broad
  knowledge of the Internet technology and
  understand how it can be useful to work personal
  and work life.
• ltPgt ltH1gt Meeting Times lt/H1gt
• The class will meet every other week on
  Thursday's (naperville) or Saturday's (O'hare)
• lt!-- Opps I forgot to close off the H2 tag!
• --gt
• ltH2gt Dates and Times
• ltPgtCLASS 1 - Introduction To The InternetltBRgt
  CLASS 2 - Email
• ltBRgtCLASS 3 - HTML
• lt/BODYgtlt/HTMLgt

http//www.depaul.edu/dlash/extra/Webpage/exampl
es/02headererror.html
12
Using HTML Validator Lite

• Advantages
• 1. Can use to validate HTML code and determine
  errors
• 2. Can obtain HTML validator lite (for free)
  at
• http//www.download.com
• (enter validator in the search box.)
• - Have a screen with 2 major parts
• - Top part works like notepad
• - bottom part shows HTML errors when you do a
  tools-gtvalidate.
• How to start
• - From lab goto start-gtInternet Applications-gtSNL