HTML

Html: En realidad no es un lenguaje de programacin, sino como su nombre lo indica es un
"lenguaje de maquillado". Ya que nosotros lo nico que hacemos es "maquillar" una serie de
textos e imgenes para que el navegador nos de la presentacin deseada en conjunto.
Css: La primera versin de CSS fue publicada a fines del ao 1996 y fue logrando popularidad
y aceptacin hasta llegar a la versin 2.1, estndar actual que ofrece gran compatibilidad con la
mayora de los navegadores del mercado.
A partir del ao 2005 se comenz a definir el sucesor de esta versin, al cual se lo conoce
como CSS3 o Cascading Style Sheets Level 3. Actualmente en definicin, esta versin nos
ofrece una gran variedad de opciones muy importantes para las necesidades del diseo web
actual. Desde opciones de sombreado y redondeado, hasta funciones avanzadas de
movimiento y transformacin, CSS3 es el estndar que dominar la web por los siguientes
aos.
Js: Javascript es un lenguaje con muchas posibilidades, utilizado para crear pequeos
programas que luego son insertados en una pgina web y en programas ms grandes,
orientados a objetos mucho ms complejos. Con Javascript podemos crear diferentes efectos e
interactuar con nuestros usuarios.
Este lenguaje posee varias caractersticas, entre ellas podemos mencionar que es un lenguaje
basado en acciones que posee menos restricciones. Adems, es un lenguaje que utiliza
Windows y sistemas X-Windows, gran parte de la programacin en este lenguaje est centrada
en describir objetos, escribir funciones que respondan a movimientos del mouse, aperturas,
utilizacin de teclas, cargas de pginas entre otros.
Es necesario resaltar que hay dos tipos de JavaScript: por un lado est el que se ejecuta en el
cliente, este es el Javascript propiamente dicho, aunque tcnicamente se denomina Navigator
JavaScript. Pero tambin existe un Javascript que se ejecuta en el servidor, es ms reciente y
se denomina LiveWire Javascript.
2.3.-
4.1. Incustrar una hoja de estilo

Las reglas de la hoja de estilo se insertan entre las etiquetas de estilo inicial y final (<style> y
</style>) de la seccin encabezado de la pgina web:
<head>
<title>Hoja de estilo incustrada (CSS)</title>
<style type="text/css">
<!-h1 {color:blue; font size:40px; font-family:verdana;}
p {color:white; background:green; font-family:helvetica; text-indent:2cm;}
-->
</style>
</head>
El atributo type de la etiqueta <style> indica al explorador el tipo de hoja de estilo que debe
esperar.
2. Vinculacin a una hoja de estilo externa
Para crear un vnculo a una hoja de estilo externa, insertamos una etiqueta <link> como en el
ejemplo siguiente:
<head>
<title>Hoja de estilo vinculada</title>
<link href="estilo.css" rel="stylesheet" type="text/css">
</head>
La etiqueta <link> indica al explorador web que use las reglas de formato CSS en el archivo
llamado "estilo.css". El atributo type identifica el archivo como un archivo de texto con
informacin CSS, y el atributo href indica al explorador el nombre y, si es necesario, la ruta de
acceso del archivo con las definiciones de hojas destilo que el explorador va a abrir. Tambin
puede incluir un atributo media para especificar los medios a los que se aplican las reglas de la
hoja de estilo. Al leer el valor del atributo media (en la etiqueta <link>), el explorador web puede
descargar selectivamente archivos de hojas de estilo aplicables nicamente a los medios
utilizados por el explorador. Por ejemplo, explorador web puede impedir la descarga de la
siguiente hoja de estilo que se aplicar a "tv" (es decir, televisin) al mostrar documentos HTML
en la pantalla de un equipo estndar:
<link href="webtv.css" rel="stylesheet" type="text/css" media="tv" >
3. Importar una hoja de estilo externa
Es similar a la vinculacin. La diferencia es que puede combinar la importacin con otros
mtodos, algo que no ocurre con la vinculacin. El siguiente ejemplo no slo contiene una
instruccin de import, sino tambin reglas CSS incrustadas que dan estilo a encabezados de
nivel dos y modifican el estilo del texto principal de la pgina web:
<head>
<title>Hoja de estilo en cascada importada(CSS)</title>
<style type="text/css">
<!-@import url(estilo.css)
h2 {color:purple; font size:30px; font-family:helvetica;}
body {color:black;}
-->
</style>
</head>
El archivo estilo.css incluye la siguiente regla:
body {background:#ADD8E6; color:maroon;}
Cul ser la regla que se impondr?
4. Aplicar estilos en lnea de etiquetas HTML
Imaginemos que deseamos aplicar una sangra de cuatro centmetros a un nico encabezado
de nivel dos y mostrar el color del encabezado como texto blanco sobre un fondo azul. Para
especificar una regla de formato CSS que se aplique solamente a una etiqueta, utilizamos el
atributo style para especificar la regla en la etiqueta como <nombreDeEtiqueta
style="Declaraciones de CSS">. As, en este ejemplo, podriamos insertar la regla CSS en la
etiqueta <h2> de la siguiente manera:
<html>
<head>
<title>Estilos en lnea </title>
<head>
<body>
<h2 style="text-indent:1.5 in; background:blue; color:white;">
Este texto de encabezado es blanco con un fondo azul, sangrado de
4 centmetros. </h2>
</body>
</html>
5.Elementos block
Con respecto a la estructura, bsicamente cada navegador ordena los elementos por defecto
de acuerdo a su tipo: block (bloque) o inline (en lnea). Esta clasificacin est asociada con la
forma en que los elementos son mostrados en pantalla.

Elementos block: son posicionados uno sobre otro hacia abajo en la pgina
Elementos inline: son posicionados lado a lado, uno al lado del otro en la misma lnea,
sin ningn salto de lnea a menos que ya no haya ms espacio horizontal para ubicarlos.
Casi todos los elementos estructurales en nuestros documentos sern tratados por los
navegadores como elementos block por defecto. Esto significa que cada elemento HTML que
representa una parte de la organizacin visual (por
ejemplo, <section>, <nav>, <header>, <footer>, <div>) ser posicionado debajo del anterior.
6.En primer lugar, CSS 3 aade tres nuevos selectores de atributos:
elemento[atributo^="valor"], selecciona todos los elementos que disponen de ese

atributo y cuyo valor comienza exactamente por la cadena de texto indicada.
elemento[atributo$="valor"], selecciona todos los elementos que disponen de ese

atributo y cuyo valor termina exactamente por la cadena de texto indicada.
elemento[atributo*="valor"], selecciona todos los elementos que disponen de ese

atributo y cuyo valor contiene la cadena de texto indicada.
7.Selectores ID
Los selectores ID son asignados individualmente con el propsito de una definicin en
trminos 'por elemento'. Este tipo de selector debera ser usado con moderacin debido a sus
inherentes limitaciones. Un selector ID se asigna mediante el uso del indicador "#" para
preceder un nombre. Por ejemplo, un selector ID podra asignarse as:
#svp94O { text-indent: 3em }
Esto sera referenciado en HTML por el atributo ID:
<P ID=svp94O>Texto con sangra 3em</P>
8.Las seudo-clases puede asignarse al elemento A para mostrar enlaces, enlaces visitados y
enlaces activos en forma diferente. El elemento ancla puede asignar a la seudoclase link (enlace), el estado de visitada, o activa. Un enlace visitado puede definirse para
representar un color diferente e inclusive un diferente tamao y estilo de fuente.
Un efecto interesante podra ser tener un enlace actualmente seleccionado (o "activo")
mostrado en un tamao de fuente ligeramente ms grande y de un color diferente. Entonces,
cuando la pgina se vuelva a seleccionar, el enlace visitado podra mostrarse en un tamao de
fuente ms pequeo y con un color diferente. La hoja de estilo de muestra podra lucir as:
A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
9.2.1.1. Selector universal
Se utiliza para seleccionar todos los elementos de la pgina. El siguiente ejemplo elimina el
margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la
parte de la declaracin de la regla CSS):
* { margin: 0;
padding: 0;}
2.1.2. Selector de tipo o etiqueta
Selecciona todos los elementos de la pgina cuya etiqueta HTML coincide con el valor del
selector. El siguiente ejemplo selecciona todos los prrafos de la pgina:
p{
...
}
Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin
los caracteres < y >) correspondiente a los elementos que se quieren seleccionar.
El siguiente ejemplo aplica diferentes estilos a los titulares y a los prrafos de una pgina
HTML:
h1 { color: red;}
h2 { color: blue;}
2.1.3. Selector descendente Selecciona los elementos que se encuentran dentro de otros
elementos. Un elemento es descendiente de otro cuando se encuentra entre las
etiquetas de apertura y de cierre del otro elemento.
El selector del siguiente ejemplo selecciona todos los elementos <span> de la pgina que se
encuentren dentro de un elemento <p>:
p span { color: red; }
Si el cdigo HTML de la pgina es el siguiente:
<p> ...
<span>texto1</span>
<a href="">...<span>texto2</span></a>
</p>
2.1.5. Selectores de ID En ocasiones, es necesario aplicar estilos CSS a un nico
elemento de la pgina. Aunque puede utilizarse un selector de clase para aplicar estilos a
un nico elemento, existe otro selector ms eficiente en este caso.
El selector de ID permite seleccionar un elemento de la pgina a travs del valor de su
atributo id. Este tipo de selectores slo seleccionan un elemento de la pgina porque el valor
del atributo id no se puede repetir en dos elementos diferentes de una misma pgina.
La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que
se utiliza el smbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la
regla CSS:
#destacado { color: red; }
<p>Primer prrafo</p>
<p id="destacado">Segundo prrafo</p>

<p>Tercer prrafo</p>

HTML

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML

Hochgeladen von

Copyright:

Verfügbare Formate

Html: En realidad no es un lenguaje de programacin, sino como su nombre lo indica es un

4.1. Incustrar una hoja de estilo

forma en que los elementos son mostrados en pantalla.

elemento[atributo^="valor"], selecciona todos los elementos que disponen de ese

elemento[atributo$="valor"], selecciona todos los elementos que disponen de ese

elemento[atributo*="valor"], selecciona todos los elementos que disponen de ese

<p id="destacado">Segundo prrafo</p>

Das könnte Ihnen auch gefallen