HTML
HTML
HTML
Develop Website
Module 1
Getting Started
1
Introduction
What this course is about:
» Creating, designing, publishing web pages
– Web design basics with HTML:
Controlling text formatting
Controlling fonts & adding color
Creating links
– Scripting
» Client side scripting (as time permits)
» Server side scripting
2
Competency Objectives
1. Understand what is the Internet, HTML,
Web servers.
2. Can format a simple HTML page and view
it with a browser.
3. Can validate html code (and understand
its importance).
Competency
Common
Alert:
You need to Problem
know this! Area!
People seem to forget this
3
Today’s Agenda
4
Competency
Alert:
You need to
What is the Internet?
know this!
All systems on Internet share a common addressing method (called IP addresses) For Example
135.14.12.22. E.g., condor.depaul.edu is really 140.192.1.6. Try http://140.192.1.6/~dlash/
7
Accessing a WebPAge A Greatly Simplified
view
www.mycompany.com/index.html
Client Machine
Company Server
Competency
Alert:
You need to A web server is a computer on the network that holds files
know this ! (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 8
machine, such as Apache, IIS, Tomcat..
How Pages Move Between Browser and
Webserver
Client Web
Machine Server
1.
Check Cache
2.
3.
1. Check the browser disk area (known as cache) to see if file has been recently viewed.
2. If file not in browser then translate the URL to a physical web (IP) address and request file from
Web Server.
3. Transfer file from Web Server back to client machine.
9
How Pages Move Between Browser and
Webserver – (The bottom line)
If you visits a page now and revisit in 15 minutes (or
even tomorrow) your page might be coming from
cache (and not be the “freshest” content).
Two ways to ensure getting content from web server
and not from cache
1. Hold down the “shift” button and then hit refresh (or reload)
2. Delete all the caches file from browser cache.
– From IE goto tools->temporary internet files ->Delete files
– From Netscape Edit->preferences->Advanced->Cache->Clear
Cache
Common
Problem
Area! 10
People seem to forget this
Outline
11
Ok So What Is HTML?
Up until the late 1980s, Internet’s main use for email,
send/received files, and bulletin board services .
» Was difficult to advertise and access documents and data at a site.
Tim Berners-Lee created a simple language for display
documents and links
» Wrote a tool (early browser) for displaying the language
» This language called HyperText Markup Language (HTML).
HTML grew quickly especially with the development of the
Mosiac web browser
» Mosiac eventually became Netscape and was available for free
download.
» HTML eventually became standardized and is now controlled by the
world wide web consortium (http://www.w3.org)
12
Competency
Alert:
You need to
What Really Is HTML?
know this!
13
HTML? Why Not Just Use …
14
OK So What Is This HTML?
15
HTML Overview - II
A set of TAGs are required of all documents
<HTML> ... </HTML> Starts and ends your entire HTML
document
<BODY> ... </BODY> Defines the main body section for your
HTML document
19
Once done, goto file->saveas
Note: On windows the icons are also usually different for files
of different suffixes. Here ‘roman.html’ is not really an html suffix 20
(you can tell by the icon). Its actually roman.html.txt
Open the file in Internet Explorer
21
Repeat until done with the file.
22
Outline
23
Eventually will publish on the Web
1. Start->Internet Applications->FTP
(Start->programs->depaul online->ftp from at home with DePaul Online)
2. Fill in:
Host Name: students.depaul.edu
User Id: your DePaul userid 26
Password: your DePaul password
More on FTP Main Screen.
Current directory on PC Current directory on Web server
27
Outline
28
We already saw ...
</HTML>
<HR>
30
HTML Comments
31
Paragraph and Break Tags
33
Using Attributes with Tags
34
Paragraph and Break Tags
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>
35
Paragraph and Break Tags
36
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>
37
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. <!-- Opps I forgot to close off the H2 tag!
8. -->
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>
39
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
File save
and undo
works like
notepad or
word
Alphabetic
index of HTML
tags 41
Your errors are shown here are the bottom
Summary
43
A quick couple of questions
What is HTML?
What is the Internet?
What is a Web Server?
44
A quick couple of questions
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
What is the Internet?
What is a Web Server?
45
A quick couple of questions
What is HTML
What is the Internet?
– 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.
Web server also can refer to the software that controls the 46
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.
47
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>
48
HW Hands-on assignment
Change that webpage to look like the
following:
49
What to do with homework
1. Do not hand in the homework yet.
50
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).
51