SlideShare a Scribd company logo
1 of 16
1
ď‚—ĂŤndice:
ď‚—ÂżQue es HTML?...............................3
Estructura principal de HTML…….4
ď‚—Etiquetas principales de HTML..5-6
Hojas de estilo .css……………………….7
Ejemplos de HTML..……………….8-15
Conclusión..……………………………….16


                                                 2
¿Qué es HTML?
ď‚— El HTML, Hyper Text Markup Language (Lenguaje
  de marcaciĂłn de Hipertexto) es el lenguaje de
  marcas de texto utilizado normalmente en la www
  (World Wide Web). Fue creado en 1986 por el
  fĂ­sico nuclear Tim Berners-Lee; el cual tomo
 dos herramientas preexistentes: El concepto de
 Hipertexto (Conocido también como link o ancla)
 el cual permite conectar dos elementos entre si y el
 SGML (Lenguaje Estándar de Marcación General)
 el cual sirve para colocar etiquetas o marcas en un
 texto que indique como debe verse.


                                                        3
Estructura principal de HTML
ď‚— <html>
ď‚— <head>
ď‚— <title> Titulo </title>
ď‚— </head>
ď‚— <body>


ď‚— </body>
ď‚— <html>
________________________________________________
 Nota: todas las etiquetas que se abran deberán de ser
  cerradas con un “/”
                                                          4
Etiquetas principales de HTML
ď‚— Bgcolor: Esta es colocada dentro de la etiqueta body, es
    para dar un fondo de color a nuestra pagina
ď‚—   Background: Esta es colocada en la etiqueta body, es
    para poner de fondo una imagen a nuestra pagina
ď‚—   Text: Esta igual se pone en la etiqueta body, nos sirve
    para poner de un color nuestro texto de nuestra pagina
ď‚—   Center: Se pone el inicio y el final de un texto que
    queramos centrar
ď‚—   A href: se pone para poner una referencia o un enlace
    directo
ď‚—   Img src: Esta nos sirve para poner una imagen

                                                              5
Etiquetas principales de HTML
ď‚— Table: Nos sirve para poner una tabla en nuestra
    pagina
ď‚—   Tr: Se pone dentro de table para decirnos en donde
    comienza una fila
ď‚—   Td: Se pone dentro de table para decirnos en donde
    comienza una columna
ď‚—   Colspan: Se pone dentro de td y nos sirve para unir dos
    columnas
ď‚—   Rowspan: Se pone dentro de td y nos sirve para unir
    dos filas



                                                              6
Hojas de estilo .css
ď‚— CSS es una especificaciĂłn desarrollada por el W3C
 (World Wide Web Consortium) para permitir la
 separaciĂłn de los contenidos de los documentos
 escritos en HTML, XML, XHTML, SVG, o XUL de la
 presentacin del documento con las hojas de estilo,
 incluyendo elementos tales como los colores, fondos,
 márgenes, bordes, tipos de letra..., modificando as la
 apariencia de una página web de una forma más
 sencilla, permitiendo a los desarrolladores controlar el
 estilo y formato de sus documentos.



                                                            7
Ejemplos de HTML
ď‚— Html con bgcolor, text y center:
<html>
<head>
<title> 208 </title>
</head>
<body bgcolor="#c0c0c0" text="#ffffff">
<center>Zamora Santamaria Sebastian</center>
</body>
</html>

ď‚— Queda de la siguiente forma:

                                               8
9
ď‚— Html con background, text y center:
<html>
<head>
<title> 208 </title>
</head>
<body background="Freddie Mercury.JPG" text="#ffffff">
<center>Zamora Santamaria Sebastian</center>
</body>
</html>

ď‚— Queda de la siguiente forma:

                                                     10
11
ď‚— Html con a href y img src:
ď‚— <html>
ď‚— <head>
ď‚— <title> 208 </title>
ď‚— </head>
ď‚— <body> <center>Zamora Santamaria
    Sebastian</center>
ď‚—   <a href="javascript.html">Javascript</a><p>
ď‚—   <img src="FreddieMercury.jpg">
ď‚—   </body>
ď‚—   </html>
ď‚—   Queda de la siguiente forma:

                                                  12
13
ď‚— Html con table, tr, td, colspan y rowspan:
<html>
<head>
<title> Tabla </title>
</head>
<body>
<table width=10% border=1 cellspacing=10>
<tr>
<td colspan=2><center>1</center></td>
</tr>
<tr>
<td rowspan=2><center>3</center</td>
<td>4</td>
</tr>
<tr>
<td>6</td>
</tr>
</body>
</html>
ď‚— Queda de la siguiente forma:                 14
15
ConclusiĂłn
ď‚— Sin el lenguaje HTML el internet no seria lo
 que conocemos hoy en dĂ­a, la mayorĂ­a de
 todas las paginas que usamos dĂ­a tras dĂ­a
 están escritas en lenguaje HTML, es muy
 importante para un informático saber
 utilizar este lenguaje, ya que un informático
 lo usara a través de sus estudios y sus
 trabajos que ejecute.


                                                 16

More Related Content

What's hot (17)

Colegio nacional nicolas esguerra 2
Colegio nacional nicolas esguerra 2Colegio nacional nicolas esguerra 2
Colegio nacional nicolas esguerra 2
 
Colegio nacional nicolas esguerra 2
Colegio nacional nicolas esguerra 2Colegio nacional nicolas esguerra 2
Colegio nacional nicolas esguerra 2
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Etiquetas en Html
Etiquetas en HtmlEtiquetas en Html
Etiquetas en Html
 
Listado etiquetas html 5
Listado etiquetas html 5Listado etiquetas html 5
Listado etiquetas html 5
 
HTML
HTMLHTML
HTML
 
1.3.2 elementos del lenguaje html
1.3.2 elementos del lenguaje html1.3.2 elementos del lenguaje html
1.3.2 elementos del lenguaje html
 
Etiquetas de lenguaje html
Etiquetas de lenguaje htmlEtiquetas de lenguaje html
Etiquetas de lenguaje html
 
Etiquetas básicas en html
Etiquetas básicas en htmlEtiquetas básicas en html
Etiquetas básicas en html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Lenguaje html y sus usos
Lenguaje html y sus usosLenguaje html y sus usos
Lenguaje html y sus usos
 
Moniquita
MoniquitaMoniquita
Moniquita
 
Html word2
Html word2Html word2
Html word2
 
Etiquetas basicas html
Etiquetas basicas htmlEtiquetas basicas html
Etiquetas basicas html
 
¿Qué es CSS?
¿Qué es CSS?¿Qué es CSS?
¿Qué es CSS?
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 

Similar to Html (20)

PROCESO DE DESARROLLO JAVASCRIPT
PROCESO DE DESARROLLO JAVASCRIPTPROCESO DE DESARROLLO JAVASCRIPT
PROCESO DE DESARROLLO JAVASCRIPT
 
Sitio Web / IntroducciĂłn a HTML
Sitio Web / IntroducciĂłn a HTMLSitio Web / IntroducciĂłn a HTML
Sitio Web / IntroducciĂłn a HTML
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
Manual de introducciĂłn a CSS3
Manual de introducciĂłn a CSS3Manual de introducciĂłn a CSS3
Manual de introducciĂłn a CSS3
 
Manual de IntroducciĂłn a CSS3
Manual de IntroducciĂłn a CSS3Manual de IntroducciĂłn a CSS3
Manual de IntroducciĂłn a CSS3
 
Codigo html
Codigo htmlCodigo html
Codigo html
 
Intro paginasweb
Intro paginaswebIntro paginasweb
Intro paginasweb
 
Apuntes de HTML
Apuntes de HTMLApuntes de HTML
Apuntes de HTML
 
IntroducciĂłn a HTML5
IntroducciĂłn a HTML5IntroducciĂłn a HTML5
IntroducciĂłn a HTML5
 
Html
HtmlHtml
Html
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 
Html actividades 1
Html actividades  1Html actividades  1
Html actividades 1
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barreto
 
Diseño de página web
Diseño de página webDiseño de página web
Diseño de página web
 
Lenguaje de programación de páginas web
Lenguaje de programación de páginas webLenguaje de programación de páginas web
Lenguaje de programación de páginas web
 
Practicas html
Practicas htmlPracticas html
Practicas html
 
Taller de HTML
Taller de HTMLTaller de HTML
Taller de HTML
 
HTML
HTMLHTML
HTML
 
HTML
HTMLHTML
HTML
 
Html
HtmlHtml
Html
 

Recently uploaded

POWER POINT YUCRAElabore una PRESENTACIĂ“N CORTA sobre el video pelĂ­cula: La C...
POWER POINT YUCRAElabore una PRESENTACIĂ“N CORTA sobre el video pelĂ­cula: La C...POWER POINT YUCRAElabore una PRESENTACIĂ“N CORTA sobre el video pelĂ­cula: La C...
POWER POINT YUCRAElabore una PRESENTACIĂ“N CORTA sobre el video pelĂ­cula: La C...silviayucra2
 
PresentaciĂłn guĂ­a sencilla en Microsoft Excel.pptx
PresentaciĂłn guĂ­a sencilla en Microsoft Excel.pptxPresentaciĂłn guĂ­a sencilla en Microsoft Excel.pptx
PresentaciĂłn guĂ­a sencilla en Microsoft Excel.pptxLolaBunny11
 
Global Azure Lima 2024 - IntegraciĂłn de Datos con Microsoft Fabric
Global Azure Lima 2024 - IntegraciĂłn de Datos con Microsoft FabricGlobal Azure Lima 2024 - IntegraciĂłn de Datos con Microsoft Fabric
Global Azure Lima 2024 - IntegraciĂłn de Datos con Microsoft FabricKeyla Dolores MĂ©ndez
 
Trabajo Mas Completo De Excel en clase tecnologĂ­a
Trabajo Mas Completo De Excel en clase tecnologĂ­aTrabajo Mas Completo De Excel en clase tecnologĂ­a
Trabajo Mas Completo De Excel en clase tecnologĂ­assuserf18419
 
guĂ­a de registro de slideshare por Brayan Joseph
guĂ­a de registro de slideshare por Brayan JosephguĂ­a de registro de slideshare por Brayan Joseph
guĂ­a de registro de slideshare por Brayan JosephBRAYANJOSEPHPEREZGOM
 
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
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)GDGSucre
 
Desarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfDesarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfJulian Lamprea
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveFagnerLisboa3
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx241521559
 

Recently uploaded (10)

POWER POINT YUCRAElabore una PRESENTACIĂ“N CORTA sobre el video pelĂ­cula: La C...
POWER POINT YUCRAElabore una PRESENTACIĂ“N CORTA sobre el video pelĂ­cula: La C...POWER POINT YUCRAElabore una PRESENTACIĂ“N CORTA sobre el video pelĂ­cula: La C...
POWER POINT YUCRAElabore una PRESENTACIĂ“N CORTA sobre el video pelĂ­cula: La C...
 
PresentaciĂłn guĂ­a sencilla en Microsoft Excel.pptx
PresentaciĂłn guĂ­a sencilla en Microsoft Excel.pptxPresentaciĂłn guĂ­a sencilla en Microsoft Excel.pptx
PresentaciĂłn guĂ­a sencilla en Microsoft Excel.pptx
 
Global Azure Lima 2024 - IntegraciĂłn de Datos con Microsoft Fabric
Global Azure Lima 2024 - IntegraciĂłn de Datos con Microsoft FabricGlobal Azure Lima 2024 - IntegraciĂłn de Datos con Microsoft Fabric
Global Azure Lima 2024 - IntegraciĂłn de Datos con Microsoft Fabric
 
Trabajo Mas Completo De Excel en clase tecnologĂ­a
Trabajo Mas Completo De Excel en clase tecnologĂ­aTrabajo Mas Completo De Excel en clase tecnologĂ­a
Trabajo Mas Completo De Excel en clase tecnologĂ­a
 
guĂ­a de registro de slideshare por Brayan Joseph
guĂ­a de registro de slideshare por Brayan JosephguĂ­a de registro de slideshare por Brayan Joseph
guĂ­a de registro de slideshare por Brayan Joseph
 
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
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
 
Desarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfDesarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdf
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
 

Html

  • 1. 1
  • 2. ď‚—ĂŤndice: ď‚—ÂżQue es HTML?...............................3 ď‚—Estructura principal de HTML…….4 ď‚—Etiquetas principales de HTML..5-6 ď‚—Hojas de estilo .css……………………….7 ď‚—Ejemplos de HTML..……………….8-15 ď‚—ConclusiĂłn..……………………………….16 2
  • 3. ÂżQuĂ© es HTML? ď‚— El HTML, Hyper Text Markup Language (Lenguaje de marcaciĂłn de Hipertexto) es el lenguaje de marcas de texto utilizado normalmente en la www (World Wide Web). Fue creado en 1986 por el fĂ­sico nuclear Tim Berners-Lee; el cual tomo dos herramientas preexistentes: El concepto de Hipertexto (Conocido tambiĂ©n como link o ancla) el cual permite conectar dos elementos entre si y el SGML (Lenguaje Estándar de MarcaciĂłn General) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse. 3
  • 4. Estructura principal de HTML ď‚— <html> ď‚— <head> ď‚— <title> Titulo </title> ď‚— </head> ď‚— <body> ď‚— </body> ď‚— <html> ________________________________________________ ď‚— Nota: todas las etiquetas que se abran deberán de ser cerradas con un “/” 4
  • 5. Etiquetas principales de HTML ď‚— Bgcolor: Esta es colocada dentro de la etiqueta body, es para dar un fondo de color a nuestra pagina ď‚— Background: Esta es colocada en la etiqueta body, es para poner de fondo una imagen a nuestra pagina ď‚— Text: Esta igual se pone en la etiqueta body, nos sirve para poner de un color nuestro texto de nuestra pagina ď‚— Center: Se pone el inicio y el final de un texto que queramos centrar ď‚— A href: se pone para poner una referencia o un enlace directo ď‚— Img src: Esta nos sirve para poner una imagen 5
  • 6. Etiquetas principales de HTML ď‚— Table: Nos sirve para poner una tabla en nuestra pagina ď‚— Tr: Se pone dentro de table para decirnos en donde comienza una fila ď‚— Td: Se pone dentro de table para decirnos en donde comienza una columna ď‚— Colspan: Se pone dentro de td y nos sirve para unir dos columnas ď‚— Rowspan: Se pone dentro de td y nos sirve para unir dos filas 6
  • 7. Hojas de estilo .css ď‚— CSS es una especificaciĂłn desarrollada por el W3C (World Wide Web Consortium) para permitir la separaciĂłn de los contenidos de los documentos escritos en HTML, XML, XHTML, SVG, o XUL de la presentacin del documento con las hojas de estilo, incluyendo elementos tales como los colores, fondos, márgenes, bordes, tipos de letra..., modificando as la apariencia de una página web de una forma más sencilla, permitiendo a los desarrolladores controlar el estilo y formato de sus documentos. 7
  • 8. Ejemplos de HTML ď‚— Html con bgcolor, text y center: <html> <head> <title> 208 </title> </head> <body bgcolor="#c0c0c0" text="#ffffff"> <center>Zamora Santamaria Sebastian</center> </body> </html> ď‚— Queda de la siguiente forma: 8
  • 9. 9
  • 10. ď‚— Html con background, text y center: <html> <head> <title> 208 </title> </head> <body background="Freddie Mercury.JPG" text="#ffffff"> <center>Zamora Santamaria Sebastian</center> </body> </html> ď‚— Queda de la siguiente forma: 10
  • 11. 11
  • 12. ď‚— Html con a href y img src: ď‚— <html> ď‚— <head> ď‚— <title> 208 </title> ď‚— </head> ď‚— <body> <center>Zamora Santamaria Sebastian</center> ď‚— <a href="javascript.html">Javascript</a><p> ď‚— <img src="FreddieMercury.jpg"> ď‚— </body> ď‚— </html> ď‚— Queda de la siguiente forma: 12
  • 13. 13
  • 14. ď‚— Html con table, tr, td, colspan y rowspan: <html> <head> <title> Tabla </title> </head> <body> <table width=10% border=1 cellspacing=10> <tr> <td colspan=2><center>1</center></td> </tr> <tr> <td rowspan=2><center>3</center</td> <td>4</td> </tr> <tr> <td>6</td> </tr> </body> </html> ď‚— Queda de la siguiente forma: 14
  • 15. 15
  • 16. ConclusiĂłn ď‚— Sin el lenguaje HTML el internet no seria lo que conocemos hoy en dĂ­a, la mayorĂ­a de todas las paginas que usamos dĂ­a tras dĂ­a están escritas en lenguaje HTML, es muy importante para un informático saber utilizar este lenguaje, ya que un informático lo usara a travĂ©s de sus estudios y sus trabajos que ejecute. 16