Introducción al Diseño Web
Politécnico Miguel Ángel Ibáñez
Distrito: 06-04
Nombre: Frankely Jesús
Apellido: Paulino García
Número: #8
Maestro: Frankely Tavarez Valdez
Modulo técnico: Desarrollo e implantaciones de soluciones web y multimedia
Asignación: Introducción al diseño web
Antes de inducirnos en el famoso lenguaje de programación (HTML), es importante que conozcamos algunos conceptos relevantes asociados al módulo técnico que se nos está impartiendo, ya que, considero que estos términos son esenciales para comprender de lo que trataremos en el futuro.
Diseño: El diseño es básicamente la manera en que se planea y se crean cosas, ya sea objetos, sistemas o soluciones visuales. Es una combinación de lo que se ve bien y lo que funciona bien, todo para lograr algo en específico. Puedes encontrar diseño en muchas áreas, como gráficos, interiores, productos, moda, y claro, en páginas web. Hay algunas reglas en el diseño, como alinear bien las cosas, hacer que algunas partes destaquen, repetir elementos y colocarlos de manera que todo se vea equilibrado y funcione correctamente.
Web: La "web" es básicamente todo el conjunto de sitios y servicios que puedes visitar a través de Internet, y a eso también se le llama World Wide Web (WWW). Incluye todo lo que puedes ver usando un navegador web, como páginas, aplicaciones y contenido multimedia. Para mostrar y organizar la información en la web, se utilizan tecnologías como HTML, CSS y JavaScript.
Diseño Web: El diseño web es el proceso de planear y organizar cómo se verá y funcionará un sitio web. Esto incluye varias tareas, como:
- Estructura y Navegación: Decidir cómo estará organizado el contenido y cómo las personas se moverán por el sitio.
- Estética: Elegir colores, fuentes y estilos para que el sitio se vea bien y tenga una apariencia uniforme.
- Usabilidad: Asegurarse de que el sitio sea fácil de usar para todos, incluso para personas con discapacidades.
- Responsive Design: Hacer que el sitio se vea y funcione bien en cualquier dispositivo, ya sea una computadora, una tablet o un teléfono.
- Interactividad: Agregar cosas que hagan que el sitio sea más interesante de usar, como botones, formularios y efectos visuales.
¿Qué es HTML?
HTML, que significa HyperText Markup Language, es el lenguaje básico que se usa para crear y organizar el contenido de las páginas web. Es un lenguaje de marcado, lo que quiere decir que utiliza etiquetas para señalar diferentes partes de una página web, como párrafos, títulos, enlaces, imágenes, listas, formularios, y muchas otras cosas.
HTML es súper importante en el desarrollo web porque define la estructura básica de las páginas, permitiendo que los navegadores entiendan y muestren el contenido de forma correcta. Con las etiquetas y atributos de HTML, se organiza el contenido para que tanto los navegadores como los usuarios puedan entenderlo fácilmente.
Aunque HTML no es un lenguaje de programación (no puede hacer cálculos ni tomar decisiones), es clave para definir cómo se organizan y disponen los elementos en la web. Generalmente, HTML se usa junto con CSS (para el diseño visual) y JavaScript (para la interactividad) para crear sitios web completos y que funcionen bien.
Características de HTML
Lenguaje de Marcado: HTML usa etiquetas (tags) para señalar distintas partes del contenido, como títulos, párrafos, enlaces, imágenes, listas, y más. Estas etiquetas ayudan a organizar y estructurar lo que aparece en una página web.
Estructura Jerárquica: HTML organiza el contenido en diferentes niveles, con elementos que están dentro de otros, como en una especie de árbol. Esto permite crear una estructura lógica y ordenada para la página, desde el inicio del documento (<html>) hasta los elementos más pequeños.
Independencia de Plataforma: Los archivos HTML pueden ser leídos por cualquier navegador en cualquier dispositivo o sistema operativo. Esto significa que el mismo código HTML se verá igual en diferentes computadoras o teléfonos.
Integración con CSS y JavaScript: HTML trabaja junto con CSS (para diseñar la apariencia) y JavaScript (para agregar interactividad). Aunque HTML se encarga de la estructura, CSS y JavaScript permiten darle estilo y hacer que la página sea más interactiva.
Hypertext y Enlaces: Una de las cosas más importantes de HTML es que permite crear enlaces que conectan diferentes páginas web. Esto facilita la navegación y la creación de sitios web que están interconectados.
Soporte Multimedia: HTML permite agregar diferentes tipos de contenido multimedia, como imágenes, audios, videos, y gráficos vectoriales. Esto hace que las páginas web sean más atractivas y dinámicas.
Semántica: HTML5 introdujo etiquetas que no solo organizan el contenido, sino que también le dan un significado claro. Por ejemplo, etiquetas como <header>, <footer>, <article>, y <section> ayudan a los motores de búsqueda y a las tecnologías de asistencia a entender mejor la estructura y el propósito del contenido.
Extensibilidad: HTML se puede ampliar utilizando elementos personalizados y atributos, lo que permite a los desarrolladores adaptarlo a sus necesidades sin perder la compatibilidad con los navegadores.
Compatibilidad hacia atrás: HTML es compatible con versiones anteriores, lo que significa que el contenido hecho en HTML antiguo sigue funcionando y se puede ver bien en los navegadores de hoy.
¿Qué significa una etiqueta de marcado HTML?
Una etiqueta de HTML es una parte fundamental del lenguaje que se usa para organizar y estructurar el contenido en una página web. Cada etiqueta tiene un nombre de elemento que está rodeado por símbolos de menor y mayor que (< >), y se utiliza para marcar el inicio y, generalmente, el final de un elemento. Las etiquetas suelen venir en pares: una para abrir y otra para cerrar. Por ejemplo:
- Etiqueta de apertura:
<p>indica el comienzo de un párrafo. - Etiqueta de cierre:
</p>indica el final del párrafo.
El contenido que se quiere mostrar o dar estilo se coloca entre estas dos etiquetas. Algunas etiquetas no necesitan una de cierre, como <img> para imágenes o <br> para saltos de línea.
En resumen, una etiqueta de HTML es la manera en que se organizan y describen los elementos en un documento, permitiendo que los navegadores muestren el contenido de manera ordenada.
¿Qué Representa una Etiqueta o Elemento en HTML?
Una etiqueta o elemento en HTML es como una parte específica de la página web que estamos creando. Los elementos pueden ser cosas como bloques de texto, imágenes, enlaces, formularios, tablas, y más. Cada uno tiene un propósito en la página, como un título, un párrafo, una lista o un botón. Los elementos ayudan a organizar todo de manera lógica y permiten que los navegadores muestren el contenido correctamente.
¿Cómo Están Estructuradas las Etiquetas o Elementos en HTML?
Las etiquetas o elementos en HTML se estructuran de esta manera:
Etiqueta de Apertura: Empieza con un símbolo de menor que (<), seguido del nombre del elemento, y termina con un símbolo de mayor que (>). Esto indica dónde comienza el elemento.
- Ejemplo:
<p>para un párrafo.
- Ejemplo:
Contenido: Es el texto o código que va dentro del elemento. No todos los elementos tienen contenido, como las etiquetas vacías (por ejemplo,
<img>para imágenes).- Ejemplo: Este es un párrafo de ejemplo.
Etiqueta de Cierre: Empieza con un símbolo de menor que (<), seguido de una barra inclinada (/), el nombre del elemento, y termina con un símbolo de mayor que (>). Esto indica dónde termina el elemento.
- Ejemplo:
</p>
- Ejemplo:
Atributos (Opcionales): La etiqueta de apertura puede tener atributos que dan más información sobre el elemento, como clases, identificadores, estilos o URLs. Los atributos se colocan dentro de la etiqueta de apertura y se escriben como nombre="valor".
- Etiqueta de Apertura:
<a href="https://example.com" target="_blank"> - Atributos:
href="https://example.com"ytarget="_blank" - Contenido:
Visita nuestro sitio - Etiqueta de Cierre:
</a>
Este ejemplo muestra un enlace que lleva al usuario a una nueva pestaña cuando se hace clic en "Visita nuestro sitio". El contenido está envuelto entre las etiquetas de apertura y cierre, mientras que los atributos dentro de la etiqueta de apertura definen el comportamiento y destino del enlace.
Etiqueta de Apertura:
<img src="https://example.com/imagen.jpg" alt="Descripción de la imagen" width="500" height="300">- Atributos:
src="https://example.com/imagen.jpg": Especifica la URL de la imagen.alt="Descripción de la imagen": Proporciona un texto alternativo que describe la imagen (útil para accesibilidad y SEO).width="500": Define el ancho de la imagen en píxeles.height="300": Define la altura de la imagen en píxeles.
Etiqueta de Cierre: En este caso, no hay una etiqueta de cierre porque
<img>es un elemento vacío, lo que significa que no contiene contenido interno. Este tipo de elementos solo requiere una etiqueta de apertura.
¿Qué etiqueta o elemento debe ir primero en los documentos HTML?
Los documentos HTML siempre deben empezar con la etiqueta <!DOCTYPE html>. Esta etiqueta le dice al navegador que el archivo está hecho con HTML5, que es la versión más nueva del lenguaje. Aunque <!DOCTYPE html> no es exactamente una etiqueta HTML, es una declaración que ayuda a que el navegador muestre la página de la manera correcta, siguiendo las normas de HTML5.
Después de esa línea, el archivo HTML tiene que comenzar con la etiqueta <html>, que básicamente envuelve todo el contenido de la página. Dentro de la etiqueta <html>, debes incluir las etiquetas <head> y <body>.
Ejemplo de la etiqueta <!DOCTYPE html>
¿Qué etiquetas usamos para los encabezados?
En HTML, usamos las etiquetas <h1> a <h6> para crear encabezados. La etiqueta <h1> es la más grande y la más importante, mientras que <h6> es la más pequeña y menos importante. Estas etiquetas son útiles para organizar el contenido en diferentes niveles de importancia, con <h1> normalmente siendo el título principal de la página.
Ejemplos de encabezados
¿Qué es la etiqueta de párrafo en HTML y para qué sirve?
En HTML, la etiqueta que se usa para los párrafos es <p>. Su trabajo es definir y agrupar bloques de texto, organizando el contenido en párrafos separados. Los párrafos aparecen en líneas distintas y tienen un espacio en blanco antes y después, lo que hace que el texto sea más fácil de leer en una página web.
Ejemplo de la etiqueta de párrafo <p></p>
¿Qué es la etiqueta de enlace en HTML y cuál es su función?
La etiqueta que usamos para crear enlaces en HTML es <a>, conocida también como "anchor tag". Su función es crear hipervínculos que permiten a los usuarios moverse de una página a otra en el mismo sitio o ir a otras páginas web. El enlace se establece con el atributo href, donde se coloca la URL del lugar al que quieres que el enlace lleve.
Ejemplos con la etiqueta de enlace <a>
Enlace a una Página Externa: Este enlace lleva al usuario a la página principal de Google. El atributo target="_blank" hace que el enlace se abra en una nueva pestaña del navegador.
Enlace a una Página Interna: Este enlace lleva al usuario a una página interna del mismo sitio web, como la página "Acerca de Nosotros".
Enlace a un Correo Electrónico: Este enlace abre el cliente de correo electrónico del usuario para enviar un mensaje a la dirección especificada.
Enlace con Texto Ancla: Este enlace lleva al usuario a una sección específica de la misma página, identificada por un id en la etiqueta del destino.
En este breve informe, hemos reunido los conceptos básicos de HTML, destacando sus características y sintaxis. También exploramos varios ejemplos que muestran algunas de las etiquetas más comunes y utilizadas en HTML, como la etiqueta <p></p>, que se emplea para escribir texto en formato de párrafo. En resumen, este informe subraya que HTML es uno de los lenguajes más utilizados para la creación de páginas web.
Comentarios
Publicar un comentario