Contacta con nosotros

Si tienes cualquier pregunta, escríbenos

Componentes de un sitio web

Nodo Tipo Descripción Visible
Accesibilidad
Una página Web accesible permite proporcionar un acceso equitativo e igualdad de oportunidad a cualquier persona para poder ver su contenido de su pagina o sitio. Tiene que tener algo esencial en la información, diseño de pagina, tamaño de letra, color, etc. Para que las persona puedan leer e ingresar fácilmente.

Un sitio web accesible es:

  • Transformable: La información y los servicios deben ser accesibles para todos y deben poder ser utilizados con todos los dispositivos de navegación.
  • Comprensible: Contenidos claros y simples.
  • Navegable: Mecanismos sencillos de navegación
Visibilidad
Colores o imagen de fondo en pagina html
Colocar un fondo en una página web

Para incluir un fondo en una página web necesitamos utilizar el atributo background en la etiqueta <BODY>, al que le asignamos el nombre del archivo que deseamos utilizar como fondo. Si el archivo se encuentra en un directorio distinto que la página web, necesitaremos incluir la ruta al archivo, teniendo en cuenta siempre de utilizar una ruta relativa al archivo .html para que se conserve la ruta en caso de que cambiemos el sitio web de localización.

<body background="fondo.gif">

Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la página como fondo. Por defecto, la imagen de fondo aparece como un mosaico, repitiéndose a lo largo de todo el espacio de la página.

Fondo en otros elementos

No solo la página puede tener un fondo, también lo podemos colocar a las tablas o las celdas, por ejemplo. Se utiliza el mismo atributo background, aunque aplicado a otras etiquetas.

<table background="fondo.gif">

<td background="fondo.gif">

Color de fondo

Colorear un fondo de página web es en realidad bastante simple. La primera y más popular forma es mediante el uso de un código de color Hex con la propiedad color de fondo. Aquí aplicamos un color Hex directamente en el HTML <body> elemento usando el atributo de estilo.

HTML

<body style="background-color:#FF0000;">
</body>

Una segunda forma es utilizar un nombre de color HTML; basta con sustituir el código Hex con uno de los 140 nombres de colores compatibles y listo.

HTML

<body style="background-color:red;">
</body>
Visibilidad
Color, tipo y tamaño de letra
 Tipo de letra:

En HTML y XHTML, es el tipo de letra o familia de tipos de letra es el tipo de letra que se aplicará al cuerpo de texto en un navegador. El tipo de letra es relevante para la visualización del texto en la pantalla, en una impresora o en otro tipo de dispositivos.


Una familia de tipos de letra y otros atributos de presentación de un tipo de letra pueden ser aplicados en el código HTML, ya sea en las hojas de estilos en cascada (CSS) o en el elemento depreciado font de HTML.

<p class="text">
Ejemplo de texto al cual se le ha dado formato con CSS en una hoja de estilo independiente.
</p>

<p style="font-family: times, serif; font-size:14pt; font-style:italic">
Ejemplo de texto al cual se le ha dado formato en una línea dentro de la misma hoja CSS.
</p>

<p><i><font face="times, serif" size="3">
Ejemplo de texto al cual se le ha dado formato con la «obsoleta» etiqueta FONT.
</font></i></p>


Cuando se utiliza el lenguaje CSS para aplicar un tipo de letra cuyo nombre tiene espacios en blanco, es preciso utilizar comillas o comillas simples para delimitar el nombre.

.text { font-family: "calibri", Garamond, 'Comic Sans'; }


En CSS, una familia o grupo de tipos de letra (o Face en HTML) se compone de un conjunto de tipos de letra afines, agrupados como familias. Por ejemplo, la familia Times incluye diferentes tamaños, estilos (como romana {redondeada} y la cursiva {itálica}), y grosor (como normal y negrita).


El navegador web sólo podrá aplicar un tipo de letra si está instalado en el sistema desde el cual se opera, lo cual no es siempre el caso. Los diseñadores en código HTML pueden listar la familia de tipos de letra sin adjudicarles preferencias, para ser usadas cuando se muestra el texto. En lista, los diferentes tipos de letra están separados por comas, como se vio más arriba. Para evitar resultados inesperados, la última familia de tipo de letra en la lista de ha de ser una de las cinco familias genéricas que están disponibles predeterminadamente en HTML y en CSS. Si el navegador no encuentra el tipo de letra especificado, utilizará aquellos tipos de letra predeterminados, que pueden haber sido definidos por el usuario. Dependiendo del navegador web, un usuario puede anular el tipo de letra definido por el escritor del código. Esto puede deberse por razones de gusto personal, pero también pude ser debido a alguna limitación visual del usuario, tales como la necesidad de un tamaño de letra mayor o a que debe evitar ciertos colores.

Colores de letra:

En la composición de webs juegan un papel muy importante los colores. Usar una paleta de colores definida suele ayudar a la consistencia de un diseño y a transmitir ciertas sensaciones al usuario. Como parte de nuestro aprendizaje de HTML tenemos que detenernos a comprender cómo se expresan los colores en el lenguaje.

En HTML se usa una notación específica de especificar un color, compuesta por tres valores "RGB": Red, Green, Blue. Rojo, Verde y Azul. Es decir, que para conseguir un color cualquiera mezclaremos cantidades de cada uno de esos colores. RGB es el modelo usado para la creación de colores de los monitores y televisores, así que es un excelente modo de expresar color en un medio digital como una web.

Los valores RBG en HTML se indican en numeración hexadecimal, en base 16. (Los dígitos pueden crecer hasta 16. Como no hay tantos dígitos numéricos, se utilizan las letras de la A a la F).



Para conseguir un color, mezclaremos valores asignando dos dígitos a cada valor RBG. De esta manera: "#RRGGBB"

Como has observado, colocamos también una almohadilla "#" al principio, para indicar que esa cadena es un valor de color en hexadecimal.

Más adelante en el artículo veremos ejemplos en una grande paleta, com sus valores en RGB. No obstante ejemplos podrían ser #000000 para el negro, #FFFFFF para el blanco, #660000 sería un rojo oscuro o #FF0000 un rojo brillante.

Tamaño de letra:

Tamaños de letra en HTML. Para definir distintos tamaños de letra, en HTML se utiliza el elemento lleno <Hx> </Hx> donde x es un número que puede variar entre 1 y 6, siendo 1 el tamaño mayor.

Visibilidad
Componentes Visibilidad
Ejemplos de archivos html

Ejemplo de código HTML

<HTML>

<HEAD>

<TITLE>Un Titulo para el Browser de turno </TITLE>

</HEAD>

<BODY>

<!-- Aqui va todo lo chachi -->

<H1>Otro t&iacute;tulo, esta vez m&aacute;s largo. </H1>

<P> <IMG SRC= "./felix.gif "ALIGN= "MIDDLE " ALT= "EL Gato Felix ">Hoola.

<P>Esto es un parrafo con informacion

super importante. Notese que las lineas salen pegadas aun dejando

espacios, saltos de linea, etc. <BR> &#161 Si pongo esto

si <STRONG>cambia </STRONG> de linea!

<P>Otro parrafo, esto ya es un poco rollo.

<H3>Pongamos un subtítulo<H3>

<P>Por cierto, &#191 que paso con las <A HREF= "#pepe ">anclas</A>?

<HR>

<UL>

<LI> Esto es una lista no ordenada.

<LI> Las listas quedan mejor si tienen varios elementos.

</UL>

Me voy al <A HREF= "http://www.iac.es/home.html ">IAC</A>.

<P>Vamos a crear un <EM>ancla </EM>, o lo que es lo mismo, un <A NAME="pepe">anchor.</A>

.....................................................

.....................................................

</BODY>

</HTML>

Visibilidad
Etiquetas en html
Elemento raíz  Sección

Elemento | Descripcion
<!doctype html> | Define que el documento esta bajo el estandar de HTML 5ElementoDescripción<html> | Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento.

Metadatos del documentoSección

Elemento Descripción
<head> | Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
<title> | Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada.
<base> | Define la URL base para las URLs relativas en la página.
<link> | Usada para enlazar JavaScript y CSS externos con el documento HTML actual.
<meta> | Define los metadatos que no pueden ser definidos usando otro elemento HTML.
<style> | Etiqueta de estilo usada para escribir CSS en línea.

ScriptingSección

Elemento Descripción
<script> | Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript
<noscript> | Define un contenido alternativo a mostrar cuando el navegador no soporta scripting.

Secciones Sección

Elemento Descripción
<body> | Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un documento.
<section>
| Define una sección en un documento.
<nav>
| Define una sección que solamente contiene enlaces de navegación
<article>
| Define contenido autónomo que podría existir independientemente del resto del contenido.
<aside>
| Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> | Los elemento de cabecera  implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor impotancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.
<header>
| Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos.
<footer>
| Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos enlaces a información legal o direcciones para dar información de retroalimentación.
<address> | Define una sección que contiene información de contacto.
<main>
| Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el documento.

Agrupación de Contenido Sección

Elemento Descripción
<p> | Define una parte que debe mostrarse como un párrafo.
<hr> | Representa un quiebre temático entre parrafos de una sección o articulo o cualquier contenido.
<pre> | Indica que su contenido esta preformateado y que este formato debe ser preservado.
<blockquote> | Representa una contenido citado desde otra fuente.
<ol> | Define una lista ordenada de artículos.
<ul> | Define una lista de artículos sin orden.
<li> | Define un artículo de una lista ennumerada.
<dl> | Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.
<dt> | Representa un término definido por el siguiente <dd>.
<dd> | Representa la definición de los terminos listados antes que él.
<figure>
| Representa una figura ilustrada como parte  del documento.
<figcaption>
| Representa la leyenda de una figura.
<div> | Representa un contenedor genérico sin ningún significado especial.

Semántica a nivel de TextoSección

ElementoDescripción<a> | Representa un hiperenlace , enlazando a otro recurso.
<em> | Representa un texto enfatizado , como un acento de intensidad.
<strong> | Representa un texto especialmente importante .
<small> | Representa un comentario aparte , es decir, textos como un descargo de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento.
<s> | Representa contenido que ya no es exacto o relevante .
<cite> | Representa el título de una obra .
<q> | Representa una cita textual  inline.
<dfn> | Representa un término cuya definición  está contenida en su contenido ancestro más próximo.
<abbr> | Representa una abreviación  o un acrónimo ; la expansión de la abreviatura puede ser representada por el atributo title.
<data>
| Asocia un equivalente legible por máquina a sus contenidos. (Este elemento está sólamente en la versión de la  WHATWG del estandar HTML, y no en la versión de la W3C de HTML5).
<time>
| Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el atributo datetime.
<code> | Representa un código de ordenador .
<var> | Representa a una variable, es decir, una expresión matemática o contexto de programación, un identificador que represente a una constante, un símbolo que identifica una cantidad física, un parámetro de una función o un marcador de posición en prosa.
<samp> | Representa la salida de un programa o un ordenador.
<kbd> | Representa la entrada de usuario, por lo general desde un teclado, pero no necesariamente, este puede representar otras formas de entrada de usuario, como comandos de voz transcritos.
<sub>,<sup> | Representan un subíndice y un superíndice, respectivamente.
<i> | Representa un texto en una voz o estado de ánimo alterno, o por lo menos de diferente calidad, como una designación taxonómica, un término técnico, una frase idiomática, un pensamiento o el nombre de un barco.
<b> | Representa un texto hacia el cual se llama la atención para propósitos utilitaros.  No confiere ninguna importancia adicional y no implica una voz alterna.
<u> | Representa una anotación no textual sin-articular, como etiquetar un texto como mal escrito o etiquetar un nombre propio en texto en Chino.
<mark>
| Representa texto resaltado con propósitos de referencia, es decir por su relevancia en otro contexto.
<ruby>
| Representa contenidos a ser marcados con anotaciones ruby,  recorridos cortos de texto presentados junto al texto. Estos son utilizados con regularidad en conjunto a lenguajes de Asia del Este, donde las anotaciones actúan como una guía para la pronunciación, como el furigana Japonés.
<rt>
| Representa el texto de una anotación ruby .
<rp>
| Representa los paréntesis alrededor de una anotación ruby, usada para mostrar la anotación de manera alterna por los navegadores que no soporten despliegue estandar para las anotaciones.
<bdi>
| Representa un texto que debe ser aislado de sus alrededores para el formateado bidireccional del texto.  Permite incrustar un fragmento de texto con una direccionalidad diferente o desconocida.
<bdo> | Representa la direccionalidad de sus descendientes con el fin de anular de forma explícita al algoritmo bidireccional Unicode.
<span> | Representa texto sin un significado específico.  Este debe ser usado cuando ningún otro elemento semántico le confiere un significado adecuado, en cuyo caso, provendrá de atributos globales como class, lang, o dir.
<br> | Representa un salto de línea.
<wbr>
| Representa una oportunidad de salto de línea, es decir, un punto sugerido de envoltura donde el texto de múltiples líneas puede ser dividido para mejorar su legibilidad.

Ediciones Sección

Elemento Descripción
<ins> | Define una adición en el documento.
<del> | Define una remoción del documento.
Visibilidad
Formulario en html
Un formulario web dentro de una página web permite al usuario introducir datos los cuales son enviados a un servidor para ser procesados. Los formularios web se parecen a los formularios de papel porque los internautas llenan dichos formularios usando casillas de selección, botones de opción, o campos de texto.
Visibilidad
HTML
HTML, siglas en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros.
El lenguaje HTML basa su filosofía de desarrollo en la diferenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene solamente texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado.
Visibilidad
SITIO WEB
Un sitio web, por lo tanto, es un espacio virtual en Internet. Se trata de un conjunto de páginas web que son accesibles desde un mismo dominio o subdominio de la World Wide Web (WWW).
Visibilidad
SITIO WEB

Un sitio web,​ portal,​ o cibersitio, es una colección de páginas web relacionadas y comunes a un dominio de internet o subdominio en la World Wide Web dentro de Internet.34

Todos los sitios web públicamente accesibles constituyen una gigantesca World Wide Web de información; y un gigantesco entramado de recursos de alcance mundial.

A las páginas de un sitio web se accede frecuentemente a través de un URL raíz común llamado portada, que normalmente reside en el mismo servidor físico. Los URL organizan las páginas en una jerarquía, aunque los hiperenlaces entre ellas controlan más particularmente cómo el lector percibe la estructura general y cómo el tráfico web fluye entre las diferentes partes de los sitios.


Algunos sitios web requieren una subscripción para acceder a algunos o todos sus contenidos. Ejemplos de sitios con subscripción incluyen algunos sitios de noticias, sitios de juegos, foros, servicios de correo electrónico basados en web, sitios que proporcionan datos de bolsa de valores e información económica en tiempo real, etc.

Visibilidad
Tablas en html
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.

Como muchas otras estructuras de HTML, las tablas son construidas utilizando elementos. En particular, una tabla básica puede ser declarada usando tres elementos, a saber, table (el contenedor principal), tr (representando a las filas contenedoras de las celdas) y td (representando a las celdas). Dejémoslo más claro con un ejemplo:

<table class="egt">
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
    <td>Celda 3</td>
  </tr>
  <tr>
    <td>Celda 4</td>
    <td>Celda 5</td>
    <td>Celda 6</td>
  </tr>
</table>

Celda 1 | Celda 2 | Celda 3
Celda 4 | Celda 5 | Celda 6
Visibilidad
Usabilidad
Qué es la usabilidad web. La usabilidad web es el grado de facilidad de uso que tiene una página web para los visitantes que entran e interactúan con ella. Una web con una buena usabilidad es aquella que permite a los usuarios una interacción sencilla, intuitiva, agradable y segura.
Visibilidad
Origen Relación Destino Fecha
Componentes Colores o imagen de fondo en pagina html
Componentes Color, tipo y tamaño de letra
Componentes Tablas en html
Etiquetas en html Componentes
HTML Accesibilidad
HTML Componentes
HTML Ejemplos de archivos html
HTML Formulario en html
HTML SITIO WEB
HTML Usabilidad

Descripción

Hecho por Antonio Marmolejo Ortega