Guia HTML
Guia HTML
1
Índice
Introducción 3
Qué es el HTML 5
Qué es el CSS 6
2
Introducción
¿Alguna vez has hecho clic con el botón derecho en una página web y has seleccionado
«ver código fuente» o has echado un vistazo al código fuente de un correo electrónico?
O ¿usabas MySpace y aprendiste a actualizar el código para añadir imágenes o música
de fondo a tu perfil? Pues de eso se trata el HTML. El CSS es un lenguaje de codificación
complementario que aplica una hoja de estilos a una determinada página de código HTML
para adaptar el aspecto de dicha página a tu marca.
3
Qué son los lenguajes de codificación
Los lenguajes de codificación, como el HTML y el CSS, también conocidos como «lenguajes de programación», consisten en
instrucciones escritas que le dicen al software qué hacer, cómo mostrar algo o cómo procesar un determinado algoritmo.
Otros lenguajes comunes son Java, Python y SQL. El HTML y el CSS se denominan lenguajes de programación declarativos
(en inglés), ya que declaran lo que hay en una página web y qué aspecto debe tener dicho contenido.
4
Qué es el HTML
HTML (HyperText Markup Language, por sus siglas en inglés) hace referencia al lenguaje de marcas de hipertexto que emplea
etiquetas para alterar la estructura o la forma en la que aparecen el texto o los elementos de una página web. Las etiquetas HTML
permiten organizar el contenido, facilitan la lectura de las páginas y comunican a los motores de búsqueda cuáles son las pala-
bras clave principales mediante etiquetas de encabezado. Este es un ejemplo de un fragmento de código HTML para hipertexto:
5
Qué es el CSS Imagen: W3 Schools
6
HTML vs. CSS Este es un ejemplo de una publicación de un blog en HTML sin CSS.
7
HTML vs. CSS: las diferencias principales
HTML CSS
1 Código para la estructura de la página web 1 Código para el estilo de las páginas web
2 Códigos para elementos y aspectos sobre 2 Códigos para páginas enteras o individuales
todo individuales
3 No puede existir por sí mismo
3 Puede existir sin el CSS
4 Requiere mayores conocimientos técnicos
4 Es fácil de aprender
5 Ofrece más alternativas de estilo que el HTML
5 Todos los navegadores lo pueden procesar;
6 Presenta mejor estilo y formato que el HTML
no tiene requisitos técnicos particulares
7 Numerosos recursos y elementos de ayuda gratuitos
6 Numerosos recursos y elementos de ayuda
disponibles
gratuitos disponibles
8 Su comportamiento no es uniforme en todos los navegadores
7 Funciones de seguridad insuficientes
9 Funciones de seguridad insuficientes
8 Capacidades dinámicas limitadas
10 Puede aplicarse a otros lenguajes XML
8
Códigos HTML Etiquetas HTML
comunes para los marketers
que debes conocer
Etiqueta HTML: <html> aquí se pone la página web </html>
Independientemente de dónde se escriba el código HTML Esta etiqueta indica que la página en cuestión es una página
o del editor que se utilice, existen etiquetas HTML comunes HTML. Se abre al principio del documento y se cierra al final.
que presentan siempre la misma forma.
Etiqueta de encabezado: <h1> aquí se pone el título </h1>
Esta sería la estructura básica de un documento HTML. <h2> aquí se pone el subtítulo </h2>
9
Etiquetas HTML
comunes para los marketers
10
Etiquetas para compartir en redes sociales: Etiqueta de cuerpo: <body> aquí se pone la
página web </body>
LinkedIn: Esta etiqueta, como vimos ya en el ejemplo de la
http://www.linkedin.com/shareArticle?mini=true&url=URL página HTML completa de arriba, es el contenedor
de elementos como listas, párrafos, enlaces e
Facebook: imágenes en la página web.
http://www.facebook.com/sharer/sharer.php?u=URL
Etiqueta de salto de línea: </br>
Si pones la URL deseada en la sección «URL» del código, al Es un código de maquetación sumamente útil.
hacer clic en el enlace se establece automáticamente la cone- Produce un salto de línea en el texto y puede
xión con LinkedIn o Facebook y se abre una publicación en la usarse en los encabezados, párrafos o en cualquier
que aparece ya el contenido del enlace, por lo que los visitan- lugar de la página en la que el texto tenga que
tes de tu sitio web no tienen que molestarse en copiar y pegar pasar a la línea siguiente.
ellos mismos el enlace para compartir tu contenido en una
nueva publicación. De esta forma se animarán más fácilmente
a compartir tu contenido, lo que te puede ayudar a llegar a un <h1> El encabezado es muy largo y debe
público más amplio. Estas etiquetas se pueden usar en publi- </br> dividirse en dos líneas </h1>
caciones de blogs y correos electrónicos, acompañadas por
los símbolos de LinkedIn o de Facebook.
Etiqueta span: <span> elemento </span>
Etiqueta de título: <title> aquí se pone el título </title>
Esta etiqueta sirve para cuidar la maquetación
Esta etiqueta determina el título de la página que aparece en
de la página. Cualquier elemento puesto en una
la parte de arriba del navegador.
etiqueta span quedará protegido contra toda
alteración de la maquetación que se haga cerca
del mismo, bien sea este una imagen o un símbolo.
11
Cómo actualizar el CSS CSS en línea
12
Hoja de estilos externa
Para actualizar el CSS con una hoja de estilos externa, Así se verá una hoja de estilo externa .css.
primero hay que crear un archivo .css independiente con
los estilos que se quieren aplicar a los distintos elementos o
grupos, y luego enlazarlo al archivo .html. body {
background-color: lightblue;
Aquí te explicamos cómo enlazar una hoja de estilos externa
}
a un archivo HTML.
h1 {
<head> color: navy;
<link rel=”stylesheet” type=”text/css”
margin-left: 20px;
href=”thisisyourcssfile.css”>
}
</head>
Este código, escrito en el encabezado del documento HTML, Al enlazar esta hoja de estilos al documento HTML, el
le dice al archivo HTML que asocie el archivo CSS a la página fondo aparecerá de color azul claro y todas las etiquetas
en cuestión. h1 de color azul oscuro con una distancia de 20 píxeles
del margen izquierdo.
Sugerencia: El encabezado del documento HTML no es igual
a las etiquetas h1, h2 y h3. Las etiquetas de encabezado Si hay varios códigos CSS, el programa considerará el
dentro del documento denotan el encabezado de las siguiente orden de prioridad:
secciones, mientras que las etiquetas <head></head>
definen el título principal de la página. Es aquí donde se 1 Estilo en línea
incluirán elementos como las etiquetas de seguimiento
de Google Analytics o de otros programas para obtener 2 Hojas de estilo externas enlazadas en el encabezado
información de la página web.
3 Estilo predeterminado del navegador
13
HTML y CSS: qué evitar
Cuando se habla de HTML y de CSS, hay algunas cosas que los desarrolladores desaconsejan categóricamente.
En vista de que las hojas de estilos CSS se pueden aplicar a varias páginas del sitio web, es importante prestar
atención para no hacer cambios radicales que supongan modificaciones en el sitio entero.
Estos son algunos consejos sobre lo que hay que evitar al editar HTML y CSS.
HTML CSS
1 Olvidar un paréntesis de cierre. Cada 1 Pese a que en ocasiones resulta útil trabajar con el
paréntesis de apertura, como por ejemplo estilo en línea y aplicar un estilo a un encabezado
el que abre el párrafo <p>, debe tener su o a un párrafo específico, suele ser más fácil
respectivo paréntesis de cierre, </p>. elaborar una hoja de estilos para la página
web entera con un estilo general para todas
2 Olvidar incluir las etiquetas de texto alternativo las etiquetas h1, h2, h3, los fondos, márgenes,
en las imágenes. Estas ayudan a potenciar el rellenos y demás elementos de diseño.
SEO y describen a los motores de búsqueda
qué hay en la imagen. 2 Al crear hojas de estilo CSS, es importante
clasificar las distintas secciones y asegurarse de
3 Usar saltos de línea para crear listas. Lo que todo esté bien documentado.
correcto es usar la etiqueta de listas que hemos
descrito antes. 3 Hay que evitar actualizar la hoja de estilos si no
se sabe con precisión cuántas páginas se verán
4 Olvidar el DOCTYPE. En ese caso, los afectadas. Lo más recomendable es averiguar con
navegadores no conseguirán reconocer el tipo los desarrolladores si dicha actualización puede
de documento ni leer correctamente el código. dar lugar a problemas de legibilidad del sitio web.
14
RECURSOS ADICIONALES