Sencillo de iniciar… Con “etiquetas y con michis” también. Buen inicio.
Introducción
Cómo se crean las páginas web
¿Qué es el Frontend?
¿Qué es el Backend?
Sitios Code con HTML y CSS
¿Qué debo saber de HTML?
Mi primera página web con HTML
Maquetando el hero
Maquetando la sección de redes sociales
¿Qué debo saber de CSS?
Mis primeros estilos con CSS
Estilos del menú
Estilizando el Hero: elementos encima imágenes
Estilizando el Hero: información del hero
Estilos para las imágenes de redes sociales
Detalles finales con HTML y CSS
Despliega tu página a internet
Cómo hacer deploy a internet
Cómo publicar tu página web gratis en internet
Compra el dominio de tu página web
Cómo comprar un hosting para mi página web
Sitios No-code con WordPress
Qué es no-code
Despliega tu página web con WordPress
Instalación y configuración de Elementor
Mi primera página web con Elementor
Maquetando el hero con Elementor
Mi primera página web con una plantilla de WordPress
Conclusiones
¡Conoce otros proyectos de este curso!
Próximos pasos para convertirte en Web Developer
Comparte tu proyecto del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
¿Qué debo saber de HTML?
4/27Recursos
¿Qué es HTML y por qué es esencial en desarrollo web?
HTML, siglas de HyperText Markup Language, es la columna vertebral de cualquier página web. Es fundamental para quienes desean incursionar en el desarrollo Frontend, ya que define la estructura y el contenido de los sitios web mediante el uso de etiquetas. Comprender el funcionamiento de estas etiquetas es esencial para crear páginas web funcionales y bien estructuradas.
¿Cómo funcionan las etiquetas en HTML?
Las etiquetas HTML son bloques de construcción que definen diferentes partes de una página web. Crean una estructura lógica y ordenada que los navegadores web interpretan para mostrar contenido.
-
Estructura básica: Una página web completa puede estar compuesta por múltiples etiquetas, como
<header>,<footer>, y<div>, que estructuran elementos como cabezales, pies de página, y contenedores de contenido. -
Contenidos anidados: Las etiquetas pueden contener otras etiquetas, lo que permite crear contenido más rico y complejo. Por ejemplo, dentro de un
<div>puedes colocar una imagen<img>, junto con un párrafo<p>que describa la imagen. -
Etiquetas auto-cerradas: Algunas etiquetas, como
<img>, no requieren un cierre manual (</img>), ya que se cierran automáticamente.
¿Qué son los atributos en HTML y para qué sirven?
Los atributos proporcionan propiedades adicionales a las etiquetas y especifican detalles sobre cómo deben mostrarse o comportarse.
-
Definición de atributos: Los atributos se escriben dentro de una etiqueta HTML y pueden definir aspectos como el ancho
widthy la alturaheightde una imagen:<img width="500" height="500" src="MrMichi.jpg"> -
Atributos comunes: Los atributos más frecuentes incluyen
srcpara especificar la fuente de una imagen,hrefpara enlaces, yaltpara describir visualmente el contenido de una imagen.
¿Cuáles son las etiquetas básicas que debo conocer?
Aunque HTML ofrece un amplio conjunto de etiquetas, algunas son esenciales para cualquier desarrollador web principiante:
-
Estructurales:
<html>: Delimita el inicio y final del documento HTML.<head>: Contiene meta información sobre el documento, como el título.<body>: Encierra el contenido visible, incluyendo texto, imágenes, y otros elementos.
-
Texto:
<h1>,<h2>, etc.: Encabezados que organizan y priorizan la información.
-
Multimedia:
<img>: Inserta imágenes.<video>: Incorpora contenido de video.
-
Enlaces y listas:
<a>: Crea enlaces a otros documentos.<ul>,<ol>,<li>: Forman listas no ordenadas, ordenadas y los ítems de dichas listas.
Con estos elementos, es posible comenzar a formar una comprensión sólida de cómo diseñar y hacer funcional un sitio web utilizando HTML. Con el tiempo y la práctica, los desarrolladores pueden profundizar más en características avanzadas y comenzar a explorar otros lenguajes como CSS y JavaScript para mejorar sus habilidades y conocimientos en desarrollo web.
¿Te gustaría aprender más sobre etiquetado avanzado y ver casos prácticos de HTML? ¡Sigue explorando y no dudes en consultar recursos en línea para ampliar tus conocimientos! ¡El mundo del desarrollo web te espera!
Aportes 34
Preguntas 2
Ordenar por:
Por si a alguien le sirve:
Header: Cabecera
Footer: Pie de pagina
Width: ancho
Height: altura
src (source): fuente o origen. Aquí se indica en que carpeta o en que link se encuentra guardada la imagen.
Excelente profesor!!!
🍃 En HTML, las etiquetas son elementos que se utilizan para estructurar y dar formato al contenido de una página web. Las etiquetas están compuestas por un nombre encerrado entre los símbolos < y >, y pueden tener atributos y contenido.
Aquí tienes algunos aspectos importantes sobre cómo funcionan las etiquetas en HTML:
- Apertura y cierre de etiquetas: La mayoría de las etiquetas en HTML tienen una etiqueta de apertura y una etiqueta de cierre. La etiqueta de apertura se compone del nombre de la etiqueta dentro de los símbolos
<y>. La etiqueta de cierre tiene el mismo nombre de la etiqueta de apertura pero también incluye una barra diagonal antes del nombre (</). Por ejemplo, la etiqueta de apertura para un párrafo es<p>, mientras que la etiqueta de cierre es</p>. El contenido que se encuentra entre estas etiquetas se considera el contenido del párrafo. - Etiquetas auto-cerradas: Algunas etiquetas no requieren una etiqueta de cierre y se denominan etiquetas auto-cerradas o etiquetas vacías. Estas etiquetas se cierran con un slash antes del signo de cierre (
/>). Por ejemplo, la etiqueta<img>se utiliza para insertar imágenes y no requiere una etiqueta de cierre adicional. - Atributos: Las etiquetas también pueden contener atributos, que proporcionan información adicional sobre el elemento. Los atributos se especifican dentro de la etiqueta de apertura y consisten en un nombre y un valor. Por ejemplo, el atributo
srcse utiliza en la etiqueta<img>para especificar la URL de la imagen que se mostrará. Los atributos se escriben en el formatonombre="valor". Por ejemplo,<img src="imagen.jpg" alt="Descripción de la imagen">. - Anidamiento de etiquetas: Las etiquetas pueden anidarse unas dentro de otras, lo que significa que una etiqueta puede contener otras etiquetas dentro de ella. Esto se utiliza para crear estructuras y jerarquías en el contenido de la página. Por ejemplo, un párrafo (
<p>) puede contener una etiqueta de énfasis (<em>) para resaltar una parte del texto.
Es importante utilizar las etiquetas de forma adecuada y seguir las convenciones de HTML para asegurarte de que tu página web se visualice y funcione correctamente en los navegadores. Puedes consultar la documentación de HTML para obtener más detalles sobre las etiquetas y su uso específico.
Por fin he visto un uso útil para los post its 😄
etiquetas + michis = Tecnología de campeones!°!!
<html>
<head>
<style></style>
</head>
<body>
<header>
<nav>
<ul>
<li></li>
</ul>
</nav>
</header>
<section>
<h1></h1>
<img>
<div></div>
</section>
<footer>
<p></p>
</footer>
</body>
</html>
¿Qué debo saber de HTML?
- HTML son etiquetas
- Hay etiquetas para áreas y elementos determinados, en esto también entra en juego lo que es HTML semántico
- Puedo poner etiquetas dentro de etiquetas.
- Hay etiquetas con o sin contenido y con o sin atributos.
📌 HTML usa etiquetas para estructurar el contenido.
vine por plata y encontre oro
HTML es un lenguaje de marcación que sirve para definir el contenido de las páginas web. Se compone en base a etiquetas, también llamadas marcas o tags, con las cuales conseguimos expresar las partes de un documento, cabecera, cuerpo, encabezados, párrafos, etc. En definitiva, el contenido de una página web.
HTML es el primer lenguaje que debe aprender cualquier persona interesada en construir un sitio web. A partir del HTML podemos pasar a muchos otros lenguajes interesantes que sirven para hacer cosas diversas y más avanzadas. Es decir, sea cual sea la tecnología, herramienta o gestor de contenido que nos hayamos propuesto aprender, o que tengamos que usar en nuestro día a día, HTML siempre será el lenguaje en el que toda web se construye y, por tanto, es de obligado conocimiento para todos.
Aprender HTML es sencillo. En pocos días o semanas serás capaz de entender y usar las etiquetas más comunes y componer documentos HTML (páginas web) correctas. Aquí en Platzi, encontrarás muchas ayudas para poder dar esos primeros pasos y luego profundizar en cualquier área que necesites.
¿Qué debo saber de HTML?
Lo básico, entender qué son las etiquetas y cómo usarlas de forma correcta. Saber que con HTML se crea ese primer esqueleto de nuestra página web. Sus etiquetas principales son:
\ \
\<header> \<body> \
\ \![]()
\<footer>
Es importante saber que no todas las etiquetas tienen etiqueta de cierre.
Como dijo el profe, existen muchas más etiquetas de HTML, en la siguiente página encuentras todas: https://htmlreference.io/
HTML es el componente más básico de la Web. Define el significado y la estructura del contenido web. Además de HTML, generalmente se utilizan otras tecnologías para describir la apariencia/presentación de una página web (CSS) o la funcionalidad/comportamiento (JavaScript).
Perfecta aplicación del michi dentro de la página de ejemplo.
amo sus clases me mantienen concentrado siempre
Les comparto mi estructura inicial para codigo de HTML5.
``
`<html lang="en">`
`<head>`
` <meta charset="UTF-8">`
` <meta name="description" content="Wordpress y No-code">`
` <meta name="robots" content="index,follow">`
` <meta name="viewport" content="width=device-width, initial-scale=1.0">`
` <meta http-equiv="X-UA-Compatible" content="ie=edge">`
` <title>Page no-code</title>`
` <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">`
` <link rel="icon" href="./image (1).ico">`
` <link rel="stylesheet" href="./style.css"/>`
`</head>`
`<body>`
` <header></header>`
` <main></main>`
` <footer></footer>`
` <script src="https://kit.fontawesome.com/168bdb3bf5.js" crossorigin="anonymous"></script>`
` <script src="./codigo.js"></script>`
`</body>`
`</html>`
Super didactico. Felicitaciones!!!
se escucha muy mal el audio, saturado
Los michis son chidos.
Esa explicación fue tan divertida y dinámica jajaja. Más clases así por favor
Que agradable explicación.
hyper text markup lenguage
Que genial, este curso sale de lo usual que es proyectar una presentación y lo hace interesante!
me encantan las explicaciones asi!
vamo a calmarno jajjaja
El profe es excelente, explica todo de una forma super sencilla! me encanta ! 😃
Excelente!
Entonces, para comenzar, HTML (Hypertext Markup Language) es un lenguaje de marcado que se utiliza para crear y estructurar el contenido de una página web. La idea detrás de HTML es agregar marcadores o “tags” al texto para indicar cómo se debe mostrar el contenido en un navegador web.
En HTML, las etiquetas se utilizan para definir los diferentes elementos de una página web, como encabezados, párrafos, listas, enlaces, imágenes y tablas, entre otros. Cada etiqueta se escribe entre corchetes angulares ("<" y “>”) y puede incluir uno o más atributos, que se utilizan para definir características adicionales de la etiqueta.
A continuación, mencionaré algunas de las etiquetas más importantes en HTML:
- <html>: Define el inicio y fin del documento HTML.
- <head>: Define la sección de encabezado del documento, que incluye información como el título de la página, meta tags y enlaces a archivos CSS y JavaScript.
- <body>: Define el cuerpo del documento, donde se coloca el contenido visible de la página.
- <h1> - <h6>: Define los seis niveles de encabezado, con <h1> siendo el nivel más alto y <h6> el nivel más bajo.
- <p>: Define un párrafo de texto.
- <a>: Define un enlace a otra página web o a una sección dentro de la misma página.
- <img>: Define una imagen en la página web, con atributos como “src” para la URL de la imagen y “alt” para el texto alternativo en caso de que la imagen no se pueda cargar.
En cuanto a los atributos, estos se utilizan para agregar información adicional a una etiqueta, como el tamaño de una imagen o el destino de un enlace. Algunos ejemplos de atributos comunes son:
- “src”: Utilizado en la etiqueta <img> para especificar la URL de la imagen.
- “href”: Utilizado en la etiqueta <a> para especificar la URL a la que debe dirigirse el enlace.
- “class”: Utilizado en cualquier etiqueta para especificar una o varias clases CSS que se aplicarán a la etiqueta.
- “id”: Utilizado en cualquier etiqueta para identificarla de manera única en la página, lo que facilita la selección de esa etiqueta con CSS o JavaScript.
Hola comparto el resumen de la clase.
Entonces, para comenzar, HTML (Hypertext Markup Language) es un lenguaje de marcado que se utiliza para crear y estructurar el contenido de una página web. La idea detrás de HTML es agregar marcadores o “tags” al texto para indicar cómo se debe mostrar el contenido en un navegador web.
En HTML, las etiquetas se utilizan para definir los diferentes elementos de una página web, como encabezados, párrafos, listas, enlaces, imágenes y tablas, entre otros. Cada etiqueta se escribe entre corchetes angulares ("<" y “>”) y puede incluir uno o más atributos, que se utilizan para definir características adicionales de la etiqueta.
A continuación, mencionaré algunas de las etiquetas más importantes en HTML:
- <html>: Define el inicio y fin del documento HTML.
- <head>: Define la sección de encabezado del documento, que incluye información como el título de la página, meta tags y enlaces a archivos CSS y JavaScript.
- <body>: Define el cuerpo del documento, donde se coloca el contenido visible de la página.
- <h1> - <h6>: Define los seis niveles de encabezado, con <h1> siendo el nivel más alto y <h6> el nivel más bajo.
- <p>: Define un párrafo de texto.
- <a>: Define un enlace a otra página web o a una sección dentro de la misma página.
- <img>: Define una imagen en la página web, con atributos como “src” para la URL de la imagen y “alt” para el texto alternativo en caso de que la imagen no se pueda cargar.
En cuanto a los atributos, estos se utilizan para agregar información adicional a una etiqueta, como el tamaño de una imagen o el destino de un enlace. Algunos ejemplos de atributos comunes son:
- “src”: Utilizado en la etiqueta <img> para especificar la URL de la imagen.
- “href”: Utilizado en la etiqueta <a> para especificar la URL a la que debe dirigirse el enlace.
- “class”: Utilizado en cualquier etiqueta para especificar una o varias clases CSS que se aplicarán a la etiqueta.
- “id”: Utilizado en cualquier etiqueta para identificarla de manera única en la página, lo que facilita la selección de esa etiqueta con CSS o JavaScript.
En resumen, para utilizar HTML de manera efectiva, es importante conocer las etiquetas principales y los atributos más comunes para poder estructurar y dar formato al contenido de una página web.
La verdad es que HTML me pare sencillo pero es cuestión de practica! para manejarlo mejor ya que hay cosas que aun se me van y no entiendo del todo jeje
Que nivel de profesor. Mil gracias.
HTML son etiquetas. Existe literalmente una etiqueta para lo que usted quiera.
una estructura a una página web, con puras etiquetas. Head, tenemos contenido, y tenemos pie de página (footer).
atributos. Y también hay etiquetas que no necesitan tener contenido. etiquetas que se cierran por si solas.
Tenemos etiquetas para texto, un encabezado, el cuerpo del documento, título, etiquetas genéricas, imágenes, un pie de página, etc.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?