Scribd
Cargar
30 vistas22 páginas

HTML02 - HTML Basico

Cargado por

Cristina Guerrero Lopez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
30 vistas22 páginas

HTML02 - HTML Basico

Cargado por

Cristina Guerrero Lopez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 22

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” "http://www.w3.org/TR/html4/loose.dtd">

 XHTML 1.0: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Transitional//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">

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 “frog.jpg”.

 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/frog.jpg”.

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 “../frog.jpg”.

 Si hubiera que subir dos niveles y luego entrar en la carpeta


“imágenes”, la ruta sería “../../imagenes/frog.jpg”.

 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/fog.jpg”.

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

También podría gustarte