Luego de haber asistido a una charla en la que hablaban de los templates de WordPress me di cuenta de que no sabía lo básico. No tenía idea de cómo funcionaba HTML y ni escribir en este tipo de lenguaje.
Por lo mismo me puse a indagar en la web y aquí les traigo los primeros pasos. No es dificil de aprender y sólo hay que gastar tiempo, porque como la mayoría de las cosas en internet es gratis
Con HTML tu podrás tener las nociones básicas para crear una página web.
* Importante: En este enlace podrás experimentar todo lo que vamos aprendiendo sobre HTML.
1. Qué es el HTML
El HTML es un lenguaje para crear páginas web. Significa Hyper Text Markup Language o Lenguaje de marcas de hipertexto. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes.
El HTML no es un lenguaje de programación en si mismo sino un lenguaje de marcas. El texto o gráficas que veremos desplegados están rodeados por marcas o tags que contienen las instrucciones de cómo éstos deben verse.
Es un lenguaje descriptivo, lo que vemos escrito en el código es la descripción de lo que el browser o navegador va a mostrar. El HTML se usa para definir la estructura del documento, pero es el browser el que determina cómo se va a desplegar éste.
2. Dónde escribimos el HTML
Podemos trabajar en HTML desde cualquier editor de texto como tradicional bloc de notas de Windows.
3. Estructura
Los comandos que se despliegan en la pantalla son los Markup Tags. Aquí se incluyen todas las instrucciones del documento HTML. Se ve así.
<instrucción>texto a verse afectado</instrucción>
Toda instrucción inicia con un “<orden>” y cierra con un “</orden>. No olvidarse de poner el slasho diagonal para finalizar la instrucción. Hay algunas excepciones que no necesitan cerrar la instrucción.
4. Principales Tags
- <HTML> </HTML>
Indican el principio y el final de un documento. Todos los demás tags estarán dentro de estos dos. Es el primer y último tag en nuestra página HTML. - <HEAD> </HEAD
Es el encabezado del documento. Aquí va la información que no se ve en pantalla, pero que es necesaira para los servidores y buscadores.
1) Palabras claves 2) Descripción del contenido 3) Nombre del autor de la página 4) El Título del documento también se acomoda en el encabezado. - <TITLE> </TITLE>
Señala el título de la página, se incluye en el encabe zado del documento. Es el texto que vemos en la parte de arriba de las páginas cuando navegamos el WWW. No debe llevar tags dentro. - <BODY> </BODY>
Es la página en sí misma. Dentro de él se especifican los colores, el fondo y los márgenes.
Aquí van todas las instrucciones, el texto y las imágenes de nuestra página.
El tag de cierre del documento </HTML> se escribe inmediatamente después del de cierre del </BODY> - <P>
Indica el inicio de un párrafo con el respectivo salto de línea. Por regla no lleva tag de cierre </P>, pero se
acostumbra usarlo.
Se puede egregar la alineación del texto del párrafo correspondiente.
<P ALIGN=“LEFT”> A la izquierda
<P ALIGN=“RIGHT”> A la derecha
<P ALIGN=“CENTER”> Al centro
<P ALIGN=“JUSTIFY”> Justificado. - Para los encabezados se usan los tags desde el <h1> hasta el <h6> Según el tamaño, desde el <h1>, el más grande al <h6> el más pequeño. Con esto se agrega automáticamente una línea hacia arriba y hacia abajo.
- También se puede agregar la alineación del encabezado <h1 align=”center”>Encabezado1</h1>
- <br> salto de línea
Insertar Imágenes
<img src=“escudo.gif” alt=“Escudo de la UDLA”>
<img> sirve para insertar imágenes en la página. La opción src define qué imagen se insertará en el texto. La opción alt define texto alternativo para desplegarse en lugar de la imagen.
Hacer listas no ordenadas
Lista de elementos marcados con viñetas o bullets.
La lista inicia con el tag <ul>. Cada elemento inicia con el tag <li>.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Crear Vínculos
Para crear vínculos se crea la siguiente liga:
<a href=”url”>Text to be displayed</a>
En “url” se escribe la dirección de la página. En “Text to be displayed” va el texto que irá amarrado al link.
