jueves, 4 de noviembre de 2021

TRABAJO FINAL

 Culminando este interesante curso de diseño Web, vamos a poner en práctica todos los conocimientos adquiridos mediante el diseño creativo de una página web, esta podrá desarrollarse en grupos de 2 personas y tendrá las siguientes características :

1. El tema a desarrollar será académico de cualquier área del conocimiento.

2. La página principal se llamara index.html y contendrá un menú principal con al menos 5 opciones que llamaran  páginas relacionadas con el tema que hayan sido creadas por el equipo de trabajo. 

3. Todas las páginas deberán ser diseñadas por el grupo y deberán contener elementos multimedia como textos, imágenes y videos. 

4.pueden incluir además de los elementos citados hiperenlaces a páginas de la web. 

Recuerden que tienen un nivel de aprendizaje muy bueno y los trabajos que envíen deben ser de buena calidad y creatividad, la fecha de entrega será el 26 de Noviembre, tienen el tiempo suficiente para lograrlo. Muchos éxitos. 


jueves, 28 de octubre de 2021

MANEJO DEL VIDEO



Hasta el momento hemos visto los conceptos básicos de HTML para el diseño de páginas WEB, las páginas cobran vida cuando insertamos en ella elementos multimedia como el video, en esta oportunidad vamos a mirar como insertar un video desde Youtube utilizando únicamente el código de inserción suministrado por la misma página, observa el siguiente ejemplo:

<HTML>

<HEAD><BODY bgcolor="yellow">

</HEAD>

<BODY>

<CENTER><H1>PRIMER VIDEO</H><BR><BR>

<iframe width="853" height="480"src="https://www.youtube.com/embed/XQIzTAHDxn8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</CENTER>

</BODY>

</HTML>

Colocar video en una página WEB es un proceso muy simple, solo debes ingresar a YouTube, buscar el video de tu preferencia, dar clic derecho sobre el video y seleccionar la opción COPIAR CÓDIGO DE INSERCIÓN (en el ejemplo se muestra de color azul) desde el menú contextual; luego pega este código dentro del cuerpo o BODY de tu código general en el blog de notas tal como se muestra en el ejemplo anterior.

ACTIVIDADES

1. Construye una página web con cualquier tema de tu preferencia y en ella inserta 4 videos dentro de una tabla de 2 filas por 2 columnas, envía tu trabajo al correo habitual hasta el 2 de Noviembre de 2021.


jueves, 21 de octubre de 2021

ENLACES

 Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos. Son un elemento muy común en cualquier página web, de hecho, podríamos decir que el hiperenlace o hipertexto es la instrucción o etiqueta más importante del lenguaje HTML como se desprende del propio nombre (Hyper Text Markup Lenguage).

En este vídeo puedes ver hiperenlaces, primera parte:Videotutorial

En este vídeo puedes ver hiperenlaces, segunda parte:Videotutorial

Hiperenlaces. Definición

Un hiperenlace se escribe con la etiqueta <a> y permite ir (navegar) a un recurso de internet designado por su dirección de internet (URL). El recurso más usual es una página web pero también puede ser un archivo de imagen, vídeo, dirección email, dirección ftp, punto de ancla, ...

Un hiperenlace tiene dos partes fundamentales, el destino y el elemento que activa el enlace. Vamos a explicarlo sobre el siguiente ejemplo.

La forma más usual de utilizar la etiqueta <a> es para enlazar con otra página web mediante un texto:

Visita aulaClic

El código correspondiente es este:

<a href="http://www.aulaclic.es">Visita aulaClic</a>

El elemento que activa el enlace es el texto Visita aulaClic que al ser pulsado nos lleva al destino del hiperenlace. El destino se indica con el atributo href que en este caso es una dirección de internet (URL). Al colocar el cursor en el texto del hiperenlace el cursor toma la forma de una mano para indicarnos que se trata de un hiperenlace. Si hacemos clic con el botón derecho aparecerá un menú contextual con varias opciones (Abrir en una pestaña nuevaGuardar enlace, ...). En los dispositivos táctiles, al no existir cursor, el comportamiento es diferente. No hay forma de saber si un texto contiene un enlace hasta que demos una pulsación corta, con lo cual se activará; o demos una pulsación larga para que aparezca el menú contextual.

También es frecuente que el elemento que activa el enlace sea una imagen, como en el siguiente ejemplo:

El código correspondiente es este:

<a href="http://www.aulaclic.es"><img src="comunes/logo_ac1_50.gif"/></a>

El elemento que activa el enlace se escribe entre las etiquetas <a> y </a> y puede ser una etiqueta de texto (párrafoh1, ..), una imagen y también otros elementos (sectionlista, ...); incluso podemos colocar más de un elemento, por ejemplo una imagen y un texto.

Otra forma de nombrar un hiperenlace es hipervínculo o hipertexto, y si estamos en un contexto que se habla de Internet también se les puede llamar simplemente enlace o vínculo.

EJEMPLO: En el siguiente ejemplo se presenta una tabla con 3 hiperenlaces que conllevan a paginas cuyas url fueron copiadas de la barra del navegador y se despliegan desde una imágen cada uno.

<HTML>
    <HEAD>
        <BODY BGCOLOR="BLUE">
    </HEAD>

<BODY>
        <CENTER><h1>AUTOS ALEMANES</h1><br><br>
        
        <TABLE border="1">
        <TR>
        <TD>
        <a href="https://www.mercedes-benz.com.co/"><img src="mercedes.png"></a>
        </TD>
        </TR>
        
        <TR>
        <TD>
        <a href="https://bmwshop.autogermana.com.co/"><img src="bmw.jfif"></a>
        </TD>
        </TR>

        <TR>
        <TD><a href="https://www.audi.com.co/"><img src="audi.jfif"></a>
        </TD>
        </TR>
        </TABLE>

</CENTER>
</BODY>
</HTML>

ACTIVIDADES

1. Observa con atención los videos planteados en esta guía.
2.Realiza en el blog de notas un ejercicio similar al ejemplo presentado, puedes utilizar cualquier otro tema de tu preferencia.
3. Envia tus trabajos al correo habitual hasta el 28 de Octubre de 2021





miércoles, 6 de octubre de 2021

ETIQUETAS PARA TABLAS

 Etiqueta <th>

Dado que es muy común que las tablas tengan una primera fila de cabecera se creó la etiqueta <th>. Esta etiqueta se aplica a las celdas de cabecera en lugar de la etiqueta td y el efecto fundamental es que tiene un formato diferente, normalmente letra negrita y alineación centrada. Como ya sabemos, este formato se puede cambiar con las hojas de estilo. La etiqueta <th> se puede colocar tanto en las filas como en las columnas, por ejemplo:

<table>
 <tr>
  <th>Marcas</th>
  <th>Seat</th>
  <th>Ford</th>
  <th>BMW</th>
</tr> <tr> <th>2016</th> <td>23900</td> <td>21500</td> <td>11500</td> </tr> <tr> <th>2017</th> <td>24600</td> <td>23500</td> <td>13400</td> </tr> </table>

Produce este resultado:

MarcasSeatFordBMW
2016239002150011500
20172460023500
13400

También se pueden utilizar las propiedades de formato en la propia tabla para colocar bordes, por ejemplo, para poner borde y color de fondo rojo, podemos escribir el siguiente código <table border="1" bgcolor="red">

Unir celdas con colspan y rowspan

Con los atributos colspan y rowspan podemos unir o fusionar celdas adyacentes, así obtendremos celdas de mayor tamaño, el resultado siempre será un rectángulo. 

 El atributo colspan extiende la celda tantas celdas a la derecha como le indiquemos, contando la celda actual. Por ejemplo colspan="2" ocupa su celda y una más a la derecha. Veamos este código aplicado a una tabla:

<table border="1">
 <tr>
  <td>Celda</td>
  <td>Celda</td>
  <td>Celda</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td colspan="2">Celda cs2</td>
  <td>Celda</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td colspan="3">Celda cs3</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td colspan="4">Celda cs4</td>
 </tr>
</table>

Produce este resultado:

CeldaCeldaCeldaCelda
Celda cs2CeldaCelda
Celda cs3Celda
Celda cs4

Observa que al expandir la celda, en la fila ponemos menos etiquetas <td>.

 El atributo rowspan expande la celda tantas celdas hacia abajo como le indiquemos, contando la celda actual.

<table border="1">
 <tr>
<td>Celda</td> <td rowspan="2">Celda rs2</td> <td rowspan="3">Celda rs3</td> <td rowspan="4">Celda rs3</td> </tr> <tr> <td>Celda</td> </tr> <tr> <td>Celda</td> <td>Celda</td> </tr> <tr> <td>Celda</td> <td>Celda</td> <td>Celda</td> </tr> </table>

CeldaCelda rs2Celda rs3Celda rs3
Celda
CeldaCelda
CeldaCeldaCelda

Observa que al aplicar rowspan a una celda, "cogemos" una celda de la siguiente fila, por lo que la siguiente celda tendrá una celda menos.

Y en cualquier caso podemos combinar estos dos atributos en la misma celda:

<table border="1">
 <tr>
  <td colspan="2" rowspan="2">Celda cs2 rs2</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td>Celda</td>
 </tr>
 <tr>
  <td>Celda</td>
  <td>Celda</td>
  <td>Celda</td>
 </tr>
</table>

Produce este resultado

Celda cs2 rs2Celda
Celda
CeldaCeldaCelda



ACTIVIDADES

1. Realiza los ejercicios planteados en esta entrada de blog.

2. Elabora una página web cuyo título sea , CUADRO DE HONOR y que contenga una tabla con bordes con la siguiente información, utiliza las etiquetas colspan y rowspan, envía el desarrollo de tu trabajo al correo habitual hasta el día 8 de Octubre de 2021.




martes, 28 de septiembre de 2021

TABLAS

Tablas

Las tablas nos permiten organizar la información en filas y columnas. Cada fila se divide en celdas. La información se introduce en las celdas. Una columna está formada por las celdas agrupadas verticalmente, en HTML no existe una etiqueta para definir columnas. Las tablas se definen en base a las filas y a las celdas, como veremos a continuación.

Inicialmente las tablas se crearon para introducir información en forma tabular como, por ejemplo, las ventas de coches por años y marcas. En cada celda se colocan las ventas de un año y una marca, en las filas tenemos los años y en las columnas las diferentes marcas.

Sin embargo, los diseñadores de páginas web empezaron a utilizarlas para definir la estructura de la página ya que era la forma más fácil de distribuir el espacio con las etiquetas disponibles en los comienzos de la web. 

En este vídeo puedes ver una introducción a las tablas:Videotutorial

Etiquetas de tabla <table> <tr> y <td>

La etiqueta <table> y su correspondiente etiqueta de cierre </table> definen la tabla. Entre ambas etiquetas se escriben las etiquetas de fila <tr> y </tr> y dentro de las filas las etiquetas de celda <td> y </td>, entre estas se escribe el contenido de la celda que puede ser cualquier etiqueta de HTML o directamente un texto. Por lo tanto la tabla más sencilla con una sola celda sería esta:

<table>
	<tr>
		<td>Celda 1.1.</td>
	</tr>
</table>

Que produce este resultado:

Celda 1.1.

Como decíamos antes, no existe una etiqueta para definir las columnas, en su lugar, el número de celdas define el número de columnas. Todas las filas deben tener el mismo número de celdas, aunque ya veremos que es posible unir celdas. Por ejemplo, una tabla con tres filas y cuatro columnas se escribe así:

<table>
	<tr>
		<td>Marcas</td>
		<td>Seat</td>
		<td>Ford</td>
		<td>BMW</td>
	</tr>
	<tr>
		<td>2016</td>
		<td>23900</td>
		<td>21500</td>
		<td>11500</td>
	</tr>
	<tr>
		<td>2017</td>
		<td>24600</td>
		<td>23500</td>
		<td>13400</td>
	</tr>
</table>

MarcasSeatFordBMW
2016239002150011500
2017246002350013400

Dentro de una celda se pueden incluir la mayoría de las etiquetas de HTML, texto, imágenes, listas, etc. Incluso de pueden anidar tablas, para ello basta incluir otra tabla dentro de una celda.


ACTIVIDADES:

1. Realiza un resumen en tu cuaderno sobre tablas y las etiquetas para el manejo de ellas, incluyendo la información de esta entrada y la del video.

2. crea una página web con la información sobre las marcas de autos presentada en el ejemplo anterior, no olvides guardar el documento como html.

3. elabora una página web que contenga 6 imágenes , preferiblemente del mismo tamaño, puedes editarlas en paint o photoshop; 3 van en la primera fila y 3 en la segunda, es decir dentro de una tabla de 3 columnas por 2 filas, recuerda que cada celda va construyendo una columna para la tabla.

4. envía el desarrollo de tu trabajo al correo when732@gmail.com hasta el día viernes 1 de Octubre de 2021.


WEBGRAFÍA:

https://www.aulaclic.es/html/t_6_1.htm

martes, 14 de septiembre de 2021

IMÁGENES

 Las imágenes son un elemento esencial en las páginas web. Hasta la versión 5 de HTML se utilizaba la etiqueta <img> para incluirlas en una página web. Pero debido a la necesidad de crear páginas web que se adapten a dispositivos de diferente tamaño se ha incorporado la etiqueta <picture>.

Antes de ver cómo incluir imágenes en una página web conviene distinguir los diferentes tipos de imágenes que existen: mapas de bits, vectoriales y generadas dinámicamente. Las imágenes más comunes son las de mapa de bits que están formadas por puntos de colores, por ejemplo una cámara de fotos digital utiliza imágenes de este tipo, los tipos de archivos más usados son .jpg, y .png; también se utilizan mucho para gráficos y animaciones las de tipo .gif. Para crear imágenes de mapa de bits puedes utilizar programas como Photoshop y Gimp (gratis)

Las imágenes vectoriales están definidas por fórmulas matemáticas en base a vectores y permiten ampliarlas sin perder resolución. Suelen ser gráficos, esquemas, logos, etc. Uno de los tipos de archivos usados en la web es .svg. Para crear imágenes vectoriales se utilizan programas como CorelDraw, Illustrator y Inkscape (gratis).

Las imágenes generadas dinámicamente se crean en el mismo momento de cargarse la página web y pueden modificarse en tiempo real por intervención del usuario o por eventos, por ejemplo, en videojuegos. Para este tipo de imágenes se utilizan las tecnologías Canvas y SVG.

Si quieres saber un poco más sobre formatos de imagen visita este tema básico y te lo explicamos: Formatos de imágenes .

En esta unidad veremos las etiquetas <img> y <picture>, las imágenes generadas dinámicamente las veremos más adelante, en las unidades 15 y 16.

En este vídeo puedes ver la etiqueta <img>:Videotutorial

En este vídeo puedes ver la etiqueta <picture>:Videotutorial

 Etiqueta <img>

Con la etiqueta <img> representamos imágenes en una página web. Esta etiqueta no tiene etiqueta de cierre, se cierra con el carácter >, aunque también se puede cerrar con />. Para indicar el origen de la imagen se utiliza el atributo src="ruta_imagen". Por ejemplo:

<img src="graficos/logoAulaclic.jpg"/>

Que produce el siguiente resultado:

La etiqueta img es una etiqueta con el atributo display de tipo inline, es decir, no incluye un salto de línea. Esto permite colocar imágenes pequeñas o iconos dentro de una línea de texto. Si queremos que una imagen ocupe toda la línea podemos colocarla dentro de una etiqueta pdiv o figure que tienen display de tipo block. También podemos cambiarle el display a block desde la hoja de estilo. El atributo display lo veremos más en profundidad en la unidad 10 de las hojas de estilo.

 Atributo src de la etiqueta <img>

Como acabamos de ver el atributo src sirve para indicar la ruta donde se encuentra la imagen que se va a mostrar. Por tanto, la imagen estará en un archivo distinto al archivo que contiene la página web, no puede estar incrustada en el mismo archivo (salvo que se genere dinámicamente).

Este archivo de imagen puede encontrarse en cualquier lugar accesible desde la página web, en el mismo directorio, en otro directorio, en otro servidor de internet, etc. En cada caso la ruta para acceder al archivo será distinta, y puede escribirse de forma absoluta o de forma relativa. Una ruta es absoluta cuando incluye todos los elementos de la ruta, y una ruta es relativa cuando parte del directorio en el que se encuentra la página web. En la unidad 3 que tratamos los hiperenlaces están explicadas las rutas absolutas y relativas con ejemplos.

Los tipos de archivo de imagen más frecuentes son .jpg.gif y .png. Para imágenes fotográficas con muchos colores y detalles se suele emplear el formato .jpg. El formato .gif se ha venido utilizando para imágenes de gráficos y esquemas, permite el fondo transparente y animaciones. El formato .png permite fondo transparente como el .gif, pero es más moderno, con mayor compresión y calidad.

 Atributo srcset de la etiqueta <img>

El atributo srcset permite establecer distintas imágenes en función de la resolución del dispositivo y del ancho de la pantalla.

El formato para la resolución del dispositivo lo vamos a ver en el siguiente ejemplo:

<img srcset="img_resol_normal.png 1x, img_resol_alta.png 2x">

Si la resolución de la pantalla es 1x, que equivale a un monitor de ordenador, se mostrará la imagen img_resol_normal.png, y si la resolución de la pantalla es 2x, que equivale a un dispositivo móvil de alta resolución, se mostrará la imagen img_resol_alta.png

De forma forma similar podemos utilizar el ancho de la pantalla ver en el siguiente ejemplo:

<img srcset="img_resol_normal.png 500w, img_resol_alta.png 700w">

Si el ancho de la pantalla es menor o igual de 500w, se mostrará la imagen img_resol_normal.png, y si el ancho de la pantalla es mayor de 500w, se mostrará la imagen img_resol_alta.png

Las unidades w son descriptores de anchura que equivalen a pixeles para una resolución normal.

También se puede utilizar el atributo sizes que afecta al parámetro srcset, complicando más los cálculos, además no todos los navegadores principales implementan igual estos atributos, por lo que es recomendable utilizar la etiqueta picture, que veremos luego, cuando queramos establecer distintas imágenes en función de la resolución del dispositivo y del ancho de la pantalla.

 Atributo alt de la etiqueta <img>

El atributo alt contiene texto alternativo, que se mostrará en lugar de la imagen cuando no sea posible verla.

Por ejemplo, si escribimos el siguiente código con el nombre del directorio erróneo (grafico en lugar de graficos) se mostrará el texto de atributo alt:

<img src="graficos/logoAulaclic.jpg" alt="Logo de aulaClic" />

Se muestra lo siguiente:

Logo de aulaClic

Si no existe la imagen ni tampoco el atributo alt algunos navegadores (Firefox) mostrarán un pequeño gráfico con un icono similar a este: Si no existe la imagen, y otros navegadores (Chrome) no mostrarán nada:

<img src="graficos/logoAulaclic.jpg" />

Se muestra lo siguiente:

Aunque el atributo Alt es obligatorio, si se omite no se producirá ningún error apreciable por el usuario. Si se omite este atributo, al validar la página con la herramienta W3C no dará una validación correcta. Aparte de la función principal de mostrar el texto cuando no existe la imagen, es importante utilizar Alt por dos motivos.

El primero es porque lo usan los buscadores para indexar las imágenes en sus bases de datos de forma que podamos encontrar la imagen desde un buscador, el segundo motivo es porque el atributo alt es utilizado por los programas que ayudan a los ciegos y personas con problemas visuales a leer las páginas web. En cualquier caso es importante dar un texto descriptivo y corto a este atributo.

Atributo title en la etiqueta <img>

El atributo title es un atributo global, es decir que puede usarse en la mayor parte de las etiquetas de HTML. El atributo title proporciona información descriptiva del elemento en el que está definido. El atributo title se muestra como un tooltip al colocar el cursor encima del elemento y es bastante utilizado en las etiquetas img ya que puede ser interesante proporcionar al usuario información sobre la imagen en forma de tooltip.

Por ejemplo, con el siguiente código mostrará el tooltip al dejar colocado el cursor sobre la imagen durante un segundo o más:

<img src="graficos/logoAulaclic.jpg" title="Cursos de inforaática gratis" />

Atributos width y height de la etiqueta <img>

El atributo width establece la anchura de visualización de la imagen, y el atributo height establece la altura de visualización de la imagen. No son obligatorios, si no aparecen la imagen tendrá su altura y anchura original. Si aparecen, modificarán el aspecto de la imagen pero no afectarán al archivo de imagen, es decir, sólo afectarán a la visualización que realiza el navegador de la imagen. Por defecto, las unidades son píxeles. Por ejemplo, si queremos que la imagen anterior se vea a la mitad de sus tamaño original (200 x 79) escribiremos este código.

<img src="graficos/logoAulaclic.jpg" width="100" height="40" />

Es importante mantener las proporciones originales si queremos que la imagen no se vea deformada. Si sólo indicamos la anchura, la altura se calculará proporcionalmente, y viceversa. Como norma general, no conviene modificar las dimensiones originales de la imagen, y sobre todo no agrandar demasiado la imagen ya que perderá resolución y no se verá bien. Es preferible modificar el tamaño de la imagen con un programa de edición fotográfica. 

Hasta la versión 5 de HTML, la anchura y la altura también se podía dar en porcentaje, lo cual se utilizaba para hacer que la imagen se adaptará a todo el ancho de la pantalla dando el valor width="100%". Actualmente con la aparición de la etiqueta picture ya no es necesario utilizar ese truco para conseguir imágenes adaptables.

Por ejemplo, En la siguiente imagen hemos dado un valor de width="25%", y la imagen ocupa el 25% del ancho disponible, si redimensionas la ventana del navegador verás como va cambiando de tamaño.

<img src="graficos/logoAulaclic.jpg" width="25%"/>

Si damos una anchura en porcentaje puede que la imagen se agrande demasiado y no se vea bien, para evitarlo se puede utilizar la propiedad max-width=100% en la hoja de estilo, de forma que la imagen nunca se agrandará más de su tamaño original. Por ejemplo:

<img src="graficos/en_rio_grande_800.jpg" style="max-width: 100%; height: auto;">

Los navegadores siguen resolviendo bien las etiquetas con valores de anchura y altura en porcentajes. Actualmente existen bastantes páginas web que siguen utilizando porcentajes en estos atributos.

Los atributos width y height se pueden establecer también con hojas de estilo. En general, cuando un atributo se puede manejar con hojas de estilo y desde la etiqueta HTML, siempre se recomienda hacerlo desde la hoja de estilos, para separar el contenido del formato, pero en este caso esta regla es discutible. Por ejemplo, si en nuestra página web hay muchas imágenes de diferentes tamaños tendríamos que declarar muchos estilos y el archivo de la hoja de estilos aumentaría mucho de tamaño y complejidad, en estos casos es mejor poner la anchura y altura directamente en la etiqueta html.

Hay otros casos donde sí tendrá sentido utilizar las hojas de estilo, por ejemplo, si tenemos muchas imágenes pero son todas del mismo tamaño y queremos darles un formato (por ejemplo, redondear las esquinas).

 

ACTIVIDADES

1. Elaborar una página web de un tema específico del área académica (cualquier asignatura, cualquier tema), incluir imágenes con cada uno de los atributos explicados en esta publicación, enviar su trabajo en una carpeta comprimida al correo habitual hasta el día 23 de Septiembre.

WEBGRAFÍA

https://www.aulaclic.es/html/t_5_1.htm


lunes, 30 de agosto de 2021

ETIQUETAS PARA EL MANEJO DEL TEXTO

 Encabezados <h1> <h2> ...

Las etiquetas <h1> <h2> ... <h6> crean texto para encabezados. Se suelen utilizar para títulos, subtítulos, rótulos, etc.

Ejemplo: <h1>Encabezado de primer nivel h1 </h1>

En la siguiente imagen puedes ver el tamaño de cada tipo de cabecera en relación al texto de párrafo:

Para los títulos y subtítulos es preferible utilizar etiquetas de encabezado que cambiar el tamaño de una etiqueta de párrafo ya que las etiquetas de encabezado tienen significado semántico y son utilizadas por los buscadores para dar significado al texto en función de su importancia.

Separadores <hr>

La etiqueta <hr> crea un separador horizontal. Hasta HTML 4 se representaba en forma de línea y tenía atributos para definir la anchura, alineación, ... En HTML5 esta etiqueta se define como un separador semántico más que como un separador visual, aunque los navegadores siguen representando una línea horizontal. Además esta etiqueta ya no tiene atributos, aunque cómo siempre con las hojas de estilo podemos darle el formato que queramos.

Ejemplo: <hr>

Produce este resultado:


Con un estilo podemos alinearla al centro, darle un ancho del 80%, darle un borde de 1 px con estilo punteado, color azul:

   hr {
      text-align: center; width: 80%;
      border: 1px dashed  blue;  }
   }   

 Etiqueta <q>

La etiqueta <q> se utilizar para poner entre comillas un texto corto.

Ejemplo:

<p> Al despedirse dijo: <q>Hasta nunca</q> y cerró la puerta.</p>

Al despedirse dijo: Hasta nunca y cerró la puerta.

Si el texto entre comillas se refiere a una cita es conveniente añadir el atributo cite con la URL, que no será visible para el usuario.

Ejemplo:

<p> La web aulaClic es <q cite="http://www.aulaclic.es/index.htm">La primera web en español sobre cursos gratuitos online</q> en la fecha actual, 2017.</p>

La web aulaClic es La primera web en español sobre cursos gratuitos online en la fecha actual.

Etiqueta <strong>

La etiqueta <strong> se utiliza para dar importancia a un texto corto. Los navegadores ponen el texto en negrita.

Ejemplo:

<p> Un coche histórico debe tener, al menos, <strong>25 años</strong> desde la primera matriculación.</p>

Un coche histórico debe tener, al menos, 25 años desde la primera matriculación.

Etiqueta <em>

La etiqueta <em> se utiliza para dar énfasis a un texto corto. Los navegadores poner el texto en cursiva.

Ejemplo:

<p> Una página web puede ser consultada desde <em>cualquier</em> parte del mundo.</p>

Una página web puede ser consultada desde cualquier parte del mundo.

Etiqueta <b>

La etiqueta <b> se utiliza para destacar un texto corto, sin que ello signifique que es importante. Los navegadores ponen el texto en negrita.

Ejemplo:

<p> El futbolista es el deportista mejor <b>pagado</b>.</p>

El futbolista es el deportista mejor pagado.

En muchas ocasiones es difícil distinguir si un texto corto es importante, queremos darle énfasis o merece ser destacado, por lo que utilizar las etiquetas <strong> <em> o <b> puede ser un poco ambiguo. Podríamos simplificar diciendo que si queremos ponerlo en cursiva utilizaremos <em>, y si queremos ponerlo en negrita y que sea tenido en cuenta por los buscadores como un texto importante utilizaremos <strong>, y si sólo queremos ponerlo en negrita utilizaremos <b>.

Etiqueta <sub>

La etiqueta <sub> se utiliza para ver texto como subíndice, es decir, colocado en la mitad inferior de la línea.

Ejemplo:

<p> H<sub>2</sub>O. Texto <sub>subíndice</sub></p>

H2O. Texto subíndice.


Etiqueta <sup>

La etiqueta <sup> se utiliza para ver texto como superíndice, es decir, colocado en la mitad superior de la línea.

Ejemplo:

<p>x<sup>2</sup>. Texto <sup>superíndice</sup></p>

x2. Texto superíndice


ACTIVIDADES:

1. Utilizando las etiquetas para el manejo del texto realiza una página web con tus datos personales: nombres, edad, identificación, dirección, celular, nombre de los padres y hermanos si los tiene, ocupación de los padres, intereses, aficiones, metas a largo y corto plazo, etc. 

2. Investiga cual es la etiqueta para colocar imágenes en tu página web y adiciona  fotografías a tu página web personal.

3. Envía tu trabajo hasta el día 7 de Septiembre de 2021, no olvides hacer una descripción de tu correo en el asunto del mismo.

WEBGRAFÍA

https://www.aulaclic.es/html/t_3_1.htm


TRABAJO FINAL