HTML

HTML

aprende-html Html es un lenguaje de marcas de hipertexto, algo así como un sistema de etiquetas para que puedan ser interpretadas por un navegador.

Al abrir una página web, vemos texto, imágenes, efectos especiales, etc. Estos elementos se disponen de una manera determinada en la página ( derecha, centrada..), con el texto de un color ( verde, azul .) y otros muchos detalles. Pues bien, esos detalles los otorga html. Veremos un ejemplo muy sencillo. En el código <p>Pedro de Valdivia</p>, p nos dice que se abre un párrafo, luego aparece Pedro de valdivia en el navegador y al final se cierra el párrafo con </p>.

  Es importante destacar que en la actualizad, las páginas web se realizan con los editores ( frontpage, Kompozer, etc ). Este tema los tratamos porque es muy importante conocer un poco la forma en la que está estructurada una web y será muy beneficiosa cuando queramos integrar otros elementos web2.0

Si ahora queremos que ese texto aparezca en negrita, tenemos que añadir una etiqueta  que diga al navegador que pedro de Valdivia salga en negrita. El resultado es:

<p><b>Pedro de Valdivia</b></p>

Ya hemos programado ( mejor editado ) un poco en html y hemos visto

  • Las etiquetas vienen recogidas por <etiqueta>  y se cierran siempre como </etiqueta>
  • El orden de cerrar las etiquetas es inverso al orden de abrirlas, o sea que la última que se abre tiene que ser la última que se cierra

Empecemos ya con la primera página web.

La estructura básica de una página es la siguiente

    <html>
 <head> 
<meta http-equiv="Content-Language" content="es"> 
<title>proyecto de grua</title>
    <meta name="keywords" content="grua, tecnologia"> 
<meta name="description" content="Trabajo de tecnología para construir
    una grua"> 
</head> 
<body>
 <p>En este proyecto, los alumnos de 4º de la ESo ..</p>
</body>
    </html>

Explicamos cada parte. La primera de ellas es indicar que este archivo es del tipo html, luego viene <head> que es la cabecera de la web. En esta sección se indican aspectos importantes de la web como el título, de que va la web y palabras claves para los buscadores. Lo que ponemos en este apartado no sale en la página, o sea, los navegadores no lo muestran al abrirlo. Fijaros que tenemos la etiqueta <meta> que se usa para metadatos que indican  la licencia del archivo ( autor ), aspectos del contenido ( descripción, palabras claves..) y otros parámetros que iremos viendo como re-direcciones, código de texto , etc.  Por último tenemos el body, o sea, el cuerpo de la página y es aquí donde el navegador lee y muestra en pantalla, en nuestro caso, lee un párrafo de  En este proyecto, los alumnos de 4º de la ESO ..  y eso es lo único que va a mostrar.

Etiquetas básicas de HTML

  • <h1>  a <h6> se ponen a los títulos del documento para indicar la relevancia del contenido. Por ejemplo, esta página tiene arriba HTML con etiquetas h1 porque es lo que quiero destacar como importante, ya que es el tema que trato aquí. Si quiero hablar sobre los metadatos, si considero que no son muy importantes en este tema, le puedo poner un <h5>, o sea , a mas importante, el número que acompaña a h es menor..
  • Como regla general y para los tres primeros h, tenemos que H1 es para el título y se debe usar una sola vez, el H2 es para secciones importantes y lo normal es usarlo entre 2 y 8 veces. El H3 es para apartados de las secciones y se usaran varias en cada sección del documento.
  • <table> Para abrir una tabla
  • <tr>  Abre una fila en una tabla
  • <td> Abre una celda de la tabla
  • <th> define una celda de encabezado de una tabla ( arriba de la tabla )
  • <a> Etiqueta para indicar un enlace ( externo o interno ). Un ejemplo sería:<a href=”http://www.tecnologia-informatica.es”>Tecnología del Pedro de
    Valdivia</a>
  •  <div> hace referencia a bloque de contenido. Los veremos en la parte de  Css.
  • <img> indica que existe una imagen, por ejemplo,  <img src = /imagenes/foto1.jpg”/>. En este caso, el atributo src indica el lugar donde se localiza la imagen, que en este caso es en la carpeta imagenes. Tambien se le suele acompañar el  atributo alt=" Imagen de una rueda". Esto es útil en el caso de que no carge la imagen, se indica que imagen es.
  • Las etiquetas de las listas se suelen usar <ol> y <ul> para comienzo de la lista y <li> para cada línea. Si la lista es desordenada, se emplea  <ul> y si es ordenada, se empieza y acaba con <ol>
  • <b> Es para texto en negrita, <i> cursiva , <s> texto tachado y <u>  texto subrayado.
  • <br> Crear un salto de línea.
  •  <blockquote> Se usa  para designar una cita de texto largo.

Para color, fuentes de texto y tamaño de la fuente, se utiliza los atributos face, size y color de la siguiente forma:

<p>
<font face="Comic Sans MS,arial,verdana" size ="4" color="#446688"> Este texto tiene fuente Comic Sans en color</font> 
<p>

En este caso decimos que la fuente (face ) es Comic Sanc MS, si el ordenador no la tiene, se carga arial y por último verdana. Después le damos el tamaño (size) de 4 con un color en código exadecimal de 446688. Podemos poner el color por su nombre en color, o sea, color=”red”, color=”blue” ..

Existen muchas otras pero con estas ya podemos hacer la primera práctica. El nuevo  html5 ha suprimido algunas como blink y modificado otras. 

Por otro lado, si queremos hacer comentarios en nuestro código, tenemos que escribirlo entre <!–   y –> , de esta forma:

    <!--  Esto es un comentario y no se verá en el navegador--> <p>Esto si se ejecuta y se verá</p>
  Actividad 1: Abre un editor de texto como textEdit o Notepad
y crea un archivo html con las partes principales donde hagas uso de al menos 7 etiquetas diferentes. Abre ese docuento con una navegador y mira el resultado.

Bloques <div>

Se pueden decir que los bloques div  son elementos utilizados para contener a su vez otros elementos HTML. Veremos la utilidad en este ejemplo

    <html> 
<body>
 <div id="contenedor" style="width:600px">
 <div id="cabecera" style="background-color:#FFA511;">
    <h1 style="margin-bottom:1;">Mi Página personal</h1> 
</div> 
<div id="menu" style="background-color:#FFD601;height:220px;width:150px;float:left;">
    <b>Menú</b>
<br> Mi Familia<br>
 Dónde estudio<br> 
Deportes<br> Mis amigos 
</div>
    <div id="contenedor2" style="background-color:#EEEEEE;height:220px;width:450px;float:left;">
 Esto sería el bloque donde
    escribo sobre mí
</div> 
<div id="pie" style="background-color:#FFA522;clear:both;text-align:center;"> Copyright
    © Que no se le ocurra a nadie copiar esto. Es mío.
 </div> 
</div> 
</body> 
</html>

Podemos observar que abrimos 5 bloques div, cada uno con un identificador tipo id=cabecera,  y que unos están dentro de otros. Cada uno tiene unas características de color de fondo (background-color:EE7833) que hacen referencia al color de fondo del bloque en formato exadecimal. Son tres parejas , cada una para un color. En la siguiente actividad vas a cambiar los números o letras y verás como cambian los fondos. La letra no debe ser superior a la F. Por otro lado, los bloques tienen una anchura (  width:400px;) y una altura  (height:250px; ) junto a otros atributos como text-align:center; que nos indica que el texto se alinee en el centro. 

Veremos que pasa si copio el código y lo pego ( ahora como código fuente ) para que el navegador lo interprete. Este es el resultado

Mi Página personal

Esto sería el bloque donde escribo sobre mí
Copyright © Que no se le ocurra a nadie copiar esto. Es mío.

 

  Actividad 2: Vamos a crear un pequeño proyecto que contenga 4 páginas web al estilo que hemos visto antes. La primera la guardaremos como index.html y tratara sobre la familia, la 2º estudio.html que tratará sobre el centro escolar, la 3º deporte.html con tus aficiones y 4º como amigos.html que describa sobre tus amigos. Ten en cuenta que donde hay que escribir es en el div contenerdor2. Todos tienen que estar enlazados, o sea, pinchando en el menú, iremos de una página a otra

Sonidos y música en la web

Si queremos añadir algún sonido, tenemos que añadir las etiquetas siguientes:

<audio controls>
<source src=”ovejas.mp3″ type=”audio/mpeg”>
</audio>

  Actividad 3: Busca en Internet algún archivo mp3 que te guste, sonidos de animales, canciones, discursos … e insertarlo en alguna de las páginas que ya tienes o bien en una nueva.

Para incorporar vídeos, a no ser que sean muy exclusivos, lo mejor es subirlos a youtube y luego incrustarlos en nuestra web. Con ello conseguimos descargar nuestro servidor de carga. Para proceder tenemos que conocer otra etiqueta, llamada iframe.

Iframe { o marco incorporado  (frame = marco  y  inline = incorporado )} es un elemento html que puede incrustar otro archivo  HTML. En este caso, vamos a mostrar un video de naturaleza con esta técnica.

<iframe width=”660″ height=”355″ src=”http://www.youtube.com/embed/gVVZ3hZCRq4″ frameborder=”0″ allowfullscreen></iframe>

y el resultado es:

  Actividad 4:  Seguimos ampliando nuestro proyecto y en alguna de las páginas, usar la etiqueta iframe para incorporar un vídeo de youtube o vimeo.
  Actividad 5:  Realiza las actividades que mostramos en está  Hoja de ejercicios con HTML

 

Entradas recientes