Curso Básico de HTML
1. ¿Qué es HTML?
HTML HyperText Markup Language (lenguaje de marcas de hipertexto) es el lenguaje que se
emplea para el desarrollo de páginas de internet.
Está constituido por una serie de etiquetas o tags que permiten definir la estructura de la
página y su contenido, ya sea texto o imagen.
Para poder crear una página HTML se requiere un simple editor de texto y un navegador de
internet.
2. Estructura básica de una página HTML
Las instrucciones HTML están encerradas entre los caracteres: < y >.
Muchos elementos HTML requieren una marca de comienzo y otra de finalización. Todo
aquello que está fuera de las marcas del lenguaje se imprime en la pantalla (dentro del
navegador).
La estructura básica de una página HTML es:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
Cuerpo de la página.
</body>
</html>
Una página HTML es un archivo que generalmente tiene como extensión los caracteres html
Estos son los elementos básicos que toda página HTML debe llevar:
DOCTYPE que informa al navegador que el contenido siguiente se trata de un archivo
HTML
la marca:<html> y finaliza con la marca:</html> al final del archivo.
Una página HTML tiene dos secciones muy bien definidas que son la cabecera y el cuerpo:
Cabecera Cuerpo
<head> <body>
</head> Cuerpo de la página.
</body>
En la cabecera es común inicializar el título de Todo el texto que dispongamos dentro del
la página dentro de las marcas <title></title> <body> aparece dentro del navegador tal cual
(normalmente aparece en la barra superior lo hayamos escrito.
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.
3. Salto de línea <br>
Todo el texto que disponemos en el cuerpo de la página aparece en la misma línea, no importa
si cuando escribimos la página disponemos cada palabra en una línea distinta (es decir un
navegador no tiene en cuenta la tecla ENTER).
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. Es uno
de los pocos elementos HTML que no tiene marca de cerrado como habíamos visto hasta
ahora.
4. Párrafo <p>
Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. Todo lo que
encerremos entre las marcas <p> y </p> aparecerá separado por un espacio con respecto al
próximo párrafo.
Dentro de un párrafo puede haber saltos de línea <br>.
5. Títulos <h1><h2><h3><h4><h5><h6>
Si queremos indicar títulos en HTML contamos con los elementos:
<h1><h2><h3><h4><h5><h6>
El título de mayor nivel es <h1>, es decir el que tienen normalmente una fuente de mayor
tamaño (veremos que es el navegador el responsable de definir el tamaño de la fuente, más
adelante veremos como modificar la fuente, tamaño, color etc.)
Según la importancia del título utilizaremos alguno de estos elementos HTML. Requiere la
marca de cerrado del título con la barra invertida como hemos visto.
Los buscadores que indexan contenido (Google, Bing, Yahoo etc.) hacen hincapié en los títulos
para identifica los temas que tratan las páginas.
No hay que confundir el título de la página que va en la sección del head con el elemento title.
6. 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>)
<strong> es equivalente a poner el texto encerrado en negrita
<em> es equivalente a poner el texto en cursiva
Práctica 1.
a. Confeccionar una página en blanco con la estructura mínima necesaria. Guardar el
archivo con el nombre practica01a.html
b. Confeccionar una página que muestre los nombres de 5 alumnos/as del curso
separados por un guión. El título de la página debe poner Práctica 1b. Guardar el
archivo con el nombre practica01b.html
c. Confeccionar una página que muestre los nombres de 5 alumnos/as del curso
mostrando uno por línea. El título de la página debe poner Práctica 1c. Guardar el
archivo con el nombre practica01c.html
d. Confeccionar una página que muestre dos párrafos detallando a que se dedica una
empresa ficticia. En el primero agregar varios saltos de línea. El título de la página debe
poner Práctica 1d. Guardar el archivo con el nombre practica01d.html
e. Práctica 5. Confeccionar una página que contenga un título de primer nivel <h1> y
luego dos títulos de nivel <h2>. Definir un párrafo para cada título de segundo nivel. El
título de la página debe poner Práctica 1e. Guardar el archivo con el nombre
practica01e.html
