Translate

sábado, 27 de febrero de 2021

CLASE 55 PROGRAMA CON HIPERVINCULOS

Fin en mente: Realizar un programa de HTML para que el  programa muestra en pantalla un link en una página web, con texto y con imágenes

<HTML>
 <head>
 <title> hipervinculo </title>
 </head>
 <body bgcolor="purple">
<br> <a href="www.google.com"> Este link me lleva a la pagina de google </a> </br>
<br> <a href="www.instagram.com"> Va a la pagina de instagram </a> </br>
<br> <a href="www.hotmail.com"> Este link me lleva a hotmail </a> </br>

<font face="arial" size="14"> Los siguentes links son con imagenes  </font>
<br> <a href="www.netflix.com"> <img src="/Users/Guest/Desktop/images.jpeg"> </br> </a>
<br> <a href="www.facebook.com"> <img src="/Users/Guest/Desktop/images.png"> </br> </a>
<br>  <a href="www.twitter.com"> <img src="/Users/Guest/Desktop/images-1.png"> </br> </a>
 </body>
 </HTML>

miércoles, 24 de febrero de 2021

CLASE 54 IMAGENES

Fin en mente: Realizar un programa en HTML, para insertar imágenes en un sitio web donde usaremos la etiqueta <img>.

Esta etiqueta debe ir acompañada del atributo src que es el que contiene el URL de la ubicación del archivo de la imagen.

El atributo alt se utiliza para dar una breve descripción de la imagen, la cual podremos observar en caso que el navegador del usuario, por alguna razón, no muestre la misma.

La etiqueta <img> no tiene cierre necesariamente
Sintaxis
<img src="file://y a dirección de la imagen" alt="texto descriptivo de la imagen">
Ejemplo:

<img src="/../imagenes/foto1.jpg" alt="Dos niñas de la mano">



Debemos aclarar que no con todos los navegadores podemos ver el "alt" de manera visual. Hay algunos que no lo representan.

Atributos opcionales pero muy recomendables, son el height y el width. El height marca la altura de la imagen, mientras que el width marca la anchura. Son recomendables porque así ayudaremos al navegador a representar la imagen.

Y por último, también queremos mostrarte que le puedes adjudicar un borde a la fotografía. El atributo ya te lo sabes: "border". Después solo tendrás que definir cuál quieres que sea el grosor del borde.

Así las cosas, deberemos escribir este código



<img src="html/imagenes/prueba.jpg" border="1" alt="Este es el ejemplo de un texto alternativo" width="400" height="300">


Recuerda que para saber la dirección de la siguiente imagen debes dar botón derecho e ir a propiedades; deberás seleccionar la ubicación copiarla y pegarla en (*); copia el nombre de la imagen y agrega .jpg

Otra opción es ir a la imagen en Internet y copiar la dirección de la imagen y regala en tu codigo de HTML


<html>
<head>
<title>   Imagenes </title>
<head>
<body bgcolor="pink">
<img src="file//(*) pega la dirección de la ubicación de tu imagen; pega el nombre de la imagen agrégale la extensión   .jpg " y continuación agrega algunos atributos que sean necesarios para tu programa>

</body>
</html>


martes, 23 de febrero de 2021

CLASE 53 ETIQUETA DE FUENTE EN HTML Y SUS ATRIBUTOS (font, size y color)

Fin en mente: Realizar un programa de HTML para poner fuente, tamaño y color 

Propiedades del Texto

Las propiedades del texto pueden modificarse a través de la etiqueta . Para ello, podemos insertar el texto entre las etiquetas y , especificando algunos de los atributos de la etiqueta:
FACE: Fuente. nombre de la fuente, o fuentes
COLOR: Color del texto. número hexadecimal o texto predefinido en ingles
SIZE: Tamaño del texto. valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valor
Por ejemplo, para insertar el texto:


<html>
<head>
<title> Fuente, tamaño y color </title>
</head>
<body bgcolor="green">

<br> <font face="times new roman" color="blue" size="20"> <p align="center">  Hay una serpiente en mi bota </font> </p> </br> 

<br> <font face="century gothic"  color="red" size="10"> <p align="left"> Al infinito y mas alla  </font> </p> </br>

<br> <font face="arial" color="orange" size="-80"> <p align="center"> Estuve escondido  bajo tu casa porque te amo</font> </p> </br>

<br> <font face="times new roman" color="pink" size="-20"> <p align="left"> Sino puedes decir algo lindo mejor no digas nada </font> </p> </br> 

<br> <font face="century gothic" color="black" size="10"> <p align="center"> Ohana, significa familia  </font> </p> </br>

<br> <font face="arial"  color="purple" size="34"> <p align="left"> Nuestro destino vive en nosotros </font> </p> </br>

</body>

</html>

domingo, 21 de febrero de 2021

CLASE 52 COLOR DE FONDO, PÁRRAFO, SALTO DE PÁRRAFO, ALINEACIONES CENTRADO, IZQUIERDA, DERECHA

Fin en mente: Reapizar un programa en HTML para alinear párrafos, saltar de párrafo y colocar fondo en un programa de HTML.


Etiqueta de párrafo: <p>
-       Atributos de un párrafo: Para alinear un párrafo necesitamos la siguiente sintaxis: align=”center”, este atributo centra el párrafo
align=”left” alinea el párrafo a la izquierda
align=”right” alinea el párrafo a la derecha

Etiqueta de salto de línea es: <br>
Etiqueta de  color de página esta  etiqueta se deberá poner en el body de la siguiente manera: <body bgcolor=”color en inglés o en código hexadecimal” >.

 <html>
<head>
<title> Parrafos </title>
</head>
<body bgcolor="aqua">
<h1><p align="center"> Animales Salvajes </p> </h1>
<h2><p align="center"> Tigre </h2></p>
<h2><p align="center"> León </h2></p>
<h2><p align="center"> Pantera </h2></p>
<h2><p align="center"> Guepardo </h2></p>
<h2><p align="center"> Hiena </h2></p>
<h1><p align="left"> Animales de la Granja </p> </h1>
<h2><p align="left"> Caballo </h2>
<h2><p align="left"> Gallina </h2>
<h2><p align="left"> Ganso </h2>
<h2><p align="left"> Pato </h2>
<h2><p align="left"> Cabra </h2>
<h1><p align="right"> Animales Acuáticos </p> </h1>
<h2><p align="right"> Delfín </h2>
<h2><p align="right"> Tiburón </h2>
<h2><p align="right"> Pez Espada </h2>
<h2><p align="right"> Foca </h2>
<h2><p align="right"> Mantarraya </h2>
</body>


sábado, 20 de febrero de 2021

CLASE 51 COLOR DE FONDO Y ESTILOS EN HTML

Fin en mente: Aplicar en HTML las  diferentes etiquetas de estilo y colores para aplicarse en una página Web 

-La etiqueta <b> se usa para representar un texto con un estilo de fuente en negrita.  </b>
-La etiqueta <i> se usa para representar un texto con un estilo de fuente en itálica. </i>
-La etiqueta <u> se usa para representar un texto con un estilo de fuente subrayada. </u>
-La etiqueta <big> se usa para representar un texto con un estilo de fuente grande. </big>

-La etiqueta <em> se usa para indicar énfasis. Los navegadores presentan el texto enfatizado generalmente en itálica. </em>

-La etiqueta <small> se usa para representar un texto con un estilo de fuente pequeña. </small>

-La etiqueta <strong> se usa para indicar énfasis fuerte. Los navegadores presentan el texto generalmente con una fuente en negrita. </strong>

-La etiqueta <sub> se utiliza para representar un subíndice. Ejemplo. H<sub>2</sub>O

-La etiqueta <sup> se utiliza para representar un superíndice. Ejemplo. 4<sup>2</sup>=16
-La etiqueta <ins> se utiliza para marcar secciones de un texto que han sido insertadas. Ejemplo. Código"...de acuerdo a la ley <del>17481</del> <ins>17487</ins> del Código Penal"
-La etiqueta <del> se utiliza para marcar secciones de un texto que han sido borradas. "...de acuerdo a la ley <del>17481</del> 17487 del Código Penal"
-La etiqueta <tt> se usa para representar un texto con un estilo de fuente en teletipo. </tt>


En la etiqueta <body> se utiliza también para proporcionar al navegador información sobre la disposición de los objetos o  visualización en el documento.

bgcolor

El atributo bgcolor incrusta un fondo de un solo color. La sintaxis correcta es: <body bgcolor="red">

Es posible sustituir el nombre en inglés con valores hexadecimales. Por ejemplo, el color rojo (red) se sustituye de esta manera:

<body bgcolor="#ff0000">
La utilidad de los colores hexadecimales es mayor cuando no se desea un color estándar sino tonalidades diversas o difuminadas. Los editores HTML de mayor difusión prevén paletas para la definición de los colores hexadecimales
<html>
      <head>
                 <title>  Estilos </title>
      <head>
 <body>
<b>Texto en negrita</b>
<i>Texto en itálica
</i>
<u>Texto en subrayado</u>
<big>Texto grande</big>
<em>Texto enfatizado</em>
<small>Texto pequeño</small>
<strong>Texto fuerte
</strong>
<sub>Texto subíndice</sub>
<sup>Texto superíndice
</sup>
<ins>Texto subrayado</ins>
<del>Texto tachado
</del>
<tt>Texto teletipo</tt>
</body>

</html>

jueves, 18 de febrero de 2021

CLASE 50 ENCABEZADOS Y ACENTOS EN HTML

Fin en mente: Dar a conocer los encabezados de HTML en un programa y como poner acentos dentro de un programa de HTML.

<html>
   <head>
      <tittle> Encabezados </tittle>
   </head>
   <body>
      <h1> Encabezado de tipo 1 </h1>
      <h2> Encabezado de tipo 2 </h2>
      <h3> Encabezado de tipo 3 </h3>
      <h4> Encabezado de tipo 4 </h4>
      <h5> Encabezado de tipo 5 </h5>
      <h6> Encabezado de tipo 6 </h6>      
   </body>

</html>


<html>
   <head>
      <tittle> Acentos y ñ </tittle>
   </head>
   <body>
      <p align="center"> le&oacute;n </p>
      <p align="center"> &aacute;rbol </p>
      <p align="center"> &aacute;guila </p>
      <p align="center"> l&aacute;piz </p>
      <p align="center"> fr&aacute;gil </p>
      <p align="center"> bast&oacute;n </p>
      <p align="center"> g&eacute;nero </p>
      <p align="center"> ir&oacute;nico </p>
      <p align="center"> ej&eacute;rcito </p>
      <p align="center"> f&aacute;brica </p>
      <p align="center"> a&ntilde;o </p>
      <p align="center"> Ri&ntilde;&oacute;n </p>
   </body>

</html>

miércoles, 17 de febrero de 2021

CLASE 49 ETIQUETAS DE HTML




Fin en mente: Conocer las etiquetas de HTML, su aplicación y sus atributos