test | Teach Me Cone

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:

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

Installing Software

Fixed-Width Page (HTML) Lab

Instructions

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

Instructions

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!)
Inside the folder you just made, create two more folders. Name them css, and js
Open Microsoft Visual Studio Code.
Select File > New File. A new tab will appear labeled Untitled-1 or something similar
Select File > Save. In the popup window navigate to the root folder of what will be your site, lastName_site
Enter index.html and press Save
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

Fixed-Width Page (HTML) Lab

Code


<!DOCTYPE html>
<html>


</html>

Instructions

The browser interprets our code. So first we must let it know what version of HTML we are using.
Type <!DOCTYPE html> at the top of the page to assign HTML 5.
Next we must let the browser know when the HTML code starts and ends.
Type <html> on the next line after <!DOCTYPE html> to mark the start of HTML
Type </html> at the bottom of the document to mark the end of HTML
The rest of the code is written between these opening and closing tags (<html>, </html>).

Write the Head

Fixed-Width Page (HTML) Lab

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

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
First type <head> on the line below the opening <html> tag
Type </head> on the line below the opening <head> tag you just wrote
The next steps should be written inside the opening and closing tags, <head> & </head>
Type <title>Biography of Cone </title>. This is the title of the page and will be visible in the tab of the browser window
Type <meta charset="utf-8">. This tells the browser what character set you are using to write your code.
Type <meta name=“description” content=“a narrative about cone” />. This tells the browser what the site is about.
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

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

Type <body> below the closing tag </head>
Below the opening tag <body> write the closing tag </body>
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>
Let's add heading level one. Type <h1>Cone</h1>. The largest most important heading
Under that type <p>The man, the myth, the primitive shape.</p>. Basic paragraph text
Type <h2>In the beginning...</h2> for the second level heading.
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>
We will continue the body on the next slide.

Write the Body (cont)

Write the Body (continued)

Fixed-Width Page (HTML) Lab

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

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>
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
<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
At this point you should have a basic page you can preview.

Preview Your Progress

Fixed-Width Page (HTML) Lab

Instructions

You have written enough now to preview your work in the browser.
First save your file (File > Save)
Navigate to your file on your Desktop. It should appear as a web document. Double-click it to open
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

Fixed-Width Page (HTML) Lab

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

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.
Let's place an <hr /> tag under the first <p> element. This will add a horizontal rule
Create a break (like pressing enter) after each of the remaining <p> elements by typing <br />. This will help separate the sections
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>
<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

Fixed-Width Page (HTML) Lab

Instructions

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
Look for any errors. If there are any, look through your code and fix them. When you are happy, proceed
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
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
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

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:

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

[html]<!-- [et_pb_line_break_holder] --><h2><!-- [et_pb_line_break_holder] -->  thsis s sdifjsoamndf<!-- [et_pb_line_break_holder] -->  </h2><!-- [et_pb_line_break_holder] -->  <pee>fasdlkfjasdlfkja lasdkfjalsdkf  lsadkjf ljkfd ljdfl lasdkj sal adskjf aljf </pee><!-- [et_pb_line_break_holder] -->[html]

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.