Pagina Web

Programad@s
Programad@s
Introducir a las mujeres en las crecientes demandas del mundo de la
programación, con capacidades técnicas y gerenciales que les permita
potencializar sus habilidades para crear, aprovechar oportunidades e
inspirar.
Diseño de Página Web
Diseño de Página Web
1. Introducción a HTML
¿Qué son los requerimientos?
Un requerimiento es una necesidad documentada sobre el contenido, forma o

funcionalidad de un producto o servicio.
Los requerimientos son declaraciones que identifican atributos, capacidades,

características y/o cualidades que necesita cumplir un sistema (o un sistema de
software) para que tenga valor y utilidad para el usuario. En otras palabras, los
requerimientos muestran qué elementos y funciones son necesarias para un
proyecto.
Atributos: es una especificación que define una propiedad de un objeto,
elemento o archivo.
Datos: Es una representación simbólica de un atributo o variable. Un dato

por sí mismo no constituye información, es el procesamiento de los datos lo
que nos proporciona información. son números, letras o símbolos que
describen objetos, condiciones o situaciones.
Programas: herramienta que permite al usuario realizar un trabajo

específico; estos, utilizan la plataforma para realizar tareas.
Archivos: es identificado por un nombre y la descripción de la carpeta o

directorio que lo contiene.
Información: es un conjunto organizado de datos procesados.

Una página web es el nombre de un documento o información electrónica
adaptada para la World Wide Web y que puede ser accedida mediante
un navegador. Esta información se encuentra generalmente en formato HTML , y
puede proporcionar navegación a otras páginas web mediante enlaces
de hipertexto. Las páginas web frecuentemente incluyen otros recursos como hojas
de estilo en cascada, guiones(scripts) e imágenes digitales, entre otros.
Las páginas web pueden estar almacenadas en un equipo local o un servidor

web remoto.
Sitio Web
Un sitio web es una colección de páginas web relacionadas y comunes a un dominio

de Internet o subdominio en la World Wide Web (WWW) en Internet.
Una página web es un documento HTML que es accesible generalmente mediante

el protocolo HTTP de Internet.
A las páginas de un sitio web se accede frecuentemente a través de un URL raíz

común llamado portada, que normalmente reside en el mismo servidor físico. Los URL
organizan las páginas en una jerarquía, aunque los hiperenlaces entre ellas controlan
más particularmente cómo el lector percibe la estructura general y cómo el tráfico
web fluye entre las diferentes partes de los sitios.
Definiéndolo de forma sencilla,” HTML es lo que se utiliza
para crear toda pagina web de internet”. Mas
concretamente , HTML es el lenguaje con que se escribe
la mayoría de las paginas web.
Las siglas de HTML no significa mas que HyperText

Markup Language, que a su vez significa lenguaje de
marcados de hipertexto .
El proceso de indicar las diferentes partes que componen

la información se denomina marcar (markup en inglés).
Cada una de las palabras que se emplean para marcar el
inicio y el final de una sección se denominan etiquetas.
Reglas de <HTML>…!!!
Aunque existen algunas excepciones, en general las etiquetas se indican

por pares y se forman de la siguiente manera:
Etiqueta de apertura: carácter <, seguido del nombre de la etiqueta (sin espacios en
blanco) y terminado con el carácter >
Etiqueta de cierre: carácter <, seguido del carácter /, seguido del nombre de la
etiqueta (sin espacios en blanco) y terminado con el carácter >
Así, la estructura típica de las etiquetas HTML es:
<nombre_etiqueta> ... </nombre_etiqueta>

Primeros pasos con <HTML>
Las páginas HTML se dividen en dos partes: la cabecera y el
cuerpo.
1. La cabecera incluye información sobre la propia página,

como por ejemplo su título y su idioma.
2. El cuerpo de la página incluye todos sus contenidos,

como párrafos de texto e imágenes.
En palabras más claras El cuerpo (llamado body en inglés)

contiene todo lo que el usuario ve en su pantalla y la cabecera
(llamada headen inglés) contiene todo lo que no se ve (con la
única excepción del título de la página, que los navegadores
muestran como título de sus ventanas).
Ejemplos con <HTML>
<html>
<head>
<title>El primer documento HTML</title>
</head>
<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong> que
prácticamente se entiende sin estudiar el significado de sus
etiquetas principales.
</p>
</body>
</html>
<head>: delimita la parte de la
cabecera del documento. La cabecera
<html>: indica el comienzo y el contiene información sobre el propio
final de un documento HTML. documento HTML, como por ejemplo
Ninguna etiqueta o contenido su título y el idioma de la página. Los
puede colocarse antes o después de contenidos indicados en la cabecera no
la etiqueta <html> (con una sola son visibles para el usuario, con la
excepción que se verá más excepción de la etiqueta <title>, que se
adelante). En el interior de la
utiliza para indicar el título del
etiqueta <html> se definen la
cabecera y el cuerpo del documento y que los navegadores lo
documento HTML y todo lo que se visualizan en la parte superior izquierda
coloque fuera de la de la ventana del navegador (si no te
etiqueta <html> se ignora. has fijado anteriormente, vuelve a abrir
el primer ejemplo en cualquier
navegador y observa dónde se muestra
el título de la página).
Practicar el siguiente código
<head>
<title>El primer documento HTML</title>
</head>
<body>: delimita el cuerpo del
documento HTML. El cuerpo <body>
encierra todos los contenidos que
<p>El lenguaje HTML es <strong>tan
se muestran al usuario (párrafos sencillo</strong> que prácticamente se entiende sin
de texto, imágenes, tablas). En estudiar el significado de sus etiquetas principales.</p>
general, el <body> de un
documento contiene cientos de <p> Además de textos en
<strong>negrita</strong>, también se pueden poner
etiquetas HTML, mientras que <em>en cursiva</em> o <del>tachados</del>.</p>
el <head> no contiene más que </body>
unas pocas.
</html>
<html></html> Para abrir el código
<head></head> Cabezera
<em></em> Kursiva
<s></s> <Del></Del> Subrayado
<strong></strong> Negrita
<p></p> Párrafo
<title></title> Título
<Big></Big> Letra más grande
<Body></Body> Cuerpo del mensaje
<h1></h1> Hasta la h6 para el tamaño de la letra en
los titulos
á á
é é
í í
ó ó
ú ú
&nacute; ñ
2. Elementos y Etiquetas,
Listas, Imágenes y Enlaces.
Texto sin HTML-Ejemplo
HTML y CSS
Originalmente, las páginas HTML sólo incluían información sobre sus contenidos de
texto e imágenes. Con el desarrollo del estándar HTML, las páginas empezaron a
incluir también información sobre el aspecto de sus contenidos: tipos de letra,
colores y márgenes.
La posterior aparición de tecnologías como JavaScript, provocaron que las páginas
HTML también incluyeran el código de las aplicaciones (llamadas scripts) que se
utilizan para crear páginas web dinámicas.
Incluir en una misma página HTML los contenidos, el diseño y la programación
complica en exceso su mantenimiento.
Etiquetas y Atributos
Existen 91 etiquetas para marcar los diferentes elementos que componen una
página.
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big,
blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd,
del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3,
h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label,
legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup,
option, p, param, pre, q, s, samp, script, select, small, span, strike, strong,
style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul,
var.
Etiquetas Vacias
Ejemplo correcto en XHTML:

<BR/>
Ejemplo incorrecto en XHTML (pero correcto en HTML):

<BR>
Las etiquetas <br> se utilizan para indicar el comienzo de una nueva línea. Es decir, salto de línea.
Alineación:
Align=“right” “center” “left”.
Elementos
Además de etiquetas y atributos, HTML define el término elemento para referirse a
las partes que componen los documentos HTML.
Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en
realidad un elemento HTML es mucho más que una etiqueta, ya que está formado
por:
• Una etiqueta de apertura.
• Cero o más atributos.
• Texto encerrado por la
etiqueta.
• Una etiqueta de cierre.
Marcado de Texto
En las secciones siguientes se muestran todas las etiquetas que define HTML para estructurar y marcar el texto.
Además, se hace una mención especial al tratamiento que hace HTML de los espacios en blanco y las nuevas líneas.
Etiqueta párrafo: <p>

Etiqueta de sección: <h1><h2><h3><h4><h5>
Etiqueta cursiva: <em>
Etiqueta Negrita: <strong>
Etiqueta: <ins><del>, ambas etiquetas se utiliza con un atributos cite=“url” y datetime=“fecha” que indica la fecha. El
texto del muestra tachado y el ins muestra subrayado.
Etiqueta <blockquote>: Se emplea para indicar que el texto que encierra es una cita textual de otro texto externo.
El element cite, marca el nombre del autor y blockquoute el contenido de la cita.
Etiqueta <acronym>: acompada de title, que se utiliza para marcar la siglas o acrónimos de un texto.
<body>
<p> El lenguaje <acronym title="HyperText Markup Language">HTML</acronym> es estandarizado
por el <acronym title="World Wide Web Consortium">W3C</acronym>.</p>
</body>
Marcado de Texto
Espacios en blanco:
Etiqueta <pre>: muestra el texto tal cual como se ha escrito. La function de la
etiqueta <code> es similar, pero su diferentes es el tipo de la letra.
Etiqueta <acronym>: acompada de title, que se utiliza para marcar la siglas o acrónimos de
un texto.
<body>
<p> El lenguaje <acronym title="HyperText Markup Language">HTML</acronym>
es estandarizado por el <acronym title="World Wide Web
Consortium">W3C</acronym>.</p>
</body>
Enlaces Hipertexto
Los enlaces hipertexto (link) no son mas que una zona especiales de nuestro texto
que ofrecen la posibilidad de pulsar sobre ellas para ir a otras páginas. Los enlaces se
utilizan para establecer relaciones entre dos recursos.
URL:
El acrónimo URL (del inglés Uniform Resource Locator) hace referencia al
identificador único de cada recurso disponible en Internet. Las URL son esenciales
para crear los enlaces, pero también se utilizan en otros elementos HTML como las
imágenes y los formularios.
La URL de un recurso tiene dos objetivos principales:
 Identificar de forma única a ese recurso-http://ctc.gob.do/

 Permitir localizar de forma eficiente ese recurso
Enlaces Hipertexto
URL:
La URL de un recurso tiene dos objetivos principales:
 Identificar de forma única a ese recurso- http://www.ctc.edu.do
 Permitir localizar de forma eficiente ese recurso

http://www.ctc.edu.do/tu-ctc
Las partes que component la URL:

Protocolo: http:// y cuando tiene una S, indica que es un servidor seguro.
Servidor: www.ctc.edu.do
Ruta: /tu-ctc
Enlace interno y externo
URL absoluta/relative *investigar estudiante*
Enlaces
• <p> Los enlaces son muy fáciles de indicar: <a>Soy un enlace incompleto, porque no tengo
dirección de destino</a>. <a href="http://www.google.com">Este otro enlace apunta a la
página de Google</a>. </p>
<a href="http://www.google.com" hreflang="en" type="text/html" charset="UTF-8">Página

principal de Google</a>
Enlace para JavaScript: <script type="text/javascript"

src="http://www.ejemplo.com/js/inicializar.js"></script>
Enlace para CSS: <link rel="stylesheet" type="text/css" href="/css/comun.css" />
<a href="/">Inicio</a>
Enlace vacio. <a href=“#”></a>
<a href="mailto:nombre@direccion.com" title="Dirección de email para solicitar más

información"> Solicita más información </a>
Enlaces
l
La sintaxis de mailto: permite utilizarlo para otros ejemplos más complejos:
VARIAS DIRECCIONES A LA VEZ
<A HREF="MAILTO:NOMBRE@DIRECCION.COM,OTRO_NOMBRE@DIRECCION.COM">Solicita más

información</A>
"ASUNTO" INICIAL AL CORREO ELECTRÓNICO
<A HREF="MAILTO:NOMBRE@DIRECCION.COM?SUBJECT=SOLICITUD DE MÁS

INFORMACIÓN">Solicita más información</A>
UN TEXTO INICIAL EN EL CUERPO DEL CORREO ELECTRÓNICO
<A HREF="MAILTO:NOMBRE@DIRECCION.COM?BODY=ESTARÍA INTERESADO EN SOLICITAR MÁS

INFORMACIÓN SOBRE SUS PRODUCTOS">Solicita más información</A>
Lista por definición
<dl>
<dt>SGML</dt>
<dd>Metalenguaje para la definición de otros lenguajes de

marcado</dd>
<dt>RSS</dt>
<dt>GML</dt>
<dt>XHTML</dt>
<dt>SVG</dt>
<dt>XUL</dt>
<dd>Lenguajes derivados de XML para determinadas aplicaciones</dd>
</dl>
Listas Ordenadas
<ol>
<li>Enchufar correctamente</li>
<li>Comprobar conexiones</li>
<li>Encender el aparato</li>
</ol>
Listas No Ordenadas
<ul>
<li>Inicio</li>
<li>Noticias</li>
<li>Artículos</li>
<li>Contacto</li>
</ul>
Imágenes
Imágenes
Ejemplo sencillo para incluir una imagen:
Etiqueta vacia, por eso no tiene etiqueta de cierre.

<img src=“logotipo.gif” alt=“logotipo de mi sitio”/>
<img src="/imagenes/foto1.jpg" alt="Fotografía de un paisaje" width="200" height="350" />
Insertar imagen de fondo:
<body background="IMG1/fondo61.jpg"></body>
html>
<head>
Ejercicios1
<title>Como hacer un menú</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
</head>
<Body background="IMG1/fondo5.jpg">
</br>
<ul>
<marquee behavior="alternate">
<a href="Conocenos.html" STYLE="font-familiar:cambria; text align: center"> Conócenos</a>
<a href="Marketing.html" STYLE="font-familiar:cambria; text align: center"> Marketing</a>
<a href="Ubicacion.html" STYLE="font-familiar:cambria; text align: center"> Ubicación</a>
<a href="Acercate.html" STYLE="font-familiar:cambria; text align: center"> Acércate</a>
</ul>
<img src="IMG1/fresa1.jpg">
</body>
</html>
Tablas y Formularios
Ejercicios2
Las tablas de HTML puede contener elementos simples, agrupaciones de filas y de columnas, cabeceras y
pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos.
Algunas tablas complejas están formadas por más elementos que filas y celdas de datos.
Así, es común que las tablas más avanzadas dispongan de una sección:
• cabecera
• una sección de pie
• varias secciones de datos.
Además, también es posible agrupar varias columnas de forma lógica para poder aplicar estilos similares a
un determinado grupo de columnas.
www.ctc.edu.do
HTML es un lenguaje de marcado cuyo propósito principal consiste en estructurar los contenidos de los documentos y páginas web.
Sin embargo, HTML también incluye elementos para crear aplicaciones web. El estándar HTML/XHTML permite crear formularios para
que los usuarios interactúen con las aplicaciones web.
3. Tablas
META
Las etiquetas meta o elementos meta son etiquetas HTML que se incorporan en el
encabezado de una página web y que resultan invisibles para un visitante normal,
pero de gran utilidad para navegadores u otros programas que puedan valerse de
esta información.
La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es
posible indicar un tipo de información y su valor, pero es posible insertar varias
etiquetas <meta> en un mismo documento.
La etiqueta <meta> ha de estar entre las etiquetas <head> </head>.
Acentos:
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
Colores
Los colores de los vínculos pueden especificarse a través de las propiedades de la
página, en la etiqueta <body>.
Estos colores se asignan a través de los atributos link (vínculo), alink (vínculo activo), y
vlink (vínculo visitado).
link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado
ninguna vez).
alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado).
vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido
pulsados).
Por ejemplo:
...
<body link="#FF0000" vlink="#FF0099" alink="#FF9900">
...
<a href="http://www.aulaclic.com" target ="_blank">www.aulaclic.com</a>
bgcolor="#0000FF“ Colores
bgcolor="blue“
text="#FF0000“
Ñ=Ñ
ñ=ñ
Border=“2”
Bordercolor=“000000”;
 Comentarios
Separadores <hr> una linea
Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la
ventana en forma de línea. <marquee> y </marquee>.
behavior =“alternate” ”scroll” “slide”
Direction=“down””up””left””right”
Ejercicios Colores
Las tablas de HTML puede contener elementos simples, agrupaciones de filas y de columnas, cabeceras y
pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos.
Algunas tablas complejas están formadas por más elementos que filas y celdas de datos.
Así, es común que las tablas más avanzadas dispongan de una sección:
• cabecera
• una sección de pie
• varias secciones de datos.
Además, también es posible agrupar varias columnas de forma lógica para poder aplicar estilos similares a
un determinado grupo de columnas.
www.ctc.edu.do
HTML es un lenguaje de marcado cuyo propósito principal consiste en estructurar los contenidos de los documentos y páginas web.
Sin embargo, HTML también incluye elementos para crear aplicaciones web. El estándar HTML/XHTML permite crear formularios para
que los usuarios interactúen con las aplicaciones web.
Tablas
Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y
títulos que los que se utilizan en cualquier otro entorno de publicación de
documentos:
Tablas
Las tablas mas sencillas de HTML se definen con tres etiquetas: <table> para crear la
tabla, <tr> para crear cada fila, y <td> para crear cada columna.
Ejemplo:
La etiqueta <table> encierra todas las filas y columnas de la table. Las etiquetas <tr>
(del inglés “table row”) definen cada fila de la table y encierran todas las columnas.
Por últimos, la etiqueta <td> (del inglés "table data cell") define cada una de las
columnas de las filas, aunque realmente HTML no define columnas sino celdas de
datos.
Tablas
Las tablas mas sencillas de HTML se definen con tres etiquetas: <table> para crear la
tabla, <tr> para crear cada fila, y <td> para crear cada columna.
Ejemplo:
La etiqueta <table> encierra todas las filas y columnas de la table. Las etiquetas <tr>
(del inglés “table row”) definen cada fila de la table y encierran todas las columnas.
Por últimos, la etiqueta <td> (del inglés "table data cell") define cada una de las
columnas de las filas, aunque realmente HTML no define columnas sino celdas de
datos.
Tablas
Los atributos de la etiqueta <th> son idénticos que los atributos definidos para la
etiqueta <td>. En este caso, el atributo más utilizado es scope, que permite indicar si la
celda es cabecera de la fila o de la columna (<th scope="row"> y <th scope="col">
respectivamente).
Por otra parte, HTML define la etiqueta <caption> para establecer la leyenda o título de
una tabla. La etiqueta debe colocarse inmediatamente después de la etiqueta <table> y
cada tabla sólo puede incluir una etiqueta <caption>.
Ejercicios 1 y 2
Tablas
Para fusionar filas o columnas, se utilizan los atributos rowspan y colspan
respectivamente.
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>A</td> <td rowspan="2">B</td>
</tr>
Tablas avanzadas
Las partes que componen las tablas complejas se definen mediante

las etiquetas <thead>, <tbody> y <tfoot>. La cabecera de la tabla se
define con la etiqueta <thead>, el pie de la tabla se define mediante
<tfoot> y cada sección de datos se define con una etiqueta <tbody>.
4. Formularios
Formularios
El estándar HTML/XHTML permite crear formularios para que los usuarios

interactúen con las aplicaciones web.
Los formularios mas sencillos se pueden crear utilizando solamente dos

etiquetas <form> y <input>.
La etiqueta <form> encierra todos los contenidos del formulario (botones,

cuadros de texto, listas despegables), y la etiqueta <input> permite
definer varios tipos diferentes de elementos (botones y cuadros de
textos).
Formularios
Formularios Básicos
Atributo action y method.
Action: indica la url de la aplicacion del servidor que se encarga de procesar los datos
introducidos por los usuarios y generar las repuestas que muestra el navegador.
Method: establece la forma en que se envian los datos del formularios al servidor.
Valores:
GET admite como máximo el envio de unos 500 bytes de información y no permite el
envio de archivos adjuntos.
Ejemplo: No modifican la información (en un formulario de búsqueda)
POST permite el envio de muchas más información que el Get y los datos enviado no
se ven en la barra de direcciones del navegador.
Ejemplo: El formulario modifica la información original (insertar, modificar o borrar alguna
información).
Elementos de Formularios
Los elementos de
formulario como botones
y cuadros de texto
también se denominan
"campos de formulario" y
"controles de formulario".
Ejemplo de los controles que se pueden crear con la etiqueta
<input>:
1. Cuadro de Texto
<input type="text" name="nombre" value="" size=“10”

maxlength/>
2. Cuadro de Contraseña
<input type="password" name="contrasena" value="" />

Checkbox: Los checkbox o "casillas de verificación" son controles de
formulario que permiten al usuario seleccionar y deseleccionar
opciones individualmente.
<input name="puesto_directivo“ type="checkbox"

value="direccion"/> Dirección
<input type="checkbox" checked="checked" ... /> Checkbox

seleccionado por defecto
Radiobutton: Los radiobutton se utilizan cuando el usuario solamente

puede escoger una opción entre las distintas opciones relacionadas que
se le presentan.
<input type="radio" name="sexo" value="hombre"

checked="checked" /> Hombre
Botón de envío de formulario: El navegador se encarga de
enviar automáticamente los datos cuando el usuario pincha
sobre este tipo de botón
<input type="submit" name="buscar" value="Buscar" />
Botón de reseteo del formulario: Se trata de un botón especial

que borra todos los datos introducidos por el usuario y
devuelve el formulario a su estado original:
<input type="reset" name="limpiar" value="Borrar datos del

formulario" />
Campos ocultos: Los campos ocultos se emplean para añadir
información oculta en el formulario.
<input type="hidden" name="url_previa"

value="/articulo/primero.html" />
Botón:
<input type="button" name="guardar" value="Guardar
Cambios" />
Ficheros adjuntos:
Si se incluye un control para adjuntar archivos, es obligatorio anadir el atributo enctype
en la <form> del formulario. El valor del atributo enctype debe ser multipart/form-data,
por lo que la etiqueta <form> de los formularios que permiten adjuntar archivos
siempre es:
<input type="file" name="adjunto" />
Botón de imagen: Su principal ventaja es que permite personalizar por completo la

estética de los botones y mostrarlos con un aspecto homogéneo en todos los
navegadores.
<input type="image" name="enviar" src="accept.png" />

Ejercicios
Formularios Avanzados
La Etiqueta <fieldset>: agrupa todos los controles de formulario a los que
encierra.
La Etiqueta <legend>: se incluye dentro de cada etiqueta y establece el título
que muestra el navegador para cada agrupación de elementos.
La Etiqueta <label>: se utiliza para establecer el título de cada campo del
formulario. Atributo asignado a esta etiqueta es for, que indica el identificador
del campo del formulario para el que esta etiqueta hace de título.
La principal ventaja de utilizar <label> es que el código HTML está mejor

estructurado y se mejora su accesibilidad. Además, al pinchar sobre el texto del
<label>, el puntero del ratón se posiciona automáticamente para poder escribir
sobre el campo de formulario asociado. Este comportamiento es especialmente
útil para los campos de tipo radiobutton y checkbox.
Las listas deplegables y las areas de texto disponen de sus propias etiquetas <select> y
<textarea>.
Las áreas de texto son utiles cuando se debe introducir una gran cantidad de texto, ya que es
mucho mas comodo de introducer que en un campo de texto normal.
Los atributos más utilizados en las etiquetas <textarea> son los que controlan su anchura y altura. La
anchura del área de texto se controla mediante el atributo cols, que indica las columnas o número de
caracteres que se podrán escribir como máximo en cada fila.
La altura del área de texto se controla mediante rows, que indica directamente las filas de texto
que serán visibles.
<form>
<label for="nombre">Nombre del producto</label> <br/>
<input type="text" id="nombre" name="nombre" value="" />
<label for="descripcion">Descripción del producto</label> <br/>
<textarea id="descripcion" name="descripcion" cols="40"

rows="5"></textarea>
</form>
Las listas deplegables y las areas de texto disponen de sus propias etiquetas <select> y
<textarea>.
Las áreas de texto son utiles cuando se debe introducir una gran cantidad de texto, ya que es
mucho mas comodo de introducer que en un campo de texto normal.
Los atributos más utilizados en las etiquetas <textarea> son los que controlan su anchura y altura. La
anchura del área de texto se controla mediante el atributo cols, que indica las columnas o número de
caracteres que se podrán escribir como máximo en cada fila.
La altura del área de texto se controla mediante rows, que indica directamente las filas de texto
que serán visibles.
3. La Hoja de Estilo en
Cascada o CSS
Estilos CSS
Hoja de estilo en cascada: Cascading Style Sheets (CSS), es un lenguaje de hojas de
estilos creado para controlar el aspecto o presentación de los documentos electrónicos
definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su
presentación y es imprescindible para crear páginas web complejas.
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de
cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical
entre elementos, posición de cada elemento dentro de la página, etc.
Antes: Funcionamiento de los CSS
<title> Ejemplo de estilos sin CSS </title>
<body>
<h1> <font color="red" face="Arial" size="5">Titular de la página</font></h1>
<p> <font color="gray" face="Verdana" size="2">Un párrafo de texto no muy largo.</font></p>
</body>
CSS permite separar los contenidos de la página y la información sobre su aspecto.

Utilizando CSS, se pueden establecer los mismos estilos con menos esfuerzo y sin ensuciar el código HTML de los
contenidos con etiquetas <font>. La etiqueta <style> crea una zona especial donde incluyen todas las reglas CSS que
se aplican en la página.
Ahora:
<title>Ejemplo de estilos con CSS</title>
<style type="text/css">
h1 { color: red; font-family: Arial; font-size: large; }

p { color: gray; font-family: Verdana; font-size: medium; }
</style>
Estilos con HTML Estilos con CSS
<html>
<head>
<html>
<title>ejemplo css</title>
<head> <style type=“text/css”>
<title>Ejemplo de estilos sin CSS</title> h1 { color:red ; font-family: arial; font –
size: large; }
</head>
p {color: gray; font-family: verdana;
<body> font-size: medium}
<h1><font color="red" face="Arial"
size="5">Titular de la página</font> </style>
</head>
</h1> <body>
<p><font color="gray" face="Verdana" <h1>Ejemplo con los estilos</h1>
size="2">Un párrafo de texto no muy largo <p>Escribir un parrafo de texto no muy
</font></p> largo</p>
</body> </body>
</html>
</html>
Etiqueta Link:
Funcionamiento de los CSS
Esta etiqueta se utiliza para enlazar los estilos de una página externa.
<head>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
<head>
<head>
<style type="text/css" media="screen"> @import '/css/estilos.css'; </style>
<head>
Componentes de un estilo CSS básico

CSS permite incluir comentarios entre sus reglas y estilos.
Los comentarios son contenidos de texto que el diseñador
incluye en el archivo CSS para su propia información y
utilidad. Los navegadores ignoran por completo cualquier
comentario de los archivos CSS, por lo que es común
utilizarlos para estructurar de forma clara los archivos CSS
complejos.
El comienzo de un comentario se indica mediante los
caracteres /* y el final del comentario se indica mediante */ ,

tal y como se muestra en el siguiente ejemplo:
/* ESTE ES UN COMENTARIO EN CSS */

Selectores
La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo". Por lo
tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una
página.
Selector Universal:
*{
margin: 0;
padding: 0;
}
Selector de tipo o etiqueta: selecciona todos los elementos de la página cuya etiqueta HTML
coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:
p { ... }
h1 { color: red; }
h2 { color: blue; }
Cont. Selector de tipo o etiqueta:
p { ... }
h1 { color: red; }
h1, h2, h3 {
color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
Selector Universal: Un elemento es descendiente de otro cuando se encuentra entre las
etiquetas de apertura y de cierre del otro elemento.
Selector de Clase: Una de las soluciones mas sencillas para aplicar estilos a un solo elemento de la pagina
consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS que
se le debe aplicar:
<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
.destacado { color: red; }
.aviso {
padding: 0.5em;
border: 1px solid #98be10;
background: #f6feda;
}
<span class="error">...</span> <div class="aviso">...</div>

Selectores de ID: permite seleccionar un elemento de la pagina a través del valor de su atributo id. Este tipo
de selectores solo seleccionan un elemento de pagina porque el valor del atributo id no se puede repetir en
dos elementos diferentes de una misma pagina.
#destacado { color: red; }
<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>

<p>Tercer párrafo</p>
p#aviso { color: blue; }

R e c o r d e m o s q u e p a ra d e f i n i r l a r e g l a d e e s t i l o d e b e m o s i n d i c a r e l
nombre del elemento html a la que definiremos el estilo (en este caso
h1) y luego, entre llaves, todas las propiedades y sus valores separados
por punto y coma.
l a p r i m e r a p r o p i e d a d i n i c i a l i z a d a e s f o n t - f a m i l y, a l g u n a s d e l a s f u e n t e s
más comunes que puede acceder el navegador son:
•a r i a l
•a r i a l b l a c k
• arial narrow
•c o u r i e r n e w
•g e o r g i a
•i m p a c t
•t a h o m a
• times
•n e w r o m a n
•v e r d a n a
La segunda propiedad inicializada es font-size, hay varias medidas para
indicar el tamaño de la fuente (veremos más adelante otros sistemas de
m e d i d a ) , e n n u e s t r o c a s o i n d i c a m o s e n p í xe l e s :
FONT-SIZE:30PX;
La tercera propiedad es font-style, que puede tener los siguientes

valores :
normal
Italic
oblique
La última propiedad es font-weight (peso de la fuente), pudiendo tomar los siguientes valores:
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
Esta propiedad indica el peso de la fuente (mientras tenga un valor mayor los caracteres serán
más rellenos)
Unidad de medidas y colores.
Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de los
elementos y para establecer el tamaño de letra del texto. Todas las medidas se indican como un
valor numérico entero o decimal seguido de una unidad de medida (sin ningún espacio en
blanco entre el número y la unidad de medida).
Una medida indicada mediante unidades absolutas está completamente definida, ya que su
valor no depende de otro valor de referencia. A continuación se muestra la lista completa de
unidades absolutas definidas por CSS y su significado:
•in, pulgadas ("inches", en inglés). Una pulgada equivale a 2.54 centímetros.

•cm, centímetros.
•mm, milímetros.
•pt, puntos. Un punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros.
•pc, picas. Una pica equivale a 12 puntos, es decir, unos 4.23 milímetros.
Unidad de medidas y colores.
La unidades relativas, a diferencia de las absolutas, no están completamente definidas, ya que su
valor siempre está referenciado respecto a otro valor. A pesar de su aparente dificultad, son las
más utilizadas en el diseño web por la flexibilidad con la que se adaptan a los diferentes medios.
Em, relativa respuecto del tamaño de letra del elemento.

Ex, relativa respuecto de la altura de la letra del tipo y tamaño de letra del elemento.
Px, pixel, relativa respecto de la resolcion de la pantalla del dispositivo en el que se visualiza la
pagina web.
Porcentajes:
Body { font-size: 1em; }

H1 { font-size: 200%; }
H1 { font-size: 200%; }
Caja
Las partes que componen cada caja y su orden de visualización desde el punto de vista del
usuario son las siguientes:
Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una
imagen, el texto de una lista de elementos, etc.)
Relleno (padding): espacio libre opcional existente entre el contenido y el borde.

Borde (border): línea que encierra completamente el contenido y su relleno.
Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el
espacio de relleno.
Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de
relleno.
Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.
Margen, Relleno y Border
1. Anchura:
border-top-width, border-right-width, border-bottom-width, border-left-width
Palabras claves: Thin (border delgado), medium (borde normal) y thick (borde ancho)
2. Color:
border-top-color, border-right-color, border-bottom-color, border-left-color.
border-top-color: #CC0000;
border-right-color: blue;
border-bottom-color: #00FF00;
border-left-color: #CCC;
3. Estilos: Margen, Relleno y Border
border-top-style, border-right-style, border-bottom-style, border-left-style
div {
border-top-style: dashed;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: solid;
}
<estilo_borde>: una de las siguientes palabras clave: none,

hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
Margen, Relleno y Border
3. Estilos:
div { width: 300px;

padding-left: 50px;
padding-right: 50px;
margin-left: 30px;
margin-right: 30px;
border: 10px solid black;
}
Margen:
Estilos
.destacado { margin-left: 2em; }
<p class="destacado">Vestibulum lectus diam, luctus vel, venenatis ultrices, cursus vel, tellus.
Etiam placerat erat non sem. Nulla molestie odio non nisl tincidunt faucibus.</p>
Width:
#lateral { width: 200px; }
<div id="lateral"> ... </div>
Height:
#cabecera { height: 60px; }
<div id="cabecera"> ... </div>

Fondos
background-color:
body { background-color: #F5F5F5; }
background-image:
body { background-image: url("imagenes/fondo.png") }
background-repeat:
El valor repeat indica que la imagen se debe repetir en todas direcciones y por tanto, es el
comportamiento por defecto. El valor no-repeat muestra una sola vez la imagen y no se repite
en ninguna dirección. El valor repeat-x repite la imagen solo horizontalmente y el valor repeat-y
repite la imagen solamente de forma vertical.
#hdr { background: url("/images/ds.gif") repeat-x;

width: 100%;
text-align: center;
}
Fondos
background-position:
#caja1 { background-image: url("images/help.png");

background-repeat: no-repeat;
background-position: bottom left;
}
Texto
font-size
Imágenes Listas
El resto de valores de la propiedad list-style-type se dividen en
tres tipos: gráficos, numéricos y alfabéticos.
dividen en tres
#destacada { • Los valores gráficos son disc, circle y square y muestran
width: 120px; como viñeta un círculo relleno, un círculo vacío y un
height: 250px; } cuadrado relleno respectivamente.
<img id="destacada" src="imagen.png" • Los valores numéricos están formados por decimal,
decimal-leading-zero, lower-roman, upper-roman,
/>
armenian y georgian.
Para eliminar el borde: • Por último, los valores alfanuméricos se controlan

mediante lower-latin, lower-alpha, upper-latin, upper-
img { border: none; } alpha y lower-greek.
list-style-position outside / inside

<ul style="list-style-type: square">
<li>list-style-type: square</li>
<li>Elemento</li>
<li>Elemento</li>
</ul>
Menú Básicos
Menú Avanzados
Modificando los estilos de

cada elemento del menú y
utilizando imágenes de fondo
y las pseudo-clases :hover y
:active, se pueden crear menús
horizontales complejos, incluso
con el aspecto de un menú de
solapas o pestañas:
.normal {
width: 200px;
border: 8px solid #D65050; Estilos de las páginas:
border-collapse: collapse;
border-collapse: separate; #contenedor {
border-spacing: 3; width: 400px;
margin: 5px auto;
}
}
.normal th, .normal td{
border: 5px solid #D65050; <div id=“contenedor”></div>
}
#contenedor {
<table class="normal" summary="Tabla genérica"> width: 500px;
<tr> height: 500px;
<th scope="col">A</th>
<th scope="col">B</th> position: absolute;
top: 50%;
<th scope="col">C</th>
left: 50%;
<th scope="col">D</th>
<th scope="col">E</th> margin-top: -250px;
</tr> margin-left: -250px;
</table> }
Opciones
div#paginacion {
border: 1px solid #CCC;
background-color: #E0E0E0;
padding: .5em;
}
.derecha {
float: right;
}
.izquierda {
float: left;
}
div.clear {
clear: both;
}
<div id="paginacion">
<span class="izquierda">« Anterior</span> <span
class="derecha">Siguiente »</span>
<div class="clear"></div>
</div>
Otras etiquetas
Insertar Videos en HTML/CSS
<video src="Diseño/prueba.mp4" type="video.mp4" width="300" height="208“ controls autoplay></video>

<audio src=“Prueba/Heroe.mp3" controls preload>
Reproducción del vídeo:
controls: si queremos que se muestren los controles que permiten pararlo, reproducirlo, etc.
autoplay: el vídeo se reproducirá en cuanto esté listo.
preload: hace que el vídeo se empiece a cargar en cuanto se accede a la página.
preload="none", no se cargará hasta que el usuario haga clic en el vídeo para su reproducción.
loop: el vídeo se reproduzca cíclicamente. Si no indicamos nada, al terminar su reproducción se detendrá.
muted: el vídeo no tendrá sonido al comenzar.
Validación HTML/CSS
La validación es un mecanismo que permite comprobar que el código CSS creado cumple las reglas de la
sintaxis del lenguaje CSS y que por tanto es una hoja de estilos válida para aplicarla a cualquier
documento XHTML. La validación suele ser útil cuando se producen errores en los estilos definidos o
comportamientos no deseados al aplicar las reglas CSS.
El W3C (World Wide Web Consortium) dispone de un validador online que permite validar reglas CSS
sueltas, páginas XHTML con CSS incluído y archivos CSS independientes. El validador se puede acceder en
http://jigsaw.w3.org/css-validator/
Páginas de referencias para plantillas.
http://www.oswd.org/
Servidores/Publicar Página
El dominio: cuando compras un dominio, lo que adquieres, es el derecho a usar un determinado
nombre en internet (como por ejemplo, programad@s.com), para que la gente visite tu web, o te envíe
emails.
Los dominios no incluyen nunca espacio web, ni acceso por FTP ni cuentas de correo. El dominio por sí
solo no hace nada.
El alojamiento web (hosting) es un conjunto de servicios que se pueden usar con cualquier dominio. Se
contratan y renuevan aparte. Por ejemplo: espacio en un servidor para subir tu web por FTP, cuentas de
correo, o bases de datos.
Una vez que hemos comprado las dos cosas, el dominio y el alojamiento, solo hay que configurar el
dominio para enlazarlo a esos servicios que hemos comprado.
http://servidorgratuito.com/
http://www.zobyhost.com/
https://es.000webhost.com/
https://skylium.com/
Muchas Gracias
CTCRD @CTCRD
Tel.:809-333-3262 ext. 4224-3220 www.ctc.edu.do

Calle Pedro Henríquez Ureña , No. 12, Gazcue.
Santo Domingo, D.N.

Pagina Web

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Pagina Web

Încărcat de

Drepturi de autor:

Formate disponibile

Programad@s

Un requerimiento es una necesidad documentada sobre el contenido, forma o

Los requerimientos son declaraciones que identifican atributos, capacidades,

Datos: Es una representación simbólica de un atributo o variable. Un dato

Programas: herramienta que permite al usuario realizar un trabajo

Archivos: es identificado por un nombre y la descripción de la carpeta o

Información: es un conjunto organizado de datos procesados.

Las páginas web pueden estar almacenadas en un equipo local o un servidor

Un sitio web es una colección de páginas web relacionadas y comunes a un dominio

Una página web es un documento HTML que es accesible generalmente mediante

A las páginas de un sitio web se accede frecuentemente a través de un URL raíz

Las siglas de HTML no significa mas que HyperText

El proceso de indicar las diferentes partes que componen

Aunque existen algunas excepciones, en general las etiquetas se indican

Así, la estructura típica de las etiquetas HTML es:

<nombre_etiqueta> ... </nombre_etiqueta>

1. La cabecera incluye información sobre la propia página,

2. El cuerpo de la página incluye todos sus contenidos,

En palabras más claras El cuerpo (llamado body en inglés)

Ejemplo correcto en XHTML:

Ejemplo incorrecto en XHTML (pero correcto en HTML):

Etiqueta párrafo: <p>

El element cite, marca el nombre del autor y blockquoute el contenido de la cita.

 Identificar de forma única a ese recurso-http://ctc.gob.do/

 Permitir localizar de forma eficiente ese recurso

Las partes que component la URL:

<a href="http://www.google.com" hreflang="en" type="text/html" charset="UTF-8">Página

Enlace para JavaScript: <script type="text/javascript"

Enlace para CSS: <link rel="stylesheet" type="text/css" href="/css/comun.css" />

Enlace vacio. <a href=“#”></a>

<a href="mailto:nombre@direccion.com" title="Dirección de email para solicitar más

VARIAS DIRECCIONES A LA VEZ

<A HREF="MAILTO:NOMBRE@DIRECCION.COM,OTRO_NOMBRE@DIRECCION.COM">Solicita más

"ASUNTO" INICIAL AL CORREO ELECTRÓNICO

<A HREF="MAILTO:NOMBRE@DIRECCION.COM?SUBJECT=SOLICITUD DE MÁS

UN TEXTO INICIAL EN EL CUERPO DEL CORREO ELECTRÓNICO

<A HREF="MAILTO:NOMBRE@DIRECCION.COM?BODY=ESTARÍA INTERESADO EN SOLICITAR MÁS

<dd>Metalenguaje para la definición de otros lenguajes de

<dd>Lenguajes derivados de XML para determinadas aplicaciones</dd>

Etiqueta vacia, por eso no tiene etiqueta de cierre.

<img src="/imagenes/foto1.jpg" alt="Fotografía de un paisaje" width="200" height="350" />

Insertar imagen de fondo:

Las partes que componen las tablas complejas se definen mediante

El estándar HTML/XHTML permite crear formularios para que los usuarios

Los formularios mas sencillos se pueden crear utilizando solamente dos

La etiqueta <form> encierra todos los contenidos del formulario (botones,

<input type="text" name="nombre" value="" size=“10”

<input type="password" name="contrasena" value="" />

<input name="puesto_directivo“ type="checkbox"

<input type="checkbox" checked="checked" ... /> Checkbox

Radiobutton: Los radiobutton se utilizan cuando el usuario solamente

<input type="radio" name="sexo" value="hombre"

<input type="submit" name="buscar" value="Buscar" />

Botón de reseteo del formulario: Se trata de un botón especial

<input type="reset" name="limpiar" value="Borrar datos del

<input type="hidden" name="url_previa"

<input type="file" name="adjunto" />

Botón de imagen: Su principal ventaja es que permite personalizar por completo la

<input type="image" name="enviar" src="accept.png" />

La principal ventaja de utilizar <label> es que el código HTML está mejor

<label for="nombre">Nombre del producto</label> <br/>

<input type="text" id="nombre" name="nombre" value="" />

<label for="descripcion">Descripción del producto</label> <br/>