Select Page
Lab Introduction
Fixed-Width Page (HTML) Lab
Introduction

This is the first lab in the Fixed-Width Page series. This slideshow will guide you in producing a very basic HTML document. Simply follow the directions on each page and once completed you will submit for a grade. You should follow the directions exactly but exploration and creativity is highly encouraged. Don't be afraid to make it your own.

If you run into any issues please do not hesitate to contact me:

  1. jcone@cecil.edu
  2. (240) 466-1996
  3. messenger pigeon (his name is Tom)
Installing Software
Installing Software
Fixed-Width Page (HTML) Lab
PlayPlay
Instructions
  1. Open a new tab and visit visual studio code site (
Hint:

This slideshow is meant to be displayed on half your screen. You should put this on the left or right and put your work on the opposite side.

Files and Folders Setup
File and Folder Setup
Fixed-Width Page (HTML) Lab
PlayPlay
Instructions
  1. Create a folder on your desktop (or wherever you keep your homework files) called lastName_site (your last actual name, not literally "lastname". Come on guys!)
  2. Inside the folder you just made, create two more folders. Name them css, and js
  3. Open Microsoft Visual Studio Code.
  4. Select File > New File. A new tab will appear labeled Untitled-1 or something similar
  5. Select File > Save. In the popup window navigate to the root folder of what will be your site, lastName_site
  6. Enter index.html and press Save
  7. You now have an empty webpage we can start coding in!
Structure

Your file/folder structure should appear as above. There should be a root folder named lastName_site. Inside that folder should contain two folders, css & js, and a file named index.html

HTML Document Setup
HTML Document Setup
Fixed-Width Page (HTML) Lab
PlayPlay
Code

<!DOCTYPE html>
<html>


</html>
Instructions
  1. The browser interprets our code. So first we must let it know what version of HTML we are using.
  2. Type <!DOCTYPE html> at the top of the page to assign HTML 5.
  3. Next we must let the browser know when the HTML code starts and ends.
  4. Type <html> on the next line after <!DOCTYPE html> to mark the start of HTML
  5. Type </html> at the bottom of the document to mark the end of HTML
  6. The rest of the code is written between these opening and closing tags (<html>, </html>).
Write the Head
Write the Head
Fixed-Width Page (HTML) Lab
PlayPlay
Code

<!DOCTYPE html>
<html>
<head>
   <title>Biography of Cone</title>
   <meta charset="UTF-8">
   <meta name=“description” content=“a narrative about cone” />
</head>


</html>
Instructions
  1. The HTML document is broadly broken down into two sections, the head and body. The head is not generally visible in the browser window but tells the browser information about the page and how it should appear
  2. First type <head> on the line below the opening <html> tag
  3. Type </head> on the line below the opening <head> tag you just wrote
  4. The next steps should be written inside the opening and closing tags, <head> & </head>
  5. Type <title>Biography of Cone </title>. This is the title of the page and will be visible in the tab of the browser window
  6. Type <meta charset="utf-8">. This tells the browser what character set you are using to write your code.
  7. Type <meta name=“description” content=“a narrative about cone” />. This tells the browser what the site is about.
  8. There are other <meta /> that may be entered but they are not yet necessary.
Write the Body
Write Up the Body
Fixed-Width Page (HTML) Lab
PlayPlay
Code

<!DOCYTPE html>
<html>
<head>
    <title>Cone's Biography</title>
    <meta charset="utf-8" />
    <meta name="description" content="Biography of Cone" />
</head>
<body>
    <h1>Cone</h1>
    <p>The man, the myth, the primitive shape.</p>
    <h2>In the beginning...</h2>
    <p>He was born in upstate NY. Have you been there? No you haven't because you have no reason too. It's drab.</p>
   

</body>
</html>
Instructions
  1. Type <body> below the closing tag </head>
  2. Below the opening tag <body> write the closing tag </body>
  3. The body contains all of the content actually visible in the browser window. The remaining steps should be written inside the opening and closing tags, <body> & </body>
  4. Let's add heading level one. Type <h1>Cone</h1>. The largest most important heading
  5. Under that type <p>The man, the myth, the primitive shape.</p>. Basic paragraph text
  6. Type <h2>In the beginning...</h2> for the second level heading.
  7. Next type <p>He was born in upstate NY. Have you been there? No you haven't because you have no reason too. It's drab.</p>
  8. We will continue the body on the next slide.
Write the Body (cont)
Write the Body (continued)
Fixed-Width Page (HTML) Lab
PlayPlay
Code

<!DOCYTPE html>
<html>
<head>
    <title>Cone's Biography</title>
    <meta charset="utf-8" />
    <meta name="description" content="Biography of Cone" />
</head>
<body>
    <h1>Cone</h1>
    <p>The man, the myth, the primitive shape.</p>
    <h2>In the beginning...</h2>
    <p>He was born in upstate NY. Have you been there? No you haven't because you have no reason too. It's drab.</p>
    <h2>Presently coding this document</h2>
    <p>Write now he is teaching this class and writing this code. Insprational.</p>
    <h2>His Future</h2>
    <p>He wants to make the best courses ever, create more short films, and be more fit. But really...</p>
    <h4>He has none.</h4>
    <h3>Things he dislikes</h3>
    <ul>
        <li>Cats</li>
        <li>Vehicles that go Vroom</li>
        <li>Bug Meat</li>
    </ul>
</body>
</html>
Instructions
  1. After the last text you wrote, write:
    <h2>Presently coding this document</h2>
    <p>Write now he is teaching this class and writing this code. Insprational.</p>
    <h2>His Future</h2>
    <p>He wants to make the best courses ever, create more short films, and be more fit. But really...</p>
    <h4>He has none.</h4>
    <h3>Things he dislikes</h3>
  2. That is a good amount but let's add a list. Type <ul> as the opening tag of an unordered list. Add </ul> to close the list
  3. <li> is used for the opening and </li> for the closing of each list item. Type:
    <li>Cats</li>
    <li>Vehicles that go Vroom</li>
    <li>Bug Meat</li>
    inbetween the <ul> & </ul> tags
  4. At this point you should have a basic page you can preview.
Preview Your Progress
Preview Your Progress
Fixed-Width Page (HTML) Lab
PlayPlay
Instructions
  1. You have written enough now to preview your work in the browser.
  2. First save your file (File > Save)
  3. Navigate to your file on your Desktop. It should appear as a web document. Double-click it to open
  4. High five yourself!
Code

<!DOCYTPE html>
<html>
<head>
    <title>Cone's Biography</title>
    <meta charset="utf-8" />
    <meta name="description" content="Biography of Cone" />
</head>
<body>
    <h1>Cone</h1>
    <p>The man, the myth, the primitive shape.</p>
    <h2>In the beginning...</h2>
    <p>He was born in upstate NY. Have you been there? No you haven't because you have no reason too. It's drab.</p>
    <h2>Presently coding this document</h2>
    <p>Write now he is teaching this class and writing this code. Insprational.</p>
    <h2>His Future</h2>
    <p>He wants to make the best courses ever, create more short films, and be more fit. But really...</p>
    <h4>He has none.</h4>
    <h3>Things he dislikes</h3>
    <ul>
        <li>Cats</li>
        <li>Vehicles that go Vroom</li>
        <li>Bug Meat</li>
    </ul>
</body>
</html>
Browser

Cone's Biography
Cone

The man, the myth, the primitive shape.

In the beginning...

He was born in upstate NY. Have you been there? No you haven't because you have no reason too. It's drab.

Presently coding this document

Write now he is teaching this class and writing this code. Insprational.

His Future

He wants to make the best courses ever, create more short films, and be more fit. But really...

He has none.
Things he dislikes

Cats
Vehicles that go Vroom
Bug Meat

Apply Format & Semantic Tags
Apply Format & Semantic Tags
Fixed-Width Page (HTML) Lab
PlayPlay
Code

<!DOCYTPE html>
<html>
<head>
    <title>Cone's Biography</title>
    <meta charset="utf-8" />
    <meta name="description" content="Biography of Cone" />
</head>
<body>
    <h1>Cone</h1>
    <p>The man, the myth, the <strong>primitive shape</strong>.</p>
    <hr />
    <h2>In the beginning...</h2>
    <p>He was born in upstate NY. Have you been there? No you haven't because you have no reason too. It's drab.</p>
    <br />
    <h2>Presently coding this document</h2>
    <p>Write now he is teaching this class and writing this code. Insprational.</p>
    <br />
    <h2>His Future</h2>
    <p>He wants to make the <em>best courses</em> ever, create more <em>short films</em>, and be <em>more fit</em>. But really...</p>
    <h4>He has <strong>none</strong>.</h4>
    <br />
    <h3>Things he dislikes</h3>
    <ul>
        <li>Cats</li>
        <li>Vehicles that go Vroom</li>
        <li>Bug Meat</li>
    </ul>
</body>
</html>
Instructions
  1. The main content of the site is produced but it could use some more format and semantic meaning applied. This will make it look a little nicer.
  2. Let's place an <hr /> tag under the first <p> element. This will add a horizontal rule
  3. Create a break (like pressing enter) after each of the remaining <p> elements by typing <br />. This will help separate the sections
  4. To give the appearance of more importance and make the text bold we use <strong>. Wrap the text, primitive shape and none. It should look like this:
    <strong>primitive shape</strong>
    <strong>none</strong>
  5. <em> is used to emphasize text. Wrap the text, best courses, short films, more fit. It should look like this:
    <em>best courses</em>
    <em>short films</em>
    <em>more fit</em>
Final Review and Submission
Final Review and Submission
Fixed-Width Page (HTML) Lab
PlayPlay
Instructions
  1. Before you submit you should review your code and Save your file (File > Save), navigate to your file on your Desktop, and double-click it to open
  2. Look for any errors. If there are any, look through your code and fix them. When you are happy, proceed
  3. Your site is not just the single HTML document you have created but the root folder and all contents therein. You MUST submit the ENTIRE folder
  4. You cannot submit folders on Blackboard. Instead we can zip the folder and submit that. Navigate to the location of your site folder. Right-click over top of it and select Send to > Compressed (zipped) folder on Windows and Compress on MacOS. A new zipped file will be created
  5. Lastly, log into Blackboard (Here) and click on this course. Inside the course, select Week 01, then the Week 01: Fixed-Width Page (HTML) Lab folder, then the assignment with the same name. Finally, Attach the zipped file.
Code

<!DOCYTPE html>
<html>
<head>
    <title>Cone's Biography</title>
    <meta charset="utf-8" />
    <meta name="description" content="Biography of Cone" />
</head>
<body>
    <h1>Cone</h1>
    <p>The man, the myth, the primitive shape.</p>
    <h2>In the beginning...</h2>
    <p>He was born in upstate NY. Have you been there? No you haven't because you have no reason too. It's drab.</p>
    <h2>Presently coding this document</h2>
    <p>Write now he is teaching this class and writing this code. Insprational.</p>
    <h2>His Future</h2>
    <p>He wants to make the best courses ever, create more short films, and be more fit. But really...</p>
    <h4>He has none.</h4>
    <h3>Things he dislikes</h3>
    <ul>
        <li>Cats</li>
        <li>Vehicles that go Vroom</li>
        <li>Bug Meat</li>
    </ul>
</body>
</html>
Browser

Cone's Biography
Cone

The man, the myth, the primitive shape.

In the beginning...

He was born in upstate NY. Have you been there? No you haven't because you have no reason too. It's drab.

Presently coding this document

Write now he is teaching this class and writing this code. Insprational.

His Future

He wants to make the best courses ever, create more short films, and be more fit. But really...

He has none.

Things he dislikes

Cats
Vehicles that go Vroom
Bug Meat

Lab Synopsis
Lab Synopsis
PlayPlay
Reflection

You have created your very first web site. It's not very exciting quite yet but we will build on this in the next lab. Good job!

If you run into any issues please do not hesitate to contact me:

  1. jcone@cecil.edu
  2. (240) 466-1996
  3. messenger pigeon (his name is Tom)