Diseño pagina web- html

24
DISEÑO PAGINA WEB – HTML CAROLINA AGUDELO OTERO 8-1

Transcript of Diseño pagina web- html

Page 1: Diseño pagina web- html

DISEÑO PAGINA WEB – HTML

CAROLINA AGUDELO OTERO8-1

Page 2: Diseño pagina web- html

¿QUÉ ES HTML?• Historia: HTML nació públicamente en un documento llamado HTML Tags

(Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. En esta publicación se describen 22 etiquetas que mostraban un diseño inicial y relativamente simple de HTML. 

• HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está compuesto por una serie de etiquetas que el navegador interpreta y da forma en la pantalla. HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc.

Page 3: Diseño pagina web- html

ESTRUCTURA BÁSICA DEL HTMLLo primero que debemos considerar dentro de la organización básica de HTML es el uso de los corchetes angulares < y >. En HTML estos corchetes contienen en su interior código especial llamado ETIQUETA que indican la estructura y el formato del CONTENIDO de la página. HTML está formado por muchas etiquetas que pueden realizar infinidad de tareas para dar formato a nuestras páginas Web. Tres son las etiquetas (tags) que describen la estructura general de un documento y dan una información sencilla sobre él. Estas etiquetas no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML.• <HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.• <HEAD>: Especifica el prólogo del resto del archivo esto es, el encabezado. Son pocas las etiquetas

que van dentro de ella, destacando la del titulo <TITLE> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras etiquetas dentro de él. En <head> no hay que colocar nada del texto del documento.

• <BODY>: Encierra el resto del documento, el contenido es el que se muestra en un explorador Web.

Page 4: Diseño pagina web- html
Page 5: Diseño pagina web- html

¿QUÉ ES UNA PAGINA WEB?

• Una página web, página electrónica o ciberpágina, es un documento o información electrónica capaz de contener texto, sonido , vídeo , programas, enlaces, imágenes, y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser accedida mediante un navegador. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegación (acceso) a otras páginas web mediante enlaces de hipertexto. Las páginas web frecuentemente también incluyen otros recursos como pueden ser hojas de estilo en cascada , guiones  (scripts), imágenes digitales , entre otros

Page 6: Diseño pagina web- html

ESTRUCTURA DE UNA PAGINA WEB

• La gran mayoría de las páginas web tienen divisiones o secciones similares. Lo usual es que, en la parte superior de la página se encuentre un encabezado, seguido de un cuerpo principal que suele estar flanqueado por una columna lateral (tanto a la izquierda como a la derecha) o dos columnas laterales, seguidas al final de la página por un pie de página. La imagen siguiente es un esquema típico de una página web. Se debe tener en cuenta que este esquema sufre variaciones, aunque normalmente son pequeñas.

Page 7: Diseño pagina web- html

• El encabezado:  es una faja horizontal que ocupa todo el ancho de la página en la parte superior de la misma. A la izquierda del encabezado suele ubicarse el logotipo del sitio, que ocupa un área importante dentro del mismo, aunque suelen haber diferencias importantes de un sitio a otro. Esta imagen debe tener un enlace a la página principal del sitio, ya que es uno de los estándares más respetados por los diseñadores y una de las formas que tienen los usuarios de volver al inicio.

Page 8: Diseño pagina web- html

• Columnas de exploración: el cuerpo principal de una página web, en el diseño moderno se le encuentra dividido. Una de estas divisiones, consiste una o dos columnas de exploración. Este tipo de columnas, se le emplea para ubicar algunos elementos importantes de la página, como enlaces externos , navegación interna, publicidad , informaciones adicionales y contenidos secundarios.

Page 9: Diseño pagina web- html

• Área de contenido: esta zona del diseño de la página, es la que menos reglas tiene respecto de su diseño, ya que el hecho de que en ella se encuentren los contenidos principales de la página, el diseño depende en gran medida de los mismos, sobre todo en lo que respecta al tipo de contenidos, la cantidad, la disposición que se desea emplear, etc. Sin embargo, hay que considerar algunas reglas importantes y que, salvo muy raras ocasiones, deben ser seguidas al pie de la letra. En la parte superior de esta área se debe emplazar el título entre etiquetas <h1>, ya que este título tiene las palabras clave que los usuarios luego emplearán en sus búsquedas y será de gran importancia para que los buscadores indexen la página en forma correcta. Además, los usuarios buscarán en este punto el título de lo que se expone, siendo de extrema importancia que el mismo sepa a qué contenidos está accediendo.

Page 10: Diseño pagina web- html

• Pie de página: finalmente, debajo de todas las secciones, se coloca una faja horizontal en cuyo interior se colocan algunos elementos importantes, como el autor, copyright, acceso a diversas políticas del sitio y asuntos legales, datos de contacto, enlaces a sitios relacionados, enlaces internos, etc.

Page 11: Diseño pagina web- html

TIPOS DE PÁGINAS WEBExisten distintas formas de clasificar a las páginas web, algunos criterios para ello son:Según su construcción:• Estáticas: este tipo de páginas web están compuestas por archivos que contienen código

HTML, es por medio de este que se pueden mostrar las imágenes, textos, videos y todos aquellos contenidos que componen a la página en sí. Los archivos que constituyen a la página web son almacenados en el servidor de Hosting, cuyo formato es también en HTML. Las páginas web pueden ser editadas por medio de programas como el Dreamweaver. Para esto, los archivos deben ser descargados del servidor con algún software, editarlos, guardarlos y subirlos nuevamente. El contenido de estas páginas no se modifica constantemente puesto que estas suelen estar en manos de personas que requieren contratar a diseñadores para que se encarguen de esto, lo que implica una serie de gastos. Además, las actualización contante no es algo que sus dueños necesiten.

Page 12: Diseño pagina web- html

• Dinámicas: en estas páginas, en cambio, los contenidos son modificados continuamente ya que esto queda en manos de quienes las visitan. La información de estas páginas está guardada en bases de datos de las cuales los usuarios extraen aquello que les interese. Estas páginas se caracterizan entonces por ser sus usuarios quienes modifican el diseño y los contenidos, se las puede actualizar muy fácilmente, ya que no es necesario ingresar al servidor para esto. Además, tienen numerosas funciones como foros, bases de datos, contenidos dinámicos, carritos de compras, entre otros.

Según su tecnología:• En HTML: estas páginas están construidas con lenguaje HTML, por lo que se requiere

tener conocimientos de este para hacerlas. Un defecto de estas páginas es que son estáticas, además ofrecen muy poco, por lo que no son recomendables para ventas y marketing. La ventaja que ofrecen es que son muy fáciles de construir, con conocimientos básicos de diseño, alcanza.

Page 13: Diseño pagina web- html

• En Flash: estas páginas se construyen utilizando el software Flash, de Adobe, que permite la realización de animaciones, efectos, sonidos y movimientos.  Para que los usuarios puedan visualizarlas, es necesario contar con los plug-in requeridos. Para realizarlas sí es necesario tener conocimientos en profundidad sobre el software, otra desventaja, es que las páginas hechas con Flash son muy pesadas, por lo que el tiempo de descarga puede prolongarse.

En lenguaje del servidor: estas se hacen en lenguaje PHP, Ruby, ASP, entre otros. Para desarrollar esta clase de páginas también es necesario tener conocimientos avanzados sobre el lenguaje a utilizar. Son ideales para interactuar con los usuarios y para el área de marketing.

Page 14: Diseño pagina web- html

¿QUÉ ES HOSTING?

• Web Hosting es el servicio que provee el espacio en Internet para los sitios web. Éstos servicios funcionan ofreciendo computadoras de grandes prestaciones (servidores web), utilizando conexiones de alta velocidad además de muchas otras prestaciones. Cuando alguien escribe tu dirección web (como por ejemple www.duplika.com), ellos se conectaran al servidor web donde esté alojado tu pagina y descargarán los archivos de tu sitio.

Page 15: Diseño pagina web- html

CLASES DE HOSTINGEn un sitio web con miles de visitas al día, la no disponibilidad del servicio durante unas horas supone diversas pérdidas que no deben ser admisibles, por lo cual el hosting a contratar deberá ofrecer más calidad. Por esto mismo existen diferentes tipos de hosting o alojamiento web:1. Alojamiento gratuito: normalmente dispone de poca funcionalidad y estabilidad.2. Alojamiento compartido: el más frecuente. En este caso tu sitio web funciona en un servidor que aloja muchos otros sitios web.3. Servidor dedicado: el proveedor se encarga de la administración del servidor.4. Alojamiento revendedor (reseller): Este servicio de alojamiento está diseñado para grandes usuarios o personas que venden el servicio de hospedaje a otras personas. Estos paquetes cuentan con gran cantidad de espacio y de dominios disponibles para cada cuenta.5. Alojamiento de imágenes: Este tipo de hospedaje se ofrece para guardar imágenes en internet, la mayoría de estos servicios son gratuitos y las páginas se valen de la publicidad colocadas en su página al subir la imagen. Web-HostingPeru cuenta con Hosting de calidad para Pymes y Empresas que les garantizarán el soporte adecuado.

Page 16: Diseño pagina web- html

¿QUÉ ES DOMINIO?

• Un dominio en términos generales es un nombre que puede ser alfanumérico que generalmente se vincula a una dirección física que generalmente es una computadora o dispositivo electrónico. Generalmente se utilizan para representar las direcciones de las páginas web’s. Puesto que Internet se basa en direcciones IP (Protocolo de Internet) que en terminos simples se puede decir que son los números de conexión de cada computadora que esta conectada a internet.

Page 17: Diseño pagina web- html

TIPOS DE DOMINIOS

Los tipos de dominios de internet se dividen en tres grandes grupos, los dominios genéricos o gTLD (geopraphical Top Level Domain), los dominios territoriales ccTLD (country code Top Level Domain) y los dominios de tercer nivel.• Los gTLD son dominios genéricos que no se ajustan al ambiente de un país específico.

Los conocemos por ser los más comunes y tienen extensiones .com, org, .net, etcétera. Es decir: www.conversiones.com es un dominio genérico.

• Los dominios con extensión .com son aquellas que se utilizan para empresas y organizaciones comerciales de todo el mundo. Aquellos con extensión .org lo utilizan organizaciones e instituciones sin ánimo de lucro y Organizaciones No Gubernamentales (ONG). Mientras que las empresas e instituciones relacionadas con servicios de Internet se definen por tener una extensión en .net.

Page 18: Diseño pagina web- html

• Los dominios asociados a un país determinado son los ccTLD, quienes se definen por adquirir un sitio con extensión única perteneciente a cada región. Por ejemplo, en México los dominios ccTLD terminan con la extensión .mx, en España este tipo de dominios termina en .es, o en Francia, la extensión es .fr.

• Los dominios de tercer nivel son aquellos que tienen la misma finalidad que los dominios gTLD sólo que éstos adquieren también la identidad territorial de las ccTLD. Los dominios gubernamentales o educativos son característicos de este tipo. Sencillamente deben tener una terminación .com.mx, .edu.mx, etcétera.

Page 19: Diseño pagina web- html

¿QUÉ ES UN NAVEGADOR?Un navegador es un software utilizado para acceder a internet. Un navegador te permite visitar páginas web y hacer actividades en ella, como iniciar sesión, ver contenido multimedia, enlazar de un sitio a otro, visitar una página desde otra, imprimir, y enviar y recibir correo, entre muchas otras actividades. Los nombres de los navegadores más comunes del mercado son: Microsoft Internet Explorer, Mozilla Firefox, Apple Computer's Safari y Opera.La disponibilidad de los navegadores depende del sistema operativo que utilice tu ordenador (por ejemplo: Microsoft Windows, Linux, Ubuntu, Mac OS, entre otros).

Page 20: Diseño pagina web- html

EJEMPLOS DE NAVEGADORES• MOZILLA FIREFOX :Por la sencillez, estabilidad y el gran número de

posibilidades que ofrece Mozilla Firefox se convierte en el mejor navegador que existe. Hay gran variedad de skins para variar su apariencia y es posible añadirle "applets" para configurar distintos estilos. El uso de pestañas sin dudas constituye una gran innovación, que luego fué copiada en versiones posteriores de otros exploradores de Internet.  

Page 21: Diseño pagina web- html

• Gogle Chrome: es un navegador realmente veloz si lo comparamos con el resto. Está diseñado para ser rápido de todas las formas posibles: se inicia rápidamente desde el escritorio, carga las páginas web de forma instantánea y ejecuta aplicaciones web complejas a gran velocidad. 

Page 22: Diseño pagina web- html

• El Opera Browser : es uno de los mejores navegadores que existe en la actualidad. Fué creado por la compañía noruegaOpera Software en el año 1994. Posee gran velocidad, seguridad y soporte de estándares. Es de tamaño reducido y está en constante innovación ya que se liberan en forma semanal versiones libres de errores y mejoradas para distintas plataformas de PC como Windows, Mac y Unix.  

Page 23: Diseño pagina web- html

• SAFARI Safari: Este navegador de Apple, denominado Safari crece cada día más en el mercado. Si bien está lejos de ocupar el primer lugar en lo que a exploradores web respecta, posee muchas características rescatables que lo hacen digno de estar incluido en la lista de los mejores navegadores.  

Page 24: Diseño pagina web- html