DISEÑO DE PÁGINAS WEB WEB SITE DESIGNER Lo más importante de una página web es el contenido y el diseño. La página web debe ser con un diseño agradable, interesante y útil. Los programas más complejos para diseño web requieren saber programación o base de datos. Microsoft FrontPage, ha sido reemplazado por Microsoft® Expression™ Web Designer.
WEB SITE DESIGNER Para empezar con el diseño de la página web en primer lugar se deberá contestar las siguientes preguntas antes de comenzar a diseñar una web para Internet Qué tema se tratará? Qué tipo de público la visitará? Qué edad tendrán los visitantes? Cuál es el fin de la página? Comercial o sin fines de lucro? A quién va dirigida la página?
HTML HTML es un lenguaje utilizado en el diseño de paginas Web que se basa en etiquetas, se coloca contenido entre etiquetas, las cuales marcan un inicio y un fin, por ejemplo <b> </b> para que lo escrito entre ellas esté en negrita. Decir htm o html es prácticamente lo mismo, pero al acceder a una url (dirección Web) debe escribir tal cual el nombre de la web a la cual desea acceder. En este lenguaje se usan etiquetas (tags), por ejemplo indicando distintos formatos y efectos que se observarán al visualizar lo escrito como pagina web, mediante un navegador. Funcionan de la siguiente forma: Este es el inicio de una etiqueta: <XXX> Este es el cierre de una etiqueta: </XXX> Index La página principal de un Sitio Web, es decir index.html. (o index.htm, en este caso Es recomendado llamarse así, de no tener este nombre el servidor no sabrá cual es su página principal ya que todas las páginas principales se llaman index por omisión. Siempre debe nombrar a la principal index.html (o index.htm) o en el caso de utilizar otra tecnología, por ejemplo PHP seria index.php. Sino tendría que hacer una redirección.
INSTRUCCIONES PRINCIPALES <HTML> … </HTML> Delimita y engloba toda la página web, que consta de cabecera y cuerpo. <HEAD> … </HEAD> Delimita y engloba la cabecera de una página, que contiene un conjunto de informaciones que no se muestran en la ventana, entre ellas el título de la página, pero que pueden ayudar a los navegadores y a los buscadores para interpretar o a encontrar correctamente la página. <TITLE> … </TITLE> Dentro de la cabecera (HEAD), lo que se incluye aquí se muestra en la barra del título de la ventana del navegador. Metadatos La cabecera admite otras muchas etiquetas . <BODY> … </BODY> Delimita y engloba el cuerpo de la página, que son el conjunto de informaciones (texto e imágenes) que se muestran en la página, así como las indicaciones de cómo deben mostrarse. Admite atributos.
ATRIBUTOS ATRIBUTOS ALINK="..." Especifica el color de las Direcciones activadas en la página. BACKGROUND="..." Especifica el papel tapiz de la página. un Archivo *.jpg o *.gif. BGCOLOR="..."Especifica el Color del Fondo del Documento. Los colores son expresados en formato RGB(Red, Green,Blue), donde cada color tiene un valor desde el 0 (0) hasta el 255 (FF). Amarillo = #FFFF00 Azul = #0000FF Azul Claro = #00CCFF Blanco = #FFFFFF Gris = #CC9999 Lila = #CC33FF Negro = #000000 Rojo = #FF0000 Verde = #00FF00 BGPROPERTIES=FIXED Fija la imagen del Fondo para que no se desplace. (IE) LEFTMARGIN="..." Especifica el margen Izquierdo de todo el documento.(IE) LINK="..." Especifica el color de las direcciones contenidas en el documento. TEXT="..." Especifica el Color del texto. TOPMARGIN="..." Fija el margen superior de todo el Documento.(IE) VLINK="..." Especifica las direcciones visitadas, incluidas en el Documento.
EJERCICIOS: Abrir el bloc de notas o notepad. Escribir las instrucciones. Guardar el archivo con extensión .htm o .html <html> <head> <title> Aquí va el titulo. </title> </head> <body> Aquí va lo que vez adentro de la pagina </body> </html> Lo que está entre estos signos: < > se llama etiqueta Cuando la etiqueta tiene este signo antes"/" es decir que se cierra.
EJERCICIOS: <html> <head> <title>Título de la página</title> </head> <body> <h1>Encabezado de la página</h2> <h3>Encabezado de menor tamaño</h3> <p>Este es el texto de un párrafo.</p> <p>Este es el texto de otro párrafo. Dentro de este párrafo, pueden ir palabras <b>en negrita</b>, <i>en cursiva</i> o lo que quieras.</p> </body> </html>
EJERCICIOS: <HTML> <HEAD> <TITLE> Primer página de ejemplo</TITLE> </HEAD> <BODY> <H2> Encabezado </H2> <P>Primer párrafo debajo del encabezado.</P> <H3> Un encabezado <BR> en dos renglones </H3> <P>Párrafo con partes <B>en negrita</B> </P> </BODY> < /HTML>
EJERCICIOS: <HTML> <HEAD> <TITLE>Mi primera página Web</TITLE> </HEAD> <BODY bgcolor="black"> > ...Contenido de la Pagina </BODY> </HTML>