Clase diseño web by bmagallanes

Diseño Web Instituto Superior de Educación Público “Chincha”

Prof.

Mariela Lévano Tataje

Diseño Web Introducción al Diseño Web Conceptos Básicos Una página web está compuesta por uno o varios documentos

html

relacionados

entre

sí

mediante

hipervínculos (enlaces). Además estos documentos pueden contener otros elementos como pueden ser imágenes, sonidos, animaciones multimedia, aplicaciones. A

continuación,

comentan

ciertos

conceptos

relacionados con el diseño y/o desarrollo web. Página Web Documento realizado en HTML y que es parte de un sitio Web. Aparte del HTML se pueden utilizar otros lenguajes complementarios como PHP, ASP, Javascript. Sitio Web Página principal y sus otras páginas, gráficos, documentos, multimedia y otros archivos asociados que se almacenan en un servidor Web o en el disco duro de un equipo. HTML (Lenguaje de marcado de hipertexto) Lenguaje estándar de marcas empleado para documentos del World Wide Web.

Prof.

Mariela Lévano Tataje

Diseño Web Hipervínculo Al hipervínculo se le suele llamar “enlace web” o en su versión anglosajona “link”. Un hipervínculo es una conexión de una página a otro destino como, por ejemplo, otra página o una ubicación diferente en la misma página. El destino es con frecuencia otra página Web, pero también puede ser una imagen, una dirección de correo electrónico, un archivo (como por ejemplo, un archivo multimedia o un documento de Microsoft Office) o un programa. Un hipervínculo puede ser texto o una imagen. Lenguaje de Programación Lenguaje con el que está desarrollada una página web. Editor Programa utilizado para crear páginas web sin la necesidad de tener que aprender el lenguaje. Ejemplo: Macromedia Dreamweaver. Servidor Máquina conectada a Internet que –entre otros serviciosofrece albergue para páginas web haciendo que estén accesibles desde cualquier punto de Internet. Cliente FTP Programa que permite conectarse al servidor para publicar páginas web. Hosting Hospedaje web. Dominio Dirección web asociada a una página web. ISP En el ámbito del desarrollo de sitios web, se puede decir que un ISP es un proveedor de servicios para web. Los diferentes servicios que pueden ofrecer son: conexión a Internet,

Prof.

Mariela Lévano Tataje

Diseño Web registro de dominio, hospedaje de sitios web, servicios de contadores de servicios, libros de visitas gratuitos, estadísticas para web, entre otros. URL (Universal Resource Location / Localizador de recursos universal) Cadena que proporciona la dirección de Internet de un sitio Web o un recurso del World Wide Web, junto con el protocolo mediante el cual se tiene acceso al sitio o al recurso. El tipo más común de dirección URL es http://, que proporciona la dirección de Internet de una página Web. Otros tipos de dirección URL son gopher://, que proporciona la dirección de Internet de un directorio Gopher, y ftp://, que proporciona la ubicación de red de un recurso FTP. Ejemplo: http://www.google.com Applets: Programas desarrollados con Java para mejorar la presentación de las páginas Web que realizan animaciones, juegos e interacción con el usuario. Frames Áreas rectangulares que subdividen las ventanas de algunas páginas Web, cada una de las cuales contiene

documento

hipertexto

independiente de los demás. WebMaster Un webmaster es el encargado de crear, diseñar, estructurar, maquetar, publicar, promocionar y mantener un sitio web. Tablas Elemento fundamental para la maquetación y distribución de contenidos de una página web.

Prof.

Mariela Lévano Tataje

Diseño Web Banner Elemento gráfico con forma rectangular, normalmente animado, cuyo contenido es publicidad. Imagen Archivo gráfico que se puede insertar en una página Web y mostrar en un explorador de Web. Existen diferentes formatos: GIF, JPEG, BMP, TIFF, WMF y PNG, entre otros. Propiedades Características de un elemento del Web actual, como el título y la dirección URL de un Web o el nombre y el valor inicial de un campo de formulario. También puede especificar propiedades para elementos de página como tablas, gráficos y elementos activos.

Prof.

Mariela Lévano Tataje

Diseño Web Diseño Web Creación de Páginas Web estáticas Etiquetas HTML A continuación se muestra un listado de algunas etiquetas HTML, también se mostrarán algunos ejemplos:

etiqueta

cierre

<!--

-->

<a>

</a>

atributo Añadir un comentario no visible. Establece un vínculo. href

<b>

Dirección del vínculo.

name

Establece un ancla.

target

Establece el destino del vínculo: _blank, _self, _top, _parent, o "definido"

</b>

Texto en negrita.

Explicación

Sangrado.

</body>

Parte visible en pantalla del documento. alink

Modifica el color del vínculo cuando está activado.

background Para colocar una imagen de fondo. bgcolor

Para establecer un color de fondo.

link

Modifica el color del vínculo antes de estar activado.

vlink

Modifica el color del vínculo cuando ya ha sido visitado.

<br />

Salto de línea.

Centra en horizontal.

<font>

</font>

Fuente. size

Tamaño de la fuente.

6 Prof.

Mariela Lévano Tataje

Diseño WebDiseño Web

<form>

color

Color

face

Tipo de letra.

</form>

Formulario action

<frame>

="mailto:la_dirección_de_correo"

method

="post"

enctype

="text/plain"

</frame>

Marco. name src

Nombre que se le da para referirse después a él. Establece qué documento se va a cargar inicialmente en el marco.

frameborder Indica si habrá o no borde entre los marcos.

noresize

Si se escribe, el navegante no puede redimensionar los marcos.

scrolling

Establece si habrá o no barra de scrolling.

</frameset>

<h1>

</h1>

<head>

</head>

Estructura de los marcos. Cols

Número de columnas.

Rows

Número de filas. Encabezado de primer orden.Hay otros 5: <h2><h3><h4><h5><h6> Cabecera del documento.

<hr>

Línea de separación horizontal. Align noshade Size width

<html>

</html>

<i>

</i>

Alineación de la línea. Sin efecto tridimensional. Grosor de la línea. Anchura de la línea. Apertura y cierre del código. Letra cursiva.

Prof.

Mariela Lévano Tataje

Diseño Web Diseño Web <iframe>

</iframe>

Marco en línea. Carga en un marco otra página. name src

Nombre que se le da al espacio para posteriores referencias. Establece qué documento se carga inicialmente.

frameborder Establece si habrá o no borde de separación. <img>

Inserta una imagen. alt

Texto alternativo a la imagen.

border

Establece si va a tener borde o no, cuando sirva de vínculo.

height

Altura de la imagen.

width

Ancho de la imagen.

src <li>

Establece qué imagen se va a insertar. Componente de una lista. Dentro de <ul> o de <ol>

<ol>

</ol>

Lista numerada de objetos.

<p>

</p>

Párrafo nuevo.

<sub>

</sub>

Subíndice.

<sup>

</sup>

Superíndice.

<table>

</table>

Tabla. align bgcolor

Establece el color de fondo de la tabla.

border

Establece un borde a la tabla

cellpadding

Separación entre el borde de la tabla y el contenido.

cellspacing

Separación entre las celdas.

width <td>

Alinea la tabla: center, right, left

</td>

Establece el ancho de la tabla. Celda de una tabla.

align

Establece la alineación del texto dentro de la celda: left, center, right.

Prof.

Mariela Lévano Tataje

Diseño WebDiseño Web bgcolor

Establece el color de fondo para la celda.

colspan

Extiende la celda sobre varias columnas.

height

Establece la altura de la celda.

rowspan

Extiende la celda sobre varias filas.

valign

Establece la alineación vertical: top, middle, bottom.

width

Establece el ancho de la celda.

<th>

</th>

<title>

</title>

<tr>

</tr>

Fila de una tabla.

<u>

</u>

Subrayado.

<ul>

</ul>

Lista no numerada de objetos.

Ejemplo 01:

Titular de la columna de una tabla. Dentro de <tr>. Establece el nombre del documento. Dentro de <head>

<html> <head> <title> Comentarios </title> </head> <body> Los textos siguientes:<p>  <blockquote> <b>Éste está en negrita</b><br> <i>Éste está en cursiva</i><br> <u>Éste está subrayado</u> </blockquote> </body> </html>

Prof.

Mariela Lévano Tataje

Diseño Web Diseño Web

Ejemplo 02:

Ejemplo 03:

<html> <head> <title> Subíndices y superíndices </title> </head> <body> f<sub>(x)</sub>= X<sup>2</sup> + 5X </body> </html>

<html> <head> <title> Barra de separación </title> </head> <body> Pongamos una separación: <hr> </body> </html>

Evidenciar en tu folder de trabajo las prácticas realizadas en la sala de cómputo Prof.

Mariela Lévano Tataje

Diseño Web DreamWeaver CS6

Prof.

Mariela Lévano Tataje

Diseño Web

Prof.

Mariela Lévano Tataje

Diseño Web

Prof.

Mariela Lévano Tataje

Diseño Web

Prof.

Mariela Lévano Tataje

Diseño Web

Prof.

Mariela Lévano Tataje

Diseño Web

Prof.

Mariela Lévano Tataje

Diseño Web

Prof.

Mariela Lévano Tataje

Diseño Web

Prof.

Mariela Lévano Tataje

Diseño Web

INDEX

Prof.

Mariela Lévano Tataje