2. Encabezado de la página web
Para comenzar a crear una nueva página web HTML, debes abrir un editor de texto, como el Bloc de notas. Puedes usar sin problema el
que viene por defecto, en Windows. Una vez que hayas abierto el nuevo archivo, puedes comenzar escribiendo este código.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> DEBES ESCRIBIR EL TITULO DE TU WEB </TITLE>
<META name="description" content=">donde escribirás una breve descripción de la página">
<META name="keywords" content="Aquí escribe las palabras clave separadas por una coma">
</HEAD>
<BODY>
</BODY>
</HTML>
Explicación:
<! DOCTYPE HTML> define que el documento debe ser HTML.
<HTML> es el elemento principal de la página HTML.
<HEAD> es la parte donde se inserta información de la web.
<TITLE> es el título de la página que se muestra en la parte superior de la página navegador.
En el campo «contenido» de la metaetiqueta DESCRIPCIÓN debes ingresar una descripción que sea relevante para la página de tu sitio,
mientras que en el otro campo de la etiqueta KEYWORDS, ingresa las palabras clave en las que deseas que se encuentre en particular la
web que estás creando.
<BODY> es la parte del documento que contiene la parte «visible» del sitio:
Ahora guarda el archivo de bloque (usa GUARDAR CON NOMBRE) y guárdalo como index.html . Una vez guardado, lo abres, se abrirá la
página web HTML vacía, pero ya podrás ver el título de la página en la parte superior.
3. Insertar un texto
Una vez has creado el comienzo de tu página web puedes comenzar a introducir el contenido. Para ello, el código html del
texto debe colocarse entre las etiquetas <BODY> </ BODY> .
Ante se usaba la etiqueta FONT, pero como ya no es compatible, para formatear un texto de una manera particular, es
necesario recurrir a CSS.
La etiqueta que se usa para ajustar en su lugar siempre es válida y es <br>. Entonces, si escribo en el bloc de notas:
Hola <br> esta es una prueba de mi web.
Lo que se mostrará en la página será:
>Hola,
esta es una prueba de mi web
La <br> inserta un salto de línea.
Esta es una etiqueta que no debe abrirse y luego cerrarse.
Ahora veamos cómo usar etiquetas útiles para el texto: entre las más usadas puedes utilizar negrita, cursiva, subrayado,
borrado: <b>, <i>, <u> <del>
</u>te permite escribir con subrayado</u>
</i>te permite escribir en cursiva</i>
</b>te permite escribir en negrita</b>
<del>te permite cancelar un texto<del>
Estas etiquetas deben estar abiertas y cerradas . Podemos usar una a la vez o más etiquetas juntas (no se pueden usar
4. Color del texto
Veamos cómo colorear el texto para hacer páginas web HTML atractivas. Debes adjuntar al texto que deseas colorear la
etiqueta SPAN. Por sí solo, la etiqueta SPAN no produce ningún cambio visible en el texto, pero podemos imponer un estilo
con CSS.
Aquí está el código html, el color se puede expresar con el nombre del color en inglés o con el número hexadecimal
precedido por el número de la libra.
Ejemplo:
<span style=»color:blue»> aqui escribe el texto </span>
o
<span style=»color:#ffff45″> aqui escribe el texto </span>
Cambiar tipo de letra
Para crear un sitio en html que sea fácil de consultar, es útil cambiar la fuente y el tamaño del texto para resaltar un
párrafo o no.
Para ello vamos a usar la etiqueta SPAN que también nos permite modificar partes del texto directamente en el documento
HTML.
De este modo, usas esta etiqueta a la que tendrás que sumarle la fuente o nombre del estilo de letra que deseas para tu
texto tal que así:
<span style=»font-family:verdana»> aquí escribe tu texto </span>
o
<span style=»font-family:’Comic Sans MS'»> aquí escribe tu texto </span>
Cambiar tamaño de letra
A veces será necesario usar un texto un poco más grande o ligeramente más pequeño que el predeterminado. Aquí
también, el tamaño de fuente se indica con el estilo CSS y ya no con el atributo de fuente «tamaño».
5. Cómo insertar una imagen
Las imágenes en los sitios web HTML y permitidas en la web son
básicamente de tres tipos: GIF , JPG y PNG . Por lo tanto, no uses otros
tipos de imágenes (como archivos psd de Photoshop).
El código para insertar una imagen es:
<img src=»immagine.gif» alt=»descripción de la imagen» height=»42″
width=»42″ >
Reemplaza el nombre «immagine.gif» con el nombre de tu imagen:
presta atención a la extensión de la imagen: jpg, gif …