Adding styles
This presentation is the property of its rightful owner.
Sponsored Links
1 / 6

Adding styles PowerPoint PPT Presentation


  • 80 Views
  • Uploaded on
  • Presentation posted in: General

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.

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Adding styles

Adding styles

  • XHTML divs and spans


Structuring your pages

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


Page structure

Page structure

Tagline

Header

Site Branding


Add a header div

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


Add a div for the nav

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


Add a div for the nav1

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


  • Login