Taller DSW v2

Universidad Tecnolgica de Len
Sistema de Gestin de Calidad y Ambiental
PLANEACIN DE TALLER
Nombre de Taller: Diseo de Sitios Web
Carrera (s): Tecnologas de la Informacin y Comunicacin
Cuatrimestre: Primero
Alumno:
Grupo:
Periodo: SeptiembreDiciembre 2013
Matricula:
Lenguaje de Marcado de Hipertexto

Qu es HTML?
HTML es un lenguaje para describir las pginas web.

HTML significa Hyper Text Markup Language, Lenguaje de marcado de hipertexto.
Las etiquetas describen el contenido del documento
Documentos HTML contienen etiquetas HTML y texto plano
Los documentos HTML son tambin llamados pginas web
Y Qu son las Etiquetas?
Etiquetas HTML son palabras clave (nombres de etiqueta) rodeadas por corchetes angulares como <html>, conocidas tambin
como elementos de HTML.
Etiquetas HTML normalmente vienen en pares como <b> y </ b>. La primera etiqueta en una pareja es la etiqueta de inicio, la
segunda etiqueta es la etiqueta de cierre.
La etiqueta final se escribe igual que la etiqueta inicial, con una barra diagonal antes del nombre de la etiqueta.
Las etiquetas pueden tener un contenido, y debe estar especificado entre la etiqueta inicial y la de cierre.
<NombreEtiqueta> contenido </NombreEtiqueta>
Diseo de Sitios Web
Y Los Atributos?
Los atributos proporcionan informacin adicional acerca de los elementos HTML.

Atributos siempre se especifican en la etiqueta de apertura
Atributos vienen en pares nombre/valor, como: nombre = "valor"
Ejemplo <body bgcolor="red">
Estructura global
Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento est diferenciada, declarada y
determinada por etiquetas especficas. En esta parte del captulo vamos a ver cmo construir la estructura global de un documento
HTML y los nuevos elementos semnticos incorporados en HTML5.
<!DOCTYPE html>
<html>
<head> </head>
<body>
<header> </header>
<nav> </nav>
<article>
<section>
</section>
</article>
<aside>
</aside>
<footer> </footer>
</body>
</html>
Ilustracin 1 Ejemplo de la estructura de una pgina web con HTML5
Diseo de Sitios Web
<!DOCTYPE html>
En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5.
IMPORTANTE: Esta lnea debe ser la primera lnea del archivo, sin espacios o lneas que la precedan.
<html>
Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Como siempre, la
estructura tipo rbol de este lenguaje tiene su raz en el elemento <html>. Este elemento envolver al resto del
cdigo.
<head>
El elemento <head> definiremos el ttulo de nuestra pgina web, declararemos el set de caracteres correspondiente,
proveeremos informacin general acerca del documento e incorporaremos los archivos externos con estilos, cdigos
Javascript o incluso imgenes necesarias para generar la pgina en la pantalla.
<body>
El cuerpo representa la parte visible de todo documento y es especificado entre etiquetas <body>.
<header>
Elemento <header> representa un grupo de artculos introductorios o de navegacin.
<nav>
El elemento <nav> representa una seccin de una pgina que es un link a otras pginas o a partes dentro de la pgina:
una seccin con links de navegacin.
<article>
El elemento de artculo representa un componente de una pgina que consiste en una composicin autnoma en un
documento, pgina, aplicacin, o sitio web con la intencin de que pueda ser reutilizado y repetido.
<section>
Diseo de Sitios Web
Se utiliza para representar una seccin general dentro de un documento o aplicacin, como un captulo de un libro.
Puede contener subsecciones y si lo acompaamos de h1-h6 podemos estructurar mejor toda la pgina creando
jerarquas del contenido, algo muy favorable para el buen posicionamiento web.
<aside>
Representa una seccin de la pgina que abarca un contenido tangencialmente relacionado con el contenido que lo
rodea, por lo que se le puede considerar un contenido independiente. Este elemento puede utilizarse para efectos
tipogrficos, barras laterales, elementos publicitarios, para grupos de elementos de la navegacin, u otro contenido
que se considere separado del contenido principal de la pgina.
<footer>
El elemento <footer> representa el pi de una seccin, con informacin acerca de la pgina/seccin que poco tiene
que ver con el contenido de la pgina, como el autor, el copyright o el ao.
Elementos incluidos en <head>

<meta>
La etiqueta <meta> que especifica cmo el texto ser presentado en pantalla. Debe estar dentro de la etiqueta
<head>.
Hay varios tipos de etiqueta <meta> que pueden ser incluidas para declarar informacin general sobre el documento,
pero esta informacin no es mostrada en la ventana del navegador, es solo importante para motores de bsqueda y
dispositivos que necesitan hacer una vista previa del documento u obtener un sumario de la informacin que
contiene.
<head>
<meta charset="iso-8859-1" />

<meta name="description" content="Ejemplo de HTML5" />
<meta name="keywords" content="HTML5, CSS3, JavaScript" />
</head>
Diseo de Sitios Web
<title>
La etiqueta <title> especifica el ttulo del documento. Debe estar dentro de la etiqueta <head>.
<link>
Este elemento es usado para incorporar estilos, cdigos Javascript, imgenes o iconos desde archivos externos.
Otros elementos
<h1> - <h6>
Utiliza los encabezados exclusivamente para encabezados de tus seciones, no para agrandar el texto o en negrita. Los
motores de bsqueda usan los encabezados para indexar la estructura y el contenido de sus pginas web.
<h1> define el ttulo ms importante. <h6> define el ttulo menos importante.
Sintaxis:
<h2>This is a heading</h2>
<p>
Los prrafos se definen con la etiqueta <p>.
Nota: Los navegadores aaden automticamente una lnea en blanco antes y despus de un prrafo.
Sintaxis:
<p>This is a paragraph</p>
<br>
Utilice la etiqueta <br> si desea un salto de lnea (una lnea).
Sintaxis:
<p>This is<br>a para<br>graph with line breaks</p>
<b>
Define el texto en negrita
Sintaxis:
<p>This is normal text - <b>and this is bold text</b>.</p>
Diseo de Sitios Web
<em>
Define el texto subrayado
Sintaxis:
<em>Emphasized text</em>
<i>
Define una parte de texto en una voz alternativa o estado de nimo
Sintaxis:
<p>He named his car <i>The lightning</i>, because it was very fast.</p>
<small>
Define el texto ms pequeo
Sintaxis:
<p><small>Copyright 1999-2050 by Refsnes Data</small></p>
<strong>
Define texto importante
Sintaxis:
<strong>Strong text</strong>
<sub>
Define texto subndice
Sintaxis:
<p>This text contains <sub>subscript</sub> text.</p>
<sup>
Define el texto en superndice
Sintaxis:
<p>This text contains <sup>superscript</sup> text.</p>
<ins>
Define texto insertado
Sintaxis:
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<del>
Define el texto eliminado
7
Diseo de Sitios Web
Sintaxis:
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<mark>
Define texto marcado / resaltado
Sintaxis:
<p>Do not forget to buy <mark>milk</mark> today.</p>
<pre>
Define texto con preformato.
Sintaxis:
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
<q>
Define una breve cita:
Sintaxis
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
<img>
Es usada para mostrar una imagen en una pgina, es necesario utilizar el atributo src. El valor del atributo src es la
direccin URL de la imagen que desea mostrar.
La etiqueta <img> est vaco, lo que significa que contiene atributos solamente, y no tiene etiqueta de cierre.
El atributo alt requerida especfica un texto alternativo para una imagen, si la imagen no se puede visualizar.
8
Diseo de Sitios Web
Sintaxis:
<img src="url" alt="some_text">
<a>
La etiqueta <a> define un hipervnculo.
Un hipervnculo (o link) es una palabra o grupo de palabras o una imagen en el que se puede hacer clic para saltar a
otro documento, o a una seccin especfica.
Al mover el cursor sobre un enlace en una pgina Web, la flecha se convertir en una pequea mano.
El atributo ms importante del elemento <a> es el atributo href, que indica el destino del enlace.
Por defecto, los enlaces aparecern de la siguiente manera en todos los navegadores:
Un enlace sin visitar est subrayado y azul
Un enlace visitado est subrayado y prpura
Un vnculo activo est subrayado y el rojo
Otros atributos de <a>
target. El atributo target especifica dnde abrir el documento vinculado (_blank, _self, _parent, _top).
id. El atributo id puede ser usado para crear un marcador dentro de un documento HTML.
Sintaxis:
<a href="url">Link text</a>
<ol>
Una lista ordenada comienza con la etiqueta <ol>. Cada elemento de la lista comienza con la etiqueta <li>. Por default
estn marcados por nmeros.
Sintaxis:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
9
Diseo de Sitios Web
En esta lista controla el tipo de numeracin: con nmeros rabes (<OL type="1">, la opcin por defecto), romanos
(<OL type="I">), romanos en minsculas (<OL type="i">), letras maysculas (<OL type="A">) y minsculas (<OL
type="a">).
La etiqueta <OL start="n"> indica el nmero por el que empieza la lista numerada.
<ul>
Una lista desordenada comienza con la etiqueta <ul>. Cada elemento de la lista comienza con la etiqueta <li>. Por
default los elementos estn marcados con puntos (por lo general pequeos crculos negros).
Sintaxis:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
En esta lista controla el tipo de vieta: con forma de disco (<UL type="disc">, la opcin por defecto), de crculo (<UL
type="circle">) y de cuadrado (<UL type="square">).
<dl>
Una lista de descripcin es una lista de trminos / nombres, con una descripcin de cada perodo / nombre. La
etiqueta <dl> define una lista de descripciones.
La etiqueta <dl> se utiliza en conjuncin con <dt> (define los trminos / nombres) y <dd> (describe cada trmino /
nombre).
Sintaxis:
10
Diseo de Sitios Web
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<table>
Las tablas se definen con la etiqueta <table>. La tabla se divide en filas (con la etiqueta <tr>), y cada fila se divide en
celdas de datos (con la etiqueta <td>.
Una etiqueta <td> puede contener texto, enlaces, imgenes, listas, formularios, otras tablas, etc
Sintaxis:
<table border="1">
<caption>Titulo de mi Tabla</caption>
<tr>
<th>Enca1</th>
<th> Enca2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
11
Diseo de Sitios Web
</tr>
</table>
<th>
Define una celda de encabezado de una tabla
<caption>
Define el ttulo de la tabla
Elementos Multimedia
<video>
HTML5 define un nuevo elemento que especifica un mtodo estndar para incrustar un vdeo / pelcula en una pgina
web: el elemento <video>. Actualmente, hay 3 formatos de video soportados para el elemento <video>: MP4, WebM
y Ogg.
Browser
MP4
WebM
Ogg
Internet Explorer
YES
NO
NO
Chrome
YES
YES
YES
Firefox
NO
YES
YES
Safari
YES
NO
NO
Opera
NO
YES
YES
Sintaxis:
12
Diseo de Sitios Web
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<audio>
El elemento <audio> permite que varios elementos <source>. Elementos <source> pueden vincular a diferentes
archivos de audio. El navegador usar el primer formato reconocido.
Browser
MP3
Wav
Ogg
Internet Explorer
YES
NO
NO
Chrome
YES
YES
YES
Firefox
NO
YES
YES
Safari
YES
YES
NO
Opera
NO
YES
YES
Sintaxis:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Videos de YouTube
13
Diseo de Sitios Web
La forma ms fcil de reproducir vdeos (otros o el suyo propio) en HTML es el uso de YouTube. Si desea reproducir un
vdeo en una pgina web, puede subir el vdeo a YouTube e insertar el cdigo HTML adecuado para visualizar el video:
Sintaxis:
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
Otra opcin, Sintaxis:
<embed
width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed>
Formularios
Formularios HTML se utilizan para pasar datos a un servidor.
Un formulario HTML puede contener elementos de entrada como campos de texto, casillas de verificacin, botones de
radio, botones de envo y ms. El formulario tambin puede contener listas de seleccin, textarea, fieldset, legend y
elementos de etiquetado.
La etiqueta <form> se utiliza para crear un formulario HTML.
Sintaxis:
14
Diseo de Sitios Web
<form> elementos de entrada </ form>

Elementos de formulario HTML se basan en dos atributos: la accin y el mtodo, para identificar dnde enviar los datos
del formulario para su procesamiento (accin) y la forma de procesar los datos (mtodo de envo de datos).
<form name=myForm action=myServerSideScript.php metodo=POST> elementos de entrada </ form>
Elementos de entrada
La mayora de los controles de entrada son visuales y pueden interactuar con el usuario. Su uso depende del tipo de
control y tambin del tipo de informacin que pueden recolectar. Para insertar este elemento se usa la etiqueta <input>.
1. Textual
a. Entrada de lnea
Este control recolecta informacin textual en una sola lnea. Este control es insertado en documentos HTML usando
la etiqueta de entrada <input> con el valor "text" en su atributo "type".
Sintaxis:
Ingresa un texto: <input name="ingresatexto" type="text" value="Por favor, ingresa aqu" />
b. Entradas de password
Este control acta exactamente como el de entrada de lnea con la excepcin de que "esconde" los caracteres
ingresados mostrndolos como puntos o asteriscos para evitar que los usuarios ven su contenido. Es definido
utilizando el valor "pass" en el atributo "type".
Sintaxis:
Ingresa tu contrasea: <input name="contrasena" type="password" value="123456" />
15
Diseo de Sitios Web
c. Entrada de multi-lnea
Este control permite a los usuarios ingresar texto en una o ms lneas. se inserta utilizando la etiqueta <textarea> y
puede ser usado para recolectar reportes, comentarios, cartas, etc.
Nota: Los atributos "rows" y "cols" establecen las dimensiones de la caja de texto.
Sintaxis:
Ingresa tus comentarios:<br />
<textarea name="comentarios" rows="2" cols="30">...Tus comentarios aqu...</textarea>
2. Opciones
a. Casillas de verificacin
Una casilla de verificacin es una opcin simple que puede tomar uno de dos valores: "marcado" "no marcado"
("checked" "unchecked"). Las casillas de verificacin pueden ser agrupadas visualmente formando listas de
opciones, pero cada una de ellas es tratada individualmente.
Este control es insertado mediante la etiqueta <input> con el valor "checkbox" en su atributo "type".
Sintaxis:
Selecciona tus intereses:<br />
<input name="cbipeliculas" type="checkbox" />Pelculas<br />
<input name="cbilibros" type="checkbox" checked="checked" />Libros<br />
<input name="cbiinternet" type="checkbox" />Internet
b. Botones radio
Los botones radio trabajan de la misma forma que las casillas de verificacin con una pequea diferencia: los botones
radio que comparte el mismo nombre conforman un grupo de opciones donde el usuario no puede seleccionar ms
16
Diseo de Sitios Web
de una a la vez. Esto significa que cuando un usuario elige una opcin, las dems son automticamente
deseleccionadas.
Este control es insertado mediante la etiqueta <input> con el valor "radio" en su atributo "type".
Sintaxis:
Selecciona tu actividad favorita:<br />
<input name="intereses" type="radio" value="rbipeliculas" />Pelculas<br />
<input name="intereses" type="radio" value="rbilibros" />Libros<br />
<input name="intereses" type="radio" value="rbiinternet" checked="checked" />Internet
c. Listas
Estas listas pueden ser construidas utilizando tres elementos: el elemento HTML select (contenedor principal),
el elemento HTML option (opcin simple) y el elemento HTML optgroup (grupo de opciones). El ltimo elemento es
el nico prescindible para construir este tipo de listas.
Sintaxis:
Elije solo una opcin, como en los botones radio:
<select name="entradalista">
<optgroup label="Entradas textuales">
<option>Entrada de lnea</option>
<option selected="selected">Entrada de contrasea</option>
<option>Entrada multi-lnea</option>
</optgroup>
<optgroup label="Opciones">
17
Diseo de Sitios Web
<option>Casillas de verificacin</option>
<option>Botones radio</option>
<option>Listas</option>
</optgroup>
</select>
<br />
Elije tantas opciones como quieras, como con casillas de verificacin (manteniendo presionada la tecla
"Ctrl"):<br />
<select name="entradalista[]" multiple="multiple">
<optgroup label="Entradas textuales">
<option>Entrada de lnea</option>
<option>Entrada de contrasea</option>
<option>Entrada multi-lnea</option>
</optgroup>
<optgroup label="Opciones">
<option selected="selected">Casillas de verificacin</option>
<option>Botones radio</option>
<option>Listas</option>
</optgroup>
</select>
3. Botones
a. Botones de envo
18
Diseo de Sitios Web
Este tipo de botones enva automticamente el formulario en que se encuentra cuando es presionado. Es insertado
utilizando la etiqueta <input> con el valor "submit" en su atributo "type".
Sintaxis:
<input type="submit" value="Enviar este formulario" />
b. Botones de restablecimiento
Este tipo de botones reestablecen los controles en un formulario a sus valores iniciales cuando es presionado. Son
insertados con la etiqueta <input> con el valor "reset" en su atributo "type".
Sintaxis:
<input type="reset" value="Reestablecer todos los campos a su valor predeterminado" />
c. Botones de imagen
Los botones de imagen funcionan exactamente como los botones de envo con la nica diferencia que los de imagen
son representados visualmente con la imagen especificada en el atributo "src".
Los botones de imagen se insertan con la etiqueta <input> usando el valor "image" en su atributo "type".
Sintaxis:
<input type="image" src="/img/p/tutorials/forms/3/submit.png">
4. Otros en HTML5
a. color
b. date
c. datetime
d. datetime-local
19
Diseo de Sitios Web
e. email
f. month
g. number
h. range
i. search
j. tel
k. time
l. url
m. week
Ejemplos de Sintaxis:
Select your favorite color: <input type="color" name="favcolor">
Birthday: <input type="date" name="bday">
E-mail: <input type="email" name="email">
Etiquetamiento de elementos
Las etiquetas de los elementos pueden hacer que tu pgina luzca mejor y sea ms funcional en agentes de usuario visuales
(cuando un visitante hace clic en la etiqueta, el enfoque pasa automticamente al control asociado).
Las etiquetas pueden insertarse con el elemento <label> y son asociados a los controles mediante el atributo "for", que
debe coincidir con el valor del atributo "id" en el control.
Sintaxis:
<label for="idnombre">Nombre:</label>
<input type="text" id="idnombre" name="nombre" /><br />
<label for="idapellido">Apellido:</label>
20
Diseo de Sitios Web
<input type="text" id="idapellido" name="apellido" /><br />
Agrupamiento de elementos
Todos los elementos en un formulario pueden tambin ser agrupados temticamente con el elemento <fieldset>. Este
elemento contiene a un grupo de controles que estn relacionados entre s por alguna razn (por ejemplo, informacin
personal, laboral, financiera, etc.).
El ttulo de cada grupo de elementos puede establecerse con la etiqueta <legend> que debe ser definido justo despus de
la etiqueta fieldset y debe proveer un ttulo descriptivo para el grupo.
Sintaxis:
<fieldset>
<legend>Informacin personal</legend>
<label for="lnombre">Nombre</label>: <input id="lnombre" type="text" name="nombre" /><br />
<label for="lapellido">Apellido</label>: <input id="lapellido" type="text" name="apellido" /><br />
<label for="ldireccion">Direccin</label>: <input id="ldireccion" type="text" name="direccion" /><br />
<label for="ltelefono">Telfono</label>: <input id="ltelefono" type="text" name="telefono" />
</fieldset>
21
Diseo de Sitios Web
Hojas de Estilo en Cascada

Es el momento de desarrollar tus habilidades como diseador web, con Cascading Style Sheets (CSS, Hojas de Estilo en Cascada). Son
una forma de controlar la apariencia de los documentos HTML de una manera organizada y eficiente.
Demo: http://www.w3schools.com/css/demo_default.htm
CSS Sintaxis
Una regla CSS consta de dos partes principales: un selector, y las declaraciones de uno o ms:
El selector puede ser: una etiqueta HTML, un identificador, o una clase.
22
Diseo de Sitios Web
Estilo a una etiquetas HTML

Se aplica esta forma cuando se desea aplicar un estilo a ms de un elemento de la pgina web.
Sintaxis:
p {color:red;text-align:center;}
Estilo a un identificador
En la definicin de un selector ID, el elemento del nombre va seguido por un smbolo numeral (#) y un identificador (que se
corresponde con el valor del atributo "id" del elemento al que pretende afectar).
Sintaxis:
#zonaA {color:red;text-align:center;}
Estilo a una clase
En la definicin de un selector CLASE, el elemento del nombre va seguido por un punto (.) y el nombre de la clase (que se
corresponde con el valor del atributo "class" del elemento al que pretende afectar). Es muy similar que el id, solo que el class
puede aplicarse a ms de un elemento.
Sintaxis:
.zonaB {color:red;text-align:center;}
Otro ejemplo:
body.zonaB {color:red;text-align:center;}
23
Diseo de Sitios Web
El orden de especificidad
La lista siguiente muestra el rden de especificidad usado para aplicar propiedades CSS a elementos HTML, desde el ms
especfico al ms global.
i. El atributo "style" (por ejemplo, <p style="...">).
ii. Selectores ID (por ejemplo, #ayuda {...}).
iii. Definicin de clase especfica (por ejemplo, .segundo {...}).
iv. Definicin de clase global (por ejemplo, *.segundo {...}).
Inclusiones de cdigo
Estilo en lnea
Un estilo en lnea pierde muchas de las ventajas de hojas de estilo por el contenido de la mezcla con la presentacin.
Para utilizar estilos en lnea se utiliza el atributo de estilo en la etiqueta correspondiente. El atributo de estilo puede contener
cualquier propiedad CSS. El ejemplo muestra cmo cambiar el color y el margen izquierdo de un prrafo:
Sintaxis:
<p style="color:sienna; margin-left:20px;">
This is a paragraph.
</p>
Hoja de estilo interna

Una hoja de estilo interna debe ser usado cuando un documento nico que tiene un estilo nico. Para definir estilos internos en
la seccin de cabecera de una pgina HTML, utilizando la etiqueta <style>, as:
24
Diseo de Sitios Web
Sintaxis:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Hoja de estilos externa

Una hoja de estilos externa es ideal cuando el estilo se aplica a muchas pginas.
Con una hoja de estilos externa, puede cambiar el aspecto de un sitio Web completo, cambiando un archivo. Cada pgina debe
enlazar a la hoja de estilo con la etiqueta <link>.
Sintaxis:
<head>
<link rel="stylesheet" type="text/css href="mystyle.css />
</head
Estilos
Fondos
CSS propiedades de fondo se utilizan para definir los efectos de fondo de un elemento.
25
Diseo de Sitios Web
Propiedades CSS utilizados para efectos de fondo:
background-color
background-image
background-repeat
background-attachment
background-position
Propiedad
background
Descripcin
Establece todas las propiedades de fondo en una
declaracin
Sintaxis
body
{
background:#ffffff url('img_tree.png') no-repeat right
top;
}
background-attachment Establece si la imagen de fondo se fija o se desplaza con el body

{
resto de la pgina
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
background-color
Establece el color de fondo de un elemento
body {background-color:#b0c4de;}
background-image
Ajusta la imagen de fondo de un elemento
body {background-image:url('paper.gif');}
26
Diseo de Sitios Web
background-position
Establece la posicin inicial de una imagen de fondo
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
background-repeat
Establece cmo se repite una imagen de fondo
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
Texto
CSS propiedades de texto se utilizan para definir los efectos al texto.
Propiedad
Descripcin
color
Establece el color del texto
direction
Especifica la direccin / escribir la direccin del texto
letter-spacing
Aumenta o disminuye el espacio entre caracteres en un texto
line-height
Establece la altura de la lnea
27
Sintaxis
Diseo de Sitios Web
text-align
Especifica la alineacin horizontal del texto
text-decoration
Especifica la decoracin aadida al texto
text-indent
Especifica la sangra de la primera lnea de un bloque de texto
text-shadow
Especifica el efecto de sombra aadida al texto
text-transform
Controla la capitalizacin del texto
vertical-align
Establece la alineacin vertical de un elemento
white-space
Especifica cmo se maneja un espacio en blanco dentro de un

elemento
word-spacing
Aumenta o disminuye el espacio entre las palabras en un texto
Textos y fuentes descargables

Se puede usar la API de Google Fonts para aadir fuentes a sus pginas web.
1 Se agrega:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
28
Diseo de Sitios Web
2 Se define el estilo:
CSSselector {
font-family: 'Font Name', serif;}
3 Otra opcin para definir el estilo:

<div style="font-family: 'Font Name', serif;">Your text</div>
https://developers.google.com/fonts/docs/getting_started
Fuentes
CSS propiedades de fuentes definen la familia de la fuente, la audacia, el tamao y el estilo de un texto.
Propiedad
Descripcin
Sintaxis
font
Establece todas las propiedades de la fuente en una

declaracin
p.ex2
{
font:italic bold 12px/30px Georgia, serif;
}
font-family
Especifica la familia de fuentes para el texto
p{font-family:"Times New Roman", Times, serif;}
font-size
Especifica el tamao de fuente del texto
h2 {font-size:30px;}
h2 {font-size:1.875em;}
body {font-size:100%;}
29
Diseo de Sitios Web
font-style
Especifica el estilo de fuente para el texto
font-variant
Especifica si el texto se debe mostrar en una fuente small-caps p.small{font-variant:small-caps;}
font-weight
Especifica el peso de una fuente
p.italic {font-style:italic;}
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
Vnculos
Los enlaces pueden tiene estilos diferentes.
Los cuatro estados de los enlaces son los siguientes:
a: link - un enlace sin visitar
a: visited - un vnculo que el usuario ha visitado
a: hover - un enlace cuando el usuario coloca el cursor sobre el
a:active el enlace en el momento en que se le da clic
Sintaxis:
a:link {text-decoration:none; background-color:#B2FF99; color:#FF0000;}
a:visited {text-decoration:none;background-color:#B2FF99; color:#FF0000;}
a:hover {text-decoration:underline; background-color:#B2FF99; color:#FF0000;}
a:active {text-decoration:underline; background-color:#B2FF99; color:#FF0000;}
30
Diseo de Sitios Web
Listas
Las propiedades de la lista de CSS permiten:
Establecer diferentes marcadores de elementos de lista para las listas ordenadas

Establecer diferentes marcadores de elementos de lista para listas no ordenadas
Establecer una imagen como marcador de un elemento de la lista
Propiedad
list-style
Descripcin
Sintaxis
Establece todas las propiedades de una lista en una declaracin ul
{
list-style:square url("sqpurple.gif");
}
list-style-image
Especifica una imagen como marcador de tems de lista
ul
{
list-style-image:url('sqpurple.gif');
}
list-style-position
Especifica si los marcadores list-item debe aparecer dentro o

fuera del flujo de contenido
ul
{
list-style-position:inside;
}
list-style-type
Especifica el tipo de marcador de elemento de lista
ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}
31
Diseo de Sitios Web
Tablas
Propiedad
Descripcin
Sintaxis
border
Para especificar bordes de la tabla en CSS, utilice la propiedad border.
table, th, td {border: 1px solid black;}
border-collapse
La propiedad border-collapse establece si los bordes de la tabla se

colapsan en una sola frontera o separados
table {border-collapse:collapse;}
width
Anchura de una tabla se define mediante las propiedades width.
table {width:100%;}
height
Altura de una tabla se define mediante las propiedades height.
th {height:50px;}
text-align
La propiedad text-align establece la alineacin horizontal, como

izquierda, derecha o centro.
td {text-align:right;}
vertical-align
La propiedad vertical-align establece la alineacin vertical, como

arriba, abajo o en medio.
td {vertical-align:bottom;}
padding
Para controlar el espacio entre el borde y el contenido de una tabla,

utilice la propiedad padding de td y elementos th.
td {padding:15px;}
background-color
Se usa para especificar el color de fondo de una celda.
th {background-color:green;}
color
Se usa para especificar el color del texto de una celda.
th {color:white;}
32
Diseo de Sitios Web
33
Diseo de Sitios Web
JavaScript
34
Diseo de Sitios Web
Referencias
Bibliogrficas
El gran libro de HTML5, CSS3 y Javascript
Juan Diego Gaucht, Ed. Marcombo
Creating a Website The Missing Manual
Matthew MacDonald, Ed. OReilly
Web
http://www.w3schools.com
http://www.htmldog.com
http://www.htmlquick.com
http://librosweb.es/xhtml/
36 Pasos bsicos para desarrollar un Sitio Web. Carlos Javier Pes Rivas. www.CarlosPes.com
35
Diseo de Sitios Web

Taller DSW v2

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

Taller DSW v2

Hochgeladen von

Copyright:

Verfügbare Formate

Universidad Tecnolgica de Len

Sistema de Gestin de Calidad y Ambiental

Lenguaje de Marcado de Hipertexto

HTML es un lenguaje para describir las pginas web.

Y Qu son las Etiquetas?

Diseo de Sitios Web

Los atributos proporcionan informacin adicional acerca de los elementos HTML.

Diseo de Sitios Web

Diseo de Sitios Web

Elementos incluidos en <head>

<meta charset="iso-8859-1" />

Diseo de Sitios Web

Diseo de Sitios Web

Diseo de Sitios Web

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

Diseo de Sitios Web

<img src="url" alt="some_text">

<a href="url">Link text</a>

Diseo de Sitios Web

Diseo de Sitios Web

Diseo de Sitios Web

Diseo de Sitios Web

<video width="320" height="240" controls>

Diseo de Sitios Web

Diseo de Sitios Web

<form> elementos de entrada </ form>

Diseo de Sitios Web

Diseo de Sitios Web

Diseo de Sitios Web

Diseo de Sitios Web

Diseo de Sitios Web

Diseo de Sitios Web

<input type="text" id="idapellido" name="apellido" /><br />

Diseo de Sitios Web

Hojas de Estilo en Cascada

El selector puede ser: una etiqueta HTML, un identificador, o una clase.

Diseo de Sitios Web

Estilo a una etiquetas HTML

Diseo de Sitios Web

Hoja de estilo interna

Diseo de Sitios Web

Hoja de estilos externa

Diseo de Sitios Web

Propiedades CSS utilizados para efectos de fondo:

background-attachment Establece si la imagen de fondo se fija o se desplaza con el body

Establece el color de fondo de un elemento

Ajusta la imagen de fondo de un elemento

Diseo de Sitios Web

Establece la posicin inicial de una imagen de fondo

Establece cmo se repite una imagen de fondo

Establece el color del texto

Especifica la direccin / escribir la direccin del texto

Aumenta o disminuye el espacio entre caracteres en un texto

Establece la altura de la lnea

Diseo de Sitios Web

Especifica la alineacin horizontal del texto

Especifica la decoracin aadida al texto

Especifica la sangra de la primera lnea de un bloque de texto

Especifica el efecto de sombra aadida al texto

Controla la capitalizacin del texto

Establece la alineacin vertical de un elemento

Especifica cmo se maneja un espacio en blanco dentro de un

Aumenta o disminuye el espacio entre las palabras en un texto

Textos y fuentes descargables