HTML02 - HTML básico
Introducción a HTML y primeras pruebas
ALBERT BASSONS
Índice
Estructura de la página
La declaración <!DOCTYPE>
Elementos básicos
Encabezados
Párrafos
Saltos de línea
Enlaces
Imágenes
Elementos anidados
Elementos sin contenido
Repasando…
ALBERT BASSONS 2
Estructura de la página
El inicio de la página web se marca con la etiqueta <html> y
el final es el cierre </html>.
Dentro de la página hay dos secciones clave: cabecera y
cuerpo, que se marcan con las etiquetas <head> y <body>
respectivamente.
En la cabecera se incluyen cosas como el título de la página, las
etiquetas meta, la inclusión de las hojas de estilo, algunos
scripts…
En el cuerpo se ubica el contenido visible de la página.
ALBERT BASSONS 3
Estructura de la página
ALBERT BASSONS 4
Estructura de la página
ALBERT BASSONS 5
La declaración <!DOCTYPE>
La declaración <!DOCTYPE>, ubicada al inicio del documento,
ayuda al navegador a mostrar la página de forma correcta.
Como hay muchos documentos en la web, creados en
momentos diferentes, usan especificaciones HTML diferentes.
La forma de que el navegador muestre la web de forma
correcta, es que conozca el tipo y versión de HTML usados en
la creación de la misma.
ALBERT BASSONS 6
La declaración <!DOCTYPE>
Estos son algunos ejemplos de declaraciones habituales. En
HTML5 se ha simplificado la sintaxis de la etiqueta .
HTML5: <!DOCTYPE html>
HTML 4.01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN” "[Link]
XHTML 1.0: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN” "[Link]
[Link]">
ALBERT BASSONS 7
NOTA
Cuidado, a partir de este punto, los
ejemplos mostrados pueden no
estar completos, conteniendo
solamente una parte del código.
Para probarlos, deberíais completar la
parte que falta, (habitualmente la
declaración de <!Doctype>, las
etiquetas <html> y <body> y el
<head> de la página).
ALBERT BASSONS 8
Encabezados
Los encabezados se definen con las etiquetas que van de
<h1> a <h6>.
ALBERT BASSONS 9
Párrafos
Los párrafos se ubican entre <p> y </p>.
ALBERT BASSONS 10
Saltos de línea
El elemento <br> es un salto de línea (que no un cambio de párrafo).
En HTML no se tienen en cuenta los saltos de línea hechos con la
tecla “intro” ni los dobles o triples espacios consecutivos*.
ALBERT BASSONS 11
Enlaces
Para permitir la navegación de unas páginas a otras, HTML usa el
mecanismo de enlaces de hipertexto. De esta forma, desde un
documento se puede acceder a otro dando al usuario la posibilidad de
visualizar solamente el contenido deseado.
ALBERT BASSONS 12
Enlaces
Para crear dichos enlaces, usamos la etiqueta <a>.
Obsérvese que la etiqueta <a> tiene un atributo href,
donde se indica como valor el destino del enlace.
Etiqueta <a> Atributo href Valor del atributo
ALBERT BASSONS 13
NOTA: sobre las rutas…
En el ejemplo las direcciones usadas en el atributo href, han sido
rutas absolutas en Internet. En el ejemplo anterior de Juega y Estudia
realmente he usado rutas relativas.
A lo largo del curso, necesitaremos indicar la ruta donde se encuentre
un determinado recurso en muchas ocasiones. Debemos tener bien
claros algunos conceptos:
Las URL absolutas incluyen todas las partes de la URL (protocolo,
servidor y ruta).
Las URL relativas prescinden de algunas partes de las URL para
hacerlas más breves.
ALBERT BASSONS 14
Imágenes
Para colocar imágenes, usamos la etiqueta <img>. La ruta de
la imagen se indica mediante el atributo src.
La etiqueta <img> no hace falta cerrarla en HTML, pero es
recomendable colocar una barra antes del “>” como se
muestra en el ejemplo
Más adelante veremos qué atributos podemos usar con cada
una de las diferentes etiquetas y para qué sirven.
ALBERT BASSONS 15
Imágenes
ALBERT BASSONS 16
NOTA: sobre las rutas…
En el ejemplo anterior, se ha usado una ruta relativa en el atributo
src.
En la ruta relativa, indicamos cómo localizar el recurso a partir de
la URL de la página actual.
Si el documento HTML y la imagen se encuentran en la misma carpeta,
la ruta es “[Link]”.
Si el fichero de imagen se encontrara en una carpeta “imagenes”, que
estuviera en la misma carpeta que el documento HTML, hubiéramos
indicado la ruta como “imagenes/[Link]”.
ALBERT BASSONS 17
NOTA: sobre las rutas…
Si el documento HTML se encontrara dentro de una carpeta y la
imagen fuera de ella, tendríamos que subir un nivel para encontrarla.
En ese caso la ruta sería “../[Link]”.
Si hubiera que subir dos niveles y luego entrar en la carpeta
“imágenes”, la ruta sería “../../imagenes/[Link]”.
Si el fichero de imagen se encontrara en una carpeta “imagenes” en la
raíz del documento (DocumentRoot), mientras que el documento
HTML está en otra muy diferente, la ruta podría ser:
“/imagenes/[Link]”.
ALBERT BASSONS 18
Elementos anidados
Anidar significa colocar un elemento dentro de otro.
Si observamos los primeros ejemplos, ya nos damos cuenta que dentro
del elemento html tenemos el elemento head y el body. A su vez,
dentro de estos elementos tenemos otros más.
También podremos tener un enlace con una imagen dentro, una tabla
que contenga enlaces, una tabla que contenga enlaces con imágenes…
ALBERT BASSONS 19
Etiquetas sin contenido
Hemos visto etiquetas que no hay que cerrar. Se corresponden con
elementos que no tienen contenido (por definición), como por ejemplo
<br> o <img>.
En HTML no hace falta cerrar dichas etiquetas, sin embargo es
conveniente escribirlas como <br /> o <img />, donde la barra
expresa el cierre.
En XHTML sí es obligatorio cerrar siempre los elementos de forma
explícita.
ALBERT BASSONS 20
Mayúsculas y minúsculas
Las etiquetas HTML se pueden escribir en mayúscula.
Sin embargo, el estándar del consorcio de la W3 (W3C), establece que
la forma adecuada de escribir etiquetas y atributos HTML es
completamente en minúscula.
Si quisiéramos hacer una página web siguiendo las reglas estrictas de
HTML, o usando XHTML, poner una etiqueta en mayúscula se
consideraría un error.
ALBERT BASSONS 21
Repasando…
Como ya sabemos, un elemento HTML comienza con una etiqueta de
apertura y finaliza con una etiqueta de cierre.
El contenido del elemento es todo lo que hay entre ambas etiquetas.
Algunos elementos HTML no tienen contenido, con lo que no necesitan
etiqueta de cierre (como por ejemplo <img>).
La mayoría de los elementos HTML pueden tener atributos con un
valor.
ALBERT BASSONS 22
