Photo & Video
Business civil engineering Freelance Marketing Communication Planning Sales Business & Finance Finance Blogging Entrepreneurship Productivity More Categories... Series Courses Design & Illustration Code Web Design Music & Audio Photo & Video 3D & Motion Graphics Business Bundles eBooks Design & Illustration Code Web Design Music & Audio Photo & Video 3D & Motion Graphics Jobs Blog
In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications civil engineering are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.
1. HTML 5 HTML 5 is the next major version of HTML. It introduces a bunch of new elements civil engineering that will make our pages more semantic. This will make it a lot easier for search engines and screenreaders to navigate our pages, and improve the web experience for everyone. In addition, HTML 5 will also include fancy APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more. Let's get started marking up the blog page. 2. Basic Structure
In HTML 5 there are specific tags meant for marking up the header, navigation, sidebar and footer. First, take a look at the markup and I'll explain afterwards: <!doctype html> <html> <head> <title>Page title</title> </head> <body> <header> <h1>Page title</h1> </header> <nav> <!-- Navigation --> </nav> <section id="intro"> <!-- Introduction --> </section> <section> <!-- Main content area --> </section> <aside> <!-- Sidebar --> </aside> <footer> <!-- Footer --> </footer> </body> civil engineering </html>
Instead of using divs to contain different sections of the page we are now using appropriate, semantic tags. They will make it a lot easier for search engines and screen readers to figure out what's what in a page. 3. Marking Up the Navigation
The navigation is marked up exactly like we would do it in HTML 4 or XHTML, using an unordered list. The key is that this list is placed inside the nav-tags. <nav> <ul> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Archives</a></li> <li><a href="#">Contact</a></li> <li class="subscribe"><a href="#">Subscribe via. RSS</a></li> </ul> </nav> 4. Marking Up the Introduction
We have already civil engineering defined a new section in the document using the section tag. Now we just need some content. civil engineering <section id="intro"> civil engineering <header> <h2>Do you love flowers as much as we do?</h2> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> </section>
We add an id to the section tag so we can identify it later when styling. We use the header tag to wrap around the introductory civil engineering h2 element. In addition to describing a whole document, the header-tag should also be used to describe individual sections. 5. Marking Up the Main Content Area
Our main content area consists of three sections: the blog post, the comments civil engineering and the comment form. Using our knowledge about the new structural tags in HTML 5, it should be easy to mark it up. Marking up the Blog Post
Go through the markup and I'll explain the new elements afterwards. <section> <article class="blogPost"> <header> <h2>This is the title of a blog post</h2> <p>Posted on <time datetime="2009-06-29T23:31:45+01:00">June 29th 2009</time> by <a href="#">Mads Kjaer</a> - <a href="#comments">3 comments</a></p> </header> <p>Lorem civil engineering ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales civil engineering ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p> </article> </section>
We start a new section and wrap the whole blog post in an article-tag. The article tag is used to denote an independent entry in a blog, discussion, encyclopedia, etc. and is ideal to use here. Since we are viewing the details of a single post we only have one article, but on the front page of the blog we would wrap each post in an article-tag.
The header element is used to present the header and metadata about the blog post. We tell the user when the post was written, who wrote it and how many comments it has. Note that the timestamp is wrapped in a -tag. This tag is also new t
No comments:
Post a Comment