You are on page 1of 23

HTML Lenguaje utilizado para la creación de páginas web: el Hyper Text Markup Language, más conocido como HTML

. Es el lenguaje con el que se escriben las páginas web. Las páginas web pueden ser Vistas por el usuario mediante un tipo de aplicación llamada navegador. Podemos decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar las páginas webs al usuario, siendo hoy en día la interface más extendida en la red.

Versiones de HTML En noviembre de 1995 se aprobó el estándar HTML 2.0. Para la creación de páginas web. Se creó con objetivos divulgativos, orientado a la actividad académica, en el que el contenido de las páginas era más importante que el diseño. Pero esta versión del HTML carecía de muchas herramientas que permitieran controlar el diseño de las páginas y añadir contenido multimedia, por lo que Netscape (cuyos navegadores eran los más utilizados por aquellos años) comenzó a incluir nuevas etiquetas que no existían en el estándar. El comité encargado de establecer los estándares dentro de Internet, comenzó a trabajar en el borrador de una nueva versión de HTML, el borrador de HTML 3.0. Pero este borrador resultó demasiado extenso, al intentar incluir numerosos nuevos atributos para etiquetas ya existentes, y la creación de otras muchas etiquetas nuevas. Por ello, no fue bien aceptado por el mercado y varias compañías se unieron para formar un nuevo comité encargado de establecer los estándares del HTML. Este comité pasó a llamarse W3C. En enero de 1997 se aprobó el estándar HTML 3.2. Este nuevo estándar incluía las mejoras proporcionadas por los navegadores Internet Explorer y Netscape Navigator, que ya habían realizado extensiones sobre el estándar HTML 2.0. En diciembre de 1997 se aprobó el estándar HTML 4.0, creado para estandarizar los marcos (frames), las hojas de estilo y los scripts. En septiembre de 2001 se aprobó el estándar HTML 4.01.

Sintaxis del HTML
El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos etiqueta. La etiqueta presenta frecuentemente dos partes:   Una apertura de forma general <etiqueta> Un cierre de tipo </ etiqueta>

Estructura de un documento HTML
La estructura básica de un documento HTML es la siguiente:         <HTML> Indica el inicio del documento <HEAD> Indica el inicio de la cabecera <TITLE> Inicio del título del documento </TITLE> Final del título del documento </HEAD> Final de la cabecera <BODY> Inicio del cuerpo del documento </BODY> Final del cuerpo del documento </HTML> Final del documento

Ninguno de estos elementos es obligatorio, pudiendo crear documentos HTML sin incluir estas etiquetas de identificación. No obstante es altamente recomendable la construcción de páginas HTML siguiendo esta estructura, para una buena estructuración y legibilidad del código. Etiquetas básicas de HTML Las etiquetas más simples y de uso más común en HTML.

Headings
Nos definen el tamaño de de antes un título letra y o más de cada cabecera. grande. título. <h1> nos dá el tipo <h6> nos dá el tipo de letra más pequeño. HTML agrega automáticamente un

espacio

después

<h1> al ser usado como título de una página Web, es de suma importancia ya que es uno de los parámetros que Google tiene en cuenta, a la hora de indexar su sitio.

Código
<html> <head> <title>Headings</title> </head> <body> <h1>Heading <h2>Heading

1</h1> 2</h2>

centro o derecha especificando dicha justificación en el interior de la etiqueta por medio de un atributo align. Trazar una línea La etiqueta <hr> nos permite trazar una línea horizontal como las que separan las distintas secciones de este tutorial. Los comentarios nos sirven para explicar mejor el código y son de gran ayuda en el momento que necesitemos editarlo. <p align="left">Texto alineado a la izquierda</p> <p align="center">Texto alineado al centro</p> <p align="right">Texto alineado a la derecha</p> Comentarios La etiqueta <!-. La etiqueta <hr> no tiene cierre. --> * Nota que el signo de exclamación se coloca solo al principio del código..Esto es un comentario.. Los párrafos delimitados por etiquetas <p> pueden ser fácilmente justificados a la izquierda. El mismo es ignorado por el navegador al momento de leerlo.. --> se utiliza para insertar un comentario dentro del código que estamos escribiendo. <!-. .<h3>Heading <h4>Heading <h5>Heading <h6>Heading </body> </html> 3</h3> 4</h4> 5</h5> 6</h6> Resultado Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Párrafos Los párrafos se definen con la etiqueta <p>.

Desaprobado. Estos son solo algunos ejemplos de lo que podemos hacer con estos elementos.. Use <del> en su lugar subrayado..) Indica un acrónimo (p. de der. Use <del> en su lugar tachado.. a izq. etc. Para ello utilizamos las siguientes: Etiquetas para dar forma al texto Etiquetas <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <tt> <s> <strike> <u> Descripción Define un texto Define un texto Define un texto Define un texto Define un texto Define un texto Define un texto Define un texto Define un texto Define un texto Define un texto Define un texto Define un texto Define un texto en negrita grande enfatizado en itálica pequeño fuerte subíndice superíndice subrayado tachado de teletipo tachado. a der.ej.ej.ej. Desaprobado.radar. Desaprobado.Formato de texto con HTML HTML nos permite definir el formato de visualización del texto en la pantalla. HTTP.) Designa una cita larga Designa una cita corta Contiene una cita o una referencia a otras fuentes Indica que aquí es donde se define el término encerrado . de izq.) Define la información sobre el autor Define la dirección del texto (p.. Muy útil para cuando queramos resaltar o enfatizar una un texto en especial. etc. autobús. También muy usado para subrayar o escribir subíndices o superíndices. WAC . Use <ins> en su lugar Etiquetas de citaciones y definiciones Etiquetas <abbr> <acronym> <address> <bdo> <blockquote> <q> <cite> <dfn> Descripción Indica una forma abreviada (p. WWW.

hanselsuazo. formularios. Ejemplo: <a href="http://www.Enlaces en HTML La propiedad más importante de Internet. otras tablas. La tabla está dividida en filas definidas con la etiqueta <tr>. imágenes. etc . Y a su vez cada fila dividida en celdas definidas con la etiqueta <td>. Las celdas pueden contener texto.hanselsuazo. La etiqueta <a> tiene como cierre </a>. ¿Qué son los Enlaces o Links? Los enlaces o links (en Inglés) nos permiten conectarnos con otros documentos:      una imagen un video un archivo de sonido sitios en la web(otra página web) mandar un email Para ello debemos usar la etiqueta <a> que proviene de la primera letra de la palabra anchor (ancla). <a href="http://www.com/">La Página de Hansel</a> EL atributo target Se utiliza para definir donde queremos que se abra el documento al presionar sobre el enlace. Características de las tablas     Definimos las tablas con la etiqueta<table>. listas. El ejemplo de abajo abrirá el documento en una nueva página del navegador.com /" target="_blank"> La Página de Hansel </a> Tablas de HTML Las tablas son una herramienta muy útil para presentar datos de tablas y para el diseño de texto y gráficos de una página HTML. es la posibilidad de conectarse los unos con los otros.

Código <table border="3"> <tr> <td>Borde</td> <td>3 </tr> </table> pixels</td> Resultado Borde 3 pixels Veamos un ejemplo sin bordes Código <table> <tr> <td>Esta <td>Sin </tr> </table> tabla es</td> bordes</td> Resultado Esta tabla es Sin bordes .Código <table <tr> <td>Nombre</td> <td>Apellido</td> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table> border="1"> Resultado Nombre Apellido Pedro Garcia Bordes de las tablas Para que se visualicen los bordes de una tabla. debemos agregar el atributo border junto con el valor expresado en pixels. de lo contrario no se verán los bordes que dividen las celdas de la tabla.

Márgenes de las celdas Es el espacio que se encuentra entre los bordes de la celda y su contenido. Código <table <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> <tr> <td>Juan</td> <td>Perez</td> </tr> </table> border="1"> Resultado Nombre Apellido Pedro Garcia Juan Perez La etiqueta <th> siempre muestra los encabezados remarcados. Encabezados de las tablas Los encabezados de una tabla se definen con la etiqueta <th>. Definimos los márgenes con el atributo cellpadding.Nota: al no colocar el atributo border. Código <table <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> border="1px" cellpadding="20px"> . los bordes no se visualizan pero la tabla existe.

Código <table <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table> border="1px" cellspacing="15px"> Resultado Nombre Apellido Pedro Garcia Nota: en este ejemplo el atributo cellspacing deja un espacio de 15 pixels entre las celdas de la tabla .<td>Pedro</td> <td>Garcia</td> </tr> </table> Resultado Nombre Apellido Pedro García Nota: en este ejemplo podemos observar que el atributo cellpadding deja 20 pixels mínimo entre las palabras dentro de cada celda y los bordes de las mismas. entre celda y celda. Espaciado entre celdas Es el espacio que se encuentra El mismo está definido con el atributo cellspacing.

La etiqueta frame La etiqueta <frame> define qué documento colocaremos en cada marco. Cada vista es un documento independiente de los otros. Esto posibilita mantener cierta información visible mientras otras vistas se desplazan o se sustituyen...Frames en HTML Dividimos la página en partes más pequeñas y en cada una de ellas visualizamos documentos diferentes. de la Este ejemplo crea una cuadrícula de 2x3 subespacios..70%" .34%. La etiqueta frameset La etiqueta <frameset> se usa para dividir la ventana del navegador en diferentes marcos que pueden ser de diferentes medidas.html"> </frameset> cols="25%. La etiqueta <frame> no debe llevar etiqueta de cierre La etiqueta noframes . Cada frameset define un grupo de filas y columnas.html" y la segunda columna el documento "frame2. Los frames(marcos en español) permiten a los autores presentar documentos con vistas múltiples.33%"> definición. <frameset rows="30%.el resto </frameset> cols="33%. La primer columna contiene el documento "frame1.75%"> En el ejemplo dividimos la pantalla en una columna de 25% y otra de 75%.html". <frameset <frame src="frame1..html"> <frame src="frame2.

hanselsuazo.    <noframes> se coloca dentro de la etiqueta frameset si el navegador soporta frames.La etiqueta <noframes> muestra un texto para los navegadores que no soportan frames.htm"> La etiqueta iframe La etiqueta <iframe> se usa para crear un frame en línea que contiene otro documento. que puedo mostrar una ventana que contenga otra página Web dentro de la página que estamos diseñando Código <iframe src="http://www.com" </iframe> width="100%"> .htm"> src="cuerpopag.75%"> navegador no soporta frames src="cabezapag. el texto del <noframes> no se mostrará si usamos la etiqueta <noframes> el texto debe ir entre las etiquetas <body> </body> <frameset <noframes> <body> Su </body> </noframes> <frame <frame </frameset> rows="25%. Es decir.

Bananas Dentro de cada Item se pueden agregar imágenes. otras listas.Listados Las listas son ideales para el diseño de menús. Naranjas 2. De definición. ¿Qué son las listas de HTML? Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura. letras o signos. etc. Código <ol> <li>Naranjas</li> <li>Manzanas</li> <li>Bananas</li> </ol> Resultado 1. párrafos. cuadrado o triángulo negro. Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno de los items de la misma. Tenemos tres tipos de listas:    Ordenadas. Listas Desordenadas Exponen la lista anteponiendo un punto. Desordenadas.Listas . Manzanas 3. . utilizamos la etiqueta <li>. Listas Ordenadas Son aquellas que ordenan la lista anteponiendo números.

etc. . párrafos. con la mismas etiqueta <dl>. otras listas. etc. Listas de definición Se utilizan para definir términos. Las listas de definición se representan Los términos de las La definición de esos términos comienza con <dd>.Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items de la misma utilizamos la etiqueta <li>. otras listas. Código <ul> <li>Tomates</li> <li>Pepinos</li> <li>Cebollas</li> </ul> Resultado    Tomates Pepinos Cebollas Dentro de cada Item se pueden agregar imágenes. párrafos. Código <dl> <dt>Chocolate</dt> <dd>Elaborado <dt>Caramelo</dt> <dd>Elaborado </dl> a a base base de de cacao</dd> azucar</dd> Resultado Chocolate Elaborado a base de cacao Caramelo Elaborado a base de azucar Dentro de las etiquetas <dd> se pueden agregar imágenes. con <dt>.

La etiqueta input Nos define el registro donde el usuario puede ingresar El atributo type especifica el tipo de control Entre ellos se encuentran los siguientes valores: los a datos. Tipos de controles:         Botones (buttons) Casillas de verificación (checkboxes) Radiobotones (radio buttons) Menúes (menus) Entrada de texto (text input) Selección de ficheros (file select) Controles ocultos (hidden controls) Controles tipo objeto (object controls) Dentro de la etiqueta <form>. etc. a un servidor web. crear. Tambien contamos con el atributo method. Esos datos son enviados a un agente para que los procese (por ej. a un servidor de correo. Text Crea un control que nos permite ingresar un texto en una línea.Formularios en HTML ¿Para qué se usan los formularios? Los formularios son usados para que el usuario ingrese datos. Este nos especificará el documento que manejará el formulario completado y enviado. Los usuarios interaccionan con los formularios a través de las llamadoscontroles. El mismo nos define el método por el cual se enviarán los datos del usuario al servidor.). se encuentra el atributo action.. a etiqueta form Dentro de la etiqueta <form> se encuentra el formulario. Código .

php es el encargado de manipular los datos que el usuario ingresó en el formulario method="get" --> nos indica que los datos del formulario se enviarán por el método get name="nombre" --> le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo Radio botones Se usan cuando queremos que el usuario elija una sola opción de entre una serie de posibilidades.php" Nombre: <input type"text"name="nombre"> <br> Apellido: <input type"text"name="apellido"> </form> method="get"> Resultado Nombre: Apellido: Nota: en este ejemplo podemos observar lo siguiente:    action="datos. Código <form action="edades.asp" ¿Edad? <input type"radio" name="edad" value="menor">menor <br> <input type"radio" name="edad" value="adulto">entre <br> <input type"radio" name="edad" value="mayor">mayor </form> method="post"> de 18 de y 17 60 61 Resultado .<form action="datos.php" --> nos indica que el archivo datos.

php" name="pasa" name="pasa" name="pasa" name="pasa" method="get"> value="tv">TV value="libros">Libros value="musica">Música value="otros">Otros Resultado ¿Pasatiempos? TV Libros . value="mayor" --> define el valor del elemento <input> Checkbox (casillas de verificación) Permite al usuario elegir varias opciones entre todas las posibilidades.asp es el encargado de manipular los datos que el usuario ingresó en el formulario method="post" --> nos indica que los datos del formulario se enviarán por el método post name="edad" --> debemos utilizar el mismo nombre(en este caso "edad") para todos los elementos del mismo control radio.¿Edad? menor entre mayor de 61 18 de y 17 60 Nota: en este ejemplo podemos observar lo siguiente:     action="edades. Código <form ¿Pasatiempos? <input type"checkbox" <br> <input type"checkbox" <br> <input type"checkbox" <br> <input type"checkbox" </form> action="hobbie.asp" --> nos indica que el archivo edades.

Código <form action="datos_personales. pero el texto introducido se presenta mediante una serie de asteriscos. Al ser pulsado reinicializa todos los controles a sus valores iniciales.php" --> nos indica que el archivo hobbie.Música Otros Nota: en este ejemplo podemos observar lo siguiente:     action="hobbie. Es utilizado generalmente para ingresar contraseñas. Submit Botón de envio de datos del formulario. Reset Botón de reinicialización.php es el encargado de manipular los datos que el usuario ingresó en el formulario method="get" --> nos indica que los datos del formulario se enviarán por el método get name="pasa" --> debemos utilizar el mismo nombre(en este caso "pasa") para todos los elementos del mismo control checkbox. value="tv" --> define el valor del elemento <input> Password Funciona igual que text.php" Nombre: <input type"text" name="nombre"> <br> Contraseña: <input type"password"name="secreto"> <br> <input type"submit" value="Enviar"> <input type"reset" value="Borrar"> </form> method="post"> Resultado .

php" --> en el formulario     method="post" --> nos indica que los datos del formulario se enviarán por el método post name="nombre" . Cada opción ofrecida por el menú se representa con la etiqueta <option> Código <form action="continentes.name="secreto" --> le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo value="Enviar" --> define el texto del botón "submit" value="Borrar" --> define el texto del botón "reset" nos indica que el archivo datos_personales.php es el encargado de manipular los datos que el usuario ingresó Las etiquetas select y option La etiqueta <select> es usada para crear un menú desplegable.php" <select name="continente"> <option value="america">América</option> <option value="asia">Asia</option> <option value="europa">Europa</option> <option value="oceania">Oceanía</option> <option value="africa">África</option> </select> </form> method="get"> Resultado .Nombre: Contraseña: Enviar Borrar Nota: en este ejemplo podemos observar lo siguiente:  action="datos_personales.

php es el encargado de manipular los datos que el usuario ingresó en el formulario method="get" --> nos indica que los datos del formulario se enviarán por el método get name="continente" --> le asigna un único nombre al menú desplegable value="america" --> define el valor del elemento <option> La etiqueta textarea Se usa para crear un control de entrada de texto multilínea.php" <textarea name="eltexto" rows="5"cols="30"> Aquí podemos ingresar un texto introductorio </textarea> </form> method="post"> si lo deseamos.php" --> nos indica que el archivo texto.Nota: en este ejemplo podemos observar lo siguiente:     action="continentes. Nota: en este ejemplo podemos observar lo siguiente:    action="texto.php" --> nos indica que el archivo continentes. Código <form action="texto. Los atributo rows y cols nos indican la cantidad de filas y columnas que tendra el recuadro del área de texto. Resultado Aquí podemos ingresar un texto introductorio si lo deseamos.php es el encargado de manipular los datos que el usuario ingresó en el formulario method="post" --> nos indica que los datos del formulario se enviarán por el método post name="eltexto" --> le asigna un nombre al elemento textarea .

hanselsuazo. Este texto aparece al pasar el apuntador sobre la imagen o en muchos casos cuando el navegador.com/imagenes/". Esta etiqueta es vacía. entonces esta sería la forma de escribir el código: Código <imgsrc="http://www. Veamos un ejemplo Si tenemos que insertar una imagen que lleva por nombre de archivo "foto1.hanselsuazo. La etiqueta <img> no tiene cierre. gráficos y fotos le dan vida y color a las páginas web. no visualiza las imágenes y en su lugar coloca este texto alternativo dentro de un recuadro.Imágenes en HTML Las imágenes.com/imagenes/" la Texto alternativo de la imagen Se utiliza comúnmente cuando deseamos visualizar un texto explicativo de una imagen.jpgubicada en la dirección "www.jpg"> Resultado Nota: el atributo <img> mediante el uso del atributo src inserta imagen foto1. ¿Cómo insertamos imágenes en un archivo HTML? Para insertar imágenes en un sitio usaremos la etiqueta <img>. Para ello vamos a usar el atributo alt . es decir que debemos utilizarla con el atributo src para que muestre la imagen.com/imagenes/foto1.jpg" y que está ubicada en el directorio "www.hanselsuazo. por alguna razón.

El valor de este atributo es la URL de la imagen que deseamos colocar. El atributo background Si queremos diseñar sitios más atractivos debemos utilizar imagenes o colores para el fondo de nuestras páginas. El fondo se define en la etiqueta<body>.hanselsuazo. Para insertar una imagen de fondo debemos utilizar el atributobackground dentro de la etiqueta<body>.hanselsuazo.com/imagenes/foto1.com/imagenes/punteado.Código <img src="http://www.jpg"> <body background="http://www. esta se repetirá tantas veces como sea necesario hasta cubrir toda la pantalla.jpg"alt="Dos caminando de la mano"> niñas Resultado Fondos de Pantalla Es el telón de fondo de toda página web. Si la imagen es más pequeña que la pantalla del navegador.gif" > . Ejemplos <body background="paisaje.

valor RGB. o nombre de color(en inglés). El valor del mismo puede expresarse con un número hexadecimal.0.El atributo bgcolor El atributo bgcolor especifica el color de fondo de una página HTML.0)"> <body bgcolor="red"> Tabla simplificadora de colores Primarios aditivos saturados (absolutos) Nombre Rojo Verde Azul Blanco Valor hexadecimal #FF0000 #00FF00 #0000FF #FFFFFF Descripción Primarios sustractivos nulos (absolutos) Nombre Cyan Magenta Amarillo Negro Valor hexadecimal #00FFFF #FF00FF #FFFF00 #000000 Descripción . Este atributo también debe ir dentro de la etiqueta <body> Ejemplos <body bgcolor="#FF0000"> <body bgcolor="rgb(255.

Secundarios y terciarios (medianos) Nombre Gris Rosa Violeta Celeste Marrón Naranja Lavanda Turquesa Oro viejo Valor hexadecimal #808080 #FF8080 #800080 #80FFFF #800000 #FF8000 #8000FF #00FF80 #BBBB20 Descripción Los colores estándard El consorcio W3C (World Wide Web Consortium) tiene una lista de 16 colores que pueden ser validados con el validador de HTML. Nombre Cyan Gray Navy Silver Black Green Valor hexadecimal #00FFFF #808080 #000080 #C0C0C0 #000000 #008000 Descripción .

Olive Teal Blue Lime Purple White Fuchsia Maroon Red Yellow #808000 #008080 #0000FF #00FF00 #800080 #FFFFFF #FF00FF #800000 #FF0000 #FFFF00 .