Tutorial de html

Bueno chicos como ya estoy un poco cansado de ver como se lía la peña edito este post que pretende ser un complemento al curso de Jorge;

Bien, la mayoría de los editores de html nos dan un documento html en blanco por defecto;

Pero como yo soy más chulo que un ocho os voy a complicar la vida que realmente es como se aprende y por lo tanto usaremos el bl9oc de notas de windows que no es un editor html propiamente dicho pero que nos ira genial para saber el porque de las cosas.

Bien abrimos el bloc y nos aparece totalmente en blanco sin etiquetas ni nada; pues vamos rellenarlo.

Como de momento vamos a trabajar e local olvidaros de lo que sabéis, esto es otra dimensión.

¿Qué es HTML?

HTML es un lenguaje para describir páginas web.

HTML significa H Yper T ext M arkup L enguaje
HTML no es un lenguaje de programación, es un lenguaje de marcas o marcado.
Un lenguaje de marcas es un conjunto de etiquetas de marcado
HTML utiliza etiquetas de formato para describir las páginas web

Etiquetas HTML

etiquetas HTML son palabras clave rodeado de paréntesis angulares como <html>
etiquetas HTML normalmente vienen en pares como <b> y </ b>
La primera etiqueta de un par es la etiqueta de inicio, la segunda etiqueta es la etiqueta de cierre
De inicio y fin también se les llama etiquetas de apertura y cierre de las etiquetas

Documentos HTML = Páginas Web

El propósito de un navegador web (como Internet Explorer , Firefox, opera y google chome) es leer los documentos HTML y mostrarlos como páginas web. El navegador no muestra las etiquetas HTML, pero utiliza las etiquetas para interpretar el contenido de la página.



Crear html de 0

Bien tenemos abierto nuestro bloc de notas hay 4 etiquetas que tienen que estar grabadas a fuego en nuestra mente :


<html><!-- etiqueta de apertura -->

<body><!inicio de body -->

</body><!-- fin de body-->

</html><!-- etiqueta de cierre -->

Estas etiquetas que hay más arriba definirían un documento html estándar.

Como ya os he dicho esto es otro mundo. con estas 4 etiquetas se puede empezar a editar un documento html.(titulo; encabezados, párrafos y largo etc... )
cosas que tenemos que saber pues he visto que hay mucha gente que no tiene definido el DOCTYPE simplemente por que creen que por que su editor no se lo facilita ya esta bien; pues no la validación de nuestro documento html es una parte importante que tenemos que tener en cuenta y que nos ahorrara muchos dolores de cabeza en el futuro.

Validación y/o Elementos DTD válidos

Doctypes disponible :

HTML 4.01 Strict

Esta DTD contiene todos los elementos y atributos HTML, pero no incluye elementos de presentación o en desuso (como fuente). Marcos no están permitidos.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

Esta DTD contiene todos los elementos HTML y atributos, incluyendo elementos de presentación y obsoletos (como fuente). Marcos no están permitidos.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

Este DTD es igual a HTML 4.01 Transitional, pero permite la utilización de los contenidos de marcos.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

Esta DTD contiene todos los elementos y atributos HTML, pero no incluye elementos de presentación o en desuso (como fuente). Marcos no están permitidos. El margen de beneficio también se debe escribir como XML bien formado.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

Esta DTD contiene todos los elementos HTML y atributos, incluyendo elementos de presentación y obsoletos (como fuente). Marcos no están permitidos. El margen de beneficio también se debe escribir como XML bien formado.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

Este DTD es igual a XHTML 1.0 Transitional, pero permite la utilización de los contenidos de marcos.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

Este DTD es igual a XHTML 1.0 Strict, pero le permite añadir módulos (por ejemplo, para proporcionar apoyo de rubí para los idiomas de Asia Oriental).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Vale una vez sabemos todo esto elegimos uno; el que más se adecue a nuestras necesidades y continuamos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd" >

<html>

<head>
   
</head>

<body>

    <!-- insertar contenido -->

</body>

</html>

Bueno como viene siendo costumbre la gente que empieza pasa olímpicamente de los comentarios por pereza normalmente pero como todo en esta vida tiene su función los comentario son una herramienta muy útil para saber que estamos haciendo tanto hoy como dentro de un año.

Bien es este tutorial abundaran los comentarios dado que pretendo que si los veis lo por el hecho de verlos cogeréis la costumbre y los pondréis en vuestros códigos por que la verdad es que después de ver tantas páginas web de compañeros es casi una suplica por que hay códigos que no hay por donde saber de donde viene ni ha donde va nada por que el kaos reina en general.
Vale después de lo dicho empezamos a trastear con las etiquetas,ok?

HTML <title> etiqueta

Definición y uso

La etiqueta <title> define el título del documento.

El elemento de título se requiere en todos los documentos HTML / XHTML.

El elemento de título:

- define un título en la barra de herramientas del navegador
- proporciona un título para la página cuando se agrega a los favoritos
- muestra un título para la página en los motores de búsqueda

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd" >

<html>

<head>

    <title>TUTORAL DE HTML</title>

</head>

<body>

    <!-- insertar contenido -->

</body>

</html>
Vale más cosas:

HTML <html> etiqueta

Definición y uso

La etiqueta <html> indica al navegador que se trata de un documento HTML.

El elemento HTML es el elemento más externo en los documentos HTML y XHTML. El elemento HTML es también conocido como el elemento raíz.

Diferencias entre HTML y XHTML

El atributo xmlns se requiere en XHTML, pero no es válida en HTML.

Sin embargo, el validador HTML en w3.org no se queja cuando el atributo xmlns falta en un documento XHTML. Esto es porque el espacio de nombres "xmlns = http://www.w3.org/1999/xhtml" es la opción predeterminada, y se agregó a la etiqueta <html> incluso si no se incluye.
HTML <body> etiqueta

Definición y uso


El elemento del cuerpo que define al cuerpo del documento.

El elemento del cuerpo contiene todo el contenido de un documento HTML, tales como texto, hipervínculos, imágenes, tablas, listas, etc

Atributos de eventos

La etiqueta <body> admite los atributos de evento:

OnClick : Secuencia de comandos que se ejecutan en un clic del ratón

ondblclick : Secuencia de comandos que se ejecutan en un doble clic del mouse

onmousedown : Secuencia de comandos que se ejecutan cuando se pulsa el botón del ratón

onmousemove : Secuencia de comandos que se ejecutan cuando se mueve el puntero del ratón

onmouseout : Script para ejecutarse cuando el cursor del ratón se mueve fuera de un elemento

onmouseover : Secuencia de comandos que se ejecutan cuando se mueve el puntero del ratón sobre un elemento

onkeydown : Secuencia de comandos que se ejecutan cuando se pulsa una tecla


onkeyup : Secuencia de comandos que se ejecutan cuando se suelta una tecla
Amigo lantiga, gracias por el tuto, solo 1 comentario al respecto... Recuerde el órden del foro,.. tutoriales ... en la sección TUTORIALES. Saludos.

pd: lo muevo allá.