Sexto Grado
Que tal chicos y chicas de Sexto grado, como están, espero que se encuentren muy bien, aquí le dejare las actividades a realizar durante cada semana para poder practicar en casa los temas que se vean en clases.
COMENTARIOS
En un documento HTML, los comentarios pueden escribirse entre los caracteres "<!--" y "-->". Por ejemplo:
<!-- Esto es un comentario escrito en un documento HTML -->
Los comentarios no se mostrarán en el navegador donde se visualice el documento HTML.
EJEMPLO Dado el archivo "comentarios.html", con dos comentarios:
<!--Ejemplo del Tutorial de HTML-->
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejemplo con comentarios</title>
</head>
<body>
<!-- En el body hay 2 párrafos -->
<p>Esto es un párrafo.</p>
<p>Esto es otro párrafo.</p>
</body>
</html>
En un navegador se mostrarán solamente los dos párrafos escritos en el "body":
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.
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.
EJERCICIOS HTML
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.
Video introducción a tablas
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>Celda1.1.</td> </tr> </table> |
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> |
Imágenes
Las imágenes son un elemento esencial en las páginas web. 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>.
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).
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 p, div o figure que tienen display de tipo block.
Atributo src de la etiqueta <img>
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 alt de la etiqueta <img>
<img src="graficos/logoAulaclic.jpg" alt="Logo de aulaClic" />
Se muestra lo siguiente:
Atributo title en la etiqueta <img>
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" />
Comentarios
Publicar un comentario