SlideShare uma empresa Scribd logo
1 de 49
Baixar para ler offline
Html
«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.
Html
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.
Html
Html
Html
Html
Html
Html
Html
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

Mais conteúdo relacionado

Mais procurados (12)

Que es el htlm
Que es el htlmQue es el htlm
Que es el htlm
 
Informatica tp2
Informatica tp2Informatica tp2
Informatica tp2
 
Folleto informatica basica
Folleto informatica basicaFolleto informatica basica
Folleto informatica basica
 
LENGUAJE, HISTORIA Y ETIQUETAS HTML
LENGUAJE, HISTORIA Y ETIQUETAS HTMLLENGUAJE, HISTORIA Y ETIQUETAS HTML
LENGUAJE, HISTORIA Y ETIQUETAS HTML
 
Trabajo 905
Trabajo 905Trabajo 905
Trabajo 905
 
Html
HtmlHtml
Html
 
Colegionacionalnicolasesguerra 120914133034-phpapp02
Colegionacionalnicolasesguerra 120914133034-phpapp02Colegionacionalnicolasesguerra 120914133034-phpapp02
Colegionacionalnicolasesguerra 120914133034-phpapp02
 
Curso basico de html
Curso basico de         htmlCurso basico de         html
Curso basico de html
 
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
 
Mary html
Mary htmlMary html
Mary html
 
El doctype de HTML5
El doctype de HTML5El doctype de HTML5
El doctype de HTML5
 
HTML
HTMLHTML
HTML
 

Destaque

Destaque (20)

Silabo Módulo I
Silabo Módulo ISilabo Módulo I
Silabo Módulo I
 
130203 agenda nacional
130203 agenda nacional130203 agenda nacional
130203 agenda nacional
 
Facebook
FacebookFacebook
Facebook
 
Bag Making PF
Bag Making PFBag Making PF
Bag Making PF
 
Creative Commons & Particle Systems
Creative Commons & Particle SystemsCreative Commons & Particle Systems
Creative Commons & Particle Systems
 
Como escrever para blogs
Como escrever para blogsComo escrever para blogs
Como escrever para blogs
 
Presentación1
Presentación1Presentación1
Presentación1
 
Importancia de los valores para una convivencia social
Importancia de los valores para una convivencia socialImportancia de los valores para una convivencia social
Importancia de los valores para una convivencia social
 
Caracteristicas capi
Caracteristicas capiCaracteristicas capi
Caracteristicas capi
 
Marco teorico completo
Marco teorico completoMarco teorico completo
Marco teorico completo
 
Diseccion del pez
Diseccion del pezDiseccion del pez
Diseccion del pez
 
Visita cultural a la Sierra de Montánchez
Visita cultural a la Sierra de MontánchezVisita cultural a la Sierra de Montánchez
Visita cultural a la Sierra de Montánchez
 
Comportamientos digitales..e.1002
Comportamientos digitales..e.1002Comportamientos digitales..e.1002
Comportamientos digitales..e.1002
 
Institucional Quanam
Institucional QuanamInstitucional Quanam
Institucional Quanam
 
Programación actual antena 3
Programación actual antena 3Programación actual antena 3
Programación actual antena 3
 
Axiologia anomia
Axiologia anomiaAxiologia anomia
Axiologia anomia
 
Poema jac
Poema jacPoema jac
Poema jac
 
14 a legislativo rafael carvalho
14 a legislativo    rafael carvalho14 a legislativo    rafael carvalho
14 a legislativo rafael carvalho
 
Me
MeMe
Me
 
Pastel eggs
Pastel eggsPastel eggs
Pastel eggs
 

Semelhante a Html (20)

Curso de html
Curso de htmlCurso de html
Curso de html
 
Html
HtmlHtml
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
 
Colegio nacional nicolas esguerra html
Colegio nacional nicolas esguerra htmlColegio nacional nicolas esguerra html
Colegio nacional nicolas esguerra html
 
Colegio nacional nicolas esguerra html
Colegio nacional nicolas esguerra htmlColegio nacional nicolas esguerra html
Colegio nacional nicolas esguerra html
 
Unidad 1
Unidad 1Unidad 1
Unidad 1
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Htlm
HtlmHtlm
Htlm
 
Nombres
NombresNombres
Nombres
 
Nombres
NombresNombres
Nombres
 
primera c
primera cprimera c
primera c
 
Nombres
NombresNombres
Nombres
 
HTML 2
HTML 2 HTML 2
HTML 2
 
Colegio nacional nicolas esguerra
Colegio  nacional nicolas esguerraColegio  nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Clase 1
Clase 1Clase 1
Clase 1
 
Guia html 1
Guia html 1Guia html 1
Guia html 1
 
Guia#1 info
Guia#1 infoGuia#1 info
Guia#1 info
 
Html 1
Html 1Html 1
Html 1
 

Html

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