Easy HTML/CSS Example
This lesson builds on the in-person class you attended on November 19 at the Coloft Academy. A live code version of this example can be found at http://brykoch.com/example/. Remember: you can view the source of this live code version to see the HTML, and find the CSS file through the link in the <head>. Please reach out to me at firstname.lastname@example.org with any questions you may have, and I’ll answer as quickly as possible. Let’s jump right in and reinforce the ton o’ info we learned yesterday…
When this lesson is complete, this is what you will have built:
Here is all the HTML we will use to build our example (we’ll break it down piece by piece in just a little bit):
All HTML5 documents will start with at least these lines of code:
The !DOCTYPE on line 1 declares this file as HTML5, and ensure all browsers—old and new—read this file as and closes on line 14 (Note: the <html> and <body> tags also open and close). For the most part, the average user will never see code in the <head>:
HTML. We declare this document to be in English in line 2 on the <html> element. The <head> opens on line 3 The <head> tells the browser what the <body> content should do (just like our heads tells our bodies what to do). • Line 4 tells the browser to use utf-8 encoding which is the perfect character set for the English language. • Line 6 and 7 define the <title> tag and <meta> description.
• <title> plays a major role in SEO. This displays in the browser tab when a user visits your site. It also shows on search engine results page (SERP) as the result title. • <meta name=”description”> show on the SERP below the title and url for your webpage result. It does not effect search engine ranking, but may influence who clicks your link since the term a user searches will appear bold if it’s contained in your meta description.
• Our CSS stylesheet is linked in Line 9 ensuring our CSS styles will apply to our webpage. • A conditional script is loaded in on Lines 10–12. This will allow Internet Explorer 6–8 to properly read HTML5 elements. The conditional comment <!-- [if lt IE 9]> ensures only IE loads these lines.
Starting the <body>
Let’s begin the building out the visible parts of our page. Everything contained in <body> will influence how your webpage renders in a browser.
Start by adding an HTML5 tags for <header> and <footer>. Now id these elements “top” and “bottom” <header> and <footer> tags in our code.
respectively, so we can style this particular <header> and <footer> uniquely without affecting the other Ids are referenced in html/css with a #. There can only be one id name per webpage, so…that means there is only one <header id=”top”> and only one <footer id=”bottom”>. Also, because these are now unique elements, to the top of our webpage. we can use an anchor link to zoom directly to that part of the page. For example, <a href=”#top”> will zoom us
Finally, let’s open and close <div id=”content”></div>. There is no HTML5 element for “content” so we created our own using the <div> element with a unique id.
The Header — header#top
Typically, the header#top is used throughout the entire website—in the same place with the same elements. Our website includes a logo and primary navigation:
Our company logo is an image tag which is a self-completing tag so you only need to write <img>. It is important that we tie some attributes to our <img> tag to help search engines and browsers: important for SEO. • The link to our image is contained in src. This can be an absolute or relative path to the image file (http://website.com/images/image-file.jpg or /images/image-file.jpg). • Defining a width and height helps the browser save space and load the image file faster. Wrapping the <img> tag with a link element allows it to be used as navigation back to our Home page. See how the <img> is nested inside the <a> on lines 20–22? Note how each <li> has a unique class. Next, place the primary navigation using the HTML5 <nav> tag, and use an unordered list to arrange the links. Classes and ids can be named almost anything. However, they should always be lowercase and use hyphens for spaces (so there are no spaces in the class name). Classes are referenced in CSS with a period (ex. .about or .portfolio). Unlike ids, classes can not be used for anchor links. Also, classes can be used multiple times on a single webpage, and a single element can have multiple classes at once—just separate each class with a space like so <li class=”about active”>. No element can have more than one id. • Search engines do not immediately read images. They “see” the alt tag first which makes it extremely
The Footer — footer#bottom
Let’s place a simple navigation in the webpage’s <footer>. What’s different about this navigation than the one we just created in the <header>?
“only navigation links critical to a great user experience on your website.” Most often, <footer> navigation are links to legal information or back-burner content that isn’t imperative for a user to gain trust and have a good time on your website on a daily basis. This is why we are using <div class=”nav”> to contain—and soon style—our footer#bottom navigation.
HTML5 lays out standards for all its elements. <nav> should only be used for primary navigation—that is to say
The Content — #content
We’re almost ready to preview our unstyled webpage. However, let’s code up the content before we take a peek.
There are six HTML headline elements which are deemed more important than regular text: h1–h6. <h1> is the search engines know “this is what this page is about.” As you can see on line 39, we’ve added <h1>Easy HTML/ CSS Example</h1> which is also the <title> tag of our webpage.
most important and, by default, the largest font size. There should only be one <h1> element per webpage to let
After our headline, let’s add an intro paragraph by using a basic <p> tag and classing it “intro.” This will allow us to uniquely style p.intro without affecting other paragraph tags on our site. Now, let’s practice coding another unordered list to combine several skills we’ve learned up to know. See lines open the links in a new browser tab when clicked. (Remember to open and close your <li> and <a>!) 43–49 in the HTML above. Note the absolute links to outside websites, and how we’ve used target=”_blank” to
The official HTML5 specification won’t be finalized until some time in 2014. However, you can be <article> will play an important in search engine rankings and content syndication when the spec is done. Let’s build one out to discuss how <article> works.
First, let’s create <div class=”article-excerpts”>. This will contain our articles and help easily create some separation from our intro text and list. It’s important to note that HTML5 has a <section> element we could use here since all our articles link into one section of our website. However, since we’re only creating one webpage today, we’re going to keep try to the HTML5 spec and <div> to create a design division instead of denoting a continued section of similar content. Time to build the <article>. Our excerpts will contain a headline, byline, publication date, a short blurb, and some meta information related to the post such as category links and a tease to comment. Group the headline, byline and publication date with a <header> to any search-engine bot reading our site that “if you read this <header>, you will know what this article is about.” If we were only presenting a headline, we <article>. would not use the <header> element since it would be obvious that the <h3> was the most important part of the
Next, we dump in our lil’ text blurb. And, lastly, we contain the remaining meta info in a <footer>. Again, if we only had one short line of meta data, we could exclude the <footer> element (no need to write extra code if it’s not really containing anything, right?).
Copy the full <article> just created, and paste it two times so you have a total of three articles on the webpage. Feel free to change up the copy a bit, so you can tell the three articles apart.
Lastly, find <div class=”article-excerpts”> and add the “clearfix” class as seen on line 51 above. This will helps us when we more onto CSS next.
NOW, the moment you’ve been waiting for… Let’s check out our webpage!
Okay, this unstyled page may be a little anticlimactic, but… This is what Google, search bots and screen readers see when they view your website. If you—a human—think the page looks clean, organized and easy to read, chances are the bots will think so, too.
The CSS Styling
Alright, enough with the search engines and bots. Let’s make this page pleasing to the human eye! It all starts with the CSS Reset…
Unfortunately, all browsers treat webpages slightly differently. Most of the issues revolved around fonts, but there’s also a fundamental difference in translating basic HTML. Fortunately, using a CSS Reset strips the default styles browsers automatically apply, and gives us a clean slate to build upon. Here’s the effect of the basic CSS Reset:
What do you notice? Well… probably that it’s even more milquetoast than before: all the text is the same size; there are no bullet points; there’s no space between anything… Links has a little color, but that’s it. Seems like time for an upgrade!
CSS Reset Plus
By adding in a extra definitions, we can improve upon the basic CSS Reset:
Here are the results of our CSS Reset Plus which include typographic styles and link colors—similar to pre-Reset conditions, but now with all browser agreeing to the look:
The Example Styles
Alrighty. Let’s polish this site off… but first a refresher of previously mentioned things: CSS targets specific HTML elements, ids (#idname), and classes (.classname) to enhance their look. Just like HTML, CSS has set attributes— or properties—that help define style. From now on, I’m going to talk (i.e. write) less. Your savvy enough with HTML at this stage—and have plenty of images (and you’re own hand written code, right?) to refer to now. Also, I’ve left a healthy amount of comments in the CSS we’re writing. Let’s see how you fare in deciphering the code below. Just like we did with the HTML, we’ll move section by section as we program the CSS. First is the CSS code; next is the results of your work. First, the general <body>, <header id=”top”> and <footer id=”bottom”> styles:
Next, the specific styles for <header id=”top”>:
Now, the specific styles for <footer id=”bottom”>:
See what happened there (it’s subtle)? Moving onto something more overt—the <h1>, intro <p> and browser list:
Yes! We’re getting somewhere. Onto the last step…just about 10 more lines of code and we’re done:
Thanks for taking the time to attend the Coloft Academy, and walking through this lesson. I hope you now have a solid understanding how the basics of HTML/CSS work, and I’d love the opportunity to teach you more.