Etiquetas básicas de html – Parte I

Vamos a seguir con html, comentaré un poco sobre las etiquetas más usadas en este lenguaje de tags, tanto para formularios, como para organización como para hiperenlaces así como para contenido multimedia.

en primer lugar el tan necesario <a>

Seguramente hemos leído mucho estas palabras: hiperenlace o hipervinculo, escencial para relacionar una página con otra (así podemos viajar por la web), ingresa en los conceptos de hipertexto quien a su vez pertenece a hipermedia (temas algo más extensos).

Observemos primero el siguiente código:

<etiquetaenlace atributodirecciondeenlace="http://www.google.com">Este es un enlace hacia Google</etiquetaenlace>

lo que decimos es esto, en primer lugar definimos donde empieza y donde culminá la etiqueta de tipo etiquetaenlace (indicamos el cierre nombrando la etiqueta bajo el mismo modo anteponiendo el símbolo /), luego creamos un atributo que será la atributodirecciondeenlace con el valor del enlace en este caso: http://www.google.com y luego entre la etiqueta escribimos como se nos antoje: el nombre de nuestro enlace que puede ser: Este es un enlace hacia Google.

Ahora bien sería tedioso escribir todo etiquetas y atributos con nombres tan extensos ¿no es asi?, las etiquetas comunmente no son tan largas y sus atributos tampoco, lo que he mostrado esta en lenguaje natural ahora en html se tiene que poner de este modo para indicar nuestro enlace:

<a href="http://www.google.com">Este es un enlace hacia Google</a>

<a> es el nombre de la etiqueta de tipo enlace (viene de ancla)

href es un atributo que indica la URL del recurso que se quiere enlazar

Ahora bien creemos nuestro archivo html y copiemos ese codigo el resultado tiene que ser este:

Este es un enlace hacia Google

Mi primer html

Como comenté en un principio, crearé código desde el nivel más básico, hay muchas páginas web que explican no tan bien y otras que al contrario lo hacen muy bien (espero estar en el segundo grupo).

Pueden revisar en el sitio web de librosweb, donde encontrarán documentación muy buena para incursionar, muchos conceptos quizá los saque de ahi, de hecho si fui aprendiendo más de html, css, javascript y php fue por ellos (mil gracias).

Primer Hola mundo en HTML, para crear nuestro primer html, necesitamos practicamente solo de un sistema operativo, ya que todos cuentan con un editor de textos, podemos crearlo con notepad en windows o con gedit en linux o algún programa similar.

crearemos un archivo al cual llamaremos: index.html, ahora bien dentro de este archivo pondremos el siguiente código: (la letra p dentro de los signos <> indica que es una etiqueta es decir que lo que pongamos entre estas etiquetas tendrá un modo de mostrarse asi como ciertos atributos y servirá para distintas acciones, para indicar que cerramos la etiqueta anteponemos el símbolo / a la letra p, de tal modo que nos quede así: </p>, la p viene de párrafo, ya iré expandiendome más en esto como vaya avanzando en el «curso» aunque no explicaré las 91 etiqeutas disponibles (a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var.)

Si comentaré sobre las más comunes tenemos <a>,<img>,<table>,<div>,<li>,etc y según como vayamso avanzando iré utilizando otras menso usuales.

<p>¡Hola Mundo!</p>

Si hicimos esto con gedit, a la hora de abrirlo en nuestro navegador nos saldrá así:

¡Hola Mundo!

¿Por qúe razón sucede esto?, La frase del ejemplo anterior incluye el signo (¡). Si el editor HTML del diseñador utiliza la codificación UTF-8 (gedit lo usa por defecto), el entorno de desarrollo del programador también utiliza UTF-8, el servidor web sirve las páginas con esa codificación y el navegador del usuario es capaz de visualizar las páginas con formato UTF-8, el texto anterior se verá correctamente en el navegador del usuario.

Sin embargo, muchas veces no es posible que todos los procesos involucrados utilicen la misma codificación de caracteres. Por limitaciones técnicas o por decisiones de los diseñadores y programadores, los textos pueden pasar de codificación UTF-8 a codificación ISO-8859 en cualquier momento. Si se produce este cambio sin realizar una conversión correcta, el navegador del usuario mostrará caracteres extraños en todos los acentos y en todas las letras como la ñ y símbolos como el que hemos utilizado. (letras y símbolos que no son propios del idioma inglés).

Solución 1: (aparentemente la más sencilla) Si usamos gedit a la hora de guardar (guardar como), no lo hagamos con la codificación: (Localización actual (UTF-8)) sino con la siguiente: Occidental (ISO-8859-15), tengamos en cuenta que mi conputador esta configurado para la región de latinoamérica.

Solución 2: (la más recomendable) reemplazar el símbolo (¡) por el codigo #161 con un punto y coma como vemos aca:

<p<#161;Hola Mundo!</p>

A continuación una lista con los símbolos y caracteres que nos pueden traer problemas, asi como su respectivas entidades para reemplazarlos:

á: á
é: é
í: í
ó: ó
ú: ú
Á: Á
É: É
Í: Í
Ó: Ó
Ú: Ú
ü: ü
Ü: Ü
ñ: ñ
Ñ: Ñ
¿: ¿
¡: ¡
<: &lt;
>: &gt;
&: &amp
": &quot;
': &apos;
(espacio en blanco): &nbsp;

¡HOLA MUNDO!

Hola Mundo!

Esta frase la hemos visto bastante, ¡claro!, los que ya han dejado de ser solo visitantes de una web y han pasado al otro lado, a editar blogs, foros, y más aun los que ya incursionaron en la programación (como yo), bueno sin más preámbulo, lo que tengo pensado publicar en este blog es una especie de cursos de programación para gente que empieza a programar, lo curioso es que si bien trataré de explicar conceptos y configuraciones básicas, lo que busco es crear un proyecto por decirlo de algún modo libre (ya uqe todos verán el codigo fuente y podrán descargar el codigo fuente segun lo vaya modificando), ire subiendo el codigo del proyecto y a la vez explciandolo desde lo más minimo, mientras avance con el proyecto iré modificandolo, cada vez se vera mayor complejidad en el código asi como mayor robustez, no soy un webmaster, pero dentro de mis posibilidades trataré de hacer lo mejor posible, sus comentarios me ayudarán a corregir cualquier error asi como a agregar nuevas funcionalidades.