DW HTML CSS Presentacion

HTML, HTTP,
CSS
Desarrollo web
UMG
Lenguaje de Marcado
Es un tipo de lenguaje que usa etiquetas para definir la estructura y el
contenido de un documento. Estas etiquetas son reconocidas por un
programa para su procesamiento.
HTML (HiperText Markup Language)
Es un lenguaje de marcado para crear páginas y aplicaciones web. Es un
estándar a cargo del WWC (World Wide Consortium) quien administra y
promueve su uso.
Una página web creada con HTML es interpretada por un navegador web
antes de que sea visualizada por el usuario.
HTML (HiperText Markup Language)
Una página web (documento html) es esencialmente un documento que
contiene texto y unas etiquetas que indican al navegador cómo debe
mostrar el texto.
Por otro lado, existe una estructura básica que compone un documento html
que se denomina, elemento HTML el está compuesto por una etiqueta de
apertura, contenido y una etiqueta de cierre.
Estructura Básica de un Documento HTML
Etiquetas
Etiqueta Descripción Atributos Importantes
<html> Elemento raíz del documento html lang
<head> Información general acerca del documento
<body> Contenido
<title> Título
<a> Enlace a páginas o recursos. href, target [_blank]
<ol> Lista ordenada
<ul> Lista no ordenada
<li> Elemento de Lista

Etiquetas
Etiqueta Descripción Atributos Importantes
<h1> a <h6> Título
<p> Párrafo
<br> Salto de línea
<hr> Separación de contenido
<img> Imagen src

CSS
Cascading Style Sheets
CSS
Es un lenguaje de estilos para definir la presentación de un documento escrito
en un lenguaje de marcado, por ejemplo html.
CSS nos permite especificar colores, tamaños, fuentes, fondos, márgenes,

rellenos, entre otras muchas opciones.
Está diseñado para separar la presentación del contenido.

CSS
Para incorporar estilos a un documento html se puede emplear tres técnicas
distintas:
● Estilos en línea
● Estilos embebidos
● Archivo Externo
CSS
Para aplicar un estilo en particular a un elemento html se emplean
selectores. El tipo de selector a utilizar depende del alcance que buscamos
para un estilo en particular:
1. Palabra clave
2. Por atributo id
3. Por atributo class
CSS
Selector Descripción
etiqueta Selecciona una palabra clave
#id Selecciona un elemento con el id
.clase Selecciona un elemento según la clase

CSS
Para aplicar un estilo a un elemento html se requiere aplicar una regla, que a
su vez está conformada por selectores, propiedades y valores.
Una propiedad y un valor se denominan en conjunto declaración.

CSS
La declaración indica que se debe hacer y el selector indica a qué se le debe

aplicar.
Propiedades
Propiedades Descripción Comentarios
font-family Define una familia tipográfica. Ejemplo times, Se depende de las fuentes
serif, calibri, “comic sans”, verdana instaladas. Se recomienda
especificar al menos dos o tres
font-size Define el tamaño de la fuente en diferentes

unidades. P.e. pixels, ems, %.
color Define el color de la fuente, en hexadecimal,

nombre o en RGB
font-style Define el estilo de la fuente. P. e. Italica, oblicua.
font-weight Establece el grosor de la letra.

Propiedades
width Define el ancho de un elemento Definido en px, % o auto
height Define el alto de un elemento Definido en px, % o auto

Ejercicios
Modelo de Caja (Box Model)
El Modelo de Caja ( Box Model) de CSS considera cada elemento html como
una caja.
Cada caja tiene los siguientes componentes:
1. Contenido
2. Relleno
3. Borde
4. Margen
Propiedades
padding Define el relleno de un elemento. Puede definirse en una sola Definido en px,
declaración o por separado con las propiedades padding-top, cm, % o inherit
padding-right, padding-bottom y padding-left.
border Define el borde de un elemento considerando ancho, estilo y color Definido en px,
empleando las propiedades border-style, border-width y cm, % o inherit
border-color. También puede emplearse una sola declaración con
border: width style color
Modelo de Caja (Box Model)
Cuando se establece un valor para la propiedad width (ancho) y height (alto)
sólo se establece para el contenido. Para calcular el ancho y alto totales debe
sumarse el relleno (padding), borde (border) y el margen (margin).
Específicamente:
Ancho Total: width+left padding+right padding+left border+right border+left

margin+right margin.
Alto Total: height+top padding+bottom padding+top border+bottom

border+top margin+bottom margin.
Elementos Block e Inline
Considerando que cada elemento html contiene una caja a su alrededor
(según el modelo de caja), los navegadores deben organizar estas cajas para
mostrarlas.
Para lograr esto, los elementos se clasifican en dos tipos:
● Block (bloque)
● Inline (en línea)
Los elementos tipo Block se colocan

uno debajo del otro, mientras que los
elementos inline se colocan uno al lado
del otro.
Ejemplos de elementos inline: <a>,
<span>, <em>, <img>, <button>,
<input>,<label>, <select>,<textarea>
Ejemplos de elementos block: <p>, <ol>,<ul>,

<div>, <fieldset>,<form>,<table>, <hr>,
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
Para cambiar este comportamiento de los elementos
block e inline es posible utilizar las propiedades
display y float.
Javascript CSS
.js .css
HTML
.html
Envia
Navegador
Render
Usuario
Maquetación
Maquetación
“Proceso que consiste en distribuir los

elementos html para cumplir con un
diseño establecido”
Maquetación
Para maquetar es posible utilizar algunos de los
siguientes enfoques:
1. Tablas, empleando las etiquetas <table>, <th>,

<tr> y <td>
2. Capas, empleando las etiquetas <div>
3. Emplear las etiquetas recomendadas por el
estándar HTML5 que son <main>, <nav>,
<section>, <aside>, <article>, <header>,
<footer>
No se recomienda usar
tablas para realizar
maquetación
Etiquetas HTML5 para maquetación
<header> Este elemento establece la cabecera de un contenido definido por
una sección o de una página.
<footer> Este elemento establece el pie de un contenido definido por una

sección o de una página.
<nav> Define una división que contiene ayuda para la navegación, como el
menú principal de la página o bloques de enlaces necesarios para navegar en
el sitio web.
<main> Este elemento define una división que contiene el contenido principal
del documento (el contenido que representa el tema central de la página)
Etiquetas HTML5 para maquetación
<section> Define una sección genérica. Se usa frecuentemente para separar
contenido temático, o para generar columnas o bloques que ayudan a
organizar el contenido principal.
<aside> Define una división que contiene información relacionada con el

contenido principal pero que no es parte del mismo, como referencias a
artículos o enlaces que apuntan a publicaciones anteriores.
<article> Representa un artículo independiente, como un mensaje de foro, el

artículo de una revista, una entrada de un blog, un comentario, etc.
Cada uno de los elementos de maquetación
de HTML5 puede verse como una capa
tradicional que tiene contenido específico
¿Por qué se crearon elementos
nuevos parar maquetación?
Estos elementos se han creado para
ofrecer información adicional al
navegador, y ayudar a cada nuevo
programa y dispositivo a identificar las
partes relevantes del documento.
HTML5 y CSS3
HTML5
● HTML5 es la quinta versión del lenguaje
HTML
● Publicada en 2014
● Incluye HTML4 (versión anterior) y
XHTML
● Soporte multimedia
● Especifica APIs para Javascript (ej.
Canvas, Web Storage, Geolicalization)
HTML5
● Agrega características (etiquetas) nuevas a HTML4,
ejemplos:
○ <audio>
○ <video>
○ <header>
○ <footer>
○ <aside>
○ <nav>
CSS3
● Se presentaron primeras propuestas del
estándar en 1999
● Agrupa sus funcionalidades en módulos,
por ejemplo:
○ css3-background
○ css3-color
○ css3-selectors
● Agrega nuevas funcionalidades respecto
a la versión anterior, entre ellas
animaciones y transformaciones.
Validación de Marcado
Validación de Marcado
Es el proceso de verificación de un documento web en relación a
la gramática que afirma estar utilizando.
Enlace:
https://validator.w3.org/

DW HTML CSS Presentacion

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

DW HTML CSS Presentacion

Cargado por

Copyright:

Formatos disponibles

HTML, HTTP,

<html> Elemento raíz del documento html lang

<head> Información general acerca del documento

<a> Enlace a páginas o recursos. href, target [_blank]

<ol> Lista ordenada

<ul> Lista no ordenada

<li> Elemento de Lista

<h1> a <h6> Título

<br> Salto de línea

<hr> Separación de contenido

<img> Imagen src

CSS nos permite especiﬁcar colores, tamaños, fuentes, fondos, márgenes,

Está diseñado para separar la presentación del contenido.

etiqueta Selecciona una palabra clave

#id Selecciona un elemento con el id

.clase Selecciona un elemento según la clase

Una propiedad y un valor se denominan en conjunto declaración.

La declaración indica que se debe hacer y el selector indica a qué se le debe

font-size Define el tamaño de la fuente en diferentes

color Define el color de la fuente, en hexadecimal,

font-style Define el estilo de la fuente. P. e. Italica, oblicua.

font-weight Establece el grosor de la letra.

width Define el ancho de un elemento Definido en px, % o auto

height Define el alto de un elemento Definido en px, % o auto

Cada caja tiene los siguientes componentes:

Ancho Total: width+left padding+right padding+left border+right border+left

Alto Total: height+top padding+bottom padding+top border+bottom

Para lograr esto, los elementos se clasiﬁcan en dos tipos:

Los elementos tipo Block se colocan

Ejemplos de elementos block: <p>, <ol>,<ul>,

“Proceso que consiste en distribuir los

1. Tablas, empleando las etiquetas <table>, <th>,

<footer> Este elemento establece el pie de un contenido deﬁnido por una

<aside> Deﬁne una división que contiene información relacionada con el

<article> Representa un artículo independiente, como un mensaje de foro, el

También podría gustarte