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 178lab.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.
Getting style
Inline styling
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.
Internal styling
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.
External Stye
Make you way down to the External Styling section. Now we are going to place the CSS in 178lab.css. You will need to link index.html to 178lab.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 (ZIPed) to moodle.