SlideShare una empresa de Scribd logo
1 de 49
«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)
expo html
expo html
expo html
expo html
expo html
expo html
expo html
expo html
expo html
expo html
expo html
expo html
expo html
expo html
expo html
expo html
expo html
expo html
expo html
expo html
expo html
expo html
expo html

Más contenido relacionado

La actualidad más candente (8)

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
 
Trabajo 905
Trabajo 905Trabajo 905
Trabajo 905
 
Colegio nicolas esguerra222
Colegio nicolas esguerra222Colegio nicolas esguerra222
Colegio nicolas esguerra222
 
Html
HtmlHtml
Html
 
Colegionacionalnicolasesguerra 120914133034-phpapp02
Colegionacionalnicolasesguerra 120914133034-phpapp02Colegionacionalnicolasesguerra 120914133034-phpapp02
Colegionacionalnicolasesguerra 120914133034-phpapp02
 

Destacado (20)

Graficos r
Graficos rGraficos r
Graficos r
 
Presentación1
Presentación1Presentación1
Presentación1
 
Ecuaciones de bernoulli
Ecuaciones de bernoulliEcuaciones de bernoulli
Ecuaciones de bernoulli
 
Phpgaby
PhpgabyPhpgaby
Phpgaby
 
Router
RouterRouter
Router
 
Presentación de los sistemas operativos
Presentación de los sistemas operativosPresentación de los sistemas operativos
Presentación de los sistemas operativos
 
Dispositivos
Dispositivos Dispositivos
Dispositivos
 
Presentación de 18 tips
Presentación de 18 tipsPresentación de 18 tips
Presentación de 18 tips
 
Cualidades de un texto escrito 10
Cualidades de un texto escrito 10Cualidades de un texto escrito 10
Cualidades de un texto escrito 10
 
La informática educativa
La informática educativaLa informática educativa
La informática educativa
 
莫言 Final pptx
莫言 Final pptx莫言 Final pptx
莫言 Final pptx
 
LA EVOLUCION DE LA WEB
LA  EVOLUCION DE LA WEBLA  EVOLUCION DE LA WEB
LA EVOLUCION DE LA WEB
 
Panos2
Panos2Panos2
Panos2
 
Teen wolf
Teen wolfTeen wolf
Teen wolf
 
Manual de pagina web en word
Manual de pagina web en wordManual de pagina web en word
Manual de pagina web en word
 
Austria
AustriaAustria
Austria
 
Idiomas
IdiomasIdiomas
Idiomas
 
Via sacra
Via sacraVia sacra
Via sacra
 
A forza do feminismo
A forza do feminismoA forza do feminismo
A forza do feminismo
 
Activ morfología
Activ morfologíaActiv morfología
Activ morfología
 

Similar a expo html

Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
Carlos Cubillos
 
Codigos html y como crear una pagina Web
Codigos html y como crear una pagina WebCodigos html y como crear una pagina Web
Codigos html y como crear una pagina Web
Joshi Tüsa
 
Colegio nicolas esguerra222
Colegio nicolas esguerra222Colegio nicolas esguerra222
Colegio nicolas esguerra222
SoloCaliRadical
 
Colegio nicolas esguerra222
Colegio nicolas esguerra222Colegio nicolas esguerra222
Colegio nicolas esguerra222
SoloCaliRadical
 

Similar a expo 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
 
Codigos html y como crear una pagina Web
Codigos html y como crear una pagina WebCodigos html y como crear una pagina Web
Codigos html y como crear una pagina Web
 
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
 
Colegio nicolas esguerra222
Colegio nicolas esguerra222Colegio nicolas esguerra222
Colegio nicolas esguerra222
 
Colegio nicolas esguerra222
Colegio nicolas esguerra222Colegio nicolas esguerra222
Colegio nicolas esguerra222
 

Más de Joan Villarreal (7)

Tablacanchas
TablacanchasTablacanchas
Tablacanchas
 
282987006 fase-2-trabajo-control
282987006 fase-2-trabajo-control282987006 fase-2-trabajo-control
282987006 fase-2-trabajo-control
 
Exposicion hiipi libre office
Exposicion hiipi libre officeExposicion hiipi libre office
Exposicion hiipi libre office
 
Hipi iii
Hipi iiiHipi iii
Hipi iii
 
En clase de hipi iii
En clase de hipi iiiEn clase de hipi iii
En clase de hipi iii
 
El c omputador
El c omputadorEl c omputador
El c omputador
 
El c omputador
El c omputadorEl c omputador
El c omputador
 

Último

FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
El Fortí
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
JonathanCovena1
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
UPTAIDELTACHIRA
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
EliaHernndez7
 

Último (20)

Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcción
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfGUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
 
Infografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdfInfografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdf
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literario
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
 
Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024
 
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJOACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
 
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
 

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