1 / 6

Adding styles

Adding styles. XHTML divs and spans. Structuring your pages.  Heading <hn> </hn> header tags n = 1,2,3,4,5,6  Paragraphs <p> </p> paragraphs Divisions <div> </div> allows you to group elements – breaking the page into distinct sections. Adds structural meaning to a page.

evette
Download Presentation

Adding styles

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Adding styles • XHTML divs and spans

  2. Structuring your pages Heading <hn> </hn> header tags n = 1,2,3,4,5,6  Paragraphs <p> </p> paragraphs Divisions <div> </div> allows you to group elements – breaking the page into distinct sections. Adds structural meaning to a page about.html

  3. Page structure Tagline Header Site Branding

  4. Add a header <div> <body> <div id="header"> <div id="sitebranding"> <h1>BubbleUnder.com</h1> </div> <div id="tagline"> <p>Diving club for the south-west UK - let's make a splash!</p> </div> </div> <!-- end of header div --> <ul> <li>Home</li> <li>About Us</li> <li>Contact Us</li> </ul> Header Site Branding Tagline id attributes – no two can be named the same id name should describe the purpose of the section • attributes should be • written in lowercase • their value should be contained in quotation marks

  5. Add a <div> for the nav <body> <div id="header"> <div id="sitebranding"> <h1>BubbleUnder.com</h1> </div> <div id="tagline"> <p>Diving club for the south-west UK - let's make a splash!</p> </div> </div> <!-- end of header div --> <div id=“navigation"> <ul> <li>Home</li> <li>About Us</li> <li>Contact Us</li> </ul> </div> <!-- end of navigation div --> navigation

  6. Add a <div> for the nav ----------- <div id=“navigation"> <ul> <li>Home</li> <li>About Us</li> <li>Contact Us</li> </ul> </div> <!-- end of navigation div --> div id="bodycontent"> <h2>About Us</h2> <p><span class="fun">Bubble Under</span> is a group of diving enthusiasts based in the south-west UK who meet up for diving trips in the summer months when the weather is good and the bacon rolls are flowing. We arrange weekends away as small groups to cut the costs of accommodation and travel and to ensure that everyone gets a trustworthy dive buddy.</p> <p>Although we're based in the south-west, we don't stay on our own turf: past diving weekends away have included trips up to Scapa Flow in Scotland and to Malta's numerous wreck sites.</p> <p>When we're not diving, we often meet up in a local pub to talk about our recent adventures (<em>any</em> excuse, eh?).</p> <p>Or as our man Bob Dobalina would put it:</p> <blockquote class="fun"><p>"Happiness is a dip in the ocean followed by a pint or two of Old Speckled Hen. You can quote me on that!"</p></blockquote> </div> <!-- end of bodycontent div --> Body content

More Related