html and css from pdf tutorial

54
10/27/10 11:45 AM Design and Code Your First Website in Easy to Understand Steps | Nettuts+ Page 1 of 54 http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/ Advertise Here Design and Code Your First Website in Easy to Understand Steps Tessa Thornton on Aug 3rd 2009 with 233 comments Tutorial Details Technology : HTML, CSS Difficulty: Beginner Completion Time: 2-4 hours In this tutorial, we’re going to design and code our first website in simple, easy steps. This tutorial was written for the beginner with the hope that it will give you the tools to write your own standards-compliant websites! It’s a brand new week; maybe it’s time to learn a new skill! Step 1 - What We!re Making We’re going to design and code this very simple website. Spectacular design, it’s not, but it’ll be very effective for teaching basic coding techniques.

Upload: otilia-otilie

Post on 03-Dec-2014

4.847 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 1 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Advertise Here

Design and Code Your FirstWebsite in Easy to UnderstandStepsTessa Thornton on Aug 3rd 2009 with 233 comments

Tutorial Details

Technology: HTML, CSSDifficulty: BeginnerCompletion Time: 2-4 hours

In this tutorial, we’re going to design and code our first website in simple, easy steps. This tutorial waswritten for the beginner with the hope that it will give you the tools to write your own standards-compliantwebsites! It’s a brand new week; maybe it’s time to learn a new skill!

Step 1 - What We!re Making

We’re going to design and code this very simple website. Spectacular design, it’s not, but it’ll be veryeffective for teaching basic coding techniques.

Page 2: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 2 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Step 2 - Getting Ready

What you need

This tutorial was written assuming that you’ve never coded a website before, or have only done it a fewtimes. Nevertheless, to complete this tutorial, you will need the following:

Photoshop or a similar image editorA code editor (more on that later)Basic understanding of how html works, basic syntax and tags. To get up to speed, check out theofficial resource at w3 Schools, where you can learn all the basics needed for this tutorial.Ditto for css, you should understand how selectors work and be familiar with basic properties. Again,the best resource here is w3 SchoolsA browser, obviously. I’m using Firefox, and if you want your site to look just like my screenshots ineach step, you should too

Layout

Page 3: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 3 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

We’re making a very simple website here, with four basic elements: header, content, sidebar and footer, thelayout is going to look something like this:

It’s a good idea to block out the layout of your design before you start, either on paper or in Photoshop, tostreamline your workflow and organize your ideas.

Step 3 - Getting Started

Open up a shiny, new Photoshop document, say, 1000px by 1200px. We can always crop it later. I’mmaking it pretty narrow because I’m working on a laptop here, but feel free to go wider if you like morespace to work.

Now, I’m not going to go into the debate about screen resolutions and optimal website width here. All youneed to know is that the content of our page is going to be 800px wide, and that that’s okay. So, on our1000px wide document, we’re going to drag in guides at the 100 and 900px marks to set the width. Ourdesign has a sidebar, and I’ve decided to make it one third the width of the page. Two thirds of 800 is about530, so let’s put in one more guide at 630px. We’ll also set a nice background color of #ebe8e8.

Page 4: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 4 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Step 4 - Header

Grab the rectangle tool and draw a big, blue box at the top of the document, mine is about 170px high andthe color is #23b6eb. Next draw a skinny, dark grey bar at the very top of the page, I used #5d5a5a

Page 5: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 5 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Step 5 - Highlight

Now we’re going to add a bit of a lighting effect on the blue header area. Create a clipping mask above theblue layer, then Grab a big, soft brush (400px wide) and pick a color a bit lighter than the blue background.

Now lightly click the tip of the brush right below the bar, around the centre of the document. Keep it subtle,and try not to let the lighter color reach the edges of the page (this will be clear later). And set the blendingmode to screen.

Step 6 - Navigation Bar

Now we’re going to add another bar to the bottom of the blue one, we can make it grey, but we’re going toadd a gradient overlay so it doesn’t really matter.

In the layer styles panel, add a gradient from #e2e3e4 to #bebdbd at 90degrees.

Step 7 - Footer

Next, let’s draw a grey box at the bottom of the page, I picked a color a bit darker than the grey from thebar at the top.

Page 6: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 6 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Step 8 - Logo

Background

For the logo, we’re going to draw a rectangle and add another anchor point at the end, then drag it out to theside. To get rid of the rounding, option-click on the point.

Page 7: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 7 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Next, add some layer styles: a gradient overlay and a 1px stroke: Gradient from #aec457 to # cdf399

Page 8: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 8 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Text

Now for the text: big and bold.

Font: Myriad ProStyle: BoldSize: 60pxColor: #36809a

To give it some depth, add an inner shadow:

Page 9: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 9 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Step 9 - Tagline

Next I just added in a short tagline:

Font: ArialStyle: BoldSize: 30ptColor: #e4dfdf

Step 10 - Navigation

Write in the navigation links nice and big, spread them out and space them about evenly.

Font: ArialStyle: BoldSize: 30ptColor: #676666

Page 10: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 10 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Step 11 - Main Content

Time to paste in some dummy content. I used one bit header, which will be h2 and the smaller one will beh3 link to html ipsum.

Make the text boxes about The width of the first 2 thirds of the page. Text styles:

h2 Header:

Font: ArialStyle: BoldSize: 36ptColor: #0e5d7a

h3 Header:

Font: ArialStyle: BoldSize: 24ptColor: #444444

Paragraph:

Font: ArialStyle: NormalSize: 14ptColor: #595858

The dates under “latest updates” are going to be wrapped in a small tag, the font is the same as theparagraph, but 12pt. I copied the news item twice, cause I’m lazy.

Page 11: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 11 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Step 12 - Sidebar

Links

Next draw a skinny rectangle over our sidebar region, color #d4d6d3, with a 1 px stroke of #bebdbd

Fill up the sidebar with some more dummy content, you can get the free icons I used here. The fonts are:

h3 Headers:

Font: ArialStyle: NormalSize: 24ptColor: #044055

List items:

Font: ArialStyle: NormalSize: 18/14ptColor: #373737

Page 12: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 12 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Button

Next we’re going to add a “join our team” button beneath the contributors links. The button is just arectangle with the same gradient as the logo, and a 1px stroke color c7c7c7. The text is:

Font: ArialStyle: NormalSize: 24ptColor: #434343

Step 13 - Footer

To finish off the mockup, just add a bit of dummy copyright text, or whatever you want, to the footer. The

Page 13: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 13 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

font is:

Font: ArialStyle: NormalSize: 14ptColor: #e0e2e2

And that’s it for the page design, it’s nothing special, but its simplicity will make it easier for you to followthe rest of the process.

Slicing the PSD

Now that we have our lovely completed psd, it’s time to chop it up into pieces we can use. The idea here isto use as few images as possible, and to make them as small as possible. Okay, so let’s start with the header.We want it to stretch out across the whole screen, no matter how wide it is. To do that, we’re going to graba tiny little sliver of the header, and have it repeat across the screen again and again, no matter how wide.

Step 14 - The Slice Tool

Now you probably haven’t had to use the slice tool before, but it’s really very simple. It just lets you sliceyour file into teeny tiny pieces which can be exported for the web.

Header

So, let’s go ahead and grab a little slice of our header. Click and drag to create the slice, just like therectangular marquee tool. Be careful to take the slice from the side of the image, so you don’t get any of thehighlight.

Page 14: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 14 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Now that we have this little stripe, we can repeat it along the x-axis. The highlighted area, however, is non-repeating, so we have to cut out the whole thing. Slice the section of the header between the two guides thatdenote our 800px width.

Footer

We use the exact same process for slicing the footer, grab a skinny piece of the footer.

Page 15: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 15 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Everything Else

We just need a couple more images: the “subscribe” icons and the “join our team” button.

Because the icons and the logo are irregularly shaped, we’re going to save them as transparent .png files, sowe’re going to come back and grab them separately.

Okay, so to slice the button, we can use the same technique as the header and footer, but this time we onlyneed the one thin slice. When you make the slice, be sure to not include the 1px stroke, (we’re going to addthat in later) you might need to zoom in really close for this.

Step 15 - Export for the Web

Now that we have our images all sliced up, let’s save them as optimized jpegs and put them someplaceuseful.

Go to File/Save for web and devices… In the popup window, hold down shift and click to select each of theslices (again, you might want to zoom in) Check that the “preset” drop-down menu is set to JPEG-High,uncheck the “convert to srgb” and click “save”

Page 16: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 16 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

In the next window that pops up, pick a name and location for your images, I’m just going to save to thedesktop for now.

Make sure it’s set to “images only”, “default settings”, and “selected slices only.”

Next, check out the location you saved your files to. Instead of seeing the individual images, you’ll just finda folder labeled “images” where all your pictures are located. The computer will give each image a number,which isn’t very useful. Check that you have the right images, then name them appropriately.

Now, back to those pesky icons and the logo. Be sure to hide all the background layers, then take out theslice tool again and cut out nice little boxes around each icon and the logo.

Page 17: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 17 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Now we go through the same process of exporting for the web as we did with the jpegs, only this time besure to select PNG-24 from the “preset” dropdown menu, and that the “transparency” box is checkmarked.Rename these files too, and your images folder should look something like this:

Page 18: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 18 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Alright, that’s it, we’re done cutting up our psd, and we have all the images we need. Don’t close Photoshopjust yet, though, we’ll still need to pick out colors, fonts, dimensions, etc.

Part 3 – HTML

Step 16 - Getting Started

Alright, time to dive into some html. The first thing you’re going to need is a code editor of some kind. Thisis often an area of personal preference,but I recommend starting off with a free one. For mac and PC, I highly recommend Komodo edit as a firstcode editor. It has a lot of features that are ideal for beginners and advanced users.One of the best features is the syntax-checker, which is like the spell-check in word processors, which willidentify and explain little mistakes.For PC, there are a lot more options, none of which I’m very familiar with, but check out Andrew Burgess’article 22 Neat Code Editors for Windows

In this tutorial, we’re going to use Komodo edit, but the principles are the same in every editor.

Step 17 - Setting up our Folders

First things first, we need to set up a place to hold all the files related to our site. Create a folder for yourwebsite, mine is called “MySite”, inside this folder, create another folder containing the images we justsliced.Name this folder “images”. Now we open up our code editor, this part will be a bit different depending onwhat software you’re using:If you’re following along in Komodo, select “create new project” and save/move the .kpf file to the“MySite” folder. When you open up the file, the file browser at the side of Komodo should display thecontents of the folder.Next right-click on the project file, and scroll to “add” and select “new file”. In the window that pops up,select “html(xhtml)” and name the file “index.html”.

Page 19: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 19 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

If you’re using another editor, the process should be similar, but the essentials are the same: you need tocreate an index.html file, and it needs to be in the “MySite” folder along with the images folder.

Step 18 - Setting up our index.html File

The first thing we need to do is declare the doc type, character encoding, and create the <html> tags. Manyeditors will do this for you, but if not, it should look something like this:

view plaincopy to clipboardprint?

Page 20: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 20 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

1. <?xml version="1.0" encoding="UTF-8"?> 2. <!DOCTYPE html PUBLIC "-

//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 4. </html>

between the html tags, we need a “head” section, which contains all sorts of important information aboutthe site which isn’t displayed within the body of the site.For us, at this point all it’s going to contain is the title of the page, like this:

view plaincopy to clipboardprint?

1. <head> 2. <title>MySite</title> 3. </head>

below the head, logically, we add the body, also contained within the <html> tags. Okay, so far we have:

view plaincopy to clipboardprint?

1. <?xml version="1.0" encoding="UTF-8"?> 2. <!DOCTYPE html PUBLIC "-

//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 4. <head> 5. <title>MySite</title> 6. </head> 7. <body> 8. 9. </body>

10. </html>

This is a basic page setup, you might want to save this clip somewhere for future use.So remember when we said we’d have header, content, sidebar, and footer sections?Good, now each of these is going to be within its own <div>, and will be given an appropriate id.

view plaincopy to clipboardprint?

1. <body> 2. <div id="header"> 3. </div> 4. 5. <div id="content"> 6. </div> 7. 8. <div id="sidebar"> 9. </div>

10. 11. <div id="footer"> 12. </div> 13. 14. </body>

NOTE: it’s a good idea, especially when you first start, to add comments at every </div> so you can keeptrack of the hierarchy of divs.

Now let’s take another look at our psd – remember how we want the footer and header slices to repeatindefinitely out to the sides?We’re going to need a way to let these elements stretch out, but at the same time, we need the main content(“content” “sidebar”)to be contained within a specified width at the centre of the screen.

To handle this, we need a big div holding our expanding elements, and a div to contain the main content.

Page 21: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 21 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

We should also notice that the footer text is centered too, so we need to repeat the same process for thefooter.To do this, we need to wrap some divs around the ones we already have. We have two basic sections, themain section, and the footer section.Each is going to be contained within one big, unruly div with an unspecified width,and the content of each will be wrapped in individual divs that specify width and centering.

We want to use the same rules for the main and footer content, so instead of (or in addition to) specific id’s,they will have specified classes,which means you can create a set of rules to define all div’s with the same class.

So the main content is going to be wrapped inside a div with the id “main” and our footer will be wrappedin a div with the id “footer.” If it helps to visualize the structure, here’s a diagram:

And the markup looks like this:

view plaincopy to clipboardprint?

1. <body> 2. <div id="main"> 3. <div id="header"> 4. </div> 5. 6. <div id="content"> 7. </div> 8. 9. <div id="sidebar">

10. </div> 11.

Page 22: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 22 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

12. </div> 13. 14. <div id="footer"> 15. </div> 16. 17. </body>

Now we wrap each section in a containing div, with the class of “container.”

view plaincopy to clipboardprint?

1. <div id="main"> 2. <div class="container"> 3. <div id="header"> 4. </div> 5. 6. <div id="content"> 7. </div> 8. 9. <div id="sidebar">

10. </div> 11. 12. </div> 13. </div> 14. 15. <div id="footer"> 16. <div class="container"> 17. </div> 18. </div>

I know all these wrapping divs seem redundant, but they will become relevant when we start styling thepage.

Step 19 - Adding Content

Now that the structure of our page is set, we can start adding content, from top to bottom. Here’s an outlineof the html elements that will make up our page:

Page 23: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 23 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Header

At the very top we have our header, and within the header we have 3 main elements: a logo, a tagline, and anavigation menu.So let’s create a div for our header, and to keep things clean, we’ll put the logo and tagline in their owndivs.

view plaincopy to clipboardprint?

1. <div id="header"> 2. <div id="logo"> 3. </div> 4. <div id="tagline"> 5. </div> 6. </div>

Because it’s the most important heading of the page, the Logo is going inside an <h1> tag. We have moreoptions for the tagline, depending on how relevant it is to your site. In this case, I’m using an <h3> tag.

For the navigation, standard practice is to place menu items within an unordered list, with each list itemcontaining an anchor tag.So we have:

view plaincopy to clipboardprint?

1. <div id="header"> 2. <div id="logo"> 3. <h1>Logo</h1> 4. </div> 5. <div id="tagline">

Page 24: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 24 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

6. <h3>And a little tagline, too.</h3> 7. </div> 8. <ul id="menu"> 9. <li><a href="#">Home</a></li>

10. <li><a href="#">About</a></li> 11. <li><a href="#">Portfolio</a></li> 12. <li><a href="#">Contact</a></li> 13. </ul> 14. </div>

NOTE: the “href” value in the anchor tags would normally specify where the link goes, but in this case, thepound symbol just means “link to top of page.”

Main content

Looking at our main content area, we have 4 different styles of type: a big heading at the top, a smaller one,and an even smaller one heading for the news item titles, plus some paragraphs, and the small little dates onnews items.We’re going to call these <h2>, <h3>,<h4>, <p>, and <small>, respectively. Now it’s just a matter ofpasting in your content, which isn’t much fun, but it is pretty easy.

view plaincopy to clipboardprint?

1. <div id="content"> 2. <h2>Lorem ipsum, Dolor sit</h2> 3. <h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3> 4. <p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. 5. Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl. 6. Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. 7. Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel. </p> 8. <p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. 9. Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.

10. Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit, 11. gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </p> 12. <div id="news"> 13. <h3>Latest Updates</h3> 14. <h4>Vestibulum id nulla eu sapien pellentesque</h4> 15. <small>June 1, 2009</small> 16. <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu, 17. facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales. 18. Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p> 19. <h4>Vestibulum id nulla eu sapien pellentesque</h4> 20. <small>June 1, 2009</small> 21. <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu, 22. facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales. 23. Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p> 24. </div> 25. </div>

I’ve added anchor tags with the value “Read More” at the end of each news item.

Sidebar

On to the sidebar now. The sidebar has three elements, each of which will be wrapped in its own div.Each div will contain an <h3> header, and an unordered list, and each list item will again contain an anchortag.So go ahead and copy and paste your text in, and it should look something like this:

view plaincopy to clipboardprint?

Page 25: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 25 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

1. <div id="sidebar"> 2. <div id="subscribe"> 3. <h3>Subscribe!</h3> 4. <ul> 5. <li><a href="#">Subscribe via RSS</a></li> 6. <li><a href="#">Get Email Updates</a></li> 7. <li><a href="#">Follow us on Twitter</a></li> 8. </ul> 9. </div>

10. <div id="popular"> 11. <h3>Popular Items</h3> 12. <ul> 13. <li><a href="#">Lorem ipsum dolor site amet</a></li> 14. <li><a href="#">Ulvinar tincidunt, Mauris id</a></li> 15. <li><a href="#">Lorem ipsum dolor site amet</a></li> 16. <li><a href="#">Proin tempor erat sit tene</a></li> 17. </ul> 18. </div> 19. <div id="contributors"> 20. <h3>Contributors</h3> 21. <ul> 22. <li><a href="#">John Smith, freelance writer</a></li> 23. <li><a href="#">Jack McCoy, designer</a></li> 24. <li><a href="#">Lenny Briscoe, editor</a></li> 25. <li><a href="#">John Smith, martketing</a></li> 26. </ul> 27. <a href="#">Join Our Team</a> 28. </div> 29. </div>

Footer

We may as well put the footer in before checking it in the browser, it should only take a second.Worth noting is that any symbols you want to use in your text have special codes in html, for example, thecopyright symbol is coded as ©

view plaincopy to clipboardprint?

1. <div id="footer"> 2. <div class="container"> 3. <p>Copyright © 2009 MySite <br /> 4. All Rights Reserved</p> 5. </div> 6. </div>

And that’s about it for the markup, let’s take a look:

Page 26: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 26 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

looks pretty good, no? Well, no, not yet. But it does contain all the information we need, and is ready forstyling.

Part Four – CSS

Page 27: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 27 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Step 20 - Adding CSS

Now, this is where the magic happens.Create a new file in our site folder, and call it “style.css”.Now we need a way to tell the browser that this css file belongs to our index.html file, so we link to it withthe “link href” tag. Put this line of code into your <head> section, beneath the title.

view plaincopy to clipboardprint?

1. <link href="style.css" rel="stylesheet" type="text/css" media="screen" />

Now our html file can access our css file, so whatever changes we make to the css will affect the html file.

Step 21 - Basic Cleanup

There are a couple ugly things about our site that we can fix right away: we want to change the default font,we want the content to be 800px wide and centered, and we want to get rid of all those spaces between theelements.

First, we’re going to pick a font for all text within the body of the page, which will be displayed unlessotherwise specified:

view plaincopy to clipboardprint?

1. body { font-family: Arial, Helvetica, sans-serif; }

Next, let’s define the width and margins of our “container” class divs.

view plaincopy to clipboardprint?

1. .container { 2. width: 800px; 3. margin: 0 auto; 4. }

the margin: 0 auto property is shorthand meaning that there is no margin at the top, and that it will beautomatically centered horizontally.Let’s take a look.

Page 28: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 28 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Much better. The next step is going to make things look much worse, but stick with me.

CSS reset

All browsers use default padding and margin values for each element, which makes unstyled pages looknice, but for us they just get in the way of our own styles.

Page 29: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 29 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

To get rid of all these messy margins, we’re going to use a very simple css reset, which is just a rule thatgets rid of the default padding and margins on the elements we’re using. Put this at the top of your css file:

view plaincopy to clipboardprint?

1. ' 2. body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

now let’s look:

Step 22 - Header

Okay, so everything’s all squished up and ready for us to manipulate! Now we get to start adding our ownstyles, again, from top to bottom.Let’s get the tricky part out of the way first: setting the background images for the header.

We’ll star with the repeating slice we took of the header. The repeating image is going to be within the“main” div, which has an undefined width. We need to let the browser know where the image is, and whatto do with it (repeat, no-repeat) to set a background image, we use the property “background” and specifythe location of the image or ‘url’: in our case, the image is in our images folder, so we specify the locationlike this:

www.Serif.com/FreeWebdesign Ads by Google

Page 30: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 30 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

view plaincopy to clipboardprint?

1. url (images/header_slice.jpg)

then specify that we want it to repeat along the x-axis:

view plaincopy to clipboardprint?

1. #main { 2. background: url(images/header_slice.jpg) repeat-x; 3. }

Check it out:

awesome, right? Try stretching out your browser, it just goes on and on and on… But we’re still missingthe highlight on the blue bar, and since we cut out an 800px part of our header, we can put it inside our“container” div. Problem is, we have two of those (one for the main div, one for the footer) so we need tospecify that we want the div with the class “container” that lies within the div with the id “main”set the image the same way as before, but this time we need to specify “no-repeat”:

view plaincopy to clipboardprint?

1. #main .container { 2. background: url(images/header.jpg) no-repeat; 3. }

Take a look:

Page 31: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 31 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

great! the highlight is sitting just where we want it, and blending in to the repeating sides.

Step 23 - Logo Image Replacement

Our logo is pretty complicated, right? we’re using an image background, and a non-html font with an innershadow. We can’t do that in css, so we have to replace the text with an image.“why not just put the image in place of the <h1> line?”you may ask. Well, on the internet, the <h1> header is basically the ‘name’ of your page, and important,powerful robots (google) scan for this property when searching for keywords. If you don’t have an <h1>header, your site could be called kalamazoo, but it wouldn’t turn up in a search for that exact word.There are various other techniques which have their advantages over this one, (see here, especiallytechnique #8) but this is the simplest and the most appropriate technique for this situation.

So, to fix this problem, we use a devious little technique called “image replacement” to use the image thatwe want, while keeping the <h1> header in our markup. First, let’s add the image as a background to the#logo div.

view plaincopy to clipboardprint?

1. #logo { 2. background: url(images/logo.png) no-repeat; 3. }

if you look at your browser, you’ll see that our logo has been chopped in half. This is because we haven’tgiven it any room, we can solve this by specifying the dimensions of the image:

view plaincopy to clipboardprint?

1. #logo { 2. background: url(images/logo.png) no-repeat; 3. height: 84px; 4. width: 235px; 5. }

Page 32: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 32 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Better, but we still have the original <h1> text in our way, but we can fix it! All we’re going to do is set thetext-indent value to something ridiculous, like -9999px, way off the page, so no one will ever see it, exceptthe search engine robots.

view plaincopy to clipboardprint?

1. #logo h1 { 2. text-indent: -9999px; 3. }

now take a look, and our logo image is happily sitting where our <h1> text used to be. But it still lookspretty bad, all cramped up at the top there. When we want to move an item from its original position on thepage, we can use both the padding and the margin properties. We’re going to try both to see the difference

First, let’s try adding a margin to the top of the h1 tag. We can find out how big to make it with the rulertool in Photoshop.

view plaincopy to clipboardprint?

1. #logo h1 { 2. text-indent: -9999px; 3. margin-top: 40px; 4. }

Page 33: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 33 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Oops! We managed to move the logo, but it took the whole page with it! Let’s try adjusting the paddinginstead:

view plaincopy to clipboardprint?

1. #logo h1 { 2. text-indent: -9999px; 3. padding-top: 40px; 4. }

Now take a look, and the damn thing went back to where it started! This is because the margin propertymoves the whole element, but the padding only moves the content of the element, leaving the backgroundwhere it is. So, if our screen was, say , 19999px wide, we would see our outcast <h1> header move down40px, but this is not what we were going for.

So, to move the background image of the logo, we need to move the div above it, because the whole logodiv is the “content” of the header div. let’s try it out:

view plaincopy to clipboardprint?

1. #logo h1 { 2. text-indent: -9999px; 3. } 4. 5. #header { 6. padding-top: 40px; 7. }

Page 34: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 34 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Much better! Now our logo looks just like it does in our psd, in exactly the right spot. If only we could fixthat tagline…

Step 24 - Floating the Tagline

So now we need to find a way to get that tagline out beside the logo. Problem is, html elements naturallystack vertically, pushing eachother up and down the page.We have a few options to fix this, but I’m going to use floats, which are a little tricky, but seriously usefulonce you get the hang of them.

Okay, so what’s a float? Well, that’s complicated. Basically, when you tell an element to ‘float’, it sticks itto the side of a page or element, and also takes it out of the normal “flow” of the page. Confused? Let medemonstrate.

view plaincopy to clipboardprint?

1. #logo { 2. background: url(images/logo.png) no-repeat; 3. height: 84px; 4. width: 235px; 5. float: left; 6. }

Page 35: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 35 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Well, as you can see, we managed to get our tagline out to the side, but it took the navigation menu with it.I think of it this way: a normal element (for example, a div, or an h1 header, or an image), even if it’s reallysmall, invisibly occupies all the space to the side of it, like one big long horizontal bar.

This is why all the other elements stay beneath it, instead of cozying up beside. When you float an element,You take away all the extra space to the side, and restrict it to only the space it directly takes up, allowingother elements to wrap around it.Now that you know how floats work, how can we fix our present situation? First, we have to isolate thetagline into a float of its own, so it too lies outside the normal “flow” of the page:

view plaincopy to clipboardprint?

1. #tagline { 2. float: left; 3. }

Take a peek in the browser, and look at that, we made it worse. Now the menu items are wrapping aroundour tagline! What we need here is to restore the normal flow of the document after the floated elements.There are a couple ways to do this, but we’re using the most straight-forward method. Go back to yourindex.html file, and add in a new div beneath our floated divs. Instead of adding a class or id to this div,

Page 36: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 36 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

we’re going to give it a style (yes it’s an inline style, but only a teeny little one) clear: both.

view plaincopy to clipboardprint?

1. <div id="header"> 2. <div id="logo"> 3. <h1>Logo</h1> 4. </div> 5. <div id="tagline"> 6. <h3>And a little tagline, too.</h3> 7. </div> 8. 9. <div style="clear:both"></div>

Resave your html file and check in your browser: you should see the tagline out beside the logo, with themenu below. Now all we have to do is get that tagline into shape, and put it where it belongs. Let’s start bycopying the font styles over from Photoshop:

view plaincopy to clipboardprint?

1. #tagline h3 {font-size: 30px; color: #e4dfdf; }

and then add a bit of padding at the top and left:

view plaincopy to clipboardprint?

1. #tagline { 2. float: left; 3. padding-top: 20px; 4. padding-left: 20px; 5. }

take a look: now we’re getting somewhere!

Step 25 - Navigation Bar

now we need to get our navigation menu in a straight line. First things first, though, we’re going to style thefont so we can space things out accordingly. When you style the font of a list of anchor tags, you need tospecify not only that you are referring to list items, but to the anchors within them. We’re specifying ourspecific unordered list, so that we can deal with the other ones separately. We also need to get rid of the

Page 37: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 37 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

underlines and the bullet points.

view plaincopy to clipboardprint?

1. ul#menu { 2. list-style: none; 3. } 4. 5. ul#menu li a { 6. font-size: 30px; 7. color: #676666; 8. text-decoration: none; 9. }

Great, now, we need to find a way to get all our links in a row. How? More Floats! We’re going to set thelist-items to float left, so that each item sticks to the one beside it.

view plaincopy to clipboardprint?

1. ul#menu li { 2. float: left; 3. }

If you look in your browser, you’ll notice the same problem we had before with floated items: otherelements are wrapping around it. Just like before, we can insert our clearing div right after the unorderedlist.

view plaincopy to clipboardprint?

1. <ul id="menu"> 2. <li><a href="#">Home</a></li> 3. <li><a href="#">About</a></li> 4. <li><a href="#">Portfolio</a></li> 5. <li><a href="#">Contact</a></li> 6. </ul> 7. <div style="clear:both"></div> 8. </div>

All our list items should be in a line now, we just have to space them out and move the menu down a bit. Sofirst measure the distance from the bottom of our logo to the top of the menu text, and we get about 55px.the first item is about 30px left of our guide, so let’s set the list item padding to 30px left.

view plaincopy to clipboardprint?

1. ul#menu { 2. list-style: none; 3. padding-top: 55px; 4. } 5. 6. ul#menu li { 7. float: left; 8. padding-left: 30px; 9. }

We still need to put more space between each item, if we measure the space in our psd, it’s about 105px,but since we already have 30px padding between each, we only need to add 75px padding to the right ofeach item.

view plaincopy to clipboardprint?

1. ul#menu li { 2. float: left; 3. padding-left: 30px; 4. padding-right: 75px;

Page 38: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 38 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

5. }

And finally, admire our work:

Perfect! Our menu is just like the psd. On to the content!

Step 26 - Content

Top area

The first thing we’re going to do here is set all the fonts, so we can see the spacing we have to work with.just plug in the font info from Photoshop:

view plaincopy to clipboardprint?

1. #content h2 { 2. font-size: 36px; 3. color: #015878; 4. } 5. 6. #content h3 { 7. font-size: 24px; 8. color: #444444; 9. }

10. 11. #content h4 { 12. font-size: 18px; 13. color: #373737; 14. font-weight: normal; 15. } 16. 17. #content p { 18. font-size: 14px; 19. color: #595858; 20. } 21. 22. #content small { 23. font-size: 12px;

Page 39: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 39 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

24. color: #373737; 25. } 26. 27. #content a { 28. color: #0f6c8d; 29. font-weight: bold; 30. text-decoration: none; 31. }

We get something like this:

At this point you may notice that we haven’t set a background color for the content area yet. This isbecause… I forgot. So let’s just do that now, shall we?

view plaincopy to clipboardprint?

1. body { 2. font-family: Arial, Helvetica, sans-serif; 3. background: #ebe8e8; 4. }

Alright, now we’re ready to add some padding to space everything out.first, the distance from the bottom of the nav menu to the top of the h2 heading is about 25px:

view plaincopy to clipboardprint?

1. #content h2 { 2. font-size: 36px; 3. color: #015878; 4. padding-top: 25px; 5. }

Next, the distance from the bottom of the h2 heading to the top of the h3 heading is also around 25px, sorepeat basically the same code:

view plaincopy to clipboardprint?

1. #content h3 { 2. font-size: 24px; 3. color: #444444; 4. padding-top: 20px; 5. }

Now, the distance from the bottom of the h3 heading to the top of the first paragraph is about 45px, but ifwe set the padding-top to 40px, we will also end up with 40px of padding between the two paragraphs.

Page 40: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 40 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Since the paragraphs are only about 20px apart, we need to split the padding into top and bottom: add 20pxof padding to the bottom of the h3 heading, and 20px of padding to the top of the paragraph.

view plaincopy to clipboardprint?

1. #content h3 { 2. font-size: 24px; 3. color: #444444; 4. padding-top: 20px; 5. padding-bottom: 20px; 6. } 7. 8. #content p { 9. font-size: 14px;

10. color: #595858; 11. padding-top: 20px; 12. }

Check out the results:

News section

The spacing is a little different in the news section, first of all, we need to push it down the page a bit.There’s also too much padding beneath the h3 heading, so we’re going to remove a bit.We also need to reduce the padding above the paragraphs, and add some padding between the two newsitems.

view plaincopy to clipboardprint?

1. #news { 2. padding-top: 10px; 3. } 4. 5. #news h3 { 6. padding-bottom: 10px; 7. } 8. 9. #news p {

10. padding-top: 10px; 11. padding-bottom: 14px; 12. }

Which looks like this:

Page 41: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 41 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

There, now all we need to do is get the sidebar out to the side, and we’re done the main content.

Step 27 - Floating the Sidebar

first, we need to set the width for the content section:

view plaincopy to clipboardprint?

1. #content { 2. width: 510px; 3. }

Now, to get the sidebar out there, we will once again be using floats, setting both the content area andsidebar to float left.

view plaincopy to clipboardprint?

1. #content { 2. width: 510px; 3. float: left; 4. } 5. 6. #sidebar { 7. float: left; 8. }

If you take a look in your browser, you will notice that our footer text has wrapped around the sidebar. Weknow how to deal with this problem by now: we just need to add our little clearing div to the markup:

view plaincopy to clipboardprint?

1. <div id="contributors"> 2. <h3>Contributors</h3> 3. <ul> 4. <li><a href="#">John Smith, freelance writer</a></li> 5. <li><a href="#">Jack McCoy, designer</a></li> 6. <li><a href="#">Lenny Briscoe, editor</a></li> 7. <li><a href="#">John Smith, martketing</a></li> 8. </ul> 9. <a href="#">Join Our Team</a>

10. </div>

Page 42: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 42 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

11. </div> 12. <div style="clear:both"></div> 13. 14. </div> 15. 16. </div>

Alright, next step is to just copy over the font styles from our psd for the sidebar:

view plaincopy to clipboardprint?

1. #sidebar h3 { 2. font-size: 24px; 3. color: #044055; 4. font-weight: normal; 5. } 6. 7. #sidebar ul li a { 8. font-size: 14px; 9. color: #393838;

10. }

Remember that to style the font of the links in an unordered list, we need to refer to the anchor tag, ratherthan the list item itself.Now, if we look over at our psd again, we’ll notice that the text for the list items in the “subscribe” widgetis slightly larger than in the rest of the sidebar. To fix this, we need to target the specific unordered list, sowe need to add an id value to the subscribe ul in our markup:

view plaincopy to clipboardprint?

1. <ul id="subscribe"> 2. <li><a href="#">Subscribe via RSS</a></li> 3. <li><a href="#">Get Email Updates</a></li> 4. <li><a href="#">Follow us on Twitter</a></li> 5. </ul>

Then we can refer to it in our css:

view plaincopy to clipboardprint?

1. ul#subscribe li a { 2. font-size: 18px; 3. }

Page 43: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 43 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Now we need to style our sidebar: add padding, margins, backgrounds and borders. First let’s get rid of thebullets:

view plaincopy to clipboardprint?

1. #sidebar ul { 2. list-style: none; 3. }

OK so it’s still way in the wrong spot, so let’s fix that by adding margins to the top and left. Whenmeasuring in your psd, measure to where the border of the sidebar begins.

view plaincopy to clipboardprint?

1. #sidebar { 2. float: left; 3. margin-left: 55px; 4. margin-top: 35px; 5. }

Now for the background: underneath the margin-top property, add the background and border properties:

view plaincopy to clipboardprint?

1. background: #d4d6d3; 2. border: 1px solid #BEBDBD;

Next we’ll add 15 px of padding on all sides:

view plaincopy to clipboardprint?

1. padding: 15px;

And then add the padding to our text styles to space out our menu:

view plaincopy to clipboardprint?

1. #sidebar h3 { 2. font-size: 24px; 3. color: #044055; 4. font-weight: normal; 5. padding-bottom: 20px; 6. padding-left: 15px; 7. } 8. 9. #sidebar ul {

10. list-style: none; 11. padding-bottom: 25px; 12. } 13. 14. #sidebar ul li a { 15. font-size: 14px; 16. color: #393838; 17. } 18. 19. ul#subscribe li { 20. padding-bottom: 5px; 21. } 22. 23. ul#subscribe li a { 24. font-size: 18px; 25. }

Page 44: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 44 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Our sidebar already looks almost perfect, we just need to add in the icons in the subscribe section, and stylethat “join us” anchor tag.

Okay, so let’s get those icons working. Adding images to an unordered list can seem confusing, but if youtake things step by step, it makes perfect sense. But it is a bit tedious.To start, we’re going to have to make some room for the icons. We’re going to set them as backgroundimages, so if we use the padding property to move our list items over a bit, the images won’t be affected.The icons are about 26px wide, so we’ll add some padding to the left of the list items:

view plaincopy to clipboardprint?

1. ul#subscribe li { 2. padding-bottom: 5px; 3. padding-left: 30px; 4. }

Now we need a way to target each separate list item, so we’ll add some id’s in the markup:

view plaincopy to clipboardprint?

1. <ul id="subscribe"> 2. <li id="rss"><a href="#">Subscribe via RSS</a></li> 3. <li id="email"><a href="#">Get Email Updates</a></li> 4. <li id="twitter"><a href="#">Follow us on Twitter</a></li> 5. </ul>

Now we add background images to each list item:

view plaincopy to clipboardprint?

1. li#rss { 2. background: url(images/rss_icon.png) no-repeat; 3. } 4. 5. li#email { 6. background: url(images/email_icon.png) no-repeat; 7. } 8. 9. li#twitter {

10. background: url(images/twitter_icon.png) no-repeat; 11. }

At this point it occurred to me that perhaps 18px was a bit too big for the links here, so I reduced it to a less

Page 45: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 45 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

dramatic 16px, which allowed me to add in a teeny bit more padding on the left without stretching thesidebar out.

view plaincopy to clipboardprint?

1. ul#subscribe li { 2. padding-bottom: 5px; 3. padding-left: 35px; 4. }

Our spartan little sidebar is almost complete! Now to style our button:

We need to target the button, so let’s add a class to the markup: (im using a class instead of an id this time,which is common practice, as we could hypothetically add more buttons later)

view plaincopy to clipboardprint?

1. <a href="#" class="button">Join Our Team</a>

So let’s just fix up the text style and add in our repeating background slice:

view plaincopy to clipboardprint?

1. a.button { 2. color: #393838; 3. text-decoration: none; 4. background: url(images/button_slice.jpg) repeat-x; 5. }

Page 46: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 46 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

as you can see, our background image is there, but it only appears directly behind the text, we need to give itspace to spread out. First, let’s give it a margin to get it into the centre of the sidebar:

view plaincopy to clipboardprint?

1. margin-left: 30px;

and some padding on each side so our button spreads out:

view plaincopy to clipboardprint?

1. padding: 13px 23px;

This is a short-hand way to write the padding properties, and is entirely acceptable, and even encouraged,since it saves space. In this case, it specifies 13px of padding on the top AND bottom, and 23px of paddingon the left and right.

Page 47: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 47 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

the button looks great, but oops! it moved to the right 23px, so let’s reduce our margin a bit to compensate:

view plaincopy to clipboardprint?

1. margin-left: 14px;

Now let’s just give it some space underneath by adding padding to the entire sidebar div:

view plaincopy to clipboardprint?

1. #sidebar { 2. float: left; 3. margin-left: 55px; 4. margin-top: 35px; 5. background: #d4d6d3; 6. border: 1px solid #BEBDBD; 7. padding: 15px 15px 30px 15px; 8. }

here’s that shorthand property again: it goes in this order: top, left, bottom, right. So here it says 15px on allsides except the bottom, which should be 30px.

finally, we just need to add that 1px border to the button class:

view plaincopy to clipboardprint?

1. border: 1px solid #c7c7c7;

Page 48: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 48 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

And there we have it, one sidebar!

Step 28 - The Footer

Last but not least, our simple little footer. We’ll set the footer the same way as we set the header:Using a repeating slice within an div of unspecified width, and then adding the content inside a fixed-width,centred div.This is where our .container div comes in handy, because we don’t need to specify the 800px or margin:autothis time, because it’s already done.Let’s start with the repeating slice:

view plaincopy to clipboardprint?

1. #footer { 2. background: url(images/footer_slice.jpg) repeat-x; 3. }

It’s a start, but it’s really tiny. let’s add some padding, and make the text white:

view plaincopy to clipboardprint?

1. #footer { 2. background: url(images/footer_slice.jpg) repeat-x;

Page 49: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 49 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

3. padding-top: 20px; 4. padding-bottom:60px; 5. margin-top: 40px; 6. color: #fff; 7. }

and the whole thing:

Step 29 - Little Changes

In a browser, stuff looks a bit different than in Photoshop, so we might want to make some minor changes.For example, I’d like a bit more padding above the main content and sidebar. We’ll add it to the bottom ofthe menu.

Page 50: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 50 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

view plaincopy to clipboardprint?

1. ul#menu {padding-bottom: 50px}

I also decided that I wanted the menu to align to the left, so I’m going to remove the padding-left. Now theitems are closer together, because we had padding of 75px on the right and 30px on the left, for a total of105. Now that we’ve taken away the left padding, we need to add it to the right to make up the difference:

view plaincopy to clipboardprint?

1. ul#menu li { 2. float: left; 3. padding-right: 105px; 4. width: 95px; 5. }

And the grand finale:

So next… wait? what? we’re done?We’re done!

Now just some housekeeping to worry about: Validation.

Page 51: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 51 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Step 30 - Validation

Now validation is a crucial step in website design, I’m not going to go into the endless reasons here becausethis article does it for me. Here I’m just going to walk through the process:

HTML Validation

Go to the w3.org Validation Service, select validate by file upload, and select your index.html file, and click“check.”Next… The moment of truth:

RED (Red is bad!)

Don’t worry, it’s not so bad; let’s review what went wrong:looks like I only have one error:

They caught me using the same id tag twice, which could cause serious confusion. Since we have lots ofstyles defined for the ul with the id “subscribe”, we’re just going to change the name of the div instead: let’scall it “feeds”Now we need to check that we haven’t defined any styles for #subscribe, and we haven’t!To be safe, let’s reload our page to make sure there were no unintentional changes.Looks good! Now let’s run the validation again:

Success! Our page is now valid XHTML. You can even download an icon if you want to brag.

Note: I was pleasantly surprised to find only one error, if you’re not so lucky, read the suggested info at w3shcools, or check out this article by Glen Stansberry.

It seems we’re done! Ah, but if only it were that easy. We still have to validate our CSS!

CSS Validation

Head over to The w3 CSS Validator and go through the same process as with the html, only this time selectyour style.css file. Checking…

We’re Valid!

However, we did get a couple warnings. To stay within the good graces of the church, we should certainlypay attention to them:

Page 52: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 52 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for more daily web development tuts andarticles.

It’s just a few little problems: we should have declared widths for all our floated items. Again, thesesuggestions are optional, but it’s best to listen to constructive criticisms.Cleaning Up: our tagline, menu unordered list items, and sidebar all need to have widths declared. We alsowant to do this without changing the appearance of the page.First up, the tagline. We can just make a rough guess on this one, it’s about 400px wide.

view plaincopy to clipboardprint?

1. #tagline { 2. float: left; 3. padding-top: 20px; 4. padding-left: 20px; 5. width: 400px; 6. }

And reload: no change, excellent. Next, the menu list items. this is a little trickier: Our page is 800px wide,so that’s the maximum total width of all the list items together. If we divide by the four list items, and setthe width to 200px, the items get mixed up and list vertically. This is because we have padding on eitherside of each list items: 30px on the left and 75px on the right. Subtract that 105 from 200, and the remainingwidth is 95px.

view plaincopy to clipboardprint?

1. ul#menu li { 2. float: left; 3. padding-left: 30px; 4. padding-right: 75px; 5. width: 95px; 6. }

Same idea with the sidebar: let’s first take a look at the width of the content area: 510px. The remainder inour 800px page is 290px, but first we need to subtract all the padding on the left and right: 290-30=260.Next subtract the left margin, and we’re left with 205px. One last problem: our 1px border, so let’s subtractanother 2px, and set the width of the sidebar to 203px. Check it again, no change.

Excellent, if we validate again, no errors, not even a warning!Our webpage, as far as w3c standards are concerned, is perfect.

Conclusion

So there you have it, one very simple, well-coded website. Throughout this tutorial, my hope is that youpicked up some valuable skills to apply to your own designs, and are now ready to get started coding yourown sites.

0

Page 53: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 53 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

Tessa Thornton is TessaT on Tutsmarketplace

By Tessa ThorntonI'm a University of Toronto student, majoring in philosophy. I recently took up web design as a hobby andhave learned a great deal in a short time, largely thanks to the resources of the online community. I'd like toshare what I've learned and contribute to the knowledge base available to new learners. Check out MyWebsite!

Page 54: HTML and Css From PDF Tutorial

10/27/10 11:45 AMDesign and Code Your First Website in Easy to Understand Steps | Nettuts+

Page 54 of 54http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/