| [HTML5 & CSS3] From HTML4 & CSS2 to HTML5 & CSS3; Vector Series | |
|---|---|
| Tweet Topic Started: Monday, 10. October 2011, 15:12 (759 Views) | |
| Andrew | Monday, 10. October 2011, 15:12 Post #1 |
![]()
ぼくたちがすべてはばか。
|
From HTML4 and CSS2 to HTML5 and CSS3 Many of you are still coding in HTML4 and CSS2, which I must admit, I still do sometimes. However, if you wanna stay ahead of the rest, I would suggest you start using HTML5 and CSS3, or at least get the basics down before all browsers fully integrate them. As an example of how powerful these new tools are, we will be building a basic example page. HTML5 What You Need To Know You need to know that HTML5 is not just a small expansion of HTML4. HTML5 is an entire rework of concept of HTML itself. New tags rewrite the ways web layouts are created and new interactive elements provide even more user functionality. Elements such as the canvas, video, and audio tags. A complete list of HTML5 elements can be found here at w3schools. What You'll Need From Top To Bottom
You may have noticed that I only included elements that had to do with layout. We will be going over more content based elements later. So here's what a typical and basic HTML5 layout would look like.
Simple enough right? Let's build the HTML structure of our sample page. But before we get started. Let's take a look at the basic structure. Click To Enlarge ![]() We have 3 headers, 2 content sections, one navigation menu, and one footer. Now let's get started with the structure. We'll start with the top section, and give it the id "top".
Inside it we have a header element containing 2 headers, the page title, and the page subtitle. We also have our navigation containing the links "Home", "About", and "Contact". Now we're gonna add the content sections.
Please excuse my lack of indentation in that one. Now if you look at it. We have one section element. Inside it are our articles. Each article has a heading, and the article itself. There is also an image in the first article, so the page doesn't look so bland :P Now for the aside, or sidebar.
We're almost done. We just need to add the footer now and then style everything.
Our footer element consists of a simple copyright to zetaNetwork. Now that we're done with the layout, it's time to style everything. CSS3 What You Need To Know Like HTML5 is from HTML4, CSS3 is much different from CSS2 and CSS1. CSS3 provides developers and designers many more powerful tools in order to give their web pages that extra little flare. With rounded borders, text shadows, and multiple background images, the next generation of web design is here. The New And Shiny Stuff
We just went over the ones that were mentioned in this tutorial. There are many more but it would take too long to list them all out. Read about all of them at CSS3.info and CSS3.com. Now that you know about some of the CSS3 we're gonna use to style our HTML5, let's get started. We'll start with the body. [/b]
We'll set the margins to 0 because the default stylesheet sets it to 8 automatically. The reason the default stylesheet is for HTML4 is because a default stylesheet for HTML5 has not been defined yet by w3c. We set the font to Calibri and as a fallback Sans-Serif. Why Calibri? I felt like making it Calibri. We'll also give the page a 120% zoom, and set the text color to #272727. Now it's time to style the top section, or the container for the header and navigation.
Give the top a nice double border of dark and bright and a top margin so it's not touching the top of the page. Then we round the top left and right corners. It's time to style the headers now.
We'll just give them all a white 1px blur 1px distance right bottom drop shadow. After that we style all the h2s and h3s by giving the h3s a -25px top margin, making move up 25px from its original position, and by giving the h2s a -5px top margin, making it move up 5px from its original position.
Now we style all the navigation elements by giving them a vertical padding of 5px and a horizontal padding of 8px. Then setting their text decoration to none so they don't have an ugly underline. Now we style the content section. We can't use section as our selector because then every section would be styled and we only want the content section to be styled so we'll use section + section, which selects the section that comes right after another section.
We'll set the background color of our content section to #e6e6e6 and give it a 1px white border and a 3px blur black drop shadow just like our header. Then we set the padding to 8px vertical and 13px horizontal so there is some space in between the content and the borders. Having 80% as our zoom makes the content of the section smaller than the rest of the page content. Then we set the width of the section to 80% so it doesn't fill the entire page and to finish it up we change the display to table-cell and set our vertical-align to top. We're almost done so bear with me please. We're gonna style the aside now, or sidebar, whichever you prefer to call it.
We do the same thing with the aside as we did with our content section except this time we set the width to 15%. Now we style the footer, which is relatively simple actually.
Center the text, give it the same styling as our aside and content section, then round the bottom right and left borders using the same radius as our header. To wrap it all up we're just gonna style that image in our content section like so.
Now we're finally done :) The Completed Product If you have any questions, please do not hesitate to ask them. |
Off
Profile |
Quote Top
|
| Aidan | Monday, 10. October 2011, 17:13 Post #2 |
![]()
Level 12
|
I think learning the basics and whatnot of CSS3 and HTML5 would be a good idea for any coder out there; however, implementing it before it can be used perfectly, cross-browser, doesn't seem like the best idea. Nonetheless, this is a really nice article/documentation. Nicely done.
|
Off
Profile |
Quote Top
|
| Andrew | Monday, 10. October 2011, 20:37 Post #3 |
![]()
ぼくたちがすべてはばか。
|
Thanks ![]() If you liked this article you'll like the next one in the Vector Series. It'll blow you away, box-model, templates, and grid positioning
|
![]() Professional web design/development services. • http://wildandrewlee.com/ | |
Off
Profile |
Quote Top
|
| VoidPC | Saturday, 22. October 2011, 04:41 Post #4 |
Level 1
|
If a browser does not support HTML5, what will happen? |
Off
Profile |
Quote Top
|
| Steven | Thursday, 1. December 2011, 20:31 Post #5 |
![]()
WeDesignTheNet
|
@Void- I believe it would ignore the data entered that was HTML 5 or CSS3. Outline Documentations T H E M E S Documentation accepted in to the Themes database |
|
Steven | Outline Retiree | Ask your Favorite Retiree a Question! | |
Off
Profile |
Quote Top
|
| silvershoes | Friday, 9. December 2011, 18:32 Post #6 |
![]()
Level 4
|
Why is this called the Vector Series? Vector to me means graphics, and you're discussing code. I keep expecting to read tips on using vector programs like Inkscape or AI to make graphics for themes. Which is a completely different topic of course. It's kinda confusing? |
Off
Profile |
Quote Top
|
| Andrew | Saturday, 10. December 2011, 12:16 Post #7 |
![]()
ぼくたちがすべてはばか。
|
It's called Vector cause Vector can be expanded without quality loss. |
![]() Professional web design/development services. • http://wildandrewlee.com/ | |
Off
Profile |
Quote Top
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · Coding & Development · Next Topic » |
| Track Topic · E-mail Topic |
8:15 PM Jul 10
|
Powered by ZetaBoards Premium · Privacy Policy



Multi
Multi






8:15 PM Jul 10


Outline Live