Html

HTML
• HTML (Hyper Text Markup Language)
• Originado para compartir textos con científicos (1992 Tim
Berners-Lee)
• Describe semánticamente el texto
• Compuesto por una serie de comandos, marcas, o etiquetas,
también denominadas “Tags”
• Permiten definir la estructura de un documento web y
establecer los atributos del mismo.
• En resumen, es un lenguaje que permite crear páginas web y
para ello utiliza unos comandos o etiquetas que indican o
marcan qué se debe mostrar y de qué forma.

HTML
• El predecesor de HTML fue GML Lenguaje General de
Marcado creado por IBM
• Posteriormente mejorado por sus creadores dando el lenguaje
de marcado generalizado estándar, SGML
• Tim Berners-Lee y Anders Berglund, crearon una aplicación
simplificada del SGML se llamó HTML, lenguaje de marcas de
hipertexto, y se convirtió por su simplicidad en el servicio más
popular de la red: el servicio web
• HTML ha ido evolucionando desde la transferencia de
documentos de texto plano, a la presentación de multimedia
(imágenes, vídeo, Flash),estilos (CSS) y operatividad (CGI, ASP,
JSP, PHP,...) que no estaban presentes en un principio

• HTML fue víctima de la guerra de navegadores
• En 1996 se crea el consorcio W3C (www.w3.org)
desarrollando especificaciones y software de referencia.
• HTML5 está siendo desarrollado por Ian Hickson de Google
Inc. y David Hyatt de Apple junto con todas las personas que
participan en Web Hypertext Application Technology Working
Group.

HTML5
• HTML5 permite una mayor interacción entre nuestras páginas
web y contenido media (video, audio, entre otros) así como
una mayor facilidad a la hora de codificar un diseño básico.

HTML5
• Novedades
• Nuevas etiquetas semánticas
• Se dieron de baja algunas etiquetas
• Soporte nativo de multimedia (no requiere plugins)
• Sintaxis más simple
• Formularios mejorados

Nuevas etiquetas HTML5
• (Algunos no están soportados en todos los navegadores o
versiones de navegadores)

Nuevas input
• (Algunos no están soportados en todos los navegadores o
versiones de navegadores)

DOCTYPE
• El DOCTYPE debe ser especificado, y va en la parte de arriba
del documento HTML. Antes de la etiqueta de inicio <html>.
• Es el que indica que tipo de versión se está usando y que sepa
el navegador cómo presentarlo
• NO es casesensitive
<!DOCTYPE html> <!doctype html> <!DocType HTML>

html
• Representa la raiz del documento
• Debería tener siempre un atributo de lenguaje. Por ejemplo,
“en” para English, "fr" para French, “es” para Español
• Busque el idioma apropiado en http://
rishida.net/utils/subtags/index.php?list=4&submit=List
• <html> ... </html> contiene el elemento head sequido del
body
<html lang="es">
</html>

head
• El elemento head representa una colección de metadados.
• <head> ... </head> contiene el título, la información de la hoja
de estilos y scripts.
• El contenido del head NO SE DESPLIEGA EN EL NAVEGADOR
• <head> </head>

Encoding
• El encoding que va dentro del head permite transformar los
bits y bytes descargados de internet a caracteres
comprensibles
• En versiones anteriores se declaraba así:
<meta http-equiv=“Content-Type” content=“text/html” charset
=“utf-8”/>
• En html5
<meta charset=“utf-8”>

body
• Representa el contenido principal de la página
<body>
Aquí está el contenido visible
</body>

Cabeceras
<h1>h1 Título 1 </h1>
<h4>h4 Título 4</h4>

Párrafos
Párrafo 1
Párrafo 2
Párrafo 1
Párrafo 2

Línea
Párrafo 1
<hr>
Párrafo 2

Texto
 Texto en negrita
 Texto en cursiva
 Texto con subrayado
 Texto en superíndice
 Texto en subíndice
 Texto <s>tachado</s>

Texto
• 
• Size
• Color
• face

Listas con viñetas
<ul>
<li>elemento1
<li>elemento2
<li>elemento3
</ul>

Listas con números
<ol>
<li>elemento1
<li>elemento2
<li>elemento3
</ol>

Listas con definiciones
<dl>
<dt>Html</dt>
<dd> Hyper Text Markup Language
<dt>HTTP</dt>
<dd> Hyper Text Transfer Protocol
</dl>

Links
• Si el link llama a un archivo que se encuentra en la misma
carpeta
• Si el link llama a un archivo que está dentro de una carpeta
• Si el link llama a un archivo que está fuera de una carpeta
• Si el link llama a una página web de otro web site

Imágenes
• El texto alternativo es aquella frase que aparecerá en la web
cuando por el motivo que sea el navegador no consigue
mostrar la imagen.
• Search de Google
• hspace (pixels) y vspace (pixels)
• Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es
recomendado.
• Establece la cantidad de espacio en blanco (en píxeles) que será insertado como
márgenes superior e inferior de la imagen.
• <img src="img/foto.png" vspace="10" />

tablas
• align: especifica la alineación horizontal del contenido de toda
la tabla, de una fila o de una sola celda. Por ejemplo, left,
center o right.
• valign: especifica la alineación vertical del contenido de una
celda. Por ejemplo, top, middle o bottom.

Etiquetas y atributos de
Tablas

• Realizar la siguiente tabla.
• Observe que dentro de la tabla hay otras tablas con fondo
amarillo
http://www.w3schools.com/tags/att_table_frame.asp

Tratamiento del Color
http://html-color-codes.info/codigos-de-colores-hexadecimales/

• http://site.ebrary.com/lib/unemisp/Doc?
id=10156644&ppg=75Copyright © 2007. Ediciones Díaz de
Santos. All rights reserved.
• http://es.html.net/tutorials/html/
• http://www.trazos-web.com/2011/02/01/tips-y-recursos-
para-empezar-con-html5/
• http://www.w3.org/wiki/HTML/Training
• http://html5test.com/
• http://www.w3schools.com/
• http://www.w3.org/wiki/HTML/Training/Basic_content
• http://www.htmlpoint.com/css/css_04.htm
• http://es.html.net/tutorials/css/

Html

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (15)

En vedette

En vedette (20)

Similaire à Html

Similaire à Html (20)

Html