1 / 11

CS110: Computers and the Internet

CS110: Computers and the Internet. Strict HTML, URLs, and well designed websites. Writing Strict HTML 4.0. An HTML document is composed out of elements that begin and end with tags: < start tag> contents </end tag> Some HTML tags that you have seen: Structural tags Header tags

gene
Download Presentation

CS110: Computers and the Internet

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. CS110: Computers and the Internet Strict HTML, URLs, and well designed websites

  2. Writing Strict HTML 4.0 • An HTML document is composed out of elements that begin and end with tags: • <start tag> contents </end tag> • Some HTML tags that you have seen: • Structural tags • Header tags • Text tags • List tags • Other tags • Comments <!-- I can say anything I want in a comment. -->

  3. Writing Strict HTML 4.0 • Some tags have attributes: • <a href="http://www.yahoo.com">Yahoo!</a> • <imgsrc = "small_weasel.jpg" alt = "a small weasel”> • <tag attr1 = "value1" attr2 = "value2" ... attrN = "valueN"> contents</tag> • Start each page with a DOCTYPE, following by the <html> element • Only <head> and <body an go directly inside your <html> element • Always give your <head> element a <title> element • You can put only block elements inside your <body> elements • You can only put inline elements inside other inline elements • Keep block elements out of your <p> elements • Only <li> elements inside <ol> or <ul> elements • <blockquote> requires one or more block elements inside it

  4. More on <img> <imgsrc=“Eiffel.jpg” alt=“The Eiffel Tower” title=“The Eiffel Tower” width=“width go here” height=“height goes here”> <imgsrc=“Eiffel.jpg” alt=“The Eiffel Tower” title=“The Eiffel Tower” width=“320” height=“240”> Always specify width or height but not both URL Original picture is 160x240. What is the Aspect Ratio?

  5. URLs Absolute URL:

  6. Tree Structured Directory

  7. Tree Structured Directory File in the same folder: link in buffy.html to the file willow.html File in sibling folder: link in mythology.html to the file angel.html File in a folder “above”: link in host.html to the file season3.html File in a folder that’s multiple levels up: link in buffy.html to comics.html

  8. Putting it all together… 1) Add a link in comics.html to the file gunn.html 2) Add a link in host.htmlto the file buffy.html

  9. Fragments • Navigation menu • 2 steps: • Give the destination a name:<h2 id=“relative”>Relative URLs</h2> • Add a destination name to the link: • In the same file, just use the id name: <a href=“#relative”>Relative URLs</a>

  10. Debugging HTML

  11. Well-Designed Websites • What makes a website well-designed?

More Related