Want to create interactive content? It’s easy in Genially!

Get started free

HTML Y CSS

Javier Izair Chuc Chi

Created on November 26, 2024

Start designing with a free template

Discover more than 1500 professional designs like these:

Interactive Recipe

Interactive gallery

Artificial intelligence

Space Infographic

A visit to central park

Art infographic

Interactive Masterpiece

Explore all templates

Transcript

Los elementos básicos de HTML es lo que conforma la estructura de una página web
Existen etiquetas estructurales, de texto, de listas y hasta multimedia

LAS BASES DEL DESARROLLO WEB

CSS

HTML ofrece una variedad de elementos básicos que permiten estructurar y enriquecer las páginas web con diferentes tipos de contenido.
Cada etiqueta en html tiene un proposito específico
Esta es su estructura básica, la cual tiene una estructura jerárquica organizando el contenido en bloques anidados
Para poder estructurar y definir el contenido se utilizan "etiquetas"
HTML 5 es su versión más reciente
Originalmente se diseño para compartir documentos científicos en la web

Elementos básicos

Estructura

Se encarga de estructurar el contenido

HTML

Javier Izair Chuc Chi21470139

HTML Y

<table>: Define la tabla.<tr> Crea una fila
<table><tr><th>Define un encabezado</th></tr> <tr><td>Define una celda</td></tr></table>
Listas Anidadas: <ul><li>Son listas</li><ul><li> Dentro de otra</li></ul></ul>
Listas Desordenadas: <ol><li>Subelemento </li></ol>
<strong>Existen etiquetas para texto en negrita</strong><b>Tiene la misma funcionalidad que strong</b> <em>Pone el texto en cursiva</h1> <i>Tiene la misma funcionalidad que em</i>

De HTML

Las tablas organizan información en filas y columnas
Listas Ordenadas <ol>: <ol><li>Las listas ordenadas se numeran automáticamente</li> <li>li son elementos de listas</li></ol>
En HTML tenemos tres tipos de listas
<p>Define un párrafo</p> <h1>Sirven para encabezados</h1> <h2>Encontramos de diferentes tamaños</h2> <h3>Según la importancia</h3>

Tablas

Listas

Para el texto podemos encontrar diversas eqtiquetas para dar forma y estructurarlo en una página web.

Texto

Elementos Básicos

Los atributos comunes de una imagen:src: Especifica la ruta de la imagen. alt: Es un texto alternativo en caso de no poder visualizar la imagen.
<a href="https://www.google.com"> <img src="logo.png" alt="Imagen como vinculo"> </a>
<img src="imagen.jpg" alt="Descripción de la imagen" width="300">
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe> <iframe src="https://www.google.com/maps/embed?pb" width="600" height="450" style="border:0;" allowfullscreen=""></iframe>
<audio controls> <source src="audio.mp3" type="audio/mpeg"> Audio</audio> <video width="600" controls> <source src="video.mp4" type="video/mp4"> Video</video>
<object data="archivo.pdf" type="application/pdf" width="600" height="400"> Objeto</object>
Con la etiqueta <object> nos permite incrustar contenido como documentos, videos o aplicaciones interactivas.

<a> es la etiqueta de creación del vínculo. Los atriubutos de <a>: href: Es la dirección del enlace target: Define donde se abre el enlace, _blank es para hacerlo en una nueva pestaña

<a href="https://www.google.com" target="_blank">Visitar Google</a>

De HTML

Elementos Básicos

Podemos agregar imagenes utilizando la etiqueta <img>
Tambien se pueden integrar aplicaciones de terceros como reproductores o el mapa de google
En HTML tenemos las etiquetas <audio> y <video> que permiten la reproducción de estos mismos en una página web.

Imagenes

Aplicaciones

Los vínculos permiten a los usuarios navegar entre páginas o recursos:

Vínculos y Objetos

Atributos: input[type="text"] {color: gray;}
Descendiente: div p { color: gray }
Por ID: #id { color: green }
Por clase: .clase { color: green; }
Por etiqueta: p { color: green; }
Básicos

Modelo de Caja

Tiene 4 componentesContent: Se muestra todo el contenido. Padding: El espacio entre el contenido y el borde de la caja. Border: Límite que rodea el padding y el contenido. Margin: Espacio entre la caja y los elementos
Este modelo describe cómo los elementos HTML son renderizados en CSS
Javier Izair Chuc Chi21470139

LAS BASES DEL DESARROLLO WEB

CSS

HTML Y

Combinados
Los selectores son una de los elementos más importantes en CSS, nos ayuda a definir el elementos HTML a estilar y existen dos tipos de selectores
Hay tres elementos para el estilo en un archivo CSS, el Selector que define el elemento HTML al que se le aplicara el estilo, la Propiedad que es el aspecto a modificar y el Valor de esa propiedad
Se le suele conocer como "Una hoja de estilos", y funciona mediante reglas para aplicar los estilos a los elementos HTML

Selectores

CSS es creado en 1996 para separar el diseño de la estructura del contenido HTML

CSS

Grid se invoca con:display: grid;
Propiedades clavesgrid-column ubica el elemento en columnas específicas: grid-column: 1/3; grid row ubica el elemento en filas especificas: grid-row: 2/4;
Propiedades clavesEn el contenedor encontramos justify-content que alinea los elementos a lo largo del eje principal. Y align-items que los alinea a lo largo del eje secundario
Cuenta con dos ejes, El Principal (main axis) es la dirección principal de alineación.El Secundario (cross axis) es perpendicular al eje principal

Grid

Flexbox y

Flexbox se invoca con:display: flex;
Las filas y columnas se crean usando grid-template-rows y grid-template-columns respectivamente.
Tambien conocido como Modelo de Rejilla, Grid permite crear diseños bidimensionales (filas y columnas).

Ejemplos

Grid

Tambien conocido como Modelo de Caja Flexible, es una técnica de diseño que organiza elementos en contenedores flexibles

Flexbox

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

  • Visita las preferencias de Analytics;
  • Activa el seguimiento de usuarios;
  • ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

  • Visita las preferencias de Analytics;
  • Activa el seguimiento de usuarios;
  • ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

  • Visita las preferencias de Analytics;
  • Activa el seguimiento de usuarios;
  • ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

  • Visita las preferencias de Analytics;
  • Activa el seguimiento de usuarios;
  • ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

  • Visita las preferencias de Analytics;
  • Activa el seguimiento de usuarios;
  • ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

  • Visita las preferencias de Analytics;
  • Activa el seguimiento de usuarios;
  • ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

  • Visita las preferencias de Analytics;
  • Activa el seguimiento de usuarios;
  • ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

  • Visita las preferencias de Analytics;
  • Activa el seguimiento de usuarios;
  • ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

  • Visita las preferencias de Analytics;
  • Activa el seguimiento de usuarios;
  • ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

  • Visita las preferencias de Analytics;
  • Activa el seguimiento de usuarios;
  • ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

  • Visita las preferencias de Analytics;
  • Activa el seguimiento de usuarios;
  • ¡Que fluya la comunicación!