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

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

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

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
 
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 joon y jorge 9no a
Producto 3 joon y jorge 9no aProducto 3 joon y jorge 9no a
Producto 3 joon y jorge 9no a
 

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