Html & Css :Tags Example 2
Add dotted bottom line to abbr and acronym
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title><strong>, <em> and Other Phrase Elements</title> <style type="text/css" media="screen"> body { font-family: verdana, sans-serif; font-size: 12px; } div { margin-bottom: 30px; } #divID abbr, acronym { border-bottom: 1px dotted; cursor: help; } </style> </head> <body> <div id="divID"> <abbr title="eXtensible Hypertext Markup Language">XHTML</abbr> 1.0 is a reformulation of HTML 4.01 in XML, and combines the strength of HTML 4 with the power of XML. </div> </body> </html>
Text element: the abbreviation element
<html> <head> <title>Text element: the abbreviation element</title></head> <body> <ul> <li><abbr>This is how the abbreviation element displays.</abbr></li> </ul> </body> </html>
address' Example
<html> <head> <title>address element example</title> </head> <body> <address style="color:blue">blue address</address> <address style="color:red">red address</address> </body> </html>
The Address Element
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>The Address Element</title> </head> <body> <p>The following address is contained inside an <address> element.</p> <address>Press, address</address> </body> </html>
Address tag
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Listing 4-5. Address</title> </head> <body> <address> FirstName LastName<br /> Web Designer<br /> 1 Street, UK<br /> </address> </body> </html>
The Element
<base href="http://www.exampleSite2.com/" /> In this case, a relative URL like this one: Entertainment/Arts/index.html ends up with the browser requesting this page: http://www.exampleSite2.com/Entertainment/Arts/index.html
Base tag
<?xml version"1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <base href=" http://www.java2s.com/style/" /> </head> <body> <img src="logo.png" /> </body>
balance' Example
<HTML>
<head>
<Title>Example For</Title>
<bgsound src="yourmoviefile.wav"
balance=0
loop=3>
</head>
<BODY>
</BODY>
</HTML> bgsound' plays a sound while the user visits the page
<html>
<head>
<title>bgsound element example</title>
<bgsound src="yoursoundfile.wav" loop="3">
<script language="javascript">
function stopSound() {
document.all.tags("bgsound")[0].volume = -10000;
}
function restartStop() {
document.all.tags("bgsound")[0].volume = 0;
}
</script>
</head>
<body>
Please use your own wav file to test the code.
<br><br><br><br><br><br>
<button type="button" onClick="stopSound()">Stop the music</button>
<br>
<button type="button" onClick="restartStop()">Restart the music</button>
</body>
</html>volume' indicates the sound clip volume
<HTML> <head> <bgsound src="yoursoundfile.wav" balance="0" loop="1" volume="-500"> </head> <BODY> </BODY> </HTML
dfn' Example
<html>
<head>
<title>dfn element example</title>
</head>
<body>
<p>
<acronym>W3C</acronym> stands for <dfn>World Wide Web Consortium.</dfn>
</p>
</body>
</html>Definition
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Definition</title> </head> <body> <p>Definition<dfn title="short for weblog, a kind of online journal">blogs</dfn>, or even do some honest work.</p> </body> </html>
Use UL and LI to create definition layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> </style> </head> <body> <div id="divID"> <ul> <li>CSS<br /> A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.</li> <li>XHTML<br /> A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML.</li> <li>XML<br /> A simple, very flexible text format derived from SGML.</li> </ul> </div> </body> </html>
dd': Definition description
<html>
<head>
<title>dd element example</title>
</head>
<body>
<dl>
<dt><TABLE></dt>
<dd>an html element.</dd>
<dt>border-color</dt>
<dd>a style sheet property.</dd>
<dt>innerText</dt>
<dd>a JavaScript property.</dd>
<dt>cloneNode()</dt>
<dd>a JavaScript method.</dd>
</dl>
</body>
</html>Add background image for DD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> #divID dd { margin-left: 15px; padding-left: 15px; color: #999; background: url(img/dd_arrow.gif) no-repeat 0 2px; } </style> </head> <body> <div id="divID"> <dl> <dt>CSS</dt> <dd>A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.</dd> <dt>XHTML</dt> <dd>A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML.</dd> <dt>XML</dt> <dd>A simple, very flexible text format derived from SGML.</dd> </dl> </div> </body> </html>
Add margin, padding and set color for DD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> #divID dd { margin-left: 15px; padding-left: 15px; color: #999; background: url(img/dd_arrow.gif) no-repeat 0 2px; } </style> </head> <body> <div id="divID"> <dl> <dt>CSS</dt> <dd>A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.</dd> <dt>XHTML</dt> <dd>A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML.</dd> <dt>XML</dt> <dd>A simple, very flexible text format derived from SGML.</dd> </dl> </div> </body> </html>
dl, dt and dd
<html>
<head>
<title>Index Page</title>
</head>
<body>
<dl>
<dt>Headings<dt>
<dd><a href="">headings.htm</a></dd>
<dt>Text</dt>
<dd><a href="">text.htm</a></dd>
<dt>Unordered Lists</dt>
<dd><a href="">ulist.htm</a></dd>
<dt>Multi-level Lists</dt>
<dd><a href="">olist2.htm</a></dd>
<dt>Ordered Lists</dt>
<dd><a href="">olist.htm</a></dd>
</dl>
Now try adding a few items of your own to this list.
</body>
</html>direction: rtl
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>CSS Example</title> <style rel="stylesheet" type="text/css"> body { color: #000000; background-color: #ffffff; font-family: arial, verdana, sans-serif; font-size: 12px; } .ltr { direction: ltr; } .rtl { direction: rtl; } </style> </head> <body> <h1>direction</h1> <p class="ltr">This text should flow left to right.</p> <p class="rtl">This text should flow right to left.</p> </body> </html>
Right aligned list item
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> ul.rtl { direction: rtl; } .t {text-align:left;} .listouter { width:150px; } </style> </head> <body> <ul class="rtl"> <li>Hello</li> <li>Hello hello</li> <li>Hello Hi</li> <li>Hello Hello</li> <li>Hello HI</li> <li>Hello Hello</li> <li>Hello Hi</li> <li>Hello</li> </ul> </div> </body> </html>
direction:ltr
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>CSS Example</title> <style rel="stylesheet" type="text/css"> body { color: #000000; background-color: #ffffff; font-family: arial, verdana, sans-serif; font-size: 12px; } .ltr { direction: ltr; } .rtl { direction: rtl; } </style> </head> <body> <h1>direction</h1> <p class="ltr">This text should flow left to right.</p> <p class="rtl">This text should flow right to left.</p> </body> </html>
profile' indicates the URI of one or more metadata profiles
<HTML> <head profile="http://www.java2s.com"> <Title>Example For profile</Title> <meta name="author" content="Your name"> <meta name="copyright" content="Copyright notice"> <meta name="keywords" content="html,reference,JavaScript,css"> <meta name="date" content="1 Aug 2006 17:31:00 EST"> </head> <BODY> </BODY> </HTML>
head' creates the header section of an HTML document
<html>
<head>
<title>head element example</title>
<link rel="stylesheet" type="text/css" href="http://www.java2s.com/style/jss.css">
<meta name="description" CONTENT=" Java examples (example source code) Organized by topic " />
<meta name="keywords" CONTENT=" Java examples (example source code) Organized by topic "/>
<meta http-equiv="content-style-type" content="text/css"/>
</head>
<body>This is the content of the page</body>
</html>kbd' Example
<html> <head> <title>kbd element example</title> </head> <body> <p align="center">You can apply the <font size="5"> <kbd style="font-weight:normal">systemLanguage</kbd> </font> attribute to nearly any element. </p> </body> </html>
kbd Element for Keyboard Instructions
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Representing Code, Keyboard Instructions and Programming Variables</title> </head> <body> <h2>The <kbd> Element for Keyboard Instructions</h2> <p>To force quit an application in Windows, hold down the <kbd>ctrl</kbd>, <kbd>alt</kbd> and <kbd>delete</kbd> keys together.</p> </body> </html>
Style for kbd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Phrase elements</title> <style type="text/css"> kbd { background-color: #f1e7dd; border: 1px outset #333; color: #333; padding: 2px 5px; } </style> </head> <body> <p>Press <kbd>A</kbd>, then <kbd>B</kbd>, then <kbd>C</kbd>. Finally, press the <kbd>Enter</kbd> key to continue. </p> </body> </html>
Border style list
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title></title> <style type='text/css'> div { padding: 10px; margin: 10px; border: thick black; } </style> </head> <body> <div style='border-style: hidden;'> border-style: hidden; </div> <div style='border-style: dotted;'> border-style: dotted; </div> <div style='border-style: dashed;'> border-style: dashed; </div> <div style='border-style: solid;'> border-style: solid; </div> <div style='border-style: double;'> border-style: double; </div> <div style='border-style: groove;'> border-style: groove; </div> <div style='border-style: ridge;'> border-style: ridge; </div> <div style='border-style: inset;'> border-style: inset; </div> <div style='border-style: outset;'> border-style: outset; </div> <div style='border-style: none;'> border-style: none; </div> </body> </html>
LI border top: 1px solid black
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li { border-top: 1px solid black; padding: .3em 0; } ul { margin-left: 40px; padding-left: 0px; border-bottom: 1px solid black; list-style: none; width: 36%; } </style> </head> <body> <ul> <li>V</li> <li>S</li> <li>T</li> <li>P</li> </ul> </body> </html>
Shading border for list
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" media="Screen"> div { padding: 10px; margin-bottom: 15px; border: 2px solid black; } LI { margin-top: 0px; margin-bottom: 10px; padding-right: 5px; background-color: gold; padding-top: 5px; padding-bottom: 5px; border-left: 1px solid gray; border-right: 2px solid black; border-top: 1px solid gray; border-bottom: 2px solid black; } </style> </head> <body> <div> <ul> <li>Normal List</li> <li>Normal List</li> </ul> </body> </html>
List item with border
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li { border-top: 1px solid black; padding: .3em 0; } ul { margin-left: 40px; padding-left: 0px; border-bottom: 1px solid black; list-style: none; width: 36%; } </style> </head> <body> <p>Consectetuer adipiscing elit: <ul> <li>Vivamus purus enim</li> <li>Sollicitudin vitae</li> <li>Tincidunt sit amet</li> <li>Pretium vel, libero</li> </ul> <p>Sed sed nisi. Morbi gravida, odio at aliquam lobortis, urna massa vehicula mi, et posuere tortor elit eget est. Nulla ligula. Etiam pulvinar. Quisque ante quam, ultricies quis, rutrum dignissim, fermentum a, est. Nulla felis dolor, tempor non, posuere ut, ornare ac, eros. Cras in metus. Sed rutrum lectus ut nibh. Pellentesque ipsum.</p> </body> </html>
li:after content: ", ";
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul, li { display: inline; margin: 0; padding: 0; font-weight: bold; font-style: italic; } li:after { content: ", "; } li.last:after { content: "."; } p { display: inline; } </style> </head> <body> <h3> Table of Contents </h3> <p> As proposed, the contents of the paper will contain the following sections: </p> <ul> <li>I'm not the Same Person I was in the Database</li> <li>Past Breaches of Our Privacy</li> <li>The Best of Intentions</li> <li>Whatever Happened to Automation?</li> <li class="last">The Smart Choice is Not Needing to Make One</li> </ul> <p> If there are any objections to how these sections are divided, please let <a href="nick@heatvision.com">Nicholas</a> know about it. </p> </body> </html>
li after
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li:after { content: ", "; } </style> </head> <body> <ul> <li>Database</li> <li>Privacy</li> <li>Best</li> <li>Whatever</li> <li class="last">Make One</li> </ul> </body> </html>
li.className:after
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li.last:after { content: "."; } </style> </head> <body> <ul> <li>Database</li> <li>Privacy</li> <li>Best</li> <li>Whatever</li> <li class="last">Make One</li> </ul> </body> </html>
List counter reset
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> ol { counter-reset: item } li {display:block;} li:before { counter-increment: item ; content: counters(item, ".") " "; } </style> </head> <body> <ol> <li>List Item</li> <li>List Item <ol> <li>List Item</li> <li>List Item <ol> <li>List Item</li> <li>List Item</li> </ol> </li> <li>List Item</li> </ol> </li> <li>List Item</li> </ol> </body> </html>
List counter
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> ol { counter-reset:Item } li:before { content: counter(Item) " "; counter-increment: Item } </style> </head> <body> <ol> <li>List Item</li> <li>List Item <ol> <li>List Item</li> <li>List Item <ol> <li>List Item</li> <li>List Item</li> </ol> </li> <li>List Item</li> </ol> </li> <li>List Item</li> </ol> </body> </html>
samp' Example
<html>
<head>
<title>samp element example</title>
</head>
<body>
<p>
<font size="5">
<samp style="fontweight:normal">
Java Language
</samp>
</font>
</p>
</body>
</html>Create Console window like style to display code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Phrase elements</title> <style type="text/css"> samp { background: #000; border: 3px groove #ccc; color: #ccc; display: block; padding: 5px; width: 300px; } </style> </head> <body> <p><samp>This is a test. This is a test. <br /> Content-type: text/html<br /> <h1>Hello World</h1></samp></p> </body> </html>
samp Element for Sample Program Output
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Representing Code, Keyboard Instructions and Programming Variables</title> </head> <body> <h2>The <samp> Element for Sample Program Output</h2> <p><samp>This is the output from our test script.</samp></p> </body> </html>
type-9' determines how the 'spacer' element is rendered
<HTML> <BODY> <p>text before<spacer type="horizontal" size="10">text after</p> </BODY> </HTML>
spacer' Example
<html>
<head>
<title>spacer element example</title>
</head>
<body>
<p>Text
<spacer type="vertical" size=200>Space
<spacer type="vertical" size=200>Space
<spacer type="vertical" size=200>Space
</p>
</body>
</html>sub' Example
<html>
<head>
<title>sub element example</title>
</head>
<body>
<p align="center">H<sub>2</sub>O and CO<sub>2</sub>.</p></body></html>To subscript text use sub tags
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> </head> <body> <p>Only <sub>one</sub> download per hour is permitted.</p> </body> </html>
Changing ordered list markers to upper-roman
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Changing ordered list markers</title> <style type="text/css"> body { line-height: 1.5em; } ol { list-style-type: upper-roman; } </style> </head> <body> <ol> <li>Combine.</li> <li>Gradually.</li> <li>Place.</li> <li>Transfer.</li> <li>divide.</li> </ol> </body> </html>
font size for Subscript and Superscript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" media="Screen"> sub { vertical-align: -0.5em; font-size: 0.75em; } sup { vertical-align: 0.5em; font-size: 0.75em; } * .large { font-size: 32px; } sub { font-size: 0.9em; } sup { font-size: 0.9em; } </style> </head> <body> <p class="large">A<sub>1</sub> B<sup>2</sup>C<sup>E</sup></p> </body> </html>
Using tbody to wrap table body
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <title>Auto width on tables</title> <style type='text/css'> table { width: auto; background: black; color: white; } </style> </head> <body> <table> <tbody> <tr> <td>How will this table react to auto width?</td> </tr> </tbody> </table> </body> </html>
tbody' Example
<html> <head> <title>tbody element example</title> </head> <body> <table width="500" align="center"> <thead style="color:blue" align="center"> <td>This cell is in the thead rows group.</td> <td>This cell is in the thead rows group.</td> <td>This cell is in the thead rows group.</td> </thead> <tbody> <tr> <td>This cell is in the tbody rows group.</td> <td>This cell is in the tbody rows group.</td> <td>This cell is in the tbody rows group.</td> </tr> <tr> <td>This cell is in the tbody rows group.</td> <td>This cell is in the tbody rows group.</td> <td>This cell is in the tbody rows group.</td> </tr> </tbody> <tfoot style="color:red" align="right"> <td>This cell is in the tfoot rows group.</td> <td>This cell is in the tfoot rows group.</td> <td>This cell is in the tfoot rows group.</td> </tfoot> </table> </body> </html>
th font-size: 18px;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <title>:first-child</title> <style type='text/css'> body { font-size: 12px sans-serif; } table { background: slateblue; color: #fff; width: 100%; border-collapse: collapse; border: 1px solid mediumslateblue; } td { border: 1px solid darkslateblue; padding: 2px; } th { background: lightsteelblue; color: darkslateblue; font-size: 18px; text-align: left; } table tbody tr:first-child td { background: mediumslateblue; } </style> </head> <body> <h1>Discography</h1> <table> <thead> <tr> <th>Album</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td>A</td> <td>March 1963</td> </tr> <tr> <td>B</td> <td>November 1963</td> </tr> <tr> <td>C</td> <td>July 1964</td> </tr> <tr> <td>D</td> <td>December 1964</td> </tr> </tbody> </table> </body> </html>
table header font-weight: bold;
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>CSS Example</title> <style rel="stylesheet" type="text/css"> th { height: 50px; font-weight: bold; text-align: left; background-color: #cccccc; } </style> </head> <body> <table> <caption>Font properties</caption> <tr> <th>Property</th> <th>Purpose</th> </tr> <tr> <td class="code">font-family</td> <td>Specifies the font used.</td> </tr> <tr> <td class="code">font-size</td> <td>Specifies the size of the font used.</td> </tr> <tr> <td class="code">font-style</td> <td>Specifies whether the font should be normal, italic, or oblique.</td> </tr> <tr> <td class="code">font-weight</td> <td class="last">Specifies whether the font should be normal, bold, bolder, or lighter.</td> </tr> </table> </body> </html>
th font-family: "Trebuchet MS", Arial, Verdana;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Spotlight | A Free CSS Template by RamblingSoul</title> <style type='text/css'> table { width: 95%; background:red; border: 1px solid #C5B798; margin-top: 15px; margin-bottom: 25px; } td { border-bottom: 1px solid #CDC1A7; padding: 5px; } th { font-family: "Trebuchet MS", Arial, Verdana; font-size: 14px; padding: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CDC1A7; background-color: #CDC1A7; color: #993300; } </style> </head> <body> <table cellspacing="0" cellpadding="3"> <tr> <th scope="col">Lorem Ipsum</th> <th scope="col">Dolor Sit</th> <th scope="col">Lorem</th> <th scope="col">Ipsum </th> <th scope="col">Dolor</th> </tr> <tr class="alttr1"> <th scope="row">ABCD</th> <td>Noman's Land</td> <td>1989</td> <td>1200</td> <td>200%</td> </tr> <tr class="alttr2"> <th scope="row">XYZ</th> <td>Nobody Home</td> <td>1941</td> <td>120</td> <td>50%</td> </tr> <tr class="alttr1"> <th scope="row">ABCD</th> <td>Noman's Land</td> <td>1989</td> <td>1200</td> <td>200%</td> </tr> <tr class="alttr2"> <th scope="row">XYZ</th> <td>Nobody Home</td> <td>1941</td> <td>120</td> <td>50%</td> </tr> <tr class="alttr1"> <th scope="row">ABCD</th> <td>Noman's Land</td> <td>1989</td> <td>1200</td> <td>200%</td> </tr> <tr class="alttr2"> <th scope="row">XYZ</th> <td>Nobody Home</td> <td>1941</td> <td>120</td> <td>50%</td> </tr> </table> </body> </html>
th font-size: 14px;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Spotlight | A Free CSS Template by RamblingSoul</title> <style type='text/css'> table { width: 95%; background:red; border: 1px solid #C5B798; margin-top: 15px; margin-bottom: 25px; } td { border-bottom: 1px solid #CDC1A7; padding: 5px; } th { font-family: "Trebuchet MS", Arial, Verdana; font-size: 14px; padding: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CDC1A7; background-color: #CDC1A7; color: #993300; } </style> </head> <body> <table cellspacing="0" cellpadding="3"> <tr> <th scope="col">Lorem Ipsum</th> <th scope="col">Dolor Sit</th> <th scope="col">Lorem</th> <th scope="col">Ipsum </th> <th scope="col">Dolor</th> </tr> <tr class="alttr1"> <th scope="row">ABCD</th> <td>Noman's Land</td> <td>1989</td> <td>1200</td> <td>200%</td> </tr> <tr class="alttr2"> <th scope="row">XYZ</th> <td>Nobody Home</td> <td>1941</td> <td>120</td> <td>50%</td> </tr> <tr class="alttr1"> <th scope="row">ABCD</th> <td>Noman's Land</td> <td>1989</td> <td>1200</td> <td>200%</td> </tr> <tr class="alttr2"> <th scope="row">XYZ</th> <td>Nobody Home</td> <td>1941</td> <td>120</td> <td>50%</td> </tr> <tr class="alttr1"> <th scope="row">ABCD</th> <td>Noman's Land</td> <td>1989</td> <td>1200</td> <td>200%</td> </tr> <tr class="alttr2"> <th scope="row">XYZ</th> <td>Nobody Home</td> <td>1941</td> <td>120</td> <td>50%</td> </tr> </table> </body> </html>
th font-weight: bold;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <title></title> <style type='text/css'> body { font-family: monospace; padding: 10px; margin: 10px; } table.recipe { width: 100%; margin-bottom: 5px; } caption { text-align: left; margin-bottom: 5px; text-transform: lowercase; font-size: 160%; padding: 5px; letter-spacing: 10px; font-weight: bold; } table.recipe thead th { font-weight: bold; font-size: 150%; color: black; } table.recipe thead th, table.recipe tbody td { padding: 5px; text-transform: lowercase; } table.recipe tbody td, table.recipe tfoot td { font-size: 130%; } table.recipe tfoot td { padding: 5px; } table.recipe tfoot td p { padding: 5px; } li { margin-left: 30px; padding-left: 30px; } </style> </head> <body> <table class='recipe'> <caption> Spicy Thai Peanut Sauce </caption> <colgroup> <col/> <col/> <col/> <col/> </colgroup> <thead> <tr> <th> quantity </th> <th> measurement </th> <th> product </th> <th> instructions </th> </tr> </thead> <tbody> <tr> <td> ½ </td> <td> CUPS </td> <td> Peanut Oil </td> <td></td> </tr> <tr> <td> 12 </td> <td> Each </td> <td> Serrano Peppers </td> <td> Sliced </td> </tr> <tr> <td> 16 </td> <td> Each </td> <td> Garlic Cloves </td> <td> Minced </td> </tr> <tr> <td> 2 </td> <td> CUPS </td> <td> Peanut Butter </td> <td></td> </tr> <tr> <td> 1 </td> <td> CUPS </td> <td> Soy Sauce </td> <td></td> </tr> <tr> <td> ½ </td> <td> CUPS </td> <td> Lime Juice </td> <td></td> </tr> <tr> <td> 4 </td> <td> TABLESPOONS </td> <td> Sesame Oil </td> <td></td> </tr> <tr> <td> 4 </td> <td> CUPS </td> <td> Coconut Milk </td> <td></td> </tr> <tr> <td> ½ </td> <td> CUPS </td> <td> Honey </td> <td></td> </tr> <tr> <td> ½ </td> <td> CUPS </td> <td> Brown Sugar </td> <td></td> </tr> </tbody> <tfoot> <tr> <td colspan='4'> <ul> <li> Sauté sliced serranos and garlic in peanut oil til lightly browned. </li> <li> Add all other ingredients and stir till dissolved. </li> <li> Simmer for 5 minutes. </li> <li> Purée all in blender. </li> </ul> <p> Sauté your favorite vegetables; onions, mushrooms, green peppers, and squash work best. Sprinkle with allspice, salt, and pepper. Optionally add walnuts or pine nuts. Add browned chicken or tofu and glaze with sauce. Serve with jasmine rice. </p> </td> </tr> </tfoot> </table> </body> </html>
th font-size: 150%;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <title></title> <style type='text/css'> body { font-family: monospace; padding: 10px; margin: 10px; } table.recipe { width: 100%; margin-bottom: 5px; } caption { text-align: left; margin-bottom: 5px; text-transform: lowercase; font-size: 160%; padding: 5px; letter-spacing: 10px; font-weight: bold; } table.recipe thead th { font-weight: bold; font-size: 150%; color: black; } table.recipe thead th, table.recipe tbody td { padding: 5px; text-transform: lowercase; } table.recipe tbody td, table.recipe tfoot td { font-size: 130%; } table.recipe tfoot td { padding: 5px; } table.recipe tfoot td p { padding: 5px; } li { margin-left: 30px; padding-left: 30px; } </style> </head> <body> <table class='recipe'> <caption> Spicy Thai Peanut Sauce </caption> <colgroup> <col/> <col/> <col/> <col/> </colgroup> <thead> <tr> <th> quantity </th> <th> measurement </th> <th> product </th> <th> instructions </th> </tr> </thead> <tbody> <tr> <td> ½ </td> <td> CUPS </td> <td> Peanut Oil </td> <td></td> </tr> <tr> <td> 12 </td> <td> Each </td> <td> Serrano Peppers </td> <td> Sliced </td> </tr> <tr> <td> 16 </td> <td> Each </td> <td> Garlic Cloves </td> <td> Minced </td> </tr> <tr> <td> 2 </td> <td> CUPS </td> <td> Peanut Butter </td> <td></td> </tr> <tr> <td> 1 </td> <td> CUPS </td> <td> Soy Sauce </td> <td></td> </tr> <tr> <td> ½ </td> <td> CUPS </td> <td> Lime Juice </td> <td></td> </tr> <tr> <td> 4 </td> <td> TABLESPOONS </td> <td> Sesame Oil </td> <td></td> </tr> <tr> <td> 4 </td> <td> CUPS </td> <td> Coconut Milk </td> <td></td> </tr> <tr> <td> ½ </td> <td> CUPS </td> <td> Honey </td> <td></td> </tr> <tr> <td> ½ </td> <td> CUPS </td> <td> Brown Sugar </td> <td></td> </tr> </tbody> <tfoot> <tr> <td colspan='4'> <ul> <li> Sauté sliced serranos and garlic in peanut oil til lightly browned. </li> <li> Add all other ingredients and stir till dissolved. </li> <li> Simmer for 5 minutes. </li> <li> Purée all in blender. </li> </ul> <p> Sauté your favorite vegetables; onions, mushrooms, green peppers, and squash work best. Sprinkle with allspice, salt, and pepper. Optionally add walnuts or pine nuts. Add browned chicken or tofu and glaze with sauce. Serve with jasmine rice. </p> </td> </tr> </tfoot> </table> </body> </html>
Title tag
<?xml version"1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>This text will be displayed within the titlebar</title> </head> <body> </body> </html>
'title' displays a tooltip
<HTML> <BODY> <a id="myL" title="java2s.com" href="http://www.java2s.com/" target=_blank>Did you see the tooltips?</a> Move your mouse on to see the tooltips </BODY> </HTML>
Physical Text Elements
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Physical Text Elements</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> </head> <body> <div class="head">Physical Text Elements</div> <br /> <div class="content"> <h1 align="center">Physical Text Elements</h1> <hr /> <p> This is <b>Bold</b> <br /> This is <i>Italic</i> <br /> This is <tt>Monospaced</tt> <br /> This is <u>Underlined</u> <br /> This is <strike>Strike-through</strike> <br /> This is also <s>Strike-through</s> <br /> This is <big>Big</big> <br /> This is even <big><big>Bigger</big></big> <br /> This is <small>Small</small> <br /> This is even <small><small>Smaller</small></small><br /> This is <sup>Superscript</sup> <br /> This is <sub>Subscript</sub> <br /> This is <b><i><u>Bold, italic, and underlined</u></i></b> </p> </div> </body> </html>
tt' Example
<html> <head> <title>tt element example</title> </head> <body> <tt>This text is rendered using a monospaced font</tt> </body> </html>
table spans
<?xml version"1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Using colspan and rowspan</title> </head> <body> <table border="1" summary="Prices for types of pizza by size"> <caption>Our Pizza Selections</caption> <tr> <th rowspan="5" scope="row">Pizza<br />Type</th> <th colspan="4" scope="col">Size</th> </tr> <tr> <th></th> <th scope="col">Small</th> <th scope="col">Medium</th> <th scope="col">Large</th> </tr> <tr> <td scope="row">Thin Crust</td> <td>3.99</td> <td>4.99</td> <td>6.99</td> </tr> <tr> <td scope="row">Deep Dish</td> <td>4.99</td> <td>6.99</td> <td>8.99</td> </tr> <tr> <td>Stuffed Crust</td> <td>5.99</td> <td>7.99</td> <td>9.99</td> </tr> </table> </body> </html>
rowspan' determines how many table rows a cell can span
<HTML> <BODY> <table border="1"> <tr> <th height="79" rowspan="2">Cell 1</th> <th height="79">Cell 2</th> <th height="79" rowspan="3">Cell 3</th> <th height="79">Cell 4</th> <th height="79">Cell 5</th> </tr> <tr> <th height="79" rowspan="3">Cell 7</th> <th height="79" rowspan="2">Cell 9</th> <th height="79">Cell 10</th></tr> <tr> <th height="79">Cell 6</th> <th height="79">Cell 11</th> </tr> <tr> <th height="79">Cell 12</th> <th height="79">Cell 8</th> <th height="79">Cell 13</th> <th height="79">Cell 14</th> </tr> </table> </BODY> </HTML>
Spanning rows
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Spanning rows</title> </head> <body> <table border="1"> <caption>Spanning rows using the rowspan attribute</caption> <tr> <td bgcolor="#efefef" width="100" height="100"> </td> <td bgcolor="#999999" width="100" height="100"> </td> <td rowspan="3" bgcolor="#000000" width="100" height="100"> </td> </tr> <tr> <td bgcolor="#efefef" height="100"> </td> <td rowspan="2" bgcolor="#999999"> </td> </tr> <tr> <td bgcolor="#efefef" height="100"> </td> </tr> </table> </body> </html>
CSS rowspan test
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>CSS rowspan test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> .tablewrapper { position: relative; } .table { display: table; } .row { display: table-row; } .cell { border: 1px solid red; display: table-cell; } .cell.empty { border: none; width: 100px; } .cell.rowspanned { position: absolute; top: 0; bottom: 0; width: 100px; } </style> </head> <body> <div class="tablewrapper"> <div class="table"> <div class="row"> <div class="cell"> Top left </div> <div class="rowspanned cell"> Center </div> <div class="cell"> Top right </div> </div> <div class="row"> <div class="cell"> Bottom left </div> <div class="empty cell"></div> <div class="cell"> Bottom right </div> </div> </div> </div> </body> </html>
sup' Example
<html>
<head>
<title>sup element example</title>
</head>
<body>
<p align="center" class="explanations">Microsoft<sup>®</sup></p>
</body>
</html>To superscript text use sup tags
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> </head> <body> <p><del>You may download 3.14 x 10<sup>2</sup> </p> </body> </html>
Superscript and subscript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Superscript and subscript</title> </head> <body> <p>a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p> <p>H<sub>2</sub>SO<sub>4</sub></p> </body> </html>
vertical alignment for sub super
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title></title> <style type='text/css'> p { font-size: 16px; } span { font-size: 0.8em; } p#sub span { vertical-align: sub; } p#super span { vertical-align: super; } </style> </head> <body> <p id='sub'> This is normal text. <span>This is subscript text.</span> This is normal text. </p> <p id='super'> This is normal text. <span>This is superscript text.</span> This is normal text. </p> </body> </html>
contenteditable' determines whether an element can be edited or not
<HTML> <BODY> <p contenteditable="true">contenteditable</p> </BODY> </HTML>
p content
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> p.QuickTip:before {content: "Quick Tip: "} </style> </head> <body> <p>Here is a normal paragraph.</p> <p class="QuickTip">This paragraph has a class attribute whose value is QuickTip.</p> <p>Here is a normal paragraph.</p> </body> </html>
Left-aligned static content
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" title="text/css"> .parent{ width: 600px; height: 600px; background: gray; } #l { position: static; text-align: left; background: pink; } </style> </head> <body> <div class="parent"> <p id="l">Left-aligned content</p> </div> </body> </html>
Horizontally and Vertically Center-aligned static Content
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" title="text/css"> .parent{ width: 600px; height: 600px; background: gray; } #c { position: static; text-align: center; line-height: 48px; background: gold; } </style> </head> <body> <div class="parent"> <p id="c">Horizontally and Vertically Center-aligned Content</p> </div> </body> </html>
Right-aligned content
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css" title="text/css"> .parent{ width: 600px; height: 600px; background: gray; } #r { position: static; text-align: right; background: purple; } </style> </head> <body> <div class="parent"> <p id="r">Right-aligned content</p> </div> </body> </html>
p.price:after {content: " Postage and packaging included"}
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> p.price:after {content: " Postage and packaging included"} </style> </head> <body> <h2>Gold Carriage Clock</h2> <p class="description">Description.</p> <p class="price">$29.99</p> </body> </html>
p:after {content: "You need to register to read the full article."; color:#ff0000;}
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>CSS Example</title> <style type='text/css'> h1 {font-size:18pt;} p {font-size:12pt;} p.abstract:after {content: "You need to register to read the full article."; color:#ff0000;} </style> </head> <body> <h1>Beginning Web Programming</h1> <p class="abstract">This book teaches you how to write HTML. </p> </body> </html>
p:after content:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> p.price:after {content: " Postage and packaging included"} </style> </head> <body> <h2>Gold Carriage Clock</h2> <p class="description">This lovely gold plate carriage clock makes the ideal addition to any mantle piece. The clock mechansism is made by leading clockmakers Higgis and Brownsford, and is guaranteed to run for 25 years.</p> <p class="price">$29.99</p> </body> </html>
Marquee Example
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN"> <HTML> <HEAD> <TITLE>Marquee Example</TITLE> </HEAD> <BODY> <DIV ALIGN="CENTER"> <MARQUEE BGCOLOR="YELLOW" BEHAVIOR="ALTERNATE" DIRECTION="RIGHT" LOOP="6" SCROLLAMOUNT="1" SCROLLDELAY="40" TITLE="Silly tags aren't just for Netscape anymore." WIDTH="80%"> Welcome! </MARQUEE> </DIV> </BODY> </HTML>
marquee' creates scrolling text
<html>
<head>
<title>marquee element example</title>
</head>
<body>
<center>
<marquee behavior="slide"
direction="left"
width="800"
bgcolor="red"
loop="50"
style="color:white">
www.java2s.com
</marquee>
</center>
<p>static text</p>
</body>
</html>First child of Li with class
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Chapter 2</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style> body { font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; } ul { color:black; } li.unusual { color: red; } </style> </head> <body> <ul> <li class="unusual">Brie</li> <li>Cheddar</li> <li>Red Leicester</li> <li>Shropshire Blue</li> </ul> </body> </html>
First-child Selector
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li:first-child { font-weight:bold; color:red; } </style> </head> <body> <p class="my-class">p.my-class</p> <div id="my-id"> <ol> <li>div ol li</li> <li>div ol li</li> <li> <p class="my-class">div ol li p.my-class </p> </li> </ol> </div> </body> </html>
li:first-child color: red;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Chapter 2</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style> body { font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; } ul { color:black; } li:first-child { color: red; } </style> </head> <body> <ul> <li>Brie</li> <li>Cheddar</li> <li>Red Leicester</li> <li>Shropshire Blue</li> </ul> </body> </html>
ol, ul {margin-left: 0; padding-left: 2.5em;}
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css" media="all"> ol, ul {background: #787;} .one {margin-left: 0; padding-left: 2.5em;} .two {margin-left: 1.5em; padding-left: 1em;} .three {padding-left: 0; margin-left: 2.5em;} </style> </head> <body> <ol class="one"> <li>Introduction</li> <li>Premises</li> <li>Problem</li> <li>Various Solutions</li> <li>Conclusion</li> </ol> <ol class="two"> <li>Introduction</li> <li>Premises</li> <li>Problem</li> <li>Various Solutions</li> <li>Conclusion</li> </ol> <ol class="three"> <li>Introduction</li> <li>Premises</li> <li>Problem</li> <li>Various Solutions</li> <li>Conclusion</li> </ol> </body> </html>
LI padding: .3em 0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li { border-top: 1px solid black; padding: .3em 0; } ul { margin-left: 40px; padding-left: 0px; border-bottom: 1px solid black; list-style: none; width: 36%; } </style> </head> <body> <ul> <li>V</li> <li>S</li> <li>T</li> <li>P</li> </ul> </body> </html>
Using padding to control the list item indent
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ul { list-style-type: square; list-style-position: outside; width: 33em; padding: 0.5em; border: 1px solid black; margin: 0.75em 0 0 1.5em; } ul.one { padding-left: 0; } ul.two { padding-left: 1em; } ul.three { padding-left: 1.5em; } li { padding: 0; margin: 0; border: 1px dashed black; } </style> </head> <body> <ul class="one"> <li>Li Europan lingues es membres del sam familie.</li> </ul> <ul class="two"> <li>Li Europan lingues es membres del sam familie.</li> </ul> <ul class="three"> <li>Li Europan lingues es membres del sam familie.</li> </ul> </body> </html>
li padding: .3em 0 1em 40px;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul { margin-left: 40px; padding-left: 0px; list-style: none; } li { padding: .3em 0 1em 40px; font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif; background: url(search_32.gif) no-repeat; } </style> </head> <body> <p>Consectetuer adipiscing elit: <ul> <li>Vivamus purus enim</li> <li>Sollicitudin vitae</li> <li>Tincidunt sit amet</li> <li>Pretium vel, libero</li> </ul> <p>Sed sed nisi. Morbi gravida, odio at aliquam lobortis, urna massa vehicula mi, et posuere tortor elit eget est. Nulla ligula. Etiam pulvinar. Quisque ante quam, ultricies quis, rutrum dignissim, fermentum a, est. Nulla felis dolor, tempor non, posuere ut, ornare ac, eros. Cras in metus. Sed rutrum lectus ut nibh. Pellentesque ipsum.</p> </body> </html>
ins' Example
<html>
<head>
<title>ins element example</title>
</head>
<body>
<p>
<ins>This text has been inserted in the document.</ins>
</p>
</body>
</html>Deleting and inserting text
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Deleting and inserting text</title> </head> <body> <p>Beginning <del datetime="2007-01-04T06:49:15-08:00">January 5th</del> <ins datetime="2007-01-04T06:49:35-08:00" title="Delayed">January 12th</ins>, we'll be open until 2AM on Fridays and Saturdays.</p> </body> </html>
Inserting Text
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Inserting and Deleting Text</title> </head> <body> <h1>How to </h1> <p>>blue</del><ins>red</ins> spines by <del>1000 </del><ins>Prog</ins> .</p> <ins><p>the covers.</p></ins> </body> </html>
ins color: forestgreen;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <title>Direct Child Selectors</title> <style type='text/css'> body { font-face: sans-serif; } del { color: crimson; } ins { color: forestgreen; } </style> </head> <body> <h1><ins>Direct Child</ins> <del>Descendant</del> Selectors</h1> </body> </html>
a img width: 300px; border: 0; display: block;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <style type="text/css"> a img { width: 300px; border: 0; display: block; } </style> </head> <body> <a href=""><img src="http://java2s.com/style/logo.png" /></a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</p> </body> </html>
Set border to '6px double #666' for an image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <style type="text/css"> img { width: 300px; border: 6px double #666; background: #fff; padding: 4px; display:block; } a:link { display:block; } a:hover img { border-style: solid; background: #999; } </style> </head> <body> <a href="http://www.www.java2s.com"><img src="http://www.java2s.com/style/logo.png" alt="Face" /></a> </body> </html>
Remove border from an image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <style type="text/css"> a img { width: 300px; border: 0; display: block; } </style> </head> <body> <a href=""><img src="http://www.java2s.com/style/logo.png" /></a> </body> </html>
CSS Image Border
<html> <head> <title>CSS Image Border</title> <style type="text/css"> body{ margin-left: .50in; margin-top: .50in; color: white } img{ border-color: white; border-style: inset; border-width: thick; } </style> </head> <body> <img src="http://www.java2s.com/style/logo.png" alt="Java" height="300" width="240" /> </body> </html>
img width: 300px; border: 6px double #666; background: #fff; padding: 4px; display:block;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <style type="text/css"> img { width: 300px; border: 6px double #666; background: #fff; padding: 4px; display:block; } a:link { display:block; } a:hover img { border-style: solid; background: #999; } </style> </head> <body> <a href="http://www.csscookbook.com"><img src="http://www.java2s.com/style/logo.png" alt="Face"/></a> </body> </html>
face' sets the typeface (font face)
<HTML> <BODY> <p> <font face="Verdana, Arial, Helvetica, sans-serif" size="2"> www.java2s.com in a "Verdana" font family. </font> </p> </BODY> </HTML>
point-size' indicates the point size (1-7) of a font
<HTML> <BODY> <font point-size="7" face="Verdana">www.java2s.com is in point-size 7</font> </BODY> </HTML>
font' Example
<html>
<head>
<title>font element example</title>
</head>
<body>
<font face="Verdana, Arial, Helvetica, sans-serif" size="30" color="#006699">
This element is an inline element.
</font>
<br>
<font face="Times New Roman, Times, serif" size="40" color="#CC3366">
<i>This fontwill appear in Times.</i>
</font>
<br>
<font face="Courier New, Courier, mono" size="20" color="#0000FF">
Courier New.
</font>
<font size="20" color="#0000FF">
size and color
</font>
<font color="#0000FF">
color
</font>
</body>
</html>color' sets the color of the text
<HTML> <BODY> <p> <font face="Verdana" color="#ff0000">www.java2s.com</font> </p> </BODY> </HTML>
dt' Example
<html>
<head>
<title>dt element example</title>
</head>
<body>
<dl>
<dt><TABLE></dt>
<dd>an html element.</dd>
<dt>border-color</dt>
<dd>a style sheet property.</dd>
<dt>innerText</dt>
<dd>a JavaScript property.</dd>
<dt>cloneNode()</dt>
<dd>a JavaScript method.</dd>
</dl>
</body>
</html>font, color, background for dt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .bios dt { font-weight: bold; } .bios dd { margin: 0; padding: 0; } .bios dl:target { background-color: #999999; border: 1px solid black; padding: 1em; font-weight: bold; line-height: 1.5; } .bios dl:target dt { font-style: italic; color: white; font-size: 1.5em; background-color: #cccccc; margin-right: 20px; } .bios dl:target dd { margin-right: 20px; background-color: #cccccc; padding: 0 1em 1em 1em; } .bios dl:not(:target) { border: none; padding: 0; font-size: .8em; } </style> </head> <body> <div class="bios"> <dl> <dt>A</dt> <dd>This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. </dd> </dl> <dl id="jessica"> <dt>B</dt> <dd>This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. </dd> </dl> <dl id="trueman"> <dt>C</dt> <dd>This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. </dd></dl> <dl id="mark"> <dt>D</dt> <dd>This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. </dd></dl> </div> </body> </html>
Bold font for DT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> #divID dt { font-weight: bold; } </style> </head> <body> <div id="divID"> <dl> <dt>CSS</dt> <dd>A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.</dd> <dt>XHTML</dt> <dd>A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML.</dd> <dt>XML</dt> <dd>A simple, very flexible text format derived from SGML.</dd> </dl> </div> </body> </html>
compact' reduces the white space between each item in a list or menu
<HTML>
<BODY>
<dl compact="true">
<dt>Compacted Definition List</dt>
<dt>1.</dt>
<dd>Definition 1.</dd>
<dt>2.</dt>
<dd>Definition 2.</dd>
</dl>
</BODY>
</HTML> Definition list
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Definition list</title> </head> <body> <dl> <dt>Pizza</dt> <dd> <p>text.</p> <p>Also called <em>pizza pie</em>.</p> </dd> <dt>Pasta</dt> <dd>This is a test. This is a test. </dd> <dd>A prepared dish containing pasta as its main ingredient.</dd> </dl> </body> </html>
Create definition layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> </style> </head> <body> <div id="divID"> <dl> <dt>CSS</dt> <dd>A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.</dd> <dt>XHTML</dt> <dd>A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML.</dd> <dt>XML</dt> <dd>A simple, very flexible text format derived from SGML.</dd> </dl> </div> </body> </html>
dl' Example
<html>
<head>
<title>dl element example</title>
</head>
<body>
<dl>
<dt><TABLE></dt>
<dd>an html element.</dd>
<dt>border-color</dt>
<dd>a style sheet property.</dd>
<dt>innerText</dt>
<dd>a JavaScript property.</dd>
<dt>cloneNode()</dt>
<dd>a JavaScript method.</dd>
</dl>
</body>
</html>cite' Example
<html> <head> <title>cite element example</title> </head> <body> <p>Some text here<br>(<cite>from www.java2s.com</cite>)</p> </body> </html>
Cite tag
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Citations</title> </head> <body> <p>Restaurant <cite>Norm Deplume</cite>:</p> <blockquote cite="http://e.com/"> <p>this is a text.</p> <p><cite>FirstName Lastname, November 22, 2006</cite></p> </blockquote> </body> </html>
Cite: font style and color, background color
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title><strong>, <em> and Other Phrase Elements</title> <style type="text/css" media="screen"> #divID cite { font-style: italic; font-weight: bold; color: red; background-color: #ddd; } </style> </head> <body> <div id="divID"> this is a test. <cite>this is a test. </cite>. </div> </body> </html>
bdo' Example
<html> <head> <title>bdo element example</title> </head> <body> <bdo dir="ltr">This text is read from left to right</bdo><br> <bdo dir="rtl">tfel ot thgir morf daer si txet sihT</bdo> </body> </html>
Bidirectional override
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bidirectional override</title> </head> <body> <p>A passage of text containing one <em lang="en" xml:lang="en"><bdo dir="rtl">reversed</bdo></em> word.</p> </body> </html>
bdo dir="rtl"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>BDO</title> </head> <body><p>this is a test. <bdo dir="rtl">this is a test. </bdo></p> </body> </html>
b {outline: #ff0000 8px dashed;}
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>CSS Example</title> <style type='text/css'> p {width:120px;} b {outline: #ff0000 8px dashed;} </style> </head> <body> <p>Inside this paragraph the word in <b>bold</b> is going to have an outline.</p> </body> </html>
b' emphasizes the text in boldface
<html>
<head>
<title>b element example</title>
</head>
<body>
Not in bold <b>bold</b> and <b>bold</b>
</body>
</html>b border:solid 2px #999999;
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A Demonstration of the Box Model</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> body, h1, p { border:solid 2px #000000; padding:5px; margin:4px; font-family:arial, verdana, sans-serif;} b, em { border:solid 2px #999999; padding:2px; margin:23px;} </style> </head> <body> <h1>Box Model Demonstration</h1> <p>As you can see from this simple demonstration, each element is treated as if it lives in its own <b>box</b>.</p> <p>Every element has a border around it, and some boxes can <em>contain</em> other boxes. </p> </body> </html>
b padding:2px;
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A Demonstration of the Box Model</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> body, h1, p { border:solid 2px #000000; padding:5px; margin:4px; font-family:arial, verdana, sans-serif;} b, em { border:solid 2px #999999; padding:2px; margin:23px;} </style> </head> <body> <h1>Box Model Demonstration</h1> <p>As you can see from this simple demonstration, each element is treated as if it lives in its own <b>box</b>.</p> <p>Every element has a border around it, and some boxes can <em>contain</em> other boxes. </p> </body> </html>
b margin:23px;
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A Demonstration of the Box Model</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> body, h1, p { border:solid 2px #000000; padding:5px; margin:4px; font-family:arial, verdana, sans-serif;} b, em { border:solid 2px #999999; padding:2px; margin:23px;} </style> </head> <body> <h1>Box Model Demonstration</h1> <p>As you can see from this simple demonstration, each element is treated as if it lives in its own <b>box</b>.</p> <p>Every element has a border around it, and some boxes can <em>contain</em> other boxes. </p> </body> </html>
A link to a specific part of the page
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>A link to a specific part of the page</title> </head> <body> <h1><a name="top">Linking and Navigation</a></h1> <p>This page covers the following topics:</p> <ul> <li><a href="#URL">URLs</a></li> <li><a href="#SourceAnchors">Source Anchors</a></li> <li><a href="#DestinationAnchors">Destination Anchors</a></li> <li><a href="#Examples">Examples</a></li> </ul> <h2><a name="URL">URLs</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p><a href="#top">Back to top</a></p> <h2><a name="SourceAnchors">Source Anchors</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p><a href="#top">Back to top</a></p> <h2><a name="DestinationAnchors">Destination Anchors</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p><a href="#top">Back to top</a></p> <h2><a name="Examples">Examples</a></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p><a href="#top">Back to top</a></p> </body> </html>
internal page links
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <ul id="questions"> <li><a href="#answer1">Question one</a></li> <li><a href="#answer2">Question two</a></li> <li><a href="#answer3">Question three</a></li> </ul> <p style="height: 1000px;"><!-- spacer --></p> <p id="answer1">The answer to question 1!</p> <p><a href="#questions">Back to questions</a></p> <p id="answer2">The answer to question 2!</p> <p><a href="#questions">Back to questions</a></p> <p id="answer3">The answer to question 3!</p> <p><a href="#questions">Back to questions</a></p> <p style="height: 1000px;"><!-- spacer --></p> </body> </html>
Internal Linking
<HTML> <HEAD> <TITLE> - List</TITLE> </HEAD> <BODY> <CENTER> <A NAME = "features"></A> <H2><U>The Best Features of the Internet</U></H2> <H3><A HREF = "#ceos">Go to <EM>Favorite CEO's</EM></A></H3> </CENTER> <UL> <LI>Y <LI>Y <UL> <LI>N <LI>N <UL> <LI>F <LI>F </UL> <LI>A <LI>S <LI>S <LI>P <UL> <LI>H <LI>J <LI>D <LI>S <LI>N </UL> </UL> <LI>L <LI>K <LI>I </UL><BR><BR> <A NAME = "ceos"></A> <CENTER><H2>My 3 Favorite <EM>CEO's</EM></H2> <H3><A HREF = "#features">Go to <EM>Favorite Features</EM></A> </H3></CENTER> <OL> <LI>B <LI>S <LI>M </OL> </BODY> </HTML>
Using IDs Within the Same Doc
<?xml version"1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Using IDs Within the Same Doc</title> </head> <body> <p> <a id="top"> Line 1<br /> Line 2<br /> Line 3<br /> Line 4<br /> Line 5<br /> Line 6<br /> Line 7<br /> Line 8<br /> Line 9<br /> Line 10<br /> Line 11<br /> Line 12<br /> Line 13<br /> Line 14<br /> Line 15<br /> Line 16<br /> Line 17<br /> Line 18<br /> Line 19<br /> Line 20<br /> Line 21<br /> Line 22<br /> Line 23<br /> Line 24<br /> Line 25<br /> Line 26<br /> Line 27<br /> Line 28<br /> Line 29<br /> Line 30<br /> Line 31<br /> Line 32<br /> Line 33<br /> Line 34<br /> Line 35<br /> Line 36<br /> Line 37<br /> Line 38<br /> Line 39<br /> Line 40<br /> Line 41<br /> Line 42<br /> Line 43<br /> Line 44<br /> Line 45<br /> Line 46<br /> Line 47<br /> Line 48<br /> Line 49<br /> Line 50<br /> </p> <p> <a href="#top">Return to top</a> </p> </body> </html>
acronym' Example
<html> <head> <title>acronym element example</title> </head> <body> <p align="center">acronym element</p> <acronym title="Hyper Text Markup Language">HTML</acronym> </body> </html>
Text element: the acronym element
<html> <head> <title>Text element: the acronym element</title></head> <body> <ul> <li><acronym>This is how the acronym element displays.</acronym></li> </ul> </body> </html>
Abbreviations and acronyms
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Abbreviations and acronyms</title> </head> <body> <p>all major credit cards, as well as <abbr title="Automatic Teller Machine">ATM</abbr> cards (provide your <acronym title="Personal Identification Number">PIN</acronym>).</p> </body> </html>
a {text-decoration: none;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Link Style Changes</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> a {text-decoration: none;} a:hover {color: red; text-decoration: underline;} </style> </head> <body> <div class="head">Link Style Changes</div> <div class="content"> <a href="#">Link to this page</a> <a href="http://www.yahoo.com">Test Link to Yahoo!</a> </div> </body> </html>
Anchor text-decoration: none;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title></title> <style rel="stylesheet" type="text/css"> #header { width: 892px; height: 268px; background-image: url(images/header_bg.jpg); background-position: top left; background-repeat: no-repeat } #menu { float: left; margin: 63px 0 0 25px; } #menu li { display: inline; list-style-type: none; line-height: 35px; } #menu li a { background-color: blue; background-position: top left; background-repeat: no-repeat; height: 35px; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: red; text-decoration: none; text-align: center } </style> </head> <body> <ul id="menu"> <li><a href="index.html" class="but1_active">Home page</a></li> <li><a href="index2.html" class="but2">Articles</a></li> <li><a href="index2.html" class="but3">Latest Websites</a></li> <li><a href="index2.html" class="but4">Submit</a></li> <li><a href="index2.html" class="but5">Contacts</a></li> </ul> </body> </html>