Documente Academic
Documente Profesional
Documente Cultură
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.
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>
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.
Enlaces en HTML
La propiedad ms importante de Internet, es la posibilidad de conectarse los unos con los otros.
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.
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.
Cdigo
<table <tr> <td>Nombre</td> <td>Apellido</td> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table> border="1">
Resultado
Cdigo
<table border="3"> <tr> <td>Borde</td> <td>3 </tr> </table>
pixels</td>
Resultado
Borde 3 pixels
Cdigo
tabla
es</td> bordes</td>
Resultado
Nota: al no colocar el atributo border, los bordes no se visualizan pero la tabla existe.
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
Cdigo
<table <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> border="1px" cellpadding="20px">
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.
Cdigo
<table <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table> border="1px" cellspacing="15px">
Resultado
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
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>
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.
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
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
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
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>
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
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.
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
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.
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>
Descripcin
Olive Teal Blue Lime Purple White Fuchsia Maroon Red Yellow
#808000 #008080 #0000FF #00FF00 #800080 #FFFFFF #FF00FF #800000 #FF0000 #FFFF00