Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Etiquetas de HTML más usadas

6/23
Recursos

Aportes 105

Preguntas 26

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

¡Qué emocionante! Me encanta porque en esta clase podemos ver cómo la profesora usa HTML para poner básicamente cualquier cosa que ella quiera poner 🤩.
.
Es así de fácil, simplemente le dices qué quieres poner y HTML lo hará 🥳. Otras etiquetas que también suelen ser muy usadas son estas:
.

  • <b>: Pone tu texto en negritas (pero esta etiqueta NO tiene sentido semántico).
  • <strong>: También pone tu texto en negrita, pero esta SÍ tiene sentido semántico (Google le da relevancia al texto que pongas ahí).
  • <i>: Pone tu texto en cursivas (pero esta etiqueta NO tiene sentido semántico).
  • <em>: También pone tu texto en cursivas, pero esta SÍ tiene sentido semántico (Google le da relevancia al texto que pongas ahí).
  • <br>: Hace un salto de línea, funciona como si diéramos un enter con el teclado 😄.

.
Realmente no hace falta que te sientes a estudiarlas y memorizarlas y aprendértelas, como dijo la profesora, con la práctica y a medida que creas páginas web te las acabarás aprendiendo sí o sí jaja.
.
PD. ¡Michis are awesome! OwO

Todas las etiquetas del HTML con aspecto de tabla periódica de los elementos. 😃
https://allthetags.com

Que no se les olvide esta cheatsheet 😌.

En el Layout también se usa <main>contenido principal</main>.

Mi aporte de la clase:

Llevo meses literal estudiando programación y con está explicación de Teff por fin pude acomodar en mi cabeza bien para que sirve cada etiqueta, estoy muy feliz 🥺

Les comparto mis apuntes. 😄

Layout

Cuando hablamos de layout estamos hablando del diseño de nuestra página.

Las etiquetas que utilizamos aquí son la base en donde van a ir todo el contenido.

Enlaces

Vamos a poder colocar diferentes links o enlaces para que el usuario le dé click o tap y que nos redirija hacia otro lugar.

Textos

h1…h6

Nos indica la importancia de diferentes textos desde el más importante (h1) hasta el menos importante (h6).

p

Lo usamos para estructurar párrafos.

span

Semánticamente no tiene ningún significado al igual que div, es un comodín, pero nos ayuda diferenciar cierto texto dentro de un párrafo.

Formularios

form

Es el lugar donde va a ir todo nuestro formulario.

input

Hay muchos tipos de inputs.

label

Es el texto que nos indica que tenemos que hacer con cierto input en particular.

button

Nos permite enviar los formularios y hacen parte de otras partes de nuestra página si queremos.

Otros apuntes

Curso Definitivo de HTML y CSS

Clases

Index y su estructura básica: head

Index y su estructura básica: body

Anatomía de una etiqueta de HTML

Módulo

Formularios

¿Cuáles son las etiquetas HTML básicas?
Hay una serie de etiquetas que son las más usadas para crear cualquier documento HTML, a continuación las explicamos:

  • <body> para el contenido
  • <head> para información sobre el documento
  • <div> división dentro del contenido
  • <a> para enlaces
  • <strong> para poner el texto en negrita
  • <br> para saltos de línea
  • <H1>…<H6> para títulos dentro del contenido
  • <img> para añadir imágenes al documento
  • <ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la lista
  • <p> para parágrafos
  • <span> para estilos de una parte del texto

No quemen el div, recuerden que existen otras etiqueas que son especificas para algunas cosas y les va a ayudar con el SEO

Qué éxito esta clase, ya me siento programador, yo sé que obvio no, pero es muy gratificante como puedes ir creando.

Una documentación que se usa bastante es la de MDN, te explica todo referente a HTML, CSS y JS.
Link del HTML reference de MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

💡 Les recomiendo este artículo para complementar:
44 etiquetas HTML que debes conocer
😄

Les dejo todas las etiquetas que les eran de ayuda

Comparto un PDF con etiquetas HTML, no se compliquen HTML es abrir y cerrar etiquetas (por explicarlo de una manera sencilla) solo tienes que saber para qué sirve cada una y dónde van, eso es todo. Espero que esto ayude: https://www.brandominus.com/manuales/manual_html5.pdf

Les recomiendo que cuando quieran saber a detalle para que sirve y como se usa una etiqueta vayan a esta pagina:

(https://www.w3schools.com/tags/default.asp)

Esta en ingles, pero pueden usar el traductor, además es muy completa y sirve también para aprender CSS y otros lenguajes de programación.

Etiquetas HTML mas usadas =>

LAYOUT =>
-header
-nav
-section
-article
-aside
-footer

ENLACES =>
-a

TEXTOS =>
-h1…h6
-p
-span

IMAGENES Y VIDEOS =>

-img
-svg
-iframe
-videos

FORMULARIOS =>
-formularios
-input
-label
-button

LISTAS =>
-ul
-li
-ol

Me parece EXCELENTE que una chica este orientando este curso ya que el 90% de los instructores son hombres; además, tiene buena didáctica. Gracias señorita

Yo me llamo Roberto 😃

Les comparto unas tablas en donde podrán visualizar etiquetas HTML en español.🛠

https://i.emezeta.com/weblog/html5-cheatsheet/html5-cheatsheet-emezeta.pdf

Etiquetas HTML más usadas

Layout: El diseño de toda nuestra página. El que nos da la estructura principal de nuestro documento, es el esqueleto dónde van a ir los elementos

  • Header
  • Nav
  • Section
  • Article
  • Aside
  • Footer

Enlances: Acá ponemos diferentes enlaces que nos permita redirigir a otro sitio web o a otra página, etc

  • a

Textos:

  • h1… h6 Podemos poner hasta el más importante que es el h1 hasta el menos importante que esl h6
  • p Esto nos ayuda a estructurar nuestro parrafos
  • span No tiene ningún significado ni ningún sentido pero nos ayuda a escribir y estilizar esos pequeños textos de ese parrafo principal

Imagenes y video:

  • img
  • svg
  • iFrame
  • video

Formularios:

  • Form La estrucutra inicial donde irá tu formulario
  • Input Varios tipos de input, puede ser de tipo texto que podamos escribir un texto dentro, o si queremos un check box que es cuando podemos seleccionar, etc
  • Label El titulo del input en particular
  • Button Nos permiten enviar nuestro formulario, pueden estar en cualquier parte pero la incuyeron acá

Listas: Escribir listas ordenadas o no ordenadas y li es para escribir la información de esa lista

  • ul
  • li
  • ol

Sinceramente necesitaba este curso.

gracias por los aportes ya que sitios como el compartido nos ayuda y nos sirve como material de apoyo

HTML 5 también da recursos para crear tus propias etiquetas

¡Excelente metodología!. #Estefany Aguilar
metodología EstefAg. breve resumen con una brillante explicación.

Genial esta clase, recorde unas cositas de prog basica y le coloque color de fondito y a las letras sin usar CSS. porque eso aun no lo sé jej 😃

Si alguien mas al igual que yo viene tomando la escuela de desarrollo web en orden, no te de miedo desde ya empezar a usar git y GitHub, sinceramente es fácil y emociona ver como se va alimentando el repositorio allí.

Hola a todos, si quieren profundisar en las etiquetas y ver ejemplos concretos les recomiendo esta pagina que muestra tanto HTML , CSS y JAVASCRIPT

https://www.w3schools.com

Otra web para descargar buenas imágenes es: https://unsplash.com/

excelente pagina recomendó

Muy bien clasificadas las etiquetas, sin duda son más usadas en desarrollo web

El div que utliza para las imagenes no se puede cambiar <article> si esta en un section? o utlizar <figure>
no se utiliza si utliza es semantico no es semantico???

Interesante artículo: 44 etiquetas HTML que debes conocer link

En mi caso agregaría estas etiquetas para la semántica de la imagen

<figure>
        <h1>Cute cat</h1>
        <img src="https://images.unsplash.com/photo-1582461198261-b655abb99f81?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
            alt="cat image">
        <figcaption>Sleepy cat</figcaption>
    </figure>

http://htmlreference.io/

Al momento de utilizar la etiquetas <h1> es importante por temas de posicionamiento solo utilizar una en nuestra pagina web

excelente recurso de las etiquetas

¡¡Magnífico!! Muy buena explicación. Clara y contundente. Gracias.

Clasificación de las etiquetas mas usadas por grupos.

Dejo este articulo de Freecodecamp donde también explican el uso de las principales etiquetas de HTML https://www.freecodecamp.org/news/html-cheat-sheet-html-elements-list-reference/

Excelente clase, no tenía conocimiento sobre la página de htmlreference, sin duda esta será de gran ayuda!

como consejo en el caso de insertar o hacer uso de imágenes, es una mejor practica usar la etiqueta figure antes de div para envolver la imagen, además que proporciona opciones que ayudaran mucho en seo.

Dejaré mis apuntes de esta clase que me dejó así 🤯🤯 ** ¡Excelente clase!**
https://drive.google.com/file/d/18k4QDk0HefWtKTwOwNBkUE0ZzBeN_3PP/view?usp=sharing

En realidad creo que la forma de explicar este tema ha sido muy amena, Gracias

A practicar con estas etiquetas 😃

Les dejo mi código con un regalito al final ^^

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Etiquetas</title>
</head>
<body>
    <nav>
        <ul>
            <li>about us</li>
            <li>contact us</li> 
        </ul>
    </nav>
    <section>
        <div>
            <img src="https://images.pexels.com/photos/1314550/pexels-photo-1314550.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="cat">
        </div>
        <div>
            <h1>Cats</h1>
            <p>Cats are awesome</p>
        </div> 
    </section>
    <form action="">
        <label for="name">Escribe el nombre del gatito uwu</label>
        <input type="text" id="name"> 
    </form>
    <a href="https://youtu.be/dQw4w9WgXcQ">Pincha aquí y te llevará una dimensión de gatos ^^</a>
</body>
</html>

Me está encantado este curso, la profesora es super simpática y te invita a seguir por esta travesía. Muchas gracias miss Estefany y Platzi!

Etiquetas mas usadas en HTML

En el lenguaje de html encontramos etiquetas que identifican objetos dentro de una pagina web, estas etiquetas se pueden dividir en subgrupos que permitirán estructurar y dar un boceto el cual dibujara la pagina web.

dentro de estos sub grupos encontramos los siguientes sub grupos.

  • Layout.

    estas etiquitas están directamente relacionadas para identificar las partes claves que debe tener casi toda página.

    • header <header>

      esta indica y define que se está en el encabezado de la página o de la sección.

    • nav <nav>

      es una barra que contiene los enlaces de navegacioón.

    • section <section>

      es una parte o una seccion de la página web.

    • article <article>
      es un contenedor independiente el cual puede estar en cualquier contexto o ubicación. esta puede también tener header, foother y otras secciones.

    • aside <aside>

      es un bloque que usualmente se usa para dar información relacionada con el contenido principal, y usualmente tiene una barra de desplazamiento.

    • footer<footer>

      esta representa el pie de la página web.

  • Enalces.

    • Anchor <a>

      esta etiqueta es con la que se crean los enlaces hacia otras secciones o recursos que tenga el sitio web.

  • textos.

    • h1, h2, h3, h4, h5, h6.

      el numero identifica el nivel de importancia, en el caso de 1 que es el mas importante ya que este es que indica o da una descripción de la página o el sitio web. esta etiqueta h1 es usada por los agentes para identificar el contenido. google usa esta etiqueta para identificar el contenido de esta página.

      importacia etiqueta h1

    • p <p>

      identifica un párrafo simple.

    • span <span>

      define una línea genérica de texto la cual no afecta la semántica de la pagina web.

  • imágenes y videos.

    • img <img>

      identifica un objeto de tipo imagen el cual es insertado en la página.

    • svg <img>

      es un leguaje basado en XML para describir imágenes vectoriales.

    • iframe <img>

      es un contenedor que tiene un contexto de búsqueda. en el que se puede incluir aun otra pagina web.

    • video <img>

      esta etiqueta pone la ubicación y los controles para poner un video en una pagina web.

  • formularios.

    • form <form>

      define una sección de la página web que contiene un formulario interactivo. el cual también tiene controles

    • input <input>

      el input es una caja la cual se usa para almacenar información, es un control que se encuentra en una página.

    • label <label>

      es una etiqueta la cual informa del contexto al usuario.

    • button <button>

      esta pone el botón para realizar acciones indicadas por el usuario.

  • listas.

    • ul <ul>

      esta define una lista desordenada, no la enumera del 1 al que sea.

    • ol <ol>

      es una lista ordenada numericamente.

    • li <li>

      es una lista de items.

.

Tengo cierto conocimiento sobre el desarrollo web, por lo tanto también conozco acerca de HTML. Pero es super común que utilice muchos divs en cada una de las vistas de los sitios web que he creado. Ahora parare de hacerlo tanto 😂

hola

Desde powershell como hago para crear un new file. Me funciona el mkdir pero creo un folder no un file

Si no hay que aprendérselas todas. Con la practica y la experiencias quedaran en nuestras mentes para los planes que teníamos.

pueden descargar live server para que la pagina se refresque sola cada vez que hagas un cambio, lo haces en las extensiones en los iconos de cuatro cuadros.

LISTADO ETIQUETAS HTML
A continuación voy a indicarte cuales son las etiquetas HTML más usadas y también te indicaré su finalidad. Voy a centrarme en las principales etiquetas y sobre todo las que están soportadas en HTML 5. Ahí van:
ETIQUETAS INICIALES O DE RAÍZ

<!DOCTYPE html> Indica al navegador que el documento está basado en el estándar HTML5
<html> </html> Representa la raíz de un documento HTML. Todos los demás elementos de la estructura HTML deben ser recogidos dentro de estas etiquetas.

METADATOS DEL DOCUMENTO

<head> </head> Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo. El resto de etiquetas de metadatos, irán recogidas dentro de las etiquetas de apertura y cierre del head. Importante explicar que estos metadatos del documento, es información para el navegador y no contenido que será visible en la página web. A excepción de la etiqueta <title> que veremos a continuación.
<title> </title> Etiqueta usada para definir el título de la página web.
<link> Se usa para enlazar recursos externos al documento HTML. El ejemplo más común son las hojas de estilos CSS.
<meta> Etiqueta usada para definir otros metadatos que no se pueden definir con una etiqueta HTML especifica. Por ejemplo para definir el autor del sitio, o la descripción del mismo.
<style> </style> Etiquetas usadas para introducir código CSS en línea, es decir, en el propio documento HTML.

ETIQUETAS DE SECCIONES O PARA ESTRUCTURAR EL HTML

<body> </body> Al contrario que la etiqueta de metadatos <head>, todo lo que quieras mostrar en la página web debe ir recogido dentro de las etiquetas de apertura y cierre de <body>. Este contenido será el que se muestre en la web.
<nav> </nav> Usadas para definir el contenido que será la sección de navegación de la web.
<main> </main> Se usa para definir el contenido principal del documento. Solamente puede existir uno por documento.
<section> </section> Define una sección del documento
<article> </article> Define contenido independiente de la web.
<aside> </aside> Dentro de estas etiquetas suele alojarse el contenido adicional de la web. Suele ser contenido relacionado con la web pero de poca importancia
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Son etiquetas HTML muy importantes, ya que son usadas para jerarquizar el contenido de la web. Las etiquetas se usan para explicar brevemente el contenido que irá a continuación.
<header> </header> Se usan para definir la cabecera la página web. Suele contener el logotipo, menú de navegación, etc.
<footer> </footer> Usadas para definir el pie de página.

ETIQUETAS PARA LA AGRUPACIÓN DE CONTENIDO

<p> </p> Etiqueta usada para escribir párrafos de texto.
<hr> Etiqueta utilizada para «romper» entre dos secciones de una web. Usada comúnmente como separador.
<pre> </pre> Usada para pegar texto manteniendo el pre formato propio del texto.
<blockquote> </blockquote> Se usan para indicar que el contenido es texto citado.
<ol> </ol> Etiquetas para crear una lista ordenada
<ul> </ul> Etiquetas para crear una lista des-ordenada
<li> </li> Etiquetas que recogen el contenido de un elemento de una lista, sea ordenada o no.
<dl> </dl> Usada para crear una lista de definiciones.
<dt> </dt> Representa un término definido por la siguiente etiqueta <dd>
<dd> </dd> Se usa para definir los términos listados antes que él.
<figure> </figure> Indica una figura ilustrada como parte del documento HTML5.
<figcaption> </figcaption> Utilizada para definir la leyenda de una figura.
<div> </div> Etiqueta común utilizada para crear un contenedor genérico.
Complementa este listado de etiquetas con nuestro listado de todos los atributos HTML que existen.

ETIQUETAS SEMÁNTICAS PARA TEXTO

<a> </a> Etiqueta utilizada para crear hiperenlaces en el documento HTML
<strong> </strong> Etiqueta para definir una palabra o conjunto de ellas como importantes. Tiene una fuerte importancia en el SEO de la página.
<small> </small> Utilizada para dejar un comentario aparte, del tipo una nota de derechos de autoría, u otros textos que no son esenciales para la comprensión del documento.
<cite> </cite> Para indicar el título de una obra
<sub> </sub> y <sup> </sup> Etiquetas utilizadas para representar un subíndice o superíndice.
<mark> </mark> Usada para resaltar texto
<span> </span> Etiqueta HTML sin ningún significado específico. Se usa conjuntamente con los atributos «class» o «id» para atribuirle ciertas características.
<br> Etiqueta utilizada para crear un salto de línea

ETIQUETAS PARA INCRUSTAR CONTENIDO

<img> Etiqueta para «pintar» una imagen en la página web.
<iframe> </iframe> Es una etiqueta que sirve para anidar otro documento HTML dentro del documento principal.
<embed> Usada para integrar una aplicación o contenido interactivo externo que no suele ser HTML.
<object> </object> Utilizada llamar a un recurso externo de la web. Este recurso será tratado como una imagen, o un recurso externo para ser procesado por un plugin.
<video> </video> Se usa para reproducir video en la página web junto a sus archivos de audio y capciones asociadas.
<audio> </audio> Usada para cargar un archivo de audio o stream de audio.
<source> Permite a autores especificar recursos multimedia alternativos para las etiquetas de <video> o <audio>
<svg> </svg> Se usa para llamar a una imagen vectorizada.>

TIQUETAS PARA LA CREACIÓN DE TABLAS

<table> </table> Etiquetas de apertura y cierre de una tabla. El resto de etiquetas de la tabla han de ir siempre recogidas entre estas dos etiquetas.
<caption> </caption> Usada para indicar el título de la tabla.
<colgroup> </colgroup> Etiqueta utilizada para agrupar dos o más columnas de una tabla.
<tbody> </tbody> Usada para describir los datos concretos de una tabla.
<thead> </thead> Indica el bloque de filas que describen las etiquetas de las columnas de la tabla.
<tfoot> </tfoot> Indica los bloques de filas que describen los resúmenes, o datos totales de una columna de una tabla.
<tr> </tr> Se usa para indicar una fila de celdas de una tabla.
<td> </td> Usada para definir una celda de una tabla.
<th> </th> Etiqueta que se usa para definir el encabezado de una celda

ETIQUETAS PARA LA CREACIÓN DE FORMULARIOS

<form> </form> Etiqueta de apertura y cierre de un formulario de una página web. El resto de etiquetas de formulario deben ir siempre recogidas entre estas etiquetas de apertura y cierre de formulario.
<fieldset> </fieldset> Etiqueta que representa un conjunto o agrupación de elementos de un formulario. «Pinta» un recuadro alrededor de las etiquetas que estén contenidas dentro del <fieldset>
<legend> </legend> Etiqueta ligada a <fieldset>. Indica el título del <fieldset>
<label> </label> Se usa para definir el nombre o título de un control del formulario.
<input> Pinta un campo de introducción de datos para el usuario. Es de las principales etiquetas de un formulario.
<button> </button> Etiqueta utilizada para representar un botón en el formulario.
<select> </select> Input que permite una selección entre un conjunto de opciones.
<option> </option> Etiqueta ligada a <select>. Permite añadir diferentes opciones al <select>
<textarea> </textarea> Añade un campo al usuario para que pueda introducir texto en unas líneas máximas de texto que el desarrollador puede definir.

creo que en las etiquetas más utilizadas debería estar el <main> </main>

Acabo de descubrir que puedo acceder a una imagen a través de su link y que no necesariamente debe estar en mi disco duro
.
O sea, imagino que habrán paginas que tendrán todas sus imagenes en un servidor externo y desde ahí se envian las imagenes a la web

Hay muchas etiquetas para definir la estructura de una pagina web con HTML. Sin embargo no todas se usan regularmente como las siguientes:

  • <body></body> :Se usa para definir todo el contenido que abarca nuestra pagina web.

  • <nav></nav> : La mayoria de las paginas web tienen una barra de navegacion (un menu) esta etiqueta nos va a ayudar a definir los elementos que estaran dentro de nuestro Menu.

  • <ul></ul>: Esta etiqueta indicara que se quiere iniciar una lista NO ordenada en este caso para los menus.

  • <li></li>: Esta etiqueta va a definir cada uno de los elementos de nuestra lista. (se pueden anidar p.e: <li><a href=“https://platzi.com/home”>Go platzi</a></li>)

  • <a></a>: Sirve para crear hipervinculos a otras paginas o elementos que dispongan de un url

  • <div></div>: Sirve para darle sentido a nuestra pagina y mas tarde darle un orden a los elementos de esta.

  • <img>: Sirve para poner una imagen en nuestra pagina web.

  • <Form> : Sirve para agregar elementos del tipo formulario a un sitio Web

  • Nota mental: No hay que aprenderlas como si fuera un manual , con la practica se iran quedando en nuestra memoria .

Resumen en Notion
https://acortar.link/EmP2uj

¡¡Interesante!! Las bases del desarrollo web al 100.

La importancia de las etiquetas HTML y el uso semántico que se le aplica a la hora de estructurar nuestra página o proyecto es que nuestro navegador lea la información para poder darle el peso o la importancia a cada parte que corresponde del contenido y eso es fundamental. Gran explicacion.

Extraordinario, al 100%.

Veo que la profesora refresca la página del navegador cada vez que realiza un cambio en el HTML, esto no está mal pero se puede ahorrar mucho tiempo con la extensión Live Server que se vio en el curso de Prework. Además de que es más cómodo. Acá dejo el enlace a la extensión por si no la tienes.

realmente debemos practicar y practicar, esto nos va a ayudar a consolidar todos los terminos y memorizar las etiquetas para usarlas rapidamente.

Me encanto este curso 😃

Buen curso

Son las etiquetas del HTML5 - ASIDE - NAV- SECTION- FOOTER- IFRANE - SVG entre otros.

Me encantó la clase, siento que hay más orden y estructura en cuanto al curso pasado de frontend… retomando estudios de Desarrollo Web y se siente bien entenderlo!!

Una chimba este curso!!!

Ya quiero crear el proximo facebook!
jajajaja mentiras, pero algun dia si

Muy divertida la clase

Notes:

  • Cuando hablamos de Layout nos referimos a como esta diseñada nuestra pagina
  • Las etiquetas para Layout son:
    • header
    • nav
    • section
    • article
    • aside
    • footer
  • Para los enlaces solo contamos con la etiqueta <a>
  • Para el manejo de textos contamos con las etiquetas:
    • <h1> … <h6>
    • <p>
    • <span> → No tiene peso a nivel semantico pero nos ayuda a modificar algunos textos dentro de un parrafo
  • Para las imagenes tenemos las etiquetas:
    • <img />
    • <svg />
    • <iframe />
    • <video />
  • Para las listas tenemos las etiquetas:
    • <ul>
    • <ol>
    • <li>

Es este ejemplo si no quieren poner una descripción el el parrafo, pueden utilizar el **lorem **para que se llene de texto el parrafo.

ahora si que empiece lo chido = css

Cats are awesome :3

Etiquetas mas usadas

  • Layout
  • Textos
  • Formularios
  • Enlaces
  • Imágenes y Video
  • Listas

EXPLICACIONES CON DIBUJITOS AQUÍ

Layout en html

Estructura de la etiqueta <a>…</a>

h1 h2 h3 …

aprendí a las malas como funciona 😦

<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Go to Platzi</a>

Me fascina la clase, la manera en que la profesora lo explica, y lo maravilloso que es HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Etiquetas</title>
</head>
<body>
  <header>
    <nav class="Logo">
      <a href="https://platzi.com/home/"><img src="https://upload.wikimedia.org/wikipedia/commons/3/32/Platzi.jpg" alt="Logo Platzi" height="48" width="124"></a>
    </nav>

    <nav class="navbar">
      <a href="https://platzi.com/home">Clases</a>
      <a href="https://platzi.com/blog/">Blog</a>
      <a href="https://platzi.com/foro/">Foro</a>
      <a href="https://platzi.com/agenda/">Agenda</a>
      <a href="https://platzi.com/live/">TV</a>
      <a href="https://platzi.com/precios/">Planes</a>
    </nav>
  </header>
  
  <section>
    <div id="Usuarios-platzi">
      <img src="https://imagenes.elpais.com/resizer/w3f0rtNhCb7TrZgOObkKj35725U=/414x0/filters:focal(2390x927:2400x937)/cloudfront-eu-central-1.images.arcpublishing.com/prisa/6UVLXA57BRCNDEQEONPNE6WFZE.jpg" alt="Imagen de Freddy Vega - CEO DE PLATZI">
    </div>
  </section>

  <form action="#" method="post" class="form1">
    <fieldset>
      <legend>Ingresa tu correo</legend>
      <input type="email" name="email" placeholder="Email">
      <button>Send</button>
    </fieldset>
  </form>

  <footer>
    <h5>HTML hecho por Kevin Alexander | Estudiante de Platzi </h5>
  </footer>
</body>
</html> 

Esta es la estructura que hecho yo, espero les sirva para entender mucho mejor 🙌🏻

<code></code>
<quote>

Antes consultaba W3Schools como referencia para HTML pero esta pagina es mejor

Layout

Cuando hablamos de layout hablamos del diseño de toda nuestra página, como vemos sus etiquetas son semánticas y nos proporcionan la estructura que seguirá nuestra página.

Enlaces

Aquí podremos colocar distintos enlaces para que los usuarios le den clic y puedan ser redirigidos a otras paginas

Textos

Aquí entran cosas como los headings (h1-h6) y la división de la jerarquía de dichos textos para darle más sentido a nuestro contenido.

Para elaborar un texto es tan simple como usar la etiqueta <p> y poner dentro el párrafo en cuestión.

Por último, cuando queremos darle ciertos estilos a partes específicas de los textos podemos usar la etiqueta <span>, esta no tiene un significado por si sola y nosotros escogemos como se comportará en nuestro CSS.

Imágenes y videos

Existen multiples etiquetas que pueden ser usadas para este propósito y que varían según la función o el tipo de multimedia que queramos mostrar.

Formularios

Esto es importante de dominar pues formularios hay en todos lados, nuestra etiqueta <form> será la que encapsule todo el formulario en sí y poco a poco se irán agregando el resto de etiquetas. Esto es fundamental en proyectos como Ecommerce con entregas o sencillamente un Login requiere que conozcas de formularios.

Listas

Se pueden hacer tanto listas ordenadas como no ordenadas y estas son usadas en muchas partes de un HTML, pero el lugar más común donde se encuentran es en los menús de navegación.

  1. Layout: El diseño de toda la página. Estructura base donde irán los elementos
  2. Enlaces: Para que el usuario pueda redirigrse a otros links
  3. Textos: Títulos van desde h1 hasta el h6. Los párrafos van con p, y el span no tiene ningún sentido, pero nos ayuda a escribir estilos dentro del texto.
  4. Imagenes y vídeo: Para poder insertar imagenes lo hacemos con etiqueta img. Svg es para imagenes que no perderán jamás calidad. Para los videos iframe o video
  5. Formularios: Form es el coco, el input es para definir el tipo de campo, por ejemplo texto, checkbox. Label nos pone un texto, que es para ponerle el título al input en particular, por ejemplo: Nombre completo. Finalmente el button que tendrá una acción
  6. Listas: Las etiquetas de listas son: ul para listas desordenadas y ol para listas ordenadas. Para poner los items usamos la etiqueta li

En el apartado de formulario en una sola linea de codigo utilizando solo el input mas un placeholder podremos poner el name dentro de la misma caja de texto, haciendo un diseño mas limpio aqui un ejemplo:
<form action="">
<input type=“text” name=“name” placeholder=“name”>

Cada vez me gusta mas como explica la profe

excelente explicación, me siento como cuando recién iniciaba la universidad

Me encanta la forma en que esta estructurado el curso

Me esta encantando este curso ❤️
Justo lo que necesitaba.

A mi me encanta utilizar esa herramienta que ella recomienda. htmlreference

file:///Users/luisgutierrez/Desktop/fronted_%20developer%20/etiquetas.html

Una etiqueta muy importante hoy en día por tema de performance es picture aquí dejo un ejemplo de su uso:

<picture>
 	<source srcset="michi.jpg" media="(min-width: 600px)">
 	<img src="michi_bby.jpg" alt="Michi">
</picture>

Esto nos permite traer solo la imagen que necesite nuestro usuario dependiendo de en que dispositivo nos visite (la resolución de su pantalla). En el ejemplo se carga por defecto la etiqueta img, evitando la carga de michi.jpg. En cuanto el width de la pantalla rebase los 600px se hara un request de la nueva imagen. La imagen por razones de resolución sera mas amplia y por ende en de mas tamaño (peso en Mb o Kb).