taller dsw v2

8/15/2019 Taller DSW v2

1/35

Universidad Tecnológica de LeónSistema de Gestión de Calidad y Ambiental

PLANEACIÓN DE TALLER

Nombre de Taller: Diseño de Sitios Web

Carrera (s): Tecnologías de la Información y Comunicación Grupo:

Cuatrimestre: Primero Periodo: Septiembre –Diciembre 2013

Alumno: Matricula:


2/35

2 Diseño de Sitios Web

¿Qué es HTML?

HTML es un lenguaje para describir las páginas 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 también llamados páginas web

Y ¿Qué son las Etiquetas?

Etiquetas HTML son palabras clave (nombres de etiqueta) rodeadas por corchetes angulares como , conocidas también

como elementos de HTML.

Etiquetas HTML normalmente vienen en pares como y . 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.

Lenguaje de Marcado de Hipertexto

contenido


3/35


Y ¿Los Atributos?

Los atributos proporcionan información 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

Estructura global

Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y

determinada por etiquetas específicas. En esta parte del capítulo vamos a ver cómo construir la estructura global de un documento

HTML y los nuevos elementos semánticos incorporados en HTML5.

Ilustración 1 Ejemplo de la estructura de una página web con HTML5


4/35


En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5.

IMPORTANTE: Esta línea debe ser la primera línea del archivo, sin espacios o líneas que la precedan.

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 raíz en el elemento . Este elemento envolverá al resto del

código.

El elemento definiremos el título de nuestra página web, declararemos el set de caracteres correspondiente,

proveeremos información general acerca del documento e incorporaremos los archivos externos con estilos, códigos

Javascript o incluso imágenes necesarias para generar la página en la pantalla.

El cuerpo representa la parte visible de todo documento y es especificado entre etiquetas .

Elemento representa un grupo de artículos introductorios o de navegación.

El elemento representa una sección de una página que es un link a otras páginas o a partes dentro de la página:

una sección con links de navegación.

El elemento de artículo representa un componente de una página que consiste en una composición autónoma en un

documento, página, aplicación, o sitio web con la intención de que pueda ser reutilizado y repetido.


5/35


Se utiliza para representar una sección “general” dentro de un documento o aplicación, como un capítulo de un libro.

Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página creando

jerarquías del contenido, algo muy favorable para el buen posicionamiento web.

Representa una sección de la página 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

tipográficos, barras laterales, elementos publicitarios, para grupos de elementos de la navegación, u otro contenido

que se considere separado del contenido principal de la página.

El elemento representa el pié de una sección, con información acerca de la página/sección que poco tiene

que ver con el contenido de la página, como el autor, el copyright o el año.

Elementos incluidos en

La etiqueta que especifica cómo el texto será presentado en pantalla. Debe estar dentro de la etiqueta

.

Hay varios tipos de etiqueta que pueden ser incluidas para declarar información general sobre el documento,pero esta información no es mostrada en la ventana del navegador, es solo importante para motores de búsqueda y

dispositivos que necesitan hacer una vista previa del documento u obtener un sumario de la información que

contiene.


6/35


La etiqueta especifica el título del documento. Debe estar dentro de la etiqueta .

Este elemento es usado para incorporar estilos, códigos Javascript, imágenes o iconos desde archivos externos.

Otros elementos

-

Utiliza los encabezados exclusivamente para encabezados de tus seciones, no para agrandar el texto o en negrita. Los

motores de búsqueda usan los encabezados para indexar la estructura y el contenido de sus páginas web.

define el título más importante. define el título menos importante.

Sintaxis: This is a heading

Los párrafos se definen con la etiqueta

.

Nota: Los navegadores añaden automáticamente una línea en blanco antes y después de un párrafo.

Sintaxis:

This is a paragraph

Utilice la etiqueta
si desea un salto de línea (una línea).

Sintaxis:

This is
a para
graph with line breaks

Define el texto en negrita

Sintaxis:

This is normal text - and this is bold text.


7/35


Define el texto subrayado

Sintaxis: Emphasized text

Define una parte de texto en una voz alternativa o estado de ánimo

Sintaxis:

He named his car The lightning, because it was very fast.

Define el texto más pequeño

Sintaxis:

Copyright 1999-2050 by Refsnes Data

Define texto importante

Sintaxis: Strong text

Define texto subíndice

Sintaxis:

This text contains subscript text.

Define el texto en superíndice

Sintaxis:

This text contains superscript text.

Define texto insertado

Sintaxis:

My favorite color is blue red!

Define el texto eliminado


8/35


Sintaxis:

My favorite color is blue red!

Define texto marcado / resaltadoSintaxis:

Do not forget to buy milk today.

Define texto con preformato.

Sintaxis:

Text in a pre element

is displayed in a fixed-width

font, and it preservesboth spaces and

line breaks

Define una breve cita:

Sintaxis

WWF's goal is to:

Build a future where people live in harmony with nature.

We hope they succeed.

Es usada para mostrar una imagen en una página, es necesario utilizar el atributo src. El valor del atributo src es la

dirección URL de la imagen que desea mostrar.

La etiqueta está vacío, lo que significa que contiene atributos solamente, y no tiene etiqueta de cierre.

El atributo alt requerida específica un texto alternativo para una imagen, si la imagen no se puede visualizar.


9/35


Sintaxis:

La etiqueta define un hipervínculo.

Un hipervínculo (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 sección específica.

Al mover el cursor sobre un enlace en una página Web, la flecha se convertirá en una pequeña mano.

El atributo más importante del elemento es el atributo href, que indica el destino del enlace.

Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores:

Un enlace sin visitar está subrayado y azul

Un enlace visitado está subrayado y púrpura

Un vínculo activo está subrayado y el rojo

Otros atributos de

target. El atributo target especifica dónde 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: Link text

Una lista ordenada comienza con la etiqueta . Cada elemento de la lista comienza con la etiqueta . Por default

están marcados por números.

Sintaxis:

Coffee

Milk


10/35


En esta lista controla el tipo de numeración: con números árabes (, la opción por defecto), romanos

(), romanos en minúsculas (), letras mayúsculas () y minúsculas ().

La etiqueta indica el número por el que empieza la lista numerada.

Una lista desordenada comienza con la etiqueta . Cada elemento de la lista comienza con la etiqueta . Por

default los elementos están marcados con puntos (por lo general pequeños círculos negros).

Sintaxis:

Coffee

Milk

En esta lista controla el tipo de viñeta: con forma de disco (, la opción por defecto), de círculo () y de cuadrado ().

Una lista de descripción es una lista de términos / nombres, con una descripción de cada período / nombre. La

etiqueta define una lista de descripciones.

La etiqueta se utiliza en conjunción con (define los términos / nombres) y (describe cada término /

nombre).

Sintaxis:


11/35


Coffee

- black hot drink

Milk

- white cold drink

Las tablas se definen con la etiqueta . La tabla se divide en filas (con la etiqueta ), y cada fila se divide en

celdas de datos (con la etiqueta .

Una etiqueta puede contener texto, enlaces, imágenes, listas, formularios, otras tablas, etc

Sintaxis:

Titulo de mi Tabla

Enca1

Enca2

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2


12/35


Define una celda de encabezado de una tabla

Define el título de la tabla

Elementos Multimedia

HTML5 define un nuevo elemento que especifica un método estándar para incrustar un vídeo / película en una página

web: el elemento . Actualmente, hay 3 formatos de video soportados para el elemento : 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:


13/35


Your browser does not support the video tag.

El elemento permite que varios elementos . Elementos 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:

Your browser does not support the audio element.

Videos de YouTube


14/35


La forma más fácil de reproducir vídeos (otros o el suyo propio) en HTML es el uso de YouTube. Si desea reproducir un

vídeo en una página web, puede subir el vídeo a YouTube e insertar el código HTML adecuado para visualizar el video:

Sintaxis:

Otra opción, Sintaxis:

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 verificación, botones deradio, botones de envío y más. El formulario también puede contener listas de selección, textarea, fieldset, legend y

elementos de etiquetado.

La etiqueta se utiliza para crear un formulario HTML.

Sintaxis:


15/35


16/35


c. Entrada de multi-líneaEste control permite a los usuarios ingresar texto en una o más líneas. se inserta utilizando la etiqueta 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:

...Tus comentarios aquí...

2. Opcionesa. Casillas de verificación

Una casilla de verificación es una opción simple que puede tomar uno de dos valores: "marcado" ó "no marcado"("checked" ó "unchecked"). Las casillas de verificación pueden ser agrupadas visualmente formando listas de

opciones, pero cada una de ellas es tratada individualmente.

Este control es insertado mediante la etiqueta con el valor "checkbox" en su atributo "type".

Sintaxis:

Selecciona tus intereses:

Películas

Libros
Internet

b. Botones radioLos botones radio trabajan de la misma forma que las casillas de verificación con una pequeña diferencia: los botones

radio que comparte el mismo nombre conforman un grupo de opciones donde el usuario no puede seleccionar más


17/35


de una a la vez. Esto significa que cuando un usuario elige una opción, las demás son automáticamente

deseleccionadas.

Este control es insertado mediante la etiqueta con el valor "radio" en su atributo "type".

Sintaxis:

Selecciona tu actividad favorita:

Películas

Libros

Internet

c. Listas

Estas listas pueden ser construidas utilizando tres elementos: el elemento HTML select (contenedor principal),el elemento HTML option (opción 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 opción, como en los botones radio:

Entrada de líneaEntrada de contraseña

Entrada multi-línea


18/35


Casillas de verificación

Botones radio

Listas

Elije tantas opciones como quieras, como con casillas de verificación (manteniendo presionada la tecla

"Ctrl"):

Entrada de línea

Entrada de contraseña

Entrada multi-línea

Casillas de verificación

Botones radio

Listas

3. Botonesa. Botones de envío


19/35


20/35


e. emailf. monthg. number

h. rangei. search

j. telk. timel. urlm. week

Ejemplos de Sintaxis:

Select your favorite color: Birthday:

E-mail:

Etiquetamiento de elementos

Las etiquetas de los elementos pueden hacer que tu página luzca mejor y sea más funcional en agentes de usuario visuales

(cuando un visitante hace clic en la etiqueta, el enfoque pasa automáticamente al control asociado).

Las etiquetas pueden insertarse con el elemento y son asociados a los controles mediante el atributo "for", que

debe coincidir con el valor del atributo "id" en el control.

Sintaxis:

Nombre:

Apellido:

http://www.htmlquick.com/es/reference/tags/label.htmlhttp://www.htmlquick.com/es/reference/tags/label.html


21/35


Agrupamiento de elementos

Todos los elementos en un formulario pueden también ser agrupados temáticamente con el elemento . Este

elemento contiene a un grupo de controles que están relacionados entre sí por alguna razón (por ejemplo, información

personal, laboral, financiera, etc.).

El título de cada grupo de elementos puede establecerse con la etiqueta que debe ser definido justo después de

la etiqueta fieldset y debe proveer un título descriptivo para el grupo.

Sintaxis:

Información personal

Nombre:

Apellido:

Dirección:

Teléfono:


22/35


Es el momento de desarrollar tus habilidades como diseñador 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 más:

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

Hojas de Estilo en ascada

http://www.w3schools.com/css/demo_default.htmhttp://www.w3schools.com/css/demo_default.htmhttp://www.w3schools.com/css/demo_default.htm


23/35


24/35

24Diseño 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 más

específico al más global.

i. El atributo "style" (por ejemplo,

).

ii. Selectores ID (por ejemplo, #ayuda {...}).

iii. Definición de clase específica (por ejemplo, .segundo {...}).

iv. Definición de clase global (por ejemplo, *.segundo {...}).

Inclusiones de código

Estilo en línea

Un estilo en línea pierde muchas de las ventajas de hojas de estilo por el contenido de la mezcla con la presentación.

Para utilizar estilos en línea se utiliza el atributo de estilo en la etiqueta correspondiente. El atributo de estilo puede contener

cualquier propiedad CSS. El ejemplo muestra cómo cambiar el color y el margen izquierdo de un párrafo:

Sintaxis:

This is a paragraph.

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 sección de cabecera de una página HTML, utilizando la etiqueta , así:


25/35

25Diseño de Sitios Web

Sintaxis:

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

Hoja de estilos externa

Una hoja de estilos externa es ideal cuando el estilo se aplica a muchas páginas.

Con una hoja de estilos externa, puede cambiar el aspecto de un sitio Web completo, cambiando un archivo. Cada página debe

enlazar a la hoja de estilo con la etiqueta .

Sintaxis:


26/35


27/35


background-position Establece la posición inicial de una imagen de fondo body

{

background-image:url('img_tree.png');

background-repeat:no-repeat;background-position:right top;

}

background-repeat Establece cómo 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 Descripción Sintaxis

color Establece el color del texto

direction Especifica la dirección / escribir la dirección del texto

letter-spacing Aumenta o disminuye el espacio entre caracteres en un texto

line-height Establece la altura de la línea


28/35


text-align Especifica la alineación horizontal del texto

text-decoration Especifica la decoración añadida al texto

text-indent Especifica la sangría de la primera línea de un bloque de texto

text-shadow Especifica el efecto de sombra añadida al texto

text-transform Controla la capitalización del texto

vertical-align Establece la alineación vertical de un elemento

white-space Especifica cómo 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 añadir fuentes a sus páginas web.

1 Se agrega:


29/35


2 Se define el estilo:

CSSselector { font-family: 'Font Name', serif;}

3 Otra opción para definir el estilo:

Your text

https://developers.google.com/fonts/docs/getting_started

Fuentes

CSS propiedades de fuentes definen la familia de la fuente, la audacia, el tamaño y el estilo de un texto.


font Establece todas las propiedades de la fuente en una

declaración

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 tamaño de fuente del texto h2 {font-size:30px;}

h2 {font-size:1.875em;}

body {font-size:100%;}

https://developers.google.com/fonts/docs/getting_startedhttps://developers.google.com/fonts/docs/getting_startedhttps://developers.google.com/fonts/docs/getting_started


30/35


font-style Especifica el estilo de fuente para el texto p.italic {font-style:italic;}

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.normal {font-weight:normal;}

p.thick {font-weight:bold;}

p.thicker {font-weight:900;}

Vínculos

Los enlaces pueden tiene estilos diferentes.

Los cuatro estados de los enlaces son los siguientes:

a: link - un enlace sin visitar

a: visited - un vínculo 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;}


31/35


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


list-style Establece todas las propiedades de una lista en una declaración 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}


32/35


Tablas


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 alineación horizontal, como

izquierda, derecha o centro.

td {text-align:right;}

vertical-align La propiedad vertical-align establece la alineación 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;}


33/35



34/35


JavaScript


35/35


Bibliográficas

El gran libro de HTML5, CSS3 y Javascript

Juan Diego Gaucht, Ed. Marcombo

Creating a Website The Missing Manual

Matthew MacDonald, Ed. O’Reilly

Web

http://www.w3schools.com

http://www.htmldog.com

http://www.htmlquick.com

http://librosweb.es/xhtml/

36 Pasos básicos para desarrollar un Sitio Web. Carlos Javier Pes Rivas. www.CarlosPes.com

Referencias
http://www.w3schools.com/http://www.w3schools.com/http://www.htmldog.com/http://www.htmldog.com/http://www.htmlquick.com/es/tutorials/http://www.htmlquick.com/es/tutorials/http://librosweb.es/xhtml/http://librosweb.es/xhtml/http://www.carlospes.com/http://www.carlospes.com/http://www.carlospes.com/http://www.carlospes.com/http://librosweb.es/xhtml/http://www.htmlquick.com/es/tutorials/http://www.htmldog.com/http://www.w3schools.com/

taller dsw v2

Documents