How To Structure An HTML Document? - ETSAV

Có thể bạn quan tâm

How to structure an HTML document?

You can use tables or frames to organize and subdivide your web page. With tables you obtain a set of files and columns that you can fill with the information you like. You can fix the name of the table squares and their dimensions. With frames however you get is the displaying of more than one HTML document in the same window. This will be explained later. Before that we'll give you a little introduction about the colours in web pages and how to use them.

6.1. COLOURS

The RGB colours that are used in web pages are represented by means of a hexadecimal system (from 0 to F). That means, the colour #ff0000 is red, the colour #00ff00 is green, and the colour #0000ff is blue. For the more common colours you can use its names between quotation marks ("red"). For any other colour, in the programme Photoshop you can find its nomenclature in the hexadecimal system or better, under the link at the right side you find the names of the colours that are supported by the browsers. As background of your web you can put a specific colour or an image. You'll have to add: bgcolor="any colour" to the "body" tag. The code is as follows: CODE:

If you want to put in an image as background instead of a colour: Example of a web page with an image as background image. CODE:

It's important to fix the dimensions of the image (screen size) before inserting it because if the image is smaller than the screen, the same image will be repeated until it fills the entire screen and if it's larger, it will be cut to size. Next we'll explain how to create and modify tables and framesets.

Exercise 11: Create a simple table with four squares like the one shown in the following point (6.2) in a new html document with the name "web03.html".

6.2. TABLES

FIRST ROW, FIRST COLUMN	FIRST ROW, SECOND COLUMN
SECOND ROW, FIRST COLUMN	SECOND ROW, SECOND COLUMN

Tables are constructed from the left to the right and from the top to the bottom (like you read them), when you create a table, first put in the order <table>, then open a row <tr> (short for table row) and put in as many columns as you want with <td> (short for table data) without forgetting to close it before adding another: </td>. Once finished putting in the columns of one row you'll have to close the row </tr> like this you can add as many rows as you want to your table. When you're finished with the table close it with: </table>. The dimensions of the tables can be given with pixels, defining the width or the height of the table or of every column or better, giving a certain percentage (% of the screen that you want to have occupied by the table). CODE:

<table width=60% border=1> <tr> <td> FIRST ROW, FIRST COLUMN </td> <td> FIRST ROW, SECOND COLUMN </td> </tr> <tr> <td> SECOND ROW, FIRST COLUMN </td> <td> SECOND ROW, SECOND COLUMN </td> </tr> </table>

If you want to have visible column outlines you have to add: border="1" (or more). To make the outlines of all tables in a document visible you can do that with at once in the text editor using the order "Replace" in "Edit / Replace...". In the field "Find" you'll have to type in: border= "0" and click on "Replace by" put in: border= "1". Like this all the outlines of all the tables are changed at once.

Exercise 12: Modify the background colours and the colours of the outlines of your table following the instructions of the following paragraphe.

To change the background colour of every column, you have to add the tag "bgcolor="colour" to every column, this is to say to the tag <td>: <td bgcolor="colour">. And to change the outlines of the columns, you have to write: <td bordercolor="colour">.

CODE:

If you want to change the colour and the outlines of the entire table, add the same orders to the tag "table": CODE:

In this example we have changed the outlines of every column and the exterior En aquest exemple hem canviat les l�nies i colors de cada casella i les l�nies exteriors de la taula:

FIRST ROW, FIRST COLUMN	FIRST ROW, SECOND COLUMN
SECOND ROW, FIRST COLUMN	SECOND ROW, SECOND COLUMN

CODE:

<table width=50% border=1 bordercolor= "black"> <tr> <td bgcolor="cyan" bordercolor= "blue">FIRST ROW, FIRST COLUMN</td> <td bgcolor="pink" bordercolor= "blue">FIRST ROW, SECOND COLUMN</td> </tr> <tr> <td bgcolor="gold" bordercolor= "blue">SECOND ROW, FIRST COLUMN</td> <td bgcolor="goldenrod" bordercolor= "blue">SECOND ROW, SECOND COLUMN</td> </tr> </table>

Exercise 13: Modify the columns of your table with the orders "colspan" and "rowspan" (explained in the following paragraphe) to receive this table:

first row, first column
second row, first column	second row, second column

(Note: create the table with a width of 150 pixels)

6.1.2. TRANSFORMING TABLES: Now we'll modify the form of the columns with the tags COLSPN and ROWSPAN: The direction of the modificatin is always from the left to the right and from the top to the bottom. 6.1.2.1. Colspan: Joins two or more columns.

FIRST ROW, FIRST COLUMN
SECOND ROW, FIRST COLUMN	SECOND ROW, SECOND COLUMN

CODE:

<table width=50% border=1> <tr> <td colspan=2> FIRST ROW, FIRST COLUMN </td> </tr> <tr> <td> SECOND ROW, FIRST COLUMN </td> <td> SECOND ROW, SECOND COLUMN </td> </tr> </table>

6.1.2.2. Rowspan: Joins two or more rows.

FIRST ROW, FIRST COLUMN	FIRST ROW, SECOND COLUMN
	SECOND ROW, SECOND COLUMN

CODE:

<table width=50% border=1 > <tr> <td rowspan=2> FIRST ROW, FIRST COLUMN </td> <td> FIRST ROW, SECOND COLUMN </td> </tr> <tr> <td> SECOND ROW, SECOND COLUMN </td> </tr> </table>

6.1.3. CELLSPACING and CELLPADDING: space in the cells. 6.1.3.1. Cellspacing: attribute that specifies the space between cells. Example for a table with cellspacing=0:

A	B
C	D

CODE:

Example for a table with cellspacing=1:

A	B
C	D

CODE:

6.1.3.2. Cellpadding: attribute the specifies the space between the cell wall and the content of it. Example for a table with cellpadding=0:

A	B
C	D

CODE:

Example for a table with cellpadding=10:

A	B
C	D

CODE:

If there are mistakes in the results it's recommended to give them the value=0 for cellspacing to see the missing lines in the cellpadding clearly. You can also move the content of every column horizontally and vertically. The orders for that are as follows: Horizontal mouvement (align):

align content to the right: <td align="right">
align content to the left: <td align="left">
align content to the middle: <td align="middle">

Vertical mouvement (valign):

align content to the top: <td valign="top">
align content to the bottom: <td valign="bottom">
align content to the center: <td valign="center">

Exercise 14: Create another table like the one in the following paragraphe (taules "niuades").

6.1.4. "NESTED" TABLES: one table inside another. As an example we create a green table inside a red one.

A	B
C	D

CODE:

Note: when we create a table and want an empty column (without content) what we have to do is to type in a blank space:   For further information about  , go to Tutorial I (Blank space)

Exercise 15: This page is a table with invisible lines (border=0). Change the lines of the table in its source code in the following way:

open the source code of the page and save it in your folder under the name: web04.html Attention: by saving it, in the field "type" you have to choose the option: save as "Web page, only HTML (*.htm, *.html)"
open it again from your folder with the text editor.
in the source code change the option "border"2 and write: border=1
change the outline colours of the table too: bordercolor=blue
add: cellspacing=0
change the size and the content of the columns like this:
- first column: put in a background colour of your choice
- second column: remove the content and insert insert all the tables you've created in the previously created document "web03.html"
- third column: put in a background colour of your choice
- fourth column: insert an image of your choice
The new table has to look more or less like this one:

table 1

table 2

image

6.3. FRAMESET

It's a HTML document without 'body' that shows several HTML documents on the screen that are related with each other. The tag <frameset> defines the division of the window into frames. Every frameset defines a set of rows and columns. The values of the rows/columns indicate the quantity of the area of the screen that every row/column takes up. The tag <frame> defines which HTML document is placed inside every frame. Framesets can be vertical and horizontal, you can also create "nested" framesets. This web is an example for a horizontal frameset, in which the upper frame contains the menu and the rest of the page shows us the content of every chapter. Example for a vertical frameset Example for a "nested" frameset

Exercise 16: Create another document (web05.html) with a vertical frameset that contains links to the other files you worked on (web01.html, web02.html, web03.html i web04.html) following this explanations.

To create a frameset you need at least three html documents:

Frameset: where the ensemble of frames that you want to show and the porportions are specified.

<html> <head><title>frameset</title></head> <frameset cols="150,*"> <frame src="menu.html" name="menu"> <frame src="content.html" name="content"> </frameset> </html>

Menu: is used as a fix part on the screen that should be the index of the page.

<html> <head><title>menu</title></head> <body bgcolor="gold"> <h3>menu</h3> <a href="http://www.upc.edu" target="content">session 1</a><br> session 2<br> session 3<br> </body> </html>

Content: Is the body of the page and shows the content of the chapters that are in the menu.

<html> <head><title>content</title></head> <body bgcolor="lightblue"> <h3>content</h3> </body> </html>

6.4. CSS STYLESHEETS (Cascading Style Sheets)

The external Style Sheets allow you to change the aspect and design of all the pages in a website with only one file. They are normally saved as external .css files. The external style sheets can save a lot of work when you want to give the same appearance to a multitude of web pages. Instead of adding the attributes you want to have in every document (font types, dimensions, colours, link formats...) what you do is fixing all the parameters in only one file (the Style Sheet), just adding one tag to every document afterwards to make a reference to your style sheet. 6.4.1. HOW DOES IT WORK? Many properties used in CSS are similar to the ones of HTML, you'll recognize them easily. Look at the following example. Let's say, we want to take the colour red as background colour of our web: Using HTML we could do that in this way:

With CSS, the same result is created like this:

body {background-color=red;}

As you can see, the codes are pretty similar. You'll see that a CSS file contains two main parts: a selector and one or more declarations:

Normally the selector is a HTML element to which you want to give a style. Every declaration is made of a property and a value. The property is the attribute that you want to change. Every property has a value. The CSS declarations always end with a semicolon, the declaration groups are put in this kind of brackets: { } To make th CSS better legible, put every declaration in a separate line, like this: CODE:

h1 { color:red; text-size:"10"; font-family:arial; }

6.4.2. HOW TO BEGIN? You saw how it works, now we'll explain how to begin with your first style sheet:

open a new document with the text editor
type in the selector and the declarations you want to determine, for example like that:

body { font-family: verdana, arial, helvetica; color: black; size: 2; }

save it as "mystyle.css"

With this style sheet you determined that the font in you web page shall be Verdana (in case of not finding Verdana, it would be Arial or Helvetica), the colour will be black and the size "2". If you want to determine mir parameters as for example, that all the links of your pages won't be underlined or have determined colours for visited links and active links you'd have to add this to your style sheet: CODE:

a { text-decoration: none; } a:link { color: blue; } a:visited { color: red; } a:hover { color: yellow; } a:active { color: orange; }

With this orders you determined that:

no link appears underlined ({text-decoration:none;})
not visited links are shown in blue (link {color:blue;})
visited links are shwon in red (visited {color:red;})
at the moment of clicking on a link they'll turn yellow (hover {color:yellow;}
when the mouse cursor passes a link the link turns orange (active {color:orange;}

6.4.2. HOW TO APPLY A STYLE SHEET TO AN HTML DOCUMENT? Once having created the CSS style sheet you'll have to apply it to the HTML document you want. This is done creating a link from the HTML document (.html) to the style sheet (.css). CODE:

As with every link, you have to take care to write the reference correctly. You can link the same style sheet to as many HTML documents you want to. This technique can save a lot of work when, for example, you want to change the background colour of 100 HTML documents. With the CSS style sheet this change is done in a few seconds by only changing one code in the style sheet. More information about the colours of web pages: Colours

Note: Everything written inside this symbols  (programmer's tags) are only visible in the source code of the html document. This is very useful to make notes to help you with the orientation inside the document, but that you won't see in your web page. What is more , it works to make the content invisible by erasing the symbols that are shown in red here:  <table width=100 border=1 bordercolor="green"> <tr><td>A</td> <td>B</td></tr> <tr><td>C</td> <td>D</td></tr> </table>  Like this it easier to localize errors. If you have various tables, by repealing the tables you can find them easier. Tutorial I: Images More information about CSS

Từ khóa » Html Table First Column Background Color

How To Structure An HTML Document? - ETSAV

How to structure an HTML document?

How To Make First Column Of A Row Black And Second Column Red

How To Set Background Color In The First Column Of A Table (HTML ...

Coloring CSS Tables - HTML

Tr Bgcolor Is Obsolete: Here's How To Set Table Row Background ...

Why Table Bgcolor Is No Longer Valid Code (And What To ... - HTML

Table Colors & Background : MGA - Web Development Tutorials

HTML Table Styling - W3Schools

: The Table Row Element - HTML - MDN Web Docs - Mozilla

How To Change The Background Color Of An HTML Table - ThoughtCo

Setting Table Colors - Documentation For Action Request System 21.3

HTML And CSS Tutorial: How-To's And Miscellaneous

HTML Table Basics

Change Background Color Of First Column In Pivot T... - Qlik Community

HTML Table Basics - Learn Web Development | MDN

Liên Hệ