DISEÑO WEB 1
HTML 4.01
Etiquetas-Tags
1. Etiquetas para la estructura básicas de un documento HTML
<!-- ….. --> Define comentarios no visibles
<html> </html> Define el tipo de documento
<title> </title> Define el título del documento
<head> </head> Define información del documento
<body> </body> Define el cuerpo del documento
Formatos de texto
<h1></h1>………<h6></h6> Define títulos
<hr> Define una línea
<br> Define un salto de línea
<center> </center> Define el texto al medio (no es compatible con HTML5)
<p> </p> Define un párrafo
<i> </i> Define una parte del texto en cursiva
<b> </b> Define una parte del texto en negrita
<pre> </pre> Define el texto preformateado
<tt> </tt> Define el texto en teletipo (no es compatible con HTML5)
<blockquote> </blockquote> Define una sección que es citada a partir de otro origen
<sub> </sub> Define el texto en subíndice
<sup> </sup> Define el texto en superíndice
2. listas
<ul> </ul> Define una lista desordenada
<ol> </ol> Define una lista ordenada
<li> </li> Define elementos de la lista
<dl> </dl> Define una lista de descripción
<dt> </dt> Define un término-nombre en una lista de descripción
<dd> </dd> Define la descripción, valor de un término en una lista de descripción
3. Caracteres especiales
4. enlaces
<a href=” #marca ”> yy </a> Define enlace dentro del mismo documento
<a name = “marca”> </a>
<a href=”[Link]”>yy</a> Define enlace con otra página nuestra
<a href=”[Link]”>Nav</a> Define enlace con una página fuera de nuestro sistema
<a href=”[Link]”>Gmail </a> Define el enlace con una dirección email
<a href=”[Link]”> imagen1</a> Define enlace con imagen
<a href=”cumbia.mp3”>musica</a> Define enlace con musica
<a href=”video.mp4”>video</a> Define enlace con video
5. imagenes
<img src=”[Link]”> Define la implementacion de una imagen en el documento
<img src=”[Link]” align=”top”> Define titular alineado arriba
<img src=”[Link]” align=”middle”> Define titular alineado en medio
SISTEMAS INFORMATICOS 1
DISEÑO WEB 1
<img src=”[Link]” align=”bottom”> Define titular alineado abajo
<a href=”[Link]”> Define una imagen como enlace a otra pagina
<img src=”[Link]”>
</a>
<img src=”[Link]” width=”80”> Define dimensionado de la imagen a lo ancho
<img src=”[Link]” height=”40”> Define dimensionado de la imagen a lo alto
6. Fondos y Colores
<body gbcolor=”#ff0055”> </body> Define un color a todo el documento
<body text=”#ff0055”> </body> Define color de texto a todo el documento
<body link=”#ff0055”> </body> Define color de los enlaces
<body vlink=”#ff0055”> </body> Define color de los enlaces visitados
<body alink=”#ff0055”> </body> Define color de los enlaces activos (al ser pulsados)
<body background=”[Link]”> </body> Define una imagen como fondo del documento
[Link]
<table> </table> Define la estructura básica de la tabla
<table border= “5”> </table> Define el grosos de las líneas de la tabla
<table width=”60%”> </table> Define el ancho de la tabla
<table height=”310”> </table> Define el alto de la tabla
<tr> </tr> Defina una fila en la tabla
<td> </td> Define la cantidad de celdas que tendrá la fila
<th> </th> Define una celda de encabezado de una tabla sobre las columnas
<td align=”center”> </td> Define el contenido de la tabla en centro
<td align=”right”> </td> Define el contenido de la tabla a la derecha
<th align=”left”> </th> Define el contenido de la tabla a la izquierda
<td colspan=”3”> </td> Define la unión de 3 columnas
<td rowspan=”2”> </td> Define la unión de 2 filas
<table border bgcolor=”red”> </table> Define el color del borde de la tabla
<table bgcolor=”red”> </table> Define el color de fondo de toda la tabla
<td bgcolor=”blue”> </td> Define el color de una celda
<table background=”[Link]”> </table> Define una imagen como fondo de la tabla
<table border=”4” cellspacing=”20”> Define la separación entre celdas de una tabla
</table>
<table border=”4” cellpadding=”40”> Define la separación entre el borde y contenido dentro de la celda que
</table> por defecto es de un pixel
7. Formularios
<form action=”[Link] Define la estructura basica de un formulario desde la acción, el
method=”post” enctype=”text/plain”> método de envio de información y la forma de recibir la información
</form>
<input type=”text” name=”nombre”> Define la introducción de texto en cajas creadas
<input type=”text” name=”nombre” Define el tamaño de la caja de texto
size=”10”>
<input type=”text” name=”nombre” Define la cantidad de caracteres que se insertaran en la caja de texto
maxlength=”8”>
<input type=”password” Define texto no visible para contraseñas
name=”contraseña”>
<textarea name=”comentarios” rows=”4” Define un control de input multilinea (área de texto)
cols=”10”> </textarea>
<select name=”colores”> Define la introducción de texto por medio de menus
SISTEMAS INFORMATICOS 2
DISEÑO WEB 1
<option selected>
<option> rojo
<option>Amarillo
<option>verde
</select>
<input type=”checkbox” name=”lista”> Define la introduccion de texto por medio de botones que son cajas
de confirmación
<input type=”radio” name=”colorPreferid”> Define la introduccion de texto con la selecciones de botones de radio
<input type=”submit” value=”Enviar”> Define el botón de envio
<input type=”reset” value=”Borrar”> Define el botón de borrado
SISTEMAS INFORMATICOS 3
