HTML Básico
Etiquetas
-->
El lenguaje HTML se basa en etiquetas. Las etiquetas siempre van contenidas entre los signos de desigualdad < >, que tienen una etiqueta de apertura y otra de cierre marcada por el signo /.Entre las dos se encuentra el contenido de la etiqueta, algunas etiquetas no tienen contenido y se cirran sobre sí misma: <body>, </body>
La primera palabra que aparece es el identificador de la etiqueta. Tambien podemos encontrar atributos con sus valores: <etiqueta atributo1="valor" atributo2="valor">
Nota: El nombre de la etiqueta y el atributo debe estar en minúscula, y los valores entre comillas.
EJERCICIO
1ºAbre el ejercicio1.htm con el blog de notas y añade las lineas en negrita.
EJERCICIO 2º
1º Abre el ejercicio1.htm y añade lo que hay en negrita
Depués ábrelo y verárs los cambios
Estructura básica de una página
El documento HTML viene dentro de la etiqueta.
Dentro de la etique ta encontramos:
La cabecera delimitada por las etiquetas <head>, </head>
Y el cuerpo, delimitado por las etiquetas <body>, </body>
Obligatoriamente la etiqueta debe contener <title> y </title>, que contiene el titulo de la página.
En el <body> encontraremos el contenido de la página, lo que se ve a traves del navegador
Ejercicio: Abre el bloc de notas y escribe lo siguiente.
Guardalo como ejercicio4.html.
Despúes observa el resultado en un navegador
El párrafo y los encabezados
Todo el texto del <body> debe estar dentro de parrafos. Los párrafos se identifican con la etiqueta <p></p>.
Dentro de los párrafos encontraremos el texto e imágenes, pero no podemos tener otros párrafos anidados. Tambien hay encabezados con los que podemos organizar el texto, van desde:
Por ejemplo <h1> para el rotulo principal de la página, <h2> para los titulos de los partados...
El texto de cada apartado se4 contiene en párrafos <p> </p>.
Los espacios en blanco del texto no se muestran como en el código fuente. Si hay espacios seguidos solo se mostrara uno. Por ejemplo:
Bienvenido a casa
se verá Bienvenido a casa.
El navegador ignorará los saltos de linea. Si dentro de un párrafo colocamos varios saltos de linea pulsando Intro, no se verán. Para crearlo utilizamos la etiqueta <br/>.
EJERCICIO: Añadiremos a nuestra página los siguientes encabezados y páginas.
Así se verá en un navegador:
EJERCICIO COMPLEMENTARIO:
1º Abre el bloc de notas, y guardalo con el nombre que quieras.
2º Dentro del Documento, crea etiquetas que forman la estructura de la página
3. <html>
4. <head>
5. </head>
6. <body>
7. </body>
<head>
8º Dentro del <head>, añade el titulo de página con la etiqueta <title>
Dentro del body, añade el siguiente encabezado 1: <h1>Página de ejemplo</h1>
9º A conrinuación, añade el siguiente encabezado 2: <h2>Texto normal</h2>.
10º Añade el siguiente párrafo: <p>El ñandú común es un ave sudamericana muy parecida al avestruz.</p>
11º Añade el siguiente párrafo: <p>Este ave, es omnivora y no puede volar, aunque es una gran corredora.</p>
12º Añade el siguiente párrafo con saltos: <p>Otras aves emparentadas con el ñandú son: <br/> - El avestruz<br/> - El amú<br/> -El kiwi.</p>
13º Añade el siguiente encabezado 2: <h3>Caracteres especiales</h3>.
14º Añade el siguiente párrafo: <p>El ñ andú comú n es un ave sudamericana muy parecida al avestruz.</p>.
15º Guarda la página y pruebala.
Imágenes
En una página web se utilizan imágenes, para mostrar información y como parte del propio diseño de la página. En páginas web existen tres tipos de imágenes: GIF, PNG y JPG
Utilizaremos GIF y PNG para dibujos sencillos, gráficos etc..
Y JPG para imágenes con calidad.
Para aumentar o disminuir una imágen utilizamos un programa gráfico para optimizar las imagenes.
Foto Original GIF PNG
JPG
Para introducir una imagen, lo hacemos con la etiqueta:
<img/>.
<img src="ubicacion/imagen.gif" alt="texto alternativo" />
Debemos saber donde esta la imagen, que es lo que debe contener el atributo src: Si está en una página web basta con saber su ruta, por ejemplo http://www.educarm.es/logo_ac1.jpg
Si esta en el mismo sitio que la página web se pone una dirección relativa, como imagen.gif o imagenes/imagen.gif.
Cuando el navegador no encuentra imagen no la podrá mostrar.
El atributo alt se muestra cuando no se puede mostrar la imagen.
Los atributos height y width. Se suelen añadir introduciendo las dimensiones de la imagenes en pixeles.
Atributo title. Si lo ponemos , al posar el cursor sobre ella se mostrará su valor. En IE7, cuando se omite title, se muestra el contenido de alt.
EJERCICIO
Añade las lineas resaltadas en negrita
Y quedara asi:
Un enlace se diferencia en el texto normal ya que al colocar el cursor encima cambio de forma y pasa de flecha a mano. Los enlaces aparerceran subrayados ya que esta opcion por defecto que les asigna el html.
En HTML el enlace se identifica con la etiqueta <a></a>. la forma es la siguiente:
<a href="archivo_enlazado">contenido del enlace</a>.
El atributo href puede ser una direccion absoluta o relativa.
Se puede añadir a los enlaces el atributo title
Tablas y Listas
Para poner Tablas de contenidos habrá que activar el contenido general dando grosor de borde (si se desea) con el comando siguiente, pongamos como ejemplo el valor 1 de tamaño de borde:
< TABLE BORDER ="2" > escribir los datos de filas entre las celdas entre los comandos < TR > y < /TR > y los datos de cada celda entre < td > y< /td >... al final cerrar tabla con < /TABLE >Y quedará así:
No hay comentarios:
Publicar un comentario