tutorial 1 html - pbworksticsantabarbarasergio.pbworks.com/f/tutorial 1 html.pdf · los marcadores...
TRANSCRIPT
HTML(5)Tutorial 1
¿QUÉ ES HTML?
HTML es un lenguaje para describir páginas web
• HTML viene de: Hyper Text Markup Language
• HTML es un lenguaje de marcado
• Un lenguaje de marcado es un conjunto de tags
• Los tags describen el contenido del documento
• Los documentos HTML contienen tags HTML y texto sencillo
• A los documentos HTML también se les llama páginas web
INTRODUCCIÓN
Ejemplo de HTML:
!
Explicación: •La declaración DOCTYPE define el tipo de documento •El texto entre <html> y </html> describe la página web •El texto entre <body> y </body> es el contenido visible de la página •El texto entre <h1> y </h1> se muestra como un heading (o cabecera) •El texto entre <p> y </p> se muestra como un párrafo
!NOTA: La declaración <!DOCTYPE html> es el tipo de documento para HTML5.
TAGS DE HTML
Los marcadores de HTML se suelen llamar tags
• Los tags HTML tags son palabras clave rodeadas de corchetes en ángulo (<>) como por
ejemplo: <html>
• Los tags HTML normalmente van en parejas como <p> y </p>
• El primer tag es el “tag inicial” y el segundo es el “tag final”
• El tag final se escribe como el tag inicial, pero con una barra (/) al principio del nombre
del tag
• Los tags inicial y final también se llaman tag de apertura y de cierre respectivamente
• Ejemplo general:
ELEMENTOS DE HTML
En HTML, la mayoría de los elementos empiezan con un tag inicial (por ejemplo <p>) y un tag final (por ejemplo </p>), con el contenido entre medias:
NAVEGADORES
El propósito de un navegador (como Google Chrome, Internet Explorer, Firefox, Safari…) es leer el documento HTML y mostrarlo como una página web.
!El navegador no muestra los tags HTML, sino que usa los tags para determinar cómo tiene que presentar el contenido de la página HTML al usuario.
ESTRUCTURA DE LA PÁGINA HTML
A continuación una muestra de un documento HTML:
VERSIONES DE HTML
Desde el principio de Internet ha habido muchas versiones de HTML:
LA DECLARACIÓN <!DOCTYPE>
La declaración <!DOCTYPE> ayuda al navegador a mostrar la página web correctamente.
Hay muchos tipos de documentos diferentes en la web. Un navegador sólo puede mostrar una página 100% correctamente si sabe la versión de HTML que se ha usado, así como el tipo de HTML.
Ejemplos de diferentes versiones y tipos de HTML y sus declaraciones: !
ESCRIBIR HTML USANDO NOTEPAD
Paso 1: abrir el cuaderno de notas Para ello hay que ir a
Inicio Todos los programas Accesorios Cuaderno de notas
Paso 2: Añadir el código HTML Escribe el código HTML en el cuaderno de notas
!
Paso 3: guarda el archivo HTML Selecciona Archivo -> Guardar como as.. en el menú del cuaderno de notas
Cuando guardes un archivo HTML, usa cualquiera de estas dos extensiones: .htm o .html . No hay diferencia entre una u otra. Es completamente tu preferencia.
Guarda el archivo en un directorio fácil de recordar, como “código html”.
Paso 4: Visualiza tu página HTML en tu navegador Inicia el navegador y abre tu archivo desde Archivo, Abrir y busca tu archivo en el directorio donde lo has guardado.
El resultado debería ser algo parecido a esto:
EJEMPLOS BÁSICOS (PARA ENTREGAR)
No te preocupes si no entiendes todos los tags. Los veremos a lo largo de los siguientes tutoriales.
Headings HTML Los headings HTML se definen con los tags <h1> hasta <h6>.
Ejemplo: <h1>Esto es un heading heading</h1> <h2>Esto es un heading</h2> <h3>Esto es un heading</h3> !!!!Párrafos HTML Los párrafos HTML se definen con el tag <p> .
Ejemplo: <p>Esto es un párrafo.</p> <p>Esto es otro párrafo.</p>
!Links HTML Los links HTML links se definen con el tag <a>.
Ejemplo: <a href=“http://www.wikipedia.com">Esto es un link</a> !Nota: La dirección del link se especifica en el atributo href.
(Aprenderemos sobre los atributos más adelante).
!Imágenes HTML Las imágenes HTML se definen con el tag <img>.
Ejemplo: <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> !!Nota: El nombre del archivo y el tamaño de la imagen se dan como atributos.
ELEMENTOS HTML 1
Los documentos HTML vienen definidos por elementos HTML
Elementos HTML Un elemento HTML es todo lo que está entre un tag inicial y un tag final:
Tag inicial* Contenido del elemento Tag final* !<p> Esto es un párrafo </p> <a href="default.htm"> Esto es un link </a> <br>
Sintaxis de un elemento HTML • Un elemento HTML empieza con un tag inicial • Un elemento HTML termina con un tag final • El contenido del elemento es todo lo que está entre el tag inicial y el tag final • Algunos elementos HTML tienen un contenido vacío • Los elementos vacíos están cerrados en el tag inicial • La mayoría de los elementos HTML pueden tener atributos
ELEMENTOS HTML 2
Explicación del ejemplo HTML El elemento <p>:
<p>Este es mi primer párrafo.</p> El elemento <p> define un párrafo en el documento HTML.El elemento tiene un tag inicial <p> y un tag final </p>.El contenido del elemento es: Este es mi primer párrafo.
El elemento <body>:
<body> <p>Este es mi primer párrafo.</p> </body> El elemento <body> define el cuerpo del documento HTML.El elemento tiene un tag inicial <body> y un tag final </body>.El contenido del elemento es otro elemento HTML (un elemento p).
El elemento <html>:
<html> <body> <p>This is my first paragraph.</p> </body> </html> El elemento <html> define el documento HTML completo.El elemento tiene un tag inicial <html> y un tag final </html>.El contenido del elemento es otro elemento HTML(el elemento body).
Elementos HTML anidados La mayoría de los elementos HTML pueden anidarse (es decir, pueden ser contenidos por otros elementos HTML).
Los documentos HTML consisten en elementos HTML anidados.
Ejemplo de Documento HTML <!DOCTYPE html> <html> !<body> <p>Este es mi primer párrafo.</p> </body> !</html> !Este ejemplo contiene 3 elementos HTML.
ELEMENTOS HTML 3
Consejo HTML: Usa minúsculas en los tags Los tags HTML no distinguen entre mayúsculas y minúsculas: <P> quiere decir lo mismo que <p>. Muchos de los sitios web de hecho usan mayúsculas para los tags.
Nosotros usaremos minúsculas para los tags, porque el consorcio World Wide Web Consortium (W3C) recomienda el uso de minúsculas en HTML 4, y lo exige en el caso de XHTML.
!No te olvides del tag final Algunos elementos HTML puede que se muestren correctamente incluso si olvidas el tag final:
<p>Esto es un párrafo <p>Esto es un párrafo Este ejemplo funciona en la mayoría de los navegadores, porque el tag final se considera opcional.
Pero nunca confíes en eso. Muchos elementos HTML producirán resultados inesperados y/o errores si se te olvida el tag final.
!Elementos HTML vacíos Los elementos HTML que no tienen contenido se llaman elementos vacíos.
<br> es un elemento vacío sin tag final (el tag <br> tag define un salto de línea).
Consejo: En XHTML, todos los elementos tienen que estar cerrados. Añadir una barra dentro del tag inicial, como <br />, es la manera adecuada de cerrar elementos vacíos en XHTML (and XML).
EJERCICIO (PARA ENTREGAR)
Escribe los 2 primeros párrafos de “El Ingenioso Hidalgo Don Quijote de la Mancha”, siguiendo la estructura que acabamos de ver y utilizando links al diccionario de la RAE para las siguientes palabras (para cada vez que aparezcan):
lanza hidalgo astillero ocioso razón caballero famoso prosa