HTML DISEÑO DE PAGINAS WEB ANTECEDENTES ANTECEDENTES 23/02/2012

Tamaño: px

Comenzar la demostración a partir de la página:

Download "HTML DISEÑO DE PAGINAS WEB ANTECEDENTES ANTECEDENTES 23/02/2012"

María Rosario Quiroga Mendoza
hace 7 años
Vistas:

1 HTML DISEÑO DE PAGINAS WEB ING. BOLIVAR ALCOCER SISTEMAS Internet es una red de redes a escala mundial de millones de computadoras interconectadas. Lo que no se sabe es que: WorldWide Web (Telaraña Mundial), la Webo WWW, es un sistema de hipertexto que funciona sobre Internet. 1

mundial de millones de computadoras interconectadas.

2 Para ver la información se utiliza una aplicación llamada navegador Web,y con ello extraer elementos de información (llamados "documentos" o "páginas Web") de los servidores Web (o "sitios") y mostrarlos en la pantalla del usuario. El usuario puede entonces seguir hiperenlaces que hay en la página a otros documentos o incluso enviar información al servidor para interactuar con él. A la acción de seguir hiperenlaces se le suele llamar "navegar" por la Web. No se debe confundir la Web coninternet, Internet: es la red física mundial sobre la que circula la información. WWW: es parte de Internet, siendo la WorldWideWeb uno de los muchos servicios ofertados en la red Internet. Algunos de los servicios disponibles en Internet aparte de la Web son: El acceso remoto a otras máquinas (telnet y ssh), Transferencia de archivos (FTP), Correo electrónico ( ), Boletines electrónicos (news o grupos de noticias), Conversaciones en línea (Chat), mensajería instantánea (ICQ, Messenger) 2

A la acción de seguir hiperenlaces se le suele llamar "navegar" por la Web. No se debe confundir la Web coninternet, Internet: es la red física mundial sobre la que circula la información.

3 Una Página Web es un documento de la WorldWideWeb normalmente en formato HTML. Una página Web típicamente, incluyetexto, imágenes y enlaces hacia otros documentos de la red, animaciones, sonidos, programas en Java, y cualquier otro tipo de documento. TERMINOS UTILIZADOS Una Página Web es un documento de la WorldWide Web normalmente en formato HTML. El HTML, acrónimo inglés de Hyper Text Markup Language (lenguaje de marcación de hipertexto). Un hipertextoes un documento digital que se puede leer de manera no secuencial. HTTPsignifican HyperTextTransfer Protocol, es decir, protocolo de transferencia dehipertexto. URL ó Uniform Resource locator, localizador uniforme de recurso: El URL es la cadena de caracteres con la cual se asigna una dirección única a cada uno de los recursos de información disponibles en Internet. ESTRUCTURA DE UNA URL 3

TERMINOS UTILIZADOS Una Página Web es un documento de la WorldWide Web normalmente en formato HTML. El HTML, acrónimo inglés de Hyper Text Markup Language (lenguaje de marcación de hipertexto).

4 QUE ES HTML?.. El HTML, acrónimo inglés de HyperText MarkupLanguage(lenguaje de marcación de hipertexto), es un lenguaje informático diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas Web. CARACTERISTICAS DEL LENGUAJE HTML. El Web tenía que ser distribuido: La información debía estar repartida en páginas no muy grandes enlazadas entre sí. El Web tenía que ser hipertexto y debía ser fácil navegar por él. Compatible con todo tipo de ordenadores (PC, Macintosh, estaciones de trabajo, etc...) Compatible con todo tipo de sistemas operativos (Windows, MSDOS, UNIX, MAC-OS,...). Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y rápido. Qué vamos a necesitar para crear un documento HTML? Tener conocimientos básicosde manejo de Windows. Un procesador de textos para escribir y editar el código HTML. Un navegador Web como el Explorer, Netscape, Mosaic, etc., el cual se encargará del interpretar el código HTML de nuestro documento y mostrárnoslo en todo su esplendor. 4

el formato estándar de las páginas Web. CARACTERISTICAS DEL LENGUAJE HTML. El Web tenía que ser distribuido: La información debía estar repartida en páginas no muy grandes enlazadas entre sí.

5 Estructura de un documento HTML La estructura básica de un documento HTML es la siguiente: <HTML> Indica el inicio del documento <HEAD> Indica el inicio de la cabecera <TITLE> Inicio del título del documento </TITLE> Final del título del documento </HEAD> Final de la cabecera <BODY> Inicio del cuerpo del documento Instrucciones HTML </BODY> Final del cuerpo del documento </HTML> Final del documento REGLAS DE FORMATO Todos los navegadores usan unas reglas básicas para poder mostrar una página web con un buen formato. El espacio en blanco es ignorado. Las etiquetas pueden ser escritas en mayúsculas o en minúsculas. Existe normalmente una etiqueta de inicio y otra de fin. FORMATOS DE TEXTO Todo el texto, las imágenes y el formato visibles al usuario deben encontrarse entre las etiquetas <body>.. </body> 5

documento REGLAS DE FORMATO Todos los navegadores usan unas reglas básicas para poder mostrar una página web con un buen formato. El espacio en blanco es ignorado.

ATRIBUTOS DEL TEXTO Veamos nuevas etiquetas que nos den más juego a la hora de elaborar nuestros textos: <I> para poner algo en cursiva. </I> <B> para poner algo en negrita.

6 ATRIBUTOS DEL TEXTO Veamos nuevas etiquetas que nos den más juego a la hora de elaborar nuestros textos: <I> para poner algo en cursiva. </I> <B> para poner algo en negrita. </B> <BR> para separar pero sin dejar línea en blanco. <Q> para destacar textos breves. </Q> <SUP>,<SUB> para subíndices y superíndices. Etiquetas delimitadoras. Color, tamaño y tipo de letra Esto se hace a partir de la etiqueta <font> y su cierre correspondiente </font>. Atributo face <fontface="verdana">este texto tiene otra tipografía</font> Atributo size <font size=4>este texto es más grande</font> Color, tamaño y tipo de letra Atributo color <font color="red">este texto está en rojo</font> 6

</Q> <SUP>,<SUB> para subíndices y superíndices. Etiquetas delimitadoras.

7 COMO UTILIZAR COLOR EN HTML Se pueden llegar a tener 16 millones de colores en una página web. Existen dos formas para aplicar colores a una página web: 1. Se especifica el color deseado directamente con el nombre del color en ingles: Ej: blue, green, yellow 2. Se especifica el color deseado mediante números hexadecimales mediante la siguiente estructura: #RRVVAA El color tiene un signo de numeral # antecediendo a los 6 números. Existen dos números para cada color principal: rojo, verde y azul. Cada uno de los números varía hexadecimal mente {0,1,2...,9,A,B,...F}. EJEMPLOS DE COLORES Ejemplos de Colores: #FFFFFF Blanco -# Negro #FF0000 Rojo -#00FF00 Verde #0000FF Azul -#FF00FF Magente #00FFFF Cyan-#FFFF00 Amarillo #70DB93 Agua Marino -# Azul Marino #FF7F00 Coral -#A62A2A Café #C0C0C0 Plomo -#4F2F4F Violeta ATRIBUTOS PARA PAGINAS Esta etiqueta cuenta con los siguientes atributos: Bgcolordefine el color de fondo de la página Textdefine el color del texto de la página <html> <head> <title>curso de HTML</title> </head> <body bgcolor= #C0D9D9 text= # > Bienvenidos al curso de HTML </body> </html> 7

Se especifica el color deseado mediante números hexadecimales mediante la siguiente estructura: #RRVVAA El color tiene un signo de numeral # antecediendo a los 6 números.

8 FORMATO DE PARRAFOS Los párrafos delimitados por etiquetas <p> pueden ser fácilmente justificados a la izquierda, centro o derecha especificando dicha justificación en el interior de la etiqueta por medio de un atributo align. Ejemplo: <p align="left">texto alineado a la izquierda</p> right, center ENCABEZADOS Las etiquetas <h1> </h1> al <h6> </h6> (acrónimos de heading1..6 ) son encabezados del cuerpo del texto. El encabezamiento <h1> / mayor tamaño. La etiqueta tiene el siguiente atributo: AlignPermite ubicar el encabezamiento a la izquierda, centro o derecha de lapantalla (LEFT, CENTER,RIGHT) <h1 align="center"> EJEMPLOS DE FORMATOS 8

Ejemplo: <p align="left">texto alineado a la izquierda</p> right, center ENCABEZADOS Las etiquetas <h1> </h1> al <h6> </h6> (acrónimos de heading1.

9 AMBATO Los Carnavales del mundo Locarnavales de ambato son los más hermosos del mundo, todos juegan con flores y frutos además de mucha cultura COLOMBIA Locarnavales de ambato son los más hermosos del mundo, todos juegan con flores y frutos además de mucha cultura CARNAVALES 2012 RIO DE JANEIRO Locarnavales de ambato son los más hermosos del mundo, todos juegan con flores y frutos además de mucha cultura EJEMPLO DE UNA PAGINA BÁSICA Elaborar una página web en el bloc de notas y aplicar el siguiente formato. PARQUES DE AMBATO con formato H1 y en negrilla Para los nombres de los parques hacerlo en formato H3 y en cursiva. Poner una línea horizonal <HR> Parque Cevallos Parque Montalvo PARQUES DE AMBATO Parque 12 de Noviembre Parque Juan B. Vela Parque de la Familia 9

frutos además de mucha cultura EJEMPLO DE UNA PAGINA BÁSICA Elaborar una página web en el bloc de notas y aplicar el siguiente formato.

10 FORMATOS DE PARRAFO 10

Documentos relacionados

DISEÑO DE PAGINAS WEB

DISEÑO DE PAGINAS WEB ESTRUCTURA BÁSICA HTML ESTRUCTURA DE UNA PAGINA A lo largo de este tema vamos a aprender a crear una página básica. La estructura básica de una página es: