Work Site for Art 354 - Web Design

Suzveen Mazouri

Step 4

HTML Basics

HTML Sandwich

HTML is linear - It goes from top to bottom

Tags

It is constructed via a set of tags. Tags are used to delimit the start and end of elements in the markup. These can reference structure, or elements such as type.

<header1> HEADER </header1>

<header2> HEADER2 </header2>

<body> BODY </body>

<footer> FOOTER </footer>

Some HTML History

  • 1989: Tim Burners-Lee invented the World Wide Web to share text information. He originally called links "anchors", which is why we use <a> to represent links
  • href = Hyper Reference
  • Media screens allow sites to transform for mobile
  • States = Hover/Click
  • Divs = Divisions/Boxes <div>

The HTML Sandwich Structure

  1. Flag in top of sandwich; begins with Doctype HTML <!doctype html>
  2. Head portion / Meta data <head></head>. This is known as metadata.
  3. Top bun of sandwich; begins with <html>
  4. Fillings of sandwich; Body, which is what is visible on the page <body></body>
  5. Bottom bun of sandwich; ends with </html>

Creating Links

  • Highlight word or image
  • Click on drag-down menu Insert and choose hyperlink
  • Confirm the correct text or image is chosen in first line
  • For an internal link (your own site) : in second line click on the folder icon and pick another html page
  • For an external link : in the second line paste the complete URL of the site or page you want the link to lead to
  • If you want the link to open a new page (rather than replace the current page) choose "_blank" in line three Target
  • To help with accessibility, fill in the Title to explain the link
  • You could also add type the code directly. An example includes:
    • <p><a href="http://svsu.edu/">Learn about SVSU</a></p>