Select Page

INTRODUCCION HTML Y CSS

“CREA TU PRIMERA PÁGINA WEB DESDE CERO”

Aprender HTML y CSS no solo es esencial para cualquier desarrollador web, sino que también forma la base para tecnologías más avanzadas como JavaScript, React, o frameworks de backend como Django o Flask. Dominar estas herramientas te permitirá:

  • Crear prototipos rápidamente.
  • Comprender cómo interactúan el frontend y el backend.
  • Trabajar eficientemente en proyectos colaborativos.

Además, con el auge del diseño centrado en el usuario, tener una buena base en HTML y CSS te ayudará a construir interfaces atractivas y funcionales.

  HTML

HTML (HyperText Markup Language) es el lenguaje que usamos para construir la estructura de una página web. Piensa en HTML como el esqueleto de una casa: define qué elementos existen (títulos, párrafos, imágenes, botones) y cómo están organizados.

HTML consiste en una serie de elementos, que utiliza para encerrar, envolver o marcar diferentes partes del contenido para que aparezca o actúe de cierta manera. Las etiquetas pueden convertir el contenido en un hipervínculo para conectarse a otra página, poner palabras en cursiva, etc. Por ejemplo, considere la siguiente línea de texto: 

Mi gato es muy gruñón

Si quisiéramos que el texto se mantuviera solo, podríamos especificar que es un párrafo encerrándolo en un elemento de párrafo (<p>):

<p>Mi gato es muy gruñón</p>

Notas: Las etiquetas en HTML no distinguen entre mayúsculas y minúsculas. Esto significa que se pueden escribir en mayúsculas o minúsculas. Por ejemplo, una etiqueta <title> podría escribirse como <title>, <TITLE>, <Title>, <TiTlE>, etc., y funcionará. Sin embargo, es una buena práctica escribir todas las etiquetas en minúsculas para mayor coherencia y legibilidad.

Estructura basica HTML
  • <html> indica el inicio del documento HTML.
  • <head> contiene información meta, como el título y enlaces a otros recursos.
  • <body> contiene el contenido visible de la página.

 

Anatomía de HTML

La anatomía de nuestro elemento es:

  • La etiqueta de apertura: Consiste en el nombre del elemento (en este ejemplo, p para el párrafo), envuelto en corchetes angulares de apertura y cierre. Esta etiqueta de apertura marca dónde inicia o comienza a surtir efecto el elemento. En este ejemplo, precede al inicio del texto del párrafo.
  • El contenido: Este es el contenido del elemento. En este ejemplo, es el texto del párrafo.
  • La etiqueta de cierre: Esta es la misma que la etiqueta de apertura, excepto que incluye una barra diagonal delante del nombre del elemento. Esto marca donde termina el elemento. No incluir una etiqueta de cierre es un error común para principiantes que puede producir resultados peculiares.

El elemento es la etiqueta de apertura, seguida del contenido, seguida de la etiqueta de cierre.

¿Qué son los elementos HTML?

El elemento normalmente comienza con una etiqueta de apertura, la cual consiste en el nombre del elemento. Se rodean (Es contenida) por corchetes angulares de apertura y cierre. La etiqueta de apertura indica dónde comienza el elemento.

De igual manera que la etiqueta de apertura, la etiqueta de cierre también está contenida por corchetes angulares de apertura y cierre. Pero también incluye una barra antes del nombre del elemento.

Todo lo que está dentro de las etiquetas de apertura y cierre es el contenido.

Pero no todos los elementos siguen este patrón. Les decimos elementos vacíos a aquellos que no siguen este patrón. Estos únicamente consisten en una etiqueta simple o una etiqueta de apertura que no puede tener ningún contenido. Estos elementos se utilizan normalmente para insertar algo en el documento.

Por ejemplo, el elemento <img> es utilizado para insertar un archivo de imagen, o el elemento <input> es utilizado para insertar un campo de datos en la página.

<img src="https://images.unsplash.com/photo-1610447847416-40bac442fbe6" width="50">

Como anidar elementos HTML

<div class="my-list">
  <h4>My list:</h4>

  <ul>
     <li>Apple</li>
     <li>Orange</li>
     <li>Banana</li>
  </ul>
</div>

Los elementos pueden ser colocados dentro de otros elementos. Esto se llama Anidamiento. En el ejemplo de arriba, dentro del elemento <div> tenemos un elemento <h4> y un elemento <ul> o elemento de lista no ordenado. De manera similar dentro del elemento <ul> hay 3 elementos <li> o elemento de lista.

El anidamiento básico es bastante sencillo de entender. Pero cuando la página crece, el anidamiento puede complicarse.

Por lo tanto, antes de trabajar con HTML, piensa sobre la estructura de diseño que te gustaría tener. Puedes dibujarla en un papel o en tu mente. Será de mucha ayuda.

Atributos HTML

Los elementos también tienen atributos que contienen información adicional acerca del elemento que no aparecerá en el contenido.
<img src="https://images.unsplash.com/photo" width="50">

Elementos comunes HTML

Elementos de sección
<div>, <span>, <header>, <footer>, <nav>, <main>, <section>

Estos elementos se utilizan para organizar el contenido en diferentes secciones. Por lo general son muy obvios, por ejemplo<header> representa a un grupo de la sección de introducción y navegación, <nav> representa la sección que contiene los enlaces de navegación, etcétera.

Contenido de texto

<h1> to <h6>, <p>, <div>, <span>, <ul>, <ol>, <li>

Estos elementos se utilizan para organizar contenido o bloques de texto. Son importantes para la accesibilidad y posicionamiento en buscadores (SEO). Estos le comunican al navegador el propósito o estructura del contenido.

Formularios

form>, <input>, <button>, <label>, <textarea>

Estos elementos pueden utilizarse juntos para crear formularios que los usuarios pueden completar y enviar. Los formularios pueden ser la parte más complicada de HTML.

Imagenes y  enlaces

 <img>, <a>

Estos elementos se utilizan para insertar una imagen o crear un hipervínculo.

Otros

 <br>, <hr>

Estos elementos se utilizan para agregar un quiebre a la página web.

Puedes encontrar todos los elementos en developer.mozilla.org. Pero para principiantes, sólo necesitas conocer los más comunes o esta página explica crear encabezados, secciones o una pagina basica fredeCodeCamp

Continuar

INTRODUCCION HTML Y CSS

“CREA TU PRIMERA PÁGINA WEB DESDE CERO”

Aprender HTML y CSS no solo es esencial para cualquier desarrollador web, sino que también forma la base para tecnologías más avanzadas como JavaScript, React, o frameworks de backend como Django o Flask. Dominar estas herramientas te permitirá:

  • Crear prototipos rápidamente.
  • Comprender cómo interactúan el frontend y el backend.
  • Trabajar eficientemente en proyectos colaborativos.

Además, con el auge del diseño centrado en el usuario, tener una buena base en HTML y CSS te ayudará a construir interfaces atractivas y funcionales.

  HTML

HTML (HyperText Markup Language) es el lenguaje que usamos para construir la estructura de una página web. Piensa en HTML como el esqueleto de una casa: define qué elementos existen (títulos, párrafos, imágenes, botones) y cómo están organizados.

HTML consiste en una serie de elementos, que utiliza para encerrar, envolver o marcar diferentes partes del contenido para que aparezca o actúe de cierta manera. Las etiquetas pueden convertir el contenido en un hipervínculo para conectarse a otra página, poner palabras en cursiva, etc. Por ejemplo, considere la siguiente línea de texto: 

Mi gato es muy gruñón

Si quisiéramos que el texto se mantuviera solo, podríamos especificar que es un párrafo encerrándolo en un elemento de párrafo (<p>):

<p>Mi gato es muy gruñón</p>

Notas: Las etiquetas en HTML no distinguen entre mayúsculas y minúsculas. Esto significa que se pueden escribir en mayúsculas o minúsculas. Por ejemplo, una etiqueta <title> podría escribirse como <title>, <TITLE>, <Title>, <TiTlE>, etc., y funcionará. Sin embargo, es una buena práctica escribir todas las etiquetas en minúsculas para mayor coherencia y legibilidad.

Estructura basica HTML
  • <html> indica el inicio del documento HTML.
  • <head> contiene información meta, como el título y enlaces a otros recursos.
  • <body> contiene el contenido visible de la página.

 

Anatomía de HTML

La anatomía de nuestro elemento es:

  • La etiqueta de apertura: Consiste en el nombre del elemento (en este ejemplo, p para el párrafo), envuelto en corchetes angulares de apertura y cierre. Esta etiqueta de apertura marca dónde inicia o comienza a surtir efecto el elemento. En este ejemplo, precede al inicio del texto del párrafo.
  • El contenido: Este es el contenido del elemento. En este ejemplo, es el texto del párrafo.
  • La etiqueta de cierre: Esta es la misma que la etiqueta de apertura, excepto que incluye una barra diagonal delante del nombre del elemento. Esto marca donde termina el elemento. No incluir una etiqueta de cierre es un error común para principiantes que puede producir resultados peculiares.

El elemento es la etiqueta de apertura, seguida del contenido, seguida de la etiqueta de cierre.

¿Qué son los elementos HTML?

El elemento normalmente comienza con una etiqueta de apertura, la cual consiste en el nombre del elemento. Se rodean (Es contenida) por corchetes angulares de apertura y cierre. La etiqueta de apertura indica dónde comienza el elemento.

De igual manera que la etiqueta de apertura, la etiqueta de cierre también está contenida por corchetes angulares de apertura y cierre. Pero también incluye una barra antes del nombre del elemento.

Todo lo que está dentro de las etiquetas de apertura y cierre es el contenido.

Pero no todos los elementos siguen este patrón. Les decimos elementos vacíos a aquellos que no siguen este patrón. Estos únicamente consisten en una etiqueta simple o una etiqueta de apertura que no puede tener ningún contenido. Estos elementos se utilizan normalmente para insertar algo en el documento.

Por ejemplo, el elemento <img> es utilizado para insertar un archivo de imagen, o el elemento <input> es utilizado para insertar un campo de datos en la página.

<img src="https://images.unsplash.com/photo-1610447847416-40bac442fbe6" width="50">

Como anidar elementos HTML

<div class="my-list">
  <h4>My list:</h4>

  <ul>
     <li>Apple</li>
     <li>Orange</li>
     <li>Banana</li>
  </ul>
</div>

Los elementos pueden ser colocados dentro de otros elementos. Esto se llama Anidamiento. En el ejemplo de arriba, dentro del elemento <div> tenemos un elemento <h4> y un elemento <ul> o elemento de lista no ordenado. De manera similar dentro del elemento <ul> hay 3 elementos <li> o elemento de lista.

El anidamiento básico es bastante sencillo de entender. Pero cuando la página crece, el anidamiento puede complicarse.

Por lo tanto, antes de trabajar con HTML, piensa sobre la estructura de diseño que te gustaría tener. Puedes dibujarla en un papel o en tu mente. Será de mucha ayuda.

Atributos HTML

Los elementos también tienen atributos que contienen información adicional acerca del elemento que no aparecerá en el contenido.
<img src="https://images.unsplash.com/photo" width="50">

Elementos comunes HTML

Elementos de sección
<div>, <span>, <header>, <footer>, <nav>, <main>, <section>

Estos elementos se utilizan para organizar el contenido en diferentes secciones. Por lo general son muy obvios, por ejemplo<header> representa a un grupo de la sección de introducción y navegación, <nav> representa la sección que contiene los enlaces de navegación, etcétera.

Contenido de texto

<h1> to <h6>, <p>, <div>, <span>, <ul>, <ol>, <li>

Estos elementos se utilizan para organizar contenido o bloques de texto. Son importantes para la accesibilidad y posicionamiento en buscadores (SEO). Estos le comunican al navegador el propósito o estructura del contenido.

Formularios

form>, <input>, <button>, <label>, <textarea>

Estos elementos pueden utilizarse juntos para crear formularios que los usuarios pueden completar y enviar. Los formularios pueden ser la parte más complicada de HTML.

Imagenes y  enlaces

 <img>, <a>

Estos elementos se utilizan para insertar una imagen o crear un hipervínculo.

Otros

 <br>, <hr>

Estos elementos se utilizan para agregar un quiebre a la página web.

Puedes encontrar todos los elementos en developer.mozilla.org. Pero para principiantes, sólo necesitas conocer los más comunes o esta página explica crear encabezados, secciones o una pagina basica fredeCodeCamp

Continuar
Agrega tu comentario