Your First Web Page:

Now that you know the basics of HTML it is time to write an HTML document and get it up on the web!

index.html

1. In Atom, create a new file and save it in /project-1 as (and only as) index.html.

2. Copy and paste the document structure below directly into your index.html. We will go over this in-depth next topic.

3. Add add one h1 element and one p element. Populate these elements with your name, and the statement “Hello World!”, respectively.

Opening the File in a Browser

Wow, that’s an incredible first page. Time to view it in a browser! You have a few options to open this file:

• Double click the index.html file, as this should open the file in your default web-browser.
• Simply Drag the file to the browser you want it to open in.
• Install the “open-in-browser” package for Atom and then either press cntrl + opt + q (macOS), cntrl + alt + q (PC), or from the command palate type “Open in Browser.”

You should now see your file open in a web browser, looking something like this.

Make Some Changes

Back in your index.html document, add a new line before line 10. There you should add a new paragraph element that includes the following text:

<p>This is my first web page!</p>

Your code should look like the following:

And For Your Assignment…

For your assigment and the completing of My First Web Page!, we want you to add one of your favorties from this list:

• Haiku
• Long Quote (100+ Characters
• Song Lyrics (Bridge or Verse)

Using what you now know about HTML and web pages, try and structure the line breaks of your choice using either <p> and <br /> or <pre> elements. Here’s mine:

See it in action! on my GitHub.io site.

{ TODO: }

Navigate back to your browser and refresh your web page (cmd + r in macOS, cntrl + r in Windows) as you work on your assignment. You should see the updates in your code reflected in the browser.