SlideShare a Scribd company logo
1 of 14
¿Qué es, que hace?

    Lenguaje de marcas de texto.


    Es simplemente un procesador de texto, como el que ofrecen
    los sistemas operativos Windows (Bloc de notas), UNIX(el editor
    vi o ed) o el que ofrece MS Office (Word).


¿Qué no es, que no hace?

    HTML no es propiamente un lenguaje de programación como
    C++,Visual Basic, etc.

    No presenta ningún compilador, por lo tanto algún error de
    sintaxis que se presente éste no lo detectará,
¿Que es?

Se puede decir que será un texto incluido entre los símbolos <….>
este texto será una orden para que explique la utilidad de la etiqueta, y
es indistinto que se escriba en mayúsculas o minúsculas se le puede
decir comando o código.
Tipos
Cerradas:
Son aquellas que tienen una etiqueta que indica el principio de la
directiva y otra que indica el final. La del final contendrá el mismo texto
añadiendo al principio del carácter el símbolo /.
Ejemplo: <center>…………….</center>

Abiertas:
Las directivas abiertas por el contrario constan de una sola etiqueta
Ejemplo: <hr>, <br>
<HTML>       Indica el inicio del documento
 <HEAD>      Indica el inicio del encabezado
  <TITLE>    Indica el inicio del titulo
   <META>    Se utiliza para añadir información sobre la página
  </TITLE>    Indica el final del titulo
 </HEAD>      Indica el final del encabezado
<BODY>        Indica el final del cuerpo
</BODY>       Indica el final del cuerpo
</HTML>       Indica el final del documento
<Body bgcolor=“red”>……………………. </Body>
Complemento de directiva nos permite poner color en el
fondo del documento este debe estar escrito en ingles y
también se lo puede poner en sistema hexadecimal

<Body background=“C:/mis_imagenes”>……… </Body>
Complemento de directiva nos permite poner una
imagen en el fondo del documento debemos escribir la
dirección por completo de donde esta la imagen.


Para evitar inconvenientes es mejor ubicar todo las imágenes y
documentos que manejamos en una sola carpeta y así nos ahorramos
escribir direcciones completas, solo nombres.
Mediante los títulos, en sus diferentes niveles de
importancia, podemos definir el esqueleto del
documento, su estructura básica.

<h1>Mucha importancia</h1>

<h2>Menos importancia</h2>

<h3>Mucha menos importancia</h3>
Mediante estos atributos determinamos el estilo y el
 tipo de letra que tendrá la presentación del documento
 final
<font> para definir partes limitadas de texto </font>
<font face=“tipo de letra”> define tipo de letra a visualizar </font>
<font color=color> define color de letra a visualizar</font>
<font size= # > define tamaño de letra a visualizar se debe poner un numero
natural </font>

Aunque todas esta directivas pueden usarse en una sola línea por ejemplo

<font face=“arial” color=“red” size=10>……………….</font>
SE PUEDEN DAR TAMBIÉN LOS ATRIBUTOS MÁS
TRADICIONALES: NEGRITA Y CURSIVA, ETC.


<br> para marcar un fin de una línea
<p> para marcar un fin de párrafo</p>
<b>esto en negrita</b>
<i>esto en cursiva</i>
<u>esto es subrayado</u>
<s> esto es tachado</s>
<marquee> Texto o imagen que queremos animar
</marquee>
<marquee direction=“up”> de abajo hacia arriba
</marquee>
<marquee direction=“down”> de arriba hacia abajo
</marquee>
<marquee direction=“right”> de derecha a izquierda
</marquee>
<marquee direction=“left”> de izquierda a derecha
</marquee>
<marquee behavior=“alternate”> izquierda a derecha y
viceversa </marquee>
Esto es una lista no numerada:

 <ul>
 <li>Tomates
 <li>Zanahorias
 <li>Perros
 </ul>

 Se puede utilizar el complemento:

 <ul type=“square”> para viñetas rectangulares.
 <ul type=“circle”> para viñetas circulares.



La directiva <li> Se utiliza para cada uno de los elementos de una lista.
Esto una lista numerada:

 <ol>
 <li>Miguel Induráin
 <li>Tony Rominger
 <li>Eugeni Berzin
 </ol>

 Se puede utilizar el complemento:

 <ol style= I > para una lista en números romanos.


La directiva <li> Se utiliza para cada uno de los elementos de una lista.
<Img src=“c:/mis_documentos/mipag/imagen.jpg”>
Permite poner imágenes de tipo jpg, gif, pcg, etc en el
documento o pagina, dentro de las comillas debemos
digitar la dirección completa del lugar donde esta la foto

                      VIDEOS
<embed src=“c:/mis_documentos/mipag/video.mpg”>
Permite poner videos de tipo avi, mpg, mp4, etc. En el
documento o pagina, dentro de las comillas debemos
digitar la dirección completa del lugar donde esta el
video
La manera que insertar videos de youtube a nuestra pagina o
documento es la siguiente:
En la pagina de youtube encontraremos estas opciones



Presionamos “compartir”
Entonces nos aparece otros botones:


Al darle clic en el botón insertar aparecerá un código lo copiamos
íntegramente sin hacer cambios e insertamos en el documento justo
en el lugar donde queramos que el video aparezca
La manera que insertar diapositivas a nuestra pagina o
documento es la siguiente:
En la pagina en la cual visualicemos las diapositivas
encontraremos estas opciones



Nos aparecerá un código lo copiamos íntegramente sin
hacer cambios e insertamos en el documento justo en el
lugar donde queramos que el video aparezca

More Related Content

What's hot

Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
up
 
Utilizar etiquetasen una pagina web
Utilizar etiquetasen una pagina webUtilizar etiquetasen una pagina web
Utilizar etiquetasen una pagina web
Eddher Siilvhaa'
 
Portafolio de programación Joe Holguin 2c2
Portafolio de programación Joe Holguin 2c2Portafolio de programación Joe Holguin 2c2
Portafolio de programación Joe Holguin 2c2
Joe Holguin
 

What's hot (15)

Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Introducción al HTML
Introducción al HTML Introducción al HTML
Introducción al HTML
 
Manual de html
Manual de htmlManual de html
Manual de html
 
¿Qué es HTML5?
¿Qué es HTML5?¿Qué es HTML5?
¿Qué es HTML5?
 
10 etiquetas basicas de html
10 etiquetas basicas de html10 etiquetas basicas de html
10 etiquetas basicas de html
 
Informatika 1111111
Informatika 1111111Informatika 1111111
Informatika 1111111
 
Html 1
Html 1Html 1
Html 1
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Expo Html
Expo HtmlExpo Html
Expo Html
 
¿Qué es CSS?
¿Qué es CSS?¿Qué es CSS?
¿Qué es CSS?
 
Html111
Html111Html111
Html111
 
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
 
Utilizar etiquetasen una pagina web
Utilizar etiquetasen una pagina webUtilizar etiquetasen una pagina web
Utilizar etiquetasen una pagina web
 
Portafolio de programación Joe Holguin 2c2
Portafolio de programación Joe Holguin 2c2Portafolio de programación Joe Holguin 2c2
Portafolio de programación Joe Holguin 2c2
 

Viewers also liked

Presentacion colegio de bachilleres plantel 7
Presentacion colegio de bachilleres plantel 7Presentacion colegio de bachilleres plantel 7
Presentacion colegio de bachilleres plantel 7
maYtthe'Sitha MoSh
 
Ixoye herramientas
Ixoye herramientasIxoye herramientas
Ixoye herramientas
MyCard
 
Trabajo practico nº4 info.2012 (1)
Trabajo practico nº4 info.2012 (1)Trabajo practico nº4 info.2012 (1)
Trabajo practico nº4 info.2012 (1)
rociomaidana
 
Tarea1 josé manuel garcía
Tarea1 josé manuel garcíaTarea1 josé manuel garcía
Tarea1 josé manuel garcía
josemanuelclar
 

Viewers also liked (20)

Bryan
BryanBryan
Bryan
 
Como estudiar
Como estudiarComo estudiar
Como estudiar
 
Trabajo practico nº10
Trabajo practico nº10Trabajo practico nº10
Trabajo practico nº10
 
3 beneficios al cepillar tu pelo
3 beneficios al cepillar tu pelo3 beneficios al cepillar tu pelo
3 beneficios al cepillar tu pelo
 
Prueba parcial. 5to. Sketchup (12)
Prueba parcial. 5to. Sketchup (12) Prueba parcial. 5to. Sketchup (12)
Prueba parcial. 5to. Sketchup (12)
 
Prueba parcial. 5to. Sketchup (5)
Prueba parcial. 5to. Sketchup (5)Prueba parcial. 5to. Sketchup (5)
Prueba parcial. 5to. Sketchup (5)
 
La pornografía infantil (6)
La pornografía infantil (6)La pornografía infantil (6)
La pornografía infantil (6)
 
MATERIALISMO HISTORICO Y CAMBIO SOCIAL
MATERIALISMO HISTORICO Y CAMBIO SOCIALMATERIALISMO HISTORICO Y CAMBIO SOCIAL
MATERIALISMO HISTORICO Y CAMBIO SOCIAL
 
Caballos
CaballosCaballos
Caballos
 
Alimentos para bajar el niivel de colesterol
Alimentos para bajar el niivel de colesterolAlimentos para bajar el niivel de colesterol
Alimentos para bajar el niivel de colesterol
 
Archivística
ArchivísticaArchivística
Archivística
 
Presentacion colegio de bachilleres plantel 7
Presentacion colegio de bachilleres plantel 7Presentacion colegio de bachilleres plantel 7
Presentacion colegio de bachilleres plantel 7
 
Psicologia del color
Psicologia del colorPsicologia del color
Psicologia del color
 
Ixoye herramientas
Ixoye herramientasIxoye herramientas
Ixoye herramientas
 
Davant el càncer de mama
Davant el càncer de mamaDavant el càncer de mama
Davant el càncer de mama
 
Trabajo de cmc421
Trabajo de cmc421Trabajo de cmc421
Trabajo de cmc421
 
Redes
RedesRedes
Redes
 
Trabajo practico nº4 info.2012 (1)
Trabajo practico nº4 info.2012 (1)Trabajo practico nº4 info.2012 (1)
Trabajo practico nº4 info.2012 (1)
 
Milla jovovich
Milla jovovichMilla jovovich
Milla jovovich
 
Tarea1 josé manuel garcía
Tarea1 josé manuel garcíaTarea1 josé manuel garcía
Tarea1 josé manuel garcía
 

Similar to Introducción a HTML (20)

Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Intro html
Intro htmlIntro html
Intro html
 
Practicas html
Practicas htmlPracticas html
Practicas html
 
HTML
HTMLHTML
HTML
 
HTML
HTMLHTML
HTML
 
Guia básica html
Guia básica htmlGuia básica html
Guia básica html
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
Curso de HTML.pdf
Curso de HTML.pdfCurso de HTML.pdf
Curso de HTML.pdf
 
Curso de HTML 6to PRIMARIA.docx
Curso de HTML 6to PRIMARIA.docxCurso de HTML 6to PRIMARIA.docx
Curso de HTML 6to PRIMARIA.docx
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
HTML
HTMLHTML
HTML
 
Manual de-html
Manual de-htmlManual de-html
Manual de-html
 
Conceptos Etiquetas de HTML
Conceptos Etiquetas de HTMLConceptos Etiquetas de HTML
Conceptos Etiquetas de HTML
 
Manual intencivo de htlm
Manual intencivo de htlmManual intencivo de htlm
Manual intencivo de htlm
 
Actividad nº6
Actividad nº6Actividad nº6
Actividad nº6
 
emded/Retro2011brandon
emded/Retro2011brandonemded/Retro2011brandon
emded/Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 

Recently uploaded

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
 
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACIONRESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
amelia poma
 

Recently uploaded (20)

Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 
Biografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdfBiografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdf
 
Los dos testigos. Testifican de la Verdad
Los dos testigos. Testifican de la VerdadLos dos testigos. Testifican de la Verdad
Los dos testigos. Testifican de la Verdad
 
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
 
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADOTIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
 
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
 
Usos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicasUsos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicas
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
 
AEC 2. Aventura en el Antiguo Egipto.pptx
AEC 2. Aventura en el Antiguo Egipto.pptxAEC 2. Aventura en el Antiguo Egipto.pptx
AEC 2. Aventura en el Antiguo Egipto.pptx
 
Lecciones 06 Esc. Sabática. Los dos testigos
Lecciones 06 Esc. Sabática. Los dos testigosLecciones 06 Esc. Sabática. Los dos testigos
Lecciones 06 Esc. Sabática. Los dos testigos
 
Factores que intervienen en la Administración por Valores.pdf
Factores que intervienen en la Administración por Valores.pdfFactores que intervienen en la Administración por Valores.pdf
Factores que intervienen en la Administración por Valores.pdf
 
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACIONRESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 
Power Point E. S.: Los dos testigos.pptx
Power Point E. S.: Los dos testigos.pptxPower Point E. S.: Los dos testigos.pptx
Power Point E. S.: Los dos testigos.pptx
 
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCTRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
FUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.pptFUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
 
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
 
Los avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtualesLos avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtuales
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
 

Introducción a HTML

  • 1.
  • 2. ¿Qué es, que hace? Lenguaje de marcas de texto. Es simplemente un procesador de texto, como el que ofrecen los sistemas operativos Windows (Bloc de notas), UNIX(el editor vi o ed) o el que ofrece MS Office (Word). ¿Qué no es, que no hace? HTML no es propiamente un lenguaje de programación como C++,Visual Basic, etc. No presenta ningún compilador, por lo tanto algún error de sintaxis que se presente éste no lo detectará,
  • 3. ¿Que es? Se puede decir que será un texto incluido entre los símbolos <….> este texto será una orden para que explique la utilidad de la etiqueta, y es indistinto que se escriba en mayúsculas o minúsculas se le puede decir comando o código. Tipos Cerradas: Son aquellas que tienen una etiqueta que indica el principio de la directiva y otra que indica el final. La del final contendrá el mismo texto añadiendo al principio del carácter el símbolo /. Ejemplo: <center>…………….</center> Abiertas: Las directivas abiertas por el contrario constan de una sola etiqueta Ejemplo: <hr>, <br>
  • 4. <HTML> Indica el inicio del documento <HEAD> Indica el inicio del encabezado <TITLE> Indica el inicio del titulo <META> Se utiliza para añadir información sobre la página </TITLE> Indica el final del titulo </HEAD> Indica el final del encabezado <BODY> Indica el final del cuerpo </BODY> Indica el final del cuerpo </HTML> Indica el final del documento
  • 5. <Body bgcolor=“red”>……………………. </Body> Complemento de directiva nos permite poner color en el fondo del documento este debe estar escrito en ingles y también se lo puede poner en sistema hexadecimal <Body background=“C:/mis_imagenes”>……… </Body> Complemento de directiva nos permite poner una imagen en el fondo del documento debemos escribir la dirección por completo de donde esta la imagen. Para evitar inconvenientes es mejor ubicar todo las imágenes y documentos que manejamos en una sola carpeta y así nos ahorramos escribir direcciones completas, solo nombres.
  • 6. Mediante los títulos, en sus diferentes niveles de importancia, podemos definir el esqueleto del documento, su estructura básica. <h1>Mucha importancia</h1> <h2>Menos importancia</h2> <h3>Mucha menos importancia</h3>
  • 7. Mediante estos atributos determinamos el estilo y el tipo de letra que tendrá la presentación del documento final <font> para definir partes limitadas de texto </font> <font face=“tipo de letra”> define tipo de letra a visualizar </font> <font color=color> define color de letra a visualizar</font> <font size= # > define tamaño de letra a visualizar se debe poner un numero natural </font> Aunque todas esta directivas pueden usarse en una sola línea por ejemplo <font face=“arial” color=“red” size=10>……………….</font>
  • 8. SE PUEDEN DAR TAMBIÉN LOS ATRIBUTOS MÁS TRADICIONALES: NEGRITA Y CURSIVA, ETC. <br> para marcar un fin de una línea <p> para marcar un fin de párrafo</p> <b>esto en negrita</b> <i>esto en cursiva</i> <u>esto es subrayado</u> <s> esto es tachado</s>
  • 9. <marquee> Texto o imagen que queremos animar </marquee> <marquee direction=“up”> de abajo hacia arriba </marquee> <marquee direction=“down”> de arriba hacia abajo </marquee> <marquee direction=“right”> de derecha a izquierda </marquee> <marquee direction=“left”> de izquierda a derecha </marquee> <marquee behavior=“alternate”> izquierda a derecha y viceversa </marquee>
  • 10. Esto es una lista no numerada: <ul> <li>Tomates <li>Zanahorias <li>Perros </ul> Se puede utilizar el complemento: <ul type=“square”> para viñetas rectangulares. <ul type=“circle”> para viñetas circulares. La directiva <li> Se utiliza para cada uno de los elementos de una lista.
  • 11. Esto una lista numerada: <ol> <li>Miguel Induráin <li>Tony Rominger <li>Eugeni Berzin </ol> Se puede utilizar el complemento: <ol style= I > para una lista en números romanos. La directiva <li> Se utiliza para cada uno de los elementos de una lista.
  • 12. <Img src=“c:/mis_documentos/mipag/imagen.jpg”> Permite poner imágenes de tipo jpg, gif, pcg, etc en el documento o pagina, dentro de las comillas debemos digitar la dirección completa del lugar donde esta la foto VIDEOS <embed src=“c:/mis_documentos/mipag/video.mpg”> Permite poner videos de tipo avi, mpg, mp4, etc. En el documento o pagina, dentro de las comillas debemos digitar la dirección completa del lugar donde esta el video
  • 13. La manera que insertar videos de youtube a nuestra pagina o documento es la siguiente: En la pagina de youtube encontraremos estas opciones Presionamos “compartir” Entonces nos aparece otros botones: Al darle clic en el botón insertar aparecerá un código lo copiamos íntegramente sin hacer cambios e insertamos en el documento justo en el lugar donde queramos que el video aparezca
  • 14. La manera que insertar diapositivas a nuestra pagina o documento es la siguiente: En la pagina en la cual visualicemos las diapositivas encontraremos estas opciones Nos aparecerá un código lo copiamos íntegramente sin hacer cambios e insertamos en el documento justo en el lugar donde queramos que el video aparezca