Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6)...

20
Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera

Transcript of Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6)...

Page 1: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6)

denisse pajarito macuiltYazmin tepox cabrera

Page 2: 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).

Page 3: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

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.

Page 4: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

Objetivo de pagina web

Diseñar páginas web con los colores adecuadosAplicando 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

Page 5: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

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.

Page 6: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

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.

Page 7: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

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ú.

Page 8: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

EN TÉRMINOS GENÉRALES, UNA PÁGINA WEB SE PUEDE ESTRUCTURAR EN VARIAS PARTES:

*CABECERA (HEADER)*CUERPO (BODY)

*PIÉ DE PÁGINA (FOOTER)

Page 9: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

Cabecera o Header

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.

Cuerpo o Body

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.

Page 10: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

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.

Page 11: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

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).

Page 12: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

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.

Page 13: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

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:

Page 14: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

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 tablaVamos 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> 

Page 15: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

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.

Page 16: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

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.

Page 17: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

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 video2.   “Compartir”, “Insertar” o “Incrustar”

“Compartir” y luego “Insertar”. En DailyMotion es a través de “Incrustar”.3.   Elegir tamaño y otras opcionesLas 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 editorUna 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.

Video

Page 18: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

 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 

Servicio de correo

Page 19: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

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.

Link en paginas

Page 20: Manejar los elementos básicos de un lenguaje utilizable En la creación de paginas web (html,css6) denisse pajarito macuilt Yazmin tepox cabrera.

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 clientesTipos de Alojamiento WebEl 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. 

Alojamiento web