NorfiPC
NorfiPC » Códigos » HTML

HTML fácil, código, elementos básicos y funcionamiento



Comprender el código usado en las páginas de internet. Estructura de HTML5, los principales elementos y funciones. Un sencillo tutorial para aficionados a la publicación web, con ejemplos.
HTML fácil, código, elementos básicos y funcionamiento
En las páginas de nuestro sitio hablamos mucho de HTML, lenguaje de programación usado en las páginas de internet.
Para todos los aficionados interesados en el tema, en este artículo explicamos de forma sencilla los elementos básicos y su funcionamiento, con varios ejemplos prácticos.
El objetivo es poder leer, interpretar y comprender el código fuente de cualquier página.



¿Qué es HTML?


La gran mayoría de las páginas de internet, así como muchas aplicaciones web están escritas en lenguaje HTML.
Es un lenguaje de programación sencillo compuesto de etiquetas, que contienen diversos elementos o texto plano.
Las etiquetas son de apertura y de cierre, diferenciándose estas últimas por la barra inclinada.
Los navegadores interpretan o leen el código y lo traducen, mostrando en el navegador el resultado.

Código elemental HTML


Un documento HTML o página elemental solo necesita del código siguiente:
<html>
<head>
Área del encabezado.
</head>
<body>
Contenido de la página.
</body>
</html>
✔ Las etiquetas HTML le indican al navegador que se trata de un documento HTML y debe interpretarlo como tal.
✔ El área comprendida dentro de las etiquetas HEAD (encabezado), contiene instrucciones para el navegador y para los buscadores de internet.
✔ El área comprendida dentro de las etiquetas BODY, contienen las instrucciones que se deben mostrar en la página o sea el contenido.
En el contenido de este artículo nombramos las etiquetas usando mayúsculas para resaltarlas, pero en todo el código HTML5 es necesario usar minúsculas.



Elementos necesarios en el encabezado en HTML5


Para que la página sea mostrada correctamente por todos los navegadores, es necesario agregar algunos elementos en el área del encabezado (entre las etiquetas HEAD).
Son los siguientes:
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Título de la página</title>
<meta name="Description" content="Descripción">
<link rel="canonical" href="Dirección URL de la página">
</head>
✔ DOCTYPE. Es la declaración obligatoria en todos los documentos en HTML5.
✔ La propiedad lang y el Meta-Name http-equiv especifican el idioma y la codificación, para evitar símbolos extraños o errores en los navegadores.
✔ El Meta-Name Viewport es usado para que el contenido de la página se adapte correctamente al ancho de las pequeñas pantallas de los dispositivos móviles.
Los siguientes difieren en cada página:
✔ Título de la página. Especifica el nombre de la página, con menos de 70 caracteres.
✔ Descripción. Breve introducción sobre su contenido con menos de 156 caracteres.
✔ Rel canonical. Dirección URL de la página, de importancia para los buscadores.

Otros elementos opcionales en el área del HEAD


Además de los anteriores todas las páginas incluyen otros elementos en el área del encabezado.
Los más frecuentes son los siguientes:
<meta name="Robots" content="index, follow">
<link rel="shortcut icon" href="Ruta al favicon.ico">
<link href="Ruta a un archivo de estilo CSS externo">
<style>
Reglas de la hoja de estilo CSS interno
</style>
<script src="Ruta a un archivo JS externo"></script>
✔ Meta-Name Robots le indica a los buscadores si deben indexar la página.
✔ El link Shortcut-Icon es un enlace al favicon del sitio web, pequeño icono que se muestra en la barra de título del navegador.
✔ El link a la hoja de estilo externa.
✔ El elemento SCRIPT que contiene la hoja de estilo CSS interna. También se puede usar de forma "inline" en el área del BODY, aunque no es recomendado.
✔ El elemento SCRIPT (que se puede usar en el área del HEAD o del BODY), es empleado para enlazar script externos en formato JavaScript o impregnar las instrucciones directamente en el HTML.



Elementos HTML más usados en el área del BODY o contenido


Elementos para estructurar texto

➔ El texto plano se puede introducir directamente dentro del área del BODY, usando etiquetas <br> para los saltos de línea.
También se puede agrupar y ordenar en forma de párrafos encerrándolo entre etiquetas <p></p>.
Por ejemplo:
Texto plano en una página.<br> 
Para ordenarlo y hacerlo más legible se crean saltos de línea.<br>
<p>Párrafo  de una página.</p>
➔ Para destacar las secciones de la página y ordenarlas por su importancia, se usan los encabezados.
Son breves oraciones o frases encerradas entre las etiquetas h1, h2, h3 y h4.
<h1>Encabezado principal</h1>
<h2>Encabezado de segundo nivel</h2>
<h3>Encabezado de tercer nivel</h3>
<h4>Encabezado de cuarto nivel</h4>
El resultado es el siguiente:

Encabezado principal

Encabezado de segundo nivel

Encabezado de tercer nivel

Encabezado de cuarto nivel




Enlaces e hipervínculos en HTML

Los enlaces permiten navegar a otras páginas del mismo sitio o de internet.
También pueden conducir a otra sección de la misma página o incluso ejecutar instrucciones de JavaScript.
Se crean usando etiquetas A, con el atributo HREF donde se especifica la dirección URL.
Se puede usar el atributo TARGET para que se abran en una nueva pestaña del navegador y TITLE para mostrar una descripción.
Rel-NoFollow es ampliamente usado para impedir que transmitan autoridad y que puedan afectar nuestro posicionamiento, cuando se traten de páginas externas de internet.
<a href="#secc1">Enlace a una sección</a> 
<a href="pagina.html" target="_blank">Enlace a otra página del sitio</a>
<a href="http://google.com/" rel="nofollow">Enlace a página de internet</a>
El resultado son los siguientes enlaces que se pueden probar: Sección | Otra página | Google

Bloques y secciones

➔ Con las etiquetas DIV se crea contenedores o bloques dentro de los cuales se pueden encerrar cualquier tipo de elemento.
Son creados generalmente para asignar una clase a una sección de una página o un identificador.
✔ Los elementos a los que se les asigna una clase (CLASS) pueden compartir un mismo estilo CSS.
✔ Los elementos a los que se les asigna un identificador (ID) que es único, pueden ser manipulados por un script o referenciados en HTML.
<style>
.secc1{color:blue;}
</style>
<div class="secc1" id="secc1">
Sección o bloque de una pagina
</div>
➔ El elemento HR es un separador, crea una línea recta de división.
Nosotros cambiamos su estilo en nuestras páginas para suavizar su color, darle margenes y disminuir su ancho.
Por ejemplo:




Dar formato y estilo al texto

➔ La etiqueta B o STRONG permite mostrar el texto encerrado en negritas .
➔ La etiqueta EM permite mostrar el texto encerrado en cursivas.
➔ La etiqueta Q permite mostrar el texto encerrado en cuotas (citas de otra fuente).
➔ La etiqueta SMALL muestra el texto de menor tamaño.
➔ La etiqueta MARK es usada para resaltar el texto, dando lo fondo de otro color.
Por ejemplo:
Texto en <b>negritas</b>, en <em>cursivas</em>, encerrado en <q>cuotas</q>, en <small>letras pequeñas</small> y <mark>marcado</mark>
Resultado: Texto en negritas, en cursivas, encerrado en cuotas, en letras pequeñas y marcado.
➔ El elemento SPAN es un contenedor "inline". Dentro de esta etiqueta se puede encerrar texto para definir su estilo, sin representarlo como un bloque.
Por ejemplo para cambiar el estilo de solo una palabra a color azul se emplea:
Mostrar solo una palabra de color <span style="color:blue;">azul</span>
Resultado: "Solo una palabra de color azul"
➔ La etiqueta PRE permite mostrar texto pre-formateado o sea se respeta su estructura original.
Es muy empleada para mostrar código.
La etiqueta CODE es similar, pero para usar de forma "inline".
Por ejemplo:
<pre>
Texto o código
</pre>
<code>Texto o código</code>
Más información detallada: Crear snipetts adaptables para mostrar código fuente en las páginas

Mostrar imagenes, video y compartir audio en HTML

➔ La etiqueta IMG permite insertar y mostrar imágenes en HTML.
Es obligado el atributo SRC para especificar la ruta a la imagen (absoluta o relativa).
Son opcionales WIDTH y HEIGHT para especificar las dimensiones de la imagen, ALT para mostrar un texto alternativo descriptivo y TITLE para mostrar una descripción.
<img src="imagen.jpg" width="640" height="364" alt="Descripción" title="Descripción">
➔ El elemento AUDIO permite insertar un reproductor de audio o música. Lee mas información.
➔ El elemento VIDEO permite insertar directamente archivos de video, aunque los que se insertan desde sitios de internet como YouTube, usan el elemento IFRAME.



Otros elementos populares en HTML


➔ TEXTAREA - Permite crear cuadros en los que es posible insertar cualquier cantidad de texto plano, ajustándolo al tamaño necesario.
Son necesarios los atributos COL (columnas) y ROWS (filas).
<textarea cols="30" rows="1">
TEXTO
</textarea>
Resultado:

➔ BUTTON - Elemento usado para insertar botones.
<button type="button">Boton</button>
Resultado:

Los botones en HTML5 son usados en esta y otras páginas del sitio para muchas funciones.
➔ OL y UL – Permiten crear listas ordenadas (numeradas) y desordenadas respectivamente. En ambos casos LI representa los elementos de la lista.
<ol>
<li>Primera fila</li>
<li>Segunda fila</li>
</ol>
Resultado de una lista ordenada:
  1. Primera fila
  2. Segunda fila
➔ INPUT – Elemento usado para crear entradas de datos ya sea texto, botones o casillas de verificación. Generalmente es usado dentro de formularios, aunque también se pueden emplear de forma independiente.
Mediante el atributo TYPE se especifica su tipo, que puede ser "text", "submit", "reset", "checkbox" o "button".
<input type="text">
<input type="button">
<input type="checkbox">
Resultado anterior: | |
➔ TABLE - Elemento para insertar tablas en HTML. Incluye varios elementos auxiliares como CAPTION (titulo), TH (encabezado), TR (filas), TD (celdas) y otros para definir su estructura.
➔ IFRAME - Usado para insertar marcos en los que se carga contenido externo.
➔ FORM - Usado para crear formularios web, que permiten enviar datos o valores a un servidor de internet.
➔ CANVAS - Usado para mostrar gráficos, animaciones y composición de imágenes.

Más información detallada sobre los elementos en HTML5: http://www.w3.org/TR/

Páginas relacionadas



Comparte esta página




Sígueme en las redes sociales


Sígueme en Google Plus Sígueme en Facebook Sígueme en Twitter Sígueme en Pinterest





 
Inicio | Mapa del sitio | Sobre mí | RSS | Buscar