MF0950_2: Construcción de páginas web.
● UF1302: Creación de páginas web con el lenguaje de marcas.
Comentarios
Para insertar un comentario sólo necesitamos encerrarlo entre estos dos símbolos o etiquetas:
<!-- (este es el símbolo que indica inicio de comentario)
--> (y con esto se termina el comentario)
Por ejemplo:
<!--esto es un comentario-->
O incluso con más guiones para hacerlo más visible.
<!-----esto es un comentario----->
Pero como mínimo tener dos guiones al principio y final.
Los comentarios no aparecen en la página cuando la visita alguien, solamente sirven para el autor de la web, cuando mire su código, sepa qué es cada trozo de código. Es decir, podemos insertar uno o varios comentarios en alguna parte del código html para saber qué hace cada trozo donde lo coloquemos, a modo de aclaraciones para nosotros mismos. Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Mi Nueva Web</title>
<!-- Insertar aquí mas Metatags-->
</head>
<body>
<p>BIENVENIDOS!</p>
<p>Hola amigos, esta es mi nueva Web</p>
</body>
</html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Mi Nueva Web</title>
<!-- Insertar aquí mas Metatags-->
</head>
<body>
<p>BIENVENIDOS!</p>
<p>Hola amigos, esta es mi nueva Web</p>
</body>
</html>
Otra utilidad que tienen los comentarios es la siguiente. Si se desea anular algún trozo de web, pero sin borrar el código por si más adelante hará falta o sólo por ver que tal queda sin cierto elemento. En cualquiera de estos casos sólo hay que encerrar este trozo de código entre los símbolos de comentario y quedará anulado. Vamos a poner un ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Mi Nueva Web</title>
<!-- Insertar aquí mas Metatags-->
</head>
<body>
<!-- <p>BIENVENIDOS!</p> -->
<p>Hola amigos, esta es mi nueva Web</p>
</body>
</html>
En este caso, la palabra bienvenidos ya no sería visible.
Es importante no olvidar cerrar los comentarios con el símbolo -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Mi Nueva Web</title>
<!-- Insertar aquí mas Metatags-->
</head>
<body>
<!-- <p>BIENVENIDOS!</p> -->
<p>Hola amigos, esta es mi nueva Web</p>
</body>
</html>
En este caso, la palabra bienvenidos ya no sería visible.
Es importante no olvidar cerrar los comentarios con el símbolo -->
Títulos
Al igual que para crear un párrafo lo encerrábamos entre las etiquetas <p> y </p>, para crear un titular basta con escribir su texto y encerrarlo entre las etiquetas <h1> y </h1>. De este modo, cuando lo lea el navegador, presentará el texto de un modo distinto, algo más destacado de lo normal. como por ejemplo:
. . . . . .
<body>
<h1>BIENVENIDOS!</h1>
<p>Hola amigos, esta es mi nueva Web</p>
. . . . . . .
<body>
<h1>BIENVENIDOS!</h1>
<p>Hola amigos, esta es mi nueva Web</p>
. . . . . . .
Hay, además, otras etiquetas de títulos en html5 h2, h3, h4, h5 y h6. Conforme mayor sea el número que acompañe a la h, menor será el tamaño del texto o estará menos destacado. Esto es lo básico, posteriormente se les dará color y forma con CSS.
Insertar imágenes
El código html5 correcto para insertar una imagen en una página web es este:
<img src="ruta/archivo.extensión" width="111px" height="222px" alt="Texto Alternativo">
Las imágenes, definidas con la etiqueta img, se relacionarán posteriormente a las etiquetas <figure>, <figcaption> y/o <aside>
Vamos ahora a explicar las distintas partes de la línea para entenderlo mejor.
1. Etiqueta de imagen
La etiqueta para las imágenes es <img..>, todo lo demás de dentro son detalles imprescindibles que se le añaden para especificar las dimensiones, etc. Esta etiqueta es algo especial ya que no se cierra como las demás, es decir, no se escribe <img>...</img>
2. Ruta de la imagen
La ruta de la imagen es el camino que hay que seguir para llegar desde el archivo en el que vas a guardar el código html hasta el lugar donde guardarás el archivo de la imagen que deseas insertar en la página. Si vas a guardar la imagen dentro de la misma carpeta que guardarás el html, en este caso el archivo es nulo. Es decir, no tiene que ir a ningún sitio a buscar la imagen, por lo tanto no hay ruta. Sólo tendrás que colocar directamente el nombre del archivo de imagen con su extensión. En caso de que la imagen esté guardada en otra carpeta habrá que poner la ruta en donde esté ubicada. Para obtener la ruta en windows 7, pincharemos estando dentro de la carpeta, donde pone el nombre de ésta, entonces aparecerá la ruta de la misma.
3. Nombre del archivo
Esto es importante ya que de nada sirve poner bien la ruta si luego el navegador no es capaz de encontrar el archivo en la carpeta. Para evitar esto, comprueba que el nombre del archivo es exactamente el mismo, respetando mayúsculas, minúsculas etc. Es importante que el nombre del archivo no tenga ningún símbolo raro como las tildes, ya que dará problemas y la imagen no aparecerá.
4. Dimensiones de las imágenes
Para definir la anchura de la imagen en su línea de código html basta con escribir esto:
width="111px"
Width significa anchura en ingles y la cifra 111 está puesta de ejemplo, es la que indica cuantos píxeles de ancho tiene(px). Los píxeles son cada cuadradito que tiene la imagen hasta formarla por completo, ya que éstas, están formadas por cuadros pequeños (o píxeles). Es importante no olvidar colocar esta parte entre comillas.
Para definir la anchura habrá que colocar esto:
height="222px"
Esta palabra significa altura en inglés. Al igual que la anchura, la cifra de al lado significa su altura en pixeles y también deberá ir entre comillas.
Si buscas que la imagen aparezca con su tamaño original, deberás asegurarte de sus dimensiones concretas. Es importante, además, no dejar ningún espacio entre comillas.
5. Textos alternativos
El código alt sirve para indicar los textos alternativos a la imagen. El texto alternativo es aquella frase que aparecerá en la web cuando por el motivo que sea el navegador no consigue mostrar la imagen. Esto puede ocurrir cuando el navegador del visitante es muy antiguo, o cuando la línea de código no está bien escrita, o si has escrito mal la ruta de la imagen (colocando mayúsculas en vez de minúsculas por ejemplo) u olvidaste subir la imagen al servidor.
No obstante, aún estando seguros de que no va a suceder, es obligatorio colocar el alt, uno de los motivos principales es porque ésta es la forma correcta de escribir en html5, otro es que google va a conocer la temática de tus páginas por la cantidad de palabras clave que aparezcan en ella y, uno de los lugares en los que busca estas palabras clave es el alt de las imágenes. La mejor forma de escribirlo es alt="y dentro lo que quieras", sin olvidar las dobles comillas cerrando el texto. Un consejo útil es escribir algo relacionado con la imagen. Éste sería un ejemplo ya más real:
<img src="imagenes/puesta-de-sol.png" width="450px" height="230px" alt="Las mejores puestas de sol, todoimagenes.com">
.jpg)
.jpg)
