1WWW and HTML] Review what is WWW] Description of HTML \ HyperText Markup LanguageWhat 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.htmlHow 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 themHTML 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 paragraph2Example 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 documentBrowser Output of PageIf you opened that page in Netscape Navigator, it would look like this:Here’s a header in big typeHere’s a paragraphView 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 directoryYour 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 directory3Web Design Packages] Microsoft FrontPage] Adobe GoLive] Netscape Composer] Macromedia DreamWeaverNetscape 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 daysHTML Advanced] NeoTrace] Hyperlinks and WWW] Advanced HTML FormattingWhere 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?4NeoTrace] NeoTrace is a shareware program that allows you to watch the “hops” and “stops” in a search for a web documentWhat 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 Schoolis 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”)] DoneInserting a Link in Macromedia DreamweaverHighlight 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.edu5Question?] How would you make a three column layout in a web page?] Talk to your neighbor and figure it outTables 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.] DoneWhy Tables?] CONTROL!] Tables allow you to control where items appear on pages. ] LBS Homepage is all tables (without borders)Inserting Tables in Macromedia DreamWeaverA Word about Frames] Frames are also used to control layout] Each cell is a separate window] Frames are BAD! because they are user-UN-friendlyGraphics] Question: How does a web page include graphics? ] Are the graphics included in the HTML file or separate files?6Graphics: 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 JPGsGraphics: 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 GIFsGraphics 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
View Full Document