1 / 18

Review session for Web development

Review session for Web development. Time line of the internet history. When was the ARPANET first demostrated? When did the NFSNet replace it? When did the email(ftp, www…) appear? Exact year not required, but you need to know the era. Basics of Internet. What are domain names?

kerry-johnson
Download Presentation

Review session for Web development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Review session for Web development

  2. Time line of the internet history • When was the ARPANET first demostrated? • When did the NFSNet replace it? • When did the email(ftp, www…) appear? • Exact year not required, but you need to know the era.

  3. Basics of Internet • What are domain names? • www.lib.msu.edu

  4. Domain names • What are first level, second level domain names? • .com .org .edu are top level domains, which specify the category of the domain name user. • Second level domain name gives the entity’s name. This must be unique in the top level domain. • Low level domain gives the server’s name. • What is the difference between a domain name and a URL

  5. Universal Resource Locator: Static http://www.msu.edu/~urquhar5/tour/active.html http:// identifies type of transfer /~urquhar5/tour/active.html File Location on Remote Computer This part is CasE SenSiTiVe. www.msu.edu Domain Name - name of remote computer

  6. Universal Resource Locator: Dynamic http://www.msu.edu/cgi-bin/redirect.cgi?q=LBS&site=Web http:// identifies type of transfer Folder name /cgi-bin/ Server program name: redirect.cgi Argument of the server program: ?q=LBS&site=Web www.msu.edu Domain Name - name of remote computer

  7. Web Page Development Cycle EDIT and SAVE the file in your AFS p:\web\test.html TEST by BROWSING to the page http://www.msu.edu/~msunetid/test.html

  8. HTML File Structure <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

  9. Essential HTML tags • <HTML> </HTML> • <head> </head> • <body> </body> • <p> </p> • <a href=“http://www.msu.edu/”> MSU </a> • <img src=“filename.jpg”> • H1, H2, u, em.

  10. Separation of Content and Presentation • Content • Use tags like <h1>, <h2>, <p>, <em> or <li> to indicate the structure of your pages

  11. Hyperlinks in HTML Code <a href=“URL”>Text for link</a> Tag Attribute: URL Closing Tag Opening Tag Link text href = “Hyper Text Reference ”

  12. Types of link • Absolutelink • <a href=“http://www.msu.edu”> </a> • Relative Link • <a href=“resume.html”> </a> • Email Link • <a href=“mailto:nanzhang@msu.edu”> </a> • Anchor Link • <a href=“#AnchorName”> </a>

  13. Color Control Codes • Computer monitors combine Red, Green and Blue (RGB) in various amounts • Hexadecimal codes tell the computer how much Red, Green and Blue to display • Red:FF0000 • Green: 00FF00 • Blue: 0000FF • Other colors? Combinations! Yellow = FFFF00 • White: FFFFFF • Black: 000000 • Approximately 17 million combinations.

  14. Graphics • Types of graphics that can be insert into HTML • Jpeg • Gif • What are they good for?

  15. Graphics in HTML • First step: Copy the graphics into your web folder, because graphics is NOT embedded in HTML. • <img src=“URL”> • or <img src=“file.name”> • Can include size parameters • <img src=“URL” height=80 width=240> • <img src=“dru.gif” height=25 width=100> • Note: No closing tag!

  16. Additional graphics features • Graphics as link • How?

  17. General steps of web site design • Survey • Who’s my audience • Decide the general style • Organize information • Layout design • Template design • Implementation • Generating content page from template. • Testing the web site • Publishing

  18. Layout design • Two methods • Using table • Using layout view to draw layout cells. • Dreamweaver automatically translate the layout table and cell to standard tables.

More Related