Beruflich Dokumente
Kultur Dokumente
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:
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>
Y Los Atributos?
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
<!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>
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.
<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>
<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
Sintaxis:
<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
Sintaxis:
<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:
<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
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
<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>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
11
</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
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
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
15
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
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
<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
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
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
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
CSS Sintaxis
Una regla CSS consta de dos partes principales: un selector, y las declaraciones de uno o ms:
22
23
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>
24
Sintaxis:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Estilos
Fondos
CSS propiedades de fondo se utilizan para definir los efectos de fondo de un elemento.
25
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-color
body {background-color:#b0c4de;}
background-image
body {background-image:url('paper.gif');}
26
background-position
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
background-repeat
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
direction
letter-spacing
line-height
27
Sintaxis
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align
white-space
word-spacing
28
2 Se define el estilo:
CSSselector {
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
p.ex2
{
font:italic bold 12px/30px Georgia, serif;
}
font-family
font-size
h2 {font-size:30px;}
h2 {font-size:1.875em;}
body {font-size:100%;}
29
font-style
font-variant
font-weight
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
Listas
Las propiedades de la lista de CSS permiten:
list-style
Descripcin
Sintaxis
{
list-style:square url("sqpurple.gif");
}
list-style-image
ul
{
list-style-image:url('sqpurple.gif');
}
list-style-position
ul
{
list-style-position:inside;
}
list-style-type
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
Tablas
Propiedad
Descripcin
Sintaxis
border
border-collapse
table {border-collapse:collapse;}
width
table {width:100%;}
height
th {height:50px;}
text-align
td {text-align:right;}
vertical-align
td {vertical-align:bottom;}
padding
td {padding:15px;}
background-color
th {background-color:green;}
color
th {color:white;}
32
33
JavaScript
34
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