HTML Continuation With Examples After Basics

HTML Only Responds To Tags
 Blank spaces without tags are ignored: These

<HTML>
<HEAD> spaces are
<TITLE> Formatting a WWW Page </TITLE> ignored.
</HEAD>
<BODY>
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.
<HR>
But the class does have some work to do.

</BODY>
</HTML>
1
HTML Comments
The Tag  is used to indicate comment :

<HTML> These
<HEAD>
<TITLE> THIS is a sample web Page </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
2
Paragraph and Break Tags
Two of the most basic tags are:
<P> …… </P> -- Causes a new paragraph

<br> …… <br /> -- Causes a line break
<hr> …… <hr /> -- Draws a solid horizontal line
Actually you can get away without ending these tags.

The browsers know what you mean.
3
Creates
a line
<HTML><HEAD><TITLE> Web Page With "P" Tag</TITLE>
</HEAD>
<BODY>
<HR>
Hopefully you will find this course interesting.
<P>
Create a new
In this course, paragraph
you will develop
a broad knowledge of the Internet
</P><P>
This class meets at night.
</P><P>
CLASS 1 - Introduction To The Internet
<BR>
Line Break
CLASS 2 - Email
<BR>
CLASS 3 - HTML<BR> Note > 1 tag per
</BODY></HTML> line
4
Using Attributes with Tags
Many tags also have optional attributes :

 <P> ……… </P> -- Causes a new paragraph
» align=center|right|left
» aligns the text to the center, right or left.
E.g., <P align=left>
 <hr> or <hr /> --- Draws a solid horizontal line
» align=center|left|right - sets horizontal alignment
» noshade - Display as a solid (noshaded) bar
» size=number - thickness of rule in pixels
» width=number or % - Length of rule in pixels or % of screen.
» E.g., <HR noshade size=12 width=50%>
5
1. <HTML><HEAD><TITLE> Web Page With "P" Tag </TITLE>
2. </HEAD><BODY> Create a left justified
3. Welcome To Exploring The Internet paragraph
4. <HR>
5. Hopefully you will find this course interesting.
6. <P align=left>
7. In this course, you will develop
8. a broad knowledge of the internet Center it
9. </P><P align=right>
10. This class meets at night.
11. <P align=center> Solid HR that’s 30%
12. CLASS 1 - Introduction To The Internet
13. <BR clear=right>
of screen & 10 pixels
14. CLASS 2 - Email
15. <HR noshade width=30% size=10>
16. <HR width=30% size=10 align=left>
17. <HR size=12 WIDTH=155 align=right>
18. CLASS 3 - HTML
19. </BODY></HTML>
6
Headers are used to create section titles

- not the <title> tag
<H1> ……… </H1> -- First Level Header

<H2> ……. </H2> -- Second Level
<H3> …….. </H3> --- Third Level
<H4> …….. </H4> --- Fourth Level
<H5> …….. </H5> --- Fifth Level
7
Header Example
1. <HTML><HEAD><TITLE> THIS is a sample web Page </TITLE>
2. </HEAD>
3. <BODY>
4. <H1> INTRODUCTION </H1>
H1 is the largest header. It will cause
5. Welcome To Website Design. line break and be large and bold
6. Hopefully you will find this course to be informative and interesting.<H1>
Overview </H1>In this course, you will develop a broad knowledge of the Internet
technology.
7. <H1> Meeting Times </H1>
8. The class will meet every other week on Thursday's (naperville) or
9. Saturday's (O'hare)
10. <H2> Dates and Times </H2><H3>CLASS 1</H3>
H2 and H3 will be smaller
11. Introduction To The Internet
12. <H3>CLASS 2</H3>Email<H3>CLASS 3 </H3>
13. HTML</BODY></HTML>
8
Header Error Example
1. <HTML><HEAD> <TITLE> THIS is a sample web Page
2. </TITLE></HEAD><BODY>
3. <H1> INTRODUCTION </H1>Welcome 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. <P><H1> Overview </H1>
4. 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.
5. <P> <H1> Meeting Times </H1>
6. The class will meet every other week on Thursday's (naperville) or Saturday's (O'hare)
7. 
9. <H2> Dates and Times
10. <P>CLASS 1 - Introduction To The Internet<BR> CLASS 2 - Email
11. <BR>CLASS 3 - HTML
12. </BODY></HTML>
Accidentally left off the </H2> tag
Note how browser continues H2

until end of document 9
Outline
 What we will talk about

1. A little background on Internet, Web Browsers
2. Creating your first HTML Web Page
- What is HTML
- Basic HTML document
- How to publish your basic document.
3. Understanding basics of HTML document
4. New paragraphs, Horizontal rule, and header.
5. Validator “lite”
10
Using HTML Validators
Why Bother to validate HTML code?
1. Browser do not fully enforce HTML standard
– E.g., Often are ‘forgiving’ if forget to close a tag or omit something
1. <HTML><HEAD><TITLE> This is a sample web Page </TITLE>

2. </HEAD> <BODY>
3. <H1> INTRODUCTION </H1>
4. Yet another example web page. In this one I forgot to end the document.
5. <br> Yet I don't get an error.
Did not end document

but it displays OK.
BUT WHAT ABOUT ‘IE’ or

NETSCAPE OR A PREVIOUS
VERSION or NEXT VERSION? 11
Using HTML Validators
Soln: Use An HTML Validator.
» Such as a Web Site (upload code)
» Or HTML validator lite (for free) at: http://www.download.com
File->open to open documents Use tools-> validate to show html errors
File save
and undo
works like
notepad or
word
Alphabetic
index of HTML
tags 12
Your errors are shown here are the bottom
Summary
What we talked about

1. A little background on Internet, Web Browsers
2. Creating your first HTML Web Page
- What is HTML
- Basic HTML document
- How to publish your basic document (FTP)
3. Understanding basics of HTML document
4. New paragraphs, Horizontal rule, and header.
5. Validator “lite”
13
A quick couple of questions
 What is HTML?
 What is the Internet? (3 attributes)
 What is a Web Server?
14
 What is HTML?
 What is the Internet?
15
 What is HTML?
» HyperText Markup Language - Basically a
set of TAGS that you add to your text
– HTML tells browsers how to display and format
your text
16
 What is HTML
– is logically linked together by a globally unique address space
based on the Internet Protocol (IP)
– supports communications using the Transmission Control
Protocol/Internet Protocol (TCP/IP) suite or its subsequent
extensions/follow-ons, and/or other IP-compatible protocols; and
– provides, uses or makes accessible, either publicly or privately,
high level services layered on the communications and related
infrastructure described herein.
 What is Web Server?

A web server is a computer on the network that holds files
(often for more than 1 user). It listens for http file requests
(on the internet) and responds to them.
Web server also can refer to the software that controls the 17
machine, such as Apache, IIS, Tomcat..
Module 1 Hands on Assignment
 Create an HTML page that looks like the
following:
Competencies required:
1. Create a script and execute it.
18
2. Manipulate arithmetic variable.
One possible solution
1. <HTML><HEAD>
2. <TITLE> A first Web Page </TITLE>
</HEAD><BODY>
3. <h1>A favorite Saying</h1>
4. One of my favorites quotes is: "Steady
plodding leads to success
5. but hasty speculation leads to poverty."
6. <HR> This page was designed by me.
7. </BODY>
8. </HTML>
19
HW Hands-on assignment
 Change that webpage to look like the
following:
20
What to do with homework
1. Do not hand in the homework yet.
2. HW will be ‘collected’ when you publish to the

WWW.
3. For now, complete the assignment, a save to
your personal machine. I will ask you to
publish it later.
21
One more item . . .
 In order to get space on the DePaul Web
Server.
1. You need to see the DePaul Lab Assistant
2. Ask to activate your email account.
3. Do this even if you ‘have’ an email account.
(Its routine practice, for them to suspend
inactive accounts).
22

HTML Continuation With Examples After Basics

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Continuation With Examples After Basics

Uploaded by

Copyright:

Available Formats

HTML Only Responds To Tags

 Blank spaces without tags are ignored: These

Hopefully you will find this course to be informative and interesting. I

But the class does have some work to do.

The Tag  is used to indicate comment :

Two of the most basic tags are:

<P> …… </P> -- Causes a new paragraph

Actually you can get away without ending these tags.

Many tags also have optional attributes :

Headers are used to create section titles

<H1> ……… </H1> -- First Level Header

Accidentally left off the </H2> tag

Note how browser continues H2

 What we will talk about

1. <HTML><HEAD><TITLE> This is a sample web Page </TITLE>

Did not end document

BUT WHAT ABOUT ‘IE’ or

File->open to open documents Use tools-> validate to show html errors

What we talked about

 What is Web Server?

2. HW will be ‘collected’ when you publish to the

You might also like