SlideShare una empresa de Scribd logo
1 de 17
Descargar para leer sin conexión
0. HTML: Introducción




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


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".
1. HTML: Características básicas

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




•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).
1. HTML: Características básicas



  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>

         Estructura general de una línea de código en el lenguaje de etiquetas 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
•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.
•Anatomía de las Etiquetas (X)HTML:




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


 Bien: <html>
 Mal: <HTML>
•Anatomía de las Etiquetas: Apertura y cierre (Elemento)
•Anatomía de las Etiquetas: varios Elementos




*Sintaxis de las etiquetas
 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>
•Anatomía de las Etiquetas: Etiqueta Vacía




*Sintaxis de las etiquetas
 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>
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)
•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.
•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.
•Anatomía de los Atributos :




*Sintaxis de las etiquetas
 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>
•Anatomía de los Atributos :




 Los atributos siempre van dentro de la etiqueta de
 apertura.
 *Estas etiquetas pueden tener múltiples atributos.
2. Estructura del documento HTML

Las páginas HTML se dividen en dos partes:
la cabecera y el cuerpo.
2. Estructura del documento 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



<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>

Más contenido relacionado

La actualidad más candente (20)

Xml dtd
Xml dtd Xml dtd
Xml dtd
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Jeremmy velizaguirre2a3(html xml)
Jeremmy velizaguirre2a3(html xml)Jeremmy velizaguirre2a3(html xml)
Jeremmy velizaguirre2a3(html xml)
 
Apuntes de DTD
Apuntes de DTDApuntes de DTD
Apuntes de DTD
 
Lenguaje XML
Lenguaje XMLLenguaje XML
Lenguaje XML
 
XML Básico
XML BásicoXML Básico
XML Básico
 
Presentacion xml
Presentacion xmlPresentacion xml
Presentacion xml
 
Curso html
Curso   htmlCurso   html
Curso html
 
Curso FPE Diseño Web. Módulo 2. El HTML
Curso FPE Diseño Web. Módulo 2. El HTMLCurso FPE Diseño Web. Módulo 2. El HTML
Curso FPE Diseño Web. Módulo 2. El HTML
 
Estructurabasica
EstructurabasicaEstructurabasica
Estructurabasica
 
Html
HtmlHtml
Html
 
HTML HyperText Markup Language
HTML HyperText Markup LanguageHTML HyperText Markup Language
HTML HyperText Markup Language
 
Introducción al HTML
Introducción al HTMLIntroducción al HTML
Introducción al HTML
 
Xml
XmlXml
Xml
 
Apuntes de HTML
Apuntes de HTMLApuntes de HTML
Apuntes de HTML
 
danny
dannydanny
danny
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
infografíaxml
infografíaxmlinfografíaxml
infografíaxml
 
Html axel martinez, julio casasola
Html axel martinez, julio casasolaHtml axel martinez, julio casasola
Html axel martinez, julio casasola
 

Destacado

T1 e1 schmitz-erik
T1 e1 schmitz-erikT1 e1 schmitz-erik
T1 e1 schmitz-erikom0l
 
Ian_Delacruz_Bloc1_Exercici_1
Ian_Delacruz_Bloc1_Exercici_1Ian_Delacruz_Bloc1_Exercici_1
Ian_Delacruz_Bloc1_Exercici_1Ian Delacruz
 
006html Tablas
006html Tablas006html Tablas
006html TablasT T
 
004html Listas
004html Listas004html Listas
004html ListasT T
 
Photoshop - Arnal Ballester
Photoshop - Arnal BallesterPhotoshop - Arnal Ballester
Photoshop - Arnal Ballesterbeneaththemoon
 
T1 palomo sara
T1 palomo saraT1 palomo sara
T1 palomo sarassaraP
 
T1_e1_botaya_beatriz
T1_e1_botaya_beatrizT1_e1_botaya_beatriz
T1_e1_botaya_beatrizbebofi
 
Xavi_Suarez_Bloc1_Exercici1
Xavi_Suarez_Bloc1_Exercici1Xavi_Suarez_Bloc1_Exercici1
Xavi_Suarez_Bloc1_Exercici1xavi_sur
 
003html Enlaces
003html Enlaces003html Enlaces
003html EnlacesT T
 
T1 e1 llauradó-maria
T1 e1 llauradó-mariaT1 e1 llauradó-maria
T1 e1 llauradó-mariaConsent65
 
t1_e1_aznares-marta
t1_e1_aznares-martat1_e1_aznares-marta
t1_e1_aznares-martamarato09
 
005html Imagenes
005html Imagenes005html Imagenes
005html ImagenesT T
 
002html Texto
002html Texto002html Texto
002html TextoT T
 
T1 e1 murillo-noelia
T1 e1 murillo-noeliaT1 e1 murillo-noelia
T1 e1 murillo-noeliaNoe Murillo
 

Destacado (20)

T1 e1 pérez-laura
T1 e1 pérez-lauraT1 e1 pérez-laura
T1 e1 pérez-laura
 
T1 e1 schmitz-erik
T1 e1 schmitz-erikT1 e1 schmitz-erik
T1 e1 schmitz-erik
 
Ian_Delacruz_Bloc1_Exercici_1
Ian_Delacruz_Bloc1_Exercici_1Ian_Delacruz_Bloc1_Exercici_1
Ian_Delacruz_Bloc1_Exercici_1
 
006html Tablas
006html Tablas006html Tablas
006html Tablas
 
004html Listas
004html Listas004html Listas
004html Listas
 
Photoshop - Arnal Ballester
Photoshop - Arnal BallesterPhotoshop - Arnal Ballester
Photoshop - Arnal Ballester
 
T1 palomo sara
T1 palomo saraT1 palomo sara
T1 palomo sara
 
T1_e1_botaya_beatriz
T1_e1_botaya_beatrizT1_e1_botaya_beatriz
T1_e1_botaya_beatriz
 
Xavi_Suarez_Bloc1_Exercici1
Xavi_Suarez_Bloc1_Exercici1Xavi_Suarez_Bloc1_Exercici1
Xavi_Suarez_Bloc1_Exercici1
 
ej1lag
ej1lagej1lag
ej1lag
 
003html Enlaces
003html Enlaces003html Enlaces
003html Enlaces
 
Photoshop
PhotoshopPhotoshop
Photoshop
 
T1 e1 llauradó-maria
T1 e1 llauradó-mariaT1 e1 llauradó-maria
T1 e1 llauradó-maria
 
AdobeIllustrator_Clàudia_Castelló
AdobeIllustrator_Clàudia_CastellóAdobeIllustrator_Clàudia_Castelló
AdobeIllustrator_Clàudia_Castelló
 
t1_e1_aznares-marta
t1_e1_aznares-martat1_e1_aznares-marta
t1_e1_aznares-marta
 
005html Imagenes
005html Imagenes005html Imagenes
005html Imagenes
 
002html Texto
002html Texto002html Texto
002html Texto
 
T1 e1 murillo-noelia
T1 e1 murillo-noeliaT1 e1 murillo-noelia
T1 e1 murillo-noelia
 
T2 e2 insenser-regina
T2 e2 insenser-reginaT2 e2 insenser-regina
T2 e2 insenser-regina
 
T1 e1 insenser-regina
T1 e1 insenser-reginaT1 e1 insenser-regina
T1 e1 insenser-regina
 

Similar a 001 Html (20)

001 html
001 html001 html
001 html
 
Introducción al HTML
Introducción al HTML Introducción al HTML
Introducción al HTML
 
Deber de htmly xml
Deber de htmly xmlDeber de htmly xml
Deber de htmly xml
 
Html
HtmlHtml
Html
 
Html y xml
Html y xmlHtml y xml
Html y xml
 
XHTML+Inicio en CSS
XHTML+Inicio en CSSXHTML+Inicio en CSS
XHTML+Inicio en CSS
 
Diseño
DiseñoDiseño
Diseño
 
HTML y CSS
HTML y CSSHTML y CSS
HTML y CSS
 
Html y xml
Html y xmlHtml y xml
Html y xml
 
Clase HTML.pptx
Clase HTML.pptxClase HTML.pptx
Clase HTML.pptx
 
Emily
EmilyEmily
Emily
 
Html
HtmlHtml
Html
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
Deber d programacion 1
Deber d programacion 1Deber d programacion 1
Deber d programacion 1
 
Unidad1AppsMoviles.pptx
Unidad1AppsMoviles.pptxUnidad1AppsMoviles.pptx
Unidad1AppsMoviles.pptx
 
Html - Tema 1
Html - Tema 1Html - Tema 1
Html - Tema 1
 
Html tarea
Html tareaHtml tarea
Html tarea
 
¿Qué es HTML5?
¿Qué es HTML5?¿Qué es HTML5?
¿Qué es HTML5?
 
Grupo2
Grupo2Grupo2
Grupo2
 

001 Html

  • 1. 0. HTML: Introducción ¿Qué es el HTML? HyperText Markup Language (Lenguaje de Marcas de Hipertexto) 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".
  • 2. 1. HTML: Características básicas Por convención, los archivos de formato HTML usan la extensión .htm o .html •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).
  • 3. 1. HTML: Características básicas 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> Estructura general de una línea de código en el lenguaje de etiquetas HTML
  • 4. 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
  • 5. •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.
  • 6. •Anatomía de las Etiquetas (X)HTML: *Sintaxis de las etiquetas Los nombres de las etiquetas y atributos siempre se escriben en minúsculas: Bien: <html> Mal: <HTML>
  • 7. •Anatomía de las Etiquetas: Apertura y cierre (Elemento)
  • 8. •Anatomía de las Etiquetas: varios Elementos *Sintaxis de las etiquetas 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>
  • 9. •Anatomía de las Etiquetas: Etiqueta Vacía *Sintaxis de las etiquetas 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>
  • 10. 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)
  • 11. •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.
  • 12. •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.
  • 13. •Anatomía de los Atributos : *Sintaxis de las etiquetas 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>
  • 14. •Anatomía de los Atributos : Los atributos siempre van dentro de la etiqueta de apertura. *Estas etiquetas pueden tener múltiples atributos.
  • 15. 2. Estructura del documento HTML Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo.
  • 16. 2. Estructura del documento 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>
  • 17. 2. Estructura del documento 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>