3.6 Aplicación en documento web
La implementación de un lenguaje es la que provee una manera de que se ejecute un programa para una determinada combinación de software y hardware. Existen básicamente dos maneras de implementar un lenguaje: Compilación e interpretación. Compilación es la traducción a un código que pueda utilizar la máquina. Los programas traductores que pueden realizar esta operación se llaman compiladores. Éstos, como los programas ensambladores avanzados, pueden generar muchas líneas de código de máquina por cada proposición del programa fuente.
Se puede también utilizar una alternativa para traducir lenguajes de alto nivel. En lugar de traducir el programa fuente y grabar en forma permanente el código objeto que se produce durante la compilación para utilizarlo en una ejecución futura, el programador sólo carga el programa fuente en la computadora junto con los datos que se van a procesar. A continuación, un programa intérprete, almacenado en el sistema operativo del disco, o incluido de manera permanente dentro de la máquina, convierte cada proposición del programa fuente en lenguaje
de máquina conforme vaya siendo necesario durante el procesamiento de los datos.
Los elementos de las líneas 8 y 13 definen tags que se definen solo dentro del espacio del tag izquierdo.
Por ejemplo en la línea 8 se define el estilo de los parrafos dentro de las listas ordenadas.
Mientras que la línea 13 define el estilo de los elementos de las listas ordenadas.
A continuación se presentan varios ejemplos:
Ejemplo: Observe que el formulario carece de estética
- Una hoja de estilo externa, esta almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
- Una hoja de estilo interna, está incrustada dentro de un documento HTML (Dentro del elemento <head>). De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML se pierde. En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica específica una página Web.
- Un estilo en línea, que es un método para insertar el lenguaje de estilo de página, directamente, dentro de una etiqueta HTML. Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo al vuelo. No es todo lo claro, o estructurado, que debería ser, pero funciona. es necesario incluir el atributo STYLE.
HOJA DE ESTILO INTERNA
El siguiente código estará colocado en el head del archivo html.<style>
body {
background-color:#345485;
}
h1 {
color:orange;
font-family:'Times New Roman';
text-align:center;
}
p {
color:#E9EBAB;
font-family:Arial,Helvetica,sans-serif;
font-size:20px;
text-align:center;
}
</style>
- El código que a continuación se presenta deberá almacenarse en un archivo con extensióncss.
- Dicho archivo será referenciado desde el head con la siguiente línea
<head> <link href='0306css02.css' rel='stylesheet' /> <head>
FIJAR UNA IMAGEN DE FONDO
- El atributo background nos indica la imagen que se usara de fondo (línea 2)
- El atributo background-attachment en fixed fija la imagen al centro de la forma (línea 3).
body {
background: transparent url('escudoITV.png')
no-repeat center
background-attachment: fixed;
}
h1 {
color:red;
font-family:'Times New Roman';
font-size:24px;
font-weight:bold;
text-align:center;
}
h2 {
color:blue;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
font-weight:bold;
text-align:center;
}
p {
color:black;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
text-align:center;
}
LISTAS
Mejorar la estética de las listas con CSS es fácil.- Estilo de listas no ordenadas: square, circle, disc (por defecto), y none
- Estilo de listas ordenadas: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (por defecto), y none.
Los elementos de las líneas 8 y 13 definen tags que se definen solo dentro del espacio del tag izquierdo.Por ejemplo en la línea 8 se define el estilo de los parrafos dentro de las listas ordenadas.
Mientras que la línea 13 define el estilo de los elementos de las listas ordenadas.
A continuación se presentan varios ejemplos:
ol {
font: italic 1em Georgia, Times, serif;
list-style-position: inside;
margin: 10px;
padding: 10px;
}
ol.p {
margin:0px;
padding:3px 0px;
}
ol.li {
background: #ffffff;
margin-left: 40px;
padding-left: 10px;
}
ul {
list-style-position: inside;
list-style-type: circle;
}
LISTAS HORIZONTALES
Aproximación a un menú horizontal.- El truco consiste en flotar el elemento li a la izquierda.
- hover aplica cuando se señala un hipervinculo (línea 9).
- float: Toma uno de tres valores posibles left ( flotar a la izquierda ) , right ( flotar a la derecha) y none ( conservar la posición normal).
a { color:#009966;}
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
a:hover {
color: red;
font-size:24px;
font-weight:bold;
text-decoration: underline overline;
}
ul {
margin: 0px auto;
padding: 0px;
}
ul.menu li {
border: 2px solid red;
float: left;
list-style: none;
margin: 5px;
padding: 3px 10px 3px 10px;
text-align: left;
}
ul.rollover li{
float: left;
list-style: none;
text-align: left;
}
ul.rollover a {
display: block;
text-decoration: none;
padding: 3px 10px 3px 25px;
margin: 5px;
}
ul.rollover a:hover{
background:url(favicon.ico)
5px 5px no-repeat;
text-decoration: none;
}
MENÚ CON SOLAPAS
body {
background:#fff;
color:#000;
margin:0;
padding:0;
font:x-small/1.5em Georgia,Serif;
font-size:small;
voice-family: '\'}\''; voice-family:inherit;
} html>body {font-size:small;}
p {
margin:0;
padding:1em;
clear:both;
}
#header {
background:#DAE0D2 url('bg.gif') repeat-x bottom;
font-size:93%;
float:left;
line-height:normal;
width:100%;
}
#header ul {
list-style:none;
margin:0;
padding:10px 10px 0;
}
#header li {
background:url('left_both.gif') no-repeat left top;
border-bottom:1px solid #765;
float:left;
margin:0;
padding:0 0 0 9px;
}
#header a {
background:url('right_both.gif') no-repeat right top;
color:#765;
display:block;
float:left;
font-weight:bold;
padding:5px 15px 4px 6px;
text-decoration:none;
width:.1em;
}
#header > ul a {width:auto;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
color:#333;
}
#home #nav-home, #news #nav-news,
#products #nav-products, #about #nav-about,
#contact #nav-contact {
background-position:0 -150px;
border-width:0;
}
#home #nav-home a, #news #nav-news a,
#products #nav-products a, #about #nav-about a,
#contact #nav-contact a {
background-position:100% -150px;
color:#333;
padding-bottom:5px;
}
#header li:hover, #header li:hover a {
background-position:0% -150px;
color:#333;
}
#header li:hover a {
background-position:100% -150px;
}
FORMULARIOS
Los formularios son una parte esencial de la interacción en Internet y con CSS es factible mejorar su estética.Ejemplo: Observe que el formulario carece de estética
Nombre
E-mail
Mediante la aplicación de propiedades CSS modificaremos la estética de un tag HTML en este caso label. Para este ejemplo todas las etiquetas iniciaran en un nueva línea, flotaran a la izquieda, estarán en negritas, alineadas a la izquierda, y espaciadas en forma relativa (em).
Su sintaxis es <fieldset> … </fieldset>.
El efecto que conseguimos es un rectángulo enmarcando el texto que esté incluido dentro de él. Su ancho por defecto será del 100%, el cual se puede modificar mediante CSS.
Legend se abre con la etiqueta <legend> y se cierra con </legend>. Por supuesto, estas dos etiquetas deben estar dentro de la etiqueta <fieldset>..
<body> <form id='forma' name='forma' action='' method='post'> <p><label for='nombre'>Nombre</label> <input type='text' id='nombre' name='nombre' /></p> <p><label for='e-mail'>E-mail</label> <input type='text' id='e-mail' name='e-mail' /></p> <p><input type='submit' value='Enviar' /></p> </form> </body>Ahora con una hoja de estilo vamos a darle algo de estética al formulario sin usar tablas.
Mediante la aplicación de propiedades CSS modificaremos la estética de un tag HTML en este caso label. Para este ejemplo todas las etiquetas iniciaran en un nueva línea, flotaran a la izquieda, estarán en negritas, alineadas a la izquierda, y espaciadas en forma relativa (em).
label {
display: block;
float: left;
font-weight: bold;
margin-right: 0.5em;
text-align: left;
width: 4.5em;
}
Se define una clase llamada enviar. Observe que esta clase modifica el elemento input.enviar input {
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
font-weight: bold;
margin-left: 6em;
}
APLICAR COLORES A LA FORMA
input {
background: #fee3ad;
border: 1px solid #781351;
color: #781351;
}
FIELDSET
La etiqueta fieldset se usa en formularios para agrupar campos que están relacionados entre sí.Su sintaxis es <fieldset> … </fieldset>.
El efecto que conseguimos es un rectángulo enmarcando el texto que esté incluido dentro de él. Su ancho por defecto será del 100%, el cual se puede modificar mediante CSS.
LEGEND
La etiqueta “legend” nos permite titular o etiquetar el conjunto de campos que están incluidos dentro de fieldset.Legend se abre con la etiqueta <legend> y se cierra con </legend>. Por supuesto, estas dos etiquetas deben estar dentro de la etiqueta <fieldset>..
fieldset {
border: 1px solid #781351;
margin:auto;
padding: 0em, 0em, 0.4em, 0.8em;
width: 400px;
}
legend {
background: #ffa20c;
border: 1px solid #781351;
color: #fff;
padding: 2px 6px
}
FUENTE:
https://programacion1class.wordpress.com/3-6-aplicacion-en-documento-web/
https://www.youtube.com/watch?v=cDr67CVQ5GY
