SlideShare a Scribd company logo
1 of 7
HTML 5 Y CSS
     Antes de empezar a crear nuestra página es importante saber algunos Tags
                       utilizadospara realizar páginas web

                   Estos tags son los que principalmente se utilizan

                            <HTML> inicio del documento

                            <HEAD> inicio de la cabecera

                               <TITLE> inicio del titulo

                               </TITLE> final del titulo

                            </HEAD> final de la cabecera

                              <BODY> inicio de la página

Comandos HTML para ubicar los elementos de la página como texto, imágenes, tablas,
                                     etc.

                                  Tamaños de letras

                            <h1> tamaño de letra grande

                           <h2> tamaño de letra mediana

                         <h3> tamaño de letra más pequeño

                    Y así sucesivamente con <h4><h5><h6><h7>

                  <ul> sirve para hacer un listado no ordenado</ul>

               <ol> este sirve para hacer un listado ya ordenado</ol>

<Table> se lo emplea para realizar tablas</table>en él se encuentran el <tr>que sirve
                     para hacer las filas y el <td> las columnas

    <img> sirve para colocar imágenes en el tenemos que escribir el lugar donde se
       encuentra la imagen ejemplo <img src="imágenes/vivi.jpg" el src es una
 característica especial que siempre debe colocarse seguido del igual y entre comillas
 las carpeta en que se encuentran en este caso img para blog seguido de un / y luego
colocar el nombre con el cual se encuentra la imagen un punto y el formato en que se
                                     encuentra

   <br> es un tag que sirve para saltar espacios y este no hay necesidad de cerrarlo

                             </BODY> final de la pagina

                            </HTML> final del documento

Después de haber conocido los tags los ordenados de forma adecuada para que quede
                             bien nuestra página web

 Primero que todo empezamos creando una carpeta en el lugar que desee llamada
HTML, y dentro de esta una que diga CSS y dentro de esta una que diga IMAGENES en
         la que meterás las imágenes que quieres colocar en la página web




Dentro de esta carpeta imágenes damos clic izquierdo seleccionamos nuevo y también
                         seleccionamos documento de texto
Aparecerá como una carpeta pero a este lo llamaremos index.html, ya que cualquier
                       servidor entiende el índex siempre




       Después de crear estas carpetas y por último el documento pasamos a abrir
Notepad++ Para iniciar con la creación de nuestra página web abriendo el documento
                        de texto al que llamamos index.html




                Buscamos documento de texto al que llamamos index.html




                                Y al abrirlo aparecerá así
Para empezar la creación de nuestra página siempre se debe empezar en la
estructura de un documento HTML tecleando siempre al inicio <! DOCTYPE HTML>




     Y ya después de haber visto los tags para la página web, la vamos organizando
                       de tal manera que nos quede así
Para ya ejecutarlo oprimimos el botón que se muestra en la imagen y se
guardaran todos los cambios automáticamente en el documento index.html




            Y al ejecutarlo lo podemos mirar en cualquier navegador
De tal manera que nuestra página web quedara así
GRACIAS

  S

More Related Content

What's hot (20)

Impress
ImpressImpress
Impress
 
HTML
HTMLHTML
HTML
 
Etiquetas
EtiquetasEtiquetas
Etiquetas
 
Presentación unidad tres
Presentación unidad tresPresentación unidad tres
Presentación unidad tres
 
Html
HtmlHtml
Html
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Trabajando con kompozer
Trabajando con kompozerTrabajando con kompozer
Trabajando con kompozer
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Etiquetas de código html
Etiquetas de código htmlEtiquetas de código html
Etiquetas de código html
 
Estructura de página web con html 5
Estructura de página web con html 5Estructura de página web con html 5
Estructura de página web con html 5
 
Examen 1ra U
Examen 1ra UExamen 1ra U
Examen 1ra U
 
Proceso de desarrollo java script
Proceso de desarrollo java scriptProceso de desarrollo java script
Proceso de desarrollo java script
 
Html5 y php5
Html5 y php5Html5 y php5
Html5 y php5
 
Documento nicolas garibello
Documento nicolas garibelloDocumento nicolas garibello
Documento nicolas garibello
 
Kompozer
KompozerKompozer
Kompozer
 
Pagina web 1
Pagina web 1Pagina web 1
Pagina web 1
 
2da pagina web con html5 y doctype
2da pagina web con html5 y doctype2da pagina web con html5 y doctype
2da pagina web con html5 y doctype
 
Pagina web con maquetacion
Pagina web con maquetacionPagina web con maquetacion
Pagina web con maquetacion
 

Viewers also liked

Travel photo report 2010
Travel photo report 2010Travel photo report 2010
Travel photo report 2010EGK Fotografie
 
Los Navegadores
Los Navegadores  Los Navegadores
Los Navegadores Juan Bg
 
Radiolabelling Capabilities
Radiolabelling CapabilitiesRadiolabelling Capabilities
Radiolabelling Capabilitiesejmckee
 
Jornadas deportivas 1
Jornadas deportivas 1Jornadas deportivas 1
Jornadas deportivas 1anaarcasc
 
Especulación en el Parque Natural de Grazalema
Especulación en el Parque Natural de GrazalemaEspeculación en el Parque Natural de Grazalema
Especulación en el Parque Natural de Grazalemasanlucar jmf
 
Over and beyond basketball llc slide show presentation.pptx final 3
Over and beyond basketball llc slide show presentation.pptx final 3Over and beyond basketball llc slide show presentation.pptx final 3
Over and beyond basketball llc slide show presentation.pptx final 34211983
 
Avances tecnologicos sebas y lizeth
Avances tecnologicos sebas y lizethAvances tecnologicos sebas y lizeth
Avances tecnologicos sebas y lizethAnitapinzon021
 
Power engineer perfomance appraisal 2
Power engineer perfomance appraisal 2Power engineer perfomance appraisal 2
Power engineer perfomance appraisal 2tonychoper5204
 
Case 43 unlicensed engineers 208690
Case 43 unlicensed engineers 208690Case 43 unlicensed engineers 208690
Case 43 unlicensed engineers 208690Simon Peter
 
Siete saberes necesarios_del_conocimiento
Siete saberes necesarios_del_conocimientoSiete saberes necesarios_del_conocimiento
Siete saberes necesarios_del_conocimiento611raul
 
150 herramientas digitales para la educación
150 herramientas digitales para la educación150 herramientas digitales para la educación
150 herramientas digitales para la educaciónjesus_14
 
Edi presentation 2013 03-01
Edi presentation 2013 03-01Edi presentation 2013 03-01
Edi presentation 2013 03-01ianjkalin
 
Investigación de mercados
Investigación de mercadosInvestigación de mercados
Investigación de mercadosnelebben
 

Viewers also liked (20)

Travel photo report 2010
Travel photo report 2010Travel photo report 2010
Travel photo report 2010
 
Los Navegadores
Los Navegadores  Los Navegadores
Los Navegadores
 
Organizacion Mundial del Trabajo
Organizacion Mundial del TrabajoOrganizacion Mundial del Trabajo
Organizacion Mundial del Trabajo
 
Radiolabelling Capabilities
Radiolabelling CapabilitiesRadiolabelling Capabilities
Radiolabelling Capabilities
 
Jornadas deportivas 1
Jornadas deportivas 1Jornadas deportivas 1
Jornadas deportivas 1
 
Moocs
MoocsMoocs
Moocs
 
102609 Gov Primaries 50m
102609 Gov Primaries 50m102609 Gov Primaries 50m
102609 Gov Primaries 50m
 
Especulación en el Parque Natural de Grazalema
Especulación en el Parque Natural de GrazalemaEspeculación en el Parque Natural de Grazalema
Especulación en el Parque Natural de Grazalema
 
Over and beyond basketball llc slide show presentation.pptx final 3
Over and beyond basketball llc slide show presentation.pptx final 3Over and beyond basketball llc slide show presentation.pptx final 3
Over and beyond basketball llc slide show presentation.pptx final 3
 
Avances tecnologicos sebas y lizeth
Avances tecnologicos sebas y lizethAvances tecnologicos sebas y lizeth
Avances tecnologicos sebas y lizeth
 
Power engineer perfomance appraisal 2
Power engineer perfomance appraisal 2Power engineer perfomance appraisal 2
Power engineer perfomance appraisal 2
 
Case 43 unlicensed engineers 208690
Case 43 unlicensed engineers 208690Case 43 unlicensed engineers 208690
Case 43 unlicensed engineers 208690
 
Cuento darwin
Cuento darwinCuento darwin
Cuento darwin
 
Siete saberes necesarios_del_conocimiento
Siete saberes necesarios_del_conocimientoSiete saberes necesarios_del_conocimiento
Siete saberes necesarios_del_conocimiento
 
Outlook
OutlookOutlook
Outlook
 
150 herramientas digitales para la educación
150 herramientas digitales para la educación150 herramientas digitales para la educación
150 herramientas digitales para la educación
 
La voiture à travaux
La voiture à travauxLa voiture à travaux
La voiture à travaux
 
Edi presentation 2013 03-01
Edi presentation 2013 03-01Edi presentation 2013 03-01
Edi presentation 2013 03-01
 
Html s3
Html s3Html s3
Html s3
 
Investigación de mercados
Investigación de mercadosInvestigación de mercados
Investigación de mercados
 

Similar to Html 5 y css viviana

Similar to Html 5 y css viviana (20)

Etiquetas básicas de HTML
Etiquetas básicas de HTMLEtiquetas básicas de HTML
Etiquetas básicas de HTML
 
Pagina web html5
Pagina web html5Pagina web html5
Pagina web html5
 
Etiquetas básicas-en-html
Etiquetas básicas-en-htmlEtiquetas básicas-en-html
Etiquetas básicas-en-html
 
Pajinas web html 5 para suvi hoy
Pajinas web html 5 para suvi hoyPajinas web html 5 para suvi hoy
Pajinas web html 5 para suvi hoy
 
Pajinas web html 5 para suvi hoy
Pajinas web html 5 para suvi hoyPajinas web html 5 para suvi hoy
Pajinas web html 5 para suvi hoy
 
Vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
VvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvVvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
Vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
 
Codigos HTML...paginas web
Codigos HTML...paginas webCodigos HTML...paginas web
Codigos HTML...paginas web
 
Escuela Abierta - Taller de Html
Escuela Abierta - Taller de HtmlEscuela Abierta - Taller de Html
Escuela Abierta - Taller de Html
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Clase 2 Desarrollo Web
Clase 2 Desarrollo Web Clase 2 Desarrollo Web
Clase 2 Desarrollo Web
 
Clase 1 - Introducción HTML.pptx
Clase 1 - Introducción HTML.pptxClase 1 - Introducción HTML.pptx
Clase 1 - Introducción HTML.pptx
 
Producto 3
Producto 3Producto 3
Producto 3
 
Producto 3
Producto 3Producto 3
Producto 3
 
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
 
Taller de HTML
Taller de HTMLTaller de HTML
Taller de HTML
 
Producto 3
Producto 3Producto 3
Producto 3
 
Página web en html 5 y doctype
Página web  en html 5  y doctypePágina web  en html 5  y doctype
Página web en html 5 y doctype
 
Estructura de una página html
Estructura de una página htmlEstructura de una página html
Estructura de una página html
 
Estructura basica de una pagina web
Estructura basica de una pagina webEstructura basica de una pagina web
Estructura basica de una pagina 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
 

More from Viviana Bebitha

More from Viviana Bebitha (20)

Las lajas
Las lajasLas lajas
Las lajas
 
Maquetacion de una pagina web
Maquetacion de una pagina webMaquetacion de una pagina web
Maquetacion de una pagina web
 
Formas y degradados
Formas y  degradadosFormas y  degradados
Formas y degradados
 
Formas y degradados
Formas y  degradadosFormas y  degradados
Formas y degradados
 
Como hacer figuras con código
Como hacer figuras con códigoComo hacer figuras con código
Como hacer figuras con código
 
Sprite1 para subir
Sprite1 para subirSprite1 para subir
Sprite1 para subir
 
Síntesis de una función
Síntesis  de una funciónSíntesis  de una función
Síntesis de una función
 
Formulario en html 5
Formulario en html 5Formulario en html 5
Formulario en html 5
 
Sandra 11 compu
Sandra 11 compuSandra 11 compu
Sandra 11 compu
 
Paisaje nocturno
Paisaje nocturnoPaisaje nocturno
Paisaje nocturno
 
Pagina de audio y video
Pagina de audio y videoPagina de audio y video
Pagina de audio y video
 
Puertos pc
Puertos pc Puertos pc
Puertos pc
 
Puertos pc
Puertos pcPuertos pc
Puertos pc
 
Segunda parte sandyyybb
Segunda parte sandyyybbSegunda parte sandyyybb
Segunda parte sandyyybb
 
Vivina 11111
Vivina 11111Vivina 11111
Vivina 11111
 
Vivina 11111
Vivina 11111Vivina 11111
Vivina 11111
 
Sandra viviana moran 11 compu
Sandra viviana moran  11 compuSandra viviana moran  11 compu
Sandra viviana moran 11 compu
 
Variables en ph p sandra moran
Variables en ph p sandra moranVariables en ph p sandra moran
Variables en ph p sandra moran
 
Variables en ph p sandra moran
Variables en ph p sandra moranVariables en ph p sandra moran
Variables en ph p sandra moran
 
De flash de objetos agru..
De flash de objetos agru..De flash de objetos agru..
De flash de objetos agru..
 

Html 5 y css viviana

  • 1. HTML 5 Y CSS Antes de empezar a crear nuestra página es importante saber algunos Tags utilizadospara realizar páginas web Estos tags son los que principalmente se utilizan <HTML> inicio del documento <HEAD> inicio de la cabecera <TITLE> inicio del titulo </TITLE> final del titulo </HEAD> final de la cabecera <BODY> inicio de la página Comandos HTML para ubicar los elementos de la página como texto, imágenes, tablas, etc. Tamaños de letras <h1> tamaño de letra grande <h2> tamaño de letra mediana <h3> tamaño de letra más pequeño Y así sucesivamente con <h4><h5><h6><h7> <ul> sirve para hacer un listado no ordenado</ul> <ol> este sirve para hacer un listado ya ordenado</ol> <Table> se lo emplea para realizar tablas</table>en él se encuentran el <tr>que sirve para hacer las filas y el <td> las columnas <img> sirve para colocar imágenes en el tenemos que escribir el lugar donde se encuentra la imagen ejemplo <img src="imágenes/vivi.jpg" el src es una característica especial que siempre debe colocarse seguido del igual y entre comillas las carpeta en que se encuentran en este caso img para blog seguido de un / y luego
  • 2. colocar el nombre con el cual se encuentra la imagen un punto y el formato en que se encuentra <br> es un tag que sirve para saltar espacios y este no hay necesidad de cerrarlo </BODY> final de la pagina </HTML> final del documento Después de haber conocido los tags los ordenados de forma adecuada para que quede bien nuestra página web Primero que todo empezamos creando una carpeta en el lugar que desee llamada HTML, y dentro de esta una que diga CSS y dentro de esta una que diga IMAGENES en la que meterás las imágenes que quieres colocar en la página web Dentro de esta carpeta imágenes damos clic izquierdo seleccionamos nuevo y también seleccionamos documento de texto
  • 3. Aparecerá como una carpeta pero a este lo llamaremos index.html, ya que cualquier servidor entiende el índex siempre Después de crear estas carpetas y por último el documento pasamos a abrir Notepad++ Para iniciar con la creación de nuestra página web abriendo el documento de texto al que llamamos index.html Buscamos documento de texto al que llamamos index.html Y al abrirlo aparecerá así
  • 4. Para empezar la creación de nuestra página siempre se debe empezar en la estructura de un documento HTML tecleando siempre al inicio <! DOCTYPE HTML> Y ya después de haber visto los tags para la página web, la vamos organizando de tal manera que nos quede así
  • 5. Para ya ejecutarlo oprimimos el botón que se muestra en la imagen y se guardaran todos los cambios automáticamente en el documento index.html Y al ejecutarlo lo podemos mirar en cualquier navegador
  • 6. De tal manera que nuestra página web quedara así