Unidad 1. Introducción a HTML. Vamos a conocer los conceptos básicos sobre HTML, y cómo se utiliza para crear páginas web.

Transcripción

1 Unidad 1. Introducción a HTML Vamos a conocer los conceptos básicos sobre HTML, y cómo se utiliza para crear páginas web. Qué es HTML El HTML (Hyper Text Markup Language o "Lenguaje para Marcado de Hipertexto") es el lenguaje con el que se escriben las páginas 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 sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web). Para crear un archivo HTML solo hace falta un editor de texto. Un archivo HTML está compuesto por etiquetas. Las etiquetas le dicen al navegador (Ej: Internet Explorer, Firefox, Mozilla, etc.) como mostrar la página. Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado. Los navegadores. Compatibilidad Como hemos dicho, el navegador instalado en la computadora del usuario es el que interpreta el código HTML de la página que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma página de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador. Los navegadores tienen que ser compatibles con la última versión HTML para poder interpretar el mayor número posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretendía la etiqueta no queda reflejado en la página. Para realizar las extensiones de estos navegadores se añaden nuevos atributos a las etiquetas ya existentes, o se añaden nuevas etiquetas. Como resultado a estas extensiones, habrá páginas cuyo código podrá ser interpretado completamente por todos los navegadores, mientras que otras, al incluir nuevos atributos o etiquetas del borrador de la última versión de HTML, solo podrán ser interpretadas en su totalidad en los navegadores más actualizados. En este último caso también puede ocurrir que alguna etiqueta de la página solamente pueda ser interpretada por un navegador concreto, y otra etiqueta por un navegador diferente al anterior, por lo que nunca sería visualizada en su totalidad por ningún navegador. Uno de los retos de los diseñadores de páginas web es hacer las páginas más atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que el mayor número de internautas vean sus páginas tal como las ha diseñado. 1

2 Etiquetas (en inglés: tags) 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 añadir ciertas propiedades. Su sintaxis es: <identificador atributo1 atributo2 > Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos. La etiqueta de final está delimitada por los caracteres </ y >. Está compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador> Cada uno de los elementos de la página se encontrará entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepción de algunos elementos que no necesitan etiqueta de cierre. También es posible anidar etiquetas, es decir, insertar etiquetas entre otras Reglas básicas Las etiquetas están encerradas entre los signos "<" y ">". Generalmente vienen en pares <p> y < p>. La primera es de apertura y la segunda de cierre. El texto que se encuentra entre dos etiquetas es el contenido del elemento. Las etiquetas no son sensibles a las mayúsculas y minúsculas, o sea <b> es lo mismo que <B>. La estructura básica de una página es: 2 Unidad 2. Estructura de una página Identificador del tipo de documento Todas las páginas web escritas en HTML tienen que tener la extensión html o htm. Al mismo tiempo, tienen que tener las etiquetas y. Entre las etiquetas y estará comprendido el resto del código HTML de la página. Por ejemplo:

3 Cabecera de la página La cabecera de la página se utiliza para agrupar información sobre ella, como puede ser el título. Está formada por las etiquetas y. La etiqueta va justo debajo de la etiqueta. Por ejemplo: Entre las etiquetas y, las etiquetas que podemos encontrar y más se utilizan son: <link>, <style>, <script> (estas etiquetas las veremos más adelante), <meta> y la etiqueta <title> que te explicamos a continuación. Título de la página <title> El título de la página es el que aparecerá en la parte superior de la ventana del navegador (en la barra de título), cuando la página esté cargada en él. Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas <title> y </title>. Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas y. Por ejemplo: <title> </title> Curso de HTML Cuerpo del documento El cuerpo del documento contiene la información propia del documento, es decir lo que queremos que se visualice, el texto de la página, las imágenes, los formularios, etc. Todos estos elementos tienen que encontrarse entre las etiquetas y, que van justo debajo de la cabecera. Por ejemplo: <title> </title> Curso de HTML 3

4 Ejemplo - Vamos a hacer una pequeña prueba! Abrimos el "Block de Notas". Escribe en el mismo, el siguiente texto: <title>mi primera página Web</title> Hola a todos. Guardá el archivo como "pagina1.html" (las extensiones ".htm" o ".html" tienen el mismo significado y nos indican que se trata de un archivo HTML). Abre un navegador de Internet (Internet Explorer, Firefox, Opera, etc.). Selecciona "File" y luego "Open". Se abrirá una ventana, selecciona "Browse" y ubica el archivo que acabas de guardar - "pagina1.html"- elígelo y presiona "Open". Ahora tú ves la dirección, por ejemplo "C:\Mis Documentos\pagina1.html". Presiona "OK" y el navegador mostrará la página. Otra forma: Hacer doble clic sobre el archivo creado y se abrirá automáticamente el navegador. Veamos otro ejemplo. <title>una página Web</title> Hola a todos. <b>este texto es en negrita</b> Esta es una etiqueta HTML: <b>este texto es en negrita.</b> El elemento HTML comienza con la etiqueta de apertura <b> (etiqueta que nos muestra el texto en negrita). El contenido de dicho elemento es: Este texto es en negrita. El fin del elemento HTML es con la etiqueta de cierre </b>. Qué son los atributos de las etiquetas? Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos HTML. Los atributos siempre van con la estructura: nombre ="valor". Los atributos siempre van en la etiqueta de apertura. Los valores siempre hay que ponerlos entre comillas. 4

5 Un ejemplo de los atributos sería: <body bgcolor="#ffff00"> Hola a todos. <b>este texto es en negrita</b> Resultado Hola a todos. Este texto es en negrita En la etiqueta podemos observar el atributo bgcolor = (color de fondo) y el valor "#FFFF00"(representa el color amarillo en hexadecimal). Esto quiere decir que el color de fondo de la página será amarillo. Sería equivalente a poner: <body bgcolor="yellow"> La imagen de fondo puede establecerse a través del atributo background, indicando la ruta en la que se encuentra la imagen. Por ejemplo, para hacer que la imagen de fondo de una página sea la imagen fondo.gif, que se encuentra en el mismo directorio en el que se encuentra guardada la página, tendremos que escribir: <body background="fondo.gif"> En el caso de que la imagen no se encuentre en el mismo directorio que la página, y se encuentre dentro de la carpeta imágenes, que sí se encuentra en el mismo directorio que la página, tendremos que escribir: <body background="imagenes/fondo.gif"> A través de la etiqueta también es posible establecer el color del texto de la página a través del atributo text. Por ejemplo, para hacer que el color del texto de una página sea de color rojo, tendremos que escribir: <body text="#ff0000"> 5

6 Entre el borde de la ventana y el contenido de la página existe un margen, cuyo tamaño en píxeles puede modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen superior). Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero. Por ejemplo, para hacer que una página no tenga margen superior, y tenga un margen izquierdo de 20 píxeles, tendremos que escribir: <body leftmargin="20" topmargin="0"> Un consejo con respecto al uso de minúsculas. Si bien HTML acepta tanto etiquetas en mayúscula <B> como en minúscula <b>, el World Wide Web Consortium (W3C) recomienda el uso de minúsculas. Además XHTML (la siguiente versión de HTML) acepta solo minúsculas. Es por eso que recomendamos acostumbrarse a usar minúsculas cuando escribas tus códigos HTML. 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 un título o cabecera. <h1> nos dá el tipo de letra más grande. <h6> nos dá el tipo de letra más pequeña. HTML agrega automáticamente un espacio antes y después de cada título. <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 <title>encabezados</title> <h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6> 6

7 Párrafos Los párrafos se definen con la etiqueta <p>. Código: <title>párrafos</title> <p>este es el primer párrafo.</p> <p>y este es el segundo párrafo.</p> Tipos de alineación <center> centrar el texto. <p align=center> párrafo centrado. <p align=left> párrafo alineado a la izquierda. <p align=right> párrafo alineado a la derecha. Comentarios La etiqueta <!-- --> se utiliza para insertar un comentario dentro del código que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el código y son de gran ayuda en el momento que necesitemos editarlo. <!-- Esto es un comentario. --> * Nota que el signo de exclamación se coloca solo al principio del código. Salto de línea El salto de línea está definido con la etiqueta <br>. Es utilizado cuando queremos terminar una línea sin necesidad de terminar con el párrafo. La etiqueta <br> obliga a saltar de línea dondequiera que la ubiquemos. Código: Esto es <br> un salto de lí<br>nea. Resultado Esto es un salto de lí nea. 7

8 Trazar una línea La etiqueta <hr> nos permite trazar una línea horizontal l. La etiqueta <hr> no tiene cierre. Código: <hr> Resultado: Otros ejemplos: 1) <title><p></p></title> <p>este texto es un párrafo.este texto es un párrafo.este texto es un párrafo.este texto es un párrafo.este texto es un párrafo.este texto es un párrafo.este texto es un párrafo.este texto es un párrafo.</p> 2) <title>comentarios</title> <!--Esto es un comentario--> <p>los comentarios no se visualizan</p> <!--Este es otro comentario--> 3) <title>br - Salto de línea</title> El salto de<br> línea ocu<br>rrirá donde lo <br>coloquemos<br>. 8

9 4) <title><trazado de líneas></title> <p>las líneas horizontales son muy útiles para separar secciones.</p> Sección 1 <hr> Sección 2 <hr> Sección 3 Es posible especificar algunos atributos de la línea horizontal: Atributo Significado Posibles valores align width alineación de la línea dentro de la página ancho de la línea left (izquierda) right (derecha) center (centro) un número, acompañado de % cuando se desee que sea en porcentaje size alto de la línea un número noshade eliminar el sombreado de la línea no puede tomar valores Por ejemplo, para insertar el texto y la línea horizontal siguientes: Inicio Bienvenidos a mi página. Habría que escribir: Inicio<hr align="left" width="300%" size="5" noshade>bienvenidos a mi página. 9

10 Unidad 3. Formato básico del texto HTML nos permite definir el formato de visualización del texto en la pantalla. Muy útil para cuando queramos resaltar o enfatizar una un texto en especial. También muy usado para subrayar o escribir subíndices o superíndices. Estos son solo algunos ejemplos de lo que podemos hacer con estos elementos Para ello utilizamos las siguientes etiquetas: Código Resultado <b>texto en negrita</b> <big>texto grande</big> <em>texto enfatizado</em> <i>texto en itálica</i> <small>texto pequeño</small> <strong>texto fuerte</strong> _{texto subíndice} ^{texto superíndice} <ins>texto subrayado</ins> <del>texto tachado</del> <tt>texto teletipo</tt> Texto en negrita Texto normal Texto grande Texto normal Texto enfatizado Texto normal Texto en itálica Texto normal Texto pequeño Texto normal Texto fuerte Texto normal Texto subíndice Texto normal Texto superíndice Texto normal Texto subrayado Texto normal Texto tachado Texto normal Texto teletipo Texto normal Sangrado de texto: <blockquote> La sangría 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 mayoría 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 línea. Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los márgenes sean mayores. Por ejemplo, para insertar el texto: Queridos usuarios, tengo el placer de comunicarles que hay una nueva sección. Habría que escribir: Queridos usuarios, <blockquote> <blockquote> tengo el placer de comunicarles que hay una nueva secci&oacuten. </blockquote> </blockquote> Caracteres especiales Muchas veces necesitamos incluir en nuestros textos, signos que tienen un significado especial en HTML (por ej. "<" - menor que). Para poder mostrarlos debemos usar su nombre en código. Los nombres de las entidades están compuestos por el signo (&), luego el nombre de la entidad y al final (";" - punto y coma). 10

11 Los números de estos caracteres están compuestos por (&), luego (# - numeral), el número de la entidad y al final (";" - punto y coma). Por ejemplo para mostrar el signo "<" debemos escribir < o <. El uso más común de los caracteres especiales es el espacio en blanco. Si en un texto figuran 5 espacios en blanco seguidos, HTML automáticamente borra 4. Para ingresar espacios en blanco usamos " " y HTML los dejará en su lugar. Otro uso muy frecuente es el de insertar acentos en el código HTML por medio de los números de las entidades 11