Sunteți pe pagina 1din 23

HTML Lenguaje utilizado para la creacin de pginas web: el Hyper Text Markup Language, ms conocido como HTML.

Es el lenguaje con el que se escriben las pginas web. Las pginas web pueden ser Vistas por el usuario mediante un tipo de aplicacin llamada navegador. Podemos decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar las pginas webs al usuario, siendo hoy en da la interface ms extendida en la red.

Versiones de HTML En noviembre de 1995 se aprob el estndar HTML 2.0. Para la creacin de pginas web. Se cre con objetivos divulgativos, orientado a la actividad acadmica, en el que el contenido de las pginas era ms importante que el diseo. Pero esta versin del HTML careca de muchas herramientas que permitieran controlar el diseo de las pginas y aadir contenido multimedia, por lo que Netscape (cuyos navegadores eran los ms utilizados por aquellos aos) comenz a incluir nuevas etiquetas que no existan en el estndar. El comit encargado de establecer los estndares dentro de Internet, comenz a trabajar en el borrador de una nueva versin 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 creacin de otras muchas etiquetas nuevas. Por ello, no fue bien aceptado por el mercado y varias compaas se unieron para formar un nuevo comit encargado de establecer los estndares del HTML. Este comit pas a llamarse W3C. En enero de 1997 se aprob el estndar HTML 3.2. Este nuevo estndar inclua las mejoras proporcionadas por los navegadores Internet Explorer y Netscape Navigator, que ya haban realizado extensiones sobre el estndar HTML 2.0. En diciembre de 1997 se aprob el estndar HTML 4.0, creado para estandarizar los marcos (frames), las hojas de estilo y los scripts. En septiembre de 2001 se aprob el estndar 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 bsica de un documento HTML es la siguiente: <HTML> Indica el inicio del documento <HEAD> Indica el inicio de la cabecera <TITLE> Inicio del ttulo del documento </TITLE> Final del ttulo 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 identificacin. No obstante es altamente recomendable la construccin de pginas HTML siguiendo esta estructura, para una buena estructuracin y legibilidad del cdigo. Etiquetas bsicas de HTML Las etiquetas ms simples y de uso ms comn en HTML.

Headings
Nos definen el tamao de de antes un ttulo letra y o ms de cada cabecera. grande. ttulo. <h1> nos d el tipo <h6> nos d el tipo de letra ms pequeo. HTML agrega automticamente un

espacio

despus

<h1> al ser usado como ttulo de una pgina Web, es de suma importancia ya que es uno de los parmetros que Google tiene en cuenta, a la hora de indexar su sitio.

Cdigo
<html> <head> <title>Headings</title> </head> <body> <h1>Heading <h2>Heading

1</h1> 2</h2>

<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

Prrafos
Los prrafos se definen con la etiqueta <p>. Los prrafos delimitados por etiquetas <p> pueden ser fcilmente justificados a la izquierda, centro o derecha especificando dicha justificacin en el interior de la etiqueta por medio de un atributo align. <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 <!-- ... --> se utiliza para insertar un comentario dentro del cdigo que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el cdigo y son de gran ayuda en el momento que necesitemos editarlo. <!-- Esto es un comentario. --> * Nota que el signo de exclamacin se coloca solo al principio del cdigo.

Trazar una lnea


La etiqueta <hr> nos permite trazar una lnea horizontal como las que separan las distintas secciones de este tutorial. La etiqueta <hr> no tiene cierre.

Formato de texto con HTML


HTML nos permite definir el formato de visualizacin del texto en la pantalla. Muy til para cuando queramos resaltar o enfatizar una un texto en especial. Tambin muy usado para subrayar o escribir subndices o superndices. Estos son solo algunos ejemplos de lo que podemos hacer con estos elementos. 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> Descripcin 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 itlica pequeo fuerte subndice superndice subrayado tachado de teletipo tachado. Desaprobado. Use <del> en su lugar tachado. Desaprobado. Use <del> en su lugar subrayado. Desaprobado. Use <ins> en su lugar

Etiquetas de citaciones y definiciones


Etiquetas <abbr> <acronym> <address> <bdo> <blockquote> <q> <cite> <dfn> Descripcin Indica una forma abreviada (p.ej., WWW, HTTP, etc.) Indica un acrnimo (p.ej., WAC ,radar, autobs, etc.) Define la informacin sobre el autor Define la direccin del texto (p.ej., de izq. a der., de der. a izq.) 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 trmino encerrado

Enlaces en HTML
La propiedad ms importante de Internet, es la posibilidad de conectarse los unos con los otros.

Qu son los Enlaces o Links?

Los enlaces o links (en Ingls) nos permiten conectarnos con otros documentos: una imagen un video un archivo de sonido sitios en la web(otra pgina web) mandar un email

Para ello debemos usar la etiqueta <a> que proviene de la primera letra de la palabra anchor (ancla). La etiqueta <a> tiene como cierre </a>. Ejemplo: <a href="http://www.hanselsuazo.com/">La Pgina de Hansel</a>

EL atributo target
Se utiliza para definir donde queremos que se abra el documento al presionar sobre el enlace. El ejemplo de abajo abrir el documento en una nueva pgina del navegador.

<a href="http://www. hanselsuazo.com /" target="_blank"> La Pgina de Hansel </a>

Tablas de HTML
Las tablas son una herramienta muy til para presentar datos de tablas y para el diseo de texto y grficos de una pgina HTML.

Caractersticas de las tablas


Definimos las tablas con la etiqueta<table>. La tabla est dividida en filas definidas con la etiqueta <tr>. Y a su vez cada fila dividida en celdas definidas con la etiqueta <td>. Las celdas pueden contener texto, imgenes, formularios, listas, otras tablas, etc

Cdigo
<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 vern los bordes que dividen las celdas de la tabla.

Cdigo
<table border="3"> <tr> <td>Borde</td> <td>3 </tr> </table>

pixels</td>

Resultado

Borde 3 pixels

Veamos un ejemplo sin bordes

Cdigo

<table> <tr> <td>Esta <td>Sin </tr> </table>

tabla

es</td> bordes</td>

Resultado

Esta tabla es Sin bordes

Nota: al no colocar el atributo border, los bordes no se visualizan pero la tabla existe.

Encabezados de las tablas


Los encabezados de una tabla se definen con la etiqueta <th>.

Cdigo
<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.

Mrgenes de las celdas


Es el espacio que se encuentra entre los bordes de la celda y su contenido. Definimos los mrgenes con el atributo cellpadding.

Cdigo
<table <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> border="1px" cellpadding="20px">

<td>Pedro</td> <td>Garcia</td> </tr> </table>

Resultado

Nombre

Apellido

Pedro

Garca

Nota: en este ejemplo podemos observar que el atributo cellpadding deja 20 pixels mnimo entre las palabras dentro de cada celda y los bordes de las mismas.

Espaciado entre celdas


Es el espacio que se encuentra El mismo est definido con el atributo cellspacing. entre celda y celda.

Cdigo
<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

Frames en HTML
Dividimos la pgina en partes ms pequeas y en cada una de ellas visualizamos documentos diferentes.
Los frames(marcos en espaol) permiten a los autores presentar documentos con vistas mltiples. Esto posibilita mantener cierta informacin visible mientras otras vistas se desplazan o se sustituyen. Cada vista es un documento independiente de los otros.

La etiqueta frameset
La etiqueta <frameset> se usa para dividir la ventana del navegador en diferentes marcos que pueden ser de diferentes medidas. Cada frameset define un grupo de filas y columnas. <frameset rows="30%,70%" ...el resto </frameset> cols="33%,34%,33%"> definicin...

de

la

Este ejemplo crea una cuadrcula de 2x3 subespacios.

La etiqueta frame
La etiqueta <frame> define qu documento colocaremos en cada marco. <frameset <frame src="frame1.html"> <frame src="frame2.html"> </frameset> cols="25%,75%">

En el ejemplo dividimos la pantalla en una columna de 25% y otra de 75%. La primer columna contiene el documento "frame1.html" y la segunda columna el documento "frame2.html". La etiqueta <frame> no debe llevar etiqueta de cierre

La etiqueta noframes

La etiqueta <noframes> muestra un texto para los navegadores que no soportan frames.

<noframes> se coloca dentro de la etiqueta frameset si el navegador soporta frames, 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%,75%"> navegador no soporta frames

src="cabezapag.htm"> src="cuerpopag.htm">

La etiqueta iframe
La etiqueta <iframe> se usa para crear un frame en lnea que contiene otro documento. Es decir, que puedo mostrar una ventana que contenga otra pgina Web dentro de la pgina que estamos diseando

Cdigo
<iframe src="http://www.hanselsuazo.com" </iframe> width="100%">

Listas - Listados
Las listas son ideales para el diseo de mens.

Qu son las listas de HTML?


Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura. Tenemos tres tipos de listas:

Ordenadas. Desordenadas. De definicin.

Listas Ordenadas
Son aquellas que ordenan la lista anteponiendo nmeros, letras o signos.

Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno de los items de la misma, utilizamos la etiqueta <li>.

Cdigo
<ol> <li>Naranjas</li> <li>Manzanas</li> <li>Bananas</li> </ol>

Resultado

1. Naranjas 2. Manzanas 3. Bananas

Dentro de cada Item se pueden agregar imgenes, prrafos, otras listas, etc.

Listas Desordenadas
Exponen la lista anteponiendo un punto, cuadrado o tringulo negro.

Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items de la misma utilizamos la etiqueta <li>.

Cdigo
<ul> <li>Tomates</li> <li>Pepinos</li> <li>Cebollas</li> </ul>

Resultado
Tomates Pepinos Cebollas

Dentro de cada Item se pueden agregar imgenes, prrafos, otras listas, etc.

Listas de definicin
Se utilizan para definir trminos.

Las listas de definicin se representan Los trminos de las La definicin de esos trminos comienza con <dd>.

con la mismas

etiqueta <dl>. con <dt>.

Cdigo
<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 imgenes, prrafos, otras listas, etc.

Formularios en HTML
Para qu se usan los formularios?
Los formularios son usados para que el usuario ingrese datos. Esos datos son enviados a un agente para que los procese (por ej., a un servidor web, a un servidor de correo, etc.).

a etiqueta form
Dentro de la etiqueta <form> se encuentra el formulario. Los usuarios interaccionan con los formularios a travs de las llamadoscontroles.

Tipos de controles: Botones (buttons) Casillas de verificacin (checkboxes) Radiobotones (radio buttons) Menes (menus) Entrada de texto (text input) Seleccin de ficheros (file select) Controles ocultos (hidden controls) Controles tipo objeto (object controls)

Dentro de la etiqueta <form>, se encuentra el atributo action. Este nos especificar el documento que manejar el formulario completado y enviado. Tambien contamos con el atributo method. El mismo nos define el mtodo por el cual se enviarn los datos del usuario al servidor.

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. crear.

Text
Crea un control que nos permite ingresar un texto en una lnea.

Cdigo

<form action="datos.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.php" --> nos indica que el archivo datos.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 enviarn por el mtodo 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 opcin de entre una serie de posibilidades.

Cdigo
<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

Edad? menor entre mayor de 61 18

de y

17 60

Nota: en este ejemplo podemos observar lo siguiente: action="edades.asp" --> nos indica que el archivo edades.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 enviarn por el mtodo post name="edad" --> debemos utilizar el mismo nombre(en este caso "edad") para todos los elementos del mismo control radio. value="mayor" --> define el valor del elemento <input>

Checkbox (casillas de verificacin)


Permite al usuario elegir varias opciones entre todas las posibilidades.

Cdigo
<form Pasatiempos? <input type"checkbox" <br> <input type"checkbox" <br> <input type"checkbox" <br> <input type"checkbox" </form> action="hobbie.php" name="pasa" name="pasa" name="pasa" name="pasa" method="get"> value="tv">TV value="libros">Libros value="musica">Msica value="otros">Otros

Resultado

Pasatiempos? TV Libros

Msica Otros

Nota: en este ejemplo podemos observar lo siguiente: action="hobbie.php" --> nos indica que el archivo hobbie.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 enviarn por el mtodo 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, pero el texto introducido se presenta mediante una serie de asteriscos. Es utilizado generalmente para ingresar contraseas.

Submit
Botn de envio de datos del formulario.

Reset
Botn de reinicializacin. Al ser pulsado reinicializa todos los controles a sus valores iniciales.

Cdigo
<form action="datos_personales.php" Nombre: <input type"text" name="nombre"> <br> Contrasea: <input type"password"name="secreto"> <br> <input type"submit" value="Enviar"> <input type"reset" value="Borrar"> </form> method="post">

Resultado

Nombre: Contrasea:
Enviar Borrar

Nota: en este ejemplo podemos observar lo siguiente: action="datos_personales.php" --> en el formulario method="post" --> nos indica que los datos del formulario se enviarn por el mtodo post name="nombre" - 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 botn "submit" value="Borrar" --> define el texto del botn "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. Cada opcin ofrecida por el men se representa con la etiqueta <option>

Cdigo
<form action="continentes.php" <select name="continente"> <option value="america">Amrica</option> <option value="asia">Asia</option> <option value="europa">Europa</option> <option value="oceania">Oceana</option> <option value="africa">frica</option> </select> </form> method="get">

Resultado

Nota: en este ejemplo podemos observar lo siguiente: action="continentes.php" --> nos indica que el archivo continentes.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 enviarn por el mtodo 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 multilnea. Los atributo rows y cols nos indican la cantidad de filas y columnas que tendra el recuadro del rea de texto.

Cdigo
<form action="texto.php" <textarea name="eltexto" rows="5"cols="30"> Aqu podemos ingresar un texto introductorio </textarea> </form> method="post"> si lo deseamos.

Resultado
Aqu podemos ingresar un texto introductorio si lo deseamos.

Nota: en este ejemplo podemos observar lo siguiente: action="texto.php" --> nos indica que el archivo texto.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 enviarn por el mtodo post name="eltexto" --> le asigna un nombre al elemento textarea

Imgenes en HTML
Las imgenes, grficos y fotos le dan vida y color a las pginas web.

Cmo insertamos imgenes en un archivo HTML?


Para insertar imgenes en un sitio usaremos la etiqueta <img>.

Esta etiqueta es vaca, es decir que debemos utilizarla con el atributo src para que muestre la imagen. La etiqueta <img> no tiene cierre.

Veamos un ejemplo
Si tenemos que insertar una imagen que lleva por nombre de archivo "foto1.jpg" y que est ubicada en el directorio "www.hanselsuazo.com/imagenes/", entonces esta sera la forma de escribir el cdigo:

Cdigo
<imgsrc="http://www.hanselsuazo.com/imagenes/foto1.jpg">

Resultado

Nota: el atributo <img> mediante el uso del atributo src inserta imagen foto1.jpgubicada en la direccin "www.hanselsuazo.com/imagenes/"

la

Texto alternativo de la imagen


Se utiliza comnmente cuando deseamos visualizar un texto explicativo de una imagen. Este texto aparece al pasar el apuntador sobre la imagen o en muchos casos cuando el navegador, por alguna razn, no visualiza las imgenes y en su lugar coloca este texto alternativo dentro de un recuadro. Para ello vamos a usar el atributo alt

Cdigo
<img src="http://www.hanselsuazo.com/imagenes/foto1.jpg"alt="Dos caminando de la mano"> nias

Resultado

Fondos de Pantalla
Es el teln de fondo de toda pgina web.

El atributo background

Si queremos disear sitios ms atractivos debemos utilizar imagenes o colores para el fondo de nuestras pginas. El fondo se define en la etiqueta<body>. Para insertar una imagen de fondo debemos utilizar el atributobackground dentro de la etiqueta<body>. El valor de este atributo es la URL de la imagen que deseamos colocar.

Si la imagen es ms pequea que la pantalla del navegador, esta se repetir tantas veces como sea necesario hasta cubrir toda la pantalla.

Ejemplos <body background="paisaje.jpg"> <body background="http://www.hanselsuazo.com/imagenes/punteado.gif" >

El atributo bgcolor
El atributo bgcolor especifica el color de fondo de una pgina HTML. El valor del mismo puede expresarse con un nmero hexadecimal, valor RGB, o nombre de color(en ingls). Este atributo tambin debe ir dentro de la etiqueta <body>

Ejemplos <body bgcolor="#FF0000"> <body bgcolor="rgb(255,0,0)"> <body bgcolor="red">

Tabla simplificadora de colores


Primarios aditivos saturados (absolutos)
Nombre Rojo Verde Azul Blanco Valor hexadecimal #FF0000 #00FF00 #0000FF #FFFFFF Descripcin

Primarios sustractivos nulos (absolutos)


Nombre Cyan Magenta Amarillo Negro Valor hexadecimal #00FFFF #FF00FF #FFFF00 #000000 Descripcin

Secundarios y terciarios (medianos)


Nombre Gris Rosa Violeta Celeste Marrn Naranja Lavanda Turquesa Oro viejo Valor hexadecimal #808080 #FF8080 #800080 #80FFFF #800000 #FF8000 #8000FF #00FF80 #BBBB20 Descripcin

Los colores estndard


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

Descripcin

Olive Teal Blue Lime Purple White Fuchsia Maroon Red Yellow

#808000 #008080 #0000FF #00FF00 #800080 #FFFFFF #FF00FF #800000 #FF0000 #FFFF00

S-ar putea să vă placă și