SlideShare una empresa de Scribd logo
1 de 18
UNA PAGINA WEB
Qué es HTML
Hyper
Text
Markup
Language
Lenguaje de Marcas de Hipertexto:
Hace referencia al lenguaje de marcado para la
elaboración de páginas web. Es un estándar que sirve de
referencia del software que conecta con la elaboración
de páginas web en sus diferentes versiones, define una
estructura básica y un código (denominado código HTML)
para la definición de contenido de una página web, como
texto, imágenes, videos, juegos, entre otros.
Las Etiquetas
< > Sistema de marcado con etiquetas MAYOR QUE y
MENOR QUE.
Etiqueta de inicio <inicio>
Etiqueta de cierre </cierre>
<nombre>Contenido</nombre>
Cómo funciona?
El navegador busca las
etiquetas, las lee y realiza
la traducción según su
nombre.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hola Mundo</title>
</head>
<body>
<H1>Hola mundo!</H1>
</body>
</html>
Una página WEB
Etiquetas más usadas
<html>…</html> Indica al navegador que el archivo es un documento HTML
<head>…<head> Encabezado. Este puede tener más información.
<title>…</title> Titulo de la página, no es visible en el contenido.
<body>…</body> Cuerpo del documento HTML.
<center>..</center> Centra el contenido en la página.
<hr> Inserta una línea horizontal.
<h1>…</h1> Encabezado. Pueden ser H1 hasta H6
<p>…</p> Indica al navegar que el contenido es un parrafo.
<b>…</b> Texto en negrilla.
<i>…</i> Texto italizado.
Etiquetas más usadas
<ul>…</ul> Listas sin orden
<ol>…</ol> Lista ordenada
<li>…</li> Contenido de la lista
<table>…</table> Tabla
<tr>…</tr> Fila
<td>..</td> Celda
<img src=‘imagen.jpg’ align=‘bottom’> Insertar imagen
<a href=‘http://amazon.com’>Amazon</a> Insertar link
<a href=‘mailto:info@company.com’>info@company.com</a> Enlace de correo
DEMOSTRACIÓN
Estilos CSS
Qué es CSS?
Hoja de estilo en cascada o CSS (siglas en
inglés de cascading style sheets) es un
lenguaje usado para definir y crear la
presentación de un documento estructurado
escrito en HTML o XML
Cómo se usa?
<style>…</style>
Dónde lo ubico?
En el mismo documento
Como documento externo
DEMOSTRACIÓN
JAVASCRIP
Qué es?
JavaScript es un lenguaje de programación que se utiliza principalmente para
crear páginas web dinámicas.
Una página web dinámica es aquella que incorpora efectos como texto que
aparece y desaparece, animaciones, acciones que se activan al pulsar botones
y ventanas con mensajes de aviso al usuario.
Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo
que no es necesario compilar los programas para ejecutarlos. En otras
palabras, los programas escritos con JavaScript se pueden probar
directamente en cualquier navegador sin necesidad de procesos intermedios.
Cómo funciona?
https://templated.co/
http://www.mejoresplantillasgratis.es/free-templates.html
http://www.misplantillas.com/plantillas-web-gratis/
Recursos
http://librosweb.es/

Más contenido relacionado

La actualidad más candente

Etiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parteEtiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parteWendy Navia Chambi
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas htmldanneszm
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlDoraliza Hugo Vera
 
Programación en html 2
Programación en html 2Programación en html 2
Programación en html 2luchopaisa
 
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 WebJoshi Tüsa
 
Colegio nacional nicolas esguerra iii
Colegio nacional nicolas esguerra iiiColegio nacional nicolas esguerra iii
Colegio nacional nicolas esguerra iiiloerdtkt
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas htmldanneszm
 
Portafolio de Programación
Portafolio de ProgramaciónPortafolio de Programación
Portafolio de Programaciónevealc9
 
Colegio nicolas esgurra.
Colegio nicolas esgurra.Colegio nicolas esgurra.
Colegio nicolas esgurra.diego2934
 
Elementos básicos y estructura de una página web
Elementos básicos y estructura de una página webElementos básicos y estructura de una página web
Elementos básicos y estructura de una página webadri9610
 
Clase 1 periodo II html
Clase 1 periodo II  htmlClase 1 periodo II  html
Clase 1 periodo II htmlcrisotos
 

La actualidad más candente (19)

Etiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parteEtiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parte
 
Etiquetas de html
Etiquetas de htmlEtiquetas de html
Etiquetas de html
 
Billyordoñez
BillyordoñezBillyordoñez
Billyordoñez
 
Partes de Una Pagina Web
Partes de Una Pagina WebPartes de Una Pagina Web
Partes de Una Pagina Web
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje html
 
CSS Hoja de estilo en cascada
CSS   Hoja de estilo en cascadaCSS   Hoja de estilo en cascada
CSS Hoja de estilo en cascada
 
Programación en html 2
Programación en html 2Programación en html 2
Programación en html 2
 
Html
HtmlHtml
Html
 
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
 
Las etiquetas más utilizadas en html
Las etiquetas más utilizadas en htmlLas etiquetas más utilizadas en html
Las etiquetas más utilizadas en html
 
Neisa
NeisaNeisa
Neisa
 
Colegio nacional nicolas esguerra iii
Colegio nacional nicolas esguerra iiiColegio nacional nicolas esguerra iii
Colegio nacional nicolas esguerra iii
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Diapositivas
DiapositivasDiapositivas
Diapositivas
 
Portafolio de Programación
Portafolio de ProgramaciónPortafolio de Programación
Portafolio de Programación
 
Colegio nicolas esgurra.
Colegio nicolas esgurra.Colegio nicolas esgurra.
Colegio nicolas esgurra.
 
Elementos básicos y estructura de una página web
Elementos básicos y estructura de una página webElementos básicos y estructura de una página web
Elementos básicos y estructura de una página web
 
Clase 1 periodo II html
Clase 1 periodo II  htmlClase 1 periodo II  html
Clase 1 periodo II html
 

Destacado

Alimentación cardiosaludable
Alimentación cardiosaludable Alimentación cardiosaludable
Alimentación cardiosaludable aulasaludable
 
Tener una columna vertebral sana
Tener una columna vertebral sanaTener una columna vertebral sana
Tener una columna vertebral sanaRolando Chávez
 
Curso de iniciación al basquetbol
Curso de iniciación al basquetbolCurso de iniciación al basquetbol
Curso de iniciación al basquetbolEducagratis
 
Curso de Mitos y Leyendas
Curso de Mitos y LeyendasCurso de Mitos y Leyendas
Curso de Mitos y LeyendasEducagratis
 
Resumen de las expocion. gisela
Resumen de las expocion. giselaResumen de las expocion. gisela
Resumen de las expocion. giselaCarmenGiselaAcosta
 
Amanda Dollinger Resume (1)
Amanda Dollinger Resume (1)Amanda Dollinger Resume (1)
Amanda Dollinger Resume (1)Amanda Dollinger
 
Workplace Innovation &amp; Consulting
Workplace Innovation &amp; ConsultingWorkplace Innovation &amp; Consulting
Workplace Innovation &amp; Consultingivanrip
 
Sustancias Vitales: Líquidos corporales
Sustancias Vitales: Líquidos corporalesSustancias Vitales: Líquidos corporales
Sustancias Vitales: Líquidos corporalesDaniel Garcia
 
Decisiones de la EFSA sobre la fibra dietetica
Decisiones de la EFSA sobre la fibra dieteticaDecisiones de la EFSA sobre la fibra dietetica
Decisiones de la EFSA sobre la fibra dieteticaRica Cane
 
InterConnect2016 Report by BMXUG
InterConnect2016 Report by BMXUGInterConnect2016 Report by BMXUG
InterConnect2016 Report by BMXUGHarada Kazuki
 
Best Practices for Developing Your Emerging Leaders
Best Practices for Developing Your Emerging LeadersBest Practices for Developing Your Emerging Leaders
Best Practices for Developing Your Emerging LeadersBizLibrary
 
Moléculas biológicas 2
Moléculas biológicas 2Moléculas biológicas 2
Moléculas biológicas 2Rosmakoch
 
(2016 09-20)patologia no traumatica de la cadera del adulto(doc)
(2016 09-20)patologia no traumatica de la cadera del adulto(doc)(2016 09-20)patologia no traumatica de la cadera del adulto(doc)
(2016 09-20)patologia no traumatica de la cadera del adulto(doc)UDMAFyC SECTOR ZARAGOZA II
 

Destacado (15)

Alimentación cardiosaludable
Alimentación cardiosaludable Alimentación cardiosaludable
Alimentación cardiosaludable
 
Tener una columna vertebral sana
Tener una columna vertebral sanaTener una columna vertebral sana
Tener una columna vertebral sana
 
Curso de iniciación al basquetbol
Curso de iniciación al basquetbolCurso de iniciación al basquetbol
Curso de iniciación al basquetbol
 
Curso de Mitos y Leyendas
Curso de Mitos y LeyendasCurso de Mitos y Leyendas
Curso de Mitos y Leyendas
 
Resumen de las expocion. gisela
Resumen de las expocion. giselaResumen de las expocion. gisela
Resumen de las expocion. gisela
 
Amanda Dollinger Resume (1)
Amanda Dollinger Resume (1)Amanda Dollinger Resume (1)
Amanda Dollinger Resume (1)
 
Anticoagulación (para pacientes)
Anticoagulación (para pacientes)Anticoagulación (para pacientes)
Anticoagulación (para pacientes)
 
Workplace Innovation &amp; Consulting
Workplace Innovation &amp; ConsultingWorkplace Innovation &amp; Consulting
Workplace Innovation &amp; Consulting
 
Sustancias Vitales: Líquidos corporales
Sustancias Vitales: Líquidos corporalesSustancias Vitales: Líquidos corporales
Sustancias Vitales: Líquidos corporales
 
Decisiones de la EFSA sobre la fibra dietetica
Decisiones de la EFSA sobre la fibra dieteticaDecisiones de la EFSA sobre la fibra dietetica
Decisiones de la EFSA sobre la fibra dietetica
 
Ports and protocols
Ports and protocolsPorts and protocols
Ports and protocols
 
InterConnect2016 Report by BMXUG
InterConnect2016 Report by BMXUGInterConnect2016 Report by BMXUG
InterConnect2016 Report by BMXUG
 
Best Practices for Developing Your Emerging Leaders
Best Practices for Developing Your Emerging LeadersBest Practices for Developing Your Emerging Leaders
Best Practices for Developing Your Emerging Leaders
 
Moléculas biológicas 2
Moléculas biológicas 2Moléculas biológicas 2
Moléculas biológicas 2
 
(2016 09-20)patologia no traumatica de la cadera del adulto(doc)
(2016 09-20)patologia no traumatica de la cadera del adulto(doc)(2016 09-20)patologia no traumatica de la cadera del adulto(doc)
(2016 09-20)patologia no traumatica de la cadera del adulto(doc)
 

Similar a Una Página WEB (20)

MEJORES - Curso-HTML-+-CSS.pdf
MEJORES - Curso-HTML-+-CSS.pdfMEJORES - Curso-HTML-+-CSS.pdf
MEJORES - Curso-HTML-+-CSS.pdf
 
Curso-HTML--CSS.pdf
Curso-HTML--CSS.pdfCurso-HTML--CSS.pdf
Curso-HTML--CSS.pdf
 
Tecnologia Web - HTML
Tecnologia Web - HTMLTecnologia Web - HTML
Tecnologia Web - HTML
 
Html y css
Html y cssHtml y css
Html y css
 
Tema02 html
Tema02 htmlTema02 html
Tema02 html
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 
Html
HtmlHtml
Html
 
Valery....
Valery....Valery....
Valery....
 
Que es html
Que es htmlQue es html
Que es html
 
Clase Html + CSS
Clase Html + CSSClase Html + CSS
Clase Html + CSS
 
Html
HtmlHtml
Html
 
C2 lenguaje html
C2 lenguaje htmlC2 lenguaje html
C2 lenguaje html
 
HTML
HTMLHTML
HTML
 
[modo de compatibilidad] HTML
[modo de compatibilidad] HTML[modo de compatibilidad] HTML
[modo de compatibilidad] HTML
 
Producto 3
Producto 3Producto 3
Producto 3
 
Producto 3
Producto 3Producto 3
Producto 3
 
Producto 3 Juan Carlos y Cesar 9B
Producto 3 Juan Carlos y Cesar 9BProducto 3 Juan Carlos y Cesar 9B
Producto 3 Juan Carlos y Cesar 9B
 
Manual de-html
Manual de-htmlManual de-html
Manual de-html
 
Valery....
Valery....Valery....
Valery....
 
Valery....
Valery....Valery....
Valery....
 

Último

EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxMiguelAtencio10
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21mariacbr99
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanamcerpam
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfAnnimoUno1
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxAlan779941
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.FlorenciaCattelani
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estossgonzalezp1
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfvladimiroflores1
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...JohnRamos830530
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxJorgeParada26
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITMaricarmen Sánchez Ruiz
 

Último (11)

EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 

Una Página WEB

  • 2. Qué es HTML Hyper Text Markup Language Lenguaje de Marcas de Hipertexto: Hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros.
  • 3. Las Etiquetas < > Sistema de marcado con etiquetas MAYOR QUE y MENOR QUE. Etiqueta de inicio <inicio> Etiqueta de cierre </cierre> <nombre>Contenido</nombre>
  • 4. Cómo funciona? El navegador busca las etiquetas, las lee y realiza la traducción según su nombre. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hola Mundo</title> </head> <body> <H1>Hola mundo!</H1> </body> </html>
  • 6. Etiquetas más usadas <html>…</html> Indica al navegador que el archivo es un documento HTML <head>…<head> Encabezado. Este puede tener más información. <title>…</title> Titulo de la página, no es visible en el contenido. <body>…</body> Cuerpo del documento HTML. <center>..</center> Centra el contenido en la página. <hr> Inserta una línea horizontal. <h1>…</h1> Encabezado. Pueden ser H1 hasta H6 <p>…</p> Indica al navegar que el contenido es un parrafo. <b>…</b> Texto en negrilla. <i>…</i> Texto italizado.
  • 7. Etiquetas más usadas <ul>…</ul> Listas sin orden <ol>…</ol> Lista ordenada <li>…</li> Contenido de la lista <table>…</table> Tabla <tr>…</tr> Fila <td>..</td> Celda <img src=‘imagen.jpg’ align=‘bottom’> Insertar imagen <a href=‘http://amazon.com’>Amazon</a> Insertar link <a href=‘mailto:info@company.com’>info@company.com</a> Enlace de correo
  • 10. Qué es CSS? Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML
  • 12. Dónde lo ubico? En el mismo documento Como documento externo
  • 15. Qué es? JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas. Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario. Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.
  • 17.