Este documento proporciona una introducción a las etiquetas HTML más comunes. Explica cómo usar etiquetas para formato de texto como <br>, <pre>, <h1>-<h6>, <p>, <div>, <font> y <hr>. También cubre listas y tablas con <ul>, <ol>, <li>, <dl>, <dt> y <dd> y la inserción de imágenes con <img>. Por último, explica los enlaces hypertext con la etiqueta <a>, incluyendo cómo crear enlaces dentro de la página, a otras páginas

1. Erika Johana Caicedo Arias UNIDAD 1 Introducción a las paginas Web, al HTML y JavaScript.

2. Espacios y saltos de linea Cuando se escribe una página web, es frecuentemente el uso de varios espacios de saltos de línea para mejorar el aspecto del código fuente. Sin embargo, los navegadores ignoran los espacios adicionales entre palabras, y saltos de línea, tratando de mostrar la página de acuerdo a algunas preferencias (tipo de letra, tamaño, resolución de la pantalla, etc.) que son configuradas en la maquina cliente. En consecuencia, HTML tiene etiquetas para respetar los saltos de línea y los espacios en blanco.

3. Ejemplo 3 Línea de texto Otra línea de texto <br><br> <pre> Línea de texto Otra línea de texto </pre>

4. La etiqueta <br> es la encargada de indicarle al navegador que el texto que se encuentra a continuación deberá ser mostrado en la línea siguiente. Al usar dos veces esta etiqueta (<br><br>), se está dejando una línea vacía. Tenga en cuenta que la etiqueta <br>no necesita cerrarse con </br>. Por otra parte, el texto delimitado por <pre>y</pre>indican que se deben respetar los espacios y los saltos de línea presentes en el código fuente.

5. Caracteres especiales

6. Ejemplo 4 <pre> P&aacute;gina, tambi&eacute;n, art&iacute;culo, Aplicaci&oacute;n, &uacute;nico, tama&ntilde;o, TAMA&Ntilde;O, &#191;Qu&eacute;?, &#161;C&oacute;mo! </pre>

7. Etiqueta <h1></h1> Delimita texto enfatizado, donde el numero 1 especifica el tamaño. Este número puede cambiarse por otro, 2 y 6, siendo el 1el más grande y el 6 el más pequeño. Además, el texto delimitado por estas etiquetas se muestra en líneas independientes.

8. Ejemplo 5 Texto normal <h1> Texto entre h1 </h1> <h2> Texto entre h2 </h2> <h3> Texto entre h3 </h3> <h4> Texto entre h4 </h4> <h5> Texto entre h5 </h5> <h6> Texto entre h6 </h6>

9. Etiqueta <p> Indica el inicio de un nuevo párrafo. El efecto es similar al que se logra escribiendo <br><br>. Esta etiqueta posee el atributo align con los valores left, rigt, o center para especificar la alineación deseada en el nuevo párrafo. Al igual que <br>, <p> no se cierra con </p>.

10. Etiqueta <hr> Dibuja una línea horizontal tan ancha como la permita la ventana del navegador. Posee los modificadores size, para especificar el grosor: width, para indicar el ancho de la línea en pixeles o porcentaje y align, para especificar la alineación horizontal. La etiqueta <hr> no necesita cerrarse con </hr>. Ejemplo: “formateoTexto”.

11. Etiqueta <div></div> Delimita elementos de un documento para controlar de una manera más eficiente. Por ejemplo, para alinear a la derecha o justificar a ambos lados.

13. Size: Modifica el tamaño de los caracteres, con un numero entre 1 y 7 entre comillas. El tamaño 1 es el mas pequeño.

16. Etiqueta <li>:Es utilizada para insertar cada ítem en una lista con vinetas o numerada. No es necesario utilizar </li>.

18. Listas ordenadas <ol> Rectoría Tesorería Contabilidad Biblioteca El caso anterior se puede obtener mediante el uso de las etiquetas <ol> (OrderList) y <li> (listItem).

19. Ejemplo 7 <oltype="1" start="4"> <li> Rectoría <li> Tesorería <li> Contabilidad <li> Biblioteca </ol>

20. En la etiqueta <ol>, el atributo type=“1” indica que la lista será numérica, mientras que el atributo start=“4” hace que el primer elemento del listado este precedido por el numero 4 el segundo por el numero 5 y así sucesivamente. El mismo listado de la siguiente manera: Rectoría Tesorería Contabilidad Biblioteca

21. Ejemplo 8 <ol type="A" start="1"> <li> Rectoría <li> Tesorería <li> Contabiliad <li> Biblioteca </ol>

22. Listas con viñetas Si en lugar de una letra o un numero precediendo los items del listado, lo que se quiere es que aparezca una viñeta, se debe utilizar la etiqueta <ul> (UnorderList) de la siguiente manera: Ejemplo 8 <ultype="circle"> <li> item1 <li> item2 <li> item3 <li> item4 </ul>

23. La etiqueta <ul> únicamente tiene al atributo type=“circle”, que se refiere al tipo de viñeta que se presentara, este puede ser cambiado por; circle, disq o square.

25. Etiqueta <dt>: Se utiliza para indicar el termino que será definido dentro de una lista de definiciones.

27. IMÁGENES Una página web puede contener texto, imágenes, animaciones, sonidos, videos y otros. Estos elementos pueden ser simplemente presentados en la página o servir como enlaces que permiten navegar a través de la información de internet, según los intereses particulares del usuarios.

30. Alt: Se utiliza para mostrar en la pantalla un texto cuando el navegador no puede mostrar la imagen. Algunos navegadores muestran una pequeña caja de texto cuando el puntero del raton pasa por encima de la imagen si no se utiliza el atributo title.

34. Ir a otra página web.

35. Ir a un sitio FTP.

38. Href: especifica el destino, el cual puede ser de diferentes clases.

39. Name: Permite asignar un nombre que sirve como punto de referencia para enlaces de la misma página o de otras páginas.

41. ENLACES A OTRA PÁGINA Cuando se quiere crear un enlace a otra pagina que reside en el mismo directorio el atributo hrefdebe contener la ruta, el nombre la página y su extensión. Estas páginas así creadas deben guardarse dentro del mismo directorio. Ejemplo Menú.

42. ENLACES A PÁGINAS REMOTAS La verdadera potencia del lenguaje HTML consiste en que permite enlazar y acceder a páginas web localizadas en cualquier servidor, para lo cual lo único que se necesita conocer es su dirección, que se constituye el valor nombre del atributo href. El procedimiento para utilizar una imagen como elemento de enlace es similar a los anteriores. Ejemplo Menú.

43. ENLACE AL SERVICIO MAIL El protocolo o servicio mailto permite definir otro tipo de enlace, que activa la herramienta de correo electrónico para enviar un mensaje a la dirección definida en el atributo href. Este enlace puede ser colocado indistintamente sobre imágenes o texto. Ejemplo Menu.