1

Programación de páginas web con HTML

Ariathna Yulitza Navarro Vivas

Institución Educativa José Eusebio Caro

11°2

Ocaña

2018

1
 2

Programación de páginas web con HTML

Ariathna Yulitza Navarro vivas

Profesor: Nevardo Jaramillo Sánchez

Institución Educativa José Eusebio Caro

11°2

Ocaña

2018

2
 3

CONTENIDO

1. Introducción al lenguajeHTML 5

∙ ¿Qué es el lenguaje HTML? 5

∙ ¿Qué se necesita para trabajar en HTML? 5

∙ ¿cómo se guarda una página en HTML? 5

2. Estructura de una página web en HTML. 6

3. Principales etiquetas HTML 7

4. Etiquetas Para texto en HTML 8

5. Alineación de texto 9

∙ Tamaño de texto 9

∙ Color del texto 9

∙ Tipo de fuente 9

∙ Espaciado del texto 9

∙ Saltos de
línea 9

∙ Caracteres especiales. 9

6. Etiqueta body 10

∙ Fondo de página 10

∙ Ubicación de archivos 10
.
7. Etiquetas para listas 11

∙ Lista ordenada 11

∙ Lista con viñetas 11

3
 4

8. Tablas. 12

9. Imágenes. 13

10. Vínculos o enlaces 14

∙ Vínculos o enlaces dentro de la página 14

∙ Vínculos o enlaces a otra página 14

∙ Vínculos o enlaces a páginas remotas 14

11. Marcos o frames. 15

12. Formularios. 16

Introducción al lenguaje HTML

¿Qué es el lenguaje HTML?

HTML es un lenguaje que interpreta el navegador web para mostrar los sitios o
aplicaciones web tal y como estamos acostumbrados. En la Imagen 1 verás cómo
el navegador nos muestra un sitio web y en la Imagen 2 verás cómo se ve en
lenguaje HTML.

¿Qué se necesita para trabajar en HTML?

Ahora que sabemos cómo funciona la infraestructura de la Word Wide Web,
volvamos sobre cómo se diseñaría su interior.

4
 5

Los archivos, que diseñaremos al crear un espacio web, no son más que archivos
de texto sencillos, por lo que sólo nos hará falta un programa de edición de textos
planos y un navegador web para ver la apariencia que va tomando nuestra página
web.
Hay multitud de editores libres y gratuitos que podemos emplear, incluso los
editores predeterminados de cada sistema operativo son una buena opción, como
el "Editor de Texto" en sistemas operativos Linux o el propio "Bloc de notas"
Windows.
Tomando esto como punto de partida, no nos resultará difícil encontrar editores de
texto algo más completos que nos simplificarán nuestro trabajo. Así, por ejemplo,
al crear una página con el editor estándar de un sistema Linux, observaremos que
de forma automática destaca las etiquetas, simplificándose notablemente la
creación de páginas web. La figura muestra un ejemplo.
En este apartado del tutorial se explica cuál es la estructura básica de un
documento HTML a través de un ejemplo sencillo ("dos-parrafos.html") donde se
visualizan dos párrafos. Por ejemplo, en Google Chrome, el resultado que se
espera ver en pantalla será algo parecido a:

¿cómo se guarda una página en HTML?

Cuando se desee descargar un sitio web para poder tenerlo en HTML hay que
realizar los siguientes pasos:
 Abrir la página deseada en el navegador.
 Luego dependiendo que navegador se usa, realizar los siguientes pasos:
Internet Explorer:
Ingresar en la opción Herramientas (1)
Luego ir a Archivo (2)
Guardar como… (3)

Se abrirá otra ventana donde nos dará la opción de elegir donde descargar la
página.
En la opción Tipo: elegir Pagina web, completa

Guardar.
Google Chrome:
En la esquina derecha del navegador, presionar el botón de personalización y
control (1)
En el menú que se despliega elegir la opción Más herramientas (2)
Luego elegir la opción Guardar página como…

5
 6

Se abrirá otra ventana donde nos dará la opción de elegir donde descargar la
página.
En la opción Tipo: elegir Pagina web, completa
Guardar.
Mozilla Firefox:
Ingresar en la opción Abrir menú (1)
Luego en Guardar página (2)
Se abrirá otra ventana donde nos dará la opción de elegir donde descargar la
página.
En la opción Tipo: elegir Pagina web, completa
Guardar.
En todos los navegadores el atajo de teclado para guardar la página es: Ctrl + S
Siguiendo estos pasos obtendremos un archivo HTML y una carpeta con todas las
imágenes descargadas.

Estructura de una página web en HTML.

Una estructura HTML se empieza con la etiqueta<html> y acaba con </html>.
Todo lo que esté en medio será la página web. Dentro de <html></html> se
encuentran 2 partes diferenciadas. La primera <head></head> es la cabecera de
la página. Aquí irán cierta información que no es directamente el contenido de la
página. Aquí se pone el título de la página, los metadatos, estilos, código
JavaScript (todo esto se estudiará en capítulos venideros). La primera que se
suele estudiar es <title></title>, que indica el título de la página (lo que el
navegador pone en la parte superior izquierda).
La segunda parte es <body></body>. Aquí va propiamente el contenido de la
página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de
la página anterior, el siguiente código, podemos cambiar el título de la página.

Principales etiquetas HTML

<p> Esto es un texto </p>Escribimos <p> antes del texto y </p> para finalizar el
párrafo.
Enlace(link):
<a href=”http://www.nombredominio.com” target=”_blank”> Nombre del enlace</a>
Se debe cambiar ‘www.nombredominio.com’ por el dominio elegido y ‘Nombre del
enlace’ por el nombre que desees.
Imagen sin enlace:
<img src=”http://www.dominio.com/imagen.gif” alt=”descripción imagen”>

6
 7

Cambiamos ‘www.dominio.com/imagen.gif’ por la dirección URL de la imagen

elegida y ‘descripción de la imagen’ por los comentarios deseados.
Imagen con enlace:
<a href=”http://www.dominio.com” target=”_blank”> <img
src=”http://www.dominio.com/imagen.gif” alt=”descripción de la imagen”></a>
Hacemos los cambios mencionados anteriormente.
Correo electrónico:
<a href=”mailto:tuemail@tuemail.com”> Contactarme </a>
Sustituimos ‘tuemail@tuemail.com’ por la verdadera dirección de correo
electrónico y ‘Contactarme’ por el texto que queramos.
Alinear a la izquierda:
<div align=”left”> Texto alineado a la izquierda. </div>
Escribimos <div align=”left”> antes del texto que alinearemos a la izquierda y
finalizamos el texto con </div>.
Centrar:
<div align=”center”>Texto centrado </div>
Actuamos de forma análoga al apartado anterior.
Alinear a la derecha:
<div align=”right”>Texto alineado a la izquierda </div>
Actuamos de forma análoga al apartado anterior.
Salto de línea
<br> o <br />
Si queremos insertar una línea en blanco escribiremos <br> o <br />
Tipo de letra: <font face=”verdana”>Texto escrito en verdana </font>
Utilizamos <font face=”verdana”> antes del texto elegido y acabamos con </font>.
Negrita:
<strong>Texto </strong>
Actuamos de forma similar al caso anterior y los casos que vienen a continuación.
Cursiva:
<em>Texto </em>
Texto subrayado

7
 8

<u>Texto subrayado </u>

No es recomendable utilizar esta etiqueta puesto que los navegantes de la web
pueden confundir el subrayado con un enlace a otra pagina.
Tamaño de letra:
<font size=”3″>Texto </font>
Subíndice:
_Número2
Superíndice:
^Número2
Color de letra:
<font color=”blue”>Texto de color azul </font>
Escribimos <font color=”blue”> si hemos elegido el color azul y acabamos con
</font>.
También podemos utilizar el siguiente formato:
<font face=”Arial” size=”3″ color=”navy”> Texto escrito en arial, tamaño 3 y color
azul marino. </font>
Color de la tabla:
<td bgcolor=”white”> </td>
Ancho de la tabla:
<td width=”750″> </td>
Ajuste superior en la tabla:
<tr valign=”top”> </tr>
Eliminar la separación entre las columnas y filas de la tabla, espesor y separación
texto y borde de la celda:
<table width=”750″ CELLSPACING=”0″ CELLPADDING=”0″ BORDER=”0″>
</table>
Color del fondo de pantalla:
<body bgcolor=”white”></body>

Etiquetas para texto en HTML}

Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y cerrarse,
conteniendo el texto o la palabra que queramos transformar, entre medias. En el
ejemplo de la negrita se abriría <b> y se cerraría </b>.

8
 9

Se pueden combinar diferentes formatos, o sea, diferentes etiquetas. Por ejemplo,

si queremos que un texto esté en negrita y en cursiva escribiríamos esto:
<b><i>Este texto está escrito en negrita y en cursiva</i></b>. Cuando combines,
ten cuidado a la hora de cerrar las etiquetas. Debes cerrar las etiquetas por orden,
de la más interior a la más exterior. Por último, recordad que podéis escribir las
etiqutes en minúsculas o en mayúsculas.

Vamos con los diferentes formatos html que podemos encontrar:

Negrita HTML
Existen dos etiquetas que harán que nuestro texto se convierta en negrita. La
utilización de cualquiera de ellas es indiferente. Puedes usar la que prefieras.

Cursiva HTML
Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por supuesto
cerrarla con la etiqueta </i>).
También podemos utilizar la etiqueta <em>. Como en el caso de la negrita, es
indiferente el uso de una u otra. Aquí os dejo un ejemplo:
Subrayado HTML
Si queremos que la palabra o el texto quede subrayado, deberemos rodearlo con
la etiqueta <u> y cerrarlo con su correspondiente etiqueta. O sea, </u>. Así
subrayaríamos una frase importante:
Texto con espaciado simple o TT
TT son las iniciales de “teletype”. Utilizando esta etiqueta conseguiremos un
espaciado simple entre las diferentes letras del texto. Abriremos la etiqueta con
<tt> y la cerraremos con </tt>.

Alineación de texto
El texto se puede alinear en uno o ambos bordes (o márgenes) de un marco de
texto. Un texto se considera justificado cuando está alineado en ambos bordes.
Puede optar por justificar todo el texto de un párrafo excepto la última línea
(Justificar a la izquierda o Justificar a la derecha), o puede justificar el texto de un
párrafo incluida la última línea (Justificar todas las líneas). Si la última línea tiene
pocos caracteres, es aconsejable utilizar un carácter especial que señale el final
del artículo y crear un espacio de alineación.

tamaño de texto
De forma parecida a las sentencias HTML <font size="1"> hasta <font size="7">
donde el tamaño por defecto es <font size="3"> . más grande o más pequeño que

9
 10

el tamaño de letra del elemento padre, con aproximadamente la misma ratio que el
mencionado anteriormente.

Color del texto

La forma más común de texto HTML coloración es mediante el uso de códigos
de color hexadecimal (código Hex para abreviar). Sólo tienes que añadir un
atributo de estilo al elemento de texto que desea de color - un párrafo en el
siguiente ejemplo - y el uso de la propiedad de color con su codificación Hex.

Tipo de fuente
 “Times New Roman”, Times, serif;
 Verdana, Arial, Helvética, sans-serif;
 “DejaVu Sans Mono”,”Bitstream Vera Sans Mono”, monospace;

Espaciado del texto

En HTML no está permitido más de un elemento blanco (espacios, tabuladores,
saltos de línea) separado cualquier elemento o texto, todos estos son convertidos
a un único espacio en blanco y el resto se omiten en la representación del
documento.

Saltos de línea
En HTML este tipo de etiquetas no se cierran. Pero, cuando el mundo del HTML
apuntaba decididamente hacia XHTML, con las reglas estrictas XML, estas
etiquetas debían cerrarse. Ahora que parece que XHTML ha tocado techo y que
vamos destinados a HTML5, estas etiquetas pueden dejarse perfectamente sin
cerrar. Lo mismo ha sucedido con otras normas estrictas, como la del código
rigurosamente en minúsculas. HTML5 es “case incentive”, no le preocupa lo más
mínimo si lo escribes en mayúsculas, minúsculas, o una combinación de ambos.

Caracteres especiales
Estos son los caracteres especiales que se usan en HTML para no confundir un
principio o final de etiqueta, unas comillas o un & con su correspondiente carácter.

Caracteres especiales del HTML 2.0

10
 11

Ahora vamos a ver caracteres especiales, aunque muchos de ellos están

disponibles en UTF-8, por lo que, si respetamos las recomendaciones de HTML5
para los juegos de caracteres, no necesitamos realmente utilizarlos.

11
 12

Caracteres especiales del HTML 3.2

Otros caracteres especiales

Etiqueta body
El cuerpo de un documento HTML es la parte central de una página web, este se
define por medio de la etiqueta BODY. En este artículo nos centraremos a hablar
de esta etiqueta, sus atributos y propiedades.
De las dos partes en que se divide un documento HTML (HEAD y BODY), BODY
es la segunda. BODY es la etiqueta usada para indicar el cuerpo de un documento
HTML, es la parte donde se describe el contenido de la página (su estructura, su
forma, sus colores, texto, y todo lo visual), su inicio lo indica la etiqueta <body> y
su final con la etiqueta </body>, se escribe así:

12
 13

Fondo de página
Las páginas con imagen de fondo se crean a partir del atributo background, para
esto debes tener una imagen en formatos compatibles web como lo son: jpg, jpeg,
gif, png.
En nuestro caso utilizaremos en el directorio de prueba una imagen llamada
fondo.png, en este directorio debemos guardar el archivo de html, para este caso
lo llamamos body fondo.html

ubicación de archivos
En la sección Ubicación del archivo puede especificar un nombre y una ubicación
para el archivo mezclado.
1. Nombre
Especifica el nombre del archivo de mezcla.
2. Opciones de nombrado
Abre un menú emergente con opciones de nombrado:
 Usar nombre del proyecto inserta el nombre del proyecto en el
campo Nombre.
 Actualizar automáticamente el nombre añade un número al nombre
de archivo e incrementa el número cada vez que exporta un archivo.
2. Ruta
Abre un diálogo que le permite buscar una ubicación del archivo.
4. Opciones de ruta
Abre un menú emergente con las siguientes opciones:
 Elegir abre un diálogo que le permite buscar una ubicación de
archivo.
 Usar carpeta de audio del proyecto establece la ruta a la
carpeta Audio de su proyecto.
 Carpetas recientes le permite seleccionar ubicaciones de archivo
seleccionadas recientemente.
 Borrar rutas recientes le permite suprimir todas las ubicaciones de
archivo seleccionadas recientemente.
2. Esquema de nombrado
Abre un diálogo en el que puede especificar un esquema de nombrado para el
archivo de mezcla.

13
 14

6. Resolver conflictos de nombres de archivo

Especifica cómo se resuelven los conflictos de nombres con los archivos
existentes

Etiquetas para listas

Las listas no ordenadas van dentro de la etiqueta<ul> HTML y de su cierre </ul>.
Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y
su cierre. Si no le indicamos nada a la etiqueta <li> HTML, ésta se
generará de forma automática.

Lista ordenada
Las listas ordenadas son casi idénticas a las listas no ordenadas, salvo que en
este caso los elementos relacionados se muestran siguiendo un orden
determinado. Cuando se crea por ejemplo una lista con las instrucciones de un
producto, es importante el orden en el que se realiza cada paso. Cuando se
muestra un índice o tabla de contenidos en un libro, es importante el orden de
cada elemento del índice.
En todos estos casos, la lista más adecuada es la lista ordenada, que se define
mediante la etiqueta <ol>. Los elementos de la lista se definen mediante la
etiqueta <li>, la misma que se utiliza en las listas no ordenadas.
Etiqueta <ol>

Atributos comunes básicos, internacionalización y eventos

Atributos propios -

Tipo de elemento Bloque

Descripción Se emplea para definir listas ordenadas

Lista con viñetas

1. Paso 1. Abra la página HTML con su editor de texto preferido. Vaya a la
sección en la que desea agregar viñetas.
2. Paso 2. Escriba <ul> para crear una lista de viñeta nueva y presione Intro.
...
3. Paso 3. Escriba el contenido de la primera viñeta. ...
4. Paso 4. Cierre la lista de viñetas, escriba </ul> y presione Intro.

Tablas

14
 15

Una tabla no es otra cosa más que un medio de organizar datos en filas y
columnas. Este concepto ha estado presente en nuestra sociedad por un largo
período de tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una
forma de transmitir información que, de otro modo, no sería comprendida tan
fácilmente.
En documentos HTML una tabla puede ser considerada, resumidamente, como un
grupo de filas donde cada una contiene a un grupo de celdas. Esto es
conceptualmente distinto a un grupo de columnas que contiene a un grupo de
filas, y esta diferencia tendrá un impacto en la composición y comportamiento de
la tabla

Imágenes
En la creciente tendencia a la maquetación mobile first, debemos considerar la
anchura máxima que una imagen debe tener para poder ser visualizada de forma
correcta en diferentes tamaños de pantalla y diferentes dispositivos. Para ello
podremos hacer uso de distintas reglas CSS, aplicadas tanto en las hojas de estilo
como en el propio documento HTML.
Para hacer una imagen responsiva adaptada al tamaño de su contenedor, tan solo
tienes que añadir el siguiente atributo a la etiqueta img: style=”max-
width:100%;width:auto;height:auto;”. Con esto conseguirás que la imagen se
adapte a los diferentes cambios en el tamaño de pantalla.
Un caso típico es, como dicen en este artículo sobre cómo hacer un logo
profesional gratis, la inserción de un logotipo que responda, usando una misma
imagen, a diferentes tamaños de pantalla.

Vínculos o enlaces
Enlaces HTML - Hipervínculos, links Etiqueta TAG a href. HTML utiliza el elemento
ancla (Etiqueta a) para crear un enlace. Cuando un visitante hace clic en él, el
navegador abre otra página interna o externa.

Vínculos o enlaces dentro de la página

Son los enlaces principales de un sitio. Si en el archivo index.html, queremos
agregar un vínculo a contacto.html el código sería así:
<a href="contacto.html">Contáctenos</a>.

Vínculos o enlaces a otra página

Muchas internautas y web masters (sobre todo quienes son principiantes) estiman
que algunos enlaces en los sitios deben abrirse forzosamente en una nueva
ventana del navegador. El equipo de SPIP, como muchos otros, considera que
esto está mal.

15
 16

- En caso de ser absolutamente necesario, se debe escribir el enlace en HTML, a

mano, sin pasar por un atajo SPIP. Para forzar la apertura de un enlace en una
ventana nueva, basta añadirle el atributo HTML target con valor _blank de esta
manera: <a href="pagina.html" target="_blank">Título del enlace</a>.
- Sin embargo, para intentar facilitar la vida a quienes a pesar de todo desean
esta utilidad existe un filtro |liens_ouvrants (a incluir en los esqueletos) que hace
«saltar» todos los enlaces externos incluidos en el texto a través del atajo [titre-
>http://www.uzine.net/spip].

Vínculos o enlaces a páginas remotas

Como habíamos indicado estos archivos nos permiten conectar nuestra página
con otra fuera de nuestro sitio web, este tipo de enlace es muy común y es muy
sencillo, por ejemplo, para enlazar nuestra página con el buscador altavista,
usaríamos la siguiente etiqueta de html:
<a href=” http://www.altavista.es”>ir a altavista.es</a>
Tenemos que tener cuidado con las direcciones web, cualquier dirección de
Internet siempre comienza por http://. Si no lo colocamos esto en el código de la
etiqueta html, este enlace será considerado como un enlace local de nuestro sitio
web.
El http (Hypertext Transfer Protocol) es el protocolo de hipertexto que se usa en
Internet para poder ver las páginas web. Pero este no es el único protocolo que
podemos usar, podemos utilizar el FTP (File Transfer Protocol) que es un
protocolo de transferencia de ficheros. En este caso, tendríamos que cambiar el
código que escribamos en la etiqueta html. No comenzaría por http://, sino
por ftp://.

Marcos o frames
Los frames (en inglés frame = cuadro, bastidor o marco) es un elemento
implementado por Netscape, que permite dividir la pantalla en varias áreas
independientes unas de otras, y por tanto con contenidos distintos, aunque
puedan estar relacionados. No hay límites para el contenido de cada una de estas
áreas: tienen las mismas propiedades que la pantalla completa normal, tal y como
la conocemos. No hay que confundir los frames con las tablas. Su apariencia, a
veces, puede ser similar, pero mientras el contenido de la celda de una tabla es
fijo, en un área de pantalla creado por el elemento FRAME se dispone de todos
los recursos del HTML. Es una zona viva.

Formulario.
Un formulario es un conjunto de controles (botones, cajas de texto, casillas de
verificación, botones radio, etc.) que permiten al usuario introducir datos y
enviarlos al servidor web para su procesamiento.

16
17

17