Build Your Own Website The Right Way Using HTML & CSS

Build Your Own Website The Right Way Using HTML & CSS

Language: English

Pages: 500

ISBN: 0987090852

Format: PDF / Kindle (mobi) / ePub

With over 60,000 copies sold since its first edition, this SitePoint best-seller has just had a fresh update to include recent advances in the web industry.

With the first two editions coming highly recommended by established, leading web designers and developers, the third edition with all its extra goodies will continue that trend. Also fully updated to include the latest operating systems, web browsers and providing fixes to issues that have cropped up since the last edition.

Readers will learn to:

  • Style text and control your page layout with CSS
  • Create and Optimize graphics for the Web
  • Add interactivity to your sites with forms
  • Include a custom search, contact us page, and a News/Events section on your site
  • Track visitors with Google Analytics
  • Extend your reach and connect your site with Social Media
  • Use HTML5&CSS3 to add some cool, polished features to your site
  • Use diagnosis/debug tools to find any problems

And lots more.

Objective-C Fundamentals

Getting Started with Mule Cloud Connect: Accelerating Integration with SaaS, Social Media, and Open APIs

Pragmatic Guide to Sass

The Bottom Billion: Why the Poorest Countries are Failing and What Can Be Done About It

Bad Samaritans: The Myth of Free Trade and the Secret History of Capitalism












perfect. To use this address, a site visitor would need to copy and paste the address into an email message. Surely there’s a simpler way? There certainly is:

To find out more, contact Club Secretary Bob Dobalina on 01793 641207 or email

This clickable email link uses the a element, which is used to create links on web pages (this will be explained later in this chapter). The mailto: prefix tells the browser that the link

What’s happening here? Perhaps a CSS-to-English translation is required. This CSS rule means, “For any paragraph element that occurs inside an element that has an id of tagline, set the text to italics and the font to Georgia, Times, or some other serif font if you don’t have either of those.” Getting a Positive ID The # notation in the CSS refers to an element with a specific id attribute—in this case, tagline. We’ll learn more about selecting ids and manipulating them in subsequent chapters.

everyone gets a trustworthy dive buddy.

121 122 Build Your Own Web Site The Right Way Using HTML & CSS Actually, to refer to the separate examples we saw previously, even the markup shown below would constitute acceptable and valid XHTML (although it may seem like overkill):

Bubble Under is a group of diving enthusiasts…

Watch Your Symmetry One of the rules of XHTML is that opening and closing

} Save style1.css, then take a look at your web site in a browser. Figure 4.17 shows what you should see. 137 138 Build Your Own Web Site The Right Way Using HTML & CSS Figure 4.17. The navigation displaying definite dimensions Another tweak we’ll make to the navigation is changing the background color: style1.css (excerpt) #navigation { width: 180px; border: 1px dotted navy; background-color: #7da5a8; } I’ve chosen another shade of blue (remember from Chapter 3 that a range of

chapter). First, let’s take a look at one more aspect you should know about absolute positioning. More Absolute Positioning So far, all our positioning has been relative to the viewport. Whenever you’ve posi­ tioned anything, you’ve positioned it from the top left corner of the page. When you start to play around with absolutely positioned elements, and you start putting them inside each other, a different approach is required. To illustrate, let’s take our red box example from before, and add a

Download sample