Scribd Logo
Upload

Welcome to Scribd!

  • Easy HTML/CSS Example

    Uploaded by

    Yohei Nakajima
    59 views1 page
    From Coloft Academy class, Intro to HTML/CSS with Bryan Koch

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    From Coloft Academy class, Intro to HTML/CSS with Bryan Koch

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    59 views1 page

    Easy HTML/CSS Example

    Uploaded by

    Yohei Nakajima
    From Coloft Academy class, Intro to HTML/CSS with Bryan Koch

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    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 mintreaction@gmail.com with any questions you may have, and Ill answer as quickly as possible. Lets jump right in and reinforce the ton o info we learned yesterday

    File Structure
    The index.html fileas well as the other .html files we may add laterare saved on the root. On a server this would typically be public_html (in our example it is the example folder). Separate folders contain our css, images and javascript.

    Final Result
    When this lesson is complete, this is what you will have built:

    Final HTML
    Here is all the HTML we will use to build our example (well break it down piece by piece in just a little bit):

    HTML Foundation
    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 browsersold and newread 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 its 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 1012. This will allow Internet Explorer 68 to properly read HTML5 elements. The conditional comment <!-- [if lt IE 9]> ensures only IE loads these lines.

    Starting the <body>


    Lets 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, sothat 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, lets 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 websitein 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 2022? 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 oncejust 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


    Lets place a simple navigation in the webpages <footer>. Whats 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 isnt 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 containand soon styleour footer#bottom navigation.

    HTML5 lays out standards for all its elements. <nav> should only be used for primary navigationthat is to say

    The Content #content


    Were almost ready to preview our unstyled webpage. However, lets code up the content before we take a peek.

    There are six HTML headline elements which are deemed more important than regular text: h1h6. <h1> is the search engines know this is what this page is about. As you can see on line 39, weve 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, lets 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, lets practice coding another unordered list to combine several skills weve 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>!) 4349 in the HTML above. Note the absolute links to outside websites, and how weve used target=_blank to

    HTML5 Articles
    The official HTML5 specification wont 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. Lets build one out to discuss how <article> works.

    First, lets create <div class=article-excerpts>. This will contain our articles and help easily create some separation from our intro text and list. Its 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 were only creating one webpage today, were 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 its 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 youve been waiting for Lets 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 youa humanthink 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. Lets 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 theres 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. Heres the effect of the basic CSS Reset:

    What do you notice? Well probably that its even more milquetoast than before: all the text is the same size; there are no bullet points; theres no space between anything Links has a little color, but thats 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 colorssimilar to pre-Reset conditions, but now with all browser agreeing to the look:

    The Example Styles


    Alrighty. Lets 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 propertiesthat help define style. From now on, Im going to talk (i.e. write) less. Your savvy enough with HTML at this stageand have plenty of images (and youre own hand written code, right?) to refer to now. Also, Ive left a healthy amount of comments in the CSS were writing. Lets see how you fare in deciphering the code below. Just like we did with the HTML, well 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 (its subtle)? Moving onto something more overtthe <h1>, intro <p> and browser list:

    Yes! Were getting somewhere. Onto the last stepjust about 10 more lines of code and were 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 Id love the opportunity to teach you more.

    You might also like