001 html

17
Definiéndolo de forma sencilla, "HTML es lo que se utiliza para crear todas las páginas Web de Internet". Más concretamente, HTML es el lenguaje con el que se "escriben" la mayoría de páginas Web. El propio W3C (World Wide Web Consortium) define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite publicar información de forma global". ¿Qué es el HTML? HyperText Markup Language (Lenguaje de Marcas de Hipertexto) 0. HTML: Introducción

Transcript of 001 html

Page 1: 001 html

Definiéndolo de forma sencilla, "HTML es lo que se utiliza para crear todas las páginas Web de Internet". Más concretamente, HTML es el lenguaje con el que se "escriben" la mayoría de páginas Web.

El propio W3C (World Wide Web Consortium) define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite publicar información de forma global".

¿Qué es el HTML?HyperText Markup Language (Lenguaje de Marcas de Hipertexto)

0. HTML: Introducción

Page 2: 001 html

Por convención, los archivos de formato HTML usan la extensión .htm o .html

1. HTML: Características básicas

•En los nombres de los archivos mejor no utilizar la ñ ni otros caracteres extendidos.•Tampoco podemos utilizar los acentos.•Ni los espacios entre palabras. Si queremos separar, emplearemos el guión bajo•Mejor emplearemos minúsculas y nombres cortos.(Lo que se ha dicho para los nombres de archivos es también conveniente para los nombres de las carpetas).

Page 3: 001 html

Estructura general de una línea de código en el lenguaje de etiquetas HTML

Las partes que componen los documentos HTML se denominan Elementos. Son la estructura básica del HTML y están formados por:

<ETIQUETA Atributos> Contenido <ETIQUETA>

1. HTML: Características básicas

Page 4: 001 html

1. HTML: Características básicas

•Anatomía de las Etiquetas

Más información sobre todos las etiquetas HTML: + etiquetas_html.pdf+ introduccion_xhtml.pdf (2.3. Etiquetas y atributos)

+ http://www.htmlquick.com/es/reference/tags.html

Page 5: 001 html

•Anatomía de las Etiquetas (X)HTML:

HTML define 91 etiquetas que los diseñadores pueden utilizar para marcar los diferentes elementos que componen una página:

a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button,caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form,frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd,label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p,param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody,td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var.

Page 6: 001 html

•Anatomía de las Etiquetas (X)HTML:

Los nombres de las etiquetas y atributos siempre se escriben en minúsculas:

Bien: <html>Mal: <HTML>

*Sintaxis de las etiquetas*Sintaxis de las etiquetas

Page 7: 001 html

•Anatomía de las Etiquetas: Apertura y cierre (Elemento)

Page 8: 001 html

Cuando se incluyen varios elementos, la primera etiqueta que se abre debe ser la última en cerrarse:

Bien: <p> <q> </q> </p>Mal: <p> <q> </p> </q>

*Sintaxis de las etiquetas

•Anatomía de las Etiquetas: varios Elementos

Page 9: 001 html

Todas las etiquetas deben cerrarse siempre:La mayoría de etiquetas HTML encierran un contenido de texto entre la etiqueta de apertura y la etiqueta de cierre. Sin embargo, algunas etiquetas especiales llamadas "etiquetas vacías" no necesitan encerrar ningún texto.

Correcto en XHTML: <br/>Incorrecto en XHTML: <br>

*Sintaxis de las etiquetas

•Anatomía de las Etiquetas: Etiqueta Vacía

Page 10: 001 html

1. HTML: Características básicas

•Anatomía de los Atributos

Más información sobre todos los Atributos+ introduccion_xhtml.pdf (2.3. Etiquetas y atributos)

Page 11: 001 html

•Anatomía de los Atributos :

Los atributos permiten personalizar las etiquetas HTML

No todos los atributos se pueden utilizar en todas las etiquetas. Por ello, cada etiqueta define su propia lista de atributos disponibles.

Cada atributo también indica el tipo de valor que se le puede asignar.

Algunos de los atributos son comunes a muchas o casi todas las etiquetas.

*Los atributos comunes se dividen en cuatro grupos según su funcionalidad: básicos, para internacionalización, de eventos, para los elementos que pueden obtener el foco.

Page 12: 001 html

•Anatomía de los Atributos :

La mayoría de los atributos de un elemento son pares nombre-valor, separados por un signo de igual "=" y escritos en la etiqueta de comienzo de un elemento, después del nombre de éste.

Page 13: 001 html

•Anatomía de los Atributos :

El valor de los atributos siempre se encierra con comillas:

Correcto en XHTML:<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a> </p>

*Sintaxis de las etiquetas

Page 14: 001 html

Los atributos siempre van dentro de la etiqueta de apertura.*Estas etiquetas pueden tener múltiples atributos.

•Anatomía de los Atributos :

Page 15: 001 html

Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo.

2. Estructura del documento HTML

Para ver esta película, debedisponer de QuickTime™ y de

un descompresor TIFF (sin comprimir).

Page 16: 001 html

<html><head>

La cabecera (head) incluye información sobre la propia página, como por ejemplo su título y su idioma.

Su contenido no es visible (con la única excepción del título de la página, que los navegadores muestran como título de sus ventanas).

</head>

2. Estructura del documento HTML

Page 17: 001 html

<body>

El cuerpo (body)

El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes.

Contiene todo lo que el usuario ve en su pantalla…

</body></html>

2. Estructura del documento HTML