SlideShare una empresa de Scribd logo
1 de 4
Elementos básicos HTML y CSS


                Sergio Alonso Muñoz
Crear el archivo para contener la
               página Web
• Entra en el Notepad++, escribe los siguiente:
  <html> </html> y guarda el archivo como
  index.htm
• Si ahora abres con Mozilla Firefox el archivo,
  se mostrará una página Web vacía.
• Puedes crear tantos archivos .htm, como
  quieras para organizar tú Web.
Etiquetas básicas HTML
(excluimos las usadas para formulario)
• <html>
• <head>
• <body>
• <a href=“dir_link”>
• <img src=“dir_img”>
• <p id=“para1”>
• <h1 class=“cabecerasGrandes”>, <h2>, <h3>
• <li>, <ol>, <ul>
• <table>, <tr>, <td>
• <script>lenguaje de programación para contenido dinámico
  </script>
• <style>lenguaje descriptivo CSS para estilos</style>
Ejemplos básicos CSS
<style>
· Selector por elemento HTML:
h2 {text-align:center;} (selector por elemento)

· Selector por atributo class:
h1.cabecerasGrandes {text-align:justify;}

· Selector por atributo id:
#para1{
    text-align:center;
    color:red;
}
</style>

Más contenido relacionado

La actualidad más candente

Búsqueda de información en google
Búsqueda de información en googleBúsqueda de información en google
Búsqueda de información en googleronny castellano
 
Elaboración del periódico en HTML y en GLOGSTER
Elaboración del periódico en HTML  y en GLOGSTER Elaboración del periódico en HTML  y en GLOGSTER
Elaboración del periódico en HTML y en GLOGSTER alexvanegasrosas
 
Etiquetas[1]
Etiquetas[1]Etiquetas[1]
Etiquetas[1]TMHL06
 
Inf1a _ex2_adilenecardenas
Inf1a _ex2_adilenecardenasInf1a _ex2_adilenecardenas
Inf1a _ex2_adilenecardenasadilene11
 

La actualidad más candente (8)

Búsqueda de información en google
Búsqueda de información en googleBúsqueda de información en google
Búsqueda de información en google
 
Elaboración del periódico en HTML y en GLOGSTER
Elaboración del periódico en HTML  y en GLOGSTER Elaboración del periódico en HTML  y en GLOGSTER
Elaboración del periódico en HTML y en GLOGSTER
 
Fundamentos HTML
Fundamentos HTMLFundamentos HTML
Fundamentos HTML
 
Drive
DriveDrive
Drive
 
Nicolaas 1112
Nicolaas 1112Nicolaas 1112
Nicolaas 1112
 
CSS Hoja de estilo en cascada
CSS   Hoja de estilo en cascadaCSS   Hoja de estilo en cascada
CSS Hoja de estilo en cascada
 
Etiquetas[1]
Etiquetas[1]Etiquetas[1]
Etiquetas[1]
 
Inf1a _ex2_adilenecardenas
Inf1a _ex2_adilenecardenasInf1a _ex2_adilenecardenas
Inf1a _ex2_adilenecardenas
 

Destacado

Css: elementos básicos
Css: elementos básicosCss: elementos básicos
Css: elementos básicosjcremiro
 
Schicksalsschlag Schiffbruch
Schicksalsschlag SchiffbruchSchicksalsschlag Schiffbruch
Schicksalsschlag Schiffbruchguestd88d896
 
Axter Deutsche Firmenpräsentation
Axter Deutsche FirmenpräsentationAxter Deutsche Firmenpräsentation
Axter Deutsche FirmenpräsentationAxter
 
Präsentation Analyse Schweiz zur Pressekonferenz CLS / KK&K
Präsentation Analyse Schweiz zur Pressekonferenz CLS / KK&K Präsentation Analyse Schweiz zur Pressekonferenz CLS / KK&K
Präsentation Analyse Schweiz zur Pressekonferenz CLS / KK&K Kuhn, Kammann & Kuhn GmbH
 
Gehirn und Willensfreiheit
Gehirn und WillensfreiheitGehirn und Willensfreiheit
Gehirn und WillensfreiheitCSR
 
Planificaciones, de octubre y los 3 primeros aprendizajes del 2do bloque
Planificaciones, de octubre y los 3 primeros aprendizajes del 2do bloquePlanificaciones, de octubre y los 3 primeros aprendizajes del 2do bloque
Planificaciones, de octubre y los 3 primeros aprendizajes del 2do bloqueAimee Herrera Velarde
 
Medien! warum
Medien! warum Medien! warum
Medien! warum mapauro
 
Im Kaufhaus[1]
Im Kaufhaus[1]Im Kaufhaus[1]
Im Kaufhaus[1]vcourtney
 
Presentacirugbi 110501104107-phpapp02
Presentacirugbi 110501104107-phpapp02Presentacirugbi 110501104107-phpapp02
Presentacirugbi 110501104107-phpapp02pperez48
 
Gewerkschaftliche Bildung
Gewerkschaftliche BildungGewerkschaftliche Bildung
Gewerkschaftliche BildungGuido Brombach
 
Suchmaschinenoptimierung 2009 - Hart am Wind gegen die Flaute
Suchmaschinenoptimierung 2009 - Hart am Wind gegen die FlauteSuchmaschinenoptimierung 2009 - Hart am Wind gegen die Flaute
Suchmaschinenoptimierung 2009 - Hart am Wind gegen die FlauteChristoph C. Cemper
 

Destacado (20)

Css: elementos básicos
Css: elementos básicosCss: elementos básicos
Css: elementos básicos
 
Schicksalsschlag Schiffbruch
Schicksalsschlag SchiffbruchSchicksalsschlag Schiffbruch
Schicksalsschlag Schiffbruch
 
Axter Deutsche Firmenpräsentation
Axter Deutsche FirmenpräsentationAxter Deutsche Firmenpräsentation
Axter Deutsche Firmenpräsentation
 
Alphabet
AlphabetAlphabet
Alphabet
 
Präsentation Analyse Schweiz zur Pressekonferenz CLS / KK&K
Präsentation Analyse Schweiz zur Pressekonferenz CLS / KK&K Präsentation Analyse Schweiz zur Pressekonferenz CLS / KK&K
Präsentation Analyse Schweiz zur Pressekonferenz CLS / KK&K
 
Gehirn und Willensfreiheit
Gehirn und WillensfreiheitGehirn und Willensfreiheit
Gehirn und Willensfreiheit
 
Schuldentest
SchuldentestSchuldentest
Schuldentest
 
Planificaciones, de octubre y los 3 primeros aprendizajes del 2do bloque
Planificaciones, de octubre y los 3 primeros aprendizajes del 2do bloquePlanificaciones, de octubre y los 3 primeros aprendizajes del 2do bloque
Planificaciones, de octubre y los 3 primeros aprendizajes del 2do bloque
 
Medien! warum
Medien! warum Medien! warum
Medien! warum
 
Im Kaufhaus[1]
Im Kaufhaus[1]Im Kaufhaus[1]
Im Kaufhaus[1]
 
El embarazo
El embarazoEl embarazo
El embarazo
 
Marketing viral
Marketing viralMarketing viral
Marketing viral
 
Presentacirugbi 110501104107-phpapp02
Presentacirugbi 110501104107-phpapp02Presentacirugbi 110501104107-phpapp02
Presentacirugbi 110501104107-phpapp02
 
Alcance objetivos
Alcance objetivosAlcance objetivos
Alcance objetivos
 
Gewerkschaftliche Bildung
Gewerkschaftliche BildungGewerkschaftliche Bildung
Gewerkschaftliche Bildung
 
Proyecto de vida
Proyecto de vida Proyecto de vida
Proyecto de vida
 
Suchmaschinenoptimierung 2009 - Hart am Wind gegen die Flaute
Suchmaschinenoptimierung 2009 - Hart am Wind gegen die FlauteSuchmaschinenoptimierung 2009 - Hart am Wind gegen die Flaute
Suchmaschinenoptimierung 2009 - Hart am Wind gegen die Flaute
 
Allianz RiesterRente Flyer Deutsch
Allianz RiesterRente Flyer DeutschAllianz RiesterRente Flyer Deutsch
Allianz RiesterRente Flyer Deutsch
 
Poster Session KKundK Social Magazine
Poster Session KKundK Social MagazinePoster Session KKundK Social Magazine
Poster Session KKundK Social Magazine
 
Vom Web zur App
Vom Web zur AppVom Web zur App
Vom Web zur App
 

Similar a Creación de páginas web básicas con HTML y CSS

Similar a Creación de páginas web básicas con HTML y CSS (20)

Presentación
PresentaciónPresentación
Presentación
 
Introducción al HTML
Introducción al HTMLIntroducción al HTML
Introducción al HTML
 
Html explicacion grado 10
Html explicacion grado 10Html explicacion grado 10
Html explicacion grado 10
 
1
11
1
 
Codigo html
Codigo htmlCodigo html
Codigo html
 
Pagina web 1
Pagina web 1Pagina web 1
Pagina web 1
 
Introducción a Etiquetas HTML 5
Introducción a Etiquetas HTML 5Introducción a Etiquetas HTML 5
Introducción a Etiquetas HTML 5
 
Hipertexto
HipertextoHipertexto
Hipertexto
 
HTML y CSS
HTML y CSSHTML y CSS
HTML y CSS
 
Sitio Web / Introducción a HTML
Sitio Web / Introducción a HTMLSitio Web / Introducción a HTML
Sitio Web / Introducción a HTML
 
Curso de html
Curso de htmlCurso de html
Curso de html
 
Estructura semantica Html5.pptx
Estructura semantica Html5.pptxEstructura semantica Html5.pptx
Estructura semantica Html5.pptx
 
(producto 3)
 (producto 3) (producto 3)
(producto 3)
 
Codigos html y como crear una pagina Web
Codigos html y como crear una pagina WebCodigos html y como crear una pagina Web
Codigos html y como crear una pagina Web
 
Dispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdfDispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdf
 
html5
html5html5
html5
 
Clase 1 - Introducción HTML.pptx
Clase 1 - Introducción HTML.pptxClase 1 - Introducción HTML.pptx
Clase 1 - Introducción HTML.pptx
 
Nuevas etiquetas html5
Nuevas etiquetas html5Nuevas etiquetas html5
Nuevas etiquetas html5
 
HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?
 
HTML
HTMLHTML
HTML
 

Creación de páginas web básicas con HTML y CSS

  • 1. Elementos básicos HTML y CSS Sergio Alonso Muñoz
  • 2. Crear el archivo para contener la página Web • Entra en el Notepad++, escribe los siguiente: <html> </html> y guarda el archivo como index.htm • Si ahora abres con Mozilla Firefox el archivo, se mostrará una página Web vacía. • Puedes crear tantos archivos .htm, como quieras para organizar tú Web.
  • 3. Etiquetas básicas HTML (excluimos las usadas para formulario) • <html> • <head> • <body> • <a href=“dir_link”> • <img src=“dir_img”> • <p id=“para1”> • <h1 class=“cabecerasGrandes”>, <h2>, <h3> • <li>, <ol>, <ul> • <table>, <tr>, <td> • <script>lenguaje de programación para contenido dinámico </script> • <style>lenguaje descriptivo CSS para estilos</style>
  • 4. Ejemplos básicos CSS <style> · Selector por elemento HTML: h2 {text-align:center;} (selector por elemento) · Selector por atributo class: h1.cabecerasGrandes {text-align:justify;} · Selector por atributo id: #para1{ text-align:center; color:red; } </style>