SlideShare una empresa de Scribd logo
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.




                    Para ver esta pel cula, debe
                   disponer de QuickTimeª y de
             un descompresor TIFF (sin comprimir).
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

Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2Tomi Mirra
 
Desarrollo Pagina Web!!..
Desarrollo Pagina Web!!..Desarrollo Pagina Web!!..
Desarrollo Pagina Web!!..
dennisaguiriano
 
HTML
HTMLHTML
Lissette lainez
Lissette lainezLissette lainez
Lissette lainezlisseali
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainezlabebeally
 
Slideshare
SlideshareSlideshare
Slideshare
Guillo95
 
Apuntes de HTML 1
Apuntes de HTML 1Apuntes de HTML 1
Apuntes de HTML 1
Alejandro Sandin
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
josecabrera987
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 24000859
 
Diferencia entre html y xml
Diferencia  entre html y xmlDiferencia  entre html y xml
Diferencia entre html y xmlsolange_forever
 
LENGUAJE, HISTORIA Y ETIQUETAS HTML
LENGUAJE, HISTORIA Y ETIQUETAS HTMLLENGUAJE, HISTORIA Y ETIQUETAS HTML
LENGUAJE, HISTORIA Y ETIQUETAS HTMLjuanalejandroloaiza
 
Helen Valverde 2C3
Helen Valverde 2C3Helen Valverde 2C3
Helen Valverde 2C3
MickyBombillo Tg
 
Html
HtmlHtml
Html
yndiralu
 
Html
HtmlHtml

La actualidad más candente (19)

Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
 
Desarrollo Pagina Web!!..
Desarrollo Pagina Web!!..Desarrollo Pagina Web!!..
Desarrollo Pagina Web!!..
 
Deber de htmly xml
Deber de htmly xmlDeber de htmly xml
Deber de htmly xml
 
Historia de html
Historia de htmlHistoria de html
Historia de html
 
HTML
HTMLHTML
HTML
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
Slideshare
SlideshareSlideshare
Slideshare
 
Apuntes de HTML 1
Apuntes de HTML 1Apuntes de HTML 1
Apuntes de HTML 1
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
 
Diferencia entre html y xml
Diferencia  entre html y xmlDiferencia  entre html y xml
Diferencia entre html y xml
 
LENGUAJE, HISTORIA Y ETIQUETAS HTML
LENGUAJE, HISTORIA Y ETIQUETAS HTMLLENGUAJE, HISTORIA Y ETIQUETAS HTML
LENGUAJE, HISTORIA Y ETIQUETAS HTML
 
Julexi
JulexiJulexi
Julexi
 
Helen Valverde 2C3
Helen Valverde 2C3Helen Valverde 2C3
Helen Valverde 2C3
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Deber d programacion 1
Deber d programacion 1Deber d programacion 1
Deber d programacion 1
 
Html ... aloa
Html ... aloaHtml ... aloa
Html ... aloa
 

Destacado

006: html tablas
006: html tablas006: html tablas
006: html tablas
Aplicaciones Gráficas
 
004 html: listas
004 html: listas004 html: listas
004 html: listas
Aplicaciones Gráficas
 
002 html: etiquetas de texto
002 html: etiquetas de texto002 html: etiquetas de texto
002 html: etiquetas de texto
Aplicaciones Gráficas
 
t2_e2_madaula-marti
t2_e2_madaula-martit2_e2_madaula-marti
t2_e2_madaula-marti
Martí Madaula Esquirol
 
Taula de formats
Taula de formatsTaula de formats
Taula de formats
ruedacabello
 
t2_ 32_ roig-oscar.pdf
t2_ 32_ roig-oscar.pdft2_ 32_ roig-oscar.pdf
t2_ 32_ roig-oscar.pdf
Oscar Roig Gorina
 
t2_e2_mármol-clara
t2_e2_mármol-clarat2_e2_mármol-clara
t2_e2_mármol-clara
Clara Mármol Lara
 
T2 e2 de_elías-cristina
T2 e2 de_elías-cristinaT2 e2 de_elías-cristina
T2 e2 de_elías-cristina
Cristina de Elías
 
Taula d'arxius
Taula d'arxiusTaula d'arxius
Taula d'arxius
Miranda P
 
teoria2_exercici2_roman-julia.
teoria2_exercici2_roman-julia.teoria2_exercici2_roman-julia.
teoria2_exercici2_roman-julia.
julia roman marquez
 
Taula d'arxius
Taula d'arxiusTaula d'arxius
Taula d'arxius
Cristina Camps
 
Taula d'arxius
Taula d'arxiusTaula d'arxius
Taula d'arxius
Pere Albacar
 
T2 e2 cano_laura
T2 e2 cano_lauraT2 e2 cano_laura
T2 e2 cano_laura
Laura C.
 
T2 e2 armengol-anna
T2 e2 armengol-annaT2 e2 armengol-anna
T2 e2 armengol-anna
Anna Armengol
 
Eduard Mayor, Tabla de valores
Eduard Mayor, Tabla de valores Eduard Mayor, Tabla de valores
Eduard Mayor, Tabla de valores
edu mayor
 

Destacado (16)

006: html tablas
006: html tablas006: html tablas
006: html tablas
 
004 html: listas
004 html: listas004 html: listas
004 html: listas
 
002 html: etiquetas de texto
002 html: etiquetas de texto002 html: etiquetas de texto
002 html: etiquetas de texto
 
t2_e2_madaula-marti
t2_e2_madaula-martit2_e2_madaula-marti
t2_e2_madaula-marti
 
Taula de formats
Taula de formatsTaula de formats
Taula de formats
 
t2_ 32_ roig-oscar.pdf
t2_ 32_ roig-oscar.pdft2_ 32_ roig-oscar.pdf
t2_ 32_ roig-oscar.pdf
 
t2_e2_mármol-clara
t2_e2_mármol-clarat2_e2_mármol-clara
t2_e2_mármol-clara
 
T2 e2 de_elías-cristina
T2 e2 de_elías-cristinaT2 e2 de_elías-cristina
T2 e2 de_elías-cristina
 
Taula d'arxius
Taula d'arxiusTaula d'arxius
Taula d'arxius
 
exercici 2
exercici 2 exercici 2
exercici 2
 
teoria2_exercici2_roman-julia.
teoria2_exercici2_roman-julia.teoria2_exercici2_roman-julia.
teoria2_exercici2_roman-julia.
 
Taula d'arxius
Taula d'arxiusTaula d'arxius
Taula d'arxius
 
Taula d'arxius
Taula d'arxiusTaula d'arxius
Taula d'arxius
 
T2 e2 cano_laura
T2 e2 cano_lauraT2 e2 cano_laura
T2 e2 cano_laura
 
T2 e2 armengol-anna
T2 e2 armengol-annaT2 e2 armengol-anna
T2 e2 armengol-anna
 
Eduard Mayor, Tabla de valores
Eduard Mayor, Tabla de valores Eduard Mayor, Tabla de valores
Eduard Mayor, Tabla de valores
 

Similar a 001 html

001 Html
001 Html001 Html
001 Html
T T
 
Introducción al HTML
Introducción al HTML Introducción al HTML
Introducción al HTML
Duglas Oswaldo Moreno Mendoza
 
Clase HTML.pptx
Clase HTML.pptxClase HTML.pptx
Clase HTML.pptx
HugoDavidGonzalezCab
 
Html tarea
Html tareaHtml tarea
Html tarea
saullopes24
 
Rafael hernández saldierna
Rafael hernández saldiernaRafael hernández saldierna
Rafael hernández saldiernaRafael Hernandez
 
Html y xml
Html y xmlHtml y xml
Clase 04 Html
Clase 04   HtmlClase 04   Html
Clase 04 Html
Jaime Valenzuela
 
Presentacion sobre html
Presentacion sobre htmlPresentacion sobre html
Presentacion sobre html
jessica208
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerrael bergon y diego
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barretoMariana Barreto
 
Html presentacion
Html presentacionHtml presentacion
Html presentacion
567magii
 

Similar a 001 html (20)

001 Html
001 Html001 Html
001 Html
 
Html
HtmlHtml
Html
 
Html y xml
Html y xmlHtml y xml
Html y xml
 
Introducción al HTML
Introducción al HTML Introducción al HTML
Introducción al HTML
 
Diseño
DiseñoDiseño
Diseño
 
Clase HTML.pptx
Clase HTML.pptxClase HTML.pptx
Clase HTML.pptx
 
Html
HtmlHtml
Html
 
Html tarea
Html tareaHtml tarea
Html tarea
 
HTML y CSS
HTML y CSSHTML y CSS
HTML y CSS
 
Rafael hernández saldierna
Rafael hernández saldiernaRafael hernández saldierna
Rafael hernández saldierna
 
Html y xml
Html y xmlHtml y xml
Html y xml
 
Clase 04 Html
Clase 04   HtmlClase 04   Html
Clase 04 Html
 
Html
HtmlHtml
Html
 
El código html
El código htmlEl código html
El código html
 
Presentacion sobre html
Presentacion sobre htmlPresentacion sobre html
Presentacion sobre html
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barreto
 
Html presentacion
Html presentacionHtml presentacion
Html presentacion
 
Tema2(1)
Tema2(1)Tema2(1)
Tema2(1)
 
Tema2(1)
Tema2(1)Tema2(1)
Tema2(1)
 

Más de Aplicaciones Gráficas

Laboratorio de Aplicaciones Gráficas
Laboratorio de Aplicaciones GráficasLaboratorio de Aplicaciones Gráficas
Laboratorio de Aplicaciones Gráficas
Aplicaciones Gráficas
 
2. Introducción a las Hojas de estilo (CSS)
2. Introducción a las Hojas de estilo (CSS)2. Introducción a las Hojas de estilo (CSS)
2. Introducción a las Hojas de estilo (CSS)
Aplicaciones Gráficas
 
1. Introducción a las Hojas de estilo (CSS)
1. Introducción a las Hojas de estilo (CSS)1. Introducción a las Hojas de estilo (CSS)
1. Introducción a las Hojas de estilo (CSS)
Aplicaciones Gráficas
 
005 html: imágenes
005 html: imágenes005 html: imágenes
005 html: imágenes
Aplicaciones Gráficas
 
Creación y tratamiento de imágenes digitales: tamaño de la imagen
Creación y tratamiento de imágenes digitales: tamaño de la imagenCreación y tratamiento de imágenes digitales: tamaño de la imagen
Creación y tratamiento de imágenes digitales: tamaño de la imagen
Aplicaciones Gráficas
 
Creación y tratamiento de imágenes digitales: resolución
Creación y tratamiento de imágenes digitales: resoluciónCreación y tratamiento de imágenes digitales: resolución
Creación y tratamiento de imágenes digitales: resolución
Aplicaciones Gráficas
 
Creación y tratamiento de imágenes digitales: color digital
Creación y tratamiento de imágenes digitales: color digitalCreación y tratamiento de imágenes digitales: color digital
Creación y tratamiento de imágenes digitales: color digital
Aplicaciones Gráficas
 
Creación y tratamiento de imágenes digitales: definición y tipos de imágenes
Creación y tratamiento de imágenes digitales: definición y tipos de imágenesCreación y tratamiento de imágenes digitales: definición y tipos de imágenes
Creación y tratamiento de imágenes digitales: definición y tipos de imágenes
Aplicaciones Gráficas
 
Creación y tratamiento de imágenes digitales: ficheros bitmap
Creación y tratamiento de imágenes digitales: ficheros bitmapCreación y tratamiento de imágenes digitales: ficheros bitmap
Creación y tratamiento de imágenes digitales: ficheros bitmap
Aplicaciones Gráficas
 
02. Introducción a la Informática: ficheros
02. Introducción a la Informática: ficheros02. Introducción a la Informática: ficheros
02. Introducción a la Informática: ficheros
Aplicaciones Gráficas
 
Evolución Aplicaciones/Gráficos ordenador
Evolución Aplicaciones/Gráficos ordenadorEvolución Aplicaciones/Gráficos ordenador
Evolución Aplicaciones/Gráficos ordenador
Aplicaciones Gráficas
 
Programas de aplicación
Programas de aplicaciónProgramas de aplicación
Programas de aplicación
Aplicaciones Gráficas
 
Interfaz gráfica de usuario (GUI)
Interfaz gráfica de usuario (GUI)Interfaz gráfica de usuario (GUI)
Interfaz gráfica de usuario (GUI)
Aplicaciones Gráficas
 
01. Introducción a la Informática
01. Introducción a la Informática01. Introducción a la Informática
01. Introducción a la Informática
Aplicaciones Gráficas
 

Más de Aplicaciones Gráficas (16)

Laboratorio de Aplicaciones Gráficas
Laboratorio de Aplicaciones GráficasLaboratorio de Aplicaciones Gráficas
Laboratorio de Aplicaciones Gráficas
 
2. Introducción a las Hojas de estilo (CSS)
2. Introducción a las Hojas de estilo (CSS)2. Introducción a las Hojas de estilo (CSS)
2. Introducción a las Hojas de estilo (CSS)
 
1. Introducción a las Hojas de estilo (CSS)
1. Introducción a las Hojas de estilo (CSS)1. Introducción a las Hojas de estilo (CSS)
1. Introducción a las Hojas de estilo (CSS)
 
005 html: imágenes
005 html: imágenes005 html: imágenes
005 html: imágenes
 
Photoshop
PhotoshopPhotoshop
Photoshop
 
Creación y tratamiento de imágenes digitales: tamaño de la imagen
Creación y tratamiento de imágenes digitales: tamaño de la imagenCreación y tratamiento de imágenes digitales: tamaño de la imagen
Creación y tratamiento de imágenes digitales: tamaño de la imagen
 
Creación y tratamiento de imágenes digitales: resolución
Creación y tratamiento de imágenes digitales: resoluciónCreación y tratamiento de imágenes digitales: resolución
Creación y tratamiento de imágenes digitales: resolución
 
Creación y tratamiento de imágenes digitales: color digital
Creación y tratamiento de imágenes digitales: color digitalCreación y tratamiento de imágenes digitales: color digital
Creación y tratamiento de imágenes digitales: color digital
 
Creación y tratamiento de imágenes digitales: definición y tipos de imágenes
Creación y tratamiento de imágenes digitales: definición y tipos de imágenesCreación y tratamiento de imágenes digitales: definición y tipos de imágenes
Creación y tratamiento de imágenes digitales: definición y tipos de imágenes
 
00 taula formats
00 taula formats00 taula formats
00 taula formats
 
Creación y tratamiento de imágenes digitales: ficheros bitmap
Creación y tratamiento de imágenes digitales: ficheros bitmapCreación y tratamiento de imágenes digitales: ficheros bitmap
Creación y tratamiento de imágenes digitales: ficheros bitmap
 
02. Introducción a la Informática: ficheros
02. Introducción a la Informática: ficheros02. Introducción a la Informática: ficheros
02. Introducción a la Informática: ficheros
 
Evolución Aplicaciones/Gráficos ordenador
Evolución Aplicaciones/Gráficos ordenadorEvolución Aplicaciones/Gráficos ordenador
Evolución Aplicaciones/Gráficos ordenador
 
Programas de aplicación
Programas de aplicaciónProgramas de aplicación
Programas de aplicación
 
Interfaz gráfica de usuario (GUI)
Interfaz gráfica de usuario (GUI)Interfaz gráfica de usuario (GUI)
Interfaz gráfica de usuario (GUI)
 
01. Introducción a la Informática
01. Introducción a la Informática01. Introducción a la Informática
01. Introducción a la Informática
 

Último

DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
62946377
 
Introduccion-a-la-vida-de-Johannes-Kepler.pptx
Introduccion-a-la-vida-de-Johannes-Kepler.pptxIntroduccion-a-la-vida-de-Johannes-Kepler.pptx
Introduccion-a-la-vida-de-Johannes-Kepler.pptx
albujarluisl
 
Museo de Arte Contemporáneo del Siglo XXI - HISTORIA DE LA ARQUITECTURA .pdf
Museo de Arte Contemporáneo del Siglo XXI - HISTORIA DE LA ARQUITECTURA .pdfMuseo de Arte Contemporáneo del Siglo XXI - HISTORIA DE LA ARQUITECTURA .pdf
Museo de Arte Contemporáneo del Siglo XXI - HISTORIA DE LA ARQUITECTURA .pdf
MarianaVillenaAyala
 
DIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en lineaDIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en linea
EduarRamos7
 
Lectura. Reseña ilustrada, novela Albert Camus
Lectura.  Reseña ilustrada, novela Albert CamusLectura.  Reseña ilustrada, novela Albert Camus
Lectura. Reseña ilustrada, novela Albert Camus
RenataGrecia
 
1x10.documento bueno para comunidades jefas y jefes de comunidades q les soli...
1x10.documento bueno para comunidades jefas y jefes de comunidades q les soli...1x10.documento bueno para comunidades jefas y jefes de comunidades q les soli...
1x10.documento bueno para comunidades jefas y jefes de comunidades q les soli...
Sarai747172
 
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptxVERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
ingridavila20
 
Porfolio de diseños de Comedores de Carlotta Design
Porfolio  de diseños de Comedores de Carlotta DesignPorfolio  de diseños de Comedores de Carlotta Design
Porfolio de diseños de Comedores de Carlotta Design
paulacoux1
 
informecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docxinformecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docx
IsabellaCortes7
 
Teoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintoresTeoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintores
EduardoGM8
 
Movimiento Moderno en Venezuela Arquitectura
Movimiento Moderno en Venezuela ArquitecturaMovimiento Moderno en Venezuela Arquitectura
Movimiento Moderno en Venezuela Arquitectura
LeonardoDantasRivas
 
capitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdfcapitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdf
ProfesorCiencias2
 
etiqueta que se utiliza en un restaurante .pdf
etiqueta que se utiliza en  un restaurante  .pdfetiqueta que se utiliza en  un restaurante  .pdf
etiqueta que se utiliza en un restaurante .pdf
Vhope6
 
Propuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseñoPropuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseño
Mariano Salgado
 
Patrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en CancunPatrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en Cancun
DianaArtemizaCP
 
MAPAS MIXTOS DE LA EVOLUCIÓN DEL COMPUTADOR Y EL DISEÑO GRÁFICO
MAPAS MIXTOS DE LA EVOLUCIÓN DEL COMPUTADOR Y EL DISEÑO GRÁFICOMAPAS MIXTOS DE LA EVOLUCIÓN DEL COMPUTADOR Y EL DISEÑO GRÁFICO
MAPAS MIXTOS DE LA EVOLUCIÓN DEL COMPUTADOR Y EL DISEÑO GRÁFICO
MarianellaMalaveCazo
 
Desarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdfDesarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdf
marianamadronero578
 
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdfEstilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
JosueJuanez1
 
Porfolio livings creados por Carlotta Design
Porfolio livings creados por Carlotta DesignPorfolio livings creados por Carlotta Design
Porfolio livings creados por Carlotta Design
paulacoux1
 
La Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por KarinaLa Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por Karina
KarinaRodriguezG2
 

Último (20)

DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
DIA DE LA BANDERA PERUANA EL 7 DE JUNIO DE 1820
 
Introduccion-a-la-vida-de-Johannes-Kepler.pptx
Introduccion-a-la-vida-de-Johannes-Kepler.pptxIntroduccion-a-la-vida-de-Johannes-Kepler.pptx
Introduccion-a-la-vida-de-Johannes-Kepler.pptx
 
Museo de Arte Contemporáneo del Siglo XXI - HISTORIA DE LA ARQUITECTURA .pdf
Museo de Arte Contemporáneo del Siglo XXI - HISTORIA DE LA ARQUITECTURA .pdfMuseo de Arte Contemporáneo del Siglo XXI - HISTORIA DE LA ARQUITECTURA .pdf
Museo de Arte Contemporáneo del Siglo XXI - HISTORIA DE LA ARQUITECTURA .pdf
 
DIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en lineaDIAGRAMA DE FLUJO.pptx : Ventas en linea
DIAGRAMA DE FLUJO.pptx : Ventas en linea
 
Lectura. Reseña ilustrada, novela Albert Camus
Lectura.  Reseña ilustrada, novela Albert CamusLectura.  Reseña ilustrada, novela Albert Camus
Lectura. Reseña ilustrada, novela Albert Camus
 
1x10.documento bueno para comunidades jefas y jefes de comunidades q les soli...
1x10.documento bueno para comunidades jefas y jefes de comunidades q les soli...1x10.documento bueno para comunidades jefas y jefes de comunidades q les soli...
1x10.documento bueno para comunidades jefas y jefes de comunidades q les soli...
 
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptxVERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
VERTEDEROS CRESTA ANCHA- PRESENTACION FINAL CON PREGUNTAS.pptx
 
Porfolio de diseños de Comedores de Carlotta Design
Porfolio  de diseños de Comedores de Carlotta DesignPorfolio  de diseños de Comedores de Carlotta Design
Porfolio de diseños de Comedores de Carlotta Design
 
informecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docxinformecbdlp-240603151721-44655eeh2.docx
informecbdlp-240603151721-44655eeh2.docx
 
Teoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintoresTeoría del Color para diseñadores y pintores
Teoría del Color para diseñadores y pintores
 
Movimiento Moderno en Venezuela Arquitectura
Movimiento Moderno en Venezuela ArquitecturaMovimiento Moderno en Venezuela Arquitectura
Movimiento Moderno en Venezuela Arquitectura
 
capitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdfcapitulo-18-sistema--706807-downloadable-2573126.pdf
capitulo-18-sistema--706807-downloadable-2573126.pdf
 
etiqueta que se utiliza en un restaurante .pdf
etiqueta que se utiliza en  un restaurante  .pdfetiqueta que se utiliza en  un restaurante  .pdf
etiqueta que se utiliza en un restaurante .pdf
 
Propuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseñoPropuesta de diseño de marca para Fred, muebles de diseño
Propuesta de diseño de marca para Fred, muebles de diseño
 
Patrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en CancunPatrimundi Recuperadora Bancaria en Cancun
Patrimundi Recuperadora Bancaria en Cancun
 
MAPAS MIXTOS DE LA EVOLUCIÓN DEL COMPUTADOR Y EL DISEÑO GRÁFICO
MAPAS MIXTOS DE LA EVOLUCIÓN DEL COMPUTADOR Y EL DISEÑO GRÁFICOMAPAS MIXTOS DE LA EVOLUCIÓN DEL COMPUTADOR Y EL DISEÑO GRÁFICO
MAPAS MIXTOS DE LA EVOLUCIÓN DEL COMPUTADOR Y EL DISEÑO GRÁFICO
 
Desarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdfDesarrollo de habilidades de pensamiento (1).pdf
Desarrollo de habilidades de pensamiento (1).pdf
 
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdfEstilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
 
Porfolio livings creados por Carlotta Design
Porfolio livings creados por Carlotta DesignPorfolio livings creados por Carlotta Design
Porfolio livings creados por Carlotta Design
 
La Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por KarinaLa Arquitectura del Eclecticismo, por Karina
La Arquitectura del Eclecticismo, por Karina
 

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. Para ver esta pel cula, debe disponer de QuickTimeª y de un descompresor TIFF (sin comprimir).
  • 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>