WEB AUTHORING. MAT 108

Alejandra Jarabo
Media Arts & Technologies Division.sbcc
HTML CODE. FIRST APPROACH
TO NEXT PAGE

 

Hyper Text Markup Language: html

Current standard: XHTML (eXtensible)

Based on XML--> Set of guidelines for delimiting a text through System tags, through computers and operating systems (so everybody can see the "same" page)

Tags wrap around the content like the head and tail of a train around the wagons

 

Opening tag <p>

Closing tag </p>

 

Opening tag <table>

Closing tag </table>

Tables are measured by ROWS in html <tr> ... </tr>

Each CELL in a table is called <td>
<td>...</td>

 

For a complete list of html tags AND the code for special characters ( besides the alphabetic and numeral characters, or letters used in other languages). Click HERE


The basic html code of a table looks like this:

<table>
<tr>
<td>first cell</td>
<td>second cell</td>
<td>third cell</td>
</tr>

<tr>
<td>cell n one 2 </td>
<td>cell n two 2</td>
<td>cell n three 2</td>
</tr>
</table>

Let's look at the table in the design window

 

 

first cell second cell third cell
cell n one 2 cell n two 2 cell n three 2

 

<table width="300" border="1" bordercolor="#333333">
<tr>
<td bgcolor="#CC6666"><div align="center">1</div></td>
<td><divalign="center">2</div></td>
<td bgcolor="#CC6666"><div align="center">3</div></td>
</tr>


<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>

Now let's look at a table with background color for some cells:
the width is 300 pixels

 

1
2
3
A B C

The cell tag in a table <td> can have an attribute called bgcolor that lets you provide an hexadecimal value to describe the background color of the cell.

<td bgcolor="#CC6666">

 

The DIV tag is a very important tool to align elements in an html page, besides being used in a table.

Is currently used by CSS (Cascade Style Sheets), a method to to attach styles such as specific fonts, colors, and spacing to HTML documents.


The DIV tag uses a tag element, an attribute, and an attribute's value written in quotes.

<div align="left">2</div>

opening tag
   closing tag

tag		 attribute atrribute's value   text on html tag
<div align ="left" > 2 </div>

In our case above, the <div> tag lets you center the content of the cell with the atribute align.
<div align="center">your text here</div>

 

The same way, the <table> tag on the red frame above, contained 3 attributes: width, border and bordercolor.

<table width="300" border="1" bordercolor="#333333">

 

To the next page on html code click HERE