Curso de HTML5 #3: Sintaxis Básica

Dibujo de un globo terraqueo con los simbolos del potocolo de internet representando la conectiviad global

Somtaxis Básica de HTML

Aprender los fundamentos de HTML en unos minutos es realmente sencillo, vamos a hacerlo en el dia de hoy, así que prepara tu editor de texto favorito y ¡vamos alla!

Nota Importante: Aquellos que usen Mac y TextEdit, deben crear un nuevo fichero y a continuacion punsar SHITF + COMMAND + T, y aceptar para convertir el fichero en texto sin formato.

Lo primero, abramos un nuevo fichero de texto con nuestro editor. Es imporante asegurarse de que el editor elegido es capaz de trabajar con texto txt plano, sin formato.

Antes de seguir debo destacar algo: un fichero HTML es simple y llanamente un fichero de texto txt, con extension .htm o .html, que sera interpretado por el navegador correspondiente. Ni mas ni menos.

Cada vez que editemos el fichero, y guardemos los cambios, podremos ir a nuestro navegador y refrescar la pagina, podras ver como se dibuja la web y los cambios que hayas realizado.

Empecemos por lo basico

Hablemos de sintaxis. HTML significa “HyperText Markup Language” (Lenguaje de Marcado de Hipertexto). ¿Qué significa esto?, tan sencillo como que usaremos etiquetas para marcar el contenido de la pagina, identificando cada tipo de contenido y permitiendo asi que el navegador dibuje la página apropiadamente.

Hagamos la prueba, en el documento de texto, escribid una frase, la que se os ocurra, grabad el fichero como prueba.html y, a continuación, abrirdla con vuestro navegador de elección.

Veremos que se muestra nuestra frase, si editamos nuevamente el fichero cambiando la frase, guardamos y refrescamos el navegador, veremos que los cambios se reflejan sin problemas.

Habras notado que no le hemos dicho al navegador en ningun momento que nuestra frase es un parrafo y , sin embargo, nos la muestra como tal. Esto es debido a ue por defecto, cualquier texto no etiquetado se considera como tal.

Creando nuestro primer parrafo

Lo primero que vamos a hacer es indicar al navegador que nuestra frase es un parrafo. Aquellos de vosotros que useis lectores de pantalla, aseguraos de activar todos los signos de puntuacion y/o activar la linea braille.

En html, indicamos a traves de etiquetas que tipo de objeto tenemos entre manos, para ello situamos una etiqueta de apertura antes del texto a marcar, y una etiqueta de cierre justo al final.

Situemonos al principio de nuestra frase y escribamos:

<p>

(simbolo menor que, la letra p y el símbolo mayor que). Estos elementos forman una etiqueta de apertura, el menor que indicando donde comienza la etiqueta, la letra identificando el tipo de elemento (en este caso un Parrafo) y un simbolo mayor que indicando donde acaba esta etiqueta de apertura.

Sigamos

Pero aun no hemos terminado, para completar el proceso hemos de cerrar la etiqueta. Nos situamos al final de la frase y escribimos lo siguiente:

</p>

Como podemos observar, exactamente igual a la etiqueta de apertura, con la particularidad de que incluye una barra justo despues del simbolo de apertura de la etiqueta. De este modo incidamos que lo que se encuentra entre ambas etiquetas, ha de ser interpretdo como un parrafo.

No todos los elementos html precisan una etiqueta de cierre, pero en general si, e iremos viendo en cada caso cuales llevan y cuales no, asi que , no os preocupeis demasiado ahora en ello.

Elementos y atributos HTML

Cuado hablamos de un elemento HTML, nos referimos al conjunto de las etiquetas de apertura y cierre, y lo que aparece entre ambas. Sin embargo, la etiqueta de apertura puede contener adicionalmente atributos que dan informacion adicional sobre el elemento en si.

Algunos de los atributos que asociamos a un eleento html son especificos de este, mientras que otros pueden ser usados en varias etiquetas diferentes, dependiendo del contexto.

Para incorporar un atributo a nuestra etiqueta de apertura, lo haremos justo tras la letra (o palabra) que identifica el tipo de etiqueta, agregando un espacio “y empezando a escribir tras este.

Sitúate en la etiqueta de apertura, inserta un espacio y escribe lo siguiente: lang=”es”, esto es, tras el espacio el texto “lang”, un signo igual, y, entre comillas dobles, el texto “es”

Esto le indicara al navegador que el parrafo esta en idioma español. No es habitual usar este atributo concreto en un parrafo, pero es un ejemplo magnifico de como crear uno de estos atributos.

Tipos de Atributos

Hay atributos que solo consisten en una palabra, pero, la inmensa mayoria, contienen un nombre (en nuestro caso lang), un signo igual, y , entre comillas, el valor que se asigna a ese atributo (“es” en nuestro caso.)

Los atributos son algo asi como las configuraciones de los elementos html, de todos modos iremos viendo mas elementos y atributos poco a poco, por ahora, quedense con como es la estructura. El codigo debe haber quedado similar a este:

<p lang="es">Texto del Parrafo</p>

Seguiremos en proximos capítulos. ¡Adelante!

2 Respuestas a “Curso de HTML5 #3: Sintaxis Básica”

  1. Leitnez Torres

    He tratado de seguir al pie de la letra las instrucciones de la parte tres del curso de HTML 5. Sin embargo Text Edit y los navegadores no se llevan. Le explico: Cambié la extensión del archivo de rtf a txt sin problemas, pero al abrir el archivo con Safari o Google Chrome, el condenado se ve con todo y etiquetas. Y hasta donde yo creo, las etiquetas no deben verse. Por si acaso, revisé que la extensión del archivo que uso como prueba diga “Prueba. txt”

    Entonces se me ocurrió escribir lo que pone como práctica en las notas adhesivas que, por defecto, guardan en txt y he obtenido el mismo resultado. Pensé que estaba usando algún símbolo equivocado y aumenté el zoom a lo máximo pero no, he escrito lo mismo del ejemplo.

    Lo último que he hecho es descargar un editor de código llamado Kómodo Edit y escribir allí el ejemplo. Lo guardé en HTML 5. Al abrirlo se ejecuta directamente en Safari y si deseo modificarlo lo abro en la aplicación de Kómodo. Aquí si todo perfecto.

    Podría decirme, por favor, dónde está el error, porque debe de haber uno. Gracias..

    • Perdon por mi tardanza, creo que no he configurado bien las notificaciones y acabo de percatarme del mensaje.

      Por lo que comenta, creo que el problema es el modo en que TextEdit trabaja por defecto los documentos de texto, como rtf (aunque se grabe como .txt). Para hacerlo funcionar correctamente para esta necesidad, tras crear el nuevo documento, hay que pulsar Shift + Command + T para ejecutar “Convertir a texto sin formato” que es el necesario para crear el documento html.

      Saludos

      Raul

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>