Want to create interactive content? It’s easy in Genially!
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:
Transcript
Javier Izair Chuc Chi21470139
HTML Y
CSS
LAS BASES DEL DESARROLLO WEB
HTML
Se encarga de estructurar el contenido
Originalmente se diseño para compartir documentos científicos en la web
HTML 5 es su versión más reciente
Para poder estructurar y definir el contenido se utilizan "etiquetas"
Estructura
Esta es su estructura básica, la cual tiene una estructura jerárquica organizando el contenido en bloques anidados
Cada etiqueta en html tiene un proposito específico
Existen etiquetas estructurales, de texto, de listas y hasta multimedia
Elementos básicos
Los elementos básicos de HTML es lo que conforma la estructura de una página web
HTML ofrece una variedad de elementos básicos que permiten estructurar y enriquecer las páginas web con diferentes tipos de contenido.
Elementos Básicos
De HTML
Texto
Para el texto podemos encontrar diversas eqtiquetas para dar forma y estructurarlo en una página web.
<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>
<p>Define un párrafo</p> <h1>Sirven para encabezados</h1> <h2>Encontramos de diferentes tamaños</h2> <h3>Según la importancia</h3>
Listas
En HTML tenemos tres tipos de listas
Listas Ordenadas <ol>: <ol><li>Las listas ordenadas se numeran automáticamente</li> <li>li son elementos de listas</li></ol>
Listas Desordenadas: <ol><li>Subelemento </li></ol>
Listas Anidadas: <ul><li>Son listas</li><ul><li> Dentro de otra</li></ul></ul>
Tablas
Las tablas organizan información en filas y columnas
<table><tr><th>Define un encabezado</th></tr> <tr><td>Define una celda</td></tr></table>
<table>: Define la tabla.<tr> Crea una fila
Elementos Básicos
De HTML
Vínculos y Objetos
Con la etiqueta <object> nos permite incrustar contenido como documentos, videos o aplicaciones interactivas.
Los vínculos permiten a los usuarios navegar entre páginas o recursos:
<object data="archivo.pdf" type="application/pdf" width="600" height="400"> Objeto</object>
<a href="https://www.google.com" target="_blank">Visitar Google</a>
<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
Aplicaciones
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.
<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>
Imagenes
Podemos agregar imagenes utilizando la etiqueta <img>
<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">
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.
Javier Izair Chuc Chi21470139
HTML Y
CSS
LAS BASES DEL DESARROLLO WEB
CSS
CSS es creado en 1996 para separar el diseño de la estructura del contenido HTML
Se le suele conocer como "Una hoja de estilos", y funciona mediante reglas para aplicar los estilos a los elementos HTML
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
Selectores
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
Combinados
Básicos
Por etiqueta: p { color: green; }
Descendiente: div p { color: gray }
Por clase: .clase { color: green; }
Atributos: input[type="text"] {color: gray;}
Por ID: #id { color: green }
Modelo de Caja
Este modelo describe cómo los elementos HTML son renderizados en CSS
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
Flexbox y
Grid
Flexbox
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
Tambien conocido como Modelo de Caja Flexible, es una técnica de diseño que organiza elementos en contenedores flexibles
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
Grid
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).
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;
Ejemplos
Grid se invoca con:display: grid;
Flexbox se invoca con:display: flex;
¿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!