Dentro del apartado de Hipertexto y navegación hemos estado hablando del lenguaje con el que controlamos el aspecto y la ubicación de los diferentes elementos que componen las páginas web, el Lenguaje de Marcas HiperTextuales o HTML (HyperText Markup Language).
Resumo aquí el ejercicio de introducción al lenguaje html con el que habéis estado creando vuestras páginas web.
1º Organizar la estructura en la que voy a trabajar. Los contenidos los organizamos en carpetas. Dos carpetas: imagenes y docs, para meter las imágenes y los documentos que vamos a vincular desde nuestro archivo web. Los archivos que utilicemos no deben de tener caracteres extraños (tildes, ñ, etc.) ni espacios y tenemos que conocer la extensión para hacer los enlaces. Nuestra
estructura era más o menos así:
- ** CARPETA CCMC
- CARPETA imagenes
- foto1.jpg
- foto2.jpg
- foto3.jpg
- foto4.gif
- fondo1.jpg
- foto1.jpg
- CARPETA docs
- documento1.doc (archivo de word)
- documento2.ppt (archivo de Power Point)
- documento3.txt (archivo de Bloc de notas)
- video.wma (archivo de vídeo)
- documento1.doc (archivo de word)
Nuestro archivo html lo crearemos dentro de la CARPETA CCMC y haremos vínculos a los documentos que están dentro de las otras dos carpetas: ES MUY IMPORTANTE QUE INDIQUEMOS LA RUTA CORRECTA PARA QUE SE PUEDAN VER EN LA PÁGINA WEB Y QUE SIEMPRE TENGAMOS TODO EL CONTENIDO DE LA CARPETA CCMC JUNTO.
2º Crear el archivo Web
Vamos crear nuestro archivo web utilizando el bloc de notas (botón derecho dentro de la carpeta CCMC--> nuevo--> documento de texto). Cambiamos el nombre y tenemos que cambiar la extensión para que se abra con el navegador en vez de con el bloc de notas (si podemos ver las extensiones pondrá "Nuevo documento de texto.txt") (para ver las extensiones de las carpetas Menú Inicio --> Panel de control --> Opciones de carpetas --> Ver --> Y aquí buscamos y desmarcamos opción "Ocultar las extensiones de archivo para tipo de archivos conocidos") Generalmente el nombre de la página de inicio siempre suele ser index.html (en nuestro caso hemos puesto el nombre del PC o vuestras iniciales, o ...).
Una vez que tenemos el archivo web tenemos dos opciones, verlo con el navegador (pinchando dos veces sobre él o botón derecho --> Abrir) en el que lo veremos como página web y no podremos cambiar nada, o bien abrirlo con el Bloc de notas (Botón derecho --> Abrir con --> Bloc de notas) que sí que nos permite la edición. Los cambios que hagamos utilizando el bloc de notas los veremos una vez que los guardemos y actualicemos el navegador.
Aquí tenemos una muestra del ejercicio que hemos hecho. En él pongo en rojo las anotaciones y la explicación de cada etiqueta, que irá en azul: (de momento incompleto)
<html> Indica el inicio del código html y necesita cierre (Mira al final de este código) <head> Este es la cabecera. Es una parte no visible de la web y no es imprescindible, aunque permite que los buscadores la encuentren, que se vea el título en la barra de navegación, etc. Siempre va después de la etiqueta "html" y antes de "body", donde cerramos la etiqueta "head". </head> <body> Este es el cuerpo del documento donde pondremos todo lo que se va a ver de la página. Tiene etiqueta de cierre (Mira al final de este código). </body> </html> |
Veremos ahora qué otras etiquetas podemos utilizar
<title>Todo lo que ponga en esta etiqueta saldrá como nombre de la página en el navegador. Siempre está dentro de "head". Si te fijas en este blog es Un paso hacia la ciencia</title> Todo lo que viene a continuación lo utilizaremos en el body (principalmente): <body bgcolor="uncolor">si dentro de la etiqueta body utilizas el atributo bgcolor cambiarás el color de fondo de tu página. El color tendrá que ir entre comillas y en inglés, o bien utilizar el código hexadecimal de colores <br>Producirá un salto de línea. No lleva cierre. Para dar formato al texto utilizaremos: <font> Me permite cambiar las características de la fuente que estoy utilizando para escribir. Utilizando determinados atributos cambiaré el color, el tipo de letra o el tamaño. Por ejemplo <font color="red" size="3"></font> <b> Todo lo que esté dentro saldrá en negrita.</b> <u> Todo lo que esté dentro saldrá subrayado.</u> <i> Todo lo que esté dentro saldrá en cursiva.</i> <h1>Todo lo que esté aquí será un encabezado de primer orden y saldrá de mayor tamaño (podemos utilizar desde h1 hasta h6)</h1> |
Incompleto; continuará
