Embed Size (px)
Citation preview
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 intodistinct sections. Adds structural meaning to a page
about.htmlabout.html
3
Page structure
Header Site BrandingTagline
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
![Me 5th Sem Turbo Machines [10me56]Unit 1,2,3,4,5,6](https://img.pdfslide.us/doc/110x75/56d6be671a28ab301691f75f/me-5th-sem-turbo-machines-10me56unit-123456.jpg)
