SlideShare una empresa de Scribd logo
1 de 13
Descargar para leer sin conexión
FACILITADOR: MORENO DUGLAS
¿QUE ES HTML?
¿Qué es HTML?
             HTML (Hypertext Markup Language)
   Hypertext    Es texto ordinario al que se le incorporan
    funcionalidades adicionales como: Formato, Imágenes,
    Multimedia y enlaces a otro documento.

   Markup      Es el proceso de tomar el texto ordinario e
    incorporarle símbolos adicionales. Cada uno de estos
    símbolos identifica a un comando que le indica al
    navegador como mostrar ese texto.
Página Web
             •Párrafos      •Tablas
Estructura   •Encabezados   •Capas
             •Listas        •Etc.
                                      HTML
               •Textos
Contenido      •Imágenes
               •Enlaces
Elementos del HTML
Los elementos son los componentes fundamentales del HTML

Cuentan con 2 propiedades básicas: Atributos, Contenido

En general se conforman con una Etiqueta de Apertura y otra
  Cierre.

Los atributos se colocan dentro la etiqueta de apertura, y el
  contenido se coloca entre la etiqueta de apertura y la de cierre.
                                            Elemento
            Etiqueta de Apertura             Contenido     Etiqueta de Cierre

                               <p align=“center”>Curso HTML CEMA</p>
                                   Nombre    Valor
                                      Atributo
Atributos
Los atributos de un elemento son pares de nombres
 y valores separados por un „=„ que se encuentran
 dentro de la etiqueta de apertura de algún
 elemento. Los valores deben estar entre comillas.

 Ejemplo:
 <span id=„iddeesteelemento' style='color:red;'
 title=„Curso de HTML„> Curso de HTML
    </span>
Algunos tipos de Elementos
                                           Tipos de Elementos
Estructurales
Describen el propósito del texto y no denotan ningún formato específico.
Por ejemplo: <h1>Curso HTML</h1>
De Presentación
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.
De Hipertexto
Relaciona una parte del documento a otros documentos.
Por ejemplo: <a href=“http://www.google.com.ve”>Google</a>
<HTML>… </HTML>                              Estructura de un
   Delimita el Documento HTML             Documento de HTML
<HEAD> … </HEAD>
   Delimita el encabezado del Documento HTML
   En general incluye los metadatos del documentos y Scripts.

<BODY> … </BODY>
   Delimita el Cuerpo del Documento HTML.
   Es donde se incluyen los contenidos visibles del documento.
Ejemplo

   <html>
      <head>
               Aquí se incluyen os distintos elementos del encabezado
      </head>
               <body>
   Aquí se incluyen los distintos elementos contenedores o scripts
               </body>
                       </html>
Elementos del HEAD
Alguno de los elementos factibles de incluir en el HEAD son:
<TITLE> … </TITLE>
   Define el título del documento HTML

<SCRIPT> … </SCRIPT>
   Se utiliza para incluir programas al documento. En general se tratan de
   Javascripts.

<STYLE> … </STYLE>
   Especifica un estilo CSS para ser utilizado en el documento.

<META> … </META>
   Permite especificar información de interés como: autor, fecha de
   publicación, descripción, palabras claves, etc.
UNA PÁGINA BÁSICA

El lenguaje trabaja a base de etiquetas.
La información que aparece dentro de estas
  estará influenciada por las mismas.
  <xxx> Inicio de una etiqueta.
  </xxx> Cierre de una etiqueta.
Todo el documento debe estar entre las etiquetas
 <HTML> Y </HTML>.
El documento está dividido en dos partes principales:
  El encabezamiento
  En este hay información que no se ve en la
  pantalla principal.
  Este debe ser corto y descriptivo, ya que
  será lo que verán las personas cuando
  añadan la página a sus favoritos.
La etiqueta del encabezamiento se trabajará de la
  siguiente manera:
  <HEAD>Texto</HEAD>
La etiqueta del cuerpo será:
  <BODY>Texto</BODY>
La etiqueta del título será:
  <TITLE>Texto</TITLE>
La estructura básica de las partes de una página
 Web son:


  <HTML>
  <HEAD><TITLE>título </TITLE></HEAD>
  <BODY>Es la información que mostrará la
   página al usuario </BODY>
  </HTML>

Más contenido relacionado

La actualidad más candente (20)

Primera Clase de xhtml
Primera Clase de xhtmlPrimera Clase de xhtml
Primera Clase de xhtml
 
Presentacion asignatura
Presentacion asignaturaPresentacion asignatura
Presentacion asignatura
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html5
Html5Html5
Html5
 
Html
HtmlHtml
Html
 
Ac programacion
Ac programacionAc programacion
Ac programacion
 
Investigacion de html y xml
Investigacion de html y xmlInvestigacion de html y xml
Investigacion de html y xml
 
Diferencia entre html y xml
Diferencia  entre html y xmlDiferencia  entre html y xml
Diferencia entre html y xml
 
Steven Toala 2c3
Steven Toala 2c3Steven Toala 2c3
Steven Toala 2c3
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Helen Valverde 2C3
Helen Valverde 2C3Helen Valverde 2C3
Helen Valverde 2C3
 
Html
HtmlHtml
Html
 
Deber de htmly xml
Deber de htmly xmlDeber de htmly xml
Deber de htmly xml
 
Curso html
Curso   htmlCurso   html
Curso html
 
Html 121
Html 121Html 121
Html 121
 
Html danny
Html dannyHtml danny
Html danny
 
C3 lenguaje de presentación.
C3 lenguaje de presentación.C3 lenguaje de presentación.
C3 lenguaje de presentación.
 
Html y HTML5
Html y HTML5Html y HTML5
Html y HTML5
 
Presentación html
Presentación htmlPresentación html
Presentación html
 

Destacado (16)

Hojas estilo
Hojas estiloHojas estilo
Hojas estilo
 
Presentación de Algoritmos
Presentación de AlgoritmosPresentación de Algoritmos
Presentación de Algoritmos
 
Segunda Clase de xhtml
Segunda Clase de xhtmlSegunda Clase de xhtml
Segunda Clase de xhtml
 
Php
PhpPhp
Php
 
Manejo de archivos
Manejo de archivosManejo de archivos
Manejo de archivos
 
Clase tres de xhtml
Clase tres de xhtmlClase tres de xhtml
Clase tres de xhtml
 
Seguridad De InformacióN Iso 27001
Seguridad De InformacióN Iso 27001Seguridad De InformacióN Iso 27001
Seguridad De InformacióN Iso 27001
 
Crear una página básica en HTML
Crear una página básica en HTMLCrear una página básica en HTML
Crear una página básica en HTML
 
Algoritmo
AlgoritmoAlgoritmo
Algoritmo
 
Introducción a Python
Introducción a PythonIntroducción a Python
Introducción a Python
 
Etiquetas en Html
Etiquetas en HtmlEtiquetas en Html
Etiquetas en Html
 
INFOGRAFIA DE PHP
INFOGRAFIA DE PHPINFOGRAFIA DE PHP
INFOGRAFIA DE PHP
 
Infografia de PHP
Infografia de PHPInfografia de PHP
Infografia de PHP
 
Presentacion idioma phyton (1)
Presentacion idioma phyton (1)Presentacion idioma phyton (1)
Presentacion idioma phyton (1)
 
Introducción a Phyton
Introducción a PhytonIntroducción a Phyton
Introducción a Phyton
 
Introducción a Phyton
Introducción a PhytonIntroducción a Phyton
Introducción a Phyton
 

Similar a CLASE DE HTML

Html conceptos basicos presentacion no1
Html conceptos basicos presentacion  no1Html conceptos basicos presentacion  no1
Html conceptos basicos presentacion no1
fgabycastillo
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barreto
Mariana Barreto
 

Similar a CLASE DE HTML (20)

Tipo
TipoTipo
Tipo
 
Camilo diaz
Camilo diazCamilo diaz
Camilo diaz
 
Estructura del código HTML5.pptx
Estructura del código HTML5.pptxEstructura del código HTML5.pptx
Estructura del código HTML5.pptx
 
05 Introduccion a HTML
05 Introduccion a HTML05 Introduccion a HTML
05 Introduccion a HTML
 
Tema2(1)
Tema2(1)Tema2(1)
Tema2(1)
 
Tema2(1)
Tema2(1)Tema2(1)
Tema2(1)
 
Producto 3
Producto 3Producto 3
Producto 3
 
Clase HTML.pptx
Clase HTML.pptxClase HTML.pptx
Clase HTML.pptx
 
Html conceptos basicos presentacion no1
Html conceptos basicos presentacion  no1Html conceptos basicos presentacion  no1
Html conceptos basicos presentacion no1
 
HTML_Estructura Basica.pptx
HTML_Estructura Basica.pptxHTML_Estructura Basica.pptx
HTML_Estructura Basica.pptx
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barreto
 
Programación para web
Programación para webProgramación para web
Programación para web
 
Presentacion sobre html
Presentacion sobre htmlPresentacion sobre html
Presentacion sobre html
 
Html - Tema 1
Html - Tema 1Html - Tema 1
Html - Tema 1
 
Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1 Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1
 
05introduccionhtml 100901142734-phpapp02
05introduccionhtml 100901142734-phpapp0205introduccionhtml 100901142734-phpapp02
05introduccionhtml 100901142734-phpapp02
 
Html juan miro y manuel poveda acabado
Html juan miro y manuel poveda acabadoHtml juan miro y manuel poveda acabado
Html juan miro y manuel poveda acabado
 
Html geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldanaHtml geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldana
 
Expo html
Expo htmlExpo html
Expo html
 
Html
HtmlHtml
Html
 

Más de Duglas Oswaldo Moreno Mendoza

Más de Duglas Oswaldo Moreno Mendoza (20)

Fases dek Diseño Instruccional
Fases dek Diseño InstruccionalFases dek Diseño Instruccional
Fases dek Diseño Instruccional
 
Diseño Instruccional
Diseño InstruccionalDiseño Instruccional
Diseño Instruccional
 
Ponencia Seguridad de Datos
Ponencia Seguridad de DatosPonencia Seguridad de Datos
Ponencia Seguridad de Datos
 
Sematicas cabecera
Sematicas cabeceraSematicas cabecera
Sematicas cabecera
 
Nuevas Etiquetas
Nuevas EtiquetasNuevas Etiquetas
Nuevas Etiquetas
 
Meta etiquetas
Meta etiquetasMeta etiquetas
Meta etiquetas
 
Formularios
FormulariosFormularios
Formularios
 
Elementos de audio
Elementos de audioElementos de audio
Elementos de audio
 
Introducción al HTML
Introducción al HTML Introducción al HTML
Introducción al HTML
 
Moodle como una herramienta de Enseñanza y Aprendizaje en la Educación Virtual
Moodle como una herramienta de Enseñanza y Aprendizaje en la Educación VirtualMoodle como una herramienta de Enseñanza y Aprendizaje en la Educación Virtual
Moodle como una herramienta de Enseñanza y Aprendizaje en la Educación Virtual
 
Una biografía que es como un cuento
Una biografía que es como un cuentoUna biografía que es como un cuento
Una biografía que es como un cuento
 
Observador del conocimmiento n°1 vol 2
Observador del conocimmiento n°1 vol 2Observador del conocimmiento n°1 vol 2
Observador del conocimmiento n°1 vol 2
 
Observador del conocimmiento n°1 vol 1
Observador del conocimmiento n°1 vol 1Observador del conocimmiento n°1 vol 1
Observador del conocimmiento n°1 vol 1
 
Manual programacion Android
Manual programacion AndroidManual programacion Android
Manual programacion Android
 
Variables y Bucles
Variables y BuclesVariables y Bucles
Variables y Bucles
 
Historia de PHP
Historia de PHPHistoria de PHP
Historia de PHP
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Satelite Miranda
Satelite MirandaSatelite Miranda
Satelite Miranda
 
Las Leyes de la Semillas
Las Leyes de la SemillasLas Leyes de la Semillas
Las Leyes de la Semillas
 
Flujogramas
FlujogramasFlujogramas
Flujogramas
 

Último

Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Francisco158360
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
UPTAIDELTACHIRA
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdf
patriciaines1993
 

Último (20)

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
 
Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024
 
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
2024 KIT DE HABILIDADES SOCIOEMOCIONALES.pdf
 
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
 
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdfTema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
 
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSSEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
PIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonablesPIAR v 015. 2024 Plan Individual de ajustes razonables
PIAR v 015. 2024 Plan Individual de ajustes razonables
 
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA IIAFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
 
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...
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdf
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdf
 

CLASE DE HTML

  • 3. ¿Qué es HTML? HTML (Hypertext Markup Language)  Hypertext Es texto ordinario al que se le incorporan funcionalidades adicionales como: Formato, Imágenes, Multimedia y enlaces a otro documento.  Markup Es el proceso de tomar el texto ordinario e incorporarle símbolos adicionales. Cada uno de estos símbolos identifica a un comando que le indica al navegador como mostrar ese texto.
  • 4. Página Web •Párrafos •Tablas Estructura •Encabezados •Capas •Listas •Etc. HTML •Textos Contenido •Imágenes •Enlaces
  • 5. Elementos del HTML Los elementos son los componentes fundamentales del HTML Cuentan con 2 propiedades básicas: Atributos, Contenido En general se conforman con una Etiqueta de Apertura y otra Cierre. Los atributos se colocan dentro la etiqueta de apertura, y el contenido se coloca entre la etiqueta de apertura y la de cierre. Elemento Etiqueta de Apertura Contenido Etiqueta de Cierre <p align=“center”>Curso HTML CEMA</p> Nombre Valor Atributo
  • 6. Atributos Los atributos de un elemento son pares de nombres y valores separados por un „=„ que se encuentran dentro de la etiqueta de apertura de algún elemento. Los valores deben estar entre comillas. Ejemplo: <span id=„iddeesteelemento' style='color:red;' title=„Curso de HTML„> Curso de HTML </span>
  • 7. Algunos tipos de Elementos Tipos de Elementos Estructurales Describen el propósito del texto y no denotan ningún formato específico. Por ejemplo: <h1>Curso HTML</h1> De Presentación 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. De Hipertexto Relaciona una parte del documento a otros documentos. Por ejemplo: <a href=“http://www.google.com.ve”>Google</a>
  • 8. <HTML>… </HTML> Estructura de un Delimita el Documento HTML Documento de HTML <HEAD> … </HEAD> Delimita el encabezado del Documento HTML En general incluye los metadatos del documentos y Scripts. <BODY> … </BODY> Delimita el Cuerpo del Documento HTML. Es donde se incluyen los contenidos visibles del documento. Ejemplo <html> <head> Aquí se incluyen os distintos elementos del encabezado </head> <body> Aquí se incluyen los distintos elementos contenedores o scripts </body> </html>
  • 9. Elementos del HEAD Alguno de los elementos factibles de incluir en el HEAD son: <TITLE> … </TITLE> Define el título del documento HTML <SCRIPT> … </SCRIPT> Se utiliza para incluir programas al documento. En general se tratan de Javascripts. <STYLE> … </STYLE> Especifica un estilo CSS para ser utilizado en el documento. <META> … </META> Permite especificar información de interés como: autor, fecha de publicación, descripción, palabras claves, etc.
  • 10. UNA PÁGINA BÁSICA El lenguaje trabaja a base de etiquetas. La información que aparece dentro de estas estará influenciada por las mismas. <xxx> Inicio de una etiqueta. </xxx> Cierre de una etiqueta.
  • 11. Todo el documento debe estar entre las etiquetas <HTML> Y </HTML>. El documento está dividido en dos partes principales: El encabezamiento En este hay información que no se ve en la pantalla principal. Este debe ser corto y descriptivo, ya que será lo que verán las personas cuando añadan la página a sus favoritos.
  • 12. La etiqueta del encabezamiento se trabajará de la siguiente manera: <HEAD>Texto</HEAD> La etiqueta del cuerpo será: <BODY>Texto</BODY> La etiqueta del título será: <TITLE>Texto</TITLE>
  • 13. La estructura básica de las partes de una página Web son: <HTML> <HEAD><TITLE>título </TITLE></HEAD> <BODY>Es la información que mostrará la página al usuario </BODY> </HTML>