HTML Colors

HTML Colors

RGB (Red, Green, Blue)

With HTML, RGB color values can be specified using this formula: rgb(red, green, blue)Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.For example, rgb(255,0,0) is displayed as red, because red is set to its highest value (255) and the others are set to 0. Experiment by mixing the RGB values below:

HTML Colors

Hexadecimal Colors

With HTML, RGB values can also be specified using hexadecimal color values in the form: #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as decimal 0-255).For example, #FF0000 is displayed as red, because red is set to its highest value (FF) and the others are set to the lowest value (00).

HTML Colors

HTML Links

HTML Links

The target attribute specifies where to open the linked document.This example will open the linked document in a new browser window or in a new tab:

HTML Links - The target Attribute

HTML Links

HTML Links - Image as Link

<a href="default.asp">

<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">

</a>3

HTML Links

HTML Links - Create a Bookmark

<h2 id="tips">Useful Tips Section</h2>

<a href="#tips">Visit the Useful Tips Section</a>

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>

HTML Links

SummaryUse the HTML <a> element to define a linkUse the HTML href attribute to define the link addressUse the HTML target attribute to define where to open the linked documentUse the HTML <img> element (inside <a>) to use an image as a linkUse the HTML id attribute (id="value") to define bookmarks in a pageUse the HTML href attribute (href="#value") to link to the bookmark

HTML Links

HTML Images

Image <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

Images in another folder<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">Images in another server1<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

HTML Images

???

Can you use an image as a link?

HTML Images

Image Maps

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

<map name="planetmap">

<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">

<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">

<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">

</map>

HTML Images

SummaryUse the HTML <img> element to define an imageUse the HTML src attribute to define the URL of the imageUse the HTML alt attribute to define an alternate text for an image, if it cannot be displayedUse the HTML width and height attributes to define the size of the imageUse the CSS width and height properties to define the size of the image (alternatively)Use the CSS float property to let the image floatUse the HTML <map> element to define an image-mapUse the HTML <area> element to define the clickable areas in the image-mapUse the HTML <img>'s element usemap attribute to point to an image-map

HTML Tables

Basic Syntax<table> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr></table>

Table Cells that Span Many Columns

<table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr></table>

Table Cells that Span Many Rows

<table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr></table>

SummaryUse the HTML <table> element to define a tableUse the HTML <tr> element to define a table rowUse the HTML <td> element to define a table dataUse the HTML <th> element to define a table headingUse the HTML <caption> element to define a table captionUse the CSS border property to define a borderUse the CSS border-collapse property to collapse cell bordersUse the CSS padding property to add padding to cellsUse the CSS text-align property to align cell textUse the CSS border-spacing property to set the spacing between cellsUse the colspan attribute to make a cell span many columnsUse the rowspan attribute to make a cell span many rowsUse the id attribute to uniquely define one table

HTML Lists

Unordered and Ordered Lists<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>

<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

Nested list<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li></ul>

SummaryUse the HTML <ul> element to define an unordered listUse the HTML style attribute to define the bullet styleUse the HTML <ol> element to define an ordered listUse the HTML type attribute to define the numbering typeUse the HTML <li> element to define a list itemLists can be nested inside listsList items can contain other HTML elements

HTML Block and Inline Elements

Block-level Elements<div><h1> - <h6><p><form>

Inline ElementsAn inline element does not start on a new line and only takes up as much width as necessary.This is an inline <span> element inside a paragraph.Examples of inline elements:

<span><a><img>

The <div> Element

<div style="background-color:black; color:white; padding:20px;">

<h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

</div>

The <span> Element

<h1>My <span style="color:red">Important</span> Heading</h1>