SlideShare una empresa de Scribd logo
qwertyuiopasdfghjklzxcvbnmq 
wertyuiopasdfghjklzxcvbnmqw 
ertyuiopasdfghjklzxcvbnmqwer 
tyuiopasdfghjklzxcvbnmqwerty 
P3.diseño de página web 
uiopasdfghjklzxcvbnmqwertyui 
Mariela Uribe y Humberto vargas 
opasdfghjklzxcvbnmqwertyuiop 
27/08/2014 
COLEGIO GRECIA 
asdfghjklzxcvbnmqwertyuiopas 
dfghjklzxcvbnmqwertyuiopasdf 
ghjklzxcvbnmqwertyuiopasdfgh 
jklzxcvbnmqwertyuiopasdfghjkl 
zxcvbnmqwertyuiopasdfghjklzx 
cvbnmqwertyuiopasdfghjklzxcv 
bnmqwertyuiopasdfghjklzxcvbn 
mqwertyuiopasdfghjklzxcvbnm 
qwertyuiopasdfghjklzxcvbnmq 
wertyuiopasdfghjklzxcvbnmqw 
ertyuiopasdfghjklzxcvbnmrtyui 
opasdfghjklzxcvbnmqwertyuiop
Introducción 
En este producto hablaremos sobre el diseño de un página 
web y ciertas cosas que se deben saber y son necesarias 
para la creación de un página web, también hablaremos 
sobre las etiquetas HTML y el lenguaje que se utilizan para 
las páginas web.
P3. Diseño de página web 
¿Qué es y para qué sirve HTML? 
HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. 
Está compuesto por una serie de etiquetas que el navegador interpreta y da 
forma en la pantalla. HTML dispone de etiquetas para imágenes, hipervínculos 
que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc. 
¿Cuál es la estructura básica de una página web? 
Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. 
Todo lo que esté en medio será la página web. Dentro de <html></html> se 
encuentran 2 partes diferenciadas. 
La primera <head></head> es la cabecera de la página. Aquí irán cierta 
información que no es directamente el contenido de la página. Aquí se pone el 
título de la página, los metadatos, estilos, código javascript (todo esto se 
estudiará en capítulos venideros). La primera que se suele estudiar es 
<title></title>, que indica el título de la página (lo que el navegador pone en la 
parte superior izquierda). 
La segunda parte es <body></body>. Aquí va propiamente el contenido de la 
página: fotos, párrafos, formularios, etc. 
¿Qué es una etiqueta de HTML? 
El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de 
texto destacado de una forma especial que permiten la definición de las 
distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como 
las distintas estructuras del lenguaje. A estas marcas las denominaremos 
etiquetas y serán la base principal del lenguaje HTML. En documento HTML será 
un fichero texto con etiquetas que variarán la forma de su presentación.
¿Qué es un atributo de HTML? 
Cualquier etiqueta XHTML puede contener uno o más atributos, separados por 
espacios, que permiten especificar la etiqueta. El código fuente tiene el 
siguiente aspecto: 
En el XHTML los atributos tienen que estar siempre definidos (mediante el signo 
igual "=") y el valor del atributo tiene que estar entre comillas dobles o simples. 
Existen una serie de atributos comunes a todas las etiquetas (salvo la etiqeta 
<html>) y algunas etiquetas tienen unos atributos específicos. En esta lección se 
comentan los atributos comunes; los atributos específicos se comentan en las 
lecciones dedicadas a las etiquetas correspondientes (imágenes, tablas, etc) 
¿Cuáles son las etiquetas básicas para formar una página 
web? 
* <HTML>: indica el comienzo del documento HTML. 
* <HEAD>: indica que empieza la cabecera de la página. En ella se suele poner 
el título (<title> de la web, una descripción y otras informaciones relacionadas 
con el contenido de la página. 
* <BODY>: es el cuerpo de la página, donde va lo que se ve en el navegador al 
cargar una web. En el body van los textos, las imágenes y todos los contenidos 
de la web. 
* <H1>, <H2>, etc.: son los títulos o encabezados. Se utilizan para establecer 
determinados textos de la página como titulares, suelen tener un tamaño de 
fuente mayor para diferenciarlos del resto del texto. Son importantes en el 
posicionamiento en buscadores. 
* <A>: define los enlaces.
* <TABLE>: es una tabla, y dentro de esta tenemos filas <TR> y celdas <TD>. 
* <P>: el texto dentro de esta etiqueta forma un párrafo. 
* <IMG>: imágenes. 
* <BR>: salto de línea. 
* <UL>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el 
uso de <LI> definimos cada guión dentro de la lista, y usando <OL> en lugar de 
<UL> tendremos listas ordenadas. 
* <B> y <STRONG>: se utilizan para resaltar el texto. 
* <U>: texto subrayado. 
* <I>: texto en cursiva

Más contenido relacionado

La actualidad más candente

Etiquetas head y body
Etiquetas head y bodyEtiquetas head y body
Etiquetas head y body
Sebastian De Los Angeles
 
Gili
GiliGili
HTML
HTMLHTML
Portafolio de Programación
Portafolio de ProgramaciónPortafolio de Programación
Portafolio de Programación
evealc9
 
DBER N° 2 blog blogger blogspot
DBER N° 2 blog blogger blogspotDBER N° 2 blog blogger blogspot
DBER N° 2 blog blogger blogspot
JIMENAESPANA
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
pablo3022
 
Curso Html Basico
Curso Html BasicoCurso Html Basico
Curso Html Basico
Facundo Oliva
 
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
Harold Maduro
 
Qué es html
Qué es htmlQué es html
Qué es html
edujoso
 
Qué Son Las Css
Qué Son Las CssQué Son Las Css
Qué Son Las Css
Maximiliano Martin
 
Introducción a HTML
Introducción a HTMLIntroducción a HTML
Introducción a HTML
David_1985
 
Hojas de Estilos en Cascada (CSS) - Apuntes
Hojas de Estilos en Cascada (CSS) - ApuntesHojas de Estilos en Cascada (CSS) - Apuntes
Hojas de Estilos en Cascada (CSS) - Apuntes
Fernando Irigaray
 
Codigos HTML Lenguaje IV
Codigos HTML Lenguaje IVCodigos HTML Lenguaje IV
Codigos HTML Lenguaje IV
guestc906c2
 
Etiquetas Diapositivas.
Etiquetas Diapositivas.Etiquetas Diapositivas.
Etiquetas Diapositivas.
asdi
 
Inicio al HTML
Inicio al HTMLInicio al HTML
Inicio al HTML
JuanMa Ruiz
 
Presentación2 wwwwwwwwwwwwww
Presentación2 wwwwwwwwwwwwwwPresentación2 wwwwwwwwwwwwww
Presentación2 wwwwwwwwwwwwww
Isaac Felipe Beltran Lopez
 
Present: I WEB DINAMICAS
Present: I WEB  DINAMICASPresent: I WEB  DINAMICAS
Present: I WEB DINAMICAS
Enrique Gutiérrez
 

La actualidad más candente (17)

Etiquetas head y body
Etiquetas head y bodyEtiquetas head y body
Etiquetas head y body
 
Gili
GiliGili
Gili
 
HTML
HTMLHTML
HTML
 
Portafolio de Programación
Portafolio de ProgramaciónPortafolio de Programación
Portafolio de Programación
 
DBER N° 2 blog blogger blogspot
DBER N° 2 blog blogger blogspotDBER N° 2 blog blogger blogspot
DBER N° 2 blog blogger blogspot
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Curso Html Basico
Curso Html BasicoCurso Html Basico
Curso Html Basico
 
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
 
Qué es html
Qué es htmlQué es html
Qué es html
 
Qué Son Las Css
Qué Son Las CssQué Son Las Css
Qué Son Las Css
 
Introducción a HTML
Introducción a HTMLIntroducción a HTML
Introducción a HTML
 
Hojas de Estilos en Cascada (CSS) - Apuntes
Hojas de Estilos en Cascada (CSS) - ApuntesHojas de Estilos en Cascada (CSS) - Apuntes
Hojas de Estilos en Cascada (CSS) - Apuntes
 
Codigos HTML Lenguaje IV
Codigos HTML Lenguaje IVCodigos HTML Lenguaje IV
Codigos HTML Lenguaje IV
 
Etiquetas Diapositivas.
Etiquetas Diapositivas.Etiquetas Diapositivas.
Etiquetas Diapositivas.
 
Inicio al HTML
Inicio al HTMLInicio al HTML
Inicio al HTML
 
Presentación2 wwwwwwwwwwwwww
Presentación2 wwwwwwwwwwwwwwPresentación2 wwwwwwwwwwwwww
Presentación2 wwwwwwwwwwwwww
 
Present: I WEB DINAMICAS
Present: I WEB  DINAMICASPresent: I WEB  DINAMICAS
Present: I WEB DINAMICAS
 

Destacado

Hiv and adis
Hiv and adisHiv and adis
Hiv and adis
vie2die
 
Cuento de la bella durmiente pdf
Cuento de la bella durmiente pdfCuento de la bella durmiente pdf
Cuento de la bella durmiente pdf
GlendaCastr0
 
Indian%20conquistadors[1]
Indian%20conquistadors[1]Indian%20conquistadors[1]
Indian%20conquistadors[1]
EsthelaCaito
 
Pres candidat avril12_v2
Pres candidat avril12_v2Pres candidat avril12_v2
Pres candidat avril12_v2
Jérôme Nessi
 
Bustos 1
Bustos 1Bustos 1
Bustos 1
JULIAN Bustos
 
Avast - NOAH12 London
Avast - NOAH12 LondonAvast - NOAH12 London
Avast - NOAH12 London
Marco Rodzynek
 
Quién reemplazará al rey
Quién reemplazará al reyQuién reemplazará al rey
Quién reemplazará al rey
Isabel Maceira
 
El computador
El computadorEl computador
Classroom handbook 2014
Classroom handbook 2014Classroom handbook 2014
Classroom handbook 2014
Travis Wood
 
Judi Vaillancourt Mold Modifcations
Judi Vaillancourt Mold ModifcationsJudi Vaillancourt Mold Modifcations
Judi Vaillancourt Mold Modifcations
Vaillancourt Folk Art
 
1. Tec. ValoracióN Empresas
1. Tec. ValoracióN Empresas1. Tec. ValoracióN Empresas
1. Tec. ValoracióN Empresas
m sabariego
 
Teachers to computers, help me or hide me!
Teachers to computers, help me or hide me!Teachers to computers, help me or hide me!
Teachers to computers, help me or hide me!
Johan Syah
 
Erik
ErikErik
Wikipedia & Librarians (2014)
Wikipedia & Librarians (2014)Wikipedia & Librarians (2014)
Wikipedia & Librarians (2014)
Phoebe Ayers
 
351 b p.3
351 b p.3351 b p.3
351 b p.3
robinking277
 
Hardware
HardwareHardware
Hardware
Niño Sanchez
 
Trabajo de Sofia
Trabajo de SofiaTrabajo de Sofia
Trabajo de Sofia
maxorata
 
Wer ist das?
Wer ist das? Wer ist das?
Wer ist das?
Elli Michael
 
Guia padres educadores uso tecnologias de la informacion ed primaria
Guia padres educadores uso tecnologias de la informacion ed primariaGuia padres educadores uso tecnologias de la informacion ed primaria
Guia padres educadores uso tecnologias de la informacion ed primaria
Departamento de Orientacion
 
Jesuitslideshow
JesuitslideshowJesuitslideshow
Jesuitslideshow
shoddyworksucks
 

Destacado (20)

Hiv and adis
Hiv and adisHiv and adis
Hiv and adis
 
Cuento de la bella durmiente pdf
Cuento de la bella durmiente pdfCuento de la bella durmiente pdf
Cuento de la bella durmiente pdf
 
Indian%20conquistadors[1]
Indian%20conquistadors[1]Indian%20conquistadors[1]
Indian%20conquistadors[1]
 
Pres candidat avril12_v2
Pres candidat avril12_v2Pres candidat avril12_v2
Pres candidat avril12_v2
 
Bustos 1
Bustos 1Bustos 1
Bustos 1
 
Avast - NOAH12 London
Avast - NOAH12 LondonAvast - NOAH12 London
Avast - NOAH12 London
 
Quién reemplazará al rey
Quién reemplazará al reyQuién reemplazará al rey
Quién reemplazará al rey
 
El computador
El computadorEl computador
El computador
 
Classroom handbook 2014
Classroom handbook 2014Classroom handbook 2014
Classroom handbook 2014
 
Judi Vaillancourt Mold Modifcations
Judi Vaillancourt Mold ModifcationsJudi Vaillancourt Mold Modifcations
Judi Vaillancourt Mold Modifcations
 
1. Tec. ValoracióN Empresas
1. Tec. ValoracióN Empresas1. Tec. ValoracióN Empresas
1. Tec. ValoracióN Empresas
 
Teachers to computers, help me or hide me!
Teachers to computers, help me or hide me!Teachers to computers, help me or hide me!
Teachers to computers, help me or hide me!
 
Erik
ErikErik
Erik
 
Wikipedia & Librarians (2014)
Wikipedia & Librarians (2014)Wikipedia & Librarians (2014)
Wikipedia & Librarians (2014)
 
351 b p.3
351 b p.3351 b p.3
351 b p.3
 
Hardware
HardwareHardware
Hardware
 
Trabajo de Sofia
Trabajo de SofiaTrabajo de Sofia
Trabajo de Sofia
 
Wer ist das?
Wer ist das? Wer ist das?
Wer ist das?
 
Guia padres educadores uso tecnologias de la informacion ed primaria
Guia padres educadores uso tecnologias de la informacion ed primariaGuia padres educadores uso tecnologias de la informacion ed primaria
Guia padres educadores uso tecnologias de la informacion ed primaria
 
Jesuitslideshow
JesuitslideshowJesuitslideshow
Jesuitslideshow
 

Similar a Producto 3: Pagina Web

Producto 3
Producto 3Producto 3
Producto 3
EDuard Ortiz
 
Producto 3
Producto 3Producto 3
Producto 3
AndreaLara3333
 
Primeraclase
PrimeraclasePrimeraclase
Primeraclase
danielagrouliez
 
Html.pptx
Html.pptxHtml.pptx
Introducción a HTML5
Introducción a HTML5Introducción a HTML5
Introducción a HTML5
maxfontana90
 
C:\Documents And Settings\Alumno\Mis Documentos\Qué Es Html
C:\Documents And Settings\Alumno\Mis Documentos\Qué Es HtmlC:\Documents And Settings\Alumno\Mis Documentos\Qué Es Html
C:\Documents And Settings\Alumno\Mis Documentos\Qué Es Html
edujoso
 
Html
HtmlHtml
Etiquetas Html Udp
Etiquetas Html UdpEtiquetas Html Udp
Etiquetas Html Udp
Anna García Sans
 
institucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalenainstitucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalena
juniorcuellargomez
 
CODIGOS HTML.Magdalena ortega de nariño.
CODIGOS HTML.Magdalena ortega de nariño.CODIGOS HTML.Magdalena ortega de nariño.
CODIGOS HTML.Magdalena ortega de nariño.
natalycamilaipiacapo
 
10 etiquetas basicas de html
10 etiquetas basicas de html10 etiquetas basicas de html
10 etiquetas basicas de html
Lety Bernal
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
Ana Lira
 
Primera Clase de xhtml
Primera Clase de xhtmlPrimera Clase de xhtml
Primera Clase de xhtml
Duglas Oswaldo Moreno Mendoza
 
Clase HTML.pptx
Clase HTML.pptxClase HTML.pptx
Clase HTML.pptx
HugoDavidGonzalezCab
 
HTML
HTMLHTML
HTML
PattAla
 
Practicas html
Practicas htmlPracticas html
Practicas html
Paula López Burgos
 
Producto3 Ariana y irnesto
Producto3 Ariana y irnestoProducto3 Ariana y irnesto
Producto3 Ariana y irnesto
ArianaPedersen
 
Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1 Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1
Emmanuel Ortiz Gutierrez
 
HTML.pdf
HTML.pdfHTML.pdf
HTML.pdf
Daniel Torres
 
Programación para web
Programación para webProgramación para web
Programación para web
rdiazb
 

Similar a Producto 3: Pagina Web (20)

Producto 3
Producto 3Producto 3
Producto 3
 
Producto 3
Producto 3Producto 3
Producto 3
 
Primeraclase
PrimeraclasePrimeraclase
Primeraclase
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 
Introducción a HTML5
Introducción a HTML5Introducción a HTML5
Introducción a HTML5
 
C:\Documents And Settings\Alumno\Mis Documentos\Qué Es Html
C:\Documents And Settings\Alumno\Mis Documentos\Qué Es HtmlC:\Documents And Settings\Alumno\Mis Documentos\Qué Es Html
C:\Documents And Settings\Alumno\Mis Documentos\Qué Es Html
 
Html
HtmlHtml
Html
 
Etiquetas Html Udp
Etiquetas Html UdpEtiquetas Html Udp
Etiquetas Html Udp
 
institucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalenainstitucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalena
 
CODIGOS HTML.Magdalena ortega de nariño.
CODIGOS HTML.Magdalena ortega de nariño.CODIGOS HTML.Magdalena ortega de nariño.
CODIGOS HTML.Magdalena ortega de nariño.
 
10 etiquetas basicas de html
10 etiquetas basicas de html10 etiquetas basicas de html
10 etiquetas basicas de html
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Primera Clase de xhtml
Primera Clase de xhtmlPrimera Clase de xhtml
Primera Clase de xhtml
 
Clase HTML.pptx
Clase HTML.pptxClase HTML.pptx
Clase HTML.pptx
 
HTML
HTMLHTML
HTML
 
Practicas html
Practicas htmlPracticas html
Practicas html
 
Producto3 Ariana y irnesto
Producto3 Ariana y irnestoProducto3 Ariana y irnesto
Producto3 Ariana y irnesto
 
Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1 Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1
 
HTML.pdf
HTML.pdfHTML.pdf
HTML.pdf
 
Programación para web
Programación para webProgramación para web
Programación para web
 

Producto 3: Pagina Web

  • 1. qwertyuiopasdfghjklzxcvbnmq wertyuiopasdfghjklzxcvbnmqw ertyuiopasdfghjklzxcvbnmqwer tyuiopasdfghjklzxcvbnmqwerty P3.diseño de página web uiopasdfghjklzxcvbnmqwertyui Mariela Uribe y Humberto vargas opasdfghjklzxcvbnmqwertyuiop 27/08/2014 COLEGIO GRECIA asdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdf ghjklzxcvbnmqwertyuiopasdfgh jklzxcvbnmqwertyuiopasdfghjkl zxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcv bnmqwertyuiopasdfghjklzxcvbn mqwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnmq wertyuiopasdfghjklzxcvbnmqw ertyuiopasdfghjklzxcvbnmrtyui opasdfghjklzxcvbnmqwertyuiop
  • 2. Introducción En este producto hablaremos sobre el diseño de un página web y ciertas cosas que se deben saber y son necesarias para la creación de un página web, también hablaremos sobre las etiquetas HTML y el lenguaje que se utilizan para las páginas web.
  • 3. P3. Diseño de página web ¿Qué es y para qué sirve HTML? HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está compuesto por una serie de etiquetas que el navegador interpreta y da forma en la pantalla. HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc. ¿Cuál es la estructura básica de una página web? Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas. La primera <head></head> es la cabecera de la página. Aquí irán cierta información que no es directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior izquierda). La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc. ¿Qué es una etiqueta de HTML? El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y serán la base principal del lenguaje HTML. En documento HTML será un fichero texto con etiquetas que variarán la forma de su presentación.
  • 4. ¿Qué es un atributo de HTML? Cualquier etiqueta XHTML puede contener uno o más atributos, separados por espacios, que permiten especificar la etiqueta. El código fuente tiene el siguiente aspecto: En el XHTML los atributos tienen que estar siempre definidos (mediante el signo igual "=") y el valor del atributo tiene que estar entre comillas dobles o simples. Existen una serie de atributos comunes a todas las etiquetas (salvo la etiqeta <html>) y algunas etiquetas tienen unos atributos específicos. En esta lección se comentan los atributos comunes; los atributos específicos se comentan en las lecciones dedicadas a las etiquetas correspondientes (imágenes, tablas, etc) ¿Cuáles son las etiquetas básicas para formar una página web? * <HTML>: indica el comienzo del documento HTML. * <HEAD>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title> de la web, una descripción y otras informaciones relacionadas con el contenido de la página. * <BODY>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web. * <H1>, <H2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores. * <A>: define los enlaces.
  • 5. * <TABLE>: es una tabla, y dentro de esta tenemos filas <TR> y celdas <TD>. * <P>: el texto dentro de esta etiqueta forma un párrafo. * <IMG>: imágenes. * <BR>: salto de línea. * <UL>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <LI> definimos cada guión dentro de la lista, y usando <OL> en lugar de <UL> tendremos listas ordenadas. * <B> y <STRONG>: se utilizan para resaltar el texto. * <U>: texto subrayado. * <I>: texto en cursiva