HTML - Michigan State University
Download
Report
Transcript HTML - Michigan State University
Announcements
WWW and HTML
Review what is WWW
Description of HTML
HyperText Markup Language
What is WWW?
Via Internet, computers can contact each
other
Public files on computers can be read by
remote user
usually HyperText Markup Language (.html)
HTTP - HyperText Transfer Protocol
URL - Universal Resource Locator - is name of
file on a remote computer
http://www.msu.edu/~urquhar5/tour/active.html
How to make a web page
Define the two basic steps required in
making a web page.
Two Basic Steps
Create an HTML File
Upload file to server
.html
Web documents are text files with .html
extension
These text files have HTML “tags” in
them
HTML Tags
Each opening HTML tag has a closing
HTML tag that matches it.
<P> for begin paragraph is followed by </P>
for end paragraph
<P> goes at beginning of paragraph
</P> goes at end of paragraph
Example of Tags
<P>Here is the paragraph about
something</P><P>Here is the second
paragraph</P>
What it will look like:
Here is the paragraph about something.
Here is the second paragraph.
Essential HTML Tags
<HTML> begins HTML document
<BODY> begins body of document
<H1>Here’s a header in big type</H1>
<P>Here’s a paragraph</P>
</BODY> ends body
</HTML> ends HTML document
Browser Output of Page
If you opened that page in Netscape Navigator, it would look
like this:
Here’s a header in big type
Here’s a paragraph
View Page Source
Using “View Page Source” allows you to
see the HTML behind a page
When we get into advanced HTML pages,
this can be really important for learning
how someone did something
http://puffin.bird.audubon.org/
File Transfer Protocol
FTP Program (also called FTP client) used to
transfer files from your computer to your public
web directory housed on the MSU computers
WS_FTP LE is a good, free FTP program
In MSU Labs, can directly save stuff in your AFS
space, on the P: drive, in the web directory
Your personal web space
http://www.msu.edu/~pilotname/index.html
Three steps:
Make your pilot web space public (in advanced
features)
Create a file named index.html
Use FTP to transfer a file named index.html into
your web directory
Web Design Packages
Microsoft FrontPage
Adobe GoLive
Netscape Composer
Macromedia DreamWeaver
Netscape Composer
Netscape Composer allows WYSIWYG
(what-you-see-is-what-you-get) editing of
web pages
Controls similar to Microsoft word – font
formatting, colors, etc.
Macromedia Dreamweaver
Excellent Site Building Tool
Allows organization of files, ftp, and
WYSIWYG editing all-in-one
Principal program we will use in class
Create page, then go to Site | Put and it
transfers it for you!
Dreamweaver
You can download a trial version of
Macromedia Dreamweaver by going to:
http://www.macromedia.com/software/dreamweaver/trial/
Expires in 30 days
HTML Advanced
NeoTrace
Hyperlinks and WWW
Advanced HTML Formatting
Where is a Domain Server?
Domain www.microsoft.com is on a server
owned by Microsoft. But where is the
server?
How does your computer contact that
server?
NeoTrace
NeoTrace is a shareware program that
allows you to watch the “hops” and
“stops” in a search for a web document
What is a Hyperlink?
Hyperlinks (also called “links”) are
references in an HTML file that allow a
user to connect to a different URL
Hyperlinks are the magic behind the
WWW - they transport you to a different
world
Michigan State University
You may link to any page you wish!
Hyperlinks in HTML Code
<a href=“URL”>Text for link</a>
Hyperlinks in Action
<p>Welcome to Lyman Briggs School.
<a href=“http://www.msu.edu/~lbs/index.html”>
Lyman Briggs School
</a>
is a residential science program. </p>
What it will look like:
Welcome to Lyman Briggs School. Lyman Briggs School
is a residential science program.
Local Hyperlinks
If you are linking to a file in your
directory, you do not need the entire URL.
<a href=“personal.html”>Personal Statement</a>
You may also link to a location within the
page (link to a “target”)
Done
Inserting a Link in
Macromedia Dreamweaver
Highlight Text
Go to Link part of properties box
(may need to expand box using lower right arrow)
Local : Click on Folder to Right of Link Box and find file
-orRemote: Type in hyperlink – must include http://
e.g. http://www.harvard.edu
Question?
How would you make a three column
layout in a web page?
Talk to your neighbor and figure it out
Tables in HTML
Tables are incredibly difficult to hand
code.
Why? Each cell needs a <td></td> tag,
each row needs a <tr></tr> tag, and the
outer table needs a <table></table> tag.
Use Microsoft Word or Netscape
Composer to edit tables. I recommend
NC.
Done
Why Tables?
CONTROL!
Tables allow you to control where items
appear on pages.
LBS Homepage is all tables (without
borders)
Inserting Tables in
Macromedia DreamWeaver
A Word about Frames
Frames are also used to control layout
Each cell is a separate window
Frames are BAD! because they are userUN-friendly
Graphics
Question: How does a web page include
graphics?
Are the graphics included in the HTML file
or separate files?
Graphics: JPGs
JPG (JPEG) is a file format standing for
Joint Photographic Experts Group
Use .jpg ending on files
JPGs are the best format for color photos
and high-color images on the web
Scanned photos should be saved as JPGs
Photoshop, SuperPaint or other image
editor is good for editing JPGs
Graphics: GIFs
GIF stands for Graphic Image Format
.gif ending on GIF files
GIFs are perfect for graphical images with
only a few colors (e.g. text headers)
Very bad for photographs
Photoshop, SuperPaint, PowerPoint and
others good for GIFs
Graphics in HTML
<img src=“URL”>
Can include size parameters
<img src=“URL” height=80 width=240>
<img src=“dru.gif” height=25 width=100>
Note: No closing tag!