Assignment 1 — Introduction to HTML

Description:

This assignment familiarizes with using a text editor to create the basic required structure of a web page, how to add content to the web page, and add some basic style to update the appearance of the web page.

When a browser displays a web page, it is interpreting two types of languages, HTML and CSS.

  • HTML (HyperText Markup Language) provides the structure to a web page, such as what is a heading, what is a paragraph, what is a list, and so on.
  • CSS (Cascading  Style Sheet) describes how something should be formatted, such as the font size, the spacing between text, the size of margins, and so on.

HTML

You structure the content of a web page using elements. Elements consist of a beginning tag , some content, and then an ending tag:

<tagName>content</tagName>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>

Notice that the name of the ending tag begins with a / symbol.

The minimum elements needed to construct your web page is as follows:

<html>
  <head>
     <meta charset="UTF-8">                  
     <title>My web page</title>
  </head>
  <body>
     Your content goes here.
  </body>
<html>

All content is contained within the <html> element. The <head> element of an HTML file contains the <meta> element that provides some information about the web page itself and the <title> element that provides the title of the web page that appears in the browser. The content of your web page is included within the <body> element.

CSS

You can use CSS properties to specify how your web page should look. For example, you can set the background color, margins, borders, and font information through the use of CSS properties. CSS can be defined within the <head> element of your HTML file:

 <head>
     <meta charset="UTF-8"> 
     <title>My web page</title>
     <style type="text/css">
       body {
            background-color: "blue";
            font-family: sans-serif;
            margin-left: 20px;
       }     
</head>

Subsequent assignments will provide additional information about how and where to define CSS properties.

For more information about HTML and CSS, see Chapter 1 of the Head First HTML and CSS book.

HTML elements:

<html> <body> <h1>
<head> <h2> <img>
<title> <p> <style>
Videos for the assignment:

Tasks:
  1. Attend the orientation meeting or watch the video.
  2. In Blackboard, write a post in the Discussion group to introduce yourself. Describe any experience that you currently have with HTML.
  3. Read and complete the exercises in Chapter 1 of the Head First HTML and CSS book.
  4. Create a folder named Chapter1.
  5. In the Chapter1 folder, create your own version of the following files:
    • index.html
    • mission.html
  6. Zip your Chapter1 folder and name the file yourName_chapter1.zip.
  7. Submit the zipped file through the Assignments section in Blackboard.
Grading criteria:

You assignment should demonstrate:

  • Creating two separate HTML files.
  • Revising the content (text) in the HTML to be your own content, instead of that provided by the book.
  • Using <h1> and <h2> tags to create headings.
  • Using <p> tags to include content.
  • Adding a border to the content on both pages.
  • Adding a page color background to both pages.
  • Including margins on both pages.
Due: By 10/2

Example assignment:

Chapter 1 - index.html

Chapter 1 - mission.html