Embed Size (px)
Citation preview
TRABAJANDO CON
Por Joaquin Lara Sierra @joaquinls
Algunos atributos que conocer
A la hora de trabajar en html en importante reconocer algunos atributos de algunas etiquetas, por ejemplo:
● Iniciamos con href <a>
<a href="http://www.loquesea.com">texto del link</a>
<img src="mifoto.jpg" width="100" height="120">
● Al primer ejemplo le podemos añadir target=”blank” esto con el propósito que abra en otra pestaña.
●
Style
● Este es otro de los atributos mas usados aunque no se recomienda directamente en html sino definido dentro de la hoja de estilo. Veamos su uso:
<body style="background-color:lightgrey">
<h1>Aquí su encabezado tipo 1</h1>
<p>Aquí un parrafo sencillo.</p>
</body>
● Esto quiere decir que todo lo que esta dentro del cuerpo del documento tendrá un color de fondo gris.
style="property:value”
Formateo de elementos en HTML
Trabajando con CSS
● Cuando se trabaja CSS en HTML este se define dentro del <head>. Miremos como:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>Un titulo</h1>
<p>Un párrafo</p>
</body>
</html>
Recuerde la sintaxis: elemento { propiedad :valor; propiedad: valor }
Otros ejemplo<!DOCTYPE html>
<html>
<head>
<style>
H1 { color:blue;
font-family:verdana;
Font-size:300%; }
P { color:red;
font-family:courier;
Font-size:160%; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Atributo Id
● Para definir un estilo especial, para un elemento en especial, primero adicionamos el atributo id al elemento, veamos como:
<p id="p01">Esto es diferente</p>
<!DOCTYPE html><html>
<head><style>
p#p01 { color: blue;}p#p02 {color:red }
</style></head><body>
<p>Parrafo 1.</p><p>Parrafo 2.</p><p id="p02">Parrafo 3.</p><p id="p01">Parrafo 4.</p>
</body></html>
Atributo Class
● Para definir un estilo para un tipo especial de elemento, adicione el atributo class para el elemento, veamos como:
p.error { color:red; }
<!DOCTYPE html><html>
<head><style>p.intro {
background-color:black; color:white; border:1px solid grey; padding:10px; margin:30px; font-size:150%;}
</style></head><body><h1>encabezado</h1> <p>Parrafo 1</p> <p>Parrafo 2.</p> <p class="intro">Parrafo 3</p></body>
</html>
