Download esquematizar la estruc - diseño de pagina en html

Manejar los elementos básicos de
un lenguaje utilizable
En la creación de paginas web
(html,css6)
denisse pajarito macuilt
Yazmin tepox cabrera
DEFINIR OBJETIVOS
Y
CONTENIDOS DE LA PAGINA WEB
Cuerpo de pagina:
El contenido de una página web, constituido por encabezados, texto y
vínculos conforman el cuerpo de la página.
Extensión de textos de pagina web:
Una buena página web "le lleva" 420 vocablos entre los cuales las palabras y
frases claves (keywords), ocupan un tres por ciento del total del número de
palabras incluyendo las que aparecen en los encabezados (h), vínculos
(links), etiquetas de imagen (alt) y etiquetas de vínculos (title).
Densidad de un genérico y frase clave:
En una página de 420 vocablos, las palabras (genéricos) y frases clave
aparecerán un máximo de 12 veces. Si en el texto existe una frase o palabra
con mayor presencia que ellas.
Peso del contenido:
Expertos sostienen que si el contenido de la página web es de poca extensión
será indexada con facilidad y en buena posición. Con el correr del tiempo, las
páginas resultan vulnerables a perder su posición, pueden ser reemplazadas
por otras que presentan mayor claridad en la ilustración del tema.
Una pagina es valiosa porque exhibe texto inédito y es consecuente con el
propósito de enriquecer el conocimiento del lector.
Fuerza del texto principal:
Es relevante cuando se quiere alcanzar posiciones convenientes en
buscadores, desarrollar el tema principal y fuerza al texto utilizando una
síntesis amigable.
Objetivo de pagina web
Diseñar páginas web con los colores adecuados
Aplicando la teoría del color y los diseños básicos
para la creación de páginas web para que los
alumnos puedan compartir la información
ESQUEMATIZAR LA ESTRUCTURA GENERAL DE UNA PAGINA WEB
Las paginas web por
definición son documentos
que pueden contener textos,
imágenes, vídeos y en
resumen, contenidos
digitales y aplicaciones que
pueden ser visualizados por
un usuario web desde un
dispositivo remoto a través
de un navegador web.
Para ejemplificar lo que son las paginas web, imaginemos que queremos
escribir un libro, este supuesto libro debe contener una portada o pagina
inicial, un índice o menú, diferentes capítulos o paginas principales y los
datos del autor o la pagina de contacto.
Cuando entro en la página principal de un sitio web(conjunto de
páginas web), es como si fuera la portada de un libro, desde donde
puedo acceder a las páginas principales de sitio web navegando por el
menú.
EN TÉRMINOS GENÉRALES, UNA PÁGINA WEB SE PUEDE
ESTRUCTURAR EN VARIAS PARTES:
*CABECERA (HEADER)
*CUERPO (BODY)
*PIÉ DE PÁGINA (FOOTER)
Cabecera
o Header
Cuerpo o
Body
Se encuentra en la
parte superior de la
página web,
generalmente
contiene información
relativa a la temática
del sitio web. Suele
contener el Logo, un
título o eslogan,
información de
contacto y el menú
para navegar por las
páginas principales.
Muchos diseñadores
también incluyen un
buscador.
En el cuerpo
encontraremos el
contenido más relevante
para esa página en
particular. Puede ser de
cuerpo entero o con
una barra lateral. Las
barras laterales
generalmente se usan
para poner contenido
complementario y para
mostrar accesos a otras
páginas relevantes.
Pie de
Página o
Footer
En el footer
generalmente
encontraremos
información de
contacto, un menú
a las páginas más
relevantes, links a
otras webs y en
general contenido
complementario
referente a la
temática del sitio
web.
Etiquetas
Es una palabra clave asignada a un dato almacenado en un repositorio. Las
etiquetas son en consecuencia un tipo de metadato, pues proporcionan
información que describe el dato (una imagen digital, un clip de vídeo o
cualquier otro tipo de archivo informático) y que facilita su recuperación.
La diferencia entre las etiquetas y las palabras clave tradicionales es que las
etiquetas son elegidas de manera informal y personal por los usuarios del
repositorio.
ESTABLECER VINCULOS E IPERVINCULOS
Con Los hipervínculos de pueden activar frases o palabras de la pagina para
que al pulsar sobre ellas se salta a cualquier otra pagina de internet que
decidamos.
Los Enlaces Hipervínculo no son más que unas zonas especiales de nuestro
texto que ofrecen la posibilidad de pulsar sobre ellas para ir a otras páginas.
Los enlaces se clasificarse en 2 tipos: Los Internos /Locales.
1. Los enlaces internos son aquellos Que enlazan las páginas que componen
un mismo sitio web.
2. Los enlaces externos permiten saltar desde una pagina hasta otra puede
estar en cualquier lugar del mundo (En otro servidor web).
Establecer vínculos e
hipervínculos
La creación de enlaces es algo cotidiano e importante en el proceso de
desarrollo de un sitio Web. Los enlaces entre sus páginas conformarán la
estructura del sitio. Esta es una de las bazas de este programa para facilitar
el trabajo al diseñador. Tiene varios métodos que están pensados para ser
rápidos e intuitivos, sobre todo para crear enlaces entre las páginas de un
mismo sitio Web. Entre todas estas opciones cada uno elegirá la que le
resulte más rápida en cada ocasión.
Manipular
objetivos y
formularios
Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas:
<form> y <input>. Si se considera el formulario que muestra la siguiente imagen:
El código HTML necesario para definir el formulario anterior se muestra a
continuación:
<html> <head><title>Ejemplo de formulario sencillo</title></head> <body>
La etiqueta <form> encierra todos los contenidos del formulario (botones, cuadros de
texto, listas desplegables) y la etiqueta <input> permite definir varios tipos diferentes
de elementos (botones y cuadros de texto).
La etiqueta <object> es la que permite "embeber" o incluir en las páginas HTML
cualquier tipo de contenido complejo:
TABLAS
Hasta que no se empezaron a usar las tablas, la única manera de tabular las cosas era
utilizar la etiqueta de pre formateado, con la que es necesario poner manualmente los
espacios en blanco para que quede todo alineado formando filas y columnas, con un
resultado muy poco estético.
Estructura de una tabla
Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas necesarias para
confeccionar las tablas.
1. La etiqueta general, que engloba a todas las demás es <TABLE> y </TABLE>. Es
decir:
<TABLE>
[resto de las etiquetas]
</TABLE>
Para que los datos vayan dentro de cajas formadas por un borde tenemos que añadir
el atributo BORDER a la etiqueta, es decir:
<TABLE BORDER>
[resto de las etiquetas]
</TABLE>
IMÁGENES EN HTML
La etiqueta sirve para incluir imágenes en nuestras páginas del Web es similar a la de
enlaces a otras páginas, que hemos visto en el capítulo anterior. La única diferencia
que, en lugar de indicar al programa navegador el nombre y la localización de un
documento de texto HTML para que lo cargue, se le indica el nombre y la localización
de un fichero que contiene una imagen.
La estructura de la etiqueta es: <IMG SRC="imagen.gif">
Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT
<IMG SRC="imagen.gif" ALT="descripción">
Con el comando ALT se introduce una descripción (una palabra o una frase breve)
indicativa de la imagen.
Insertar sonido y video
Una página del Web puede tener sonidos incorporados, bien sea como un
fondo sonoro que se ejecuta automáticamente al cargar la página, o como
una opción para que la active el propio usuario.
Fondo sonoro para el Microsoft Internet Explorer
Para las versiones 2.0 en adelante, se utiliza la etiqueta:
<BGSOUND SRC="fichero_de_sonido" LOOP=n>
El fichero de sonido puede estar en formato .mid o .wav.
El atributo LOOP (en inglés, lazo) sirve para especificar el número (n) de
veces que se debe ejecutar el fichero de sonido. Si se escoge el número n=-1 o
se pone LOOP= infinite, el sonido se ejecutará indefinidamente. Se puede
omitir este atributo, y entonces el fichero se ejecutará una sola vez.
Video
Aunque depende de las características del sistema y otras condiciones, estos
son los pasos habituales para insertar videos en sitios web estándar:
1. Localizar el video
2. “Compartir”, “Insertar” o “Incrustar”
“Compartir” y luego “Insertar”. En DailyMotion es a través de “Incrustar”.
3. Elegir tamaño y otras opciones
Las opciones estándar son buenas, aunque en algunas ocasiones debes
cambiarlas para que el video tenga un mejor aspecto en la página.
4. Insertar código HTML en el editor
Una vez delineadas las opciones, copia el código. Si quieres insertar el video
en una página abierta con un editor de HTML debes colocar el cursor en el
lugar donde quieres que aparezca el video, entrar a la parte de código HTML
en el editor y pegar el código copiado desde el sitio web original.
Servicio de correo
e-mail (electronic mail), es un servicio de red que permite a los usuarios enviar y
recibir mensajes rápidamente (también denominados mensajes electrónicos o cartas
electrónicas) mediante sistemas de comunicación electrónicos. Principalmente se
usa este nombre para denominar al sistema que provee este servicio en Internet,
mediante el protocolo SMTP, aunque por extensión también puede verse aplicado a
sistemas análogos que usen otras tecnologías. Por medio de mensajes de correo
electrónico se puede enviar, no solamente texto, sino todo tipo de documentos digitales.
Su eficiencia, conveniencia y bajo costo están logrando que el correo electrónico
desplace al correo ordinario para muchos usos habituales
Link en
paginas
El atributo más importante de la etiqueta <a> es href, que se utiliza para indicar la
URL a la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el
navegador se dirige a la URL del recurso indicado mediante href. Las URL de los
enlaces pueden ser absolutas, relativas, internas y externas.
Con la definición anterior, para crear un enlace que apunte a la página principal de
Google solamente habría que incluir lo siguiente en un documento HTML:
<a href="http://www.google.com">Página principal de Google</a>
Como el atributo href indica una URL, un enlace puede apuntar a cualquier tipo de
recurso al que pueda acceder el navegador. El siguiente enlace apunta a una imagen,
que se mostrará en el navegador cuando el usuario pinche sobre el enlace.
Alojamiento web
Es el servicio que provee a los usuarios de Internet un sistema para poder
almacenar información, imágenes, vídeo, o cualquier contenido accesible vía
Web. Los Web Host son compañías que proporcionan espacio de un servidor a sus
clientes
Tipos de Alojamiento Web
El alojamiento web se divide en seis tipos: gratuitos, compartidos, revendedores,
servidores virtuales, servidores dedicados y de co-locación.
Alojamiento gratuito: El alojamiento gratuito es extremadamente limitado Estos
servicios generalmente agregan publicidad en los sitios y tienen un espacio y
tráfico limitado.
Alojamiento compartido (shared hosting): En este tipo de servicio se alojan
clientes de varios sitios en un mismo servidor, gracias a la configuración del
programa servidor web. Resulta una alternativa muy buena para pequeños y
medianos clientes, es un servicio económico y tiene buen rendimiento.
Alojamiento de imágenes: Este tipo de hospedaje se ofrece para guardar tus
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.
Alojamiento revendedor (reseller): Este servicio de alojamiento está diseñado
para grandes usuarios o personas que venden el servicio de Hosting a otras
personas. Estos paquetes cuentan con gran cantidad de espacio y de dominios
disponibles para cada cuenta.