SlideShare una empresa de Scribd logo
1 de 21
El HTML (Hyper Text Markup Language) es el lenguaje con el que se
escriben las páginas web. Es un lenguaje de hipertexto, es decir, un
lenguaje que permite escribir texto de forma estructurada, y que está
compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del
documento.

Un documento hipertexto no sólo se compone de texto, puede contener
imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse
como un documento multimedia.

Los documentos HTML deben tener la extensión HTML o htm, para que
puedan ser visualizados en los navegadores (programas que permiten
visualizar las páginas web).
Los navegadores se encargan de interpretar el código HTML de los
documentos, y de mostrar a los usuarios las páginas web resultantes del
código interpretado.
El HTML se escribe en forma de «etiquetas», rodeadas por corchetes
angulares (<,>).

<HTML>                      INICIO DE PÁGINA HTML
<HEAD>                      ENCABEZADO
<TITLE>                     TÍTULO DE LA VENTANA
<META>                      INFORMACIÓN SOBRE PAGÍNA WEB
</TITTLE>                   CERRAMOS EL TÍTULO
</HEAD>                      CERRAMOS EL ENCABEZADO
<BODY>                       INICIO DEL CUERPO
</BODY>                      CERRAMOS EL CUERPO
</HTML>                      CERRAMOS EL ENCABEZADO
Mediante los títulos, en sus diferentes niveles de importancia,
podemos definir el esqueleto del documento, su estructura básica.

<h1>Mucha importancia</h1>
Mucha importancia
<h2>Menos importancia</h2>
Menos importancia
<h3>Mucha menos importancia</h3>
Mucha menos importancia
<HTML>
<HEAD>
<TITLE>
          EJERCICIO 1
</TITLE>
</HEAD>
<BODY>
<CENTER> UNIVERSIDAD CENTRAL DEL ECUADOR </CENTER> <BR>
GLORIA DE LA CRUZ
</BODY>
</HTML>                     TÍTULO
Mediante estos atributos determinamos el estilo y el tipo de letra que tendrá la
presentación del documento final.
<p> para marcar un fin de párrafo
<br> para un único retorno de carro.
negrita y cursiva:
<b>Esto en negrita</b> Esto en negrita
<i>esto en cursiva</i> esto en cursiva

Atributo face
Define el tipo de letra. Este atributo es interpretado por versiones de Netscape a
partir de la 3 y de MSIE 3 o superiores. Otros navegadores las ignoran
completamente y muestran el texto con la fuente que utilizan.
<font face="Comic Sans MS,arial,verdana">Este texto tiene otra
tipografía</font>

Atributo size
Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo. Si
hablamos en términos absolutos, existen 7 niveles de tamaño distintos
numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1"
para la letra más pequeña o size="7" para la más grande.
<font size=4>Este texto es más grande</font>
Atributo color
El color del texto puede ser definido mediante el atributo color. Cada color es
a su vez definido por un número hexadecimal que esta compuesto a su vez
de tres partes. Cada una de estas partes representa la contribución del
rojo, verde y azul al color en cuestión.
<font color="red">Este texto está en rojo</font>



color del texto
Vamos a ver una página donde el color de fondo sea negro, y los
colores del texto y los enlaces sean claros. Pondremos el color de
texto balnco y los enlaces amarillos, más resaltados los que no estén
visitados y menos resaltados lo que ya están visitados. Para ello
escribiríamos la etiqueta body así: <body bgcolor="#000000"
text="#ffffff" link="#ffff33" alink="#ffffcc" vlink="ffff00">
los párrafos delimitados por etiquetas <p> pueden ser fácilmente
  justificados a la izquierda, centro o derecha especificando dicha
  justificación en el interior de la etiqueta por medio de un atributo align.
 texto alineado a la izquierda escribir
 <p align="left">Texto alineado a la izquierda</p>
  justificación al centro: <p
  align="center">Texto alineado al centro</p>

                          Atributos para fondos
bgcolor: especificamos un color de fondo para la página.
Ejemplo de fondo
background: sirve para indicar la colocación de una imagen como
fondo de la página.
<body background="fondo.jpg">
<HTML>
<HEAD>
<TITLE>
               EJERCICIO 2
</TITLE>
</HEAD>
<BODY>
<CENTER> <S> <b> <I> HIMNO NACIONAL <BR>
                                 DEL<BR>
                     ECUADOR <BR> </S> </I> </b>
</CENTER>
<p align=left> <pre>
<b> CORO </b>
  Salve oh Patria, ¡mil veces! Oh Patria!
  gloria a ti! Ya tu pecho rebosa
  gozo y paz, y tu frente radiosa
  más que el sol contemplamos lucir.
</p>
<p align=right>
 <b> ESTROFA <br> </b>
  Los primeros los hijos del suelo
  que, soberbio; el Pichincha decora
  te aclamaron por siempre señora
  y vertieron su sangre por ti.
  Dios miró y aceptó el holocausto,
  y esa sangre fue germen fecundo
  de otros héroes que, atónito, el mundo
  vio en tu torno a millares surgir.
</p>
</PRE>
</BODY>
</HTML>
Las listas se definen de forma muy sencilla: se dice dónde empieza la
lista, dónde empieza cada punto y dónde acaba la lista. Las etiquetas que se
utilicen en cada caso deben aparecer al principio de línea, o al menos sin
texto por delante (sólo espacios o tabulaciones).Podemos recurrir a tres
tipos distintos de listas, cada una con una presentación diferente: no
numeradas, numeradas y listas de definiciones (glosarios).
Las listas se pueden anidar, es decir, en el lugar donde debería ir uno de los
términos de la lista se pone una nueva lista, que por supuesto no tiene
porqué ser del mismo tipo.
<html>
<head>
<title>
</title>
</head>
<BODY BGCOLOR="green" FGCOLOR="#00FF00" TEXT="#F0F0F0"

<font color=#990044><center><h1>UCE</h1></center></font>
<hr>
<UL>
<LI>CARRERA DE INFORMÁTICA
<LI>CARRERA DE MATEMÁTICA
<LI>CARRERA DE PARVULARIA
</UL>
<center>2012</center>
</body>
</html>
La etiqueta <MARQUEE> </MARQUEE> crea una marquesina cuyo
contenido se desplaza. Por defecto, ocupa todo el ancho de la
pantalla, tiene una línea de altura y el texto se mueve lentamente de
derecha a izquierda.

Los atributos WIDHT y HEIGHT permiten controlar el ancho y el alto
de la marquesina y pueden expresarse en pixeles o porcentualmente.
El atributo ALIGN permite alinear el texto que rodea la marquesina, y
puede tener los siguientes valores: top (arriba), middle (centrado)
bottom (abajo). Los atributos HSPACE y VSPACE definen la
separación horizontal y vertical del texto con los bordes de la
marquesina:

<marquee width="50%" height="60" align="bottom">
... texto ...
</marquee>
El color de fondo puede establecerse con el atributo BGCOLOR o, utilizando el
atributo STYLE, podemos establecer cualquier propiedad, de manera similar al
resto de las etiquetas HTML:

<marquee style="...propiedades...">
... texto ...
</marquee>

DIRECTION se utiliza para modificar la dirección hacia la que se dirige el texto.
Puede ser left (el valor por defecto), right, up o down:
<marquee direction="right">
... texto ...
</marquee>
Con el atributo SCROLLDELAY se define el tiempo entre cada movimiento
expresado en milisegundos:

<marquee scrolldelay="300">
... texto ...
</marquee>
 Con SCROLLAMOUNT controlamos la cantidad de desplazamiento del texto en cada movimiento
 de avance. Cuanto mayor es el número, más rápido avanza:
 Por último, el atributo BEHAVIOR (comportamiento) sirve para definir de que manera se va a
 efectuar el desplazamiento
La etiqueta que utilizaremos para insertar una imagen es <img>
(image).

Esta etiqueta no posee su cierre correspondiente y en ella
hemos de especificar obligatoriamente el paradero de nuestro
archivo gráfico mediante el atributo src (source).

La sintaxis queda entonces de la siguiente forma:
<img src=“nombre del archivo.extensión">
<html>
<head>
<title>
</title>
</head>
<body background="b.jpg" >
<FONT COLOR="green">
<MARQUEE direction=rigth ><CENTER><h1>UNIVERSIDAD CENTRAL DEL
ECUADOR</h1></CENTER></MARQUEE>
<MARQUEE><CENTER><h2>FACULTAD DE FILOSOFIA
</h2></CENTER></MARQUEE>
<MARQUEE><CENTER><h3>ESCUELA DE CIENCIAS
EXACTAS</h3></CENTER></MARQUEE>
<MARQUEE><CENTER><h1>CARRERA DE
INFORMATICA</h1></CENTER></MARQUEE>

</BODY>
</HTML>
<html>
<head>
<title>
LA CIUDAD DE QUITO
</title>
</head>
<body bgcolor="GRAY" TEXT="green">
<CENTER><h1>QUITO</h1></CENTER>
<HR>
<CENTER><IMG SRC="QUITO.JPG"></CENTER>

</body>
</html>
La etiqueta bgsound incorpora sonidos de fondo en una
página web, sonidos que se ejecutan automáticamente al
cargarse la página. Es una etiqueta propietaria de
Microsoft, por lo que sólo es interpretada por Internet
Explorer, admitiendo los formatos de audio MID y
WAV, aunque generalmente también acepta AU y MP3, en
versiones actuales del nevagador o mediante plugins de uso
general.



<BGSOUND SRC="imagine.mid" LOOP=INFINITE>
La etiqueta <embed> es la que se utiliza para insertar archivos de
vídeo. Puede incluirse la etiqueta de cierre, pero en realidad no es
necesaria, ya que entre las etiquetas <embed> y </embed> no hay
que insertar nada.
A través del atributo src hay que especificar la ruta y el nombre del
archivo de vídeo.
Los videos insertados a través de esta etiqueta se reproducen
automáticamente al cargarse la página, y se reproducen solamente
una vez. Esto puede cambiarse a través de los atributos autostart y
loop.
<html>
<head>
<title>
VIDEO DE CAMILA
</title>
</head>
<body bgcolor="GRAY" TEXT="green">
<CENTER><h1>VIDEO DE CAMILA</h1></CENTER>
<HR>
<iframe width="560" height="315" src="http://www.youtube.com/embed/3YhoejhnW8w"
frameborder="0" allowfullscreen></iframe>
<iframe src="http://es.slideshare.net/slideshow/embed_code/14059758" width="427" height="356"
frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid
#CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen>
</body>
</html>
DIRECTIVAS       TIPO      FUNCIÓN
<br>             abierta   Salto de línea
<center>         cerrado   centrado
<p>              cerrado   Elabora párrafo
<b>              cerrado   Negrita
<strong>         cerrado   negrita
<I>              cerrado   Cursiva
<U>              cerrado   subrayado
<S>              cerrado   tachado
<marquee>        Cerrado   Movimiento a títulos
                           e imágenes
< font size>     cerrado   Tamaño de la letra
<font face>      cerrado   Tipo de letra
<font color>     cerrado   Color de la letra
< body bgcolor   cerrado   Color del fondo
DIRECTIVAS   TIPO      FUNCIÓN
<img>        abierta   imagen
<ol><ul>     cerrado   listas
<li>         abierto   listas

Más contenido relacionado

La actualidad más candente

ETIQUETAS HTML ANIMADAS
ETIQUETAS HTML ANIMADASETIQUETAS HTML ANIMADAS
ETIQUETAS HTML ANIMADASSholucy
 
DEBER N°2 blog blogger blogspot
DEBER N°2 blog blogger blogspotDEBER N°2 blog blogger blogspot
DEBER N°2 blog blogger blogspotLISSYCE
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas htmldanneszm
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlDoraliza Hugo Vera
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas htmldanneszm
 
Listado de etiquetas y atributos html
Listado de etiquetas y atributos htmlListado de etiquetas y atributos html
Listado de etiquetas y atributos htmljulyovalle
 
Etiquetas basicas html
Etiquetas basicas htmlEtiquetas basicas html
Etiquetas basicas htmlMiguel Barajas
 
Etiquetas basicas producto 10
Etiquetas basicas producto 10Etiquetas basicas producto 10
Etiquetas basicas producto 10marinonema2
 
Etiquetas Basicas de Html
Etiquetas Basicas de HtmlEtiquetas Basicas de Html
Etiquetas Basicas de HtmlWilmer Acero
 
Presentacion de etiquetas
Presentacion de etiquetasPresentacion de etiquetas
Presentacion de etiquetasIvan Perez
 
como hacer una pagina web con bloc de notas
como hacer una pagina web con bloc de notascomo hacer una pagina web con bloc de notas
como hacer una pagina web con bloc de notasjose_rock
 

La actualidad más candente (20)

Que es html
Que es htmlQue es html
Que es html
 
ETIQUETAS HTML ANIMADAS
ETIQUETAS HTML ANIMADASETIQUETAS HTML ANIMADAS
ETIQUETAS HTML ANIMADAS
 
Html
HtmlHtml
Html
 
DEBER N°2 blog blogger blogspot
DEBER N°2 blog blogger blogspotDEBER N°2 blog blogger blogspot
DEBER N°2 blog blogger blogspot
 
Introducción a Html
Introducción a HtmlIntroducción a Html
Introducción a Html
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Etiquetas de html
Etiquetas de htmlEtiquetas de html
Etiquetas de html
 
HTML
HTMLHTML
HTML
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje html
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Listado de etiquetas y atributos html
Listado de etiquetas y atributos htmlListado de etiquetas y atributos html
Listado de etiquetas y atributos html
 
Etiquetas basicas html
Etiquetas basicas htmlEtiquetas basicas html
Etiquetas basicas html
 
Etiquetas basicas producto 10
Etiquetas basicas producto 10Etiquetas basicas producto 10
Etiquetas basicas producto 10
 
Etiquetas Basicas de Html
Etiquetas Basicas de HtmlEtiquetas Basicas de Html
Etiquetas Basicas de Html
 
ETIQUETAS DE HTML
ETIQUETAS DE HTMLETIQUETAS DE HTML
ETIQUETAS DE HTML
 
Presentacion de etiquetas
Presentacion de etiquetasPresentacion de etiquetas
Presentacion de etiquetas
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
como hacer una pagina web con bloc de notas
como hacer una pagina web con bloc de notascomo hacer una pagina web con bloc de notas
como hacer una pagina web con bloc de notas
 

Similar a Html

Similar a Html (20)

Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
[modo de compatibilidad] HTML
[modo de compatibilidad] HTML[modo de compatibilidad] HTML
[modo de compatibilidad] HTML
 
Guia de repaso html11
Guia de repaso html11Guia de repaso html11
Guia de repaso html11
 
Conceptos Etiquetas de HTML
Conceptos Etiquetas de HTMLConceptos Etiquetas de HTML
Conceptos Etiquetas de HTML
 
Comandos html
Comandos htmlComandos html
Comandos html
 
Html
HtmlHtml
Html
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
Manual html
Manual htmlManual html
Manual html
 
Manual html1 (Informatica Aplia Educa)
Manual html1 (Informatica Aplia Educa)Manual html1 (Informatica Aplia Educa)
Manual html1 (Informatica Aplia Educa)
 
Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS
 
Guia de html 3 y 4 periodo
Guia de html 3 y 4  periodoGuia de html 3 y 4  periodo
Guia de html 3 y 4 periodo
 
Html creacion de una pagina. Adriano Mazziotti
Html  creacion de una pagina. Adriano MazziottiHtml  creacion de una pagina. Adriano Mazziotti
Html creacion de una pagina. Adriano Mazziotti
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
2. html
2. html2. html
2. html
 
Lenguaje de programación de páginas web
Lenguaje de programación de páginas webLenguaje de programación de páginas web
Lenguaje de programación de páginas web
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Lenguaje html para colegio
Lenguaje html para colegioLenguaje html para colegio
Lenguaje html para colegio
 

Último

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...JAVIER SOLIS NOYOLA
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOluismii249
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaDecaunlz
 
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
SESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.docSESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.doc
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.docRodneyFrankCUADROSMI
 
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...Lourdes Feria
 
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSSEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSYadi Campos
 
🦄💫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.docxEliaHernndez7
 
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 TRABAJOBRIGIDATELLOLEONARDO
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfUPTAIDELTACHIRA
 
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 - 2024Juan Martín Martín
 
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...Katherine Concepcion Gonzalez
 
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONALMiNeyi1
 
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.pptxlclcarmen
 
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 NOYOLAJAVIER SOLIS NOYOLA
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxYadi Campos
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfAngélica Soledad Vega Ramírez
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdfValeriaCorrea29
 
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 NOYOLAJAVIER SOLIS NOYOLA
 

Último (20)

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...
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
SESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.docSESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.doc
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
 
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
 
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...
 
Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptx
 
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSSEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
 
🦄💫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
 
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
 
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
 
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...
 
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
 
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
 
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
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdf
 
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
 

Html

  • 1.
  • 2. El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Los documentos HTML deben tener la extensión HTML o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web). Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.
  • 3. El HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). <HTML> INICIO DE PÁGINA HTML <HEAD> ENCABEZADO <TITLE> TÍTULO DE LA VENTANA <META> INFORMACIÓN SOBRE PAGÍNA WEB </TITTLE> CERRAMOS EL TÍTULO </HEAD> CERRAMOS EL ENCABEZADO <BODY> INICIO DEL CUERPO </BODY> CERRAMOS EL CUERPO </HTML> CERRAMOS EL ENCABEZADO
  • 4. Mediante los títulos, en sus diferentes niveles de importancia, podemos definir el esqueleto del documento, su estructura básica. <h1>Mucha importancia</h1> Mucha importancia <h2>Menos importancia</h2> Menos importancia <h3>Mucha menos importancia</h3> Mucha menos importancia
  • 5. <HTML> <HEAD> <TITLE> EJERCICIO 1 </TITLE> </HEAD> <BODY> <CENTER> UNIVERSIDAD CENTRAL DEL ECUADOR </CENTER> <BR> GLORIA DE LA CRUZ </BODY> </HTML> TÍTULO
  • 6. Mediante estos atributos determinamos el estilo y el tipo de letra que tendrá la presentación del documento final. <p> para marcar un fin de párrafo <br> para un único retorno de carro. negrita y cursiva: <b>Esto en negrita</b> Esto en negrita <i>esto en cursiva</i> esto en cursiva Atributo face Define el tipo de letra. Este atributo es interpretado por versiones de Netscape a partir de la 3 y de MSIE 3 o superiores. Otros navegadores las ignoran completamente y muestran el texto con la fuente que utilizan. <font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografía</font> Atributo size Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo. Si hablamos en términos absolutos, existen 7 niveles de tamaño distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra más pequeña o size="7" para la más grande. <font size=4>Este texto es más grande</font>
  • 7. Atributo color El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un número hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribución del rojo, verde y azul al color en cuestión. <font color="red">Este texto está en rojo</font> color del texto Vamos a ver una página donde el color de fondo sea negro, y los colores del texto y los enlaces sean claros. Pondremos el color de texto balnco y los enlaces amarillos, más resaltados los que no estén visitados y menos resaltados lo que ya están visitados. Para ello escribiríamos la etiqueta body así: <body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="#ffffcc" vlink="ffff00">
  • 8. los párrafos delimitados por etiquetas <p> pueden ser fácilmente justificados a la izquierda, centro o derecha especificando dicha justificación en el interior de la etiqueta por medio de un atributo align. texto alineado a la izquierda escribir <p align="left">Texto alineado a la izquierda</p> justificación al centro: <p align="center">Texto alineado al centro</p> Atributos para fondos bgcolor: especificamos un color de fondo para la página. Ejemplo de fondo background: sirve para indicar la colocación de una imagen como fondo de la página. <body background="fondo.jpg">
  • 9. <HTML> <HEAD> <TITLE> EJERCICIO 2 </TITLE> </HEAD> <BODY> <CENTER> <S> <b> <I> HIMNO NACIONAL <BR> DEL<BR> ECUADOR <BR> </S> </I> </b> </CENTER> <p align=left> <pre> <b> CORO </b> Salve oh Patria, ¡mil veces! Oh Patria! gloria a ti! Ya tu pecho rebosa gozo y paz, y tu frente radiosa más que el sol contemplamos lucir. </p> <p align=right> <b> ESTROFA <br> </b> Los primeros los hijos del suelo que, soberbio; el Pichincha decora te aclamaron por siempre señora y vertieron su sangre por ti. Dios miró y aceptó el holocausto, y esa sangre fue germen fecundo de otros héroes que, atónito, el mundo vio en tu torno a millares surgir. </p> </PRE> </BODY> </HTML>
  • 10. Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada punto y dónde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de línea, o al menos sin texto por delante (sólo espacios o tabulaciones).Podemos recurrir a tres tipos distintos de listas, cada una con una presentación diferente: no numeradas, numeradas y listas de definiciones (glosarios). Las listas se pueden anidar, es decir, en el lugar donde debería ir uno de los términos de la lista se pone una nueva lista, que por supuesto no tiene porqué ser del mismo tipo.
  • 11. <html> <head> <title> </title> </head> <BODY BGCOLOR="green" FGCOLOR="#00FF00" TEXT="#F0F0F0" <font color=#990044><center><h1>UCE</h1></center></font> <hr> <UL> <LI>CARRERA DE INFORMÁTICA <LI>CARRERA DE MATEMÁTICA <LI>CARRERA DE PARVULARIA </UL> <center>2012</center> </body> </html>
  • 12. La etiqueta <MARQUEE> </MARQUEE> crea una marquesina cuyo contenido se desplaza. Por defecto, ocupa todo el ancho de la pantalla, tiene una línea de altura y el texto se mueve lentamente de derecha a izquierda. Los atributos WIDHT y HEIGHT permiten controlar el ancho y el alto de la marquesina y pueden expresarse en pixeles o porcentualmente. El atributo ALIGN permite alinear el texto que rodea la marquesina, y puede tener los siguientes valores: top (arriba), middle (centrado) bottom (abajo). Los atributos HSPACE y VSPACE definen la separación horizontal y vertical del texto con los bordes de la marquesina: <marquee width="50%" height="60" align="bottom"> ... texto ... </marquee>
  • 13. El color de fondo puede establecerse con el atributo BGCOLOR o, utilizando el atributo STYLE, podemos establecer cualquier propiedad, de manera similar al resto de las etiquetas HTML: <marquee style="...propiedades..."> ... texto ... </marquee> DIRECTION se utiliza para modificar la dirección hacia la que se dirige el texto. Puede ser left (el valor por defecto), right, up o down: <marquee direction="right"> ... texto ... </marquee> Con el atributo SCROLLDELAY se define el tiempo entre cada movimiento expresado en milisegundos: <marquee scrolldelay="300"> ... texto ... </marquee> Con SCROLLAMOUNT controlamos la cantidad de desplazamiento del texto en cada movimiento de avance. Cuanto mayor es el número, más rápido avanza: Por último, el atributo BEHAVIOR (comportamiento) sirve para definir de que manera se va a efectuar el desplazamiento
  • 14. La etiqueta que utilizaremos para insertar una imagen es <img> (image). Esta etiqueta no posee su cierre correspondiente y en ella hemos de especificar obligatoriamente el paradero de nuestro archivo gráfico mediante el atributo src (source). La sintaxis queda entonces de la siguiente forma: <img src=“nombre del archivo.extensión">
  • 15. <html> <head> <title> </title> </head> <body background="b.jpg" > <FONT COLOR="green"> <MARQUEE direction=rigth ><CENTER><h1>UNIVERSIDAD CENTRAL DEL ECUADOR</h1></CENTER></MARQUEE> <MARQUEE><CENTER><h2>FACULTAD DE FILOSOFIA </h2></CENTER></MARQUEE> <MARQUEE><CENTER><h3>ESCUELA DE CIENCIAS EXACTAS</h3></CENTER></MARQUEE> <MARQUEE><CENTER><h1>CARRERA DE INFORMATICA</h1></CENTER></MARQUEE> </BODY> </HTML>
  • 16. <html> <head> <title> LA CIUDAD DE QUITO </title> </head> <body bgcolor="GRAY" TEXT="green"> <CENTER><h1>QUITO</h1></CENTER> <HR> <CENTER><IMG SRC="QUITO.JPG"></CENTER> </body> </html>
  • 17. La etiqueta bgsound incorpora sonidos de fondo en una página web, sonidos que se ejecutan automáticamente al cargarse la página. Es una etiqueta propietaria de Microsoft, por lo que sólo es interpretada por Internet Explorer, admitiendo los formatos de audio MID y WAV, aunque generalmente también acepta AU y MP3, en versiones actuales del nevagador o mediante plugins de uso general. <BGSOUND SRC="imagine.mid" LOOP=INFINITE>
  • 18. La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. Puede incluirse la etiqueta de cierre, pero en realidad no es necesaria, ya que entre las etiquetas <embed> y </embed> no hay que insertar nada. A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo. Los videos insertados a través de esta etiqueta se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Esto puede cambiarse a través de los atributos autostart y loop.
  • 19. <html> <head> <title> VIDEO DE CAMILA </title> </head> <body bgcolor="GRAY" TEXT="green"> <CENTER><h1>VIDEO DE CAMILA</h1></CENTER> <HR> <iframe width="560" height="315" src="http://www.youtube.com/embed/3YhoejhnW8w" frameborder="0" allowfullscreen></iframe> <iframe src="http://es.slideshare.net/slideshow/embed_code/14059758" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen> </body> </html>
  • 20. DIRECTIVAS TIPO FUNCIÓN <br> abierta Salto de línea <center> cerrado centrado <p> cerrado Elabora párrafo <b> cerrado Negrita <strong> cerrado negrita <I> cerrado Cursiva <U> cerrado subrayado <S> cerrado tachado <marquee> Cerrado Movimiento a títulos e imágenes < font size> cerrado Tamaño de la letra <font face> cerrado Tipo de letra <font color> cerrado Color de la letra < body bgcolor cerrado Color del fondo
  • 21. DIRECTIVAS TIPO FUNCIÓN <img> abierta imagen <ol><ul> cerrado listas <li> abierto listas