Showing posts with label HTML Styles - CSS. Show all posts

Friday, 2 May 2014

HTML Layouts

Web page layout is very important to make your website look good.

Design your webpage layout very carefully.

Try it Yourself - Examples

Web page layout using <div> elements
How to add layout using <div> elements.
Web page layout using <table> elements
How to add layout using <table> elements.

Website Layouts

Most websites have put their content in multiple columns (formatted like a magazine or newspaper).
Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.

	Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!

HTML Layouts - Using <div> Elements

The div element is a block level element used for grouping HTML elements.
The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example:

Example

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>

</div>

</body>
</html>

Try it yourself »

The HTML code above will produce the following result:

Main Title of Web Page

Menu
HTML
CSS
JavaScript

Content goes here

HTML Layouts - Using Tables

A simple way of creating layouts is by using the HTML <table> tag.
Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.

	Using <table> to create a nice layout is NOT the correct use of the element. The purpose of the <table> element is to display tabular data!

The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:

Example

<!DOCTYPE html>
<html>
<body>

<table style="width:500px;" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1 style="margin:0;padding:0;">Main Title of Web Page</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;vertical-align:top;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>

</body>
</html>

Try it yourself »

HTML Layout - Useful Tips

Tip: The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can change the layout of all your pages by editing one file. To learn more about CSS, study our CSS tutorial.
Tip: Because advanced layouts take time to create, a quicker option is to use a template. Search Google for free website templates (these are pre-built website layouts you can use and customize).

HTML Layout Tags

Tag	Description
<div>	Defines a section in a document (block-level)
<span>	Defines a section in a document (inline)

HTML Blocks

HTML elements can be grouped together with <div> and <span>.

HTML Block Elements

Most HTML elements are defined as block level elements or as inline elements.
Block level elements normally start (and end) with a new line when displayed in a browser.
Examples: <h1>, <p>, <ul>, <table>

HTML Inline Elements

Inline elements are normally displayed without starting a new line.
Examples: <b>, <td>, <a>, <img>

The HTML <div> Element

The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements.
The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.
When used together with CSS, the <div> element can be used to set style attributes to large blocks of content.
Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using <table> elements for layout is not the correct use of <table>. The purpose of the <table> element is to display tabular data.

The HTML <span> Element

The HTML <span> element is an inline element that can be used as a container for text.
The <span> element has no special meaning.
When used together with CSS, the <span> element can be used to set style attributes to parts of the text.

HTML Grouping Tags

Tag	Description
<div>	Defines a section in a document (block-level)
<span>	Defines a section in a document (inline)

HTML Lists

The most common HTML lists are ordered and unordered lists:

HTML Lists

An ordered list:

The first list item
The second list item
The third list item

An unordered list:

List item
List item
List item

Try-It-Yourself Examples

Unordered list
How to create an unordered list in an HTML document.
Ordered list
How to create an ordered list in an HTML document.
(You can find more examples at the bottom of this page).

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:

Coffee
Milk

HTML Description Lists

A 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

Basic Notes - Useful Tips

Tip: Inside a list item you can put text, line breaks, images, links, other lists, etc.

More Examples

Different types of ordered lists
Demonstrates different types of ordered lists.
Different types of unordered lists
Demonstrates different types of unordered lists.
Nested list
Demonstrates how you can nest lists.
Nested list 2
Demonstrates a more complicated nested list.
Description list
Demonstrates a definition list.

HTML List Tags

Tag	Description
<ol>	Defines an ordered list
<ul>	Defines an unordered list
<li>	Defines a list item
<dl>	Defines a description list
<dt>	Defines a term/name in a description list
<dd>	Defines a description of a term/name in a description list

HTML Tables

HTML Table Example:

Firstname	Lastname	Points
Jill	Smith	50
Eve	Jackson	94
John	Doe	80
Adam	Johnson	67

Try it Yourself - Examples

Basic HTML tables
How to create basic tables in HTML.
A table with borders
How to add borders to a table.
A table with collapsed borders
How to make the borders collapse.
(You can find more examples at the bottom of this page).

HTML Tables

Tables are defined with the <table> tag.
A table is divided into rows with the <tr> tag. (tr stands for table row)
A row is divided into data cells with the <td> tag. (td stands for table data)
A row can also be divided into headings with the <th> tag. (th stands for table heading)
The <td> elements are the data containers in the table.
The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.
The width of a table can be defined using CSS.

Example

<table style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Try it yourself »

An HTML Table with a Border Attribute

If you do not specify a border for the table, it will be displayed without borders.
A border can be added using the border attribute:

Example

<table border="1" style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Try it yourself »

	However, the border attribute is on its way out of the HTML standard! It is better to use CSS.

To add borders with CSS, use the border property:

Example

Try it yourself »

Remember to define borders for both the table and the table cells.

An HTML Table with Collapsed Borders

If you want the borders to collapse into one border, add border-collapse to your CSS:

Example

Try it yourself »

An HTML Table with Cell Padding

Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:

Example

th,td
{
padding:15px;
}

Try it yourself »

HTML Table Headings

Table headings are defined with the <th> tag.
By default, all major browsers display table headings as bold and centered:

Example

<table style="width:300px">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Try it yourself »

To left-align the table headings, use the CSS text-align property:

Example

th
{
text-align:left;
}

Try it yourself »

An HTML Table with Cell Spacing

Cell spacing specifies the space between the cells.
To set the cell spacing for the table, use the CSS border-spacing property:

Example

table
{
border-spacing:5px;
}

Try it yourself »

More Examples

Horizontal/Vertical table headings
How to create horizontal/vertical table headings.
Table with a caption
How to add a caption to a table.
Table cells that span more than one row/column
How to define table cells that span more than one row or one column.
Tags inside a table
How to display elements inside other elements.

HTML Table Tags

Tag	Description
<table>	Defines a table
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<caption>	Defines a table caption
<colgroup>	Specifies a group of one or more columns in a table for formatting
<col>	Specifies column properties for each column within a <colgroup> element
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table

HTML Images

Example

Norwegian Mountain Trip

Try it yourself »

Try it Yourself - Examples

Insert images
How to insert images into an HTML document.
Insert images from different locations
How to insert an image from another folder or another server.
(You can find more examples at the bottom of this page).

HTML Images - The <img> Tag and the Src Attribute

In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
Syntax for defining an image:

The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif.
The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

HTML Images - The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The value of the alt attribute is an author-defined text:

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

HTML Images - Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:

Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).

Basic Notes - Useful Tips

Note: If an HTML file contains ten images - eleven files are required to display the page right. Loading images takes time, so my best advice is: Use images carefully.
Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.

More Examples

Let an image float to the left and to the right
How to let an image float to the left or right of a paragraph.
Make a hyperlink of an image
How to use an image as a link.
Create an image map
How to create an image map, with clickable regions. Each region is a hyperlink.

HTML Image Tags

Tag	Description
<img>	Defines an image
<map>	Defines an image-map
<area>	Defines a clickable area inside an image-map

HTML Styles - CSS

CSS (Cascading Style Sheets) is used to style HTML elements.

Look! Styles and colors

Manipulate Text

Colors, Boxes

and more...

Try it yourself

Try it Yourself - Examples

Using styles in HTML
How to add style information inside the <head> section.
Link that is not underlined
How to make a link that is not underlined, with the style attribute.
Link to an external style sheet
How to use the <link> tag to link to an external style sheet.

Styling HTML with CSS

CSS was introduced together with HTML 4, to provide a better way to style HTML elements.
CSS can be added to HTML in the following ways:

Inline - using the style attribute in HTML elements
Internal - using the <style> element in the <head> section
External - using an external CSS file

The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.
However, in this HTML tutorial we will introduce you to CSS using the style attribute. This is done to simplify the examples. It also makes it easier for you to edit the code and try it yourself.
You can learn everything about CSS in our CSS Tutorial.

Inline Styles

An inline style can be used if a unique style is to be applied to one single occurrence of an element.
To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph:

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

To learn more about style sheets, visit our CSS tutorial.

HTML Style Example - Background Color

The background-color property defines the background color for an element:

Example

<!DOCTYPE html>
<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

</html>

Try it yourself »

The background-color property makes the "old" bgcolor attribute obsolete.
Try it yourself: Background color the old way

HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and size of the text in an element:

Example

<!DOCTYPE html>
<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

Try it yourself »

The font-family, color, and font-size properties make the old <font> tag obsolete.

HTML Style Example - Text Alignment

The text-align property specifies the horizontal alignment of text in an element:

Example

<!DOCTYPE html>
<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

Try it yourself »

The text-align property makes the old <center> tag obsolete.
Try it yourself: Centered heading the old way

Internal Style Sheet

An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this:

<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section:

HTML Style Tags

Tag	Description
<style>	Defines style information for a document
<link>	Defines the relationship between a document and an external resource

Deprecated Tags and Attributes

In HTML 4, several tags and attributes were used to style documents. These tags are not supported in newer versions of HTML.
Avoid using the elements: <font>, <center>, and <strike>, and the attributes: color and bgcolor.

ad

ad

Bidvertiser Ad

q ad 2

Friday, 2 May 2014

HTML Layouts

Try it Yourself - Examples

Website Layouts

HTML Layouts - Using <div> Elements

Example

Main Title of Web Page

HTML Layouts - Using Tables

Example

HTML Layout - Useful Tips

HTML Layout Tags

HTML Blocks

HTML Block Elements

HTML Inline Elements

The HTML <div> Element

The HTML <span> Element

HTML Grouping Tags

HTML Lists

HTML Lists

An ordered list:

An unordered list:

Try-It-Yourself Examples

HTML Unordered Lists

HTML Ordered Lists

HTML Description Lists

Basic Notes - Useful Tips

More Examples

HTML List Tags

HTML Tables

HTML Table Example:

Try it Yourself - Examples

HTML Tables

Example

An HTML Table with a Border Attribute

Example

Example

An HTML Table with Collapsed Borders

Example

An HTML Table with Cell Padding

Example

HTML Table Headings

Example

Example

An HTML Table with Cell Spacing

Example

More Examples

HTML Table Tags

HTML Images

Example

Norwegian Mountain Trip

Try it Yourself - Examples

HTML Images - The <img> Tag and the Src Attribute

HTML Images - The Alt Attribute

HTML Images - Set Height and Width of an Image

Basic Notes - Useful Tips

More Examples

HTML Image Tags

HTML Styles - CSS

Look! Styles and colors

Try it Yourself - Examples

Styling HTML with CSS

Inline Styles

HTML Style Example - Background Color

Example

HTML Style Example - Font, Color and Size

Example

HTML Style Example - Text Alignment

Example

Internal Style Sheet

External Style Sheet

HTML Style Tags

Deprecated Tags and Attributes