1 - HTML, Conceptos Basicos

8/18/2019 1 - HTML, Conceptos Basicos

1/17

HTMLHistoria y Conceptos Básicos

Carlos Mol


2/17

Conceptos

● HTML (HyperText Markup Language): apareció por primera veen el lanzamiento de la Web. Su función es la gestión y organizcontenido. Así que en HTML puedes escribir lo que deseas mo

página: texto, enlaces, imágenes …● CSS (Cascading Style Sheets): el papel de CSS es gestionar la

de la página web (diseño, posicionamiento, colores, tamaño deEste lenguaje ha complementado el código HTML desde 1996


3/17

Historia

HTML 1: creada por Tim BernersLee en 1991.

HTML 2: apareció en 1994 y se terminó en 1996 con la aparición deesta es la versión que en realidad plantea las bases de las siguient

de HTML.

HTML 3: apareció en 1996, esta nueva versión de HTML, añade muposibilidades al lenguaje como tablas, applets, scripts, posicionamtexto alrededor de imágenes, etc.


4/17

Historia

HTML 4: (en concreto, es HTML 4.01). Apareció en 1998 y proponemarcos (que dividen una página web en varias partes), tablas más mejoras en las formas, etc. esta versión permite por primera vez ut

HTML 5: última versión. Mejoras en el contenido, nuevas caracterílos formularios, etc.


5/17

Historia

CSS 1: apareció en 1996. se establecen las bases que permiten mepresentación en páginas web, tales como colores, márgenes, fuent

CSS 2: apareció en 1999, completado por CSS 2.1, añade numerosa

Ahora se pueden utilizar técnicas de posicionamiento muy precisaspermiten ver los elementos en el lugar deseado en la página.

CSS 3: Última versión, agrega características muy esperadas, talesbordes redondeados, degradados, sombras, etc.


6/17

HTML: Estructura Básica


7/17

HTML: Etiquetas

: Dentro de las etiquetas definiremos el título de nuestra págdeclararemos el set de caracteres correspondiente, proveeremos ingeneral acerca del documento e incorporaremos los archivos exterestilos, códigos Javascript, etc.


8/17

HTML: Etiquetas

: Es parte principal de la organización de un documento HTcuerpo. El cuerpo representa la parte visible de todo documento y eespecificado entre etiquetas . Esta etiqueta no han cambiado en reversiones previas de HTML.


9/17

HTML: Etiquetas

: pueden ser incluidas para declarar información general sodocumento, pero esta información no es mostrada en la ventana denavegador, es solo importante para motores de búsqueda y disposnecesitan hacer una vista previa del documento u obtener un sumainformación que contiene.

El atributo name dentro de la etiqueta especifica su tipo y content dvalor, pero ninguno de estos valores es mostrado en pantalla.


10/17

HTML: Etiquetas

: pueden ser incluidas para declarar información general sodocumento, pero esta información no es mostrada en la ventana denavegador, es solo importante para motores de búsqueda y disposnecesitan hacer una vista previa del documento u obtener un sumainformación que contiene.

El atributo name dentro de la etiqueta especifica su tipo y content dvalor, pero ninguno de estos valores es mostrado en pantalla.


11/17

HTML: Etiquetas

●

●

●

●

●

●

●

● Otras


12/17

CSS

Cada navegador ordena los elementos por defecto de acuerdo a su(bloque) o inline (en línea). Esta clasificación está asociada con la que los elementos son mostrados en pantalla.

● Elementos block son posicionados uno sobre otro hacia abajopágina.

● Elementos inline son posicionados lado a lado, uno al lado del misma línea, sin ningún salto de línea a menos que ya no hayaespacio horizontal para ubicarlos.


13/17

CSS: Modelos de Caja

Para aprender cómo podemos crear nuestra propia organización delementos en pantalla, debemos primero entender cómo los navegprocesan el código HTML. Los navegadores consideran cada elemcomo una caja. Una página web es en realidad un grupo de cajas osiguiendo ciertas reglas. Estas reglas son establecidas por estilos por los navegadores o por los diseñadores usando CSS.


14/17

CSS: Estilos en línea

Este es el título del documento

Mi texto


15/17

CSS: Estilos embebidos

Este texto es el título del documento p { font-size: 20px }

Mi texto

El elemento permite a los desarrolladores agrupar estilos CSS dentro del documento


16/17

CSS: Archivos Externos

Este texto es el título del documento

estilos.css

{ p { font-size: 20px }

}


17/17

CSS: referencias

En el ejemplo anterior, el estilo para cambiar el tamaño de la letra rcada elemento

usando la palabra clave p.

Existen varios métodos para seleccionar cuáles elementos HTML s

afectados por las reglas CSS:

● referencia por la palabra clave del elemento● referencia por el atributo id● referencia por el atributo class

Documents

1 - HTML, Conceptos Basicos