La estructura basica de un documento HTML es siempre la misma. Empieza con el elemento HTML y posee dos partes o secciones principalmente, el Head y el Body.

Head Es la sección cabecera que contiene la informacion de la codificacion del documento, leguaje, estilos, scripts, metadatos, etc. Esta sección no tiene representación visual en la página web.

Body Es la sección que contiene todos los elementos visible de la pagina.

Además, al principio de cada documento HTML que creemos debemos indicar la versión del DOCTYPE

El Titulo de una web es lo que se muestra en la pestaña del navegador de la página en la que nos encontramos. Este titulo se configura en la sección head dentro del documento HTML de la página.

HTML es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...). La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar (cursiva, negrita, o un gráfico determinado).

Los parrafos son los elementos principales para añadir texto a nuestra web. Podemos tener tantos parrafos como queramos y su etiqueta para definirlos es <p>. Dentro de la etiqueta es donde pondriamos nuestro texto.

La etiqueta <span> la usamos para aplicar estilo a un texto en concreto o agrupar elementos en línea

Ahora veremos las etiquetas que usamos para dar distintos formatos a nuestros textos. Mostraremos un ejemplo con los mas comunes pero tengamos en cuenta que no usamos normalmente estos modificadores porque el formato y los estilos se configuran en la hoja de estilos de CSS

Estos conceptos se aplicana los elementos HMTL, unos pueden ser block o inline o ambos a la vez.

Block: El elemento ocupa toda la linea. Si se crea otro elemento de bloque este empezara en una linea nueva ocupandola totalmente.Puede contener elementos en block o inline en su interior.

Inline: Se encuentra dentro de una linea pero no afecta a los demas elementos ocupando solo lo indicado por su contenido o estilo.

Es una etiqueta sin cierre que nos sirve para dar saltos de linea. A más etiquetas br, mas saltos de linea.

Es una etiqueta que nos funciona como contenedor de otros elementos/etiquetas. Su uso en exceso no suele ser bueno a nivel semantico.

Son elementos que nos permiten ir a nuevas páginas webs a partir de los click que hacemos en estos. La apertura de la página puede hacerse en la misma pestaña o en otra nueva o cerrando la actual y llevandote a la nueva. También podemos generar enlaces a distintas secciones de nuestra página web.

Los enlaces se pueden usar en iconos, imagenes, videos, etc.

Son una agruapación de elementos en forma de lista que pueden ser ordenadas o desordenadas.

Para añadir las imagenes a nuestra web usamos la etiqueta img que no necesita etiqueta de cierre. Se pueden usar imagenes de distintos formatos, normalmente jpg, png y gif.

A más imagenes tenga nuestra web, mayor será el tiempo de carga esta por lo que es recomendable tener cuidado con el tamaño de las imagenes.

En una web podemos usar imagenes guardadas en el mismo directorio de la web, osea de forma local. Como tambien podemos usar imagenes de la web escribiendo su dirección. Siempre tenemos que incluir el formato de la imagen.

Las imagenes también deben tener un texto alternativo por si no cargan y el visitante de la página pueda tener una idea de lo que representaba. Para eso se usa el atributo alt.

Funcionan igual que la etiqueta img ya que pueden usar archivos locales o de internet siempre que se especifique completamente la dirección y su formato.

Adicionalmente, para que funcione, necesita el atributo controls que mostrara los controles del video o audio.

Los formularios permiten obtener información de los usuarios. Los formularios se cerrando con la etiqueta form y dentro de él se añaden los elementos que recogen la información de diferentes maneras dependiendo de los valores solicitados como pueden ser texto, números, contraseñas, fechas, subida de ficheros, etc.

Los elementos de entrada que tiene el formulario se llaman input y se crean con la misma etiqueta que lleva su nombre. Su tipo por defecto es texto, pero podemos modificarlo a los demas tipos añadiento el atributo tipe e indicando su tipo. El formulario no enviara los datos si estos correspondientes al tipo que se pide.

A continuación un ejemplo de los tipos de inputs que podemos tener.

Además de los inputs, tenemos otras opciones de input para generar formularios mas avanzados.

Ahora veremos dos opciones mas para nuestro formulario. Las listas de seleccion multiple o select box.

Las select box tambien pueden tener otros atributos como size con el que podemos especificar los elementos a mostrar. Usaremos el ejemplo anterior pero estableceremos el atributo size en 3:

En HTML podemos crear estructuras de datos como tablas usando filas y columnas. Para crear las tablas usaremos la etiqueta table y las etiquetas tr para filas y td para columnas

Ahora veremos un ejemplo tanto en código como en navegador. A la version navegador le daremos unos bordes desde la hoja de estilos para definirlo mejor.

En las tablas podemos añadir cabeceras para dar mayor claridad a nuestros elementos con la etiqueta th y el atributo scope que sera row o colunm dependiendo donde queramos poner la cabecera. Se pueden convinar.

Con el diseño de la web nos referimos al aspecto visual de los elementos que componen la página para mejorar la apariencia visual de la web. La web suele seguir la siguinte estructura para la disposición de sus elementos.

Estos elementos, aparte estructurar la web nos sirven para darle una mejora semantica a nuestro HTML dejando claro su funcion y significado.

Los metadatos son elementos HTML que muestran información sobre la propia página web que los contiene. Se encuentra dentro del head y es usados por los buscadores para definir la información principal de nuestra web, por lo que será muy importante que lo tengamos correctamente configurados.