lunes, 2 de abril de 2018

HTML: conceptos básicos (parte 1)

El lenguaje HTML está formado por etiquetas encerradas entre los signos "<" y ">". Este es un ejemplo de una etiqueta: <etiqueta>. La última versión de HTML está compuesto por más de 100 etiquetas.

Las páginas web están compuestas en su forma más atómica por elementos. Un elemento de una página web se define entre dos etiquetas, una de abertura, que da inicio a la definición del elemento y otra de cierre, que como su nombre lo indica cierra o concluye la definición de dicho elemento. La etiqueta de cierre es como la etiqueta inicial, con la diferencia que incluye una barra inclinada colocada inmediatamente después del carácter "<". Ejemplos de etiquetas: <body>...</body>.

  <p class="nombre_de_clase">Este texto es el contenido del elemento que estamos definiendo</p>

Lo anterior es un ejemplo de un elemento que define un párrafo. Los párrafos se definen con las etiquetas <p>...</p>. Las etiquetas de apertura pueden contener atributos (en el ejemplo anterior "class" es un atributo) que pueden contener un valor ("nombre_de_clase"). Entre las etiquetas de apertura y cierre está el contenido del elemento, el cual puede ser un texto u otras etiquetas. Las etiquetas de cierre no tienen atributos.

Existe en los navegadores una opción para ver el código html de una página web. Se puede seleccionar esta opción haciendo click con el botón derecho del mouse sobre un área de la página que no contenga ningún elemento activo o desde el menú principal, generalmente está ubicado dentro de la opción "Ver" o "Herramientas", según el navegador usado.

Los elementos que se definen en una página web se escriben ciertas reglas gramaticales que facilitan su lectura para otros desarrolladores y para poder realizar futuros cambios o corregir errores. Por ejemplo, los elementos se pueden indentar y anidar. Es decir, podemos definir elementos dentro de otros elementos.

   <p><strong>Este texto se mostrará en negrita</strong>. Este texto no se mostrará en negrita.<p>

El elemento anterior, en su todo está definido entre las etiquetas <p>...</p>. Se puede observar que dentro también está definido otro elemento entre las etiquetas <strong>...</strong>. Como lo indican las oraciones, una parte del párrafo se mostrará en negrita y la otra no. El resultado del elemento anterior podría ser algo como:

                  Este texto se mostrará en negrita. Este texto no se mostrará en negrita.

Como se puede apreciar, las etiquetas no se muestran, sino que además de definir el elemento realizan alguna acción sobre él y definen su comportamiento.

Como todo lenguaje, HTML, está formado por un vocabulario compuesto de palabras que tienen un significado y de una gramática compuesta por reglas que indican la manera como se pueden combinar las palabras del vocabulario para formar oraciones, sentencias y párrafos.

Etiquetas Básicas de HTML

<html>: Es la etiqueta raíz o principal. Solo puede haber una. La página web se debe escribir entre estas etiquetas.

<head>: Define la primera parte de una página web, la cabecera. Lo que aquí se coloca, generalmente no se muestra cuando visualizamos la página web en un navegador. Aquí se especifican los metadatos, que suministran información de la página web o indican instrucciones sobre cómo debe procesarse.

<title>: Esta es una etiqueta obligatoria, sólo puede haber una, y debe escribirse anidada, dentro de la etiqueta <head>. Se utiliza para especificar el título de la página web.

<body>: Esta etiqueta define la segunda parte de la página web, el cuerpo. Lo aquí especificado es el contenido de la página web que es mostrado por el navegador.

<h1>, <h2>, ... , <h6>: Son etiquetas para indicar títulos y encabezados dentro del cuerpo de la página. Estas etiquetas indican ciertos niveles de relevancia o importancia, siendo <h1> el de mayor importancia y <h6> el menos importante. Se utilizan para definir títulos de primer, segundo, tercer nivel, etc.

<p>: Define párrafos de texto.

<strong>: Se utiliza para resaltar o destacar un texto, oración o párrafo en negrita.

<em>: Define un texto enfatizado.

Para mayor información puede consultar el siguiente vídeo:







No hay comentarios.:

Publicar un comentario

Entrada Destacada

HTML: Formularios - Parte 2

En esta entrada continuaremos con la programación de formularios en HTML. Select Con <select> podemos definir en formularios ...