HTML Is The Basis of The Web:: Page #1

HTML Is The Basis Of The Web: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.
01 Transitional//EN">
<html>
HTML is the only way to communicate with
people on the World Wide Web. There are <head>
many ways to make web pages but the <title>This is YOUR NAME's HomePage</title>
basic method is to "write" the code by hand
in a language called HTML. HTML stands </head>
for Hyper Text Markup Language. HTML is <body>
an easy to use and very versatile language <h1>This is YOUR NAME's little corner of the Web</h1>
but... it is not too forgiving, you will have to
type all the commands in carefully with a <h2>I've just started working on it so keep watching</h2>
great attention to detail. <blockquote>
Here is a place to put a short paragraph about yourself and your
HTML tags are identified by the greater
than and less than symbols. Be sure that interests.
you have all your "tags" in matched sets < > </blockquote>
if you have stray symbols or quotes you
<h2>Here are sites that I find interesting</h2>
will, frankly, have a mess.
<ul>
There are lots of tags to do almost anything <li><a href="the URL goes here">HOT TEXT WILL BE HERE</a></li>
that you want but... you can make great
<li><a href="the URL goes here">HOT TEXT WILL BE HERE</a></li>
web pages with just a few. In fact, as you
will see later, we can make web pages <li><a href="the URL goes here">HOT TEXT WILL BE HERE</a></li>
without any HTML at all. </ul>
<hr />
First Type This Simple Page: <a href="mailto:Yourlogin@stritch.edu">Please send me email</a>
Use any text editor, NOT a word processor.
<hr />
It is important that you know where the file
is saved on your system. You should be <p align="center"><a href="http://www.stritch.edu/">Back to the
sure that you are saving it in a location that Stritch Main Page</a>
will have sufficient space to hold all your
</p>
graphics and text. A flash/pen drive will be
perfect. Where your files are kept is <hr />
important especially before it has been </body>
uploaded to a website. <More Later>
</html>
This document ©John M. Sklar, 2007 – Feel free to use for education purposes but do not modify – contact: jmsklar@stritch.edu Page #1
Save this document as a text file with the name: index.html (You can also use index.htm)
After you have saved the document, open Internet explorer. Select file from the menu bar and select open a page. Browse until you find
your page. Then click the button to open the page and you should see your page in all its glory!
Don't Quit The Browser!

Minimize the browser while you go back and edit your page.
After you make changes, save your page again and then go back to the browser. Push the reset/reload button. (Without a reload, you
are still looking at the old version.)
Add a graphic:
Find a suitable PNG, GIF or JPEG image and put it in the same place that your web page is stored.
Make sure that it is named without spaces or odd characters. Decide where in your document that
you wish the picture to appear. And in that exact location type this:
<img src="nameofit.gif" alt="This is my picture">
The name must be exactly the same in the img src tag as it is on the disk. This is the most common
error so check the spelling and case carefully.
Save the file and go back to the browser, do a reload, and view your graphic.
This is the process: Web Pages are never done. There is

Edit Save View Edit until the page is ready to show.
At this point we will need to put it on a server to make it visible to the always more HTML to learn and new,
whole world. When we view a page locally we are the only people
who can see it. When we mount it on the web, anyone on the web
neat things that you can get your page to
will be able to see it if they know the address. do. As you change, you will want your page
You need an ISP (Internet Service Provider): to reflect your new interests and
Most ISP's will provide you with space for a web page and a publicly activities. This stuff can be addicting,
available address. For this course we will mount the page on the
Stritch Server. You might want to consider a local ISP or your
and a whole lot of fun.
employer as a final residence for your page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML><HEAD><TITLE>Horizontal Rule Demo</TITLE>
</HEAD>
<body bgcolor=#FFFFFF text=#0000000>
<hr width=25% size=2 noshade>

<hr width=300 size=8 noshade>
<hr width=400 size=16 noshade>
<p align=CENTER>These rules are automatically aligned
center<P>
<hr width=400 size=16 >
<hr width=300 size=8>
<hr width=25% size=2>
<hr align=right width=25% size=2 noshade>

<hr align=right width=300 size=8 noshade>
<hr align=right width=400 size=16 noshade>
<p align=right>These rules are aligned right<P>
<hr align=right width=400 size=16 >
<hr align=right width=300 size=8>
<hr align=right width=25% size=2>
<hr align=left width=25% size=2 noshade>

<hr align=left width=300 size=8 noshade>
<hr align=left width=400 size=16 noshade>
<p align= left>These rules are aligned left<P>
<hr align=left width=400 size=16 >
<hr align=left width=300 size=8>
<hr align=left width=25% size=2>
<P>
<CENTER>
<TABLE BORDER=0 bgcolor="Yellow" cellpadding = 3 width=450>
<TR><TD bgcolor="Yellow" align=right> Horizontal rule Demo
</TD></TR>
<TR><TD bgcolor="white" align=center>Here is an interesting "Horizontal Rule"</font>
</TD></TR><CENTER><TD bgcolor="red" align=left> Horizontal rule Demo
</TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Table Demonstration</TITLE>
</HEAD>
<CENTER>
<Table border= 5 cellpadding= 15>
<TH colspan=5>
<H1>This is a sample schedule:</H1></TH>
<TR>
<TH>Course</TH>
<TH>Room</TH>
<TH>Time</TH>
<TH>Days</TH>
<TH>AV Needed</TH>
</TR>
<TR>
<TD>English</TD>
<TD>213</TD>
<TD>8:00-9:30a</TD>
<TD>M-W-F</TD>
<TD>No</TD>
</TR>
<TR>
<TD>Math</TD>
<TD>223</TD>
<TD>9:45-11:15a</TD>
<TD>T-Th</TD>
<TD>Yes</TD>
</TR>
<TR>
<TD>Phy Ed.</TD>
<TD>Gym</TD>
<TR>
<TD>12:00-12:55p</TD> <TD>Computers</TD>
<TD>M-W-F</TD> <TD>Comp Lab</TD>
<TD>No</TD> <TD>1:00-2:30p</TD>
</TR> <TD>T-Th</TD>
<TD>Yes</TD>
The rest of this code </TR>

</Table></CENTER>
</BODY>
</HTML>
<HTML>
<HEAD>
A Complex HTML Table

<TITLE>Complex Table Demonstration</TITLE>
</HEAD>
<CENTER>
<Table width=400 border= 5 cellpadding= 15>
<TR>
<TH colspan=2 rowspan=2><H2>Computer Advice</H2>
(This information is for demonstration only)</TH>
<TH colspan=2>Recomendations</TH>
</tr>
<TR>
<TH >Ram </TH>
<TH >Hard Drive </TH>
</TR>
<TR>
<TH width=30% rowspan=3>Computer Type</TH>
<TD width=30%>Macintosh</TD>
<TD width=20%>16 meg</TD>
<TD width=20%>850 meg</TD>
</TR>
<TR>
<TD>Wintel</TD>
<TD>24 meg</TD>
<TD>1.6 gig</TD>
</TR>
<TR>
<TD>Unix</TD>
<TD>64 meg</TD> Complex tables demand a great deal of advanced planning
<TD>8 gig</TD>
</TR> and careful coding. Note how colspan and rowspan allow you
</Table></CENTER>
</BODY>
to have a heading or cell data span multiple columns in
</HTML> either direction. These tables can be created in word or
Excel and exported to html.
Adding a background Color: FTP Information for CSU Students
Change the body tag to add a color attribute:
Please use the following information to connect to your space via FTP:
<body style="background: blue;">
Host: students.stritch.edu
This line will color the screen blue.
Username: stritch/[your username] (note: the "stritch/" is required.)
Password: [your password]
Adding a background: Remote Directory: /students/[your username]
Change the body tag to add a background graphic: if you are using an FTP client, such as LeechFTP, the connection screen should
look something like this:
<body style="background: blue
url('yourgraphic.gif');">
This line will color the screen blue until the graphic loads.
Playing with fonts:

Instead of H1 you can specify fonts.
<p style="font-family: Helvetica, Geneva,
Arial,sans-serif; font-size: 48pt; color:
red;">Hi John</p>
You can list as many faces as you want, the computer

will choose the first one it has available. Most computers
have times, courier, arial. Don’t count on other fonts…
HTML is a relaxed language but... keeping it compliant is a good idea.

For compliance information, visit http://www.w3.org

HTML Is The Basis of The Web:: Page #1

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML Is The Basis of The Web:: Page #1

Загружено:

Авторское право:

Доступные форматы

HTML Is The Basis Of The Web: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.

Don't Quit The Browser!

<img src="nameofit.gif" alt="This is my picture">

This is the process: Web Pages are never done. There is

<hr width=25% size=2 noshade>

<hr align=right width=25% size=2 noshade>

<hr align=left width=25% size=2 noshade>

The rest of this code </TR>

A Complex HTML Table

Playing with fonts:

You can list as many faces as you want, the computer

HTML is a relaxed language but... keeping it compliant is a good idea.

Вам также может понравиться