first.html

Our Environment To get started in this class you need three items.

You need to have downloaded VSCode. A link is provided on the current classes page.
You need Google Chrome
You need Firefox

Making and Viewing PagesFor now, we will deal in mechanics. First, get your file system ready.Do not store files in VSCode's subtree.This is a very bad idea. You can lose data if you update VSCode.

You should have a place on your computer where you store your school work, as indicated in my stern lecture on your file system. Make a folder in it calledwebdev. Go inside of this folder and make a folders calledHTMLandCSS.

Now launch VSCode. You will see this.

Now select Save from the menu or hit command-s (mac) or control-s (windoze) and save this file asfirst.htmlinto your HTML folder.

Now you are ready to type. Put this in your file.

<!doctype html>

This says, "this is an HTML5 file" to the browser.

Now enter this.

<!doctype html>
<html lang="en">
    <head>
    </head>
    <body>
    </body>
</html>

Next add these goodies.


<!doctype html>
<html lang="en">
    <head>
        <title>My First Page</title>
    </head>
    <body>
        <h1>My First Page</h1>
    </body>
</html>

Once you do this, save agin. Here is what my file looks like on my local machine. You can see the contents of my 402 folder on the left. You can click on any file on the left to see it. Right now there is just one file in the folder.

VSCode Window

How do I see this masterpiece?Start Firefox or Chrome. Then from the File menu selectOpen...You can also hit command-o (mac) or control-o (windoze).

Chrome rendering first.html

Now you know the setup. Open files with VSCode to edit and open the same file with the browser to view it. If you add to the file, you save it, then hit the refresh button on the browser to see the changes.

What is the meaning of this?

Things that look like this <foo> are called opening tags. They start a rectangluar region on a document called an element. Things that looks like this</foo>are called closing tags. They end an element

Pod Activity

Now it's time to get your hands dirty. Go to theTag Reference PageYOu are going to lern about some tags and then put them into this page first.html.

Scroll down to the paragrah tag <p>. Click on the link there.
There is a big green "Try it Yourself >>" button near the top of the page. Click on it.
Add a paragraph or two, then click Run to see your result.
What if you put all of the code on one giant line?
When you are done, dismiss the tab.
Now add a paragraph or two tofirst.htmland view the result.

Cap'n we're listing!

Scroll down to the ordered list tag <ol>. Click on the link there.
This tag makes an ordered list. Hit Try it Yourself and see how it works. Then add an ordered list tofirst.html
Scroll down to the unordered list tag <ul>. Click on the link there.
This tag makes an unordered list. Hit Try it Yourself and see how it works. Then add an unordered list tofirst.html

Ripped from the headlines!

Scroll down to the headline tags<h1>-<h6>. Click on the link there.
These tags make headlines. Try them in the try-it editor
Then add them tofirst.html

Your image is a disgrace!Want an image? Here's how.

Scroll down to the <img> tag. Click on the link there.
In the try-it editor, get rid of the height="42" and change the width to 10%.
Now change the source of the image from smiley.gif to https://faculty.ncssm.edu/~morrison/rhino.gif
Now dismiss the tab.
Grab in image off of a webpage. To do this, just right click and choose Save Image As. Save it to the same folder asfirst.htmlNow make it appear on your page.

Making a linkGo to the <a> tag and see how to make a link. Add one on your first.html page. Submit this on Canvas. Make sure your page has all the requested elements. The name of the file should be first.html