web Class Lesson 2

WEB PAGES: CREATING AND MAINTAINING **
Wednesday:
2:00pm -3:15pm
Instructors:Tom Keane & Mayis Seapan
Week 2
WYSIWYG Editors
Plan Your Site
Go to the
Class website:
http://udel.edu/~tomkeane/web
Click on week 2
Creating your First Web Page
Using HTML Tags
Is it Difficult ...
Is this going to require that I learn a whole new
Computer language like Basic or Fortran or some
other cryptic, God-awful, silly-lookin', gothic
extreme gobbledygook?
IF IF = THEN THEN THEN = ELSE ELSE ELSE = IF;
6
Questions … Answers...
Q. Must I be logged onto the Internet to do
this? Specifically, will learning this make me
spend a lot of time on-line?
A. No. You will write off-line.
7
Questions … Answers...
Q. Do I need an expensive program to help
me write this?
A. No. You will write using just Notepad.
You can buy those programs if you'd like, but
they're not needed.
But are they EASIER to
use?
8
How ….
• Use Notepad in PC or TextEdit in
MAC to create a text file
• Learn simple rules of H.T.M.L
• Hyper Text Markup Language
• Display using Browser
9
HTML - Simple - yeah right!
10
HTML - Simple - yeah right!
• Just like reading…
• Top to bottom….
• Left to right …
 You just create a “simple” text file
• with “Tags”
11
Hyper Text Markup Language
• HTML is not a programing language
• HTML is a markup language
• A markup language is a collection of markup tags
• The Web browser interprets the tags and displays
the contents as Web pages
• HTML documents contain tags and text
• The browser does not display tags
HTML TAGS
• HTML Tags or simply called Tags are keywords
surrounded by angle brackets, e.g. <html>
• Tags normally come in pairs, like <b> and </b>
• The first tag is the start or opening tag
• The second tag is the end or closing tag.
• The first tag gives the command to start a certain
action and the end tag commands to stop the action.
• Tags are not case sensitive.
Hyper Text Markup Language
Use TAGS (commands)
<
Example:
to start underline:
Important!
No Spaces
to stop underline
>
< u>
< /u >
14
The Underline Tag
Starting
Ending
<u>
< /u >
LEARNING HTML IS EASY
LEARNING <u>HTML </u> IS EASY
15
This is what will be displayed in the Browser
LEARNING HTML IS EASY
LEARNING <u>HTML </u> IS EASY
This is what you typed into the Text File.
16
Tags that are on ALL Web Pages !!!
Starting
Ending
< html >
< /html >
< head >
< /head >
< title >
< /title >
< body >
< /body >
17
Basic Tags on All Web pages
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
They define sections of the page
16
18
HTML Document
• Every HTML document starts with <html> and
ends with </html>, the text in between describes
the web page.
• The text between <head> and </head> gives extra
information to browser
• The text between <title> and </title> appears on
the name tab of the web page
• The text between <body> and </body> appears on
the web page
16
19
Text in Body
• The browser recognizes the text between <body>
and </body> as a plain text.
• The browser recognizes only one blank space after
a character and ignores any extra spaces
• The browser does not recognize returns on the
text.
• The browser either ignores any formatting of the
text or will get confused and display erroneously.
16
20
Basic Tags on All Web pages
Please type the following text and create its web page
<html>
<head>
<title>
This is the title
</title>
</head>
<body>
Welcome to my webpage
</body>
</html>
16
21
CLASS EXERCISE
Please type the following text and create its web page
<html>
<Head>
<Title>
This is the title
</tiTLe>
</head>
<body>
Welcome to my webpage.
Second Line
of my web page.
</Body>
</HTML>
16
22
CLASS EXERCISE
Please type the following text and create its web page
<html> <head>
<title>
Title-2
</title> </head>
<Body>
Welcome to my webpage. <br>
This is the Second Line of my web page.
<p> Here is a <b> paragraph. </b>
</p>
</Body>
</HTML>
16
23