html css java script
TRANSCRIPT
HTML basics exercises1) Create a webpage that prints your name to the screen. [See solution]<html><body><!-- print name to the screen -->John</body></html>2) Create a webpage that prints the numbers 1 - 10 to the screen. [See solution<html><body><!-- print the numbers 1 to 10 to the screen -->1 2 3 4 5 6 7 8 9 10</body></html>3) Create a webpage and set its title to "This is a webpage". [See solution<html><head><!--set the title of the page--><title>This is a webpage</title></head><body><p class="note">The title tag goes in the head section of an HTML document.</p></body></html>4) Create a webpage that prints the message "When was this webpage created? Check page's title for the
answer." to the screen, and set the title of the page to the current date.[See solution<html><head><!--set the title of the page to the current date--><title>January 9th, 2009</title></head><body><!--print a message-->When was this webpage created?Check page's title for the answer.</body></html>5) Create a webpage that prints any text of your choosing to the screen, do not include a head section in the
code. [See solution<html><!--there is no head section in this HTML code--><body><!--print a message-->
The giraffe is a very interesting animal.</body></html>6) Repeat exercise #5, but this time include a head section in the code.[See solution<html><head><title>Print some text</title></head><body><!--print a message-->The giraffe is a very interesting animal.</body></html>
HTML text exercises7) Print your name in green. [See solution<html><body><font color="green">John</font></body></html>8) Print the numbers 1 - 10, each number being a different color. [See solution<html><body><font color="green">1</font><font color="blue">2</font><font color="gray">3</font><font color="#008080">4</font><font color="#0008B">5</font><font color="brown">6</font><font color="#dcdcdc">7</font><font color="#800000">8</font><font color="purple">9</font><font color="#688e23">10</font></body></html>9) Prints your name in a Tahoma font.[See solution<html><body><font face="Tahoma">John</font></body></html>10) Print a paragraph with 4 - 5 sentences. Each sentence should be a different font. [See solution<html><body><p>
<font face="Courier New">HTML stands for Hyper Text Markup Language.</font>
<font face="Times New Roman">It is the corelanguage of the world wide web and is used to define the structure and layout of web documents by using various tags and attributes.</font>
<font face="Helvetica">Although a fundamental language of the web, HTML is a static language - content created with it does not change.</font>
<font face="Georgia">HTML is used to specify the way webpages look, not how they function.</font></p></body></html>11) Print a paragraph that is a description of a book, include the title of the book as well as its author. Names and
titles should be underlined, adjectives should be italicized and bolded.[See solution<html><body><p>One particular book which is recommended reading is <u>The Street Lawyer</u> by <u>John Grisham</u>. This book is about a lawyer who begins re-evaluating his priorities in life when a bad incident occurs within his law firm. Consequently, he becomes acquainted with the inner city streets, and realizes the harsh existence of the homeless, and vows to give them a chance in the courts. <u>The Street Lawyer</u> is a <b><i>great</i></b>book. It is <b><i>well written</i></b> and <b><i>interesting</i></b>. Other books by <u>John Grisham</u> include <u>The Firm</u>, <u>The Pelican Brief</u>, and <u>The Client</u>.</p></body></html>12) Print your name to the screen with every letter being a different heading size.[See solution<html><body><h4>J</h4><h3>o</h3><h2>h</h2><h1>n</h1></body></html>
HTML text formatting exercises
13) Print the squares of the numbers 1 - 20. Each number should be on a separate line, next to it the number 2 superscripted, an equal sign and the result. (Example: 102 = 100)
[See solution<html><body>1<sup>2</sup> = 1<br />2<sup>2</sup> = 4<br />3<sup>2</sup> = 9<br />4<sup>2</sup> = 16<br />5<sup>2</sup> = 25<br />6<sup>2</sup> = 36<br />7<sup>2</sup> = 49<br />8<sup>2</sup> = 64<br />9<sup>2</sup> = 81<br />10<sup>2</sup> = 100<br />11<sup>2</sup> = 121<br />12<sup>2</sup> = 144<br />13<sup>2</sup> = 169<br />14<sup>2</sup> = 196<br />15<sup>2</sup> = 225<br />16<sup>2</sup> = 256<br />17<sup>2</sup> = 289<br />18<sup>2</sup> = 324<br />19<sup>2</sup> = 361<br />
20<sup>2</sup> = 400</body></html>14) Prints 10 names with a line break between each name. The list should be alphabetized, and to do this place a
subscripted number next to each name based on where it will go in the alphabetized list. (Example: Alan1). Print first, the unalphabetized list with a subscript number next to each name, then the alphabetized list. Both lists should have an <h1> level heading.
[See solution<html><body><h1>Unalphabetized list</h1>
Bill<sub>3</sub><br />Roger<sub>5</sub><br />Sandra<sub>6</sub><br />Stacy<sub>7</sub><br />William<sub>10</sub><br />Thomas<sub>8</sub><br />Wendy<sub>9</sub><br />Jane<sub>4</sub><br />Andy<sub>1</sub><br />Anna<sub>2</sub>
<h1>Alphabetized list</h1>
Andy<br />Anna<br />Bill<br />Jane<br />Roger<br />Sandra<br />Stacy<br />Thomas<br />
Wendy<br />William</body></html>15) Print two paragraphs that are both indented using the command.[See solution<html><body><p> Computer programming is defined as telling a computer what to do through a special set of instructions which are then interpreted by the computer to perform some task(s). These instructions can be specified in one or more programming languages including (but not limited to) Java, PHP, C, and C++. A computer goes through a series of steps whose purpose is to achieve something - a series of steps that are instructed to it in great detail by computer programs. Essentialy, computer programming is the process by which these programs are designed and implemented.</p>
<p> While computer programming can be a great tool used to achieve many things, there are a few misconceptions when it comes to the subject, a few misconceptions that should be cleared up. One misconception about computer programming is that you would need to have some kind of special software to write programs - this is hardly the case.</p></body></html>16) Print two lists with any information you want. One list should be an ordered list, the other list should be an
unordered list. [See solution
<html>
<body><b>Hardware devices</b>
<ol type="I"><li>CD-ROM drive</li><li>DVD drive</li><li>Hard disk</li><li>Modem</li></ol>
<b>Web languages</b>
<ul type="square"><li>HTML</li><li>Javascript</li><li>PHP</li><li>Java</li></ul></body></html>17) Prints an h1 level heading followed by a horizontal line whose width is 100%. Below the horizontal line print a
paragraph relating to the text in the heading. [See solution<html><body><h1>Cookie</h1><hr width="100%" /><p>A delicious confection that is quite popular when it comes to sweets. Cookies come in various varieties including chocolate chip, raisin, and macademia nut. A very different type of cookie is a small text file stored on a user's computer by a web server.</p></body></html>18) Print some preformatted text of your choosing. (hint: use the <pre> tag)[See solution<html><body><b>A sample Java program:</b>
<pre>class DataClass{
public static void main(String[] args){
System.out.println("Here is some text.");
}
}</pre>
<p>Using the pre element you can display text however you want with all the spaces and line breaks preserved.</p></body></html>19) Print a long quote and a short quote. Cite the author of each quote. [See solution<html><body><blockquote>"Anyone who has lost track of time when using a computer knows the propensity to dream, the urge to make dreams come true and the tendency to miss lunch." - Tim Berners-Lee</blockquote> <br /><q>"Hi, Super Nintendo Chalmers!"</q> - Ralph Wiggum</body></html>20) Print some deleted and inserted text of your choosing. [See solution<html><body>HTML stands for <del>Hyper Translation Markup Language</del> <ins>Hyper Text Markup Language</ins>.</body></html>21) Print a definition list with 5 items. [See solution<html><body><dl> <dt>HTML</dt> <dd>A markup language</dd> <dt>Pen</dt> <dd>A writing tool</dd> <dt>Lettuce</dt> <dd>A vegetable</dd> <dt>Technology</dt> <dd>The development of tools which serve as a means to certain objectives</dd> <dt>Megabyte</dt> <dd>A unit of data consisting of 1024 kilobytes</dd></dl></body>
</html>22) Print two addresses in the same format used on the front of envelopes (senders address in top left corner,
receivers address in the center). [See solution<html><body><address>Dilbert H.<br />1234 Anim Street<br />P.O. Box 22222</address>
<br /><br />
<center><address>Someone A. Person<br />5555 Street Avenue<br />Metropolitan , Metropolis 11111</address></center></body></html>23) Print ten acronyms and abbreviations of your choosing, each separated by two lines. Specify the data that the
abbreviations and acronyms represent.[See solution<html><body><abbr title="Abstract">Abstr.</abbr><br /><br /><abbr title="Biochemistry">Biochem.</abbr><br /><br /><abbr title="Example">Ex.</abbr><br /><br /><abbr title="Literature">Lit.</abbr><br /><br /><abbr title="Mathematics">Math.</abbr><br /><br />
<acronym title="World Wide Web Consortium">W3C</acronym><br /><br /><acronym title="Institute of Electrical and Electronic Engineers">IEEE</acronym><br /><br /><acronym title="International Standards Organization">ISO</acronym><br /><br /><acronym title="Hyper Text Markup Language">HTML</acronym><br /><br /><acronym title="Beginners All Purpose
Symbolic Instruction Code">BASIC</acronym><p>Move your mouse over an abbreviation or acronym to get more data.</p></body></html>
HTML link exercises24) Create some links to various search engines (google, yahoo, altavista, lycos, etc).[See solution<html><body><a href="http://www.google.com">Search the web with Google!</a>
<br /><br />
<a href="http://www.yahoo.com">Search the web with Yahoo!</a>
<br /><br />
<a href="http://www.bing.com">Search the web with Bing!</a>
<br /><br />
<a href="http://www.altavista.com">Search the web with Altavista!</a>
<br /><br />
<a href="http://www.lycos.com">Search the web with Lycos!</a></body></html>25) Create links to five different pages on five different websites that should all open in a new window.[See solution<html><head><title>Links to various pages</title></head>
<body><a href="http://www.landofcode.com/about.php" target="_blank">Landofcode.com about page</a>
<br /><br />
<a href="http://www.hostforweb.com" target="_blank">HostForWeb Web Hosting</a>
<br /><br />
<a href="http://www.gmx.com" target="_blank">GMX email</a>
<br /><br />
<a href="http://www.weather.com" target="_blank">Find out local weather</a>
<br /><br />
<a href="http://www.math.com/homeworkhelp/Algebra.html" target="_blank">Learn about algebra</a></body></html>26) Create a page with a link at the top of it that when clicked will jump all the way to the bottom of the page.[See solution<html><body><a href="#bottom">Click here to jump to the bottom of the page</a><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><a name="bottom">The bottom of the page</a></body></html>27) Create a page with a link at the bottom of it that when clicked will jump all the way to the top of the page. [See solution<html><body><a name="top">The top of the page</a><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><a href="#top">Jump to the top of the page</a></body></html>28) Create a page with a link at the top of it that when clicked will jump all the way to the bottom of the page. At
the bottom of the page there should be a link to jump back to the top of the page. [See solution<html><body><a name="top">The top of the page</a><br /><br /><a href="#bottom">Jump to the bottom of the page</a><p>Some text</p><p>Some text</p><p>Some text</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><a href="#top">Jump to the top of the page</a><br /><br /><a name="bottom">The bottom of the page</a></body></html>
HTML image exercises29) Display five different images. Skip two lines between each image. Each image should have a title. [See solution<html><head><title>Five images</title></head><body><img src="/images/apple.jpg" alt="Apple" title="Apple" /><br /><br /><img src="/images/sky.jpg" alt="Sky" title="Sky" /><br /><br /><img src="/images/swan.jpg" alt="Swan" title="Swan" /><br /><br /><img src="/images/tree.jpg" alt="Tree" title="Tree" /><br /><br /><img src="/images/waterfall.jpg" src="Waterfall" title="Waterfall" /></body></html>30) Display an image that has a border of size 2, a width of 200, and a height of 200. [See solution<html><body><img src="/images/tree.jpg" width="200" height="200" alt="Tree" border="2" />
</body></html>31) Display an image that when clicked will link to a search engine of your choice (should be opened in a new
window). [See solution<html><body><a href="http://www.yahoo.com" target="_blank"><img src="/images/swan.jpg" alt="Swan" /></a></body><p>Click on the image to be taken to the Yahoo search engine.</p></html>32) Display an image that when clicked will link to itself and will display the image in the browser by itself. [See solution<html><body><a href="/images/apple.jpg" target="_top"><img src="/images/apple.jpg" alt="Apple" /></a><p>Click on the image to see it in the browser by itself.</p></body></html>
HTML basics33) Setting a background color <html><body style="background-color:black;"><p style="color:yellow;">The background color of a webpage can be set through the CSS background-color attribute.</p>
<p style="color:yellow;">Learn all about CSS with our <a href="/css-tutorials/" target="_blank">CSS tutorials</a>.</p></body></html>34) Including comments in code <html><body><!--This is a comment, it will not be seen on a webpage.
--><p>But this text sure will be seen!</p></body></html>35) Setting the title of a document <html><head><title>The page of all pages</title></head><body><p>The title of a webpage appears in the upper left corner of a web browser window. If you look at the upper left corner of your web browser window now you will see the title "Online code editor"</p></body></html>36) A simple HTML document <html><body>This is a very simple HTML document with just some text on it.</body></html>
HTML text37) Displaying bold, italic, or underlined text
<html>
<body>
<b>Here is some bold text</b>
<br />
<i>Here is some italic text</i>
<br />
<u>Here is some underlined text</u>
<br /><br />
<b><u><i>
Here is some bold, italic, and underlined text
</i></u></b>
</body>
</html>38) Displaying text in different sizes using headings <html><body><h6>Headings</h6><h5>come in</h5><h4>a few different sizes</h4><h3>Use them</h3><h2>for page</h2><h1>organization</h1></body></html>39) Displaying text in different fonts, sizes, and colors <html><body><font color="green">The font element is deprecated in HTML 4 and CSS should be used instead.</font>
<font size="6">Although deprecated, the font element is not obsolete, it can still be used.</font>
<font face="Courier">The font element can be used for backward compatibility -</font>
<font face="Verdana" color="gray" size="8">for browsers that do not support CSS.</font>
<p>As an alternative to the font element, you can use stlyesheets to set the size, font, and color of text. Learn more about stylesheets at our <a href="/css-tutorials/" target="_blank">CSS tutorials</a>.</p></body></html>40) Using various text tags at once <html><body><h6 style="color:green;">The text</h6><h5 style="color:#228B22;">will gradually</h5><h4 style="color:#006400;">get</h4><h3 style="color:rgb(25, 66, 30);">bigger</h3><h2 style="color:rgb(14, 9, 256);">and bigger</h2><h1 style="color:black;">and bigger</h1>
<font color="blue"><b><i>Some text can be blue, bold, and italic</i></b></font><br /><font color="teal" size="4" face="Verdana"><u><i><b>And some text can be teal, bold, italic, and underlined</b></i></u></font></body></html>
HTML text formatting
41) Abbreviations and acronyms <html><body><abbr title="Miscellaneous">Misc</abbr><br /><br /><acronym title="Hyper Text Markup Language">HTML</acronym><p>Move your mouse over 'Misc' to see what it is an abbreviation of. Move your mouse over 'HTML' to see what it is an acronym of. The information will appear in a small box (called a tooltip) next to the text.</p>
</body></html>42) Displaying text as an address <html><body><address>Someone A. Person<br />P.O. BOX 123<br />Milford, Delaware<br />U.S.A.</address></body></html>43) Skipping lines in a webpage <html><body><b>Square numbers:</b><br /><br />1<br />4<br />9<br />16<br />25<br />36<br />49<br />64<br />81<br />100</body></html>44) Using computer-output tags <html><body><code>Use the code element to display computer programming code</code><br /><br /><kbd>Use the kbd element for input from the keyboard</kbd><br /><br /><tt>Use the tt element for teletype text</tt>
<br /><br /><samp>Use the samp element for sample text</samp><br /><br /><var>Use the var element to display variables</var></body></html>45) Definition lists <html><body><b>A definition list:</b><dl> <dt>HTML</dt> <dd>Stands for Hyper Text Markup Language. A computer language used to create webpages.</dd>
<dt>Guitar</dt> <dd>A stringed musical instrument.</dd></dl></body></html>46) Deleting and inserting text <html><body>HTML stands for <del>Hyper Translation Markup Language</del> <ins>Hyper Text Markup Language</ins>.</body></html>47) Creating horizontal lines <html><body><p>Horizontal lines can have widths of various sizes.</p>
<b>100%:</b>
<hr width="100%" />
<b>50%:</b>
<hr width="50%" />
<b>other sizes:</b>
<hr width="80%" /><hr width="60%" /><hr width="70%" /><hr width="32%" />
<hr width="12%" /><hr width="86%" /></body></html>48) Creating an ordered list <html><body>Colors:
<ol><li>Green</li><li>Blue</li><li>Gray</li><li>Orange</li><li>Teal</li></ol></body></html>49) Creating ordered lists <html><body><b>An ordered list with numbers (default):</b><ol><li>Telephone</li><li>Cellular phone</li><li>Television</li><li>Fax machine</li></ol>
<b>An ordered list with lowercase letters:</b><ol type="a"><li>Telephone</li><li>Cellular phone</li><li>Television</li><li>Fax machine</li></ol>
<b>An ordered list with uppercase letters:</b><ol type="A"><li>Telephone</li><li>Cellular phone</li><li>Television</li><li>Fax machine</li></ol>
<b>An ordered list with lowercase roman numerals:</b><ol type="i"><li>Telephone</li><li>Cellular phone</li>
<li>Television</li><li>Fax machine</li></ol>
<b>An ordered list with uppercase roman numerals:</b><ol type="I"><li>Telephone</li><li>Cellular phone</li><li>Television</li><li>Fax machine</li></ol></body></html>50) Creating an unordered list <html><body>Colors:
<ul><li>Green</li><li>Blue</li><li>Gray</li><li>Orange</li><li>Teal</li></ul></body></html>51) Creating unordered lists <html><body><b>An unordered list with disc bullets (default):</b><ul type="disc"><li>Telephone</li><li>Cellular phone</li><li>Television</li><li>Fax machine</li></ul>
<b>An unordered list with square bullets:</b><ul type="square"><li>Telephone</li><li>Cellular phone</li><li>Television</li><li>Fax machine</li></ul>
<b>An unordered list with circle bullets:</b><ul type="circle"><li>Telephone</li>
<li>Cellular phone</li><li>Television</li><li>Fax machine</li></ul></body></html>52) Creating nested lists <html><body><b>An unordered nested list:</b>
<ul> <li>Book genres:<!-- first nested list begins here --> <ul> <li>Fiction</li> <li>Non-Fiction</li> <li>Adventure</li> <li>Educational</li> </ul><!-- first nested list ends here --> </li> <li>Vehicle types:<!-- second nested list begins here --> <ul> <li>Car</li> <li>Van</li> <li>Truck</li> <li>Trailor</li> </ul><!-- second nested list ends here --> </li></ul>
<b>An ordered nested list:</b>
<ol type="I"> <li>Book genres:<!-- first nested list begins here --> <ol type="A"> <li>Fiction</li> <li>Non-Fiction</li> <li>Adventure</li> <li>Educational</li> </ol><!-- first nested list ends here --> </li> <li>Vehicle types:<!-- second nested list begins here -->
<ol type="A"> <li>Car</li> <li>Van</li> <li>Truck</li> <li>Trailor</li> </ol><!-- second nested list ends here --> </li></ol>
<b>An ordered/unordered nested list:</b>
<ul> <li>Book genres:<!-- first nested list begins here --> <ol> <li>Fiction</li> <li>Non-Fiction</li> <li>Adventure</li> <li>Educational</li> </ol><!-- first nested list ends here --> </li> <li>Vehicle types:<!-- second nested list begins here --> <ol> <li>Car</li> <li>Van</li> <li>Truck</li> <li>Trailor</li> </ol><!-- second nested list ends here --> </li></ul></body></html>53) Displaying paragraphs <html><body><b>Regular paragraph, no alignment.</b>
<p>When debugging, it's important to know when to expect errors, what kind of errors to expect, and what to do when errors occur.</p>
<b>This paragraph is aligned to the center:</b>
<p align="center">
When debugging, it's important to know when to expect errors, what kind of errors to expect, and what to do when errors occur.</p>
<b>This paragraph is aligned to the right:</b>
<p align="right">When debugging, it's important to know when to expect errors, what kind of errors to expect, and what to do when errors occur.</p></body></html>54) Displaying preformatted text <html><body><b>A sample Java program:</b>
<pre>class DataClass{
public static void main(String[] args){
System.out.println("Here is some text.");
}
}</pre>
<p>Using the pre element you can display text however you want with all the spaces and line breaks preserved.</p></body></html>55) Displaying quotations <html><body><blockquote>In 1983, usability was an oppressed discipline. We few pioneers had to struggle against the prevailing attitude that computing is about power and features — not ease of use and a pleasurable user experience. Today, usability is widely recognized as one of the key drivers of website profitability.</blockquote>
<q>Hello, I am a quote. A short one.</q></body></html>56) Setting text to a subscript or superscript
<html><body>H<sub>2</sub>O = Water<br />75<sup>th</sup></body></html>57) Setting text direction <html><body><bdo dir="rtl">This text is backwards</bdo></body></html>
HTML links
58) Linking to other websites <html><body><a href="http://www.yahoo.com">Go to Yahoo</a><br /><br /><a href="http://www.reddit.com">Go to Reddit</a></body></html>59) Linking to other directories <html><body><p>Linking to a page in a directory ahead of the current directory. You can do it by using the name of the directory and the file name as a relative path:</p>
<a href="dir1/file.txt">See some text</a>
<p>Linking to a page in a directory behind the current directory. You can do it by using / to get the root directory, and then specify the path to the file together with the file name when you reach the directory it is located in:</p>
<a href="/about.php">Landofcode.com about page</a>
<br /><br />
<a href="/html-examples/index.php">HTML examples index page</a></body></html>60) Linking within the same page <html><body><a name="top"></a>Click <a href="#bottom">here</a> to jump to the bottom of the page
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
<a name="bottom"></a>Click <a href="#top">here</a> to jump to the top of the page</body></html>61) Opening links in a new window <html><body><a href="http://www.yahoo.com" target="_blank">Go to Yahoo</a><br><br><a href="http://www.landofcode.com" target="_blank">Go to Landofcode.com index page</a>
<p>
You can open links in a new window by setting the <b>target</b> attribute to "_blank".</p></body></html>62) Linking to resources other than webpages <html><body>Click <a href="/images/apple.jpg">here</a> to see an image of an apple.<br /><br />Click <a href="/dir1/file.txt">here</a> to see some text.</body></html>
HTML images
63) Displaying images from the same directory <html><body><img src="apple.jpg" alt="Apple" /><br /><br /><img src="swan.jpg" alt="Swan" /></body></html>64) Displaying images from another directory or website <html><body>
<p style="font-weight:bold;">Displaying an image from a directory that is behind the directory a webpage is in:</p>
<p>You can do it by using / to go to the root directory and then add the path where the image is located together with the image name:</p>
<img src="/images/apple.jpg" alt="Apple" />
<p style="font-weight:bold;">Displaying an image from a directory that is ahead of the directory a webpage is in:</p>
<p>You can do it by using the name of the directory and the image name as a relative path:
</p>
<img src="dir1/sky.jpg" alt="Sky" />
<p style="font-weight:bold;"Displaying an image from another website:</p>
<p style="font-weight:bold;">Displaying an image from another website:</p>
<p>You can do it by referencing the absolute path of the image:</p>
<img src="http://i50.tinypic.com/289v8si.jpg" alt="Swan" />
<p><b>NOTE:</b> Displaying an image from another website (or any resource for that matter) is known as "hotlinking". If you're going to do it, make sure you have permission from who ever runs the website you are hotlinking from to do it. Without such permission, hotlinking may be considered copyright infringement. Also, keep in mind that hotlinking results in bandwidth usage of the website where you hotlink a resource from.</p></body></html>65) Setting a background image <html><body style="background-image:url(images/sky.jpg);"><p style="background:#fff;">The CSS background-image property sets the background image of a page. Learn more about CSS at our <a href="/css-tutorials/" target="_blank">CSS tutorials</a></p></body></html>66) Setting an image to different sizes <html><body><img src="/images/apple.jpg" alt="Apple" width="40" height="40" /><br /><br /><img src="/images/apple.jpg" alt="Apple" width="40" height="60" /><br /><br /><img src="/images/apple.jpg" alt="Apple" width="60" height="70" /><br /><br /><img src="/images/apple.jpg" alt="Apple" width="60" height="80" /><br /><br /><img src="/images/apple.jpg" alt="Apple" width="60" height="100" /><br /><br />
<img src="/images/apple.jpg" alt="Apple" width="100" height="130" /></body></html>67) Setting image border size <html><body><img src="/images/swan.jpg" alt="Swan" border="2" /><br /><br /><img src="/images/swan.jpg" alt="Swan" border="3" /><br /><br /><img src="/images/swan.jpg" alt="Swan" border="7" /><br /><br /><img src="/images/swan.jpg" alt="Swan" border="9" /><br /><br /><img src="/images/swan.jpg" alt="Swan" border="10" /></body></html>68) Setting an image as a link <html><body><p>Click on the swan to learn more about swans.</p>
<a href="http://www.feathersite.com/Poultry/Swans/BRKSwan.html" target="_blank"><img src="/images/swan.jpg" alt="Swan" /></a>
<p>Click on the apple to learn more about apples.</p>
<a href="http://www.urbanext.uiuc.edu/apples/" target="_blank"><img src="/images/apple.jpg" alt="Apple" /></a>
<p>In some browsers there will be a border (by default) around images that are links. To remove this border, set the <b>border</b> attribute to "0" as the below code demonstrates.</p>
<p>Click on the swan to learn more about swans.</p>
<a href="http://www.feathersite.com/Poultry/Swans/BRKSwan.html" target="_blank"><img src="/images/swan.jpg" alt="Swan" border="0" /></a>
<p>Click on the apple to learn more about apples.</p>
<a href="http://www.urbanext.uiuc.edu/apples/" target="_blank"><img src="/images/apple.jpg" alt="Apple" border="0" /></a></body></html>69) Setting a title for an image <html><body><img src="/images/swan.jpg" alt="Swan" title="Swan" /><p>Place your mouse over the image and the title of the image 'Swan' should appear in a small box (called a tooltip) over it.</p></body></html>70) Aligning an image with a paragraph <html><body><img src="/images/apple.jpg" alt="Apple" align="left" /><p>Eat fruits every day to get your natural sugars. One particular fruit which is really great is the apple. They say that "an apple a day keeps the doctor away" and they're not kidding!</p>
<br /><br />
<img src="/images/lettuce.jpg" alt="Lettuce" align="right" /> <p>Don't forget your vegetables either. Eating vegetables every day is very good for your body. Leafy green vegetables like lettuce are particularly good for you. Generally, you should have a balanced diet of vegetables, fruits, and so on.</p></body></html>
HTML imagemaps71) Associating an image with an imagemap
<html><body><img src="/images/fruit.jpg" alt="Fruit" width="200" height="200" usemap="#fruitmap" border="0" />
<p>To associate an image with an image map, use the <b>usemap</b> attribute with the image you want to become an image map. It should be set with a pound (#) sign followed by the name of the imagemap definition to be used.</p></body></html>72) A completed imagemap <html><body><!-- begin imagemap definition -->
<map name="fruitmap" id="fruitmap"><area shape="rect" coords="48, 48, 86, 90" href="http://www.bouquetoffruits.com/fruit-facts/grape-facts.html" target="_blank" alt="Read about grapes" />
<area shape="circle" coords="100, 100, 35" href="http://www.hort.purdue.edu/newcrop/morton/lemon.html" target="_blank" alt="Read about lemons" />
<area shape="poly" coords="52, 136, 145, 143, 133, 173, 69, 173" href="http://www.banana.com/" target="_blank" alt="Learn about bananas" /></map>
<!-- end imagemap definition -->
<img src="/images/fruit.jpg" alt="fruit" width="200" height="200" usemap="#fruitmap" border="0" /></body></html>
HTML tables73) Basic HTML table
<html><body><table border="2">
<tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p>About as basic as it gets, really.</p></body></html>
74) Table celpadding <html><body><b>A table with no cellpadding:</b>
<table border="2"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<br />
<b>A table with cellpadding set to '2':</b>
<table border="2" cellpadding="2"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<br />
<b>A table with cellpadding set to '5':</b>
<table border="2" cellpadding="5"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<br />
<b>A table with cellpadding set to '10':</b>
<table border="2" cellpadding="10"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
</body></html>75) Table cellspacing<html><body>
<b>A table with no cellspacing:</b>
<table border="2"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<br />
<b>A table with cellspacing set to '2':</b>
<table border="2" cellspacing="2"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<br />
<b>A table with cellspacing set to '5':</b>
<table border="2" cellspacing="5"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<br />
<b>A table with cellspacing set to '10':</b>
<table border="2" cellspacing="10"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table></body></html>
76) Table cell background color<html><body>
<table border="2" cellpadding="5"><tr><td bgcolor="yellow">Cell 1</td><td bgcolor="#c37100">Cell 2</td></tr><tr><td bgcolor="#c3cdd6">Cell 3</td><td bgcolor="#d6d2c3">Cell 4</td></tr></table>
<br />
<table border="2" cellpadding="5"><tr>
<td bgcolor="#cfe8cc">Cell 1</td><td bgcolor="gray">Cell 2</td></tr><tr><td bgcolor="#ffde5a">Cell 3</td><td bgcolor="#ebe864">Cell 4</td></tr></table>
<p>The background color of a table cell is set with the <b>bgcolor</b> attribute. It can be specified as a color name, as a six digit hexadecimal value, or as an RGB value.</p>
<p><b>NOTE:</b> The bgcolor attribute is deprecated in HTML and stylesheets should be used instead. Learn about stylesheets at our <a href="/css-tutorials/" target="_blank">CSS tutorials</a>. </p></body></html>
77) Table cell background image<html><body><table border="2"><tr><td background="/images/apple.jpg"><p>An apple a day keeps the doctor away.</p><p>An apple a day keeps the doctor away.</p><p>An apple a day keeps the doctor away.</p><p>An apple a day keeps the doctor away.</p><p>An apple a day keeps the doctor away.</p></td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table></body></html>78) Table with empty cells<html><body><p>If you leave a cell empty, it will show up without a border in a table:</p>
<table border="2" cellspacing="4"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td></td></tr></table>
<p>To display an empty cell with a border in a table, use the & nbsp; command:</p>
<table border="2" cellspacing="4"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td> </td></tr></table></body></html>79) Table row span and column span<html><body><p>Spanning more than one column:</p>
<table border="2"><tr><td>Cell 1</td><td colspan="5">Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td><td>Cell 5</td><td>Cell 6</td>
</tr></table>
<p>You can make a cell span more than one column by using the <b>colspan</b> attribute.</p>
<p>Spanning more than one row:</p>
<table border="2"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td rowspan="2">Cell 3</td><td>Cell 4</td></tr><tr><td>Cell 5</td></tr></table>
<p>You can make a cell span more than one row by using the <b>rowspan</b> attribute.</p></body></html>80) Table background color<html><body><p>A table with a gray background:</p>
<table border="2" bgcolor="gray"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p>A table with a yellow background:</p>
<table border="2" bgcolor="yellow"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p>A table with a wheat background:</p>
<table border="2" bgcolor="#F5DEB3"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p>A table with an aliceblue background:</p>
<table border="2" bgcolor="#F0F8FF"><tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p>The background color of a table cell is set with the bgcolor attribute. It can be specified as a color name, as a six digit hexadecimal value, or as an RGB value. </p>
<p><b>NOTE:</b> The bgcolor attribute is deprecated in HTML and stylesheets should be used instead. Learn about stylesheets at our <a href="/css-tutorials/" target="_blank">CSS tutorials</a>.</p></body></html>
81) Table background image<html><body><table border="2" background="/images/water031.gif"><tr><td>This table has</td><td>a watery background</td></tr><tr><td>Look at all that water....</td><td>water everywhere!!!!</td></tr></table>
<br /><br />
<table border="2" background="/images/lgrey017.jpg"><tr><td>This table</td><td>sure does have a background</td></tr><tr><td>Look at the lines and</td><td>details of the background image</td></tr></table></body></html>82) Table borders size<html><body><p>A table with no border:</p>
<table border="0"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p>A table with a border of size '2':</p>
<table border="2"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p>A table with a border of size '4':</p>
<table border="4"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr>
<td>Cell 3</td><td>Cell 4</td></tr></table>
<p>A table with a border of size '5':</p>
<table border="5"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p>A table with a border of size '6':</p>
<table border="6"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p>A table with a border of size 10:</p>
<table border="10"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table></body></html>
83) Table caption<html><body><table border="2"><caption>Web languages</caption><tr><td>HTML</td><td>CSS</td></tr><tr><td>Javascript</td><td>PHP</td></tr></table>
<p>A caption is set with the caption element. It should be placed right below the table tag for the table you're setting the caption for.</p></body></html>84) Table cell alignment<html><body><table border="2" width="100%" cellpadding="4"><tr><th align="center">Book</th><th align="center">Type</th><th align="center">Genre</th><th align="center">Number of pages</th></tr><tr><td align="center">Pencils for dummies</td><td align="center">Soft cover</td><td align="center">Educational</td><td align="center">220</td></tr>
<tr><td align="center">Animals Illustrated</td><td align="center">Soft Cover</td><td align="center">Educational</td><td align="center">300</td></tr><tr><td align="center">The owl on the tree</td><td align="center">Hard cover</td><td align="center">Fiction</td><td align="center">140</td></tr><tr><td align="center">Musical Instruments Encyclopedia</td><td align="center">Hard cover</td><td align="center">Educational</td><td align="center">800</td></tr></table>
<br /><br />
<table border="2" width="100%" cellpadding="4"><tr><th align="left">Type:</th><td align="right">Chocolate bar</td></tr><tr><th align="left">Name:</th><td align="right">Chocolicious</td></tr></table></body></html>85) Table 'frame' attribute<html><body>
<p>With the frame attribute, you can make table borders display in different ways.</p>
<p><b>The frame attribute set to "border":</b></p>
<table frame="border"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p><b>The frame attribute set to "box":</b></p>
<table frame="box"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p><b>The frame attribute set to "void":</b></p>
<table frame="void"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p><b>The frame attribute set to "above":</b>
</p>
<table frame="above"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p><b>The frame attribute set to "below":</b></p>
<table frame="below"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p><b>The frame attribute set to "hsides":</b></p>
<table frame="hsides"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p><b>The frame attribute set to "vsides":</b></p>
<table frame="vsides"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p><b>The frame attribute set to "lhs":</b></p>
<table frame="lhs"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p><b>The frame attribute set to "rhs":</b></p>
<table frame="rhs"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table></body>
</html>86) Table headings<html><body><table border="2" width="100%" cellpadding="4"><tr><th>Device</th><th>Purpose</th></tr><tr><td align="center">Keyboard</td><td align="center">Input data</td></tr><tr><td align="center">Monitor</td><td align="center">Display output</td></tr><tr><td align="center">Hard disk</td><td align="center">Store data</td></tr><tr><td align="center">Modem</td><td align="center">Modulate and demodulate signals</td></tr></table></body></html>87) Table without borders<html><body><p>You can specify that a table has no borders by setting the <b>border</b> attribute to "0"</p>
<p><b>A table with no borders:</b></p>
<table border="0"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
<p><b>Another table with no borders:</b></p>
<table border="0"><tr><td>This is</td><td>a table</td></tr><tr><td>with</td><td>no borders</td></tr></table></body></html>88) Tags in tables<html><body><table border="2" cellspacing="2" cellpadding="4"><tr><td><p>This cell contains an image:</p><img src="/images/apple.jpg" alt="apple" /></td><td><p>This cell contains a list:</p><ul><li>One</li><li>Two</li><li>Three</li></ul></td></tr><tr><td><p>This cell contains a paragraph:</p><p>This is a paragraph.
This is the second line of the paragraph.</p></td><td><p>This cell contains a link:</p><a href="http://www.landofcode.com" target="_blank">Landofcode.com main page</a></td></tr></table></body></html>89) Nested tables <html><body><b>Anything can be included in a table, even other tables!</b>
<br /><br />
<table border="2" cellpadding="4"> <tr> <td><!--first inner table begins here--> <table border="2"> <tr> <td>Table 1 Cell 1</td> <td>Table 1 Cell 2</td> </tr> <tr> <td>Table 1 Cell 3</td> <td>Table 1 Cell 4</td> </tr> </table><!--first inner table ends here--> </td> </tr> <tr> <td><!--second inner table begins here--> <table border="2"> <tr> <td>Table 2 Cell 1</td> <td>Table 2 Cell 2</td> </tr> <tr> <td>Table 2 Cell 3</td> <td>Table 2 Cell 4</td> </tr> </table><!--second inner table ends here--> </td> </tr>
</table></body></html>
HTML frames90) Horizontal frames<html>
<frameset rows="25%,20%,35%,20%"><frame src="/frames/frameone.php" /><frame src="/frames/frametwo.php" /><frame src="/frames/framethree.php" /><frame src="/frames/framefour.php" /></frameset>
</html>
91) Vertical frames<html>
<frameset cols="30%,30%,40%"><frame src="/frames/frameone.php" /><frame src="/frames/frametwo.php" /><frame src="/frames/framethree.php" /></frameset>
</html>
92) Mixed frames<html><frameset cols="40%,60%"> <frame src="/html-examples/frameone.php" /><!-- inner frameset begins here --> <frameset rows="50%,50%"> <frame src="/html-examples/frametwo.php" /> <frame src="/html-examples/framethree.php" /> </frameset><!-- inner frameset ends here --></frameset></html>
93) Frame jumping<html><frameset cols="30%,70%"><frame src="/frames/framelinkframeone.php" name="frameone" /><frame src="/frames/framelinkframetwo.php" name="frametwo" /></frameset></html>
94) Navigational frames<html><frameset cols="20%,80%"><frame src="/frames/navigateframe.php" name="navigateframe" /><frame src="/frames/frameone.php" name="linkframe" /></frameset></html>
95) Frames with no borders<html><frameset rows="50%,50%" border="0"><frame src="/frames/frameone.php" /><frame src="/frames/frametwo.php" /></frameset></html>
96) Frames not supported<html><frameset rows="50%,50%">
<frame src="/frames/frameone.php" /><frame src="/frames/frametwo.php" />
<noframes><body>You are using a web browser that does not support frames. Download the latest version of <a href="http://www.mozilla.org/firefox">Mozilla Firefox</a> - an excellent browser that supports frames.</body></noframes>
</frameset></html>97) Frames not resizable <html><frameset rows="25%,25%,25%,25%"><frame src="/frames/frameone.php" noresize="noresize" /><frame src="/frames/frametwo.php" noresize="noresize" /><frame src="/frames/framethree.php" noresize="noresize" /><frame src="/frames/framefour.php" noresize="noresize" /></frameset></html>
HTML forms98) Form buttons<html><body><form><input type="button" value="This is a button" /><br /><br /><input type="button" value="Click me" /></form></body></html>
99) Form checkboxes<html><body><p>Which web browser do you use? (Check all that apply)</p>
<form><input type="checkbox" name="browser" value="Firefox" />Firefox<br /><input type="checkbox" name="browser" value="Chrome" />Chrome<br /><input type="checkbox" name="browser" value="Opera" />Opera<br /><input type="checkbox" name="browser" value="Safari" />Safari<br /><input type="checkbox" name="browser" value="IE" />Internet Explorer<br /><input type="checkbox" name="browser" value="Other" />Other</form></body></html>
100) Form fieldset<html><body><fieldset><legend>Contact information:</legend><form>Name: <input type="text" name="name" />E-mail: <input type="text" name="email" /></form></fieldset></body></html>
101) Form hidden fields<html><body><form><input type="hidden" name="hidden1" value="This field is hidden" />
<input type="hidden" name="hidden2" value="This field is also hidden" />
<input type="text" name="info" value="This field is not hidden" /></form>
<p>Hidden fields are not visible on a webpage, but they can still store data and the data they store is submitted just like non-hidden form elements.</p></body></html>
102) Form images<html><body><form>Name: <input type="text" name="name" />E-mail: <input type="text" name="email" /><br /><br /><input type="image" src="/images/submit.jpg" /></form><p>By placing an image in a form, you can use the image to submit the form (when the image is clicked), as an alternative to a submit button.</p></body></html>
103) Form password field<html><body><form>Username: <input type="text" name="username" /><br /><br />Password: <input type="password" name="password" /></form><p>Characters that you type into a password field will appear as asteriks or bullets.</p></body></html>
104) Form radio buttons<html><body><form>Would you like to subscribe to our mailing list?
<input type="radio" name="mailingList" value="Yes" />Yes<input type="radio" name="mailingList" value="No" />No
<br /><br />
How often do you read books?
<br /><br />
<input type="radio" name="read" value="OnceAWeek" />Once a week
<br />
<input type="radio" name="read" value="TwiceAWeek" />Twice a week
<br />
<input type="radio" name="read" value="FiveAWeek" />Five times a week or more
<br />
<input type="radio" name="read" value="Other" />Other</form></body></html>
105) Form textarea<html><body><fieldset><legend>Contact information:</legend><form>Name: <input type="text" name="name" />
E-mail: <input type="text" name="email" /><br /><br /><textarea rows="10" cols="40">Enter your message here...</textarea></form></fieldset></body></html>
106) Form textbox<html><body><form>Name: <input type="text" name="name" size="15" /><br /><br />E-mail: <input type="text" name="email" size="15" /></form>
107) Submit a form<html><body><form action="formsubmitted.php">Enter some text: <input type="text" name="data" /><br /><br /><input type="submit" value="Submit" /></form><p>Enter some text and submit the form.</p></body></html>
108) Reset a form<html><body><form>Name: <input type="text" name="name" /><br /><br />E-mail: <input type="text" name="name" /><br /><br /><input type="reset" value="Reset" /></form><p>Enter some data into the form, then click the Reset button to reset it.</p></body></html>
109) Forms <html><body><b>A form used to set a users preference for links:</b>
<br /><br />
<form name="linkpreference">
Choose a color for links:
<select name="linkcolor"><option value="Green">Green</option><option value="Blue">Blue</option><option value="Gray">Gray</option><option value="Teal">Teal</option></select>
<br /><br />
Underline links? <input type="radio" name="underlinelinks" value="Yes" />Yes
<input type="radio" name="underlinelinks" value="No" />No
<br /><br />
<input type="submit" value="Submit" /><input type="reset" value="Reset" /></form>
<hr width="100%" />
<b>A form used to register a user to a forum:</b>
<br /><br />
<fieldset><legend>Register now</legend>
<form name="registration"><br />Name: <input type="text" name="name" /><br /><br />E-mail: <input type="text" name="email" /><br /><br />Which web browser do you use? (Check all that apply)<br /><br />
<input type="checkbox" name="browser" value="Firefox" />Firefox<br /><input type="checkbox" name="browser" value="Chrome" />Chrome<br /><input type="checkbox" name="browser" value="Opera" />Opera<br /><input type="checkbox" name="browser" value="Safari" />Safari<br /><input type="checkbox" name="browser" value="IE" />Internet Explorer<br /><input type="checkbox" name="browser" value="Other" />Other
<p>Enter a forum signature:
</p>
<textarea name="forumsignature" rows="5" cols="40"></textarea>
<br /><br />
Choose a password: <input type="password" name="password1" /><br /><br />Re-type password: <input type="password" name="password2" />
<br /><br />
<input type="submit" value="Submit" /><input type="reset" value="Reset" /></form></fieldset></body></html>
HTML stylesheets110) External stylesheet<html><head><link rel="stylesheet" type="text/css" href="/styles/externalStyle.css" /><title>An external style sheet</title></head><body><h6>This text is olive with a honeydew background</h6><h5>This text is cadet blue with an azure background</h5><h4>This text is dimgray</h4><h3>This text is gray</h3><h2>This text is blue</h2><h1>This text is green</h1>
<p>This page calls an external stylesheet named style.css. This is the code for that stylesheet:</p>
<pre>body {background-color: yellow;}h1 {border: solid 2px #eedf2a; color: #008000;}h2 {color: #0000ff;}h3 {color: #808080;}h4 {color: #696969;}h5 {background-color: #f0ffff; color: #5f9ea0;}h6 {background-color: #f0fff0; color: #808000;}</pre>
</body></html>
111) Internal stylesheet<html><head><style type="text/css">a {color: #0000FF; text-decoration: none;}a:visited {color: #2F4F4F; text-decoration: none;}a:hover {background-color: #ddd; color: #008000; text-decoration: underline; }</style><title>An internal style sheet</title></head><body><a href="http://www.yahoo.com" target="_blank">Go to Yahoo</a><br /><br />
<a href="http://www.google.com" target="_blank">Go to Google</a><br /><br /><a href="http://www.lycos.com">Go to Lycos</a></body></html>
112) Inline stylesheet <html><body><p style="color:#008000; font-family:verdana;">This is a paragraph. This is the second sentence of the paragraph.</p>
<a href="http://www.landofcode.com" style="color:#00008b; font-weight:bold; text-decoration:none;">Landofcode.com main page</a>
<h1 style="background-color: #fff8dc;">Some more text</h1>
<h2 style="color:#ffa500;">This text is orange</h2>
<p>Inline styles are declared inside the tags they will affect using the <b>style</b> attribute.</p></body></html>
HTML base113) Setting a reference point<html><head><base href="http://www.landofcode.com/" /></head><body><a href="faq.php">Landofcode.com FAQ</a><br /><a href="about.php">Landofcode.com About us page</a><br /><a href="contact.php">Landofcode.com Contact us page</a><br /><a href="link-to-us.php">Landofcode.com Link to us page</a><p>The <b>href</b> attribute in the base tag in this example specifies the reference point for links as http://www.landofcode.com/. Whenever you click on one of the links, it looks for the page you are linking to in the directory specified by the href attribute. In this case, it is the root directory.</p></body></html>
114) Opening links in a new window <html>
<head><base target="_blank" /></head><body><a href="http://www.landofcode.com">Landofcode.com main page</a>
<br />
<a href="http://www.landofcode.com/html-tutorials/">HTML tutorials</a>
<br />
<a href="http://www.weather.com">Find out local weather</a>
<br />
<a href="http://www.gmx.com">GMX e-mail service</a>
<p>The <b>target</b> attribute in the base tag in this example specifies that all the links on a webpage should open in a new window. This is specified by the <b>target</b> attribute being set to "_blank". If you click on any of the links, they will open in a new window.</p></body></html>
HTML scripts115) Placing a script on a webpage<html><body><script type="text/javascript">document.write("This text has been brought to you by Javascript!");</script></body></html>
116) Dealing with browsers that cannot execute scripts <html><body><script type="text/javascript">document.write ("Some browsers support scripts, but not the scripting language being used..")</script><noscript>
..in which case you can use the noscript element to provide alternative content to display instead of the script. Can also be used if the user's browser supports scripting, but it is disabled.</noscript></body></html>
Different bullet types in a numbered list:<b>Computer languages:</b> <ol type="I"> <li>HTML</li> <li>Javascript</li> <li>PHP</li> </ol> <b>Computer languages:</b> <ol type="a"> <li>HTML</li> <li>Javascript</li> <li>PHP</li> </ol>Output:Computer languages:
I. HTMLII. JavascriptIII. PHP
Computer languages: a. HTMLb. Javascriptc. PHP
Lists within listsIt is possible to implement lists within lists. Doing so presents information in a hierarchial fashion, and each level in the list can have a new type of bullet or number, or not.List within a list using bullets and numbers:<ul> <li>Big animals <ol type="I"><li>Giraffe</li><li>Elephant</li><li>Bear</li></ol> </li> <li>Small animals <ol type="I"><li>Rabbit</li><li>Cat</li><li>Hamster</li></ol> </li> </ul>Output:
Big animals I. GiraffeII. Elephant
III. Bear Small animals
I. RabbitII. CatIII. Hamster
Changing text directionText direction is changed with the <bdo> tag. The dir attribute in this tag specifies the direction the text will go. It can be set to "rtl" (right to left) or "ltr" (left to right).You can use the <bdo> tag if you are working with a language that goes from right to left such as Arabic or Hebrew.Example:<bdo dir="ltr">Some text in English</bdo> <bdo dir="rtl">Some text in Arabic</bdo> <bdo dir="rtl">Some text in Hebrew</bdo> Output:Some text in English Some text in Arabic Some text in Hebrew
EntitiesWhat if you want to display special characters on a webpage like the copyright symbol (©) or the trademark symbol (™)? You can't display such characters as you would display simple text. To display special characters, you would need to use the correct character entity for it.Example:This page is copyright © <br /> This page is also trademarked ™Output:This page is copyright © This page is also trademarked ™
Common character entities and what they will display:
& - ampersand sign ( & )
< - less than sign ( < )
> - greater than sign ( > )
© - copyright symbol( © )
™ - trademark symbol ( ™ )
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).<ul><li>Coffee</li><li>Milk</li></ul>
How the HTML code above looks in a browser:
Coffee Milk
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
<ol><li>Coffee</li><li>Milk</li></ol>
How the HTML code above looks in a browser:
1. Coffee
2. Milk
HTML Description ListsA description list is a list of terms/names, with a description of each term/name.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name):
<dl><dt>Coffee</dt><dd>- black hot drink</dd>
<dt>Milk</dt><dd>- white cold drink</dd></dl>
How the HTML code above looks in a browser:
Coffee- black hot drink
Milk- white cold drink
HTML Description ListsA description list is a list of terms/names, with a description of each term/name.The <dl> tag defines a description list.The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name):<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl> How the HTML code above looks in a browser:Coffee
- black hot drinkMilk
- white cold drinkColor Names Supported by All Browsers:-140 color names are defined in the HTML and CSS color specification (17 standard colors plus 123 more). The table below lists them all, along with their hexadecimal values. Tip: The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.Color Name HEX Color Shades Mix
AliceBlue #F0F8FF Shades MixAntiqueWhite #FAEBD7 Shades MixAqua #00FFFF Shades MixAquamarine #7FFFD4 Shades MixAzure #F0FFFF Shades MixBeige #F5F5DC Shades MixBisque #FFE4C4 Shades MixBlack #000000 Shades MixBlanchedAlmond #FFEBCD Shades MixBlue #0000FF Shades MixBlueViolet #8A2BE2 Shades MixBrown #A52A2A Shades MixBurlyWood #DEB887 Shades Mix
CadetBlue #5F9EA0 Shades MixChartreuse #7FFF00 Shades MixChocolate #D2691E Shades MixCoral #FF7F50 Shades MixCornflowerBlue #6495ED Shades MixCornsilk #FFF8DC Shades MixCrimson #DC143C Shades MixCyan #00FFFF Shades MixDarkBlue #00008B Shades MixDarkCyan #008B8B Shades MixDarkGoldenRod #B8860B Shades MixDarkGray #A9A9A9 Shades MixDarkGreen #006400 Shades MixDarkKhaki #BDB76B Shades MixDarkMagenta #8B008B Shades MixDarkOliveGreen #556B2F Shades MixDarkOrange #FF8C00 Shades MixDarkOrchid #9932CC Shades MixDarkRed #8B0000 Shades MixDarkSalmon #E9967A Shades MixDarkSeaGreen #8FBC8F Shades MixDarkSlateBlue #483D8B Shades MixDarkSlateGray #2F4F4F Shades MixDarkTurquoise #00CED1 Shades MixDarkViolet #9400D3 Shades MixDeepPink #FF1493 Shades MixDeepSkyBlue #00BFFF Shades MixDimGray #696969 Shades MixDodgerBlue #1E90FF Shades MixFireBrick #B22222 Shades MixFloralWhite #FFFAF0 Shades MixForestGreen #228B22 Shades MixFuchsia #FF00FF Shades MixGainsboro #DCDCDC Shades MixGhostWhite #F8F8FF Shades MixGold #FFD700 Shades MixGoldenRod #DAA520 Shades MixGray #808080 Shades MixGreen #008000 Shades MixGreenYellow #ADFF2F Shades MixHoneyDew #F0FFF0 Shades MixHotPink #FF69B4 Shades MixIndianRed #CD5C5C Shades MixIndigo #4B0082 Shades Mix
Ivory #FFFFF0 Shades MixKhaki #F0E68C Shades MixLavender #E6E6FA Shades MixLavenderBlush #FFF0F5 Shades MixLawnGreen #7CFC00 Shades MixLemonChiffon #FFFACD Shades MixLightBlue #ADD8E6 Shades MixLightCoral #F08080 Shades MixLightCyan #E0FFFF Shades MixLightGoldenRodYellow #FAFAD2 Shades MixLightGray #D3D3D3 Shades MixLightGreen #90EE90 Shades MixLightPink #FFB6C1 Shades MixLightSalmon #FFA07A Shades MixLightSeaGreen #20B2AA Shades MixLightSkyBlue #87CEFA Shades MixLightSlateGray #778899 Shades MixLightSteelBlue #B0C4DE Shades MixLightYellow #FFFFE0 Shades MixLime #00FF00 Shades MixLimeGreen #32CD32 Shades MixLinen #FAF0E6 Shades MixMagenta #FF00FF Shades MixMaroon #800000 Shades MixMediumAquaMarine #66CDAA Shades MixMediumBlue #0000CD Shades MixMediumOrchid #BA55D3 Shades MixMediumPurple #9370DB Shades MixMediumSeaGreen #3CB371 Shades MixMediumSlateBlue #7B68EE Shades MixMediumSpringGreen #00FA9A Shades MixMediumTurquoise #48D1CC Shades MixMediumVioletRed #C71585 Shades MixMidnightBlue #191970 Shades MixMintCream #F5FFFA Shades MixMistyRose #FFE4E1 Shades MixMoccasin #FFE4B5 Shades MixNavajoWhite #FFDEAD Shades MixNavy #000080 Shades MixOldLace #FDF5E6 Shades MixOlive #808000 Shades MixOliveDrab #6B8E23 Shades MixOrange #FFA500 Shades MixOrangeRed #FF4500 Shades Mix
Orchid #DA70D6 Shades MixPaleGoldenRod #EEE8AA Shades MixPaleGreen #98FB98 Shades MixPaleTurquoise #AFEEEE Shades MixPaleVioletRed #DB7093 Shades MixPapayaWhip #FFEFD5 Shades MixPeachPuff #FFDAB9 Shades MixPeru #CD853F Shades MixPink #FFC0CB Shades MixPlum #DDA0DD Shades MixPowderBlue #B0E0E6 Shades MixPurple #800080 Shades MixRed #FF0000 Shades MixRosyBrown #BC8F8F Shades MixRoyalBlue #4169E1 Shades MixSaddleBrown #8B4513 Shades MixSalmon #FA8072 Shades MixSandyBrown #F4A460 Shades MixSeaGreen #2E8B57 Shades MixSeaShell #FFF5EE Shades MixSienna #A0522D Shades MixSilver #C0C0C0 Shades MixSkyBlue #87CEEB Shades MixSlateBlue #6A5ACD Shades MixSlateGray #708090 Shades MixSnow #FFFAFA Shades MixSpringGreen #00FF7F Shades MixSteelBlue #4682B4 Shades MixTan #D2B48C Shades MixTeal #008080 Shades MixThistle #D8BFD8 Shades MixTomato #FF6347 Shades MixTurquoise #40E0D0 Shades MixViolet #EE82EE Shades MixWheat #F5DEB3 Shades MixWhite #FFFFFF Shades MixWhiteSmoke #F5F5F5 Shades MixYellow #FFFF00 Shades MixYellowGreen #9ACD32 Shades Mix
« PreviousNext Chapter »
Sorted by Hex ValueSame list sorted by color name
Color Name HEX Color Shades MixBlack #000000 Shades MixNavy #000080 Shades MixDarkBlue #00008B Shades MixMediumBlue #0000CD Shades MixBlue #0000FF Shades MixDarkGreen #006400 Shades MixGreen #008000 Shades MixTeal #008080 Shades MixDarkCyan #008B8B Shades MixDeepSkyBlue #00BFFF Shades MixDarkTurquoise #00CED1 Shades MixMediumSpringGreen #00FA9A Shades MixLime #00FF00 Shades MixSpringGreen #00FF7F Shades MixAqua #00FFFF Shades MixCyan #00FFFF Shades MixMidnightBlue #191970 Shades MixDodgerBlue #1E90FF Shades MixLightSeaGreen #20B2AA Shades MixForestGreen #228B22 Shades MixSeaGreen #2E8B57 Shades MixDarkSlateGray #2F4F4F Shades MixLimeGreen #32CD32 Shades MixMediumSeaGreen #3CB371 Shades MixTurquoise #40E0D0 Shades MixRoyalBlue #4169E1 Shades MixSteelBlue #4682B4 Shades MixDarkSlateBlue #483D8B Shades MixMediumTurquoise #48D1CC Shades MixIndigo #4B0082 Shades MixDarkOliveGreen #556B2F Shades MixCadetBlue #5F9EA0 Shades Mix
CornflowerBlue #6495ED Shades MixMediumAquaMarine #66CDAA Shades MixDimGray #696969 Shades MixSlateBlue #6A5ACD Shades MixOliveDrab #6B8E23 Shades MixSlateGray #708090 Shades MixLightSlateGray #778899 Shades MixMediumSlateBlue #7B68EE Shades MixLawnGreen #7CFC00 Shades MixChartreuse #7FFF00 Shades MixAquamarine #7FFFD4 Shades MixMaroon #800000 Shades MixPurple #800080 Shades MixOlive #808000 Shades MixGray #808080 Shades MixSkyBlue #87CEEB Shades MixLightSkyBlue #87CEFA Shades MixBlueViolet #8A2BE2 Shades MixDarkRed #8B0000 Shades MixDarkMagenta #8B008B Shades MixSaddleBrown #8B4513 Shades MixDarkSeaGreen #8FBC8F Shades MixLightGreen #90EE90 Shades MixMediumPurple #9370DB Shades MixDarkViolet #9400D3 Shades MixPaleGreen #98FB98 Shades MixDarkOrchid #9932CC Shades MixYellowGreen #9ACD32 Shades MixSienna #A0522D Shades MixBrown #A52A2A Shades MixDarkGray #A9A9A9 Shades MixLightBlue #ADD8E6 Shades MixGreenYellow #ADFF2F Shades MixPaleTurquoise #AFEEEE Shades MixLightSteelBlue #B0C4DE Shades MixPowderBlue #B0E0E6 Shades Mix
FireBrick #B22222 Shades MixDarkGoldenRod #B8860B Shades MixMediumOrchid #BA55D3 Shades MixRosyBrown #BC8F8F Shades MixDarkKhaki #BDB76B Shades MixSilver #C0C0C0 Shades MixMediumVioletRed #C71585 Shades MixIndianRed #CD5C5C Shades MixPeru #CD853F Shades MixChocolate #D2691E Shades MixTan #D2B48C Shades MixLightGray #D3D3D3 Shades MixThistle #D8BFD8 Shades MixOrchid #DA70D6 Shades MixGoldenRod #DAA520 Shades MixPaleVioletRed #DB7093 Shades MixCrimson #DC143C Shades MixGainsboro #DCDCDC Shades MixPlum #DDA0DD Shades MixBurlyWood #DEB887 Shades MixLightCyan #E0FFFF Shades MixLavender #E6E6FA Shades MixDarkSalmon #E9967A Shades MixViolet #EE82EE Shades MixPaleGoldenRod #EEE8AA Shades MixLightCoral #F08080 Shades MixKhaki #F0E68C Shades MixAliceBlue #F0F8FF Shades MixHoneyDew #F0FFF0 Shades MixAzure #F0FFFF Shades MixSandyBrown #F4A460 Shades MixWheat #F5DEB3 Shades MixBeige #F5F5DC Shades MixWhiteSmoke #F5F5F5 Shades MixMintCream #F5FFFA Shades MixGhostWhite #F8F8FF Shades Mix
Salmon #FA8072 Shades MixAntiqueWhite #FAEBD7 Shades MixLinen #FAF0E6 Shades MixLightGoldenRodYellow #FAFAD2 Shades MixOldLace #FDF5E6 Shades MixRed #FF0000 Shades MixFuchsia #FF00FF Shades MixMagenta #FF00FF Shades MixDeepPink #FF1493 Shades MixOrangeRed #FF4500 Shades MixTomato #FF6347 Shades MixHotPink #FF69B4 Shades MixCoral #FF7F50 Shades MixDarkOrange #FF8C00 Shades MixLightSalmon #FFA07A Shades MixOrange #FFA500 Shades MixLightPink #FFB6C1 Shades MixPink #FFC0CB Shades MixGold #FFD700 Shades MixPeachPuff #FFDAB9 Shades MixNavajoWhite #FFDEAD Shades MixMoccasin #FFE4B5 Shades MixBisque #FFE4C4 Shades MixMistyRose #FFE4E1 Shades MixBlanchedAlmond #FFEBCD Shades MixPapayaWhip #FFEFD5 Shades MixLavenderBlush #FFF0F5 Shades MixSeaShell #FFF5EE Shades MixCornsilk #FFF8DC Shades MixLemonChiffon #FFFACD Shades MixFloralWhite #FFFAF0 Shades MixSnow #FFFAFA Shades MixYellow #FFFF00 Shades MixLightYellow #FFFFE0 Shades MixIvory #FFFFF0 Shades MixWhite #FFFFFF Shades Mix
