Diseño y Programacion Web – Clase 3 – Elementos principales de HTML

cartel json humorcartel json humor

En la clase anterior mencione HTML4. Debo aclarar que trabajaremos todo el tiempo con HTML5. La diferencia entre uno y otro es que se quitaron algunas etiquetas y se reemplazaron por otras mas amigables con todos los dispositivos. Ademas se agrego Canvas, algo que veremos mucho mas adelante. Cuando estemos mucho mas avanzados vamos a desarrollar juegos con la potencia de esa herramienta. Ahora bien, sigamos creando tags.

El poder de las anclas

Miremos el siguiente codigo:

El tag <a> es una abreviatura inglesa de “anchor”, osea ancla. Las anclas son los links. Un link nos puede llevar a una pagina externa o tambien a otro punto de la misma pagina. Los famosos sitios de scrolling que hoy se desarrollan trabajan con anclas que mediante javascript (ya lo veremos mas adelante) generan un efecto deslizante bonito hacia otro punto del sitio. Les dejo un ejemplo que desarrolle hace un tiempo. El atributo href es la direccion a la que el ancla se va a dirigir. Si es “#” significa que no va a ir a ningun lado, aunque en las proximas clases veremos que podemos darle una direccion con javascript.

Ahora vamos a darle un poco mas de semantica.

Los que estan adentro de cualquier tag se les llama atributos. Entonces el tag <a> tiene los atributos href, alt y name. El atributo “alt” es totalmente semantico. En ciertos navegadores si nos posicionamos unos segundos en el link, podemos ver un cuadro flotante con el texto de ese alt. Y el atributo “name” va a servirnos a largo plazo para javascript pero por el momento es importante entender que es una buena practica hacer uso de los atributos name y id en nuestros elementos. Pueden aprender mas del tag ancla aca.

Imagenes

El tag para insertar una imagen es <img> y como ven tambien se le puede incluir el atributo “alt”. Al igual que en el ancla, tenemos “src” pero en este caso el atributo marca la ruta donde se encuentra la imagen. Ahora bien, dicha imagen puede tener un ancho y alto que supera el de nuestra pagina, entonces debemos ajustarlo:

Con width (ancho) y height (alto) lo modificamos por html. Mas adelante veremos que es mejor modificarlo por css. Aclaracion al margen, siendo un sitio web hay que evitar la carga de imagenes pesadas, y maximizar el uso de sprites.

Ahora combinaremos un poco lo aprendido. Queremos que nuestra imagen sea un link que nos lleve a Google:

En este caso el atributo “alt” hay que ponerselo al ancla porque es el que tiene el foco. Podemos ver que claramente el tag img esta dentro del tag a. En html trabajaremos constantemente con eso. Cualquier elemento puede meterse dentro de otro, y esa libertad nos permite que cualquier elemento se pueda transformar o fusionar con otro. Suena muy abstracto, pero será mas comprensible en las proximas clases.

Comentar Codigo

Los comentarios son muy importantes tanto para documentar lo que hacemos (documentacion interna) como para quitar una funcionalidad al codigo. Hay ciertos scripts documentadores que, respetando el modo en que piden documentar, te generan una wiki completa de las funcionalidades de tu proyecto.

Para comentar html usamos “<!–” al inicio del comentario y “–>” al final. En el ejemplo de arriba vemos las formas en que podemos comentar. Casi todos los IDEs tienen un atajo para comentar rapidamente codigo. En el Eclipse es Shift+”/” y en el Sublime es Control+”}”.

Audio y Video

Los elementos de audio se insertan de la manera en que se ve arriba. El navegador va intentar reproducir primero el ogg. Si no puede, lo va a intentar con el mp3. Y si no puede, va a aparecer el mensaje de que no lo soporta. Pueden ver mas informacion aqui.

En el caso de los elementos de video, es exactamente lo mismo.

Iframe (no recomendado)

Es un elemento que debemos aprender pero evitar su aplicacion. Es conflictivo y muy poco atractivo para cualquier sitio. Se trata de una etiqueta que llama a una pagina web y la muestra en un bloque de nuestro sitio.

Es una ventana. Podemos navegar en ella y eso no esta muy bueno, se escapa de nuestro control. Ademas tiene problemas con el manejo de javascript y no esta integrada con nuestro sitio. No es posible un pasaje de datos entre ellas.

En la proxima clase nos enfocaremos en crear formularios en HTML.

Be the first to comment on "Diseño y Programacion Web – Clase 3 – Elementos principales de HTML"

Leave a comment

Your email address will not be published.


*