¿HTML?
Es el lenguaje que se emplea para el
desarrollo de páginas de internet.
Editor
• Para poder crear una página HTML se requiere de un editor de
texto, para almacenar las páginas en forma local, El editor que
utilizaremos es (Visual Studio Code)
• Observa el vídeo para configurar visual studio
• [Link]
• Para probar las páginas que desarrolla debe emplear un
navegador de internet (Chrome, IExplorer, FireFox, Safari,
Microsoft Edge etc.)
Una página HTML
Es un archivo que generalmente tiene como extensión los
caracteres html.
Por ejemplo podemos llamar a nuestra primer página con el
nombre:
[Link]
• Las instrucciones HTML están encerradas entre los caracteres:
< >.
• La estructura básica de una página HTML es:
• DOCTYPE informa al navegador que el contenido siguiente se trata de un archivo HTML (todos los
navegadores modernos analizan la presencia del DOCTYPE)
• Apertura <html> Cierre </html> al final del archivo.
• Una página HTML tiene dos secciones muy bien definidas que son:
• La cabecera:
<head> </head>
Y el cuerpo de la página:
<body>
Cuerpo de la página.
</body>
• En la cabecera es común inicializar el título de la página dentro de las marcas
<title></title> (normalmente aparece en la barra superior de nuestro navegador y es
utilizado por los motores de búsqueda como Google para indexar la página) El título
debe hacer referencia al contenido en sí de la página.
• Dentro de la cabecera disponemos la etiqueta meta donde definimos la propiedad
charset con el valor UTF-8 que es un formato de caracteres ampliamente empleado en
internet (si no disponemos este formato no podemos disponer caracteres acentuados)
<meta charset="UTF-8">
Todo el texto que dispongamos dentro del <body> aparece dentro del navegador tal cual lo
hayamos escrito.
Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y minúsculas,
es decir podemos escribirlo como más nos guste
Salto de línea <br>
• Para indicarle al navegador que queremos que continúe en la próxima línea debemos
hacerlo con el elemento HTML <br>.
• Cuando aparece la marca <br> el navegador continúa con el texto en la línea siguiente.
• Tengamos en cuenta que es indistinto si disponemos la marca en la misma línea o en la siguiente:
PHP<br>
es lo mismo:
PHP
<br>
<br> viene de la palabra en inglés break
Implementemos una página que muestre los nombres de distintos lenguajes de programación
uno por línea:
Todo lo que encerremos entre las marcas <p> y </p> aparecerá
Párrafo <p> separado por un espacio con respecto al próximo párrafo.
• El primer párrafo contiene varios saltos de línea. Normalmente uno
agrupa en párrafos para dar más sentido a nuestro escrito.
• Cuando modificamos la ventana del navegador los párrafos se
acomodan automáticamente de acuerdo al ancho de la ventana.
• Para recordar el nombre de este elemento HTML:
<p> viene de la palabra paragraph
• No es correcto tratar de dar formato a un escrito utilizando solo
elementos <br>, debemos utilizar párrafos y dentro de estos si son
necesarios saltos de línea.
Títulos
• Otros elementos HTML muy utilizados son para indicar los títulos,
contamos con los elementos:
• <h1>
• <h2> Los buscadores que indexan contenido (Google, Bing,
Yahoo etc.) hacen incapié en los títulos para identifica los
• <h3> temas que tratan las páginas.
• <h4>
No hay que confundir el título de la página que va en la
• <h5> sección del head con el elemento title.
• <h6>
Confeccionaremos una página que contenga un título de primer nivel <h1> y luego dos títulos de
nivel <h2>. Definiremos un párrafo para cada título de segundo nivel.
Enfasis
(<em> <strong>)
• Enfatizar algo significa realzar la importancia de una cosa, por ejemplo una
palabra o conjunto de palabras.
• Así como tenemos seis niveles de títulos para enfatizar un bloque contamos
con dos elementos que son (<em> <strong>)
Para recordar el nombre de estos elementos HTML:
<em> viene de emphasis que significa énfasis.
<strong> es ya la palabra completa de strong que significa fuerte.
Veamos un ejemplo del empleo de estos dos elementos HTML:
El elemento "strong" y el elemento "em".
Hipervínculo a otra página del mismo
sitio <a>
• El elemento más importante que tiene una página de internet es el hipervínculo, estos nos
permiten cargar otra página en el navegador.
• Normalmente un navegador al encontrar esta etiqueta HTML muestra un texto subrayado, y al
hacer clic con el mouse sobre éste el navegador carga la página indicada por dicho hipervínculo.
• La sintaxis para disponer un hipervínculo a una página que se encuentra en el mismo sitio (es
decir otra página que hemos desarrollado nosotros).
<a href="[Link]">Noticias</a>
Implementemos dos páginas que contengan hipervínculos entre si, los nombres de las
páginas HTML serán: [Link] y [Link]
[Link]
<a href="[Link]">Noticias</a>
• Toda propiedad toma el valor que se encuentra seguidamente del caracter
"="
• El valor de la propiedad href en este caso es [Link] (es otro archivo
HTML que debe encontrarse en nuestro sitio y en el mismo directorio), si lo
probamos en nuestro equipo disponer los dos archivos en la misma carpeta.
• El segundo archivo [Link] tiene un hipervínculo a la primer página:
<a href="[Link]">Salir.</a>
• Para recordar el nombre de esta etiqueta HTML:
<a> viene de anchor que significa ancla.
La segunda página en nuestro ejemplo es:
[Link]
Hipervínculo a otro sitio de internet <a>
• La sintaxis para disponer un hipervínculo a otro sitio de internet es:
• <a href="[Link] Google</a>
• Ahora la propiedad href la inicializamos con el nombre del dominio del otro sitio.
• Algo importante que hay que anteceder al nombre del dominio es el tipo de
protocolo a utilizar. Cuando se trata de una página de internet, el protocolo es el http.
• Resumiendo a la propiedad href la inicializamos con el nombre del protocolo (http)
seguida de dos puntos (:) y dos barras (//) luego la cadena (www.) y finalmente el
nombre de dominio del sitio a enlazar.
La siguiente página muestra un hipervínculo al sitio principal del buscador Google:
Imágenes dentro de una página <img>
• Para insertar una imagen dentro de una página debemos utilizar el
elemento HTML <img>
• Generalmente, la imagen se encuentra en el mismo servidor donde se
almacenan nuestras páginas HTML. Los formatos clásicos son los archivos con
extensiones gif, jpg y png.
• La sintaxis de esta etiqueta es:
<img src="[Link]" alt="Pintura geométrica">
Como mínimo, debemos inicializar las propiedades src y alt de la
etiqueta HTML "img".
• En la propiedad src indicamos el nombre del archivo que contiene la
imagen (en un servidor Linux es sensible a mayúsculas y minúsculas por
lo que recomiendo que siempre utilicen minúsculas para los nombres de
archivos).
• Como la imagen se encuentra en el mismo directorio donde se almacena
la página HTML, con indicar el nombre de archivo basta (no es necesario
indicar ninguna ruta de carpetas)
• Otra propiedad muy recomendada es alt, donde disponemos un texto que
verán los usuarios que visiten el sitio con un navegador que sólo permite
texto (o con un navegador que tenga desactivada la opción de descarga
de imágenes). El texto debe describir el contenido de la imagen.
Confeccionemos una página que muestre una imagen llamada [Link] (La imagen se
encuentra almacenada en el servidor en la misma carpeta donde se localiza esta página)
• Si la imagen se encuentra en una subcarpeta llamada imagenes,
luego la sintaxis para recuperarla será:
<img src="imagenes/[Link]" alt=“gato naranja">
Es decir, antecedemos al nombre de la imagen el nombre de la carpeta y la
barra /
• Por último, si queremos acceder a una imagen que se encuentra en
una carpeta llamada imagenes pero que está al mismo nivel:
<img src="../imagenes/[Link]" alt="Pintura geométrica">
• Primero le indicamos que subimos al directorio padre mediante los
dos puntos .. y seguidamente indicamos el nombre de la carpeta y la
imagen a mostrar.
• <img> viene de la palabra image
• src viene de de la palabra source
• alt viene de la palabra alternative
Hipervínculo mediante una imagen
<a> y <img>
• Como ya conocemos los hipervínculos y como insertar imágenes en
nuestra página, ahora podemos implementar un hipervínculo pero en
vez de mostrar un texto mostraremos una imagen.
• La solución es simple y consiste en disponer la etiqueta <img>
encerrada entre la marca de comienzo y fin del enlace(<a>)
Confeccionemos una página que muestre dos imagenes ([Link] y
[Link]) como hipervínculos. Al ser presionados llamar a otra página.