Qué Es HTML y para Qué Sirve

QUÉ ES HTML Y PARA QUÉ SIRVE
Diariamente, obtenemos muchos tipos información del exterior: vemos el telediario,

leemos artículos de revistas, ojeamos un catálogo de algo que nos interesa comprar.
Estos mensajes presentan una estructura gracias a la cual nos es fácil interpretar
la información. Por ejemplo, un catágolo estará dividido en secciones y por eso
podremos ir rápidamente a la que nos interesa. Del mismo modo, el titular y subtitular
de una noticia no solo identifican el tema acerca del cual vamos a obtener información
si continuamos leyendo el periódico, sino que además nos indican qué es lo mas
importante dentro del contenido. En la web, esta estructura es igualmente necesaria
para establecer una comunicación correcta con el usuario y el navegador. El
lenguaje por el cual se consigue es HTML.
HTML es un lenguage de marcado que se utiliza para describir y categorizar la

estructura y el contenido las páginas web. La sintaxis de este lenguaje consiste
mayoritariamente en una serie de elementos con las que "etiquetamos" el contenido
que queremos mostrarle al mundo a través de internet.
Estos elemenos constan de una etiqueta de apertura (por ejemplo: <p>) y otra de
cierre (por ejemplo: </p>), formando así una especie de contenedor que nos da
información acerca del tipo de contenido hay dentro de estas etiquetas.
Échale un vistazo a este código HTML, no te preocupes si todavía no lo entiendes,
más adelante profundizaremos en todo esto:
ESCRIBIR Y EDITAR CÓDIGO HTML
Es posible editar y escribir código html en numerosos programas y en todos los

sistemas operativos. Asegúrate al guardar tu archivo de hacerlo con la extensión
".html" o ".htm". Por ejemplo: mipaginaweb.html
En PC: El programa más básico es el bloc de notas o Notepad, aunque también tiene
opciones muy interesantes como Visual Studio o Notepad++ que son gratuitos. Solo
basta con abrir una cuenta de Microsoft Outlook y te proporcionarán una clave poder
utilizarlo.
En MAC: En este caso el programa por defecto es el TextEdit. Aunque también tiene
opciones más avanzadas como el TextWrangler que puedes descargar también sin
ningún coste.
Existen otros editores, gratuitos como el Sublime Text, y de pago, como el

Dreamweaver (la herramienta de desarrollo web de Adobe).
Es cuestión de gustos y también la complejidad de los proyectos a los que te
enfrentes.
Ahora que ya sabes para que sirve este lenguage y con qué herramientas puedes
trabajar con él, comienza por aprender los fundamentos básicos del HTML.
DOCTYPE, ATRIBUTOS, HTML, BODY, HEAD Y TITLE

DOYCTYPE
La declaración <!DOCTYPE> es el primer elemento que debe aparecer en un

documento html ya que informa al navegador con el que se abre la página web acerca
del lenguaje y la versión del documento.
En HTML5, la declaración DOCTYPE es muy simple:
<!DOCTYPE html>
ETIQUETAS BÁSICAS DE HTML
Etiqueta <html></html>.
Es la etiqueta que se pone inmediatamente después de la declaración
DOCTYPE, engloba e indica todo aquello dentro del documento que es
lenguage html
Etiqueta <head></head>.
Se situa a la cabecera del documento y debe contener obligatoriamente el
título de la página (la etiqueta <title></title>). También, puede contener
otros elementos que no se visualizarán en la página pero que sí aportarán
información al navegador o buscador acerca de ella. Entre otros, los elementos
que pueden aparecer dentro del head son la etiqueta <style></style>, con
reglas css internas y la etiqueta <link/> con la cual se enlazan las hojas de
estilo externas, las tipografías u otros recursos que se encuentran online, etc.
El head también puede contener metadatos (<meta/>) que suelen utilizarse
para especificar la descripción de la página, las palabras clave, el autor del
documento, la última modificación, etc.
Etiqueta <title></title>.
Es el título del documento html y debe especificarse en cada una de las
páginas que componen nuestro sitio web. No debe confundirse con el nombre
de dominio ni tampóco con el nombre que le hemos dado al documento al
guardarlo, aunque muchas veces puede ser el mismo. El contenido de esta
etiqueta aparecerá en la parte superior del navegador o bien en las pestañas
del navegador en el caso de que soporte este tipo de navegación.
Aprender a maquetar correctamente requiere tener una buena base de conocimiento.

Aprende todas las etiquetas de HTML y HTML5 con un curso a tu medida en el
que tendrás tutor personal para resolver tus dudas.
ATRIBUTOS
Como ya sabemos, un archivo html es un documento de texto en el que se utilizan

elementos denominados etiquetas (normalmente formados por una etiqueta de
apertura y una de cierre). Cada elemento HTML le dice al navegador algo acerca de la
información contenida entre la etiqueta de apertura y la etiqueta de cierre.
Además, las etiquetas pueden llevar atributos que aportan información extra acerca
de lo que contienen .Los atributos se componen de un nombre (name="") que indica
qué tipo de información queremos indicar sobre el contenido de la etiqueta, y un
value que proporciona los parámetros específicos de dicha información.
name="value"
Hay algunos atributos que son obligatorios, como por ejemplo, el atributo href=. Se
utiliza en la etiqueta de enlace <a> </a> para comunicarle al navegador cuál es la
ruta a la que debe ir cuando el usuario haga click en él. A cada etiqueta de html se le
pueden asociar determinados atributos, aunque también hay algunos atributos
comunes que pueden utilizarse con todos los elementos.
<a href=http://www.mipaginaweb.com>Pincha aquí para ver mi página web

</a>
2
RUTAS Y ENLACES EN HTML5
Al igual que en las anteriores versiones de HTML, los enlaces o links se crean
utilizando la etiqueta <a> </a> con el atributo href. El valor de esta atributo será la
ruta a la que queremos que lleve el enlace cuando el usuario pinche en él.
Las rutas, pueden ser de varios tipos:
Rutas absolutas: Cuando deseamos enlazar nuestra página con otros sitios web
debemos poner como valor del href la dirección web completa del la web a la que
deseamos que se dirija el enlace, conocida como URL absoluta.
<a href="http://www.mipaginaweb.com"> Puedes visitar la página web de

campusMVP </a>
Es posible que queramos que al realizar esta acción no se abandone nuestra página
web sino que se abra en una ventana nueva, para que así, el usuario pueda volver a
nuestra página y terminar de leerla, ver algún otro producto que le pueda interesar,
etc. Para ello utilizaremos el atributo target con el valor _blank que debemos
colocar en la etiqueta de apertura del enlace
<a href="http://www.campusmvp.es/" target="_blank">Visita la web de
campusMVP </a>
Rutas relativas: Son aquellas que utilizamos cuando queremos enlazar páginas
dentro del mismo sitio web. En este caso, el valor del href será una forma de
comunicarle al navegador dónde están ubicadas la página que queremos enlazar. En
las rutas relativas no es necesario repetir el nombre del domino, sino que basta con
indicar la ubicación del archivo (si está metido en una carpeta específica o no) y el
nombre del documento HTML.
Para indicar que un archivo se encuentra en un nivel inferior utilizamos la barra /. Si

por el contrario queremos acceder a carpetas que se encuentran a un nivel superior
utilizamos dos puntos y la barra ../
Si la página está al mismo nivel
<a href=cursos.html> Cursos </a>
Si la página está a un nivel inferior
<a href=Cursos/desarrolloweb.html> Curso desarrollo web </a>
Si la página está a un nivel superior
<a href=../cursos.html> Cursos </a>
Si la página está dos niveles por encima
<a href=../../cursos.html> Cursos </a>

Si ya tienes has comprendido cómo funciona la estructura básica de HTML, continúa
aprendiendo cómo se etiqueta el contenido en HTML.
Si tienes dudas y necesitas afianzar estos conocimientos desde cero, échale un

vistazo a este curso de HTML5 y CSS3.
DISPOSICIÓN DE ELEMENTOS EN HTML Y SU

EVOLUCIÓN A HTML5
Además de estructurar y marcar el texto, HTML pone a nuestra disposición una serie
de etiquetas que nos sirven para agrupar elementos relacionados entre sí dentro de
una misma página web. Usando estas etiquetas, crearemos partes diferenciadas que
nos permitirán organizar la disposición visual de nuestra web para que ésta sea lo más
fácil posible de utilizar por el usuario (Esto es lo que se conoce como usabilidad).
Agrupar elementos entre sí, es también muy importante para poder manipularlos
después por CSS de una forma más sencilla y eficaz. Empieza a adquirir una
destreza profesional desde cero con este curso tutorizado de HTML5 y CSS3.
LAYOUT CON HTML TRADICIONAL: LA ETIQUETA <DIV></DIV>
En versiones anteriores a HTML5, el sistema utilizado por los desarrolladores web

para estructurar la disposición de las páginas consistía el uso de la etiqueta divisor
(<div> </div>) junto con los atributos id y class. Esta etiqueta se sigue usando,
combinada con las nuevas aportaciones de HTML5 que se explican más abajo.
A efectos de comunicación con el navegador la etiqueta <div> </div> no tiene

ningún contenido semántico. El valor de los atributos id y class solian definir el rol
que estas etiquetas ocupaban en la página.
El atributo id sirve para identificar como único cualquier elemento html de la página
para diferenciarlo de las demás. En un documento html no puede haber dos elementos
html que lleven el mismo id. Como podrás ver en el apartado de estilos css, otorgar un
identificador único a un elemento permite darle una apariencia diferenciada del resto.
Por elemplo, si queremos que el color de fondo de la cabecera de nuestra página web
sea de un color diferente al resto de las partes, o tenga otra tipografía o alineación del
texto lo podremos manipular fácilmente con un id.
El atributo class también puede ser otorgado a cualquier elemento html de la página.
Sin embargo, a diferencia del atributo id, las clases pueden ser reutilizadas en varios
elementos de una misma página. Así, si quiero diferenciar la apariencia de varios
párrafos respecto a los demás, les atribuiré las misma clase.
LAYOUT CON LAS NUEVAS ETIQUETAS DE HTML5
El nuevo etiquetado de HTML5 permite, de la misma manera que los <div> </div>,
agrupar elementos relacionados dentro de una web. Sin embargo, a diferencia del html
tradicional, las nuevas etiquetas sí tienen contenido semántico para el navegador ya
que definen la esencia del tipo de información que contienen:
Etiqueta header <header></header>.

Esta etiqueta engloba el contenido que podríamos denominar de
"presentación". Dentro de una página web corporativa, contendría el logotipo y
la navegación principal, por ejemplo. También puede utilizarse para englobar el
titular y subtitular de cada uno de los artículos de una página, actuando como
"cabecera" de los mismos.
Etiqueta footer <footer></footer>.
Esta etiqueta engloba el contenido que suele situarse al final de cada página,
como el copyright, la política de privacidad o quizás una repetición de la
navegación principal. Al igual que la etiqueta <header></header> el footer
puede utilizarse al final de las secciones o artículos, donde podría englobar
contenidos como links a las redes sociales, comentarios, etc.
Etiqueta navigation <nav></nav>.
El uso de la etiqueta nav sirve para diferenciar los listados de elementos que
aparecen dentro del contenido de una web de aquellos que corresponden a
una navegación principal y suelen repetirse en cada una de las páginas que
conforman el un sitio web.
Etiqueta article <article></article>.
Sirve para englobar todo aquella información que actúe como unidad de
contenido individual. Pueden llevar su propios encabezados cuya jerarquía es
independiente a la clasificación de contenidos global de la página. Así, si en
una web hemos considerado que el nombre de la empresa sería el titular
principal o <h1></h1> y el slogan el subtitular o <h2></h2>, podemos repetir
esta jerarquía con el titulo de lo contenido en la etiqueta
<article></article>. Los artículos pueden ser noticias, posts de un blog,
trabajos realizados por una empresa etc.
Etiqueta section <section></section>.
Sirve para separar porciones significativas de contenido dentro de una página.
Por ejemplo, si hemos maquetado nuestra página a dos columnas podemos
diferenciarlas con esta etiqueta.
Etiqueta aside <aside></aside>.
El objetivo de esta etiqueta es englobar aquel contenido que es
complementario a la información porporcionada pero no es esencial para su
entendimiento. Esta etiqueta será relativa a aquella que la contenga. Es decir,
anidada dentro de un artículo contendrá información complementaria al mismo.
En cambio, anidada dentro del marco principal de la página albergará
información extra acerca de la temática de web como por ejemplo tweets del
autor de un blog, comentarios de los clientes acerca de un servicio, etc.
2
INTRODUCIR IMÁGENES CON HTML Y HTML5
Uno de los aspectos esenciales a la hora de maquetar una página web es el buen uso
de las imágenes ya que o bien aportarán información relevante a nuestra
comunicación con los usuarios, o bien mejorarán la estética de la interfaz. Es
importante saber diferenciar qué imágenes forman parte del contenido, cuáles
responden a una cuestión estética. De su correcta optimización dependerá, en gran
medida, el tiempo de carga que tendrá que esperar el usuario antes de poder
visualizar la página correctamente en su navegador.
Etiqueta <img/> . Es un elemento vacío (no necesita etiqueta de cierre) que nos
permite añadir imágenes en HTML. Debe llevar tres atributos:
Atributo src .
El valor de este atributo le dice al navegador dónde puede encontrar la imagen.
Suele ser una ruta relativa que lleva a una carpeta que contiene las imágenes
de nuestra web.
Atributo alt .
Es un atributo importante por cuestiones de accesibilidad Contiene una breve
descripción que permite saber a las personas que no pueden verla qué es lo
que muestra dicha imagen.
Atributo title .
Porporciona información complementaria acerca de la imagen que aparecerá
en un pequeño recuadro cuando el usuario pase el cursor por encima.
<img src=images/bicicleta_energy3.jpg alt="Bicicleta rosa de chica
con cesta marca Energy" title="Energy es una marca

especializada
en hacer bicicletas de paseo caracterizadas por su
comodidad y resitencia" />
Etiquetas <figure></figure> y <figcaption></figcaption>. HTML5 introduce una

nueva etiqueta <figure></figure> para contener imágenes con su pie de foto
<figcaption></figcaption>. Esta, puede llevar dentro uno o más elementos
</img> que compartan el mísmo pie de foto.
Además de imágenes la etiqueta <figure></figure> se utiliza para marcar videos,

diagramas, gráficos, ejemplos de código....HTML5, ofrece muchas posibilidades y
avances para introducir archivos multimedia a las páginas web. De hecho existen
etiquetas específicas para ello, como <audio></audio>, <video></video> y las más
novedosa <canvas></canvas>, para realizar gráficos 2d y 3d y animaciones.
<figure>
<img src=images/bicicleta_energy3.jpg alt="Bicicleta rosa de chica

con
cesta marca Energy" title="Energy es una marca especializada en
hacer bicicletas de paseo caracterizadas por su comodidad y

resistencia" />
<figcaption>
Bicicleta de chica con cesta marca Energy.
Precio: 200€
Disponible también en azul, morado, verde y rojo.
</figcaption>
</figure>
Con este curso de HTML5 y CSS3 aprenderás a optimizar imágenes, a escoger

siempre el formato apropiado y a crear efectos con ellas.
Aparte del correcto etiquetado semántico y estructural de la página web, HTML5

ofrece herramientas más sofisticadas que permiten añadir a nuestros proyectos
funcionalidades muy potentes. ¿Quieres saber más?
APIS DE HTML5
Sin lugar a dudas, lo más potente que nos ha traido el HTML5, son las APIs. Una API
(Application Programming Interface) es un conjunto de estándares, funciones y
procedimientos de programación que permiten diseñar productos basados en el
servicio que proporciona. Es decir, una serie recursos de programación que permiten a
los profesionales usar ciertas funcionalidades sin tener que desarrollar el código desde
cero.
Las APIs de HTML5 combinan JavaScript y pueden hacer cosas verdaderamente

sorprendentes. Por desgracia, no todos los navegadores las soportan todavía aunque
existen una serie de Plugins o Pollyfills para hacer que funcionen. A continuación
tienes un resúmen de las APIs que podrían resultarte más interesantes:
La API Drag and Drop permite hacer los elementos de la web "arrastrables"
proporcionando así una experiecia de usuario muy enriquecida. Por ejemplo, en una
tienda online, permitiría al usuario ordenar sus productos en la pantalla tal y como el
quiere tan solo arrastrándolos y soltándolos ya sea con el ratón con el dedo en una
pantalla táctil.
Si tenemos problemas a la hora de implementar esta API podemos utilizar en su lugar

jQuery UI, en concreto el método draggable. Puedes ver un ejemplo en la página
oficial de Jquery UI.
Otra de las APIs más populares es la geolocalización . Permite obtener la ubicación

geográfica del usuario que está visitando nuestra web, por suspuesto con su
autorización.
Otra aplicación más avanzada es WebSocket que permite crear un canal de

comunicación bidireccional con el usuario en tiempo real.
Con la API RequestAnimationFrame podrás crear animaciones más eficientes

potentes (con efectos, suavizados). Además, no consume mucha bateria en el
dispositivo en el que se visualiza.
Además de estas APIs, existen muchas más y en el futuro seguirán desarrollándose.

Elegir unas u otras, depende de qué funcionalidades requiera el proyecto que estemos
realizando. Lo más importante es afianzar sólidamente los fundamentos de HTML,
CSS y del desarrollo web, y así ser capaces de enfrentarnos a las constantes
actualizaciones y poder utilizar cada vez herramientas más potentes en la creación de
nuestras páginas.
Ahora que ya sabes qué posibiliades ofrece el lenguaje HTML, descubre cómo dar
formato visual y diseño a tus páginas web utilizando CSS.
EL DISEÑO DE LAS PÁGINAS WEB CON CSS

CSS es el acrónimo de Cascading Style Sheets (es decir, hojas de estilo en cascada).
Sirven para dotar de formato (diseño y estilos) al contenido de la web que previamente
has estructurado.
Decimos que son hojas de estilo "en cascada" ya que cuando dotamos a un elemento
html de determinadas propiedades css (no todas), como por ejemplo el color del texto
(color:;), aquello que esté contenido dentro de ese elemento heredará también
esa característica.
Así, en el ejemplo de código html que vimos en el apartado anterior, si a la etiqueta

body le decimos que su color de texto sea azul y que aparezcan las letras en
mayúsculas, el texto contenido en los titulares y párrafos que vemos dentro del body,
también será azul.
El lenguaje CSS también tiene la característica de la especificidad. En el mismo

ejemplo también se ha creado una regla que hace que el color del titular (<h1></h1>)
sea rojo. Lo que ha ocurrido es que la herencia de la regla que afectaba a todos los
elementos dentro de la etiqueta body se ha anulado al crear una regla más
específica para el h1: Por tanto, la única propiedad que heredará este elemento será
la transformación de texto en mayúsculas (text-transform:uppercase;).
ESCRIBIR Y EDITAR HOJAS DE ESTILO CSS
Para crear y editar hojas de estilo puedes utilizar los mismos programas que con
HTML de los que hablabamos en el apartado anterior, sólo tienes que asegurarte de
guardar tus archivos con la extensión .css.
Existen dos tipos de hojas de estilo:
Hojas de estilo embebidas o internas

Son aquellas que van introducidas dentro del mismo documento HTML
mediante la etiqueta <style></style>. Se colocan en la cabecera del
documento, es decir, dentro de la etiqueta <head></head>.
Hojas de estilo externas
Un sólo documento css que controla la apariencia de todo el sitio web.
Esto es una gran ventaja ya que si en un momento dado, por ejemplo, es
necesario cambiar el tamaño del texto de todos los documentos html sólo
habrá que abrir un archivo y cambiar una regla específica. Por el contrario, el
uso de hojas de estilo embebidas requerirá abrir todas y cada una de las
páginas que conforman el sitio y cambiar en cada una la regla que afecta al
tamaño del texto. Además, el uso de hojas externas disminuye el tiempo de
carga de la página web , ya que una vez el usuario haya descargado el
documento css,el resto del archivos del sitio cargará más rápido.
Enlazar una hoja de estilos a tu sitio web, se consigue utilizando la etiqueta
<link> junto con la ruta donde se encuentra ubicada la hoja de estilos en
cada uno de los archivos html.
A continuación se muestran dos ejemplos, el primero corresponde a una hoja de
estilos embebida o interna y el segundo muestra la sintaxis y ubicación correcta del
elemento <link> para enlazar una hoja de estilos externa a la que hemos llamado
style.css. El resultado visual es en ambos el mismo (ver ejemplo anterior).
<!DOCTYPE html>
<html>
<head>
<title>
Esto es el título de mi página web
</title>
<style>
body {
color: blue;
text-transform:uppercase
h1 {
color:red;
</style>
</head>
<body>
<h1>
Esto es un titular
</h1>
<p>
Esto es un párrafo
</p>
<p>
Esto es otro párrafo
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Esto es el título de mi página web
</title>
<link rel="stylesheet" href=style.css>
</head>
<body>
<h1>
Esto es un titular
</h1>
<p>
Esto es un párrafo
</p>
<p>
Esto es otro párrafo
</p>
</body>
</html>
CSS2 Y CSS3
CSS (Cascading Style Sheets) es el lenguage que utilizamos para manipular la
apariencia de las páginas web. El documento en el cual escribimos este código se
llama Hoja de estilos y debe guardarse con la extensión .css. Como ya se ha
especificado, existen dos tipos de hojas de estilos, internas y externas, aunque se
recomienda utilizar las externas ya que afectan de forma global a todos los
documentos html5 que conforman nuestro sitio web y por tanto a la hora de realizar
alguna modificación en nuestro diseño, resultará más rápido y sencillo.
Existen diversas técincas que te ayudarán a crear vistosos y eficientes efectos de

diseño, pero para ello tendrás que dominar CSS3 y desbubrir las oportunidades que te
ofrece. ¿Quieres aprenderlo a fondo?.
SINTAXIS Y USO DE CSS
Css permite crear reglas que definirán la apariencia de todos y cada uno de los
elementos de nuestra página web. Toda regla CSS se compone de al menos un
selector, una o varias propiedades y unos valores que le asigamos a dichas
propiedades.Por ejemplo:
Los selectores CSS sirven para "nombrar e identificar" aquellos elementos HTML de
los cuales quiero modificar su apariencia. Existen diferentes tipos de selectores
dependiendo de su grado de especificidad, es decir, si pueden afectar de una forma
global a varios elementos de la página ( por ejemplo: hacer que todos los enlaces de
mi sitio web sean rojos y aparezcan subrayados), que sólo afecten a unos pocos (sólo
determinados enlaces aparecerán en rojo) o que sean únicos (sólo un enlace de la
página será rojo).
SELECTORES BÁSICOS DE CSS
Selector universal * .
Las propiedades especificadas en este selector afectarán a todos los
elementos de la página web.
* { background-color:red; }
En este ejemplo, todos los elementos de la página tendrán un color de fondo

rojo.
Selector de tipo o etiqueta.
Selecciona los elementos HTML por su nombre de etiqueta. Por ejemplo h1,
h2, body, p etc. Su sintaxis es simple ya que basta poner el nombre de la
etiqueta sin los símbolos <>.
h1{ color:red }
Selector de clase.
en el CSS, nos referiremos a él precediendo el nombre que le hayamos dado de una
almohadilla (#).
Sirven para especificar que ciertos elementos de la página tengan
determinadas propiedades. Por ejemplo, si la tipografía de los párrafos es de
color gris, pero queremos que determinados párrafos destaquen en color rojo,
debemos añadirle a estos últimos el atributo class="destacadoRojo"
dentro del documento html. En la hoja de estilos nos referiremos a las clases
escribiendo un punto (.) delante del nombre que le hayamos dado. Por ejemplo:
.destacado.
En el HTML:
<p class="destacadoRojo"> Esto es un párrafo destacado </p>
<p> Esto es un párrafo </p>
<p class="destacadoRojo"> Esto es un párrafo destacado </p>

<p> Esto es un párrafo </p>
En el CSS:
.destacadoRojo{
color:red;
Los nombres de clases son sensibles a las mayúsculas y a los espacios. Un

nombre de clase no debe llevar espacios y debe escribirse en la hoja de estilos
exáctamente igual que en el valor del atributo class.
La característica más interesante que tienen las clases es que son
reutilizables, es decir, pueden otorgarse a tantos elementos html como se
quiera dentro del mismo documento y de todo el sitio web.
Selector de identificador único o ID.
Afecta a aquel elemento al que le hayamos otorgado ese identificador mediante
su atributo id. Dentro del documento html puede haber varios elementos que
lleven este atributo pero no puede haber nunca dos elementos con el
mismo ID dentro del mismo documento html, ya que este debe ser único en
cada página. En el HTML, debemos darle el atributo al elemento deseado
id="menu" y , en el CSS, nos referiremos a el precediendo el nombre que le
hayamos dado de una almohadilla (#).
En el HTML:
<nav id="menu">
<ul>
<li>Inicio</li>
<li>Quiénes somos</li>
<li> Productos </li>
<li> Servicios </li>
<li> Contacto </li>
</ul>
</nav>
En el CSS:
#menu{
color:red;
PROPIEDADES Y VALORES DE CSS
Aprender CSS consiste mayoritariamente en aprender y practicar con las

numerosas propiedades CSS y sus posibles combinaciones. Además, existe el
problema de la compatibilidad de estas propiedades entre navegadores, el tener en
cuenta los dispositivos móviles y tablets y todas las actualizaciones y versiones que
estén por venir. Es importante hacer una estrategia de estilos inteligente, que nos
permita hacer cambios de una forma sencilla y eficaz y también elegir la manera de
representar los estilos con aquellas propiedades que soporten la mayoría de los
navegadores, o al menos aquellos que sabemos que utiliza el tipo de audiencia al que
queremos llegar con nuestra página web.
Un recurso interesante, para saber qué tipo de incompatibilidades de propiedades

CSS pueden existir entre navagadores es http://caniuse.com/ y una herramienta
interesante, aunque un poco más avanzada es modernizr, una librería que corrige
estos problemas a través de JavaScript. Puedes echarle un vistazo en
http://modernizr.com/.
Una propiedad css es aquella característica que se modifica en el elemento
seleccionado, su color de fondo, su margen, color de letra, etc.
Un valor css es el parámetro que se atribuye a una propiedad, estableciendo en qué

medida esta modifica al elemento seleccionado, como por ejemplo: 10 píxeles de
margen, color rojo, 70% de anchura, etc.
En CSS a cada propiedad le corresponden unos valores determinados, que pueden

ser cuantificados en diferentes unidades de medida:porcentajes, píxeles, em, valor
hexadecimal del color etc.Todo depende de qué queramos modificar.
Si te ha gustado este tema y estás decidido a aprender profesionalmente HTML5 y

CSS3 desde cero, échale un vistazo a este curso online tutorizado. Entre otras
cosas dominarás el uso de las hojas de estilo, su especificidad, sus selectores
avanzados, pseudo-elementos y propiedades CSS…. A por ello!

Qué Es HTML y para Qué Sirve

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Qué Es HTML y para Qué Sirve

Hochgeladen von

Copyright:

Verfügbare Formate

QUÉ ES HTML Y PARA QUÉ SIRVE

Diariamente, obtenemos muchos tipos información del exterior: vemos el telediario,

HTML es un lenguage de marcado que se utiliza para describir y categorizar la

Es posible editar y escribir código html en numerosos programas y en todos los

Existen otros editores, gratuitos como el Sublime Text, y de pago, como el

DOCTYPE, ATRIBUTOS, HTML, BODY, HEAD Y TITLE

La declaración <!DOCTYPE> es el primer elemento que debe aparecer en un

En HTML5, la declaración DOCTYPE es muy simple:

ETIQUETAS BÁSICAS DE HTML

Aprender a maquetar correctamente requiere tener una buena base de conocimiento.

Como ya sabemos, un archivo html es un documento de texto en el que se utilizan

<a href=http://www.mipaginaweb.com>Pincha aquí para ver mi página web

<a href="http://www.mipaginaweb.com"> Puedes visitar la página web de

Para indicar que un archivo se encuentra en un nivel inferior utilizamos la barra /. Si

Si la página está al mismo nivel

<a href=cursos.html> Cursos </a>

Si la página está a un nivel inferior

<a href=Cursos/desarrolloweb.html> Curso desarrollo web </a>

Si la página está a un nivel superior

<a href=../cursos.html> Cursos </a>

Si la página está dos niveles por encima

<a href=../../cursos.html> Cursos </a>

Si tienes dudas y necesitas afianzar estos conocimientos desde cero, échale un

DISPOSICIÓN DE ELEMENTOS EN HTML Y SU

LAYOUT CON HTML TRADICIONAL: LA ETIQUETA <DIV></DIV>

En versiones anteriores a HTML5, el sistema utilizado por los desarrolladores web

A efectos de comunicación con el navegador la etiqueta <div> </div> no tiene

LAYOUT CON LAS NUEVAS ETIQUETAS DE HTML5

Etiqueta header <header></header>.

<img src=images/bicicleta_energy3.jpg alt="Bicicleta rosa de chica

con cesta marca Energy" title="Energy es una marca

en hacer bicicletas de paseo caracterizadas por su

comodidad y resitencia" />

Etiquetas <figure></figure> y <figcaption></figcaption>. HTML5 introduce una

Además de imágenes la etiqueta <figure></figure> se utiliza para marcar videos,

<img src=images/bicicleta_energy3.jpg alt="Bicicleta rosa de chica

cesta marca Energy" title="Energy es una marca especializada en

hacer bicicletas de paseo caracterizadas por su comodidad y

Bicicleta de chica con cesta marca Energy.

Disponible también en azul, morado, verde y rojo.

Con este curso de HTML5 y CSS3 aprenderás a optimizar imágenes, a escoger

Aparte del correcto etiquetado semántico y estructural de la página web, HTML5

Las APIs de HTML5 combinan JavaScript y pueden hacer cosas verdaderamente

Si tenemos problemas a la hora de implementar esta API podemos utilizar en su lugar

Otra de las APIs más populares es la geolocalización . Permite obtener la ubicación

Otra aplicación más avanzada es WebSocket que permite crear un canal de

Con la API RequestAnimationFrame podrás crear animaciones más eficientes

Además de estas APIs, existen muchas más y en el futuro seguirán desarrollándose.

EL DISEÑO DE LAS PÁGINAS WEB CON CSS

Así, en el ejemplo de código html que vimos en el apartado anterior, si a la etiqueta

El lenguaje CSS también tiene la característica de la especificidad. En el mismo

ESCRIBIR Y EDITAR HOJAS DE ESTILO CSS

Existen dos tipos de hojas de estilo:

Hojas de estilo embebidas o internas

Esto es el título de mi página web

Esto es otro párrafo

<link rel="stylesheet" href=style.css>

Esto es otro párrafo

Existen diversas técincas que te ayudarán a crear vistosos y eficientes efectos de

SINTAXIS Y USO DE CSS

SELECTORES BÁSICOS DE CSS

En este ejemplo, todos los elementos de la página tendrán un color de fondo

<p class="destacadoRojo"> Esto es un párrafo destacado </p>