HTML (HyperText Markup Language) es el lenguaje usado en las páginas webs.
Es un lenguaje que puede ser interpretado por cualquier equipo informático independientemente del sistema operativo y explorador que utilice.
HyperText se refire a que aparecen enlaces a otras páginas, utilizando links.Conoceremos el código básico, con el que podrás realizar tus primeras páginas web, antes de pasar a ver algún editor de código concreto como el Dreamweaver que facilitan la tarea.
Es muy importante tener ciertos conocimientos del lenguaje ante posibles problemas que, sin lugar a dudas, se nos van a presentar al editar nuestras páginas.
Desde aquí podrás acceder a otros cursos sobre este tema que hay en la red.
ACTIVIDAD: 1. Deberás copiar todas las sentencias que aparecen en el manual explicando para qué se utilizan y en caso de que tengan algún parámetro que valor puede tomar. Además, realiza a la vez las actividades que se van proponiendo, escribiendo el código adecuado y actualizando la página para ver los resultados.
1. Antes de empezar, veamos en qué consiste este código:
Actividad: Situate con el puntero del ratón sobre cualquier punto vacío de esta página. Pulsa el botón derecho y selecciona en el menú contextual la opción VER CÓDIGO FUENTE. Aparecerá algo similar a esto:
En el caso de que estés con el Explorer. O algo así:
En el caso del Firefox.
Aunque veas muchas sentencias raras, cuando te familiarices con ellas verás lo sencillo que puede ser programar en HTML.
2. Mi primera página:
Para escribir el código fuente utilizaremos un procesador de textos básico como el BLOC DE NOTAS. Inicio > Todos los programas > Accesorios > Bloc de notas. Se abrirá una ventana como ésta:
En el código HTML cada sentencia aparecerá introducida una ETIQUETA de entrada y otra de SALIDA.
1º-La primera etiqueta será la que indique que estamos escribiendo en lenguaje HTML:<html>
</html>
2º Dentro de esta etiqueta deberemos distinguir lo que es el encabezado y el cuerpo de la página usando las etiquetas HEAD y BODY, respectivamente. El encabezado lo usaremos para el título que aparecerá en la pestaña y en el body estará el contenido del programa.
3º Tendremos en cuenta siempre la siguiente norma: Tabula las etiquetas según el lugar que ocupen en el código, aunque puede parecerte un poco engorroso al principio, esta nota te hará más sencillo encontrar cada parte del código.
El código quedará tabulado así:
Para que se vea el documento como una página web, es necesario que le demos nombre y extensión. Así que lo guardaremos en el escritorio como índex.html
Observa que aparecerá el archivo en el escritorio con el icono de una página web.
Cierra el archivo y ábrelo de nuevo. Verás como de forma automática se abre el explorador mostrando tu página web.
Si quieres volver a editarla tendrás que hacer clic con el botón derecho sobre el archivo y darle a abrir como, escogiendo la opción editor de textos.
Actividad 2: cambia el cuerpo de tu página por el siguiente texto: Hola a tod@s!!!
3. Mejorando la página:
3.1. Centrar el texto: CENTER: Permite centrar el texto que se encuentre dentro de la etiqueta:pondremos:
<center>
Hola a tod@s!!!
</center>
Para comprobarlo basta con guardar y hacer doble clic. O si tenemos abierto el archivo en el explorador bastaría con actualizar la página.
3.2. Aumentar el tamaño del texto: Hnumero: Cambia el tamaño según el valor numérico que pongamos, siendo el 1 el tamaño más grande y 6 el más pequeño:
pondremos:
<center>
<h6>Hola</h6> <h3>a</h3> <h2>tod@s</h2><h1>!!!</h1>
</center>
3.3. Poner un color e fondo: Se entiende que el color de fondo es una propiedad que afecta a todo el documento por lo que esta característica será lo que se llama un ATRIBUTO del cuerpo (BODY). Este atributo se llama BGCOLOR, BG de background.
Los parámetros que toma son los colores escritos en código hexadecimal que consiste en 6 cifras/letras agrupadas de dos en dos, que nos indican la cantidad de rojo, verde y azul que contiene ese color, o bien, con la palabra inglesa que corresponde al color.
Ejemplo para poner el fondo de color verde:
<body bgcolor="green">
</body>
Para que veas cómo utilizar el sistema hexadecimal accede al enlace.
Actividad 3:
a) Busca una página donde puedas acceder al código hexadecimal de los colores. Escribe su dirección web en tu libreta.
b) Utiliza el código hexadecimal para poner de color lila el fondo de la página.
c) Explica la diferencia entre utilizar Comillas dobles y no utilizarlas. (libreta)
c) Copia el siguiente texto y explica cómo podemos mejorarlo para que el título sea del mismo color, ponle un color azul.
recursos: http://roble.pntic.mec.es/apuente/html/paginas/seis.htm
No hay comentarios:
Publicar un comentario