SlideShare una empresa de Scribd logo
«etiquetas», rodeadas por
           corchetes angulares (<,>)


MIME: Multipurpose Internet
     Mail Extensions




     [Lenguaje de Marcado de Hipertexto ]
HTML Tags (Etiquetas HTML), Tim Berners-Lee en 1991




 Boceto Hypertext Markup Language de Berners-Lee y Dan
Connolly, el cual incluía una Definición de Tipo de Documento
                SGML para definir la gramática



IETF Internet EngineeringTaskForce (Grupo Especial
sobre Ingeniería de Internet1 )




 SGML son las siglas de Standard Generalized Markup Language
                                  o
           "Estándar de Lenguaje de Marcado Generalizado"
El W3C (World Wide Web Consortiun) es un consorcio internacional donde
Organizaciones miembro, Personal Full-time y el público en general trabajan para
                          desarrollar Estándares Web.
  La misión del W3C es la de maximizar el potencial de la WWW desarrollando
       protocolos y guías que aseguren el crecimiento futuro de la Web.
El lenguaje HTML puede ser creado y editado
  con cualquier editor de textos básico, como
 puede ser Gedit en Linux, el Bloc de notas de
 Windows, o cualquier otro editor que admita
texto sin formato como GNU Emacs, Microsoft
   Wordpad, TextPad, Vim, Notepad++, entre
                     otros.
Algunos tipos de Elementos:

Estructurales:
Describen el propósito del texto y no denotan ningún formato específico. Por
ejemplo: <h1>Curso HTML</h1>
Presentacion:
Describen la apariencia del texto, independientemente de su función. Por ejemplo:
<b>Curso HTML</b> Los elementos de presentación se encuentran obsoletos
desde la aparición del CSS.
HiperTexto:
Relaciona una parte del documento a otros documentos.
Por ejemplo:
<a href=“http://www.cema.edu.ar”>Universidad del Cema</a>
Toda página web empieza con la
etiqueta <HTML> dentro de la
cual se almacena todo el código
de la página web.
Las instrucciones HTML deben
abrirse con los operadores < > y
cerrarse con </ >.
A continuación se ubica el <HEAD>, o
cabecera, dentro de la cual se ubica el título
de la página web, este es reconocido, en una
   de sus pestañas, por el navegador que
             permite visualizarla.
El <Body> permite almacenar todo el código
          que necesitas para insertar
tablas, párrafos, imágenes, colores, enlaces, y
    demás recursos que necesite tu página
 web, lo que se encuentre aquí se visualizará
                   en pantalla.
  Todas las instrucciones que abras (<body>)
        necesitaran cerrarse (</body>)
PASO 1.Abrir el editor de texto sin formato (bloc de notas)
PASO 2.Iniciar la estructura de la página web con el código HTML
PASO 3.Ubicate dentro de las instrucciones <html> y abre una nueva instrucción:
<head>, no olvides cerrarla </head>.
PASO 4.Dentro de las instrucciones <head> ubicamos una nueva: <title> la cual
establecerá el título de la página, no olvides cerrarla </title>
PASO 5.Abre la instrucción <body> dentro de esta irá todo el cuerpo de la página
web, solo lo que se enuentre aquí se pordra visualizar en pantalla, no olvides cerrarla
</body>
PASO 6.Ubícate dentro de la instrucción <body> para incluir un titulo a tu página, hazlo
con la instrucción <h1> que sirve para agregar encabezados, no olvides cerrar la
instrucción </h1>.Dentro de ellas puedes escribir un título
PASO 7.Aun dentro de la instrucción <body> agrega párrafos con la instrucción <p>, no
olvides cerrarla </p>
GUARDAR LA PÁGINA WEB
Haz clic en Archivo, Guardar Como:
Index.html porque es una página de inicio, y
escoges enTipo de documento: Todos los
archivos.Ubica el archivo en el escritorio para
que sea de facil acceso.¡Y a Guardar y
ejecutar nuestra página web!

Si ubicaste el archivo en el escritorio de tu
computador, solo debes ir allí y hacer doble
clic en el archivo, el cual tendrá un icono con
la imagen de tu navegador.
PASO 8.Le hace falta un color de fondo ¿verdad?Utiliza la instrucción Bgcolor, añade al
<body> asi como se muestra en la imagen.El color debe escribirse en ingles o
hexadecimal (es el color codificado en letras y números)
Html
Html
Html
Html
Html
Html
Html
Html
Html
Html
Html
Html
Html
Html
Html
Html
Html
Html
Html
Html
Html
Html
Html

Más contenido relacionado

La actualidad más candente

Unidad 1
Unidad 1Unidad 1
Noe html poer
Noe html poerNoe html poer
Noe html poer
Wolf Dark
 
Informatica tp2
Informatica tp2Informatica tp2
Informatica tp2
Santy Muro
 
Folleto informatica basica
Folleto informatica basicaFolleto informatica basica
Folleto informatica basica
Nombre Apellidos
 
Guia no 1 cómo crear mi propia web
Guia no 1 cómo crear mi propia webGuia no 1 cómo crear mi propia web
Guia no 1 cómo crear mi propia web
profetellez
 
LENGUAJE, HISTORIA Y ETIQUETAS HTML
LENGUAJE, HISTORIA Y ETIQUETAS HTMLLENGUAJE, HISTORIA Y ETIQUETAS HTML
LENGUAJE, HISTORIA Y ETIQUETAS HTML
juanalejandroloaiza
 
Que es el htlm
Que es el htlmQue es el htlm
Que es el htlm
abriljennifer
 
evaluacion 2 párcial 2 quimestre primero bachillerato
evaluacion 2 párcial 2 quimestre primero bachilleratoevaluacion 2 párcial 2 quimestre primero bachillerato
evaluacion 2 párcial 2 quimestre primero bachillerato
Fanny Olmedo Ríos
 
Html
HtmlHtml
Colegionacionalnicolasesguerra 120914133034-phpapp02
Colegionacionalnicolasesguerra 120914133034-phpapp02Colegionacionalnicolasesguerra 120914133034-phpapp02
Colegionacionalnicolasesguerra 120914133034-phpapp02
nicolas-1996
 
El doctype de HTML5
El doctype de HTML5El doctype de HTML5
El doctype de HTML5
Francisco Javier Arce Anguiano
 

La actualidad más candente (11)

Unidad 1
Unidad 1Unidad 1
Unidad 1
 
Noe html poer
Noe html poerNoe html poer
Noe html poer
 
Informatica tp2
Informatica tp2Informatica tp2
Informatica tp2
 
Folleto informatica basica
Folleto informatica basicaFolleto informatica basica
Folleto informatica basica
 
Guia no 1 cómo crear mi propia web
Guia no 1 cómo crear mi propia webGuia no 1 cómo crear mi propia web
Guia no 1 cómo crear mi propia web
 
LENGUAJE, HISTORIA Y ETIQUETAS HTML
LENGUAJE, HISTORIA Y ETIQUETAS HTMLLENGUAJE, HISTORIA Y ETIQUETAS HTML
LENGUAJE, HISTORIA Y ETIQUETAS HTML
 
Que es el htlm
Que es el htlmQue es el htlm
Que es el htlm
 
evaluacion 2 párcial 2 quimestre primero bachillerato
evaluacion 2 párcial 2 quimestre primero bachilleratoevaluacion 2 párcial 2 quimestre primero bachillerato
evaluacion 2 párcial 2 quimestre primero bachillerato
 
Html
HtmlHtml
Html
 
Colegionacionalnicolasesguerra 120914133034-phpapp02
Colegionacionalnicolasesguerra 120914133034-phpapp02Colegionacionalnicolasesguerra 120914133034-phpapp02
Colegionacionalnicolasesguerra 120914133034-phpapp02
 
El doctype de HTML5
El doctype de HTML5El doctype de HTML5
El doctype de HTML5
 

Destacado

Origen del Internet
Origen del InternetOrigen del Internet
Origen del Internet
Silvana Cadena
 
Re-Design
Re-Design Re-Design
Re-Design
filexmaster
 
Un día en clase
Un día en claseUn día en clase
Un día en clasemartafayos
 
Solidos cristalinos
Solidos cristalinosSolidos cristalinos
Solidos cristalinos
Javier LopintaCh
 
Musica MóDulo Marta
Musica MóDulo MartaMusica MóDulo Marta
Musica MóDulo Marta
Emília Oranías Brugué
 
Tek gear
Tek gearTek gear
El ser humano y el lenguaje
El ser humano y el lenguajeEl ser humano y el lenguaje
El ser humano y el lenguaje
Pool Anthony Relicario Quispe
 
Power point2
Power point2Power point2
Power point2ngreen1
 
Red social myspace
Red social myspaceRed social myspace
Red social myspace
stevens vasquez mosquera
 
Historia del internet
Historia del internet Historia del internet
Historia del internet
chiquilinthehardcore
 
Diodo
DiodoDiodo
Doutoramento TIC na Educação 2012
Doutoramento TIC na Educação 2012Doutoramento TIC na Educação 2012
Doutoramento TIC na Educação 2012
Guilhermina Miranda
 
E book - ereader
E book  -  ereaderE book  -  ereader
E book - ereader
segundoaebook
 
Plant a Row for the Hungry Brochure- Gardner Writers Association
Plant a Row for the Hungry Brochure- Gardner Writers AssociationPlant a Row for the Hungry Brochure- Gardner Writers Association
Plant a Row for the Hungry Brochure- Gardner Writers Association
Firaki958x
 
CONTE SOBRE LA DIADA DE MENORCA
CONTE SOBRE LA DIADA DE MENORCACONTE SOBRE LA DIADA DE MENORCA
CONTE SOBRE LA DIADA DE MENORCA
LauraGR
 
Redes informáticas
Redes informáticasRedes informáticas
Redes informáticas
leaoferrantao
 
Internet
InternetInternet
Internet
Andy Almazan
 
Nicolas
NicolasNicolas
Nicolas
Nicolas Amado
 
Insertar texto con diferentes propiedades
Insertar texto con diferentes propiedadesInsertar texto con diferentes propiedades
Insertar texto con diferentes propiedades
Nicolas Amado
 

Destacado (20)

Origen del Internet
Origen del InternetOrigen del Internet
Origen del Internet
 
Re-Design
Re-Design Re-Design
Re-Design
 
Un día en clase
Un día en claseUn día en clase
Un día en clase
 
Solidos cristalinos
Solidos cristalinosSolidos cristalinos
Solidos cristalinos
 
Musica MóDulo Marta
Musica MóDulo MartaMusica MóDulo Marta
Musica MóDulo Marta
 
Tek gear
Tek gearTek gear
Tek gear
 
El ser humano y el lenguaje
El ser humano y el lenguajeEl ser humano y el lenguaje
El ser humano y el lenguaje
 
Processen eerst!
Processen eerst!Processen eerst!
Processen eerst!
 
Power point2
Power point2Power point2
Power point2
 
Red social myspace
Red social myspaceRed social myspace
Red social myspace
 
Historia del internet
Historia del internet Historia del internet
Historia del internet
 
Diodo
DiodoDiodo
Diodo
 
Doutoramento TIC na Educação 2012
Doutoramento TIC na Educação 2012Doutoramento TIC na Educação 2012
Doutoramento TIC na Educação 2012
 
E book - ereader
E book  -  ereaderE book  -  ereader
E book - ereader
 
Plant a Row for the Hungry Brochure- Gardner Writers Association
Plant a Row for the Hungry Brochure- Gardner Writers AssociationPlant a Row for the Hungry Brochure- Gardner Writers Association
Plant a Row for the Hungry Brochure- Gardner Writers Association
 
CONTE SOBRE LA DIADA DE MENORCA
CONTE SOBRE LA DIADA DE MENORCACONTE SOBRE LA DIADA DE MENORCA
CONTE SOBRE LA DIADA DE MENORCA
 
Redes informáticas
Redes informáticasRedes informáticas
Redes informáticas
 
Internet
InternetInternet
Internet
 
Nicolas
NicolasNicolas
Nicolas
 
Insertar texto con diferentes propiedades
Insertar texto con diferentes propiedadesInsertar texto con diferentes propiedades
Insertar texto con diferentes propiedades
 

Similar a Html

Html
HtmlHtml
Html
arm_d
 
Html
HtmlHtml
Html
HtmlHtml
Html
jhonfc444
 
Html
HtmlHtml
Html
HtmlHtml
Html
omaryessi
 
Html
HtmlHtml
Html
HtmlHtml
expo html
expo htmlexpo html
expo html
Joan Villarreal
 
Html
Html Html
Guia 1 introduccion al html inesani 2016
Guia 1 introduccion al html inesani 2016Guia 1 introduccion al html inesani 2016
Guia 1 introduccion al html inesani 2016
profetellez
 
Html
HtmlHtml
Curso de html
Curso de htmlCurso de html
Curso de html
Carlos Narvaez
 
Html
HtmlHtml
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
Carlos Cubillos
 
Htlm
HtlmHtlm
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
Universidad Católica de Colombia
 
Html 1
Html 1Html 1
Html 1
MaGaby Ruiz
 
HTML 2
HTML 2 HTML 2
Colegio nacional nicolas esguerra
Colegio  nacional nicolas esguerraColegio  nacional nicolas esguerra
Colegio nacional nicolas esguerra
Universidad Católica de Colombia
 
Guia html 1
Guia html 1Guia html 1

Similar a Html (20)

Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
expo html
expo htmlexpo html
expo html
 
Html
Html Html
Html
 
Guia 1 introduccion al html inesani 2016
Guia 1 introduccion al html inesani 2016Guia 1 introduccion al html inesani 2016
Guia 1 introduccion al html inesani 2016
 
Html
HtmlHtml
Html
 
Curso de html
Curso de htmlCurso de html
Curso de html
 
Html
HtmlHtml
Html
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Htlm
HtlmHtlm
Htlm
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Html 1
Html 1Html 1
Html 1
 
HTML 2
HTML 2 HTML 2
HTML 2
 
Colegio nacional nicolas esguerra
Colegio  nacional nicolas esguerraColegio  nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Guia html 1
Guia html 1Guia html 1
Guia html 1
 

Más de arubio9

Exposicionhiipi 120605125103-phpapp02.odp [reparado]
Exposicionhiipi 120605125103-phpapp02.odp [reparado]Exposicionhiipi 120605125103-phpapp02.odp [reparado]
Exposicionhiipi 120605125103-phpapp02.odp [reparado]
arubio9
 
-phpapp01
-phpapp01-phpapp01
-phpapp01
arubio9
 
Sinttulo1 120508125851-phpapp01
Sinttulo1 120508125851-phpapp01Sinttulo1 120508125851-phpapp01
Sinttulo1 120508125851-phpapp01
arubio9
 
Lastics 120527141743-phpapp01
Lastics 120527141743-phpapp01Lastics 120527141743-phpapp01
Lastics 120527141743-phpapp01
arubio9
 
Computadores
ComputadoresComputadores
Computadores
arubio9
 
Fotos UNU
Fotos UNUFotos UNU
Fotos UNU
arubio9
 
Computadores
ComputadoresComputadores
Computadores
arubio9
 
Computadores
ComputadoresComputadores
Computadores
arubio9
 

Más de arubio9 (9)

Exposicionhiipi 120605125103-phpapp02.odp [reparado]
Exposicionhiipi 120605125103-phpapp02.odp [reparado]Exposicionhiipi 120605125103-phpapp02.odp [reparado]
Exposicionhiipi 120605125103-phpapp02.odp [reparado]
 
-phpapp01
-phpapp01-phpapp01
-phpapp01
 
Sinttulo1 120508125851-phpapp01
Sinttulo1 120508125851-phpapp01Sinttulo1 120508125851-phpapp01
Sinttulo1 120508125851-phpapp01
 
Lastics 120527141743-phpapp01
Lastics 120527141743-phpapp01Lastics 120527141743-phpapp01
Lastics 120527141743-phpapp01
 
Computadores
ComputadoresComputadores
Computadores
 
Fotos UNU
Fotos UNUFotos UNU
Fotos UNU
 
Fotos
FotosFotos
Fotos
 
Computadores
ComputadoresComputadores
Computadores
 
Computadores
ComputadoresComputadores
Computadores
 

Html

  • 1.
  • 2. «etiquetas», rodeadas por corchetes angulares (<,>) MIME: Multipurpose Internet Mail Extensions [Lenguaje de Marcado de Hipertexto ]
  • 3. HTML Tags (Etiquetas HTML), Tim Berners-Lee en 1991 Boceto Hypertext Markup Language de Berners-Lee y Dan Connolly, el cual incluía una Definición de Tipo de Documento SGML para definir la gramática IETF Internet EngineeringTaskForce (Grupo Especial sobre Ingeniería de Internet1 ) SGML son las siglas de Standard Generalized Markup Language o "Estándar de Lenguaje de Marcado Generalizado"
  • 4. El W3C (World Wide Web Consortiun) es un consorcio internacional donde Organizaciones miembro, Personal Full-time y el público en general trabajan para desarrollar Estándares Web. La misión del W3C es la de maximizar el potencial de la WWW desarrollando protocolos y guías que aseguren el crecimiento futuro de la Web.
  • 5.
  • 6. El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como puede ser Gedit en Linux, el Bloc de notas de Windows, o cualquier otro editor que admita texto sin formato como GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++, entre otros.
  • 7. Algunos tipos de Elementos: Estructurales: Describen el propósito del texto y no denotan ningún formato específico. Por ejemplo: <h1>Curso HTML</h1> Presentacion: Describen la apariencia del texto, independientemente de su función. Por ejemplo: <b>Curso HTML</b> Los elementos de presentación se encuentran obsoletos desde la aparición del CSS. HiperTexto: Relaciona una parte del documento a otros documentos. Por ejemplo: <a href=“http://www.cema.edu.ar”>Universidad del Cema</a>
  • 8. Toda página web empieza con la etiqueta <HTML> dentro de la cual se almacena todo el código de la página web. Las instrucciones HTML deben abrirse con los operadores < > y cerrarse con </ >.
  • 9. A continuación se ubica el <HEAD>, o cabecera, dentro de la cual se ubica el título de la página web, este es reconocido, en una de sus pestañas, por el navegador que permite visualizarla.
  • 10. El <Body> permite almacenar todo el código que necesitas para insertar tablas, párrafos, imágenes, colores, enlaces, y demás recursos que necesite tu página web, lo que se encuentre aquí se visualizará en pantalla. Todas las instrucciones que abras (<body>) necesitaran cerrarse (</body>)
  • 11. PASO 1.Abrir el editor de texto sin formato (bloc de notas)
  • 12. PASO 2.Iniciar la estructura de la página web con el código HTML
  • 13. PASO 3.Ubicate dentro de las instrucciones <html> y abre una nueva instrucción: <head>, no olvides cerrarla </head>.
  • 14. PASO 4.Dentro de las instrucciones <head> ubicamos una nueva: <title> la cual establecerá el título de la página, no olvides cerrarla </title>
  • 15. PASO 5.Abre la instrucción <body> dentro de esta irá todo el cuerpo de la página web, solo lo que se enuentre aquí se pordra visualizar en pantalla, no olvides cerrarla </body>
  • 16. PASO 6.Ubícate dentro de la instrucción <body> para incluir un titulo a tu página, hazlo con la instrucción <h1> que sirve para agregar encabezados, no olvides cerrar la instrucción </h1>.Dentro de ellas puedes escribir un título
  • 17. PASO 7.Aun dentro de la instrucción <body> agrega párrafos con la instrucción <p>, no olvides cerrarla </p>
  • 18. GUARDAR LA PÁGINA WEB Haz clic en Archivo, Guardar Como: Index.html porque es una página de inicio, y escoges enTipo de documento: Todos los archivos.Ubica el archivo en el escritorio para que sea de facil acceso.¡Y a Guardar y ejecutar nuestra página web! Si ubicaste el archivo en el escritorio de tu computador, solo debes ir allí y hacer doble clic en el archivo, el cual tendrá un icono con la imagen de tu navegador.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26. PASO 8.Le hace falta un color de fondo ¿verdad?Utiliza la instrucción Bgcolor, añade al <body> asi como se muestra en la imagen.El color debe escribirse en ingles o hexadecimal (es el color codificado en letras y números)