announcements. www and html zreview what is www zdescription of html yhypertext markup language
TRANSCRIPT
![Page 1: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/1.jpg)
Announcements
![Page 2: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/2.jpg)
WWW and HTML
Review what is WWWDescription of HTML
HyperText Markup Language
![Page 3: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/3.jpg)
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 ProtocolURL - Universal Resource Locator - is name of
file on a remote computerhttp://www.msu.edu/~urquhar5/tour/active.html
![Page 4: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/4.jpg)
How to make a web page
Define the two basic steps required in making a web page.
![Page 5: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/5.jpg)
Two Basic Steps
Create an HTML FileUpload file to server
![Page 6: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/6.jpg)
.html
Web documents are text files with .html extension
These text files have HTML “tags” in them
![Page 7: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/7.jpg)
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
![Page 8: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/8.jpg)
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.
![Page 9: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/9.jpg)
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
![Page 10: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/10.jpg)
Browser Output of Page
If you opened that page in Netscape Navigator, it would look like this:
Here’s a header in big typeHere’s a paragraph
![Page 11: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/11.jpg)
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/
![Page 12: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/12.jpg)
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
![Page 13: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/13.jpg)
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
![Page 14: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/14.jpg)
Web Design Packages
Microsoft FrontPageAdobe GoLiveNetscape ComposerMacromedia DreamWeaver
![Page 15: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/15.jpg)
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.
![Page 16: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/16.jpg)
Macromedia Dreamweaver
Excellent Site Building ToolAllows organization of files, ftp, and
WYSIWYG editing all-in-onePrincipal program we will use in classCreate page, then go to Site | Put
and it transfers it for you!
![Page 17: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/17.jpg)
Dreamweaver
You can download a trial version of Macromedia Dreamweaver by going to:
http://www.macromedia.com/software/dreamweaver/trial/
Expires in 30 days
![Page 18: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/18.jpg)
HTML Advanced
NeoTraceHyperlinks and WWWAdvanced HTML Formatting
![Page 19: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/19.jpg)
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?
![Page 20: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/20.jpg)
NeoTrace
NeoTrace is a shareware program that allows you to watch the “hops” and “stops” in a search for a web document
![Page 21: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/21.jpg)
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 UniversityYou may link to any page you wish!
![Page 22: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/22.jpg)
Hyperlinks in HTML Code
<a href=“URL”>Text for link</a>
![Page 23: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/23.jpg)
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.
![Page 24: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/24.jpg)
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
![Page 25: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/25.jpg)
Inserting a Link in Macromedia Dreamweaver
Highlight TextGo 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 -or-Remote: Type in hyperlink – must include http://
e.g. http://www.harvard.edu
![Page 26: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/26.jpg)
Question?
How would you make a three column layout in a web page?
Talk to your neighbor and figure it out
![Page 27: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/27.jpg)
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
![Page 28: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/28.jpg)
Why Tables?
CONTROL!Tables allow you to control where
items appear on pages. LBS Homepage is all tables (without
borders)
![Page 29: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/29.jpg)
Inserting Tables in Macromedia DreamWeaver
![Page 30: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/30.jpg)
A Word about Frames
Frames are also used to control layout
Each cell is a separate windowFrames are BAD! because they are
user-UN-friendly
![Page 31: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/31.jpg)
Graphics
Question: How does a web page include graphics?
Are the graphics included in the HTML file or separate files?
![Page 32: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/32.jpg)
Graphics: JPGs
JPG (JPEG) is a file format standing for Joint Photographic Experts Group
Use .jpg ending on filesJPGs are the best format for color photos
and high-color images on the webScanned photos should be saved as JPGsPhotoshop, SuperPaint or other image
editor is good for editing JPGs
![Page 33: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/33.jpg)
Graphics: GIFs
GIF stands for Graphic Image Format.gif ending on GIF filesGIFs are perfect for graphical images
with only a few colors (e.g. text headers)
Very bad for photographsPhotoshop, SuperPaint, PowerPoint
and others good for GIFs
![Page 34: Announcements. WWW and HTML zReview what is WWW zDescription of HTML yHyperText Markup Language](https://reader035.vdocument.in/reader035/viewer/2022062421/56649e195503460f94b0655b/html5/thumbnails/34.jpg)
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!