diseÑo de pÁginas web html y css tema 3: etiquetas avanzadas jose miguel vidagany igual
TRANSCRIPT
DISEÑO DE PÁGINAS WEB HTML Y CSS
Tema 3: Etiquetas avanzadas
Jose Miguel Vidagany Igual
HEAD
<!DOCTYPE html><html><head><title>Title of the document</title></head>
<body>The content of the document......</body>
</html>
Link (HEAD)
Sirve para establecer la relación entre varios elementos
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
BASE
Indica la url base de la página web<head>
<base href="http://www.w3schools.com/images/" target="_blank"></head>
Meta
Define palabras clave:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Define una descripcion de tu página web:
<meta name="description" content="Free Web tutorials on HTML and CSS">
Indica el autor:
<meta name="author" content="Hege Refsnes"> Actualiza la página cada 30 SEGUNDOS:
<meta http-equiv="refresh" content="30">
Meta (codificación)
HTML4<meta http-equiv="Content-type"
content="text/html;charset=UTF-8"> HTML5<meta charset="UTF-8">
Body
La etiqueta Body es el cuerpo de la página web, y será donde pondremos todas las etiquetas que den formato (apariencia y estructura) a nuestra página web.
Imagenes
<img src="smiley.gif" alt="Smiley face" width="32" height="32">
Imágenes (mapa)
http://www.valenciacf.com/ver/1002/precios-y-venta-online.html
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<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>
Tablas
<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>
Tablas (etiquetas)
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
Colgroup
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
Listas
Normales
<ul><li>Coffee</li><li>Milk</li></ul>
Ordenadas
<ol><li>Coffee</li><li>Milk</li></ol>
Definicion
Anidación de listas
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
Bloques
DIV (bloque)
<div style="color:red"> <h3>This is a heading</h3> <p>This is a paragraph.</p></div>
SPAN (Inline)
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
Examen!
http://www.virtualnauta.com/html-examen