SlideShare una empresa de Scribd logo
1 de 5
¿Qué es HTML?
HTML significa HyperTextMarkupLanguage. Es la etiqueta que define el inicio del
documento html, le indica al navegador que todo lo que viene a continuación debe
tratarlo como una serie de códigos html. Los documentos HTML son ficheros de texto
plano (también conocidos como ASCII) que pueden ser editados con cualquier editor
de texto (como Vim o el "Bloc de notas" de Windows).El nombre de los ficheros
escritos en lenguaje HTML suelen tener la extensión html.


                       Nociones Básicas de HTML

El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico,
como puede ser el Bloc de Notas de Windows (o Notepad), o cualquier otro editor que
admita texto sin formato como GNU Emacs, Microsoft Wordpad, Text Pad? etc.


Existen además, otros programas para la realización de sitios Web o edición de código
HTML, como por ejemplo Microsoft Front Page, el cual tiene un formato básico
parecido al resto de los programas de Office. También existe el famoso software de
Adobe (quién adquirió la empresa Macromedia) llamado Dreamweaver, siendo uno de
los más utilizados en el ámbito de diseño y programación Web. Estos programas se les
conoce como editores WYSIWYG o WhatYouSeeIsWhatYouGet (en español: “lo que ves
es lo que obtienes”). Esto significa que son editores los cuales van mostrando el
resultado de lo que se está editando en tiempo real a medida que se va desarrollando
el documento. Ahora bien, esto no significa una manera distinta de realizar sitios web,
sino que una forma un tanto más simple ya que estos programas, además de tener la
opción de trabajar con la vista preliminar, tiene su propia sección HTML la cual va
generando todo el código a medida que se va trabajando. Combinar estos dos
métodos resulta muy interesante, ya que de alguna manera se ayudan entre sí. Por
ejemplo; si estoy editando todo en HTML y de pronto olvido algún código o etiqueta,
simplemente me dirijo al editor visual o WYSIWYG y continuo ahí la edición, o
viceversa, ya que hay casos en que sale más rápido y fácil escribir directamente el
código de alguna característica que queramos adherirle al sitio, que buscar la opción


                                                            Navarrete Delgado Marcos
en el programa mismo.HTML utiliza etiquetas o marcas, que consisten en breves
instrucciones de comienzo y final, mediante las cuales se determinan la forma en la
que debe aparecer en su navegador el texto, así como también las imágenes y los
demás elementos, en la pantalla del ordenador.


Toda etiqueta se identifica porque está encerrada entre los signos menor que y mayor
que (<>), y algunas tienen atributos que pueden tomar algún valor. En general las
etiquetas se aplicarán de dos formas especiales:


Se abren y se cierran, como por ejemplo: <b>negrilla</b> que se vería en su navegador
como negrilla.


No pueden abrirse y cerrarse, como <hr> que se vería en su navegador como una línea
horizontal.


Otras que pueden abrirse y cerrarse, como por ejemplo <p>.


Las etiquetas básicas o mínimas son:


<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>


<html lang=“es”>

<head>

<title>Ejemplo</title>

</head>

<body>

<p>ejemplo</p>

</body>

</html>




                                                         Navarrete Delgado Marcos
Lenguaje HTML Básico.



 Etiqueta                                             Descripción
 <!DOCTYPE>

                                              Se usa cuando se utilizan CSS.
    Strict
                       Presenta elementos en proceso de transición de acuerdo a los estándares del
 Transitional                                            W3C.
   Frames                           Debe usarse en documentos que incluyen frames
<html></html>                               Abre y cierra un documento HTML
<head></head>          Encabezado de la página - aquí se coloca título, metatags, e información para
                              buscadores entre otras cosas. Está información no es visible.
<body></body>               Dentro de esta etiqueta va toda la parte visible de la página web




                                Etiquetas HTML de Texto




                 Etiquetas                                        Descripción
                <pre></pre>                                  Texto pre-formateado
                 <hl></hl>                                     Título más grande
                 <h6></h6>                                    Título más pequeño
                  <b></b>                                           Negritas
                  <u></u>                                          Subrayado
                   <i></i>                                          Cursivas
                 <tt></tt>                                  Tipo máquina de escribir
                <cite></cite>                                    Cita, en cursiva


                                                                 Navarrete Delgado Marcos
<em></em>                         Resalta una palabra, negrita o cursiva
 <strong></strong>                  Resalta una palabra o grupo de palabras
<fontface=?></font>            Coloca el tipo de letra: por ejemplo, arial, verdana,
                                                    courier,etc.
<fontsize=?></font>                     Coloca tamaño de letra, de 1 a 7
<font color=?></font>         Configura el color, usand valor hexadecimal o nombre
                                             directo (blue, green, etc.)




                      Formato y Presentación


    Etiquetas                                     Descripción

     <p></p>                                      Nuevo párrafo

    <p align=?>              Alinea el párrafo hacia la izquierda, derecha o al centro

       <br>                       Inserta un interlineado suave. Crea otra línea

  <blockquote>                          Texto indentado de ambos lados
  </blockquote>
    <dl></dl>                            Lista de definiciones (glosario)

       <dt>                          Precede a cada término en definiciones

       <dd>                                  Precede cada definición

     <ol></ol>                                   Lista ordenada

     <li></li>                                 Entrada en una lista

     <ul></ul>                            Lista con viñetas sin ordenar

   <divalign=?>                Para formato a porciones grandes del documento
                                       html, incluyendo hojas de estilo




                                                  Navarrete Delgado Marcos
Elementos Gráficos


          Etiquetas                                     Descripción

       <imgsrc="name">                             Incorpora una imagen

   <imgsrc="name" align=?>              Alinea la imagen: izquierda, derecha y centro

   <imgsrc="name" border=?>          Determina el contorno de la imagen. Un valor 0 no
                                                     tendrá contorno
        <map></map>                                 Mapa de imágenes

<body background="URL o ruta de          Coloca la imagen como fondo de la página
       archivo"></body>
              <hr>                                    Linea horizontal

          <hrsize=?>                           Tamaño de una linea horizontal

         <hrwidth=?>                 Ancho de linea horizontal, ya sea porcentaje o valor
                                                          absoluto.
         <hrnoshade>                             Linea horizontal sin sombra




                                                      Navarrete Delgado Marcos

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Curso HTML 5 & jQuery - Leccion 5
Curso HTML 5 & jQuery - Leccion 5Curso HTML 5 & jQuery - Leccion 5
Curso HTML 5 & jQuery - Leccion 5
 
Etiquetas Html Udp
Etiquetas Html UdpEtiquetas Html Udp
Etiquetas Html Udp
 
Páginas web en formato HTML
Páginas web en formato HTMLPáginas web en formato HTML
Páginas web en formato HTML
 
Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4
 
Comandos de html
Comandos de htmlComandos de html
Comandos de html
 
Curso HTML 5 & jQuery - Leccion 6
Curso HTML 5 & jQuery - Leccion 6Curso HTML 5 & jQuery - Leccion 6
Curso HTML 5 & jQuery - Leccion 6
 
Deber k riss
Deber k rissDeber k riss
Deber k riss
 
Manual de html
Manual de htmlManual de html
Manual de html
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1 Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1
 
Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2
 
Introducción a CSS
Introducción a CSSIntroducción a CSS
Introducción a CSS
 
Html-CSS
Html-CSSHtml-CSS
Html-CSS
 
Listado de etiquetas y atributos html
Listado de etiquetas y atributos htmlListado de etiquetas y atributos html
Listado de etiquetas y atributos html
 
1 crear pag formatos
1 crear pag formatos1 crear pag formatos
1 crear pag formatos
 
Html5
Html5Html5
Html5
 
Temas de html
Temas de htmlTemas de html
Temas de html
 
Etiquetas Basicas de Html
Etiquetas Basicas de HtmlEtiquetas Basicas de Html
Etiquetas Basicas de Html
 
El lenguaje html
El lenguaje htmlEl lenguaje html
El lenguaje html
 
Páginas web con html
Páginas web con htmlPáginas web con html
Páginas web con html
 

Destacado

Destacado (20)

Data2maps@HackForGood
Data2maps@HackForGoodData2maps@HackForGood
Data2maps@HackForGood
 
Aaron
AaronAaron
Aaron
 
Publisher tutorial
Publisher tutorialPublisher tutorial
Publisher tutorial
 
Estadistica
EstadisticaEstadistica
Estadistica
 
Diapositivas multi html
Diapositivas multi htmlDiapositivas multi html
Diapositivas multi html
 
Biomoleculas
BiomoleculasBiomoleculas
Biomoleculas
 
Etiquetas rfid
Etiquetas rfidEtiquetas rfid
Etiquetas rfid
 
Tema 11
Tema 11Tema 11
Tema 11
 
Debate 3 Modelo de congreso: Roser Marquet congres semfyc 2012 versió def
Debate 3 Modelo de congreso:  Roser Marquet congres semfyc 2012 versió defDebate 3 Modelo de congreso:  Roser Marquet congres semfyc 2012 versió def
Debate 3 Modelo de congreso: Roser Marquet congres semfyc 2012 versió def
 
Explora
ExploraExplora
Explora
 
Dengue
DengueDengue
Dengue
 
Manejo de la informacionii
Manejo de la informacioniiManejo de la informacionii
Manejo de la informacionii
 
Generacion del 98 por Mariela Chasiquiza
Generacion del 98 por Mariela ChasiquizaGeneracion del 98 por Mariela Chasiquiza
Generacion del 98 por Mariela Chasiquiza
 
Dolarizacion
DolarizacionDolarizacion
Dolarizacion
 
Algebra de boole circuitos y puertas logicas
Algebra de boole circuitos y puertas logicasAlgebra de boole circuitos y puertas logicas
Algebra de boole circuitos y puertas logicas
 
Portu RojiBlanco
Portu RojiBlancoPortu RojiBlanco
Portu RojiBlanco
 
Tic project
Tic projectTic project
Tic project
 
Sesión 6
Sesión 6Sesión 6
Sesión 6
 
Frances
FrancesFrances
Frances
 
Mesa 2 Atención compartida al paciente oncológico Fernando Lópeez Verde
Mesa 2 Atención compartida al paciente oncológico Fernando Lópeez VerdeMesa 2 Atención compartida al paciente oncológico Fernando Lópeez Verde
Mesa 2 Atención compartida al paciente oncológico Fernando Lópeez Verde
 

Similar a Estructura html

Similar a Estructura html (20)

Deber de pagina wed..!!!
Deber de pagina wed..!!!Deber de pagina wed..!!!
Deber de pagina wed..!!!
 
comandos de pagina web
comandos de pagina webcomandos de pagina web
comandos de pagina web
 
Etiqueta de html
Etiqueta de htmlEtiqueta de html
Etiqueta de html
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
Elianyyyyy
ElianyyyyyElianyyyyy
Elianyyyyy
 
Elianyyyyy
ElianyyyyyElianyyyyy
Elianyyyyy
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje html
 
Deber de Programación Web / Etiquetas mas utilizadas del lenguaje html
Deber de Programación Web / Etiquetas mas utilizadas del lenguaje htmlDeber de Programación Web / Etiquetas mas utilizadas del lenguaje html
Deber de Programación Web / Etiquetas mas utilizadas del lenguaje html
 
Deber de Programacion Web
Deber de Programacion WebDeber de Programacion Web
Deber de Programacion Web
 
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdfGUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
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
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barreto
 
Guia de repaso html11
Guia de repaso html11Guia de repaso html11
Guia de repaso html11
 
Producto 4
Producto 4Producto 4
Producto 4
 
Html
HtmlHtml
Html
 
Codigo html
Codigo htmlCodigo html
Codigo html
 

Último

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
 
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
 
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
 
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
 
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
 
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
 
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
 
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
 
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
 

Último (10)

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
 
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
 
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
 
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
 
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
 
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
 
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
 
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)
 
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
 

Estructura html

  • 1. ¿Qué es HTML? HTML significa HyperTextMarkupLanguage. Es la etiqueta que define el inicio del documento html, le indica al navegador que todo lo que viene a continuación debe tratarlo como una serie de códigos html. Los documentos HTML son ficheros de texto plano (también conocidos como ASCII) que pueden ser editados con cualquier editor de texto (como Vim o el "Bloc de notas" de Windows).El nombre de los ficheros escritos en lenguaje HTML suelen tener la extensión html. Nociones Básicas de HTML El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como puede ser el Bloc de Notas de Windows (o Notepad), o cualquier otro editor que admita texto sin formato como GNU Emacs, Microsoft Wordpad, Text Pad? etc. Existen además, otros programas para la realización de sitios Web o edición de código HTML, como por ejemplo Microsoft Front Page, el cual tiene un formato básico parecido al resto de los programas de Office. También existe el famoso software de Adobe (quién adquirió la empresa Macromedia) llamado Dreamweaver, siendo uno de los más utilizados en el ámbito de diseño y programación Web. Estos programas se les conoce como editores WYSIWYG o WhatYouSeeIsWhatYouGet (en español: “lo que ves es lo que obtienes”). Esto significa que son editores los cuales van mostrando el resultado de lo que se está editando en tiempo real a medida que se va desarrollando el documento. Ahora bien, esto no significa una manera distinta de realizar sitios web, sino que una forma un tanto más simple ya que estos programas, además de tener la opción de trabajar con la vista preliminar, tiene su propia sección HTML la cual va generando todo el código a medida que se va trabajando. Combinar estos dos métodos resulta muy interesante, ya que de alguna manera se ayudan entre sí. Por ejemplo; si estoy editando todo en HTML y de pronto olvido algún código o etiqueta, simplemente me dirijo al editor visual o WYSIWYG y continuo ahí la edición, o viceversa, ya que hay casos en que sale más rápido y fácil escribir directamente el código de alguna característica que queramos adherirle al sitio, que buscar la opción Navarrete Delgado Marcos
  • 2. en el programa mismo.HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determinan la forma en la que debe aparecer en su navegador el texto, así como también las imágenes y los demás elementos, en la pantalla del ordenador. Toda etiqueta se identifica porque está encerrada entre los signos menor que y mayor que (<>), y algunas tienen atributos que pueden tomar algún valor. En general las etiquetas se aplicarán de dos formas especiales: Se abren y se cierran, como por ejemplo: <b>negrilla</b> que se vería en su navegador como negrilla. No pueden abrirse y cerrarse, como <hr> que se vería en su navegador como una línea horizontal. Otras que pueden abrirse y cerrarse, como por ejemplo <p>. Las etiquetas básicas o mínimas son: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html lang=“es”> <head> <title>Ejemplo</title> </head> <body> <p>ejemplo</p> </body> </html> Navarrete Delgado Marcos
  • 3. Lenguaje HTML Básico. Etiqueta Descripción <!DOCTYPE> Se usa cuando se utilizan CSS. Strict Presenta elementos en proceso de transición de acuerdo a los estándares del Transitional W3C. Frames Debe usarse en documentos que incluyen frames <html></html> Abre y cierra un documento HTML <head></head> Encabezado de la página - aquí se coloca título, metatags, e información para buscadores entre otras cosas. Está información no es visible. <body></body> Dentro de esta etiqueta va toda la parte visible de la página web Etiquetas HTML de Texto Etiquetas Descripción <pre></pre> Texto pre-formateado <hl></hl> Título más grande <h6></h6> Título más pequeño <b></b> Negritas <u></u> Subrayado <i></i> Cursivas <tt></tt> Tipo máquina de escribir <cite></cite> Cita, en cursiva Navarrete Delgado Marcos
  • 4. <em></em> Resalta una palabra, negrita o cursiva <strong></strong> Resalta una palabra o grupo de palabras <fontface=?></font> Coloca el tipo de letra: por ejemplo, arial, verdana, courier,etc. <fontsize=?></font> Coloca tamaño de letra, de 1 a 7 <font color=?></font> Configura el color, usand valor hexadecimal o nombre directo (blue, green, etc.) Formato y Presentación Etiquetas Descripción <p></p> Nuevo párrafo <p align=?> Alinea el párrafo hacia la izquierda, derecha o al centro <br> Inserta un interlineado suave. Crea otra línea <blockquote> Texto indentado de ambos lados </blockquote> <dl></dl> Lista de definiciones (glosario) <dt> Precede a cada término en definiciones <dd> Precede cada definición <ol></ol> Lista ordenada <li></li> Entrada en una lista <ul></ul> Lista con viñetas sin ordenar <divalign=?> Para formato a porciones grandes del documento html, incluyendo hojas de estilo Navarrete Delgado Marcos
  • 5. Elementos Gráficos Etiquetas Descripción <imgsrc="name"> Incorpora una imagen <imgsrc="name" align=?> Alinea la imagen: izquierda, derecha y centro <imgsrc="name" border=?> Determina el contorno de la imagen. Un valor 0 no tendrá contorno <map></map> Mapa de imágenes <body background="URL o ruta de Coloca la imagen como fondo de la página archivo"></body> <hr> Linea horizontal <hrsize=?> Tamaño de una linea horizontal <hrwidth=?> Ancho de linea horizontal, ya sea porcentaje o valor absoluto. <hrnoshade> Linea horizontal sin sombra Navarrete Delgado Marcos