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

dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptMiguelAtencio10
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfSergioMendoza354770
 
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersSalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersIván López Martín
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...FacuMeza2
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxaylincamaho
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA241531640
 
definicion segun autores de matemáticas educativa
definicion segun autores de matemáticas  educativadefinicion segun autores de matemáticas  educativa
definicion segun autores de matemáticas educativaAdrianaMartnez618894
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxazmysanros90
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafiosFundación YOD YOD
 
Arenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxArenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxJOSEFERNANDOARENASCA
 
ejercicios pseint para aprogramacion sof
ejercicios pseint para aprogramacion sofejercicios pseint para aprogramacion sof
ejercicios pseint para aprogramacion sofJuancarlosHuertasNio1
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.241514949
 
R1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaR1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaarkananubis
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024GiovanniJavierHidalg
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxNombre Apellidos
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdfIsabellaMontaomurill
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadMiguelAngelVillanuev48
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx241523733
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesFundación YOD YOD
 
El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELmaryfer27m
 

Último (20)

dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.ppt
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
 
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersSalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
 
definicion segun autores de matemáticas educativa
definicion segun autores de matemáticas  educativadefinicion segun autores de matemáticas  educativa
definicion segun autores de matemáticas educativa
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptx
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafios
 
Arenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxArenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptx
 
ejercicios pseint para aprogramacion sof
ejercicios pseint para aprogramacion sofejercicios pseint para aprogramacion sof
ejercicios pseint para aprogramacion sof
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.
 
R1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaR1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en mina
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidad
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
 
El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFEL
 

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