SlideShare una empresa de Scribd logo
1 de 10
Estructura de una página
web en HTML 5
Utilizamos el código anterior que es lo que usualmente tiene una página como los
listados
Explicacion de algunos codigos nuevos
Este codigo os redirecciona a otros codigos que estan encargados del estilo y la
extructura de la pagina
estilo
El codigo siguiente es para el estilo de la pagina que se guarda como estilo.css
Sirve para
insertar un
buscador
header
El header es la eztructura de la pagina
El Destroyed es la
fuente con la cual va a
ir nuestra página
Es el borde que
tiene la página
Este codigo
Es para el menu horizontal que aparecen en la pantalla
El codigo tex-decoration:none= es para que no salga con puntos en nuestra pagina
como es un listado usulamente al codigo lo saca con viñetas y gracias a este no salen
esos puntos
El codigo colorr:green= corresponde al color en que se muestra el listado en este
caso verde
Border = es el codigo para que salga el borde del menu horizontal
Padding = es la separacion del borde de las letras
Este es el código
completo para
que en el menú
horizontal
muestre este
efecto
Al colocar el mouse sobre una de ellas cambia de color y al quitarlo tarda un segundo
para que se quite el color de nuevo
De esta manera nos esta quedando nuestra pagina
Con este código que le colocamos hace este efecto en la pagina con las imágenes
Le amplia el tamaño al imagen cuando se coloca el mouse encima
Estructura de una página web con estilo y heard

Más contenido relacionado

La actualidad más candente

Paola ruiz roa,Alejandra roa HTML
Paola ruiz roa,Alejandra roa     HTMLPaola ruiz roa,Alejandra roa     HTML
Paola ruiz roa,Alejandra roa HTMLPaoLiita Ruiiz
 
Documento numero 1
Documento numero 1Documento numero 1
Documento numero 1Juan Baron
 
fila y columna
fila y columna fila y columna
fila y columna mixmax27
 
tutorial para una pagina web
tutorial para una pagina webtutorial para una pagina web
tutorial para una pagina webkaren_malik
 
Partes de una web
Partes de una webPartes de una web
Partes de una webomargerman
 
Caracteres especiales y enlaces
Caracteres especiales y enlacesCaracteres especiales y enlaces
Caracteres especiales y enlacesVivianaBBR
 
El primer código que vamos a utilizar es el del nombre y el de los apellidos
El primer código que vamos a utilizar es el del nombre y el de los apellidosEl primer código que vamos a utilizar es el del nombre y el de los apellidos
El primer código que vamos a utilizar es el del nombre y el de los apellidosKmilitha Estrada
 
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) - ApuntesFernando Irigaray
 
informatica
informaticainformatica
informaticaedith09
 
Utilizar etiquetasen una pagina web
Utilizar etiquetasen una pagina webUtilizar etiquetasen una pagina web
Utilizar etiquetasen una pagina webEddher Siilvhaa'
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerraPipe Gomex
 

La actualidad más candente (20)

Paola ruiz roa,Alejandra roa HTML
Paola ruiz roa,Alejandra roa     HTMLPaola ruiz roa,Alejandra roa     HTML
Paola ruiz roa,Alejandra roa HTML
 
Documento numero 1
Documento numero 1Documento numero 1
Documento numero 1
 
fila y columna
fila y columna fila y columna
fila y columna
 
tutorial para una pagina web
tutorial para una pagina webtutorial para una pagina web
tutorial para una pagina web
 
IMAGENES Y TABLAS EN HTML
IMAGENES Y TABLAS EN HTMLIMAGENES Y TABLAS EN HTML
IMAGENES Y TABLAS EN HTML
 
Partes de una web
Partes de una webPartes de una web
Partes de una web
 
El texto HTML
El texto HTMLEl texto HTML
El texto HTML
 
Html 11
Html 11Html 11
Html 11
 
Cheatsheet sublimetext2
Cheatsheet sublimetext2Cheatsheet sublimetext2
Cheatsheet sublimetext2
 
véanlo
véanlo véanlo
véanlo
 
Formularios con html5
Formularios con html5Formularios con html5
Formularios con html5
 
Caracteres especiales y enlaces
Caracteres especiales y enlacesCaracteres especiales y enlaces
Caracteres especiales y enlaces
 
Mi Primera Pagina
Mi Primera PaginaMi Primera Pagina
Mi Primera Pagina
 
El texto
 El texto El texto
El texto
 
El primer código que vamos a utilizar es el del nombre y el de los apellidos
El primer código que vamos a utilizar es el del nombre y el de los apellidosEl primer código que vamos a utilizar es el del nombre y el de los apellidos
El primer código que vamos a utilizar es el del nombre y el de los apellidos
 
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
 
informatica
informaticainformatica
informatica
 
Utilizar etiquetasen una pagina web
Utilizar etiquetasen una pagina webUtilizar etiquetasen una pagina web
Utilizar etiquetasen una pagina web
 
Qué Son Las Css
Qué Son Las CssQué Son Las Css
Qué Son Las Css
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 

Destacado

enfermedades de transmición sexual
enfermedades de transmición sexualenfermedades de transmición sexual
enfermedades de transmición sexualyorleysita
 
Webinar - SEO Avanzado
Webinar - SEO AvanzadoWebinar - SEO Avanzado
Webinar - SEO AvanzadoArsys
 
Device Days 2012 - HTML5 y CSS3 para móvil
Device Days 2012 - HTML5 y CSS3 para móvilDevice Days 2012 - HTML5 y CSS3 para móvil
Device Days 2012 - HTML5 y CSS3 para móvilJavier Usobiaga
 
Retos Web 2.0... y Web 3.0
Retos Web 2.0... y Web 3.0Retos Web 2.0... y Web 3.0
Retos Web 2.0... y Web 3.0Roberto García
 
Curso de Responsive Web Design de BEEVA
Curso de Responsive Web Design de BEEVACurso de Responsive Web Design de BEEVA
Curso de Responsive Web Design de BEEVABEEVA_es
 
Diseño adaptativo y responsive
Diseño adaptativo y responsiveDiseño adaptativo y responsive
Diseño adaptativo y responsiveRenny Batista
 
Responsive Web Design: Reinventando el diseño web
Responsive Web Design: Reinventando el diseño webResponsive Web Design: Reinventando el diseño web
Responsive Web Design: Reinventando el diseño webJavier Usobiaga
 
Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)Adolfo Sanz De Diego
 
Web 2.0 Y eso ¿qué es lo que es?
Web 2.0 Y eso ¿qué es lo que es?Web 2.0 Y eso ¿qué es lo que es?
Web 2.0 Y eso ¿qué es lo que es?Margarita Roura
 
Principios básicos de diseño web
Principios básicos de diseño webPrincipios básicos de diseño web
Principios básicos de diseño webOmar Sosa-Tzec
 

Destacado (11)

enfermedades de transmición sexual
enfermedades de transmición sexualenfermedades de transmición sexual
enfermedades de transmición sexual
 
Webinar - SEO Avanzado
Webinar - SEO AvanzadoWebinar - SEO Avanzado
Webinar - SEO Avanzado
 
Device Days 2012 - HTML5 y CSS3 para móvil
Device Days 2012 - HTML5 y CSS3 para móvilDevice Days 2012 - HTML5 y CSS3 para móvil
Device Days 2012 - HTML5 y CSS3 para móvil
 
Retos Web 2.0... y Web 3.0
Retos Web 2.0... y Web 3.0Retos Web 2.0... y Web 3.0
Retos Web 2.0... y Web 3.0
 
Curso de Responsive Web Design de BEEVA
Curso de Responsive Web Design de BEEVACurso de Responsive Web Design de BEEVA
Curso de Responsive Web Design de BEEVA
 
Diseño adaptativo y responsive
Diseño adaptativo y responsiveDiseño adaptativo y responsive
Diseño adaptativo y responsive
 
Responsive Web Design: Reinventando el diseño web
Responsive Web Design: Reinventando el diseño webResponsive Web Design: Reinventando el diseño web
Responsive Web Design: Reinventando el diseño web
 
Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)
 
Seo On Page para WordPress
Seo On Page para WordPressSeo On Page para WordPress
Seo On Page para WordPress
 
Web 2.0 Y eso ¿qué es lo que es?
Web 2.0 Y eso ¿qué es lo que es?Web 2.0 Y eso ¿qué es lo que es?
Web 2.0 Y eso ¿qué es lo que es?
 
Principios básicos de diseño web
Principios básicos de diseño webPrincipios básicos de diseño web
Principios básicos de diseño web
 

Similar a Estructura de una página web con estilo y heard

Similar a Estructura de una página web con estilo y heard (20)

Guia básica html
Guia básica htmlGuia básica html
Guia básica html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
¿Qué es CSS?
¿Qué es CSS?¿Qué es CSS?
¿Qué es CSS?
 
Presentación HTML
Presentación HTML Presentación HTML
Presentación HTML
 
Esilo css
Esilo cssEsilo css
Esilo css
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
HTML
HTMLHTML
HTML
 
HTML
HTMLHTML
HTML
 
04_Estilos CSS y modelos de caja.pptx
04_Estilos CSS y modelos de caja.pptx04_Estilos CSS y modelos de caja.pptx
04_Estilos CSS y modelos de caja.pptx
 
Universidad tecnica tarea 4
Universidad tecnica tarea 4Universidad tecnica tarea 4
Universidad tecnica tarea 4
 
Universidad tecnica tarea 4
Universidad tecnica tarea 4Universidad tecnica tarea 4
Universidad tecnica tarea 4
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
Conceptos html
Conceptos  htmlConceptos  html
Conceptos html
 
Conceptos Etiquetas de HTML
Conceptos Etiquetas de HTMLConceptos Etiquetas de HTML
Conceptos Etiquetas de HTML
 
html
htmlhtml
html
 
Lenguaje HTML
  Lenguaje HTML  Lenguaje HTML
Lenguaje HTML
 
Portafolio de programación Joe Holguin 2c2
Portafolio de programación Joe Holguin 2c2Portafolio de programación Joe Holguin 2c2
Portafolio de programación Joe Holguin 2c2
 
Css
CssCss
Css
 
html y css
html y csshtml y css
html y css
 

Más de Danita Viteri

Paginas con Dreamweaver
Paginas con DreamweaverPaginas con Dreamweaver
Paginas con DreamweaverDanita Viteri
 
Movimiento personalizado con photoshop y flash
Movimiento personalizado con photoshop y flashMovimiento personalizado con photoshop y flash
Movimiento personalizado con photoshop y flashDanita Viteri
 
Exportacion de graficos desde photoshop
Exportacion de graficos desde photoshopExportacion de graficos desde photoshop
Exportacion de graficos desde photoshopDanita Viteri
 
Mantenimiento del computador
Mantenimiento del computadorMantenimiento del computador
Mantenimiento del computadorDanita Viteri
 
Formas y Degradados en Flash
Formas y Degradados en FlashFormas y Degradados en Flash
Formas y Degradados en FlashDanita Viteri
 
Objetos geometrico en flash
Objetos geometrico en flashObjetos geometrico en flash
Objetos geometrico en flashDanita Viteri
 
Como crear objetos visuales en la pantalla
Como crear objetos visuales en la pantallaComo crear objetos visuales en la pantalla
Como crear objetos visuales en la pantallaDanita Viteri
 
programación en flash codigos
programación en flash codigosprogramación en flash codigos
programación en flash codigosDanita Viteri
 
programación en flash codigos
programación en flash codigosprogramación en flash codigos
programación en flash codigosDanita Viteri
 
Condicionales en php
Condicionales en phpCondicionales en php
Condicionales en phpDanita Viteri
 
Entorno de trabajo en flash
Entorno de trabajo en flashEntorno de trabajo en flash
Entorno de trabajo en flashDanita Viteri
 

Más de Danita Viteri (20)

Paginas con Dreamweaver
Paginas con DreamweaverPaginas con Dreamweaver
Paginas con Dreamweaver
 
Movimiento personalizado con photoshop y flash
Movimiento personalizado con photoshop y flashMovimiento personalizado con photoshop y flash
Movimiento personalizado con photoshop y flash
 
Exportacion de graficos desde photoshop
Exportacion de graficos desde photoshopExportacion de graficos desde photoshop
Exportacion de graficos desde photoshop
 
Puertos de un pc
Puertos de un pcPuertos de un pc
Puertos de un pc
 
Mantenimiento del computador
Mantenimiento del computadorMantenimiento del computador
Mantenimiento del computador
 
Formas y Degradados
Formas y DegradadosFormas y Degradados
Formas y Degradados
 
Formas y Degradados en Flash
Formas y Degradados en FlashFormas y Degradados en Flash
Formas y Degradados en Flash
 
Degradados
DegradadosDegradados
Degradados
 
Objetos geometrico en flash
Objetos geometrico en flashObjetos geometrico en flash
Objetos geometrico en flash
 
Códigos en flash 2
Códigos en flash 2Códigos en flash 2
Códigos en flash 2
 
Como crear objetos visuales en la pantalla
Como crear objetos visuales en la pantallaComo crear objetos visuales en la pantalla
Como crear objetos visuales en la pantalla
 
Formularios html5
Formularios html5Formularios html5
Formularios html5
 
Códigos en flash 2
Códigos en flash 2Códigos en flash 2
Códigos en flash 2
 
programación en flash codigos
programación en flash codigosprogramación en flash codigos
programación en flash codigos
 
programación en flash codigos
programación en flash codigosprogramación en flash codigos
programación en flash codigos
 
paisaje nocturno
paisaje nocturnopaisaje nocturno
paisaje nocturno
 
Condicionales en php
Condicionales en phpCondicionales en php
Condicionales en php
 
Puertos de un pc
Puertos de un pcPuertos de un pc
Puertos de un pc
 
Entorno de trabajo en flash
Entorno de trabajo en flashEntorno de trabajo en flash
Entorno de trabajo en flash
 
Variables
VariablesVariables
Variables
 

Estructura de una página web con estilo y heard

  • 1. Estructura de una página web en HTML 5 Utilizamos el código anterior que es lo que usualmente tiene una página como los listados
  • 2.
  • 3.
  • 4. Explicacion de algunos codigos nuevos Este codigo os redirecciona a otros codigos que estan encargados del estilo y la extructura de la pagina estilo El codigo siguiente es para el estilo de la pagina que se guarda como estilo.css Sirve para insertar un buscador
  • 5. header El header es la eztructura de la pagina
  • 6. El Destroyed es la fuente con la cual va a ir nuestra página Es el borde que tiene la página
  • 7. Este codigo Es para el menu horizontal que aparecen en la pantalla El codigo tex-decoration:none= es para que no salga con puntos en nuestra pagina como es un listado usulamente al codigo lo saca con viñetas y gracias a este no salen esos puntos El codigo colorr:green= corresponde al color en que se muestra el listado en este caso verde Border = es el codigo para que salga el borde del menu horizontal Padding = es la separacion del borde de las letras Este es el código completo para que en el menú horizontal muestre este efecto
  • 8. Al colocar el mouse sobre una de ellas cambia de color y al quitarlo tarda un segundo para que se quite el color de nuevo De esta manera nos esta quedando nuestra pagina
  • 9. Con este código que le colocamos hace este efecto en la pagina con las imágenes Le amplia el tamaño al imagen cuando se coloca el mouse encima