1 - HTML, Conceptos Basicos

HTML
Historia y Conceptos Bsicos
Carlos Molina Beltrn
Conceptos
HTML (HyperText Markup Language): apareci por primera vez en 1991

en el lanzamiento de la Web. Su funcin es la gestin y organizacin del
contenido. As que en HTML puedes escribir lo que deseas mostrar en la
pgina: texto, enlaces, imgenes
CSS (Cascading Style Sheets): el papel de CSS es gestionar la apariencia
de la pgina web (diseo, posicionamiento, colores, tamao de texto ...).
Este lenguaje ha complementado el cdigo HTML desde 1996.
Historia
HTML 1: creada por Tim BernersLee en 1991.
HTML 2: apareci en 1994 y se termin en 1996 con la aparicin de HTML 3.0,
esta es la versin que en realidad plantea las bases de las siguientes versiones
de HTML.
HTML 3: apareci en 1996, esta nueva versin de HTML, aade muchas
posibilidades al lenguaje como tablas, applets, scripts, posicionamiento de
texto alrededor de imgenes, etc.
Historia
HTML 4: (en concreto, es HTML 4.01). Apareci en 1998 y propone el uso de
marcos (que dividen una pgina web en varias partes), tablas ms complejas,
mejoras en las formas, etc. esta versin permite por primera vez utilizar CSS.
HTML 5: ltima versin. Mejoras en el contenido, nuevas caractersticas para
los formularios, etc.
Historia
CSS 1: apareci en 1996. se establecen las bases que permiten mejoras de
presentacin en pginas web, tales como colores, mrgenes, fuentes, etc.
CSS 2: apareci en 1999, completado por CSS 2.1, aade numerosas opciones.
Ahora se pueden utilizar tcnicas de posicionamiento muy precisas que
permiten ver los elementos en el lugar deseado en la pgina.
CSS 3: ltima versin, agrega caractersticas muy esperadas, tales como
bordes redondeados, degradados, sombras, etc.
HTML: Estructura Bsica

<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
HTML: Etiquetas
<head>: Dentro de las etiquetas definiremos el ttulo de nuestra pgina web,
declararemos el set de caracteres correspondiente, proveeremos informacin
general acerca del documento e incorporaremos los archivos externos con
estilos, cdigos Javascript, etc.
HTML: Etiquetas
<body>: Es parte principal de la organizacin de un documento HTML es el
cuerpo. El cuerpo representa la parte visible de todo documento y es
especificado entre etiquetas . Esta etiqueta no han cambiado en relacin con
versiones previas de HTML.
HTML: Etiquetas
<meta>: pueden ser incluidas para declarar informacin general sobre el
documento, pero esta informacin no es mostrada en la ventana del
navegador, es solo importante para motores de bsqueda y dispositivos que
necesitan hacer una vista previa del documento u obtener un sumario de la
informacin que contiene.
El atributo name dentro de la etiqueta especifica su tipo y content declara su
valor, pero ninguno de estos valores es mostrado en pantalla.
HTML: Etiquetas
<meta>: pueden ser incluidas para declarar informacin general sobre el
documento, pero esta informacin no es mostrada en la ventana del
navegador, es solo importante para motores de bsqueda y dispositivos que
necesitan hacer una vista previa del documento u obtener un sumario de la
informacin que contiene.
El atributo name dentro de la etiqueta especifica su tipo y content declara su
valor, pero ninguno de estos valores es mostrado en pantalla.
HTML: Etiquetas
<header>
<footer>
<div>
<section>
<nav>
<table><thead><tbody><th><tr><td>
<ul><ol><li><b><span><h1><p>
Otras
CSS
Cada navegador ordena los elementos por defecto de acuerdo a su tipo: block
(bloque) o inline (en lnea). Esta clasificacin est asociada con la forma en
que los elementos son mostrados en pantalla.
Elementos block son posicionados uno sobre otro hacia abajo en la

pgina.
Elementos inline son posicionados lado a lado, uno al lado del otro en la
misma lnea, sin ningn salto de lnea a menos que ya no haya ms
espacio horizontal para ubicarlos.
CSS: Modelos de Caja

Para aprender cmo podemos crear nuestra propia organizacin de los
elementos en pantalla, debemos primero entender cmo los navegadores
procesan el cdigo HTML. Los navegadores consideran cada elemento HTML
como una caja. Una pgina web es en realidad un grupo de cajas ordenadas
siguiendo ciertas reglas. Estas reglas son establecidas por estilos provistos
por los navegadores o por los diseadores usando CSS.
CSS: Estilos en lnea

<!DOCTYPE html>
<html lang="es">
<head>
<title>Este es el ttulo del documento</title>
</head>
<body>
<p style=font-size: 20px>Mi texto</p>
</body>
</html>
CSS: Estilos embebidos

<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el ttulo del documento</title>
<style>
p { font-size: 20px }
</style>
</head>
<body>
<p>Mi texto</p>
</body>
</html>
El elemento <style> permite a los desarrolladores agrupar estilos CSS dentro del documento
CSS: Archivos Externos

<head>
<title>Este texto es el ttulo del documento</title>
<link rel="stylesheet" href="estilos.css">
</head>
estilos.css
{
p { font-size: 20px }
CSS: referencias
En el ejemplo anterior, el estilo para cambiar el tamao de la letra referenciaba
cada elemento <p> usando la palabra clave p.
Existen varios mtodos para seleccionar cules elementos HTML sern
afectados por las reglas CSS:
referencia por la palabra clave del elemento

referencia por el atributo id
referencia por el atributo class

1 - HTML, Conceptos Basicos

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

1 - HTML, Conceptos Basicos

Încărcat de

Drepturi de autor:

Formate disponibile

HTML

Historia y Conceptos Bsicos

Carlos Molina Beltrn

HTML (HyperText Markup Language): apareci por primera vez en 1991

HTML: Estructura Bsica

Elementos block son posicionados uno sobre otro hacia abajo en la

CSS: Modelos de Caja

CSS: Estilos en lnea

CSS: Estilos embebidos

CSS: Archivos Externos

referencia por la palabra clave del elemento

S-ar putea să vă placă și