Brackets startup
After starting Brackets create a new folder on your desktop (or in your public_html directory) using the File ⇒ Open Folder... menu choices. The new files you add will appear in this folder.
Starting the first page
Within your new directory create two new files using File ⇒ New. Use File ⇒ Save As... to call one file index.html. This is where your HTML will go. Name the other file something like 107lab.css. This is where your CSS will go.
We’re going to use w3schools.com pages a lot in this lab. Start by looking at the HTML5 Introduction page and copy the “HTML5 Example” (near the top of the page) into your index.html file. Be careful to copy to the HTML file, not the CSS file.
Press the thunderbolt Live Preview in the top-right corner. If you don’t get a simple page display, get some help.
HTML with no style
At this point, review HTML Basic Examples and add some headers and a couple of paragraphs which a sentence or two. Add a link to some page. If all else fails, link to the UNC Asheville home page or the home page of your favorite bluegrass band. How about also adding a link to this page!
Add some pictures!
Go into Wikimedia
Commons and find some pictures from your hometown. I’m going for
this image of Waynesville.
Going HTML5
Now take a look at the HTML5 Semantic Elements page of W3Schools or, better yet, the second chapter of your textbook.
Make an effort to use some of these semantic elements.
At a minimum come up with reasonable uses for the
<header> and
<article> elements.
If all else fails, you can view the source of this page for some idea of what a very simple HTML5 page might look like.
Getting style
The bad way
Take a look at the HTML Styles page. It shows you the bad way to get style. (OK. That was a bit strong.) Use one of these style attributes to change the background color of one of your headers.
The tolerable way
Go to the HTML Style — CSS page. Near the beginning of that page, you can read about Internal Styling. Place some internal CSS in your index.html to change the color of a text within your footer.
While it is best to save your CSS in external files, this is not a bad way to do some specialized styling that you think will only be needed in one page.
The good way
Make you way down to the External Styling section. Now we are going to place the CSS in 107lab.css. You will need to link index.html to 107lab.css, so place the following line in the <head> section of your index.html.
Make use of some of the suggestions of the HTML Style — CSS page to modify your page. Be outlandish.
Try to use at least one class and one id attribute.
You’ll need to master these before trying out JavaScript.
Finishing up
Upload your files to moodle.