HTML

HTML significa Hyper Text Markup Language. A diferencia de un lenguaje de programacion o scripting que usa scripts para realizar funciones, un lenguaje de marcado usa etiquetas para identificar el contenido.
Aquí hay un ejemplo de una etiqueta HTML.
INPUT

OUTPUT

---

La Estructura de la Web

La capacidad de codificar usando HTML es esencial para cualquier profesional web. La adquisicion de esta habilidad deberia ser el punto de partida para cualquiera que este aprendiendo a crear contenido para la web.
Diseño web moderno
HTML: estructura
CSS: presentacion
JAVASCRIPT: comportamiento
PHP O similar: Back-end
CMS: administracion de contenido

---

Estructura basica del Documento HTML

Aunque se han cruzado varias veces versiones a lo largo de los años, los conceptos basicos de HTML siguen siendo los mismos.
La estructura de un documento HTML se han comprobado con la de un sandwich. El documento HTML tiene etiquetas de apertura y cierre.

---

ELEMENTOS O ETIQUETAS HTML

La etiqueta head

Inmediatamente despues de la etiqueta HTML de apertura, encontrara head del documento, que se identifica abriendo y cerrando etiquetas de encabezado.
El encabezado de un archivo HTML contiene todos los elementos no visuales que ayudan a que la pagina funcione

La etiqueta body

La etiqueta body sigue a la etiqueta head. Todos los elementos visuales-estructurales estan conenidos dentro de la etiqueta del cuerpo.
Los encabezados, parrafos, listas, citas, imágenes y enlaces son solo algunos de los elementos que pueden estar contenidos dentro de la etiqueta del cuerpo.

La Etiqueta title

Para colocar un titulo en la pestaña que describe la pagina web, agregue un elemento title a su seccion principal.
INPUT

OUTPUT

El archivo HTML

Los nombres de los archivos HTML deben terminar en .html o htm
Por ejemplo:
INPUT

OUTPUT

Parrafos

Para crear un parrafo, simplemente escriba el elemento p con sus etiquetas de apertura cierre.
INPUT

OUTPUT

Saltos de linea br

INPUT

OUTPUT

Elementos de Fortmato

En HTML, hay una lista de elementos que especifican el estilo del texto. Los elementos de formato fueron diseñados para mostrar tipos de texto:
INPUT

OUTPUT

Encabezado HTML

HTML incluye seis niveles de encabezados, que se clasifican según su importancia. Estos son:
INPUT

OUTPUT

Lineas horizontales hr y comentarios

INPUT

OUTPUT

---

ATRIBUTOS HTML

Los atributos proporcionan informacion adicional sobre un elemento o una etiqueta, al tiempo que los modifican. La mayoria de los atributos tienen un valor, el valor modifica el atributo.
INPUT

En este ejemplo, el valor de “centro” indica que el contenido dentro del elemento p debe estar alineado con el centro.
OUTPUT

Mediciones de atributos

Como ejemplo, podemos modificar la linea horizontal para que tenga un ancho de X pixeles. Esto se puede hacer usando el atributo ancho:
INPUT

El ancho de un elemento tambien se puede definir utilizando porcentajes.
OUTPUT

Atributos de alineacion (aling)

El atributo anlign se usa para especificar como se alinea el texto.
INPUT

OUTPUT

---

IMAGENES

La etiqueta es usada para insertar una imagen. Contiene solo atributos y no tiene una etiqueta de cierre. La URL de la imagen (direccion) puede ser definida usando el atributo src.
INPUT
Tenemos una imagen llamada “portada.jpg” en la misma carpeta que el archivo HTML, su codigo deberia verse asi:

En caso de que la imagen no pueda ser mostrada, el atributo alt especifica un texto alternativo que describe la imagen en palabras. El atributo alt es requerido.
OUTPUT
IMAGEN DEMASIADO GRANDE!!!

Cambiar tamaño de una imagen

Para definir el tamaño de una imagen, usa los atributos width y height (ancho y alto). El valor puede ser especificado en pixeles o como porcentaje.
INPUTComo pixeles
Considerando la anterior imagen de gran tamaño, cambiaremos su tamaño para pader observarla completamente.

OUTPUT

INPUT
Como porcentaje

OUTPUT

La carga de imágenes toma tiempo. Usar imágenes grandes puede volver lenta tu pagina, asi que se tienen que usar con precaucion.

Borde de la imagen

Por defecto, una imagen no tiene bordes. Usa el atributo border dentro de la etiqueta image para crear un borde alrededor de la imagen.
INPUT

OUTPUT

---

HIPERVINCULOS

La etiqueta a

Los hipervinculos tambien son una parte fundamental de cualquier pagina web. Se puede agregar hipervinculos a textos o imágenes que le permitan al usuario hacer click en ellos para luego ser redirigidos a otro archivo o pagina web.
En HTML los hipervinculos son definidos usando la etiqueta a. La etiqueta href nos sirve para definir la direccion de destino del hipervinculo.