Introducción al diseño web by MAYTE CAROLINA GONZALEZ RAMOS

Dominio

2023-02-20 17:19:54 UTC

Un dominio de internet es un nombre único que identifica a una subárea de Internet. El propósito principal de los nombres de dominio en Internet y del sistema de nombres de dominio, es traducir las direcciones IP de cada activo en la red, a términos memorizables y fáciles de encontrar.

mamd050303hocrrna8 — 2023-02-20 17:20:42 UTC

La maquetación wed consiste en transformar el diseño de una web en un conjunto de archivos (html, css y js) para que los navegadores web puedan interpretarlos y reproducirlos correctamente en diferentes dispositivos. La maquetación es una fase avanzada del proceso de desarrollo web.

Hosting

2023-02-20 17:22:25 UTC

El alojamiento web u hospedaje web es el servicio que provee a los usuarios de Internet un espacio de almacenamiento en línea, también conocido como webspace, que permite publicar todo el contenido relacionado con un sitio web.

URL

2023-02-20 17:23:32 UTC

Así como los edificios y las casas tienen una dirección postal, las páginas web también tienen direcciones únicas que permiten que los usuarios las localicen. En Internet, estas direcciones se conocen como URL (Localizador uniforme de recursos).

Un LRU o localizador de recursos uniforme es un identificador de recursos uniforme cuyos recursos referidos pueden cambiar, esto es, la dirección puede apuntar a recursos variables en el tiempo.

Definición

gorm050527mmcnmya6 — 2023-02-20 17:24:43 UTC

Término muy común que generalmente es usado para hacer referencia a modelos de diseño de páginas web y otras especificaciones. Podríamos decir que son métodos que definen y describen cualidades de la world wide web

Sitio web

2023-02-20 17:25:02 UTC

Es un espacio virtual que contiene toda la información que una persona o empresa quiere difundir a través de internet.

Encabezado

2023-02-20 17:27:24 UTC

El encabezado es una sección del documento que aparece en la margen superior, mientras el pie de página es una sección del documento que aparece en la margen inferior. Generalmente, éstas secciones contienen información como el número de la página, la fecha, el nombre del documento, etc.

Tipos

gorm050527mmcnmya6 — 2023-02-20 17:27:54 UTC

HTML estas siglas quieren decir HyperText Markup Language y su función es definir la estructura de los documentos dentro de un sitio web.

XML el significado de estas siglas es Extensible Markup Language, Este tiene la función de ser una base para un extenso número de tecnologías.

CSS que significa cascading style sheets permite la asignación de estilos para representar documentos.

Javascript, el cual nos permite dar dinamismo y rendimiento dentro de una web.

TABLAS

mamd050303hocrrna8 — 2023-02-20 17:28:09 UTC

Las tablas pueden presentar información tabulada, es decir, usando filas y columnas. Sin embargo, este uso lo podemos extender a toda la página web y crear una macrotabla que englobe todos los contenidos que se van a mostrar en la página entera. Como las tablas tienen filas y columnas, servirán para crear varias áreas donde se mostrarán los contenidos maquetados como si fuera una revista o un portal.

Menú de navegación

2023-02-20 17:28:15 UTC

Un menú de navegación es una lista organizada que resume la información que un visitante puede encontrar dentro de un sitio web. El menú incluye enlaces a diferentes páginas del mismo sitio, por lo que funciona como un directorio de sus contenidos.

gorm050527mmcnmya6 — 2023-02-20 17:30:01 UTC

CTA

2023-02-20 17:30:08 UTC

Call-to-Action (CTA) es cualquier llamada, visual o textual, que lleve al lector o visitante de una página a realizar una acción. Por lo tanto, es una herramienta primordial para promover tus ofertas de Marketing Digital y generar leads

División

mamd050303hocrrna8 — 2023-02-20 17:30:44 UTC

En la maquetación web exististe la etiqueta

que define una división. Esta etiqueta permite agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc). En principio, los navegadores no muestran nada especial cuando se crea una división, salvo que se dé formato a la división con la hoja de estilo.

Página web

2023-02-20 17:31:09 UTC

Es un documento accesible desde cualquier navegador con acceso a internet, y que puede incluir audio, vídeo, texto y sus diferentes combinaciones.

Imagen destacada

2023-02-20 17:31:18 UTC

Las imágenes destacadas se utilizan como miniaturas cuando las páginas o publicaciones de blog se comparten en las redes sociales. Puedes elegir si establecer una imagen destacada en cada página o publicación individual. También tienes la opción de mostrar imágenes destacadas en tu página de listado de blog.

Buscador

2023-02-20 17:33:19 UTC

Un buscador de Internet o motor de búsqueda es un servidor informático especializado en la búsqueda de información en la web. Los resultados de búsqueda de una consulta suelen aparecer en forma de lista y pueden consistir en páginas web, imágenes, vídeos y otros formatos

Formulario

2023-02-20 17:34:35 UTC

Un formulario es un documento, físico o digital, elaborado para que un usuario introduzca datos estructurados en las zonas correspondientes, para ser almacenados y procesados posteriormente.

Menús

mamd050303hocrrna8 — 2023-02-20 17:35:40 UTC

El menú es un conjunto de enlaces a las distintas partes de nuestro sitio, y lo más habitual es encontrarlo en el html de la página, o en un archivo javascript.

La estructura puede ser cualquiera: podemos hacer un menú con divs, con tablas, etc. Pero lo más común, por ser una estructura sencilla de manejar, es utilizar una lista (

Ícono de URL

2023-02-20 17:36:13 UTC

El favicon es el icono o símbolo que acompañará a tu URL en los navegadores. Esta pequeña imagen tiene como función principal ayudarte a identificar más fácilmente una determinada URL.

gorm050527mmcnmya6 — 2023-02-20 17:36:47 UTC

Información de contacto

2023-02-20 17:37:41 UTC

Los datos de contacto son conjuntos de datos que contienen información sobre personas relevante para la proyección de la empresa. Estos conjuntos de datos están predominantemente vinculados o relacionados con datos organizacionales o institucionales de las personas

Clases

mamd050303hocrrna8 — 2023-02-20 17:38:22 UTC

Las clases o elementos de la lista se muestran uno debajo de otro. Pero por cuestiones de diseño, podemos preferir que se muestren en horizontal, uno al lado del otro. Esto podemos conseguirlo, por ejemplo poniendo los elementos como flotantes.
Podemos personalizar las clases por, el ancho (width) de una lista es del 100% del elemento que la contiene. Su alto (height) depende de la cantidad de elementos que contenga. El ancho de los elementos es del 100% de la lista cuando están en vertical, y ajustado al contenido cuando están en horizontal. El alto, se ajusta siempre al contenido.

Pie de página

2023-02-20 17:38:44 UTC

Una nota al pie es una referencia colocada en la parte inferior de una página o pie de página. Cuando escriba su trabajo de investigación, usaría una nota al pie para citar fuentes de hechos o citaciones. Las notas al pie de página se mencionan en el texto de la misma manera que una citación.

Estructura HTML

gorm050527mmcnmya6 — 2023-02-20 17:45:35 UTC

La estructura HTML de una página web se compone de las etiquetas , que indica el comienzo de la página; , que contiene información más descriptiva sobre el sitio; y , que conforma todos los elementos visibles de la página.

mamd050303hocrrna8 — 2023-02-20 17:46:01 UTC

Los elementos básicos de un sitio web se componen a modo de maqueta para la llamada estructura básica, dicha estructura es lo que hace de un sitio web un espacio organizado e intuitivo para todos en términos generales.

TEXTOS

mamd050303hocrrna8 — 2023-02-20 17:46:27 UTC

El texto es el elemento más significativo de cualquier sitio Web porque los usuarios navegan por la Web fundamentalmente en busca de información expresada en hipertexto.

Etiquetas HTML

gorm050527mmcnmya6 — 2023-02-20 17:46:57 UTC

Todas las etiquetas están constituidas al inicio y al final por los signos < y >, que representan precisamente la apertura y el cierre de cada elemento para que el lenguaje HTML pueda funcionar. En este sentido, existen dos tipos de etiquetas HTML:

Etiquetas emparejadas. Vienen en pares y tienen una apertura y cierre. Tal como las que conoces: < >.
Etiquetas vacías. Se refiere a las etiquetas que no requieren cierre.

IMÁGENES

mamd050303hocrrna8 — 2023-02-20 17:47:12 UTC

Aunque no debe abusar de las imágenes por el riesgo de aumentar el peso de la página, y por lo tanto, los tiempos de descarga. Las imágenes constituyen un elemento esencial para ofrecer información visual del contenido y mostrar un diseño atractivo y personal.

Código HTML

gorm050527mmcnmya6 — 2023-02-20 17:49:24 UTC

Cualquier página web debe contener al menos este código para desarrollarse correctamente. Te explicamos al detalle el significado y contenido de cada etiqueta a continuación.

: se utiliza para indicar la versión HTML 5.0 (la usada actualmente).
: es el elemento raíz y es el más importante dentro de la estructura HTML, pues es el que contendrá el resto de las etiquetas de atributos de la página web.
: es la etiqueta principal que incluye metadatos; son atributos que no se muestran al usuario, solo describen referencias de la página, por ejemplo, título o página CSS.
: es la etiqueta para desarrollar todo el cuerpo de la página web y engloba datos desde textos hasta enlaces.

Dentro de la etiqueta se desglosan más etiquetas y elementos como:

,
,
,
,
,
: que representan las etiquetas de títulos.
: sirve para indicar la apertura y cierre de un párrafo.
: significa «división» y funciona para crear secciones o agrupar contenidos.
: su traducción es «abarcar» y sirve para aplicar estilo al texto o agrupar elementos en línea.
, , : para agregar un texto en negritas, cursiva y subrayado, correspondientemente.
: permite agregar un vínculo o enlace.
, , , : dentro de la estructura HTML estas etiquetas sirven para insertar una imagen, audio, video o incrustar un documento HTML.
: funciona para insertar un formulario.
: representa la etiqueta para un elemento en una interfaz de usuario.
: crea controles interactivos para formularios, con el fin de recibir datos del usuario.

Cada etiqueta, debe tener una apertura y un cierre; de lo contrario, el código marcará error y los cambios no se visualizarán correctamente en la página web.

HIPERVÍNCULO

mamd050303hocrrna8 — 2023-02-20 17:49:32 UTC

En la wed un hipervínculo, es una conexión directa entre dos espacios virtuales en el mundo digital. Es la forma más rápida que existe en internet de llegar de un punto a otro, con este viajamos a la velocidad de 1 clic.

Esta conexión es creada a través de tags, que le asignan a dos elementos atributos unidireccionales:

punto de origen o ancla: es el punto de partida, en los textos generalmente están en azul y subrayados;
punto de destino: es aquel que etiquetamos como llegada, El lugar al que queremos dirigir al navegante.

gorm050527mmcnmya6 — 2023-02-20 17:49:45 UTC

gorm050527mmcnmya6 — 2023-02-20 17:51:15 UTC

VÍDEOS

mamd050303hocrrna8 — 2023-02-20 17:51:43 UTC

El vídeo no solo sirve para enviar un mensaje que capte la atención de los usuarios, sino que también ayuda a mejorar el posicionamiento de nuestra marca y de nuestro sitio web. Conseguir posicionar un vídeo en Google puede ser una buena fuente de visitantes y reportarnos mayor visibilidad.

mamd050303hocrrna8 — 2023-02-20 17:51:54 UTC

mamd050303hocrrna8 — 2023-02-20 17:52:06 UTC

Fuentes

gorm050527mmcnmya6 — 2023-02-25 20:35:40 UTC

Atributo face
Dentro del atributo suelen seleccionarse varios tipos de letra separados por comas. En este caso el navegador comprobará que dispone del primer tipo enumerado y si no es así, pasará al segundo y así sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto.

Este texto tiene otra tipografía

Tamaño

gorm050527mmcnmya6 — 2023-02-25 20:36:59 UTC

Atributo size
Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo.
Si hablamos en términos absolutos, existen 7 niveles de tamaño distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra más pequeña o size="7" para la más grande.

Este texto es más grande

Color

gorm050527mmcnmya6 — 2023-02-25 20:39:50 UTC

Atributo color
El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un número hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribución del rojo, verde y azul al color en cuestión.

Este texto está en rojo

gorm050527mmcnmya6 — 2023-02-25 20:40:30 UTC

Márgenes

gorm050527mmcnmya6 — 2023-02-25 21:08:50 UTC

Si queremos modificar los márgenes de una página web deberemos de utilizar cuatro propiedades CSS:

margin-bottom, para establecer el margen inferior.
margin-left, para establecer el margen izquierdo.
margin-right, para establecer el margen derecho.
margin-top, para establecer el margen superior.
Los valores que pueden recibir estas propiedades se pueden establecer mediante un valor absoluto de longitud ya sea en pixels, em, rem,… o bien en porcentajes. Siguiendo la siguiente estructura:

margin-top : | inherit

gorm050527mmcnmya6 — 2023-02-25 21:09:48 UTC

Posición

gorm050527mmcnmya6 — 2023-02-25 21:23:36 UTC

position: static
Es el valor predeterminado del atributo y el posicionamiento normal de los elementos en la página. Quiere decir que los elementos se colocarán según el flujo normal del HTML, es decir, según estén escritos en el propio código HTML.

Esto es una capa con posicionamiento estático

posicionamiento static, predeterminado.

CSS

Posicionamiento static, aunque en este caso no se indicó el atributo position static, pues no hace falta.

gorm050527mmcnmya6 — 2023-02-25 21:24:55 UTC

position: absolute
El valor absolute en el atributo position permite posicionar elementos de manera absoluta, esto es de manera definida por valores de los atributos top, left, bottom y right, que indican la distancia con respecto a un punto.

Esta capa tiene posicionamiento absoluto.

Me permite especificar top y left para colocarla con respecto a la esquina superior izquierda.

Posicionamiento absoluto con z-index menor (la capa aparece por debajo de otras que se superponen con z-index mayor.

Posicionamiento absoluto con atributos bottom y right

Posicionamiento CSS

gorm050527mmcnmya6 — 2023-02-25 21:25:42 UTC

position: relative
El valor relative en el atributo position indica que la capa sí forma parte del flujo normal de elementos de la página, por lo que su posición dependerá del lugar donde esté en el código y el flujo HTML.

Hola

Hola esto es una prueba

capa de posicionamiento relative
Se tiene en cuenta esta capa para posicionar las siguientes.

hola de nuevo!

gorm050527mmcnmya6 — 2023-02-25 21:26:45 UTC

position: fixed
Este atributo sirve para posicionar una capa con posicionamiento absoluto, pero su posición final será siempre fija, es decir, aunque se desplace el documento con las barras de desplazamiento del navegador, siempre aparecerá en la misma posición.

Posicionamiento fixed

Hola

Posicionamiento fixed

gorm050527mmcnmya6 — 2023-02-25 21:28:12 UTC

Introducción al diseño web by MAYTE CAROLINA GONZALEZ RAMOS

Dominio

Hosting

URL

Definición

Sitio web

Encabezado

Tipos

TABLAS

Menú de navegación

CTA

División

Página web

Imagen destacada

Buscador

Formulario

Menús

Ícono de URL

Información de contacto

Clases

Pie de página

Estructura HTML

TEXTOS

Etiquetas HTML

IMÁGENES

Código HTML

,

,

,

,

,

: que representan las etiquetas de títulos.

HIPERVÍNCULO

VÍDEOS

Fuentes

Tamaño

Color

Márgenes

Posición

CSS

Posicionamiento CSS

Hola

hola de nuevo!

Hola