1 / 3

HTML and CSS

HTML and CSS. Very quick intro. Sample html. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/DTD/strict.dtd"> <html> <head> <title>A Web Title</title> <link rel =" stylesheet " href ="example.css" type="text/ css " /> </head> <body>

chad
Download Presentation

HTML and CSS

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. HTML and CSS Very quick intro

  2. Sample html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/DTD/strict.dtd"> <html> <head> <title>A Web Title</title> <link rel="stylesheet" href="example.css" type="text/css" /> </head> <body> <div id="links"> <ul> <li><a href="">Go here</a></li> <li><a href="">No, go here</a></li> </ul> </div> <div id="content"> <h1>This is a header</h1> <p>Bet you want to know why you're here</p> <div class="important"> <h2>This is important</h2> <p>Let me explain why...</p> </div> <h2 class="notice">Sections help us decode the site</h2> <p>Here's some info about this section</p> <imgsrc="sm_crazybird.gif" alt="something" /> <h2 class="notice">This is another section for our site</h2> <p>Here's some info about this section</p> <div class="important"> <h2>Some more stuff that's important</h2> <p>And make sure you don't forget!</p> </div> </div> <!-- end content --> </body> </html>

  3. Sample CSS body {background: cyan; } /* style the "links" menu" */ /* The div size is 150x700. Position is 30 px from the top */ div#links {position: absolute; top: 30px; left: 0; width: 150px; height: 700px; font: 16px Verdana, sans-serif;} /* Style the actual links */ /* override the ul so it's closer to the left edge */ div#linksul {padding-left: 2px; } /* no underline on the links */ div#linksli {list-style-type: none;} /* give it a background and color */ div#links a {background: blue; color: #F7C8D5; display: block; text-align: center; font: bold 1em sans-serif; padding: 2px 4px; margin: 0; margin-bottom: 2px; border-width: 0; text-decoration: none; } /* Special style for when the mouse is hovering */ div#links a:hover {background: #94B3F2; color: #411;} /* Style the content area */ div#content {background: #232334; color: #F7F7ED; } div#content {position: absolute; top: 10px; left: 160px; right: 25px; font: 13px Verdana, sans-serif; padding: 10px; border: solid #cbc8f6;} div#content p {margin: 0 1em 1em; font-size: 12px;} h1 { background: #cbc8f6; color: blue; } /* Style elements within a class of div */ div.important h2 { color: red; } div.important p { font-style: italic; } /* Style specific elements with a class */ h2.notice {color: yellow; } /* One style for images (could use classes, ids for more control */ img {float: right; } Which CSS commands will be important?

More Related