1.1 Introducción y lo Básico de HTML
HTML es un lenguaje universal con el que se escriben
las páginas web y compuesto por etiquetas que marcan el inicio y el fin de cada
elemento del documento. Funciona en cualquier plataforma (Windows, Macintosh,
Unix, OS/2, etc.) y con cualquier navegador o browser (Chrome, Netscape,
Internet Explorer, Mozilla Firefox, etc.).
El código de una páginas web es un archivo plano,
escrito en algún editor de texto plano y sin formato (Un editor plano y sin
formato es un programa que nos permite redactar documentos como notepad, blog
de notas, etc), o también se pueden escribir en editores web (que disponen de
entorno visual y autocompletación como dreamwever, sublitext, etc). Estos
archivos deben tener extensión .html para poder ser visualizados en tu
navegador, es decir, el navegador que tengas instalado en tu computadora, sea
cual sea, es capaz de interpretar el código HTML de los documentos, y de
mostrar a los usuarios las páginas web resultantes del código interpretado,
SIEMPRE Y CUANDO TENGA EXTENSION .html.
En conclusión vemos que lo único que necesitamos para
hacer nuestra página web es un editor, bien sea de texto o web y un navegador
(que ya viene en la computadora).
Si las siglas HTML vienen acompañadas de un 5 (HTLM5)
se refiere a una forma más avanzada del HTML, a su última versión, que contiene
nuevas y mejores etiquetas pero que aún no son reconocidas por todos los
navegadores. Pero lo importante es aprender cómo se construye una página web y
cuál es la lógica del HTML no la versión de HTML que usemos.
En este tutorial trabajaré con el Editor Web Dreamwever, ustedes podrán practicar en:
En este tutorial trabajaré con el Editor Web Dreamwever, ustedes podrán practicar en:
- Editores de texto
Mi primera web usando Block de Notas
- Editores web
Mi primera web usando Dreamwever
1.2 Elementos y Etiquetas del lenguaje HTML
Etiquetas:
A las etiquetas o también llamadas marcas, se componen
de dos partes:
- Etiquetas de Apertura
- Etiquetas de Cierre
La etiqueta de Apertura tiene la característica:
- De estar delimitada por los caracteres < >.
- Y estar compuesta por el identificador o nombre de la etiqueta,
- Su sintaxis es: <identificador>
La etiqueta de Cierre tiene la característica:
- · De estar delimitada por los caracteres </ >.
- · Y estar compuesta por el mismo por el identificador o nombre de la etiqueta.
- · Su sintaxis es: </identificador>
Es importante aclarar, que esta es la sintaxis básica
de una etiqueta, aunque muchas páginas contienen etiquetas de la siguiente
forma:}
<identificador atributo1 atributo2...> </ identificador >.
Muchas etiquetas llevan atributos que no son más que propiedades que aportan
datos del elemento al que dicha etiqueta define. y llevan siempre la estructura
1.3 Estructura de un documento HTML
Un documento HTML tiene tres partes:
- · Una línea que contiene información sobre la versión de HTML, y da comienzo al documento.
- · Una sección de cabecera declarativa (delimitada por el elemento HEAD),
- · Un cuerpo, que contiene el contenido real del documento. El cuerpo puede ser especificado mediante el elemento BODY
Y está compuesto por elementos y
cada elemento está definido por una etiqueta de apertura <HTML> y una
etiqueta de cierre </HTML>. Dentro de este se dividen dos partes
fundamentales la cabecera, delimitada por la etiqueta <HEAD> y el cuerpo,
delimitado por la etiqueta <BODY>. Por tanto la estructura de un
documento HTML será:
Entre estos elementos principales se pueden anidar más
elementos, siempre entre sus etiquetas de Apertura y Cierre, a excepción de
algunos elementos que no necesitan etiqueta de Cierre.
Es decir, los elementos
proporcionan la estructura al documento HTML e indican al navegador cómo
quieres que se presente tu sitio web. Por lo general, los elementos están
formados por una etiqueta de inicio, el contenido, y una etiqueta de cierre.
<ETIQUETA>Elementos Afectados por la
Etiqueta</ETIQUETA>
Diferencia entre Elementos y Etiquetas
1.4 Diseño
Diseñar una pag web es como
dividir secciones o bloques, cabecera, menú, contenidos y pie de página. Por
tal motivo anteriormente era ideal diseñarlas en tablas o en divs que formaran
estos bloques.
Actualmente (diciembre 2016)
con las nuevas especificaciones de HTML5 y con el desarrollo que ha tenido CSS
estos divs o contenedores que se usaban para dividir secciones han sido
sustituidos por nuevos elementos.
Este nuevo diseño además de
permitir información semántica sobre cada sección, provee de una gran ayuda a
los software lectores porque puede comunicarles sobre a qué se refiere cada
parte de la pagina que es leída y así ayudar a toda persona discapacitada que
necesite usar esta herramienta.
Además las páginas que usan
este nuevo diseño son mucho más tomadas en cuenta por los buscadores y su
velocidad de carga es menor, aunque es imperceptible quizas a simple vista por
el usuario, a nivel de un buen desarrollador web esto es de gran importancia
porque tarda menos en descargarse.
Hay cuatro maneras
diferentes para crear diseños de varias columnas. Cada forma tiene sus ventajas
y desventajas:
- tablas HTML
- propiedad CSS float
- marco CSS
- Flexbox CSS
1.5 Principales Elementos y sus Etiquetas
Veamos con detalle los principales elementos y su Etiqueta:
(Haz clic sobre el nombre de la etiqueta y veras mas información)
Elemento
Raíz
(Estructuración
del documento)
|
|
Etiqueta
|
Elemento
|
Especifica que versión de html
se está usando
|
|
La raíz de un documento HTML o XHTML.
|
|
Elementos
informativos
(Metadatos
del documento)
|
|
Etiqueta
|
Elemento
|
Define un contenedor de
metadatos
|
|
Título del documento.
|
|
Códigos JavaScript y CSS
externos con el documento HTML actual.
|
|
Se utiliza para especificar el
conjunto de caracteres que proporcionan información como la descripción de la
página.
|
|
Código CSS usado en nuestra web.
|
|
Define la URL base
para las URLs relativas en la página.
|
|
Elementos
Scripting
(Archivos
que acompañan a nuestro HTML)
|
|
Etiqueta
|
Elemento
|
Define ya sea un script interno
o un enlace hacia un script externo. El lenguaje de programación es
JavaScript
|
|
Define un contenido alternativo a mostrar cuando
el navegador no soporta scripting.
|
|
Elementos
de Secciones
|
|
Etiqueta
|
Elemento
|
Delimita al contenido de un
documento HTML, es decir, el cuerpo del elemento. Sólo hay un elemento
<body> en un documento. |
|
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> |
Los elementos de cabecera hacen
seis niveles de cabeceras de documentos;
<h1> es la de mayor y <h6> es la de menor importancia. Un
elemento de cabecera describe brevemente el tema de la sección que introduce
(un título). |
Elementos
de Contenido
(Estructuración
de Bloques)
|
|
Etiqueta
|
Elemento
|
Especifica un párrafo.
|
|
Representa una línea horizontal
para separar diferentes secciones en un documento.
|
|
Genera una cita, es decir, la
usamos para representar un texto citado de otra fuente.
|
|
Define una lista ordenada de objetos.
|
|
Define una lista desordenada de
objetos.
|
|
Define los objetos de las listas
anteriores.
|
|
Significa división. Crea
secciones (contenedores) agrupando contenidos.
|
|
Indica que su
contenido esta preformateado y que este formato debe ser preservado.
|
|
Define una lista de
definiciones, es decir, una lista de términos y sus definiciones asociadas.
|
|
Representa un término
definido por el siguiente <dd>.
|
|
Representa la
definición de los términos listados antes que él.
|
|
Representa una figura ilustrada como parte del documento.
|
|
Representa la leyenda de una figura.
|
|
Elementos
de Contenido
(Texto
en línea)
|
|
Etiqueta
|
Elemento
|
Este elemento define un enlace.
|
|
Representa un texto enfatizado, como un acento de intensidad (en
itálica).
|
|
Representa un texto
especialmente importante (en negrita).
|
|
Representa un comentario aparte, es decir, textos con estilo de fuentes
pequeños.
|
|
Incorpora el título de una obra o referencia a una fuente.
|
|
Esta etiqueta se usa comúnmente en un elemento para
añadirle un estilo determinado.
|
|
<br> |
Genera saltos de línea (enter).
|
Elementos que
representan
Contenido incrustado
|
|
Etiqueta
|
Elemento
|
Este elemento una imagen enlazada.
|
|
Permite insertar un marco. Sirve para crear un
espacio dentro de la página donde se puede incrustar otra web
|
|
Elementos
añadidos en HTML5
|
|
Con ella se generará una sección
dentro de un documento o aplicación, como un capítulo de un libro. Puede
contener subsecciones h1-h6.
|
|
Define una sección que solamente
contiene enlaces de navegación (menús)
|
|
Este Elemento define un
contenido autónomo que podría existir independientemente del resto del contenido.
|
|
Delimita algunos contenidos
vagamente relacionados con el resto del contenido de la página. Si es
removido, el contenido restante seguirá teniendo sentido
|
|
Define la cabecera de una página
o sección. Usualmente contiene un logotipo, el título del sitio Web y una
tabla de navegación de contenidos.
|
|
Define el pie de una página o
sección. Usualmente contiene un mensaje de derechos de autoría, algunos
enlaces a información legal o direcciones para dar información de retroalimentación.
|
|
Define una sección que contiene
información de contacto.
|
|
Define el contenido principal o
importante en el documento. Solamente existe un elemento
<main> en el documento |
|
Elementos nuevos en HTML5
Estructura de un documento HTML
Nuevas etiquetas (Elemento Main)
EDICIONES
|
|
Etiqueta
|
Elemento
|
Define una adición en el documento.
|
|
Define una remoción del documento.
|
|
ELEMENTOS INTERACTIVOS
(Todos nuevos en HTML5)
|
|
Etiqueta
|
Elemento
|
Representa un widget desde el que un usuario puede
obtener información o controles adicionales.
|
|
Representa un resumen, título o leyenda para un
elemento <details> dado.
|
|
Representa un comando que un usuario puede invocar.
|
|
Representa una lista de comandos.
|
|
SEMÁNTICA
(A
nivel de texto)
|
|
Etiqueta
|
Elemento
|
Representa contenido que ya no es exacto o relevante.
|
|
Representa una cita textual inline.
|
|
Representa un término cuya definición está contenida en su contenido ancestro más
próximo.
|
|
Representa una abreviación o un acrónimo; la expansión de la
abreviatura puede ser representada por el atributo title.
|
|
<data>
|
Asocia un equivalente legible por máquina a sus
contenidos.
|
Representa un valor de fecha y hora.
|
|
Representa un código de ordenador.
|
|
Representa a una variable.
|
|
Representa la salida de un programa o un ordenador.
|
|
<kbd>
|
Representa la entrada de usuario.
|
<sub>,<sup>
|
Representan un subíndice y un superíndice,
respectivamente.
|
<i>
|
Representa un texto en una voz o estado de ánimo
alterno.
|
<b>
|
Representa un texto hacia el cual se llama la
atención.
|
<u>
|
Representa una anotación no textual sin-articular.
|
Representa texto resaltado con propósitos de
referencia.
|
|
Representa contenidos a ser marcados.
|
|
Representa el texto de una anotación ruby.
|
|
Representa los paréntesis alrededor de una anotación
ruby.
|
|
Representa un texto que debe ser aislado de sus
alrededores para el formateado bidireccional del texto.
|
|
Representa la direccionalidad de sus descendientes
con el fin de anular de forma explícita al algoritmo bidireccional Unicode.
|
|
Representa una oportunidad de salto de línea.
|
|
1.6 Tablas
El elemento tabla
crea una sección con un conjunto de filas apiladas unas sobre otras y cada fila
contiene celdas unas al lado de las otras.
Datos tabulares
(Tablas)
|
|
Etiqueta
| Elemento |
Representa datos con más de una dimensión.
|
|
Representa el título de una tabla.
|
|
Representa un conjunto de una o más columnas de una
tabla.
|
|
Representa una columna de una tabla.
|
|
Representa el bloque de filas que describen los
datos contretos de una tabla.
|
|
Representa el bloque de filas que describen las
etiquetas de columna de una tabla.
|
|
Representa los bloques de filas que describen los
resúmenes de columna de una tabla.
|
|
Representa una fila de celdas en una tabla.
|
|
Representa una celda de datos en una tabla.
|
|
Representa una celda encabezado en una tabla.
|
|
1.7 Formularios
Los formularios
permiten a los autores de páginas web poner elementos interactivos en sus
páginas, por ejemplo, para recibir mensajes de sus lectores.
El lector escribe la
información rellenando campos o haciendo clic sobre botones, y luego presiona
un botón de envío. Pero un formulario por sí solo no funciona sino va
acompañado de otro código en PHP.
Los datos del
formulario serán enviados a un servidor para que este los procese, el objetivo
de este tutorial será diseñar el formulario y enviarlo, hasta ahí llega HTML,
en otros tutoriales veremos el código para procesar estos datos.
En este momento sería
bueno repasar los conceptos referentes a Lenguajes de Programación a nivel de
cliente (HTML que se puede visualizar en nuestra PC) y Lenguajes de Programación a nivel de servidor
(PHP que se puede visualizar en WAMP, haciendo de nuestra PC un servidor local)
FORMULARIOS
| |
Etiqueta
| Elemento |
Representa un formulario, conteniendo de controles que puede ser enviado a un servidor para procesamiento.
| |
Representa un conjunto de controles.
| |
Representa el título de un <fieldset>.
| |
Representa el título de un control de formulario.
| |
Representa un campo de datos escrito que permite al usuario editar los datos.
| |
Representa un botón.
| |
Representa un control que permite la selección entre un conjunto de opciones.
| |
Representa un conjunto de opciones predefiniddas para otros controles.
| |
Representa un conjunto de opciones, agrupadas lógicamente.
| |
Representa una opción en un elemento <select>, o una sugerencia de un elemento <datalist>.
| |
<textarea>
|
Representa un control de edición de texto multi-línea.
|
Representa un control de par generador de llaves.
| |
<output>
|
Representa el resultado de un cálculo.
|
Representa el progreso de finalización de una tarea.
| |
Representa la medida escalar (o el valor fraccionario) dentro de un rango conocido.
| |
Elementos
Multimedia
|
|
Define un contenedor para una aplicación externa.
|
|
Crea un elemento de video.
|
|
Crea un elemento de sonido.
|
|
1.9 Conclusión
El propósito principal de
HTML5 es dotar a la web de mucho contenido semántico. Hacer páginas más
organizadas de manera que tanto los lectores de pantalla como los navegadores
no gráficos puedan leer e interpretar mejor su contenido. Que sea cada vez más fácil
acceder a ella por los usuarios con algún tipo de discapacidad o por gente de
mayor edad.
Para tal propósito se crean
nuevos elementos, nuevos atributos y se des actualizan otros. Se ponen en desuso
porque su tarea puede ser reemplazada por código CSS generando así un documento
con código cada vez más limpio.
Al ser tan nuevos surge el
problema del soporte del navegador, algunos de los elementos antes mencionados
y explicados no son soportados por los principales navegadores, así como también
se debe tomar en cuenta la gran diversidad de dispositivos en el mercado con
distintos Sistemas Operativos y distintos navegadores.
Como consejo les recomiendo
que si quieren ser buenos diseñadores web, deben instalar varios navegadores en
su pc, y hacer las pruebas de sus diseños en cada uno a ver si todos los elementos
funcionan como esperamos.
