HTML Layout

HTML Layout
Everywhere on the Web you will find pages that are formatted like newspaper pages using HTML columns.
HTML Layout - Using Tables

One very common practice with HTML, is to use HTML tables to format the layout of an HTML page. A part of this page is formatted with two columns, like a newspaper page. As you can see on this page, there is a left column and a right column. This text is displayed in the left column. An HTML <table> is used to divide a part of this Web page into two columns. The trick is to use a table without borders, and maybe a little extra cell-padding. No matter how much text you add to this page, it will stay inside its column borders.
Same Layout - Color Added

One very common practice with HTML, is to use HTML tables to format the layout of an HTML page. A part of this page is formatted with two columns, like a newspaper page. As you can see at this page, there is a left column and a right column. An HTML <table> is used to divide a part of this Web page into two columns. This text is displayed in the right column. The trick is to use a table without borders, and maybe a little extra cell-padding. No matter how much text you add to this page, it will stay inside its column borders.
Examples
Dividing a part of an HTML page into table columns is very easy to do. <html> <body>
<table border="0" width="100%" cellpadding="10"> <tr> <td width="50%" valign="top" bgcolor=red> This is some text. This is some text. This is some text. This is some text. This is some text. </td> <td width="50%" valign="top"> Another text. Another text. Another text. Another text. Another text. Another text. Another text. </td> </tr> </table> </body> </html>
HTML Frames
With frames, you can display more than one Web page in the same browser window.
Frames
With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are:

The web developer must keep track of more HTML documents It is difficult to print the entire page
The Frameset Tag

The <frameset> tag defines how to divide the window into frames Each frameset defines a set of rows or columns The values of the rows/columns indicate the amount of screen area each row/column will occupy
The Frame Tag
The <frame> tag defines what HTML document to put into each frame
In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column: <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset> Note: The frameset column size value can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space (cols="25%,*").
Examples
Vertical frameset This example demonstrates how to make a vertical frameset with three different documents. <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html>
Horizontal frameset This example demonstrates how to make a horizontal frameset with three different documents. <html> <frameset rows="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm">
</frameset> </html>
Mixed frameset This example demonstrates how to make a frameset with three documents, and how to mix them in rows and columns. <html> <frameset rows="50%,50%"> <frame src="frame_a.htm"> <frameset cols="25%,75%"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </frameset> </html>
Frameset with noresize="noresize" If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag. Add the <noframes> tag for browsers that do not support frames. This example demonstrates the noresize attribute. The frames are not resizable. Move the mouse over the borders between the frames and notice that you can not move the borders. <html> <frameset rows="50%,50%"> <frame noresize="noresize" src="frame_a.htm"> <frameset cols="25%,75%"> <frame noresize="noresize" src="frame_b.htm">
<frame noresize="noresize" src="frame_c.htm"> </frameset> </frameset> </html>
Navigation frame This example demonstrates how to make a navigation frame. The navigation frame contains a list of links with the second frame as the target. The file called "tryhtml_contents.htm" contains three links. <body style="background-color:yellow"> The source code of the links: <a href ="frame_a.htm" target ="showframe">Frame a</a><br> <a href ="frame_b.htm" target ="showframe">Frame b</a><br> <a href ="frame_c.htm" target ="showframe">Frame c</a> The second frame will show the linked document. <html> <frameset cols="120,*"> <frame src="try.html"> <frame src="frame_a.htm" name="showframe"> </frameset> </html>
Frame Tags
Tag <frameset> <frame> <noframes> <iframe> Description Defines a set of frames Defines a sub window (a frame) Defines a noframe section for browsers that do not handle frames Defines an inline sub window (frame)
CSS Introduction
What is CSS?

CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files
Styles Solved a Big Problem

HTML was never intended to contain tags for formatting a document. HTML was intended to define the content of a document, like: <p>This is a paragraph.</p> <h1>This is a heading</h1> When tags like <font> and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS. In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file. All browsers support CSS today.
CSS Saves a Lot of Work!

CSS defines HOW HTML elements are to be displayed. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file! With HTML 4.0 all formatting can be moved out of the HTML document and into a separate style sheet.
CSS Syntax
Syntax
The CSS syntax is made up of three parts: a selector, a property and a value: selector {property:value} The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces: body {color:black} Note: If the value is multiple words, put quotes around the value: p {font-family:"sans serif"} Note: If you want to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color: p {text-align:center;color:red} To make the style definitions more readable, you can describe one property on each line, like this: p { text-align:center; color:black; font-family:arial }
Grouping
You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color: h1,h2,h3,h4,h5,h6 { color:green
The class Selector

With the class selector you can define different styles for the same type of HTML element. Say that you would like to have two types of paragraphs in your document: one rightaligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles: p.right {text-align:right} p.center {text-align:center} You have to use the class attribute in your HTML document: <p class="right">This paragraph will be right-aligned.</p> <p class="center">This paragraph will be center-aligned.</p> Note: To apply more than one class per given element, the syntax is: <p class="center bold">This is a paragraph.</p> The paragraph above will be styled by the class "center" AND the class "bold". You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned: .center {text-align:center} In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector: <h1 class="center">This heading will be center-aligned</h1> <p class="center">This paragraph will also be center-aligned.</p> Do NOT start a class name with a number! This is only supported in Internet Explorer.
Add Styles to Elements with Particular Attributes

You can also apply styles to HTML elements with particular attributes. The style rule below will match all input elements that have a type attribute with a value of "text":
input[type="text"] {background-color:blue}
CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this: /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial }
How to Use Styles

When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:
Three Ways to Insert CSS

There are three ways of inserting a style sheet:

External style sheet Internal style sheet Inline style
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. <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
<html> <head> <link rel="stylesheet" type="text/css" href="ex1.css" /> </head> <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html>
body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px}
Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section with the <style> tag. <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>
Inline Styles
An inline style should be used when a unique style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph: <p style="color: red; margin-left: 20px"> This is a paragraph </p>
Multiple Style Sheets
If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector: h3 { color:red; text-align:left; font-size:8pt } And an internal style sheet has these properties for the h3 selector: h3 { text-align:right; font-size:20pt } If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: color:red; text-align:right; font-size:20pt The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.
Multiple Styles Will Cascade into One

Styles can be specified:

inside an HTML element inside the head section of an HTML page in an external CSS file
Tip: Even multiple external style sheets can be referenced inside a single HTML document.
Cascading order - What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: 1. 2. 3. 4. Browser default External style sheet Internal style sheet (in the head section) Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value). Note: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!
CSS Background
CSS background properties are used to define the background effects of an element. CSS properties used for background effects:

background-color background-image background-repeat background-attachment background-position
Background Color
The background-color property specifies the background color of an element. The background color of a page is defined in the body selector:
Example
body {background-color:#b0c4de}
The background color can be specified by:
name - a color name, like "red"
RGB - an RGB value, like "rgb(255,0,0)" Hex - a hex value, like "#ff0000"
In the example below, the h1, p, and div elements have different background colors:
Example
h1 {background-color:#6495ed} p {background-color:#e0ffff} div {background-color:#b0c4de}
Background Image
The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. The background image for a page can be set like this:
Example
body {background-image:url('paper.gif')}
Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically. Some images should be repeated only horizontally or vertically, or they will look strange, like this:
Example
body { background-image:url('gradient2.png'); }
If the image is repeated only horizontally (repeat-x), the background will look better:
Example
body { background-image:url('gradient2.png'); background-repeat:repeat-x; }
Background Image - Set position and no-repeat

When using a background image, use an image that does not disturb the text. Showing the image only once is specified by the background-repeat property:
Example
body { background-image:url('img_tree.png'); background-repeat:no-repeat; } In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much. The position of the image is specified by the background-position property:
Example
body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:top right; }
Background - Shorthand property

As you can see from the examples above, there are many properties to consider when dealing with backgrounds.
To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property. The shorthand property for background is simply "background":
Example
body {background:#ffffff url('img_tree.png') no-repeat top right} When using the shorthand property the order of the property values are:

background-color background-image background-repeat background-attachment background-position
It does not matter if one of the property values are missing, as long as the ones that are present are in this order.
All CSS Background Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2). Property background Description Sets all the background properties in one declaration Values background-color background-image background-repeat background-attachment background-position inherit Sets whether a background scroll image is fixed or scrolls with fixed the rest of the page inherit Sets the background color of an color-rgb element color-hex color-name transparent inherit Sets the background image for url(URL) an element none inherit Sets the starting position of a top left CSS 1
background-attachment
background-color
background-image
background-position
background image
background-repeat
top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos inherit Sets if/how a background imagerepeat will be repeated repeat-x repeat-y no-repeat inherit
CSS Text
The CSS text properties define the appearance of text:
Text Color
The color property is used to set the color of the text. The color can be specified by:

name - a color name, like "red" RGB - an RGB value, like "rgb(255,0,0)" Hex - a hex value, like "#ff0000"
The default color for a page is defined in the body selector.
Example
body {color:blue} h1 {color:#00ff00} h2 {color:rgb(255,0,0)}
Text Alignment
The text-align property is used to set the horizontal alignment of a text. Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).
Example
h1 {text-align:center} p.date {text-align:right} p.main {text-align:justify}
Text Decoration
The text-decoration property is used to set or remove decorations from text. The text-decoration property is mostly used to remove underlines from links for design purposes: It can also be used to decorate text:
Example
h1 {text-decoration:overline} h2 {text-decoration:line-through} h3 {text-decoration:underline} h4 {text-decoration:blink}
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.
Example
p.uppercase {text-transform:uppercase} p.lowercase {text-transform:lowercase} p.capitalize {text-transform:capitalize}
Text Indentation
The text-indentation property is used to specify the indentation of the first line of a text.
Example
p {text-indent:50px} Specify the space between characters This example demonstrates how to increase or decrease the space between characters. <html> <head> <style type="text/css"> h1 {letter-spacing:2px} h2 {letter-spacing:-3px} </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> </body> </html> Specify the space between lines This example demonstrates how to specify the space between the lines in a paragraph. <html> <head> <style type="text/css"> p.small {line-height: 90%} p.big {line-height: 200%} </style> </head> <body> <p> This is a paragraph with a standard line-height. The default line height in most browsers is about 110% to 120%. This is a paragraph with a standard line-height. </p> <p class="small"> This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. </p>
<p class="big"> This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height. </p> </body> </html> Increase the white space between words This example demonstrates how to increase the white space between words in a paragraph. <html> <head> <style type="text/css"> p { word-spacing:30px; } </style> </head> <body> <p> This is some text. This is some text. </p> </body> </html>

HTML Layout

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML Layout

Hochgeladen von

Copyright:

Verfügbare Formate

HTML Layout

HTML Layout - Using Tables

Same Layout - Color Added

The Frameset Tag

The Frame Tag

<frame noresize="noresize" src="frame_c.htm"> </frameset> </frameset> </html>

Styles Solved a Big Problem

CSS Saves a Lot of Work!

The class Selector

Add Styles to Elements with Particular Attributes

How to Use Styles

Three Ways to Insert CSS

External style sheet Internal style sheet Inline style

External Style Sheet

body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px}

Internal Style Sheet

Multiple Style Sheets

Multiple Styles Will Cascade into One

background-color background-image background-repeat background-attachment background-position

The background color can be specified by:

name - a color name, like "red"

Background Image - Repeat Horizontally or Vertically

Background Image - Set position and no-repeat

Background - Shorthand property

background-color background-image background-repeat background-attachment background-position

All CSS Background Properties

The default color for a page is defined in the body selector.

Das könnte Ihnen auch gefallen