ART 320 Web Design

Exercise 00: A Simple Web Page

Overview

This ungraded exercise will use some common HTML and CSS elements to create a simple web page.

If you are using your own personal computer, please download and install Visual Studio Code (unless you already have a code editor that you’d prefer.)

WWW Background

  • The World Wide Web was invented by Tim Berners-Lee in 1989 as a method of transmitting formatted text and images over a global network of computers.
  • It’s publishing language, Hypertext Markup Language (HTML) was described by Berners-Lee in 1991.
  • Users of computers on the Internet known as Clients, request Web pages from other computers designated as Servers. The Server sends the HTML page (structure) along with a CSS document (style) and any embedded images and media files to the Client.
  • The client’s Web Browser renders the HTML data and embedded media into a visual display formatted according to the data in the CSS file.

HTML

HTML is plain text surrounded by tags (markup) which define the structured content of a page. Tags define give structure of the content of a page. Importantly, the anchor tag <a> allows some content to be clickable to link to other content (hypertext).

Structure & Content

The structure of a document can be described by how a page is built. Think of a term paper — there might be a main Heading, a table of contents, subheadings, and a number of paragraphs.

Content can be text, images, video or interactive media.

Tags

Watch “Don’t Fear HTML—HTML” about understanding tags.

Most elements begin with an opening tag, like <p> preceding some content, and then ends with a closing tag, </p>.

A few elements are self-closing and are not wrapped around content. They are called empty elements and written differently:

  • <img /> image
  • <hr /> horizontal rule
  • <br /> line break

Structure – Not Style

Even though each browser has a default way of rendering the look of a tag <h1> heads are the largest and boldest, <h2>is smaller, and so on) HTML tags must not be used to define the look of content (style.) Instead, tags should logically define the structure of a page, representing the relative importance and structural aspects of each chunk of information being presented: <h1> elements are the most important, <h2> elements are secondarily important, and so on. This is crucial for accessibility — allowing a screen reader to assist a blind person’s understanding of the information.

Required HTML Page Elements

Every HTML page must be minimally structured with these required elements:

<!DOCTYPE html>
<html>
     <head>
     </head>
     <body>
     </body>
</html>

The first line must begin with <!DOCTYPE>. This is not an HTML element, but it tells the browser what language it’s about to read. We use <!DOCTYPE html> for HTML5.

  • The data within the <html> tags makeup the HTML document.
  • The data within the <head> tags contain information (metadata) about the page that will not be visible in the browser window.
  • The data within the <body> tags contain the content that will be visible in the browser window.

Common HTML Elements

HTML provides the content, which is given structure by the use of markup tags. Tags almost always have an opening and a closing component.

  • <html>…</html> encapsulates the entire page
  • <head>…</head> contains metadata, or information about the page
  • <body>…</body> contains all content which will be visible to the user in the browser
  • <p>….</p> — Creates a paragraph
  • <br /> — Adds a line break (self- closing, no closing tag needed)
  • <hr /> — Separates sections with a horizontal rule (self- closing)
  • <h1>…</h1> — Displays a heading (h1–h6)
  • <! -- … --> — Inserts a comment (readable by humans, not by browsers, to explain code)
  • <ol>…</ol> — Creates an ordered list
  • <ul>…‹/ul> — Creates an unordered list
  • <li>…</li> — A list item with an ol or ul
  • <img /> — Inserts an image into the document (self- closing)
  • <a>…</a> — Inserts a link into the document

Common CSS Elements

CSS gives style (visual attributes, position on the page) to the html content and structure.

  • margin — Defines space between element border and parent
  • padding — Defines space between content and its border
  • border — Surrounds a content box with a solid or dashed line
  • height — the height of an elements box
  • width — the width of an elements box
  • color — foreground or type color
  • background-color — the color of a box/container’s background
  • background-image — affixes an images to the background of a box
  • font-family — typeface name
  • font-size — specified in ems or percent
  • font-style — sets italic
  • font-weight — sets bold
  • text-align — left, right, center, justified
  • text-decoration — sets underline, overtone, strikethrough and blink

Let’s Write Code — HTML

  1. Open Visual Studio Code and create a File>New File. Name it index.html and Save it to a folder on your desktop titled “Ex00”.
  2. Add the HTML declaration to the top of the page: <!DOCTYPE html>
  3. Type an opening and closing <html> tag.
  4. Between the <html> tags, create an opening and closing <head> element, and also a <body> element.
  5. In the <head> section, type the following:
    <title>My First Website</title>
  6. In the <body> section, create an <h1> heading, something like “My ART 320 Website”.
  7. Create a <p> paragraph. Type whatever you’d like. (Hint: type “Lorem” and hit return.) Be sure to use a closing tag.
  8. Add a second <p> element.
  9. Create an unordered list <ul> and populate it with a number of list items <li>.
  10. Type shift-option(alt)-F to Format (auto-indent) the lines of code.
  11. Examine your work by Double-clicking the index.html file in your Ex00 folder. It will open in your default browser.
  12. Change the unordered list to an ordered list <ol> and see what happens.
  13. Create a hyperlink. Type the following:
    <a href=”https://unsplash.com/s/photos/cats”>Have some cats!</a>
  14. Add a rule at the bottom of your content:
    <hr />
  15. Add the following to the head section, to connect your html to a new CSS style sheet:
    <link href="style.css" rel="stylesheet">

Create CSS Styles

  1. In VS Code, create a new file title style.css and save it to your Ex00 folder.
  2. Type the following;
    body {
    background-color: aqua;
    margin: 50px 50px 50px 50px;
    }
  3. View index.html in your browser to see the change.
  4. Add style for your paragraphs:
    p {
    width: 400px;
    margin: 20px 0;
    }
  5. Remove the underline from your link, and change the color:
    a {
    color: #f1991e;
    text-decoration: none;
    }
  6. Bonus: Style the hr rule to match the width and margin of your paragraphs.