Investigación Etiquetas de HTML-HTML5 y CSS

INSTITUTO TECNOLGICO DE CIUDAD VALLES
INGENIERA EN SISTEMAS COMPUTACIONALES

Profesor: Ing. Nitgard Zapata Garay
PROGRAMACIN WEB
Etiquetas de HTML-HTML5 y CSS
ELABORADO POR:
NOMBRE
JORGE LUIS SERVIN GARCIA
NUMERO DE CONTROL
11690194
Cd. Valles, SLP, a 18 de febrero de 2015
IT DE CD. VALLES
PROGRAMACION WEB
Contenido
1
ETIQUETAS DE HTML Y HTML5 ................................................................................................................. 1

1.1
<INPUT> ....................................................................................................................................................... 1
1.1.1
1.2
Ejemplo ............................................................................................................................................. 1
<FORM> ....................................................................................................................................................... 1
1.2.1
1.3
Ejemplo ............................................................................................................................................. 2
<TABLE> ....................................................................................................................................................... 2
1.3.1
1.4
Ejemplo ............................................................................................................................................. 2
<DIV> .......................................................................................................................................................... 3
1.4.1
1.5
Ejemplo ............................................................................................................................................. 3
<BODY> ........................................................................................................................................................ 3
1.5.1
1.6
Ejemplo ............................................................................................................................................. 4
<HEAD> ........................................................................................................................................................ 4
1.6.1
1.7
Ejemplo ............................................................................................................................................. 4
<TITLE> ........................................................................................................................................................ 5
1.7.1
1.8
Ejemplo ............................................................................................................................................. 5
<LINK> ......................................................................................................................................................... 5
1.8.1
1.9
Ejemplo ............................................................................................................................................. 5
<IMG> .......................................................................................................................................................... 6
1.9.1
1.10
Ejemplo ............................................................................................................................................. 6
<HEADER> ................................................................................................................................................ 6
1.10.1
1.11
<FOOTER> ................................................................................................................................................ 6
1.11.1
1.12
Ejemplo ........................................................................................................................................ 7
<ARTICLE> ................................................................................................................................................ 8
1.13.1
1.14
Ejemplo ........................................................................................................................................ 7
<SECTION> ............................................................................................................................................... 7
1.12.1
1.13
Ejemplo ........................................................................................................................................ 6
Ejemplo ........................................................................................................................................ 8
<NAV>..................................................................................................................................................... 8
1.14.1
Ejemplo ........................................................................................................................................ 8
Pgina i
IT DE CD. VALLES
PROGRAMACION WEB
CSS ........................................................................................................................................................... 9
2.1
MODELO DE CAJA ........................................................................................................................................... 9
2.2
FORMAS DE AGREGAR ESTILOS ........................................................................................................................ 12
2.2.1
CSS Directas .................................................................................................................................... 12
2.2.2
CSS Indirectas Fuera del Documento .............................................................................................. 12
2.2.3
CSS Indirectas Dentro del Mismo Documento ................................................................................ 14
2.3
SELECTOR UNIVERSAL (*) ............................................................................................................................... 15
2.4
ESTILOS POR ELEMENTOS HTML...................................................................................................................... 16
2.4.1
Especificacin del lenguaje de hojas de estilo por defecto ............................................................. 16
2.4.2
Informacin de estilo en lnea ......................................................................................................... 17
2.4.3
Informacin de estilo en cabecera: el elemento STYLE ................................................................... 17
2.4.4
Tipos de Medios .............................................................................................................................. 20
2.5
ESTILOS POR ID ............................................................................................................................................ 21
2.6
ESTILOS POR CLASS ...................................................................................................................................... 22
2.7
AGREGAR FUENTE AWESOME ....................................................................................................................... 23
BIBLIOGRAFA ........................................................................................................................................ 25
Pgina ii
IT DE CD. VALLES
PROGRAMACION WEB
1 Etiquetas de HTML y HTML5

1.1 <Input>
La etiqueta <input> se utiliza para el ingreso de datos por parte del usuario.
El campo del input depender del tipo de control que le asignemos al atributo type.
Text - entrada de texto de una lnea.

Password - entrada de texto de una lnea con caracteres ocultos.
Checkbox - casilla de verificacin.
Radio - radiobotn.
Submit - botn de envo.
Image - botn de envo grfico o mapa de imgenes.
Reset - botn de reinicializacin.
Button - botn pulsador.
Hidden - control oculto.
File - seleccin de archivo.
1.1.1 Ejemplo
<form action="ejemplo.php" method="get">
Nombre: <input type="text" name="nombre" /><br />
Contrasea: <input type="password" name="contra" /><br />
<input type="reset" value="Borrar" />
</form>
1.2 <Form>
La etiqueta <form> se utiliza para crear un formulario que le permita al usuario ingresar
datos.
Los datos del formulario sern enviados a un archivo procesador de datos que se
encuentra en el servidor.
Esta etiqueta acta como contenedor decontroles, por ejemplo:
Botones
Casillas de verificacin (checkboxes)
Radiobotones (radio buttons)
Mens
Entrada de texto (input)
Seleccin de ficheros (file select)
Etc.
Pgina 1
IT DE CD. VALLES
PROGRAMACION WEB
Como as tambin especifica:
El archivo que manejar el formulario completado y enviado.

El mtodo por el cual se enviarn los datos al servidor.
La codificacin de caracteres que debe ser aceptada por el servidor.
Como disponer los datos dentro del formulario.
1.2.1 Ejemplo
<form action="procesador_datos.php" method="get">
Nombre: <input type="text" name="nombre" />
Apellido: <input type="text" name="apellido" />
<input type="reset" value="Borrar" />
</form>
1.3 <Table>
La etiqueta <table> se utiliza para definir una tabla.
Las tablas se componen con las siguientes etiquetas:
<table> Define una tabla

<tr> Define una fila
<th> Define un encabezamiento
<td> Define una celda
Las tablas ms complejas pueden contener tambin estas etiquetas:
<caption>
<col>
<colgroup>
<thead>
<tbody>
<tfoot>
1.3.1 Ejemplo
<table border="1">
<tr>
<th>Nombres</th>
Pgina 2
IT DE CD. VALLES
PROGRAMACION WEB
<th>Edad</th>
</tr>
<tr>
<td>Mara</td>
<td>15</td>
</tr>
<tr>
<td>Juan</td>
<td>13</td>
</tr>
</table>
1.4 <Div>
La etiqueta <div> se utiliza para definir una seccin dentro del documento.
Esta etiqueta se usa comnmente para agrupar un bloque de elementos, para luego
aadirle un estilo determinado.
1.4.1 Ejemplo
<div style="color:red">
<h3>Grupo 1</h3>
<p>Este bloque tiene definido el texto de color rojo.</p>
</div>
<div style="color:green">
<h3>Grupo 2</h3>
<p>Este bloque tiene definido el texto de color verde.</p>
</div>
1.5 <Body>
La etiqueta <body> define el cuerpo de un documento.
Dentro del cuerpo del documento se incluye todo el contenido del mismo, por
ejemplo: textos, enlaces, imgenes, tablas, etc.
Pgina 3
IT DE CD. VALLES
PROGRAMACION WEB
1.5.1 Ejemplo
<html>
<head>
<title>Ttulo del documento</title>
</head>
<body>
Todo el contenido del documento...
</body>
</html>
1.6 <Head>
El elemento head define la cabecera del documento y contiene informacin del
mismo (metadatos, scripts, estilos, ubicacin de documentos de estilos, ttulo de la
pgina, etc.).
La cabecera de un documento puede contener las siguientes etiquetas:
<title> (obligatoria)
<meta>
<link>
<base>
<script>
<style>
1.6.1 Ejemplo
<html>
<head>
</head>
<body>
Todo el contenido del documento...
</body>
Pgina 4
IT DE CD. VALLES
PROGRAMACION WEB
</html>
1.7 <Title>
La etiqueta <title> define el ttulo de un documento.
Esta etiqueta es obligatoria dentro de la seccin head.
La etiqueta <title> se muestra en:
La barra superior del navegador.

Cuando lo agregamos a nuestros favoritos.
Los tabs de los nuevos navegadores.
Los resultados de los motores de bsqueda.
1.7.1 Ejemplo
<html>
<head>
</head>
<body>
Contenido del documento...
</body>
</html>
1.8 <Link>
La etiqueta <link> define un enlace entre el documento y algn recurso externo.
El elemento link debe ser ubicado en la seccin head del documento.
1.8.1 Ejemplo
<head>
<link rel="stylesheet" type="text/css" href="/estilos.css" />
</head>
Pgina 5
IT DE CD. VALLES
PROGRAMACION WEB
<body>
<p>Texto formateado gracias al enlace a las hojas de estilo</p>
</body>
1.9 <Img>
La etiqueta <img> incluye una imagen en el documento.
Esta imagen no es insertada tcnicamente en el documento, sino que se enlaza
hacia el mismo.
1.9.1 Ejemplo
<img src="/flores.jpg" alt="Un ramo de flores" />
1.10 <Header>
El etiqueta <header> representa un grupo de ayudas introductorias o de navegacin.
Puede contener algunos elementos de encabezado, pero tambin otros elementos
como un logo, una seccin que aglutine secciones de encabezados, una formulario
de bsqueda o cosas parecidas.
Nota de uso:
El elemento <header> no es contenido de seccin y, por lo tanto, no introduce
una nueva seccin en descripcin.
1.10.1 Ejemplo
<header>
<h1>HTML5 Paso a paso</h1>
<p>Mi nombre es Jorge Luis Servn Garca</p>
</header>
1.11 <Footer>
La etiqueta <footer> representa un pie de pgina para el contenido de seccin ms
cercano o el elemento raz de seccin. Un pie de pgina tpicamente contiene
informacin acerca del autor de la seccin, datos de derechos de autor o enlaces a
documentos relacionados.
Pgina 6
IT DE CD. VALLES
PROGRAMACION WEB
Notas de uso:
Encierra la informacin acerca del autor en un elemento <address> que puede

ser incluido dentro del elemento <footer>.
El elemento <footer> no es contenido de seccin y en consecuencia no

introduce una nueva seccin en el esquema.
1.11.1 Ejemplo
<footer>Este documento fue escrito en 2014.</footer>
1.12 <Section>
Su uso es similar al elemento <div>, con la particularidad de que <section> se utiliza
para agrupar contenido relacionado, es decir representa una seccin del documento
con elementos de un mismo tema. Una recomendacin general es que comience con
un ttulo (h1-h6). Por tanto, una buena forma de saber si tenemos que utilizar la
etiqueta <section> es cuando tengamos la necesidad de aplicar un encabezado.
1.12.1 Ejemplo
<section>
<header>
<h1>Listado de noticias breves</h1>
</header>
<article>
<header>
<h2>Noticia 1</h2>
<p>Texto de breve de la noticia 1</p>
</header>
</article>
<article>
<header>
<h2>Noticia 2</h2>
</header>
</article>
<article>
<header>
<h2>Noticia 3</h2>
</header>
</article>
</section>
Pgina 7
IT DE CD. VALLES
PROGRAMACION WEB
1.13 <Article>
La etiqueta <article> representa una composicin auto-contenida en un documento,
pgina, una aplicacin o en el sitio, que se destina a distribuir de forma
independiente o reutilizable, por ejemplo, en la sindicacin. Podra ser un mensaje en
un foro, un artculo de una revista o un peridico, una entrada de blog, un comentario
de un usuario, un widget interactivo o gadget, o cualquier otro elemento
independiente del contenido.
Notas de uso:
Cuando los elementos <article> estn anidados, los internos representan artculos
relacionados con el exterior. Por ejemplo, los comentarios de un blog pueden ser
elementos <article> anidados al que representa la entrada del blog.
Los datos del autor de un elemento <article> pueden ser proporcionados a travs del
elemento <address>, pero no se aplica a los elementos<article> anidados.
La fecha de publicacin y el tiempo de un elemento <article> pueden ser descritos
con el atributo pubdate atributo de un elemento <time>.
1.13.1 Ejemplo
<article>
<header>
<h1>Section y article, diferencias</h1>
<p><time datetime="2013-01-17T14:28-08:00">17 de enero, 2013</time></p>
</header>
<p>La especificacin actual del HTML5 da bastante libertad al diseador a la hora de utilizar unas
etiquetas u otras.</p>
<p>...</p>
<footer>
<a href="?comments=1">Mostrar comentarios...</a>
</footer>
</article>
1.14 <Nav>
Crea un men de navegacin.
1.14.1 Ejemplo
<nav>
Pgina 8
IT DE CD. VALLES
PROGRAMACION WEB
<ul>
<li><a href="DireccionPagina"> Item de Navegacin 1 </li>
<li><a href="DireccionPagina"> Item de Navegacin 2 </li>
<li><a href="DireccionPagina"> Item de Navegacin Etc </li>
</ul>
</nav>
2 CSS
2.1 Modelo de Caja
El modelo de caja o "box model" es seguramente la caracterstica ms importante del
lenguaje de hojas de estilos CSS, ya que condiciona el diseo de todas las pginas
web. El modelo de cajas es el comportamiento de CSS que hace que todos los
elementos de las pginas se representen mediante cajas rectangulares.
Las cajas de una pgina se crean automticamente. Cada vez que se inserta una
etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de
ese elemento. La siguiente imagen muestra las tres cajas rectangulares que crean
las tres etiquetas HTML que incluye la pgina:
Las cajas se crean automticamente al definir cada elemento HTML
Pgina 9
IT DE CD. VALLES
PROGRAMACION WEB
Las cajas de las pginas no son visibles a simple vista porque inicialmente no muestran
ningn color de fondo ni ningn borde. La siguiente imagen muestra las cajas que
forman la pgina web de http://www.alistapart.com/ despus de forzar a que todas las
cajas muestren su borde:
Cajas que forman la pgina alistapart.com

Los navegadores crean y colocan las cajas de forma automtica, pero CSS permite
modificar todas sus caractersticas. Cada una de las cajas est formada por seis
partes, tal y como muestra la siguiente imagen:
Representacin tridimensional del box model de CSS

10
Pgina
IT DE CD. VALLES
PROGRAMACION WEB
Las partes que componen cada caja y su orden de visualizacin desde el punto de
vista del usuario son las siguientes:
Contenido (content): se trata del contenido HTML del elemento (las palabras de
un prrafo, una imagen, el texto de una lista de elementos, etc.)
Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
Borde (border): lnea que encierra completamente el contenido y su relleno.
Imagen de fondo (background image): imagen que se muestra por detrs del
contenido y el espacio de relleno.
Color de fondo (background color): color que se muestra por detrs del
contenido y el espacio de relleno.
Margen (margin): separacin opcional existente entre la caja y el resto de cajas

adyacentes.
El relleno y el margen son transparentes, por lo que en el espacio ocupado por el

relleno se muestra el color o imagen de fondo (si estn definidos) y en el espacio
ocupado por el margen se muestra el color o imagen de fondo de su elemento padre
(si estn definidos). Si ningn elemento padre tiene definido un color o imagen de
fondo, se muestra el color o imagen de fondo de la propia pgina (si estn definidos).
Si una caja define tanto un color como una imagen de fondo, la imagen tiene ms
prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre
totalmente la caja del elemento o si la imagen tiene zonas transparentes, tambin se
visualiza el color de fondo. Combinando imgenes transparentes y colores de fondo
se pueden lograr efectos grficos muy interesantes.
11
Pgina
IT DE CD. VALLES
PROGRAMACION WEB
2.2 Formas de Agregar Estilos

2.2.1 CSS Directas
Las CSS directas se usan para poder aplicar un estilo a una parte del texto concreta.
Para ello debemos utilizar el parmetro style. Observa el siguiente cdigo de
ejemplo:
<X style= atributo1:valor1;atributo2:valor2;>Aqu va el texto al que se le aplicar el estilo</style>
X sera la etiqueta html a la que se le ha aplicado el estilo, mediante el parmetro

style. X puede ser un prrafo (<p>), una capa con salto de lnea (<div>), una capa
sin efecto (<span>), etc.
Tambin apreciamos que el estilo est definido por unos atributos con un valor
(atributo1:valor1), separados entre ellos por punto y coma.
Gracias al siguiente cdigo lo comprenderemos mucho mejor:
El texto que veremos a continuación <span style="fontsize:23px;color:#0000FF">estará
en azul y en un tamaño más grande</span> gracias a la css directa
que hemos aplicado sobre él.
Observa a continuacin su efecto:

El texto que veremos a continuacin
estar en azul y en un tamao ms
grande gracias a la css directa que hemos aplicado sobre l.

2.2.2 CSS Indirectas Fuera del Documento
Otra forma de aplicar CSS es a travs de unos estilos que se encuentran fuera del
documento, pero al que se aplicarn esos estilos. Esta forma de aplicar CSS es til si
queremos aplicar los mismos estilos a diferentes documentos html.
Deberemos crear por tanto un documento de extensin .css donde estarn
determinados los diferentes estilos. Y desde cada hoja en la que queramos
aplicarlos, habr que indicar que debe buscar los estilos en ese documento. Para
ello, debemos incluir la siguiente etiqueta con los siguientes atributos:
<link rel="stylesheet" type="text/css" href="urlhojadeestilos.css">
12
Pgina
IT DE CD. VALLES
PROGRAMACION WEB
Expliquemos a continuacin los diferentes atributos de la etiqueta <link>:

El atributo "rel" debe ir con el valor "stylesheet" ya que est definiendo que link se
est usando para insertar una hoja de estilo. El atributo "type" con valor "text/css"
indica que el tipo de sintaxis que usa la hoja de estilo es CSS. Por ltimo, el atributo
"href" especificar la ubicacin y el nombre de la hoja de estilo.
En este documento html de aqu veris un ejemplo de esta forma de aplicar las
CSS: Ejemplo de forma de aplicar CSS.
Para que les puedas echar un vistazo a continuacin te dejamos el cdigo del
documento html:
<html>
<head>
<title>Un ejemplo prctico de css en un documento externo</title>
<link rel="stylesheet" type="text/css"
href="http://css.hazunaweb.com/css/ejemplos/ejemplocss.css">
</head>
<body>
Como en la hoja de estilo hemos dicho que el body fuera con fondo blanco, con
un texto de tamaño 10 y centrado, ésta será la apariencia
principal de la página.
<p>Aquí tenemos un prrafo. Como también le hemos aplicado un estilo,
podemos ver el texto del párrafo de color azul y con un tamaño
ligeramente superior.</p>
<p id="estilo1"> A este prrafo le hemos aplicado el estilo1, por lo que el
texto tiene un fondo negro, un texto en blanco y un tamaño de 15 px.</p>
<div class="clase1">Este texto posee unas características propias de la
clase 1. No es que sea un estilo muy bonito, pero por lo menos se entiende bien,
¿¿no?? </div><br>
<h1>Y aquí tenemos un último estilo.</h1>
Pues estos han sido todos los estilos que teníamos preperados para ti.
Este tiene otra vez el estilo predeterminado para body.
</body>
</html>
Y tambin el del documento CSS con las hojas de estilo:

body{
font:10px;
text-align:center;
background-color:#ffffff;
}
p{
font-size:12ppx;
13
Pgina
IT DE CD. VALLES
PROGRAMACION WEB
color:#0000FF;
text-align:left;
}
h1{
color:#FF0000;
text-align:left;
}
.clase1{
font-style:italic;
font-size:20px;
border-bottom:1px #000000 dashed;
text-align:left;
}
#estilo1{
color:#FFFFFF;
font-size:15px;
background-color: #000000;
text-align:left;
}
2.2.3 CSS Indirectas Dentro del Mismo Documento

Este tipo de hojas de estilo se aplican cuando queremos que los estilos de las CSS se apliquen
de una forma global a todas las etiquetas de un documento.
Por ejemplo, queremos que todo el cuerpo del documento, el body", tenga un determinado
tipo de letra, que los prrafos tengan un color determinado, que las cabeceras tengan un
tamao igual entre ellas, etc. Para conseguir estos propsitos, las CSS indirectas son ideales.
Para aplicar una CSS indirecta dentro del mismo documento, utilizaremos la etiqueta <style>.
La colocaremos en la cabecera del documento. Entre esta etiqueta y su cierre (</style>)
escribiremos todos los estilos que queramos definir en el documento.
El cdigo de la estructura bsica de este tipo de CSS sera el siguiente:
<html>
<head>
Aqu van los datos de la cabececera del documento
<style type="text/css">
<!-Aqu escribiramos los diversos estilos que queramos aplicar
-->
</style>
14
Pgina
IT DE CD. VALLES
PROGRAMACION WEB
</head>
<body>
Aqu va el cuerpo del documento, todo el contenido
</body>
</html>
Observa como a la etiqueta style" le hemos puesto el atributo type=text/css". Indicar

este atributo no es necesario, pero s muy recomendable, pues le est indicando al
navegador el tipo de sintaxis que usa la hoja de estilo.
Observa como hemos puesto los estilos como si fueran comentarios. Anteriormente
los estilos se escriban as para ocultar las hojas de estilo a los navegadores que no
las reconocieran. Actualmente, todos los navegadores las reconocen, as que
escribirlo de esta manera es innecesario.
2.3 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;
}
El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no

se utiliza habitualmente, ya que es difcil que un mismo estilo se pueda aplicar a
todos los elementos de una pgina.
No obstante, s que se suele combinar con otros selectores y adems, forma parte de
algunos hacks muy utilizados, como se ver ms adelante.
15
Pgina
IT DE CD. VALLES
PROGRAMACION WEB
2.4 Estilos por Elementos HTML

Los documentos HTML pueden contener reglas de hojas de estilo directamente, o
bien pueden importar hojas de estilo.
Se puede usar cualquier lenguaje de hojas de estilo con HTML. Un lenguaje simple
de hojas de estilo puede ser suficiente para la mayora de los usuarios, pero para
otras necesidades ms especializadas pueden ser apropiados otros lenguajes. Esta
especificacin utiliza para los ejemplos el lenguaje de estilo llamado "Hojas de Estilo
en Cascada" ("Cascading Style Sheets", [CSS1]), abreviado CSS.
La sintaxis de los datos de estilo depende del lenguaje de hojas de estilo.
2.4.1 Especificacin del lenguaje de hojas de estilo por defecto
Los autores deben especificar el lenguaje de hojas de estilo de la informacin de
estilo asociada con un documento HTML.
Los autores deberan usar el elemento META para especificar el lenguaje de hojas
de estilo por defecto de un documento. Por ejemplo, para especificar que el valor por
defecto es CSS, los autores deberan poner la siguiente declaracin en la
seccin HEAD de sus documentos:
<META http-equiv="Content-Style-Type" content="text/css">
El lenguaje de hojas de estilo por defecto tambin puede ser establecido con
encabezados HTTP. La declaracin META de arriba es equivalente al encabezado
HTTP siguiente:
Content-Style-Type: text/css
Los agentes de usuario deberan determinar el lenguaje de hojas de estilo por

defecto de acuerdo con los siguientes pasos (ordenados de mayor a menor
prioridad):
1. Si alguna declaracin META especfica "Content-Style-Type", la ltima de
ellas en el flujo de caracteres determina el lenguaje de hojas de estilo por
defecto.
2. De otro modo, si algn encabezado HTTP especfica "Content-Style-Type", el
ltimo de ellos en el flujo de caracteres determina el lenguaje de hojas de
estilo por defecto.
3. De otro modo, el lenguaje de hojas de estilo por defecto es "text/css".
Los documentos que incluyan elementos que especifiquen el atributo style pero que
no definan un lenguaje de hojas de estilo por defecto son incorrectos.
16
Pgina
IT DE CD. VALLES
PROGRAMACION WEB
Las herramientas de creacin deberan generar informacin de lenguaje de hojas de

estilo por defecto (normalmente una declaracin META) de modo que los agentes de
usuario no tengan que atenerse al valor por defecto "text/css".
2.4.2 Informacin de estilo en lnea
Definiciones de atributos
style = estilo [CN]
Este atributo especifica informacin de estilo para el elemento actual.
La sintaxis del valor del atributo style viene determinada por el lenguaje de hojas de
estilo por defecto. Por ejemplo, para los estilos [[CSS2]] en lnea, se usa la sintaxis
de bloque de declaraciones descrita en la seccin 4.1.8 (sin las llaves).
Este ejemplo CSS establece informacin sobre el color y el tamao de la fuente del
texto de un prrafo especfico.
<P style="font-size: 12pt; color: fuchsia">No son maravillosas las hojas de estilo?
En CSS, las declaraciones de propiedades son de la forma "nombre: valor" y estn

separadas por un punto y coma.
Para especificar informacin de estilo en lnea para ms de un elemento, los autores
deberan usar el elemento STYLE. Para lograr una flexibilidad ptima, los autores
deberan definir los estilos en hojas de estilo externas.
2.4.3 Informacin de estilo en cabecera: el elemento STYLE
<!ELEMENT STYLE - - %StyleSheet
-- informacin de estilo -->
<!ATTLIST STYLE
%i18n;
-- lang, dir, para usar con title -type
%ContentType; #REQUIRED -- tipo de contenido del lenguaje de estilos -media
%MediaDesc; #IMPLIED -- diseado para usar con estos medios -title
%Text;
#IMPLIED -- ttulo consultivo ->
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria

Definiciones de atributos
type = tipo de contenido [CI]
17
Pgina
IT DE CD. VALLES
PROGRAMACION WEB
Este atributo especifica el lenguaje de hojas de estilo de los contenidos del

elemento y prevalece sobre el lenguaje de hojas de estilo por defecto. El
lenguaje de hojas de estilo se especifica como un tipo de contenido (p.ej.,
"text/css"). Los autores deben proporcionar un valor para este atributo; no hay
valor por defecto para este atributo.
media = descriptores de medios [CI]
Este atributo especifica el medio destino al que se dirige la informacin de
estilo. Puede ser un solo descriptor de medios, o una lista de ellos separados
por comas. El valor por defecto de este atributo es "screen" (pantalla).
Atributos definidos en otros lugares
lang (informacin sobre el idioma), dir (direccin del texto)

title (ttulo del elemento)
El elemento STYLE permite a los autores poner reglas de hojas de estilo en

la cabecera del documento. HTML permite cualquier nmero de
elementos STYLE en la seccin HEAD de un documento.
Los agentes de usuario que no soporten hojas de estilo, o que no soporten el
lenguaje de hojas de estilo utilizado por un elemento STYLE en particular, deben
ocultar los contenidos del elemento STYLE. Es un error representar el contenido
como parte del texto del documento. Algunos lenguajes de hojas de estilo soportan
sintaxis para ocultar el contenido a agentes de usuarios no conformes.
La sintaxis de los datos de estilo depende del lenguaje de hojas de estilo.
Algunas implementaciones de hojas de estilo pueden permitir una gama ms amplia
de reglas en el elemento STYLE que en el atributo style. Por ejemplo, con CSS,
pueden declararse reglas dentro de un elemento STYLE para:
Todas las apariciones de un elemento de HTML especfico (p.ej., todos los

elementos P, todos los elementos H1, etc.)
Todas las apariciones de un elemento de HTML que pertenezcan a una clase
especfica (es decir, cuyo atributo class tome cierto valor).
Las apariciones nicas de un elemento de HTML (es decir, cuyo
atributo id tome cierto valor).
18
Pgina
IT DE CD. VALLES
PROGRAMACION WEB
Las reglas de precedencia y herencia de las reglas de estilo dependen del lenguaje
de hojas de estilo.
La siguiente declaracin STYLE CSS pone un borde alrededor de todos los
elementos H1 del documento y los centra en la pgina.
<HEAD>
<STYLE type="text/css">
H1 {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
Para especificar que esta informacin de estilo slo debera aplicarse a los
elementos H1 de una clase especfica, la modificamos como sigue:
<HEAD>
H1.miclase {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miclase"> Este H1 est afectado por nuestro estilo </H1>
<H1> Este no est afectado por nuestro estilo </H1>
</BODY>
Finalmente, para limitar el alcance de la informacin de estilo a una sola aparicin

de H1, establecemos el atributo id:
<HEAD>
#miid {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miclase"> Este H1 no est afectado </H1>
<H1 id="miid"> Este H1 est afectado por el estilo </H1>
<H1> Este H1 no est afectado </H1>
</BODY>
Aunque se puede especificar informacin de estilo prcticamente para cualquier

elemento, hay dos elementos, DIV y SPAN, que son particularmente tiles en el
sentido de que no imponen ningn significado presentacional (aparte de la
distincin en bloque/en lnea). Combinados con hojas de estilo, estos elementos
permiten a los usuarios extender el HTML indefinidamente, en especial si se utilizan
junto con los atributos class e id.
En el siguiente ejemplo, utilizamos el elemento SPAN para especificar que el estilo
de fuente de las primeras palabras de un prrafo sea versalitas ("small-caps").
19
Pgina
IT DE CD. VALLES
PROGRAMACION WEB
<HEAD>
SPAN.ver-ex { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="ver-ex">Las primeras</SPAN> palabras
de este prrafo van en versalitas.
</BODY>
En el siguiente ejemplo, utilizamos el elemento DIV y el atributo class para establecer

la justificacin del texto de una serie de prrafos que constituyen el abstracto de un
artculo cientfico. Esta informacin de estilo podra reutilizarse para otras secciones
de abstracto especificando el valor correspondiente del atributo class en cualquier
otro lugar del documento.
<HEAD>
DIV.Abstracto { text-align: justify }
</STYLE>
</HEAD>
<BODY>
<DIV class="Abstracto">
<P>La gama de productos Gran Jefe es nuestra apuesta
para el ao que viene. Este informe sienta las bases
para confrontar a Gran Jefe con los productos de la
competencia.
<P>Gran Jefe reemplaza a nuestra gama "Commander",
si bien sta seguir de momento en catlogo.
</DIV>
</BODY>
2.4.4 Tipos de Medios

HTML permite a los autores disear documentos que saquen partido de las
caractersticas de los medios en los que el documento vaya a ser representado (p.ej.,
pantallas grficas, pantallas de televisin, dispositivos de mano, navegadores
basados en voz, dispositivos tctiles Braille, etc.). Al especificar el atributo media, los
autores permiten a los agentes de usuario cargar y aplicar las hojas de estilo de
manera selectiva. Consulte la lista de descriptores de medios reconocidos.
Las siguientes declaraciones de ejemplo se aplican a elementos H1. Cuando se
proyecten en una reunin de negocios, todos ellos aparecern en azul. Cuando se
impriman, aparecern centrados.
<HEAD>
<STYLE type="text/css" media="projection">
H1 { color: blue }
</STYLE>
20
Pgina
IT DE CD. VALLES
PROGRAMACION WEB
<STYLE type="text/css" media="print">

H1 { text-align: center }
</STYLE>
Este ejemplo aade efectos de sonido a los vnculos para su uso en salidas por voz:
<STYLE type="text/css" media="aural">
A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
</STYLE>
</HEAD>
El control de medios es particularmente interesante cuando se aplica a hojas de

estilo externas, ya que los agentes de usuario pueden ahorrar tiempo si obtienen de
la red nicamente aquellas hojas de estilo que se apliquen el dispositivo actual. Por
ejemplo, los navegadores basados en voz pueden evitar la descarga de hojas de
estilo diseadas para la representacin visual. Vese la seccin sobre cascadas
dependientes del medio para ms informacin.
2.5 Estilos por ID

El atributo id es similar a class (Permite llamar desde un elemento a un cdigo
CSS) con la diferencia de que el atributo id solo puede aplicarse a un elemento, no a
tantos como quisiramos, como se haca con el atributo class.
Es decir, el atributo ID sirve para identificar un elemento, y solo debe usarse para
identificar un nico elemento, si queremos que pertenezcan a varios elementos
entonces debemos usar las clases. Se podra decir que las clases son para grupos.
Con el atributo ID tambin se puede dirigir al visitante a un punto de la pgina (<a
href=#ID>texto</a>).
Un uso incorrecto de las clases sera definir las clases para un nico elemento,
porque se puede utilizar #ID para este propsito. Por ejemplo, cuando debemos
identificar una nica cabecera (class=header).
Un uso incorrecto de los #IDs es definir los estilos de cada elemento de forma
individual en lugar de agrupar todos los estilos que sean comunes y aplicarlos
por clases.
Un ejemplo con el atributo id sera este:
<div id="elegante">
Soy un simple texto en un div.
</div&gt
El cdigo CSS para efectuar el estilo del id sera este:
#elegante{
21
Pgina
IT DE CD. VALLES
PROGRAMACION WEB
width: 90%;
padding: 10px;
border: 2px dashed #CCC;
background: white;
}
2.6 Estilos por CLASS

Es normal querer definir unos estilos globales en hojas externas que
homogeneicen el aspecto de nuestras pginas, y luego, en una pgina
concreta querer variar el estilo en alguna etiqueta concreta.
Como ya sabemos, esto podemos hacerlo definiendo el estilo localmente
en esa etiqueta.
Pero tambin puede suceder que esta definicin de un estilo concreto
queramos aplicarla a otra etiqueta.
Una clase es una definicin de un estilo que en principio no est asociado
a alguna etiqueta HTML, pero que podemos asociar a etiquetas concretas.
Para ello, en primer lugar definimos la clase:
.nombre_de_nuestra_clase {valor1: valor; valor2 : valor, etc...}
Es decir, escribiendo un punto seguido del nombre que le queramos dar a
la clase, y definiendo el estilo como lo definimos para cualquier otra
etiqueta: para propiedad: valor separados por punto y coma y encerrados
entre llaves. Adems, podremos definir cuantas clases necesitemos.
Para aplicar el estilo de una clase a una etiqueta utilizamos el parmetro
CLASS:
<etiqueta CLASS="nombre_de_nuestra_clase" >... </etiqueta>
Donde nombre_de_nuestra_clase es el nombre que le hemos dado a la
clase, sin el punto.
Mediante la definicin de 'clases' se establecen estilos que pueden
aplicarse a cualquier etiqueta de HTML. El estilo no se vincula a una
etiqueta concreta sino a una 'clase'.
Esta clase, acta como atributo de cualquier etiqueta, cada vez que se
quiera llamar a ese estilo, basta con incluir el nombre de esa clase dentro
de la etiqueta correspondiente.
22
Pgina
IT DE CD. VALLES
PROGRAMACION WEB
<HTML>
<HEAD>
<TITLE>Titulo</TITLE>
<STYLE TYPE="text/css">
H1.nuevaclase { color:red; }
.nuevaclase2 {color:blue;}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="nuevaclase">Este texto aparece en rojo</H1>
<H1>Este texto aparece como un H1 normal</H1>
<H1 class="nuevaclase2">Este texto aparece en blue</H1>
<P class="nuevaclase">Este texto aparece en rojo</P>
</BODY>
</HTML>
Se pueden establecer clases separadas. Una mism a etiqueta HTML puede
tener diferentes "clases", permitiendo que un mismo elemento ofrezca
diferentes estilos, por ejemplo:
H1.clase1 {font: 15px; color: red;}
H1.clase2 {font: 15px; color: blue;}
H1.clase3 {font: 15px; color: green;}
Esto se transformara a nivel de cdigo:
<H1 CLASS="clase1 ">Este texto se vera en color rojo</H1>
<H1 CLASS="clase2">Este texto se vera en color blue</H1>
<H1 CLASS="clase3">Este texto se vera en color green</H1>
2.7 Agregar Fuente AWESOME

Es una fuente de cdigo abierto con la que resulta muy fcil aadir iconos a cualquier
sitio web, ya que lo que en un principio seran las letras, nmeros y los caracteres
habitualmente usados, en este caso se convierten en dibujos.
La gracia est en que esos dibujos son justo los que habitualmente se necesitan para
aadir pequeos (o grandes) detalles a un sitio web y en ese sentido esta fuente ha
tenido bastante acierto a la hora de elegir los diseos.
Cierto es que no vamos a encontrar todos los que se nos pasen por la cabeza, pero
con los 369 que actualmente componen la coleccin y los que se van aadiendo
progresivamente, difcil es que no cubramos nuestras necesidades bsicas: logos de
redes sociales, smbolos de direccin (flechas), mandos para reproductores,
23
Pgina
IT DE CD. VALLES
PROGRAMACION WEB
comandos, correo, cmara fotogrfica, pelculas, casa, candado, bocadillo de

cmic... En fin, una lista muy larga.
Y muy importante... Awesome es GPL, o lo que es lo mismo, se distribuye bajo
Licencia Pblica General. As que como es software totalmente libre, tienes absoluta
libertad para usar, estudiar, compartir (copiar) y modificar cualquier cosa a tu antojo y
sin limitaciones. Puede tambin ser utilizada con fines comerciales y ni siquiera
requiere atribucin.
Las ventajas de usar este tipo de fuentes en lugar de imgenes son muchas:
Escalabilidad. Al ser una fuente, slo con indicar el tamao reduciremos o

agrandaremos el icono sin lmites.
Los iconos sern fcilmente modificables en cuanto a colores, sombras,
rotaciones o cualquier otra cosa que sea posible hacer con CSS.
Si descargas todos los ficheros necesarios su peso total es inferior a
500KB y os recuerdo que son ms de 300 "imgenes".
No necesita Javascript, lo que implica menos problemas de
compatibilidad.
Por su naturaleza vectorial son ideales para pantallas de alta resolucin.
24
Pgina
IT DE CD. VALLES
PROGRAMACION WEB
3 Bibliografa
http://www.virtualnauta.com/html-etiqueta-input
http://www.virtualnauta.com/html-etiqueta-form
http://www.virtualnauta.com/html-etiqueta-table
http://www.virtualnauta.com/html-etiqueta-div
http://www.virtualnauta.com/html-etiqueta-head
http://www.virtualnauta.com/html-etiqueta-title
http://www.virtualnauta.com/html-etiqueta-link
http://www.virtualnauta.com/html-etiqueta-img
https://developer.mozilla.org/es/docs/Web/HTML/Elemento/header
https://developer.mozilla.org/es/docs/Web/HTML/Elemento/footer
https://developer.mozilla.org/es/docs/HTML/Elemento/section
http://www.juanancobo.com/blog/section-y-article-de-html5-diferencias/
https://developer.mozilla.org/es/docs/Web/HTML/Elemento/article
https://developer.mozilla.org/es/docs/Web/HTML/Elemento/nav
http://librosweb.es/libro/css/capitulo_4.html
http://css.hazunaweb.com/202.php
http://css.hazunaweb.com/203.php
http://librosweb.es/libro/css/capitulo_2/selectores_basicos.html
http://html.conclase.net/w3c/html401-es/present/styles.html#h-14.2
25
Pgina
IT DE CD. VALLES
PROGRAMACION WEB
http://www.cssblog.es/css-id-del-elemento/
http://www.usabilidad.tv/hojas_de_estilos_css/clases.asp
http://www.oloblogger.com/2014/02/fuente-iconos-awesome.html
26
Pgina

Investigación Etiquetas de HTML-HTML5 y CSS

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Investigación Etiquetas de HTML-HTML5 y CSS

Cargado por

Copyright:

Formatos disponibles

INSTITUTO TECNOLGICO DE CIUDAD VALLES

INGENIERA EN SISTEMAS COMPUTACIONALES

Cd. Valles, SLP, a 18 de febrero de 2015

ETIQUETAS DE HTML Y HTML5 ................................................................................................................. 1

JORGE LUIS SERVIN GARCIA

MODELO DE CAJA ........................................................................................................................................... 9

FORMAS DE AGREGAR ESTILOS ........................................................................................................................ 12

CSS Directas .................................................................................................................................... 12

CSS Indirectas Fuera del Documento .............................................................................................. 12

CSS Indirectas Dentro del Mismo Documento ................................................................................ 14

SELECTOR UNIVERSAL (*) ............................................................................................................................... 15

ESTILOS POR ELEMENTOS HTML...................................................................................................................... 16

Especificacin del lenguaje de hojas de estilo por defecto ............................................................. 16

Informacin de estilo en lnea ......................................................................................................... 17

Informacin de estilo en cabecera: el elemento STYLE ................................................................... 17

Tipos de Medios .............................................................................................................................. 20

ESTILOS POR ID ............................................................................................................................................ 21

ESTILOS POR CLASS ...................................................................................................................................... 22

AGREGAR FUENTE AWESOME ....................................................................................................................... 23

JORGE LUIS SERVIN GARCIA

1 Etiquetas de HTML y HTML5

Text - entrada de texto de una lnea.

Como as tambin especifica:

El archivo que manejar el formulario completado y enviado.

<table> Define una tabla

Las tablas ms complejas pueden contener tambin estas etiquetas:

JORGE LUIS SERVIN GARCIA

JORGE LUIS SERVIN GARCIA

JORGE LUIS SERVIN GARCIA

La barra superior del navegador.

JORGE LUIS SERVIN GARCIA

Encierra la informacin acerca del autor en un elemento <address> que puede

El elemento <footer> no es contenido de seccin y en consecuencia no

JORGE LUIS SERVIN GARCIA

JORGE LUIS SERVIN GARCIA

Las cajas se crean automticamente al definir cada elemento HTML

JORGE LUIS SERVIN GARCIA

Cajas que forman la pgina alistapart.com

Representacin tridimensional del box model de CSS

Relleno (padding): espacio libre opcional existente entre el contenido y el borde.

Borde (border): lnea que encierra completamente el contenido y su relleno.

Margen (margin): separacin opcional existente entre la caja y el resto de cajas

El relleno y el margen son transparentes, por lo que en el espacio ocupado por el

JORGE LUIS SERVIN GARCIA

2.2 Formas de Agregar Estilos

X sera la etiqueta html a la que se le ha aplicado el estilo, mediante el parmetro

Observa a continuacin su efecto:

estar en azul y en un tamao ms

grande gracias a la css directa que hemos aplicado sobre l.

JORGE LUIS SERVIN GARCIA

Expliquemos a continuacin los diferentes atributos de la etiqueta <link>:

Y tambin el del documento CSS con las hojas de estilo:

2.2.3 CSS Indirectas Dentro del Mismo Documento

JORGE LUIS SERVIN GARCIA

Observa como a la etiqueta style" le hemos puesto el atributo type=text/css". Indicar

2.3 Selector Universal (*)

El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no

JORGE LUIS SERVIN GARCIA

2.4 Estilos por Elementos HTML

Los agentes de usuario deberan determinar el lenguaje de hojas de estilo por

Las herramientas de creacin deberan generar informacin de lenguaje de hojas de

En CSS, las declaraciones de propiedades son de la forma "nombre: valor" y estn

Etiqueta inicial: obligatoria, Etiqueta final: obligatoria

JORGE LUIS SERVIN GARCIA