Announcements

Please download to get full document.

View again

of 35
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Information Report
Category:

Documents

Published:

Views: 0 | Pages: 35

Extension: PPT | Download: 0

Share
Related documents
Description
H1 Here's a header in big type /H1 P Here's a paragraph /P /BODY ends body ... http://puffin.bird.audubon.org/ File Transfer Protocol ...
Transcript
Title: Announcements 1 Announcements 2 WWW and HTML
  • Review what is WWW
  • Description of HTML
  • HyperText Markup Language
  • 3 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
  • 4 How to make a web page
  • Define the two basic steps required in making a web page.
  • 5 Two Basic Steps
  • Create an HTML File
  • Upload file to server
  • 6 .html
  • Web documents are text files with .html extension
  • These text files have HTML tags in them
  • 7 HTML Tags
  • Each opening HTML tag has a closing HTML tag that matches it.
  • ltPgt for begin paragraph is followed by lt/Pgt for end paragraph
  • ltPgt goes at beginning of paragraph
  • lt/Pgt goes at end of paragraph
  • 8 Example of Tags
  • ltPgtHere is the paragraph about somethinglt/PgtltPgtHer e is the second paragraphlt/Pgt
  • What it will look like Here is the paragraph about something. Here is the second paragraph. 9 Essential HTML Tags
  • ltHTMLgt begins HTML document
  • ltBODYgt begins body of document
  • ltH1gtHeres a header in big typelt/H1gt
  • ltPgtHeres a paragraphlt/Pgt
  • lt/BODYgt ends body
  • lt/HTMLgt ends HTML document
  • 10 Browser Output of Page If you opened that page in Netscape Navigator, it would look like this Heres a header in big type Heres a paragraph 11 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/
  • 12 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
  • 13 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
  • 14 Web Design Packages
  • Microsoft FrontPage
  • Adobe GoLive
  • Netscape Composer
  • Macromedia DreamWeaver
  • 15 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.
  • 16 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!
  • 17 Dreamweaver
  • You can download a trial version of Macromedia Dreamweaver by going to
  • http//www.macromedia.com/software/dreamweaver/tri al/
  • Expires in 30 days
  • 18 HTML Advanced
  • NeoTrace
  • Hyperlinks and WWW
  • Advanced HTML Formatting
  • 19 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?
  • 20 NeoTrace
  • NeoTrace is a shareware program that allows you to watch the hops and stops in a search for a web document
  • 21 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!
  • 22 Hyperlinks in HTML Code
  • lta hrefURLgtText for linklt/agt
  • 23 Hyperlinks in Action
  • ltpgtWelcome to Lyman Briggs School.
  • lta hrefhttp//www.msu.edu/lbs/index.htmlgt
  • Lyman Briggs School
  • lt/agt
  • is a residential science program. lt/pgt
  • What it will look like
  • Welcome to Lyman Briggs School. Lyman Briggs School is a residential science program.
  • 24 Local Hyperlinks
  • If you are linking to a file in your directory, you do not need the entire URL. lta hrefpersonal.htmlgtPersonal Statementlt/agt
  • You may also link to a location within the page (link to a target)
  • Done
  • 25 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 -or- Remote Type in hyperlink must include http// e.g. http//www.harvard.edu 26 Question?
  • How would you make a three column layout in a web page?
  • Talk to your neighbor and figure it out
  • 27 Tables in HTML
  • Tables are incredibly difficult to hand code.
  • Why? Each cell needs a lttdgtlt/tdgt tag, each row needs a lttrgtlt/trgt tag, and the outer table needs a lttablegtlt/tablegt tag.
  • Use Microsoft Word or Netscape Composer to edit tables. I recommend NC.
  • Done
  • 28 Why Tables?
  • CONTROL!
  • Tables allow you to control where items appear on pages.
  • LBS Homepage is all tables (without borders)
  • 29 Inserting Tables in Macromedia DreamWeaver 30 A Word about Frames
  • Frames are also used to control layout
  • Each cell is a separate window
  • Frames are BAD! because they are user-UN-friendly
  • 31 Graphics
  • Question How does a web page include graphics?
  • Are the graphics included in the HTML file or separate files?
  • 32 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
  • 33 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
  • 34 Graphics in HTML
  • ltimg srcURLgt
  • Can include size parameters
  • ltimg srcURL height80 width240gt
  • ltimg srcdru.gif height25 width100gt
  • Note No closing tag!
  • We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks
    SAVE OUR EARTH

    We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

    More details...

    Sign Now!

    We are very appreciated for your Prompt Action!

    x