Beruflich Dokumente
Kultur Dokumente
detallado
Unidad 6. Tablas
Tabla <table> Fila <tr> Columna o celda <td> Formato de la tabla Formato de las celdas Encabezado de columna <th> Titulo de tabla <caption> Combinar celdas
Unidad 7. Marcos
Conjunto de marcos <frameset> Marco <frame> Sin marcos <noframes> Destino del enlace
Unidad 8. Formularios
Formulario <form> reas de texto <textarea> Elementos de entrada <input> Campos de seleccin <select> ...
Unidad 3. El texto
Caracteres especiales y espacios en blanco Comentarios Saltos de lnea <br> Texto preformateado <pre> Separadores <hr> Sangrado de texto <blockquote> Formatear el texto <font> Resaltado del texto <b> ... Prrafos <p> ... Encabezados <h1> ... Marquesinas <marquee> Las listas <li> ...
Unidad 9. Multimedia
Sonido de fondo <bgsound> Vdeo y audio <embed> Pelculas Flash <object>
Unidad 4. Hiperenlaces
Hiperenlace <a> Tipos de referencias Destino del enlace Formato de los enlaces Puntos de fijacin. Anclas Otros tipos de enlaces
Unidad 5. Imgenes
Imagen <img> Formatos de imagen Texto alternativo Borde de una imagen Tamao de una imagen Alineacin de una imagen
Bsqueda
pub-1875034419 GALT:#008000;G es
ISO-8859-1
ISO-8859-1
A lo largo de este tema vamos a conocer los conceptos bsicos sobre HTML, y cmo se utiliza para crear pginas web.
Qu es HTML
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las pginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que est compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Un documento hipertexto no slo se compone de texto, puede contener imgenes, sonido, vdeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Los documentos HTML deben tener la extensin html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las pginas web). Los navegadores se encargan de interpretar el cdigo HTML de los documentos, y de mostrar a los usuarios las pginas web resultantes del cdigo interpretado.
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 estensiones 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.
Como hemos dicho, el navegador instalado en el ordenador del usuario es el que interpreta el cdigo HTML de la pgina que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma pgina de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador. Los navegadores de hoy en da pretenden ser compatibles con la ltima versin de HTML. Es necesario realizar extensiones de los navegadores para que puedan ser compatibles con esta ltima versin. Dos de los navegadores que continuamente estn realizando extensiones son Internet Explorer y Netscape Navigator, que realizan extensiones incluso antes de que se establezcan los estndares, intentando incluir las nuevas funciones incluidas en los borradores. Los navegadores tienen que ser compatibles con la ltima versin HTML para poder interpretar el mayor nmero posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretenda la etiqueta no queda reflejado en la pgina. Para realizar las extensiones de estos navegadores se aaden
Como resultado a estas extensiones, habrn pginas cuyo cdigo podr ser interpretado completamente por todos los navegadores, mientras que otras, al incluir nuevos atributos o etiquetas del borrador de la ltima versin de HTML, solo podrn ser interpretadas en su totalidad en los navegadores ms actualizados. En este ltimo caso tambin puede ocurrir que alguna etiqueta de la pgina solamente pueda ser interpretada por un navegador concreto, y otra etiqueta por un navegador diferente al anterior, por lo que nunca sera visualizada en su totalidad por ningn navegador. Uno de los retos de los diseadores de pginas web es hacer las pginas ms atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que el mayor nmero de internautas vean sus pginas tal como las ha diseado.
Editores
Un editor es un programa que nos permiten redactar documentos. Hoy en da existen un gran nmero de editores que permiten crear pginas web sin la necesidad de escribir ni una sola lnea de cdigo HTML. Estos editores disponen de un entorno visual, y generan automticamente el cdigo de las pginas. Al poder ver en todo momento cmo quedar la pgina en el navegador, se facilita la creacin de las pginas, y
el uso de mens permite ganar rapidez. Estos editores visuales pueden generar en ocasiones cdigo basura, es decir, cdigo que no sirve para nada, en otras ocasiones puede ser ms efectivo corregir directamente el cdigo por lo que resulta necesario saber HTML para poder depurar el cdigo de nuestra pginas. Algunos de los editores visuales con los que podrs crear tus pginas web son Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos. En aulaClic puedes encontrar los cursos de Macromedia Dreamweaver y Microsoft Frontpage, dos de los editores ms usados hoy en da. Es aconsejable comenzar utilizando una herramienta lo ms sencilla posible, para tener que insertar nosotros mismos el cdigo HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algn editor visual posteriormente, y depurar el cdigo cuando fuera necesario.
Para crear pginas web escribiendo directamente el cdigo HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows.
A lo largo de este curso vamos a trabajar con el Bloc de notas para crear nuestras pginas, ya que se trata de un editor de textos muy sencillo de manejar, que nos permitir crear pginas a travs del cdigo HTML. Si no sabes cmo trabajar con el Bloc de notas, te lo explicamos aqu. Cuando realices los ejercicios puedes compaginar dos sesiones de la forma que te explicamos aqu.
Etiquetas
Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. La etiqueta de comienzo est delimitada por los caracteres < y >. Est compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten aadir ciertas propiedades. Su sintaxis es:
<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.aulaclic.com</font></p>
pueden 'cruzar', en nuestro ejemplo hemos empezado por la etiqueta <p..>, antes de cerrar esta etiqueta hemos puesto la <font..> por lo que antes de cerrar la etiqueta <p..> debemos cerrar la etiqueta etiqueta <font..>.
Para cerrar el Bloc de notas, puedes utilizar cualquiera de las siguientes operaciones: Hacer clic en el botn cerrar
Pulsar la combinacin de teclas ALT+F4. Hacer clic sobre el men Archivo y elegir la opcin Salir. Si el documento ha sido modificado y no ha sido guardado antes de cerrar, se te pedir confirmacin para guardarlo antes de cerrar el programa.
A travs del men Formato, opcin Fuente, puedes cambiar la fuente de todo el documento. Si lo deseas, puedes hacer la letra algo ms grande o pequea.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones. Pulsar la combinacin de teclas Ctrl+N. Hacer clic sobre el men Archivo y elegir la opcin Nuevo.
Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones. Pulsar la combinacin de teclas Ctrl+G. Hacer clic sobre el men Archivo y elegir la opcin Guardar.
A la hora de guardar un documento no debes olvidar guardarlo con la extensin htm o html. Por ejemplo, puedes guardar un documento con el nombre mipagina.htm.
Aqu te explicaremos cmo conseguir tener la pantalla dividida en dos partes, una con el curso y otra con el Bloc de notas.
1 Se supone que la sesin con el curso est abierta. 2 Abrir la sesin del Bloc de notas. 3 Pulsar con el botn derecho sobre cualquier parte vaca de la barra de tareas, en la parte inferior de la pantalla. Es la barra en la que se encuentra el botn Inicio. 4 Elegir la opcin Mosaico vertical. Observa como la pantalla ha quedado dividida en dos partes, como en la figura:
adecuado, basta hacer clic con el ratn para pasar de la una a la otra. Para volver a dejar las ventanas con su tamao normal, hacer clic en el botn Maximizar .
Esto va bien con monitores grandes ( de 17" o ms), con monitores pequeos quizs prefieras dejar las ventanas con su tamao normal e ir pasando de una a otra presionando las teclas Alt + tabulador (manteniendo pulsada Alt, presionar la tecla tabulador) o pulsando el botn correspondiente a la sesin en la barra de tareas en la ltima lnea de la pantalla. Compaginar dos sesiones puede resultarte muy til al realizar los ejercicios. Puedes cargar un documento en el Bloc de notas y en un navegador al mismo tiempo. Cada vez que realices algn cambio en el cdigo del Bloc de notas y guardes los cambios, puedes actualizar la pgina cargada en el navegador para ver los cambios que ha sufrido por las modificaciones en el cdigo. Para actualizar una pgina en Internet Explorer puedes pulsar sobre el botn .
Bsqueda
pub-1875034419
ISO-8859-1
ISO-8859-1
GALT:#008000;G
es
pgina (I)
A lo largo de este tema vamos a aprender a crear una pgina bsica. La estructura bsica de una pgina es:
La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como puede ser el ttulo. Est formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la etiqueta <html>. Por ejemplo:
<html>
La etiqueta <meta>
La etiqueta <meta> se utiliza para aadir informacin sobre la pgina. Esta informacin puede ser utilizada por los buscadores. Los buscadores consultan la informacin de la etiqueta <meta> de las pginas, buscando coincidencias con lo que el usuario pretende encontrar. A travs de esta etiqueta pueden especificarse los atributos name y content. El atributo name indica el tipo de informacin, y el atributo content indica el valor de dicha informacin. Para indicar el tipo de informacin podemos utilizar cualquier palabra que deseemos, como puede ser "Autor", "Palabras clave", "Descripcin", etc. Pero debido a que la mayora de buscadores estn en ingls, es preferible que el tipo de informacin se especifique en ingls. Los tipos de informacin ms utilizados son los siguientes: Tipo
Significado Autor de la pgina Palabras para clasificar la pgina en los buscadores Descripcin del contenido de la pgina Programa utilizado para crear la pgina Palabras clave
La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es posible indicar un tipo de informacin y su valor, pero es posible insertar varias etiquetas <meta> en un mismo documento. La etiqueta <meta> ha de estar entre las etiquetas <head> y </head>. Por ejemplo, el siguiente cdigo indica que el autor de la
pgina es aulaclic, que la pgina trata sobre un curso de HTML gratuito, y especifica algunas palabras clave a ser consultadas por los buscadores:
<html> <head> ... <meta name="author" content="aulaclic"> <meta name="description" content="Curso de HTML gratuito"> <meta name="keywords" content="cdigo HTML etiqueta pgina web gratis curso"> </head> ...
La etiqueta <meta> tambin se utiliza para indicarle al navegador alguna informacin o alguna accin que debe realizar. En este caso se utiliza el atributo http-equiv, en lugar del atributo name. Por ejemplo, imaginemos que por algn motivo queremos que nuestra pgina se actualice automticamente cada 30 segundos. En ese caso, deberamos utilizar la accin Refresh (actualizar). Podramos utilizar el siguiente cdigo:
<html> <head>
<html> <head> <title> Curso de HTML </title> </head> <body> ... </body> </html>
A travs de la etiqueta <body> es posible establecer el color o la imagen de fondo de la pgina. El color de fondo puede establecerse a travs del atributo bgcolor, al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido. Si no sabes cmo representar los colores en hexadecimal, o a qu nmero o nombre se corresponde cada uno de ellos, puedes consultarlo aqu. Por ejemplo, para hacer que el color de fondo de una pgina sea de color azul, tendremos que escribir:
bgcolor="blue">
La imagen de fondo puede establecerse a travs del atributo background, indicando la ruta en la que se encuentra la imagen. Por ejemplo, para hacer que la imagen de fondo de una pgina sea la imagen fondo.gif, que se encuentra en el mismo directorio en el que se encuentra guardada la pgina, tendremos que escribir:
En el caso de que la imagen no se encuentre en el mismo directorio que la pgina, y se encuentre dentro de la carpeta imagenes, que s se encuentra en el mismo directorio que la pgina, tendremos que escribir:
A travs de la etiqueta <body> tambin es posible establecer el color del texto de la pgina a travs del atributo text. Por ejemplo, para hacer que el color del texto de una pgina sea de color rojo, tendremos que escribir:
Entre el borde de la ventana y el contenido de la pgina existe un margen, cuyo tamao en pxeles puede modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen superior). Estos atributos no funcionan para el navegador Netscape, pero s los atributos marginwidth (anchura del margen) y marginheight (altura del margen). Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero. Por ejemplo, para hacer que una pgina no tenga margen superior, y tenga un margen izquierdo de 20 pxeles, tendremos que escribir:
Colores en hexadecimal
Los colores en HTML se representan mediante un nmero hexadecimal. Un nmero hexadecimal se diferencia de un nmero decimal en que no slo puede tomar valores del 0 al 9, sino que puede tomar hasta diecisis valores distintos, que van del 0 al 9, y de la A a la F. Cada color estar representado por un grupo de seis dgitos en hexadecimal, precedidos por una almohadilla, como por ejemplo #FFFFFF. Existen 216 colores seguros para web. stos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh. Tambin podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dgitos que forman parte del nmero hexadecimal. A continuacin se muestran los 216 colores seguros para web, para que puedas consultarlos cuando lo necesites.
#000000 #003300 #006600 #009900 #00CC00 #00FF00 #330000 #333300 #336600 #339900 #33CC00 #33FF00 #660000 #660033 #666600 #669900 #66CC00 #66FF00 #990000 #993300 #996600 #999900 #99CC00 #99FF00 #CC0000 #CC3300 #CC6600 #CC9900 #CCCC00 #CCFF00 #FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00
#000033 #003333 #006633 #009933 #00CC33 #00FF33 #330033 #333333 #336633 #339933 #33CC33 #33FF33 #660033 #663333 #666633 #669933 #66CC33 #66FF33 #990033 #993333 #996633 #999933 #99CC33 #99FF33 #CC0033 #CC3333 #CC6633 #CC9933 #CCCC33 #CCFF33 #FF0033 #FF3333 #FF6633 #FF9933 #FFCC33 #FFFF33
#000066 #003366 #006666 #009966 #00CC66 #00FF66 #330066 #333366 #336666 #339966 #33CC66 #33FF66 #660066 #663366 #666666 #669966 #66CC66 #66FF66 #990066 #993366 #996666 #999966 #99CC66 #99FF66 #CC0066 #CC3366 #CC6666 #CC9966 #CCCC66 #CCFF66 #FF0066 #FF3366 #FF6666 #FF9966 #FFCC66 #FFFF66
#000099 #003399 #006699 #009999 #00CC99 #00FF99 #330099 #333399 #336699 #339999 #33CC99 #33FF99 #660099 #663399 #666699 #669999 #66CC99 #66FF99 #990099 #993399 #996699 #999999 #99CC99 #99FF99 #CC0099 #CC3399 #CC6699 #CC9999 #CCCC99 #CCFF99 #FF0099 #FF3399 #FF6699 #FF9999 #FFCC99 #FFFF99
#0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC #3300CC #3333CC #3366CC #3399CC #33CCCC #33FFCC #6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC #9900CC #9933CC #9966CC #9999CC #99CCCC #99FFCC #CC00CC #CC33CC #CC66CC #CC99CC #CCCCCC #CCFFCC #FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC
#0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF #3300FF #3333FF #3366FF #3399FF #33CCFF #33FFFF #6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF #9900FF #9933FF #9966FF #9999FF #99CCFF #99FFFF #CC00FF #CC33FF #CC66FF #CC99FF #CCCCFF #CCFFFF #FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #FFFFFF
Existe otra forma de representar algunos colores, sin la necesidad de utilizar nmeros en hexadecimal. Estos colores pueden representarse por su nombre, y son los siguientes:
Color Hexadecimal #FFFFFF #000000 #000080 #0000FF #008000 #008080 #00FF00 #00FFFF #800000 #800080 #808000 #808080 #C0C0C0 #FF0000 #FF00FF #FFFF00 Nombre white black navy blue green teal lime aqua maroon purple olive gray silver red fuchsia yellow
Bsqueda
pub-1875034419 es
ISO-8859-1
ISO-8859-1
GALT:#008000;G
A lo largo de este tema vamos a aprender a cambiar las propiedades del texto, as como a insertar caracteres especiales o separadores.
Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. Si se desea insertar estos caracteres como texto hay que escribir el nombre que los representa:
Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios espacios en blanco seguidos slamente se mostrar uno en el navegador. Para conseguir que se muestren varios espacios en blanco seguidos puede sustituirse cada uno de ellos por . Por ejemplo, para insertar el texto:
Comentarios
En ocasiones podemos desear aadir comentarios aclaratorios dentro del cdigo, de manera que no sean visualizados en el navegador, pero s a la hora de editar el documento. Para insertar comentarios dentro del cdigo, basta con insertar el texto entre <!-- y //-->. Todo el cdigo que se inserte entre estos smbolos no ser visualizado en los navegadores. Por ejemplo, para insertar el texto siguiente con un comentario:
<!-- A continuacin aparecer una lnea de texto//--> ¡Bienvenidos, esta es mi 1ª página!
Queridos usuarios, tengo el placer de comunicaros que hay una nueva seccin.
Habra que escribir:
Separadores <hr>
El elemento que suele utilizarse para separar secciones dentro de una misma pgina es la regla horizontal. Para insertar una regla horizontal hay que insertar la etiqueta <hr>. Dicha etiqueta no precisa ninguna etiqueta de cierre. Es posible especificar algunos atributos de la regla horizontal: Atributo Significado Posibles valores
align
alineacin de la regla dentro de la pgina ancho de la regla alto de la regla eliminar el sombreado de la regla
La sangra es una especie de margen que se establece a ambos lados del texto. Para que un texto aparezca sangrado, se inserta entre las etiquetas <blockquote> y </blockquote>. Esta etiqueta en un principio se defini para delimitar citas pero que como la mayora de los navegadores resuelven la cita incluyendo un sangrado del texto, su uso para sangrar texto se ha generalizado. El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva lnea. Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los mrgenes sean mayores. Por ejemplo, para insertar el texto:
Queridos usuarios, tengo el placer de comunicaros que hay una nueva seccin.
Habra que escribir:
Queridos usuarios, <blockquote> <blockquote> tengo el placer de comunicaros que hay una nueva sección. </blockquote> </blockquote>
Las propiedades del texto pueden modificarse a travs de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta: Atributo
Posibles valores nombre de la fuente, o fuentes nmero hexadecimal o texto predefinido valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamao por defecto, aadiendo + o - delante del valor
<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.aulaclic.com</font>
Tambin es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta <basefont> despus de la etiqueta <body>. La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto que la etiqueta <font>. Por ejemplo:
defecto de color azul, de tamao 4 y Arial. Si despus de indicar la etiqueta <basefont> o <font>, el navegador encuentra otra etiqueta <font>, la que prevalece es siempre la ltima que se encuentra.
Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse segn vayan asociados al tipo de letra o a la informacin que represente el texto. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto. A continuacin se muestran algunas etiquetas asociadas al tipo de letra:
Etiqueta
<b> cursiva <i> subrayado <u> tachado <s> teletipo (mquina de escribir) <tt> <big> aumenta el tamao de la fuente <small> disminuye el tamao de la fuente
Significado negrita
Ejemplo curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic
curso HTML aulaclic
<cite> <code> <dfn> <del> <em> <ins> <kbd> <samp> <strong> <sub> <sup>
Significado cita ejemplo de cdigo definicin eliminado nfasis insertado teclado muestra destacado subndice superndice
curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic
curso HTML aulaclic
curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic
<var>
variable
Las etiquetas ms utilizadas son las asociadas al tipo de letra, ya que son ms fciles de recordar, y en muchos casos los resultados son los mismos que los de aplicar una etiqueta diferente. Por ejemplo, el resultado de aplicar las etiquetas <b> y <strong> es el mismo. Incluso a veces algunos estilos asociados al tipo de informacin pueden representarse de forma distinta segn el navegador. Por ejemplo, para insertar el texto:
Bienvenidos a
www.aulaclic.com
<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a <b><u><tt>www.aulaclic.com</tt></u></b></font>