Que es HTML es un acrónimo de
Hypertext Markup Language y es una tecnología que nos permite escribir páginas
Web. HTML es un lenguaje de computación que entienden los exploradores Web. permite implementar
el mecanismo apropiado para vincular diferentes páginas denominando hipervinculación a esta propiedad. La hipervinculación
permite ir de una página a otra simplemente haciendo clic en un vínculo.
Estructura básica de un documento HTML
- <HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.
- <HEAD>: Especifica el prólogo del resto del archivo esto es, el encabezado. Son pocas las etiquetas que van dentro de ella, destacando la del titulo <TITLE> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras etiquetas dentro de él. En <head> no hay que colocar nada del texto del documento.
- <BODY>: Encierra el resto del
documento, el contenido es el que se muestra en un explorador Web.
Que es HTML5 y cual es su estructura
es una colección de estándares
para el diseño y desarrollo de páginas web. Esta colección representa
la manera en que se presenta la información en el explorador de internet y la
manera de interactuar con ella. está siendo desarrollado por Ian Hickson de Google Inc. y David Hyatt de
Apple Inc. junto con todas las personas que participan en Web Hypertext
Application Technology Working Group
<!DOCTYPE html>
Esta línea deberá ser la primera línea del documento, sin
espacios ni líneas previas. Esto es una manera de activar el modo estándar y
forzar a los navegadores a interpretar el HTML5 siempre que sea posible, o a
ignorarlo cuando no lo sea.
<html>
Después de declarar el tipo de documento, se construye la
estructura del árbol con HTML. El elemento raiz del árbol es el elemento
<html>. Este elemento engloba todo el código HTML.
<!DOCTYPE html>
<html lang="es">
</html>
El atributo lang en la etiqueta de inicio <html> es el único atributo que debemos especificar en HTML5. Este atributo define el lenguaje del contenido del documento que estamos creando- en este caso, es para español.
HTML5 es muy flexible con respecto a la estructura y los
elementos utilizados en su desarrollo. El elemento <html> puede ser
incluido sin atributos o no ser incluido.
Sin embargo, por compatiblidad y otras razones, se
recomienda seguir unas reglas básicas. En este tutorial vamos a aprender como
construir un documento HTML siguiendo un manual de buenas prácticas.
<head>
Sigamos con la construcción de nuestra plantilla. El código HTML incluido en las etiquetas <html> tiene que estar dividido en dos secciones principales. Como ya ocurría en versiones anteriores de HTML, la primera sección es el "head" y la segunda el "body". El siguiente paso, por tanto, es crear dos secciones en el código, utilizando esos dos elementos; <head> y <body>.
El elemento <head> va en primer lugar, y como el
resto de los elementos estructurales, tiene un tag de apertura y otro de
cierre.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
</html>
El "tag" no ha cambiado con respecto a otras
versiones y su función es la misma. Dentro de los "tags" <head>,
definiremos el título de nuestra página, declararemos la codificación de
caracteres, incluiremos cualquier información general que queramos sobre el
documento, e incorporaremos archivos externos con los estilos, scripts o
incluso imágenes necesarias para mostrar la página.
A excepción del título y algunos iconos, el resto de la
información incluida en el documento dentro de las etiquetas <head> no
será visible.
<body>
La siguiente sección que forma parte de la organización
principal del documento HTML es el "body". Este "cuerpo" es
la parte visible del documento y viene especificado con la etiqueta
<body>.
Esta etiqueta no ha cambiado con respecto a las versiones
anteriores de HTML:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
<meta>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
<meta>
A continuación vamos a desarrollar la cabecera del documento. Existen algunas modificaciones e innovaciones dentro de esta sección, y una de ellas es la etiqueta que define la codificación de los caracteres del documento. Es la etiqueta meta y especifica como se debe presentar el texto dentro de la pantalla.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
La modificación para este elemento de HTML5, es como en muchos casos, una simplificación. La etiqueta meta nueva para la codificación de caracteres es más corta y más simple. Igualmente, se puede cambiar utf-8 por la codificación que se prefiera, y se pueden añadir otras etiquetas meta como "description" o "keywords", tal y como se ve en el ejemplo que tenemos a continuación:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Esto es un ejemplo de HTML5">
<meta name="keywords" content="HTML5">
</head>
<body>
</body>
</html>
Nota: Como vemos, la etiqueta <meta> especifica el tipo y el atributo content declara su valor, pero ninguno de estos valores serán mostrados en la pantalla.
En HTML5, no es necesario poner una barra de cierre, pero se recomienda por razones de compatibilidad.
<title>
La etiqueta <title>, como siempre, especifica el título del documento, y no hay nada nuevo en HTML5.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Esto es un ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Título del documento</title>
</head>
<body>
</body>
</html>
Nota: Normalmente, este texto es mostrado por los navegadores en la parte superior de la ventana.
<link>
Otro elemento importante que se incluye dentro de la cabecera es <link>. Este elemento se utiliza para incorporar estilos, scripts, imágenes o iconos de archivos externos. Uno de los usos más comunes de <link>, es el de insertar un archivo CSS externo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Esto es un ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Título del documento</title>
<link rel="stylesheet" href="edu4javastyles.css">
</head>
<body>
</body>
</html>
Que
es una Etiqueta
Qué es un atributo
Cualquier etiqueta XHTML puede contener uno o más
atributos, separados por espacios, que permiten especificar la etiqueta. El
código fuente tiene el siguiente aspecto:
<etiqueta atributo="valor_de_atributo">
<etiqueta atributo1="valor_de_atributo1" atributo2="valor_de_atributo2" >
En el XHTML los atributos tienen que estar siempre
definidos (mediante el signo igual " = ") y el valor del atributo
tiene que estar entre comillas dobles o simples. Existen una serie de atributos
comunes a todas las etiquetas (salvo la etiqeta <html>) y
algunas etiquetas tienen unos atributos específicos. En esta lección se
comentan los atributos comunes; los atributos específicos se comentan en las
lecciones dedicadas a las etiquetas correspondientes (imágenes, tablas, etc.)
Que
es DOCTYPE
El Doctype es la primera declaración que va en una página
web y le dice al navegador qué especificación de HTML.
El doctype empieza con <!DOCTYPE (debe ser escrito en
mayúsculas)
Doctypes en HTML
HTML especifica 3 tipos de documentos: Strict, Transitional y Frameset.
(los pongo en ingles... porque así es como va en el código HTML)
HTML Strict DTD
Usalo cuando quieras un código limpio, sin indicaciones
de como va a ser la presentación del documento (para eso está el CSS).
El código que debe ir al inicio de tu documento HTML si
es que estás usando este doctype es el siguiente:
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML Transitional DTD
Este DOCTYPE admite atributos de presentación, no
es la mejor elección pero ahí está.
Sólo es útil cuando los lectores no tengan navegadores
que soporten hojas de estilo (CSS), mejor dicho, sólo es útil si
consigues una máquina del tiempo y viajas a diseñar páginas web en 1990.
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Etiqueta
<meta>
La etiqueta <meta> se utiliza para
identificar propiedades de un documento(p.ej.,el autor, una lista de palabras
claves, la descripción de una página, etc.) y para asignar valores a esas
propiedades. Para ello nos servimos del atributo name que especifica la propiedad
a usar y del atributo content para definir el contenido de dicha propiedad.
El siguiente ejemplo nos muestra un valor
para la propiedad autor:
Meta
y los motores de búsqueda
keywords
Uno de los usos más importantes de la
etiqueta <meta>, es especificar una lista de palabras claves relacionadas
con el contenido de la página. Estas palabras claves (keywords) serán usadas
por los motores de búsqueda para identificar el contenido de la página y de esa
forma mejorar la calidad de los resultados de una búsqueda. Las palabras claves
deben separarse con una coma (,) y se pueden escribir una, dos o más palabras
juntas
.
La etiqueta <meta> debe ubicarse en la
sección head del documento, entre las etiquetas <head> y </head>.
La etiqueta <meta> no tiene cierre.
El atributo LANG
El atributo CHARSET
Este va a definir qué tipo de caracteres vamos a utilizar en la web, para que el navegador lo detecte y lo visualice correctamente.
Para asegurarnos que todos los navegadores leen la
propiedad de codificación de caracteres, la declaración de este debe ser
incluida en los primeros 512 caracteres de nuestro documento, es decir, para
evitar problemas, debería definirse inmediatamente después de la etiqueta head.
Para insertar un comentario solo necesitamos encerrarlo entre estos dos símbolos o etiquetas:
Pero
como mínimo debe tener los dos guiones tanto al principio como al final, además
del resto de la etiqueta, <!-- y -->.
Los comentarios no
aparecen en la página cuando la visita alguien. En realidad no hacen nada de
nada de nada. Solo sirven para que el autor de la web, cuando mire su código,
sepa qué es cada trozo de código.
Nuevas etiquetas de HTML5
<!DOCTYPE html>
Es un DOCTYPE mucho más simplificado que XHTML5 (cuyas reglas
siguen siendo usadas) y te permite usar todas las habilidades de HTML5 sin que
nada de lo que ya tienes programado deje de funcionar. Las principales
etiquetas HTML5 nuevas no tienen una representación especial en pantalla. Todas
se comportan como un <div> o un <span>. Pero cada una tiene un
significado semántico superior a un simple div o span.
<header>
Hacer cosas como <div id=”header”> es un poco estúpido
cuando el 99% de los proyectos web tienen una cabecera. <header> está
diseñada para reemplazar la necesidad de crear divs sin significado semántico.
<hgroup>
Muchos headers necesitan múltiples títulos, como un blog que tiene
un titulo y un tagline explicando el blog. <hgroup> permite colocar un
h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en
el sitio.
En el HTML actual, sólo puedes usar h1 una vez por sitio o el h1
pierde prioridad de SEO.
<nav>
Igual que <header>, <nav> está diseñado para que ahí
coloques la botonera de navegación principal. Puedes colocar cualquier etiqueta
dentro, aunque lo recomendado es usar listas <ul>.
<section>
Define un área de contenido única dentro del sitio. En un blog,
sería la zona donde están todos los posts. En un video de youtube, habría un
section para el video, uno para los datos del video, otro para la zona de
comentarios.
<article>
Define zonas únicas de contenido independiente. En el home de un
blog, cada post sería un article. En un post del blog, el post y cada uno de
sus comentarios sería un <article>.
<aside>
Cualquier contenido que no esté relacionado con el objetivo
primario de la página va en un aside. En un blog, obviamente el aside es la
barra lateral de información. En el home de un periódico, puede ser el área de
indicadores económicos.
<footer>
Este es obvio. Es el pie de página y todo lo que lo compone.
Editores HTML modo diseño WYSIWYG
En el mercado existen
multitud de editores de HTML WYSIWYG, es importante elegir un editor bueno
porque nuestros trabajos van a depender de sus resultados. Actualmente el rey
de los editores y el que os aconsejaríamos sin duda es el Dreamweaver, fabricado por Adobe.
Otras posibilidades son
editores como
·
Kompozer, una opción gratuita
·
Frontpage, aunque lo
desaconsejamos.
Editores de texto preparados para escribir código HTML
Las personas que después de
estas líneas han decidido aprender el lenguaje HTML también tienen herramientas
muy interesantes para aumentar su productividad sin dejar de escribir ellos
mismos el HTML que desean. Se trata de unos editores de texto, como cualquier
otro, que están preparados para escribir HTML y por lo tanto ofrecen multitud
de ayudas a los diseñadores:
Notepad++: gratuito
y código libre.
·
Home Site: que estaba bien, aunque
Adobe hace años que no lo actualiza.
·
UltraEdit: que es un editor
para programadores de los más populares.
·
Arachnophilia: que funciona en
todos los sistemas operativos.
!VIDEO DE APOYO DE HTML5!
para los que estan comenzando en desarrollo de paginas web
.png)
.jpg)
