2. 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.
●
3. 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.
6. 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 }
7. 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>
8. 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>
9. 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>
