miércoles, 26 de abril de 2017
miércoles, 19 de abril de 2017
EJERCICIOS (CLASE N°11)
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilo.css"/>
<title></title>
</head>
<body>
<a href="http://www.google.com" target="_blank" class="b"> Ir a la pagina</a>
<hr>
<a href="http://www.google.com" target="_blank" class="d"> Ir a la pagina</a>
<hr>
<a href="http://www.google.com" target="_blank" class="c"> Ir a la pagina</a>
<hr>
<h1> Bucaramanga</h1> <span class="teclado">Ciudad</span>
<br><br>
<input type="text" id="a"><br>
<input type="text" id="b"><br>
<input type="text" id="c"><br>
<input type="text" id="d"><br>
<input type="password" id="e"><br>
<input type="text" id="d" class="goyo"><br>
<input type="checkbox" id="check_a"><br>
</body>
</html>
estilo.css
a{
color:#ff0000;
font-size:30px;
}
a:hover{
color:#34dda7;
font-size:14px;
background-color:#f00;
}
.teclado{
color:#9932cd;
font-size:24px
}
.h1{
color:#215e21;
}
.b{
color:purple;
}
.d{
color:pink;
}
.c{
color:black;d
}
input{
background-color:#f00;
}
input[type="password"]{
background-color: #00f;
}
input.goyo{background-color: #0f0;}
1. Diferencia entre HTML y CSS
RTA: HTML se usa para estructurar el contenido mientras que CSS se usa para formatear el contenido previamente estructurado.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilo.css"/>
<title></title>
</head>
<body>
<a href="http://www.google.com" target="_blank" class="b"> Ir a la pagina</a>
<hr>
<a href="http://www.google.com" target="_blank" class="d"> Ir a la pagina</a>
<hr>
<a href="http://www.google.com" target="_blank" class="c"> Ir a la pagina</a>
<hr>
<h1> Bucaramanga</h1> <span class="teclado">Ciudad</span>
<br><br>
<input type="text" id="a"><br>
<input type="text" id="b"><br>
<input type="text" id="c"><br>
<input type="text" id="d"><br>
<input type="password" id="e"><br>
<input type="text" id="d" class="goyo"><br>
<input type="checkbox" id="check_a"><br>
</body>
</html>
estilo.css
a{
color:#ff0000;
font-size:30px;
}
a:hover{
color:#34dda7;
font-size:14px;
background-color:#f00;
}
.teclado{
color:#9932cd;
font-size:24px
}
.h1{
color:#215e21;
}
.b{
color:purple;
}
.d{
color:pink;
}
.c{
color:black;d
}
input{
background-color:#f00;
}
input[type="password"]{
background-color: #00f;
}
input.goyo{background-color: #0f0;}
- Tambien se evaluo la habilidad 1
1. Diferencia entre HTML y CSS
RTA: HTML se usa para estructurar el contenido mientras que CSS se usa para formatear el contenido previamente estructurado.
miércoles, 12 de abril de 2017
miércoles, 5 de abril de 2017
HOJAS DE ESTILO. (CLASE °10)
HOJA DE ESTILO:
En las primeras versiones del HTML, el código fuente de una página web contenía tanto la información (el contenido) como la forma de representarse (el diseño o formato). Actualmente, estos dos aspectos se pueden separar. La página web (el documento html) sólo debe contener información, mientras que el formato se debe definir en las llamadas hojas de estilo (en inglés, CSS, Cascading Style Sheets, es decir, Hojas de Estilo en Cascada).
El funcionamiento de las hojas de estilo es el siguiente:
- En la página web (archivo .html) se escriben las etiquetas que definen categorías o elementos.
- En la hoja de estilo (archivo .css) se escribe cómo queremos que sea el estilo de presentación de las etiquetas (color, tamaño, fuente, bordes, máragenes, posición, etc).
- En la página web se escribe qué hoja de estilo queremos utilizar.
Las ventajas de utilizar hojas de estilo son muchas, sobre todo permiten hacer un diseño consistente y fácil de modificar. Si varias páginas web hacen referencia a la misma hoja de estilo, para cambiar la apariencia de todas las páginas es suficiente con hacer los cambios en un único lugar, en la hoja de estilo.
Sintaxis de las hojas de estilo
Una hoja de estilo es un fichero de texto plano (sin formato) en el que se define el aspecto de las etiquetas de una página web:
Una hoja de estilo está formada por una o varias sentencias:
Existen dos tipos de sentencias: las reglas-arroba y las reglas:
Las reglas-arroba empiezan por el símbolo de arroba (@) pegado a un identificador y terminan por un punto y coma (;):
Algunas reglas-arroba (@charset, @import o @namespace) deben aparecer al principio de la hoja de estilo, pero el resto (@font-face, @media, etc.) pueden escribirse en cualquier lugar de la hoja de estilo.
Las reglas están formadas por un selector y un bloque de declaración. El bloque de declaración empieza y acaba con llaves { }.
Cada declaración está formada por una o varias propiedades y sus valores correspondientes. Las propiedades van separadas entre sí por puntos y comas. El valor (o valores) van separados de las propiedades por dos puntos. En general, si una propiedad necesita varios valores, los valores van separados por espacios en blanco. En general, si una propiedad admite varios valores alternativos, los valores van separados por comas.
TOMADO: http://www.mclibre.org/consultar/amaya/css/css_quees.html
APUNTES:
HOJA DE TEXTO: Son para aplicar un diseño a la pagina web.
EJERCICIOS:
index.html
<!DOCTYPE html><html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="estilo.css"/>
</head>
<body>
<h1>hola esto es un texto</h1>
</body>
</html>
estilo.css
body{
color:#fff;
background-color:#c6c6c6;
}
h1{
color:#4598aa;
font-size: 20px;
text-transform: uppercase;
}
lunes, 3 de abril de 2017
Suscribirse a:
Entradas (Atom)