CREACION PAGINA WEB DE LA PYME
- leidy moreno
- 9 jun 2021
- 10 Min. de lectura
Actualizado: 10 jun 2021
La pagina web es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes, hipervínculos y muchas otras cosas, adaptada para la llamada Word Wide Web, y que puede ser accedida mediante un navegador web.
En este caso aplique los conocimientos previos que tenía sobre la creación de una pagina web, utilizando cada una de las funciones que tiene wix para que la pagina se desarrollara con total normalidad
Códigos HTML
un breve ensayo realizado por mi autoría y la de mi compañera para explicar un poco la estructura y como son los códigos HTML .
En este ensayo vamos a hablar del lenguaje HTML con el cual nos basaremos en su composición, su estructura y cada una de sus partes, además de los ajustes que se le pueden insertar a una página y las herramientas que debemos usar para aprender los conceptos básicos y necesarios de este manual. para su desarrollo es necesario realizar lecturas basadas en este, análisis, párrafos, reseñas, entre otros, Este tiene como fin el aprendizaje y la practica adecuada de la página web, que nos permita crearla con medios adquiridos, contando con tres herramientas básicas que se deben tener en cuenta como los editores de texto, navegadores web y explorador de archivos.
El HTML es un lenguaje que se utiliza para la creación de páginas en la WWW. Por página entenderemos el documento que aparece en el navegador o visualizador, se compone de una serie de comandos, que son interpretados por el visualizador, o programa que utilizamos para navegar por el WWW. En última instancia el visualizador es el que ejecuta todas las órdenes contenidas en el código HTML, de forma que un visualizador puede estar capacitado para unas prestaciones, pero no para otras. Así, podremos especificar que una página tenga una imagen de fondo, o un texto parpadeando, pero si nuestro visualizador no está capacitado para esas funciones, no podremos verlas. Este documento está dividido en dos zonas principales: El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD> y El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>.
Los ajustes correspondientes indican que cuando escribimos en el documento de texto necesitamos que aparezca en la pantalla, este texto cuenta con unas cabeceras comprendidas en unas etiquetas <H1> y </H1> <H2> y </H2>, hasta el nº seis, indicando el tamaño mayor que es el numero uno
Esta es una etiqueta muy interesante y es la encargada de centrar un documento <CENTER> Y </CENTER>, aunque algunos navegadores no lo soporten, pero son mas los navegadores que soportan esta etiqueta.
Dentro de los comentarios no visibles en la pantalla encontramos una opción de insertar estos comentarios en el documento HTML sobre el código que escribimos y nos sirve para recordar sobre lo que hicimos o estamos haciendo, y no dando visibilidad en la pantalla esto se consigue encerrando los comentarios en los siguientes símbolos: <! -- y -->.
Existen algunas limitaciones para escribir el texto. Una de ellas es debido a que las etiquetas se forman como un comando escrito entre los símbolos "<" y ">". Por tanto, si se quisieran escribir estos caracteres como parte normal del texto, daría esto lugar a una ambigüedad, ya que el programa navegador podría interpretarlos como el comienzo o final de una etiqueta, en vez de un carácter más del texto. Para resolver este problema, existen unos códigos para poder escribir estos caracteres y otros relacionados con las etiquetas.
< para < (less than, menor que)
& gt; para > (greater than, mayor que)
& amp; para & (ampersand)
& quot; para " (double quotation)
Esta es una característica de la web aparte de su carácter multimedia, es la herramienta que permite unir distintos documentos repartidos por medio de enlaces hipertexto, los enlaces tienen una misma estructura <A HREF="XXX"> YYY </A> de los cuales se pueden evidenciar en los siguientes tipos de enlace:
Tipos de enlaces
1. Enlaces dentro de la misma página
2. Enlaces con otra página nuestra
3. Enlaces con una página fuera de nuestro sistema
4. Enlaces con una dirección de e-mail
Imágenes: esta es la etiqueta que nos sirve para insertar imágenes en nuestra pagina web, a esta se le indica el nombre y la localización de un archivo que contiene la imagen a diferencia del anterior.
La estructura de la etiqueta es: <IMG SRC="imagen.gif">
Con el siguiente IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una imagen llamada imagen.gif (o el nombre que tenga). Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT
<IMG SRC="imagen.gif" ALT="descripción">
Las imágenes deben estar guardadas en un formato de archivo especial llamado GIF. (Hay también otro formato más avanzado JPG). Este formato GIF almacena las imágenes con un máximo de 256 colores, en forma comprimida.
Para las imágenes hay una alineación y dimensionado como herramienta de editar: la alineación en las imágenes se quiere lograr diseños y rodear con textos los gráficos, en este se puede usar el comando o atributo con la etiqueta a <IMG SRC= “imagen.gif”>, ALIGN=. Donde quiera que se desee que aparezca una imagen basta con insertar:
<BR CLEAR=LEFT> Busca el primer margen libre (clear) a la izquierda.
<BR CLEAR=RIGHT> Busca el primer margen libre a la derecha.
<BR CLEAR=ALL> Busca el primer margen libre a ambos lados.
En la parte de dimensionados los programas navegadores cuando cargan un documento HTML y encuentran una etiqueta de una imagen, interrumpen el proceso de carga y solicitan al servidor que le envíe dicha imagen, quedando a la espera hasta que se complete el envío, repitiéndose este proceso con cada una de las imágenes.
Los comandos utilizados para dimensión son: Estos comandos o atributos son WIDTH (ancho) y HEIGHT (alto).
Por ejemplo, para la imagen isla.gif situada más arriba:
<IMG SRC="imagen.gif" WIDTH=120 HEIGHT=94>
Para hacer que una imagen reducida sea el enlace con la imagen en su tamaño original, lo
conseguimos con:
<A HREF="imagen.gif"> <IMG SRC="imagen.gif" WIDTH=150 HEIGHT=75> </A>
Los fondos y colores cuentan con dos maneras distintas:
1.Con un color uniforme
2.Con una imagen
Se consigue añadiendo el comando BGCOLOR a la etiqueta <BODY> (situada al principio del
documento), de la siguiente manera:
<BODY BGCOLOR="#XXYYZZ">
XX Es un número indicativo de la cantidad de color rojo
YY Es un número indicativo de la cantidad de color verde
ZZ Es un número indicativo de la cantidad de color azul
Las tablas para muchos es un modo sencillo de disponer columnas o títulos a una ilustración. La etiqueta sencilla <TABLE>
Es la etiqueta general, que engloba todas las demás, presenta los datos tabulados con un borde, haciendo las tablas mas atractivas, y el grosor es de n pixeles, permite formar las distintas celdas que contendrá cada fila de la tabla.
Es utilizada para colocar encabezamiento en negrita sobre las columnas
Con una imagen
<TABLE BORDER>
<TR><
TD> <IMG SRC="imagen.gif"> </TD>
</TR>
</TABLE>
Con un enlace
<TABLE BORDER>
<TR>
<TD><A HREF="index.html"> Mi página principal </A></TD>
</TR>
</TABLE>
Formulario La manera general para que los lectores de nuestra página se puedan comunicar con nosotros es por medio de un enlace a nuestra dirección de e-mail, con lo que recibiríamos un e-mail convencional.
Pero puede ser que lo que necesitemos sea solamente una respuesta concreta a unas opciones que presentaremos nosotros mismos, o un comentario del usuario, para lo que le suministraremos un espacio en donde introducirlo.
Se puede, hacer todo esto, además de otras cosas, utilizando los formularios, con los que se pueden confeccionar páginas que contengan los elementos necesarios para ello, tal como botones de radio, listas de selección, cajetines de introducción de texto y de control, etc., como vamos a ver.
Los formularios permiten que los demás nos envíen la información directamente a nosotros o bien a nuestro servidor, en donde hemos instalado un programa que procese esta información. Por ejemplo, vamos a suponer que queremos crear una lista de correo. Los usuarios pueden introducir sus nombres y direcciones de e-mail y pulsar un botón de envío.
Estructura de un formulario
La estructura general de un formulario es:
1.Etiqueta de inicio:
<FORM ACTION="mailto:dirección_de_email" METHOD="POST"
ENCTYPE="TEXT/PLAIN">
2.Cuerpo del formulario
(Elementos para introducir los datos).
3.Botones de envío y de borrado.
4.Etiqueta de cierre </FORM>
Los formularios se dividen en tres clases: la primera introducción por medio de texto, la segunda introducción por medio de menú, y por último la introducción por medio de botones.
La introducción de los datos se consigue por medio de la etiqueta:
<INPUT TYPE= “XXX” NAME=“YYY” VALUE= “ZZZ”>
Botones de radio.
Este se da cuando queremos que el usuario elija una única opción entre varias, podemos hacer uso de los botones de radio, que se consiguen con la siguiente etiqueta:
<INPUT TYPE= “RADIO” NAME= “YYY” VALUE= “ZZZ”>
Donde YYY es el nombre que le ponemos a la variable que se trata de elegir, y ZZZ es el nombre de cada una de las opciones en concreto.
Botones de envió y de borrado
<INPUT TYPE= “submit” VALUE= “ZZZ”>
En donde ZZZ es el texto que queremos que aparezca en el botón.
Vamos a añadirlo al primer ejemplo, en el que se solicitaba el apellido del usuario:
<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
<P><INPUT TYPE="submit" VALUE="Enviar datos">
</FORM>
Otro botón interesante es el de borrado de los datos introducidos, muy conveniente en un formulario con muchos elementos. Es muy similar al de envío, pues se consigue con la etiqueta:
<INPUT TYPE= “RESET” VALUE=“ZZZ”>
Este es uno de los elementos y uno de los mas diferentes en utilizar, pero no tiene ningún problema en usar dentro de un formulario y en distintos tipos de introducción de datos al pulsar el botón de envío recibiríamos en el correo personal y de las distintas parejas NAME = VALUE de cada elemento, encadenadas en un mismo símbolo &
>Libro de Visitas</TITLE>
</HEAD>
<BODY>
<P><CENTER>
<H2>Libro de visitas</H2>
<P><FORM ACTION=“mailto:eduardoboterosena@sena.edu.co” METHOD=“POST”
ENCTYPE=“TEXT/PLAIN”>
Tu nombre:
<BR><INPUT TYPE="text" NAME="Nombre">
<P>Escribe tus comentarios:
<BR><TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
</TEXTAREA>
<P><INPUT TYPE="submit" VALUE="Enviar datos">
<INPUT TYPE="reset" VALUE="Borrar datos">
</FORM>
<P>
<HR>
</BODY>
</HTML>
Mapas: como anteriormente lo habíamos visto hay dos maneras para enlazar dos páginas, una de ellas es por un mensaje de texto, y la otra por medio de una imagen, pero en este caso se hace uso de una imagen apara enlazar a una única página.
Existen dos tipos de páginas, mapas gestionados por el servidor y mapas gestionados por el cliente.
Los mapas gestionados por el servidor son un tipo de mapas al desplazar el cursor sobre la imagen de forma que el mapa se va obteniendo a distintas coordenadas.
Pero tienen varios inconvenientes: No todos los servidores tienen implementado el programa CGI necesario para que pueda funcionar un mapa de este tipo. Además, hay que conocer el tipo de servidor (NCSA, el más común, o CERN), pues el código a aplicar es distinto en un caso u otro. Por otra parte, al requerir un trasiego de información entre el navegador y el servidor, el tiempo de respuesta es mayor que en el otro tipo, como veremos a continuación.
Los mapas gestionados por el cliente, es decir nuestro navegador y no por el servidor, en este tipo de mapas va reemplazado el cursor que observa en ciertas zonas se convierte en el símbolo normal para enlazar con otras páginas.
Es decir, no necesita enviar la información al servidor y esperar la respuesta de éste, con lo que el proceso es más rápido que en el caso anterior, reduciéndose además el tráfico de datos y la sobrecarga al servidor. Otras ventajas son que al pasar por una zona activa se muestra la dirección a la que se corresponde (al contrario que en el caso anterior, en la que sólo se ven unas coordenadas). Además, estos mapas se pueden utilizar off-line, al contrario, también que en el otro tipo, ya que no requieren la ayuda del servidor.
Pero tiene el inconveniente de que estos mapas no son implementados por todos los navegadores, como en el caso anterior, aunque sí por la mayoría de los utilizados actualmente, desde las versiones siguientes: Chrome, Mozilla 2.0, Microsoft Explorer 2.0, Mosaic 2.1, etc. Pero se puede obviar este inconveniente suministrando enlaces alternativos para los navegadores que no implementen este tipo de mapas.
En lo que sigue, vamos a ver exclusivamente cómo implementar este tipo de mapas, es decir, mapas gestionados por el cliente (client-side image maps).
Frames: Este es un procedimiento de lenguajes HTML y sirve para dividir la pantalla en diferentes ventanas, estas pueden actuar independientemente unas de las otras como paginas diferentes, hasta varias de ellas `pueden tener sus propias barras deslizadoras.
Los navegadores que mas las utilizan son Chrome, Mozilla 2.0 y el exploret 2.0 en adelante slouder. Una de sus características más importantes es que pulsando un enlace situado en un frame, se puede cargar en otro frame una página determinada.
Todo lo anterior se refleja en el siguiente documento HTML:
<HTML>
<HEAD>
<TITLE>Mi primera pagina con frames</TITLE>
</HEAD>
<FRAMESET COLS=“20%, 80%”>
<FRAME SRC= “mi_indice.html”>
<FRAME SRC= “mi_presentacion.html” NAME="principal">
</FRAMESET>
</HTML>
Los sonidos pueden estar incorporados en una pagina web, bien sea de fondo ya sea automáticamente al cargar la pagina o para que el propio usuario active el sonido.
Para poder escuchar los sonidos es necesario disponer, como es lógico, de una tarjeta de sonido con sus correspondientes altavoces. Pero esto no es suficiente, pues no todos los programas navegadores están capacitados en la misma medida, en navegadores como exploret de Microsoft, Chrome y Mozilla se pueden añadir sonidos, conversiones de capacidad automática.
Para fondo sonoro exploret de Microsoft:
Para las versiones 2.0 en adelante, se utiliza la etiqueta:
<BGSOUND SRC="archivo_de_sonido" LOOP=n>
El archivo 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 archivo 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 archivo se ejecutará una sola vez.
La etiqueta para que se ejecute el archivo sonido.mid dos veces en el Explorer es:
<BGSOUND SRC=“sonido.mid” LOOP=2>
(Para poder oirlo, hay que estar utilizando el Explorer).
Para Chrome y Mozilla:
La etiqueta básica para el Chrome, Mozilla es:
<EMBED SRC="archivo_de_sonido" WIDTH=XXX HEIGHT=YY>
donde WIDTH es la anchura y HEIGHT la altura de una consola que aparece, y que tiene diferentes teclas
(Play, Stop, Pausa, etc.). Respecto a las dimensiones XXX e YY estas dependerán del plug-ins que existe
para Chrome, Mozilla.
El archivo de sonido puede estar en formato, .MID o .WAV, pero recuérdese la advertencia hecha anteriormente, de que estos formatos deben estar configurados como MIME por el servidor donde esté alojada la página.
Dentro de la etiqueta se pueden añadir los siguientes atributos opcionales:
AUTOSTART=“TRUE” Arranca automáticamente.
LOOP=“TRUE” Se ejecuta ininterrumpidamente
Para conseguir que la consola sea invisible hay que añadirle el atributo HIDDEN=“TRUE”.
<EMBED SRC=“sonido.mid” HIDDEN=“TRUE”>
En conclusión, cada una de estas herramientas son bastante útiles para el desarrollo de formulario, documentos, mapas, entre otros. Para añadir en una página web creada, también aprendimos cada uno de los comandos necesarios para su construcción, con base a las ediciones de texto, visualizadores y navegadores web, asimismo los exploradores en archivos, pudimos evidenciar que el lenguaje HTML fue una gran ayuda para la ejecución de una página web.
Para lo que hicimos la creación de unas paginas que mostrare :
Muy útil la información.