MÓDULO DE DISEÑO Y DESARROLLO WEB
Objetivo: Diseñar y construir soluciones web de nivel intermedio con interfaz amigable, empleando herramientas multimedia que permitan promocionar la información e imagen de una organización y/o cliente.
Las etiquetas (marcas) delimitan cada uno de los elementos que componen un documento HTML.
El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas. El siguiente esquema muestra las partes de una etiqueta HTML genérica.
La etiqueta de apertura está delimitada por el signo < "menor que", a continuación el propio nombre de la etiqueta (en este caso p), y opcionalmente, un atributo (en este caso class="fondo"), finalmente el signo > "mayor que".A continuación está el texto del contenido de la etiqueta, lo más frecuente es un texto, pero podría ser otra etiqueta, una imagen, ...
La etiqueta de cierre está delimitada por el signo < "menor que", a continuación la barra inclinada /, el propio nombre de la etiqueta (en este caso p), y finalmente el signo >"mayor que".
Algunas etiquetas no tienen contenido, y se cierran sobre sí mismas, no tienen etiqueta de cierre, se llaman etiquetas vacias, como la etiqueta <br>. En estas etiquetas opcionalmente se puede colocar una barra justo antes del signo >, por ejemplo: <br />. La etiqueta <br> produce un salto de línea. Las etiquetas vacias no tienen contenido pero si pueden tener atributos. Algunas otras etiquetas vacias son <hr>, <img>, <input>, <link>, <meta>, <param> y <source>.
En una etiqueta, la primera palabra que aparece es el nombre de la etiqueta. También podemos encontrar atributos con sus valores, siguiendo el formato <etiquetaatributo1="valor" atributo2="valor">. La forma más correcta es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores entre comillas dobles.
Por ejemplo, <a href="https://www.aulaclic.es">Visita aulaClic</a>
ETIQUETAS DE HTML MÁS UTILIZADAS
<div>
<p>
Texto del párrafo
</p>
</div>
Etiqueta
|
Función
|
<!–…–>
|
Define un comentario
|
<!DOCTYPE>
|
Define el tipo de docuemento
|
<a>
|
Define un hipervínculo
|
<abbr>
|
Define una abreviación
|
<address>
|
Define la información de contacto del autor / propietario del documento
|
<area>
|
Define un área dentro de un mapa de imagen
|
<article>
|
Define un artículo
|
<aside>
|
Define el contenido lateral del contenedor de una página
|
<audio>
|
Define contenido de sonido
|
<b>
|
Define texto en negrita
|
<base>
|
Especifica la base donde se abrirán todas las URL del documento
|
<bdi>
|
Aísla una parte del texto que puede tener un formato diferente del texto externo
|
<bdo>
|
Sobreescribe la dirección del texto
|
<blockquote>
|
Define una sección que tiene otra fuente
|
<body>
|
Define el cuerpo del documento
|
<br>
|
Define un salto de línea
|
<button>
|
Define un botón clickeable
|
<canvas>
|
Se usa para dibujar gráficos en pantalla
|
<caption>
|
Define el título de una tabla
|
<cite>
|
Define el título de un trabajo
|
<code>
|
Define un trozo de código de programación
|
<col>
|
Especifica las propiedades de la columna para cada columna del elemento <colgroup>
|
<colgroup>
|
Especifica un grupo de una o más columnas de una tabla
|
<command>
|
Define un botón command al que un usuario puede invocar
|
<datalist>
|
Especifica en un input una lista pre-definida de opciones
|
<dd>
|
Define la descripción de un ítem en una lista de definición
|
<del>
|
Define un texto que ha sido definido en un Mdocument
|
<details>
|
Define detalles adicionales que el usuario puede ver o esconder
|
<dfn>
|
Define el término de una definición
|
<dialog>
|
Define una caja o ventana de dialogo
|
<div>
|
Define una sección en un documento
|
<dl>
|
Define una lista de definición
|
<dt>
|
Define un término (un ítem) en una lista de definición
|
<em>
|
Define énfasis en un texto
|
<embed>
|
Define el contenedor de una aplicación externa (no html)
|
<fieldset>
|
Grupo de elementos relacionados en un formulario
|
<figcaption>
|
Define el título para una figura <figure>
|
<figure>
|
Especifica auto-contenido
|
<footer>
|
Define el pie de página de un documento
|
<form>
|
Define un formulario html
|
<h1> a <h6>
|
Define encabezados o títulos
|
<head>
|
Define información hacerca del documento
|
<header>
|
Define la sección de encabezado del docuemnto
|
<hgroup>
|
Grupo de encabezado (<h1> a <6>)
|
<hr>
|
Define un cámbio de temática a partir de una línea dibujada
|
<html>
|
Define la raíz del documento
|
<i>
|
Define una parte del texto de modo alternativo
|
<iframe>
|
Define un frame en línea
|
<img>
|
Define una imagen
|
<input>
|
Define un control de entrada de texto
|
<ins>
|
Define texto que ha sido insertado en un documento
|
<kbd>
|
Define entrada del teclado
|
<keygen>
|
Define un campo generador de claves para formularios
|
<label>
|
Define el rótulo para un elemento <input>
|
<legend>
|
Define un título para los elementos <fieldset>, <figure>, <details>
|
<li>
|
Define un ítem de una lista
|
<link>
|
Define la relación entre un documento y un recurso externo (generalmente con hojas de estilo)
|
<map>
|
Define un mapa de imagen del cliente
|
<mark>
|
Define texto resaltado o marcado
|
<menu>
|
Define la lista de un menú
|
<meta>
|
Define un metadato de un documento
|
<meter>
|
Define una medida escalar en un rango conocido
|
<nav>
|
Define un link de navegación
|
<noscript>
|
Define un contenido alternativo para los usuarios que no soportan scripts del cliente
|
<objet>
|
Define un objeto embebido
|
<ol>
|
Define una lista ordenada
|
<optgroup>
|
Define un grupo de opciones relacionadas en una lista desplegable
|
<option>
|
Define una opción en una lista desplegable
|
<output>
|
Define el resultado de un cálculo
|
<p>
|
Define un párrafo
|
<param>
|
Define un parámetro para un objeto
|
<pre>
|
Define texto pre-formateado
|
<progress>
|
Representa el progreso de una tarea en una barra
|
<q>
|
Define una cita corta
|
<rp>
|
Define que debe mostrar en navegadores que no soportan scripts de ruby
|
<rt>
|
Define una pronunciación de caracteres
|
<ruby>
|
Define una notación de ruby
|
<s>
|
Define texto que no es correcto
|
<samp>
|
Define un ejemplo de salida de un programa
|
<script>
|
Define un script del lado cliente
|
<section>
|
Define una sección de un documento
|
<select>
|
Define un drop-down list
|
<small>
|
Define texto pequeño
|
<source>
|
Define los recursos para elementos multimedia
|
<span>
|
Define una pequeña sección de un documento
|
<strong>
|
Define un texto en negrita
|
<style>
|
Define un estilo para la información de un documento
|
<sub>
|
Define un texto que es subíndice
|
<summary>
|
Define un encabezado visible para el elemento <details>
|
<sup>
|
Define un texto que es superíndice
|
<table>
|
Define una tabla
|
<tbody>
|
Define el cuerpo de una tabla
|
<td>
|
Define una celda en una tabla
|
<textarea>
|
Define un control de entrada de múltiples líneas
|
<tfoot>
|
Agrupa los footer contenidos en una tabla
|
<th>
|
Define una celda de encabezado en una tabla
|
<thead>
|
Agrupa los encabezados de una tabla
|
<time>
|
Define fecha / hora
|
<title>
|
Define un título para el documento
|
<tr>
|
Define una fila en una tabla
|
<track>
|
Define texto de la pista para elementos multimedia (vídeo y audio)
|
<ul>
|
Define una lista desordenada
|
<var>
|
Define una variable
|
<video>
|
Define un vídeo o película
|
<wbr>
|
Define un posible salto de linea
|
¿Qué es una Pagina web?
Una página web, o página electrónica, página digital, 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 y que puede ser accedida mediante un navegador web.
Tipos de páginas web
Página web Estática.-
Una página web estática es un sitio de Internet que muestra el mismo contenido para todos los usuarios, en vez de proporcionar contenido personalizado a la medida de cada usuario, y que no se actualiza a menudo. Las páginas web estáticas, que algunas veces se conocen como páginas planas, contrastan con las páginas web dinámicas que se actualizan frecuentemente y proporcionan información personalizada para usuarios individuales.
Ejemplos
Son pagina web estática ya que nos proporciona información que no podamos alterar o editar.
Página web Dinámica.-
Los sitios web dinámicos son aquellos que permiten crear aplicaciones dentro de la propia web, otorgando una mayor interactividad con el navegante. Aplicaciones dinámicas como encuestas y votaciones, noticiarios, foros de soporte, libros de visita, envío de e-mails inteligentes, reserva de productos, pedidos on-line, atención al cliente personalizada ... donde el administrador dispone la opción de gestionar dichos apartados, agregando, editando o eliminando contenidos.
La gran ventaja de los sitio web dinámicos es la versatilidad, apunta a la personalización de la información mostrada. Permite la toma de decisiones y muestra selectiva de información en función de criterios deseados.
Es útil para mostrar una imagen de empresa más sólida y profesional ya que permite guardar información en la computadora del navegante y mostrar en forma personalizada la página web de la empresa así como la información adecuada al tipo de navegante.
Ejemplos
Son pagina web dinamica que nos proporciona información que podamos alterar o editar.
¿Qué es el Protocolo IP?
El protocolo de IP (Internet Protocol) es la base fundamental de la Internet. Porta datagramas de la fuente al destino. El nivel de transporte parte el flujo de datos en datagramas. Durante su transmisión se puede partir un datagrama en fragmentos que se montan de nuevo en el destino. Las principales características de este protocolo son:
- Protocolo orientado a no conexión.
- Fragmenta paquetes si es necesario.
- Direccionamiento mediante direcciones lógicas IP de 32 bits.
- Si un paquete no es recibido, este permanecerá en la red durante un tiempo finito.
- Realiza el "mejor esfuerzo" para la distribución de paquetes.
- Tamaño máximo del paquete de 65635 bytes.
- Sólo ser realiza verificación por suma al encabezado del paquete, no a los datos éste que contiene.
El Protocolo Internet proporciona un servicio de distribución de paquetes de información orientado a no conexión de manera no fiable. La orientación a no conexión significa que los paquetes de información, que será emitido a la red, son tratados independientemente, pudiendo viajar por diferentes trayectorias para llegar a su destino. El término no fiable significa más que nada que no se garantiza la recepción del paquete.
La unidad de información intercambiada por IP es denominada datagrama. Tomando como analogía los marcos intercambiados por una red física los datagramas contienen un encabezado y una área de datos. IP no especifica el contenido del área de datos, ésta será utilizada arbitrariamente por el protocolo de transporte.
¿Qué son Navegadores web?
Un navegador web (en inglés, web browser) es un software, aplicación o programa que permite el acceso a la Web, interpretando la información de distintos tipos de archivos y sitios web para que estos puedan ser visualizados.
La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Además, permite visitar páginas web y hacer actividades en ella, es decir, enlazar un sitio con otro, imprimir, enviar y recibir correo, entre otras funcionalidades más.
Los documentos que se muestran en un navegador pueden estar ubicados en la computadora donde está el usuario y también pueden estar en cualquier otro dispositivo conectado en la computadora del usuario o a través de Internet, y que tenga los recursos necesarios para la transmisión de los documentos (un software servidor web).
Ejemplos
Estos son los navegadores mas utilizados en todo el mundo
¿QUÉ SON HOJAS DE ESTILO?
Las hojas de estilo son conjuntos de instrucciones, a veces en forma de archivo anexo, que se asocian a los archivos de texto y se ocupan de los aspectos de formato y de presentación de los contenidos: tipo, fuente y tamaño de letras, alineación y posicionamiento del texto, colores y fondos, etc.
¿QUÉ ES UNA TABLA O PLANTILLA?
Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas. Este concepto ha estado presente en nuestra sociedad por un largo período de tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una forma de transmitir información que, de otro modo, no sería comprendida tan fácilmente.
En documentos HTML una tabla puede ser considerada, resumidamente, como un grupo de filas donde cada una contiene a un grupo de celdas. Esto es conceptualmente distinto a un grupo de columnas que contiene a un grupo de filas, y esta diferencia tendrá un impacto en la composición y comportamiento de la tabla.
Una plantilla es un documento que contiene estilos de formato específicos, imágenes, tablas, objetos y cualquier otra información. Una plantilla se usa como base para crear otros documentos. Por ejemplo, puede definir estilos de párrafo y de carácter en un documento, guardarlo como plantilla y usarlo para crear un nuevo documento con los mismos estilos.
Si no lo especifica de otro modo, todos los documentos de texto nuevos de LibreOffice se basará en la plantilla predeterminada.
LibreOffice tiene un número de plantillas predefinidas que puede usar para crear tipos diferentes o documentos de texto, como las cartas comerciales.
Si no lo especifica de otro modo, todos los documentos de texto nuevos de LibreOffice se basará en la plantilla predeterminada.
LibreOffice tiene un número de plantillas predefinidas que puede usar para crear tipos diferentes o documentos de texto, como las cartas comerciales.
¿QUÉ SON MARCOS (FRAMES)?
Un marco (o frame) es una ventana independiente dentro de la ventana general del navegador. Cada marco tendrá sus bordes y sus propias barras de desplazamiento. Así cada página se dividirá en la práctica en varias páginas independientes.
Para crearlos necesitaremos un documento HTML específico, que llamaremos documento de definición de marcos. En él especificaremos el tamaño y posición de cada marco y el documento HTML que contendrá. Vamos a ver un ejemplo de este tipo de documento:
<HTML> <HEAD> <TITLE>Mi primera página con marcos</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="indice.html"> <FRAME NAME="principal" SRC="introduccion.html"> <NOFRAMES> <P>Lo siento, pero sólo podrás ver esta página si tu navegador tiene la capacidad de visualizar marcos.</P> </NOFRAMES> </FRAMESET> </HTML>
No hay comentarios:
Publicar un comentario