Introducción a HTML

Saludos y bienvenidos a otro pequeño tutorial

En este vamos a ver un poco sobre HTML para los que no conocen nada acerca de este lenguaje

¿Qué es HTML?

HTML ó Hyper Text Markup Language es un lenguaje de marcado que se utiliza para la elaboración de páginas web.

Es usado para definir la estructura del sitio por medio de “tags” o “etiquetas” predeterminadas, que le dan al sitio un orden y esqueleto.

Las etiquetas van marcadas con los signos “<” y “>” en las que van a ir incluidas las instrucciones, estás a su vez pueden contener scripts de javascript o estilos de CSS.

HTML tambien es usado para referirse al contenido del tipo MIME, ya sea de forma ascendida a XML (XHTML) o su forma descendida SIGML.

Podría explicarles más de la historia del HTML pero la vdd lo veo totalmente innecesario así que vayamos directamente a lo que nos interesa…. Cómo usar HTML.

Atributos

En HTML como en muchos lenguajes de programación, los atributos son los valores que contendrán las etiquetas de nuestro documento, generalmente van antecedidas de un “=” inmediatamente después de la tag y el valor irá entre comillas.

ej:

Usando la etiqueta <img>

En este ejemplo se ve como se abre la etiqueta con un “<” seguida por el atributo “img”, el “src” es la fuente de donde va a llamar la imágen y como dijimos va seguida de un “=”, posteriormente el valor del atributo va entre comillas “images/prueba.jpg” lo que indica que la imagen “prueba.jpg” se encuentra dentro del directorio o carpeta “images”

Códigos HTML Básicos

vamos a ver unos cuantos códigos que serán muy utilizados ahora que empiecen a diseñar páginas web:

<script> Esta etiqueta nos va a servir para introducir el código de algún script en una página web, como un javascript por ejemplo:

Aquí estamos mandando a llamar un script externo, recuerda que el atributo “src” nos indica la ruta dónde se encuentra el archivo que estamos buscando

<head> Esta etiqueta define la cabecera de nuestro documento, en la cuál ira la información propia del sitio y de nosotros tales como el título, las metatags (ya las explicaré mas adelante). Veamos un ejemplo para que quede mas clara la idea.

Como ven aqui las etiquetas “<meta />”, “<title>”, <link /> y <script> estan contenidas dentro de las etiquetas “<head>” y “</head>”

LO QUE VA DENTRO DE ESTAS ETIQUETAS NO APARECE EN EL NAVEGADOR CUANDO LO PUBLICAN

<meta> Aquí van los metadatos cómo la propiedad, Nombre del sitio, palabras claves, descripción, en fin todos los datos que se refieren a nuestro sitio. No pongo imagen porque en el ejemplo anterior ya viene ésta etiqueta

<link> Nos sirve para mandar a llamar a las hojas de estilo o a los iconos que se mostraran en el navegador

<title> Aquí va el título de la página que se mostrará en el navegador, aquí si les pondre un ejemplo, veamos:

Aquí puse el título en la tag “<title>” y en mi explorador se ve así:

Con esto creo que ya quedo más claro cómo usar esta etiqueta

<style> Con ésta etiqueta podemos introducir código CSS directamente en nuestra documento HTML que SOLAMENTE afectará al documento actual, a diferencia de si fuese un archivo .css externo

Aquí le estamos dando estilo al cuerpo de la página, para saber más sobre CSS visita mi otro tutorial dando click aquí

<body> Una de las etiquetas más importantes, dentro de la etiqueta “<body>” es dónde irá contenido TODO lo que se va a mostrar en la página

<h1> hasta <h6> Estas etiquetas son las que van a indicar si un texto es un título, subtítulo, etc etc veamos un ejemplo:

Así se ve el código y así se ve el resultado:

<table> Con esta etiqueta podremos incluir tablas en nuestro documento y además van acompañadas de otras etiquetas que ayudan a la tabla que son <td>Determina la columna de la tabla y <tr> que determina la fila de la tabla, Veamos:

El código y le añadimos un borde para que se vea en el explorador

Esta etiqueta se utilizaba para hacer páginas de internet basadas en HTML, miren este ejemplo:

Así se codifica la estructura de la página:

Y así se veía:

<a> Esta etiqueta sirve para los hipervínculos, comunmente conocidos como Links, estos nos sirven para poder enlazar o linkear una palabra o imagen a algún sitio externo o interno de nuestra página web

El Código con la etiqueta “<a>” y para indicar la fuente utilizaremos el atributo “href”, observen que el texto esta incluido entre las etiquetas “<a>” y “</a>”

<div> División de página, utilizada principalmente con CSS para sustituir a la etiqueta “<table>”

<ul> <ol> <li> Etiquetas que se usan para las listas, veamos los ejemplos:

<strong> Etiqueta para poner texto en negrita

<em> Etiqueta para poner un texto en itálica

<del> Etiqueta para tachar un texto

<u> Esta etiqueta sirve para subrayar un texto

Pues este capítulo llega hasta aquí, con esto ya deben tener conocimientos básicos para entender los siguientes tutoriales tanto de HTML cómo de CSS

Espero que les sirva y recuerden comentar los tutoriales =D

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s