Scribd
Cargar
3 vistas

Semana_1_Fundamentos_de_HTML_y_CSS

El documento presenta los fundamentos de HTML y CSS, incluyendo la estructura básica de un documento HTML, etiquetas comunes y sus usos, así como una introducción a CSS y Bootstrap. Se explican conceptos como el modelo de caja, selectores y propiedades en CSS, y se introducen herramientas y buenas prácticas para el desarrollo web. Además, se propone un proyecto final para crear una página web informativa utilizando los conocimientos adquiridos.

Cargado por

Yeison
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
3 vistas

Semana_1_Fundamentos_de_HTML_y_CSS

El documento presenta los fundamentos de HTML y CSS, incluyendo la estructura básica de un documento HTML, etiquetas comunes y sus usos, así como una introducción a CSS y Bootstrap. Se explican conceptos como el modelo de caja, selectores y propiedades en CSS, y se introducen herramientas y buenas prácticas para el desarrollo web. Además, se propone un proyecto final para crear una página web informativa utilizando los conocimientos adquiridos.

Cargado por

Yeison
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 12

Semana 1: Fundamentos de

HTML y CSS
Created @February 1, 2025 10:42 AM

Tags

Sesión 1: Introducción a HTML


Estructura básica de un documento HTML

Etiquetas fundamentales: <html> , <head> , <body> , <h1> - <h6> , <p> , <a> , <img> ,
<ul> , <ol> , <table> , <form>

Atributos y buenas prácticas de semántica web

Uso de herramientas: VS Code, Live Server

¿Qué es HTML?
HTML (HyperText Markup Language) es el lenguaje de marcado utilizado para
crear la estructura de las páginas web. No es un lenguaje de programación, sino
un lenguaje de marcado que define la organización y contenido de un documento
web.

Semana 1: Fundamentos de HTML y CSS 1


Estructura básica de un documento HTML
Un documento HTML está compuesto por varias secciones clave:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primera página HTML</title>
</head>
<body>
<h1>Hola, mundo!</h1>
<p>Este es un párrafo de ejemplo en HTML.</p>
</body>
</html>

<!DOCTYPE html> : Indica que el documento es HTML5.

<html> : Elemento principal que encierra todo el contenido.

<head> : Contiene metadatos y configuraciones.

Semana 1: Fundamentos de HTML y CSS 2


<meta charset="UTF-8"> : Define la codificación de caracteres.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> : Optimiza la página para


dispositivos móviles.

<title> : Define el título de la página.

<body> : Contiene el contenido visible de la página.

Etiquetas más usadas


Encabezados ( <h1> - <h6> )
Se utilizan para definir jerarquía en los títulos, siendo h1 el título principal y de
mayor tamaño, y en la medida en que se va escalando, va disminuyendo tamaño e
impacto visual.

Ejemplo:

<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Sección</h3>

Párrafos ( <p> )
La etiqueta <p> se utiliza para definir un párrafo de texto. Es una de las etiquetas
más básicas y comunes en HTML.

Usos principales:

Estructura de texto: Organiza el contenido en bloques de texto separados,


mejorando la legibilidad.

Separación de ideas: Cada párrafo suele expresar una idea completa o un


punto relacionado.

Semana 1: Fundamentos de HTML y CSS 3


Espaciado: Los navegadores suelen agregar un espacio en blanco antes y
después de cada párrafo, creando márgenes visuales.

<p>Este es un párrafo. Sirve para estructurar el texto en bloques.</p>


<p>Otro párrafo con información diferente.</p>

Etiqueta <a> (enlace)

La etiqueta <a> se emplea para crear hipervínculos, es decir, enlaces que


permiten al usuario navegar a otra página web, a una sección de la misma página
o a un archivo diferente.

Usos principales:

Navegación entre páginas: Permite al usuario moverse entre diferentes


páginas de un sitio web.

Acceso a recursos externos: Enlaza a páginas web externas, documentos,


imágenes, videos, etc.

Semana 1: Fundamentos de HTML y CSS 4


Descarga de archivos: Permite al usuario descargar archivos al hacer clic en
el enlace.

Anclaje dentro de la misma página: Crea enlaces internos que llevan al


usuario a una sección específica de la misma página.

<p>Visita mi <a href="https://www.ejemplo.com">página web</a>.</p>

<a href="https://www.ejemplo.com" target="_blank" title="Ir a la página principa

href: Especifica la URL del recurso al que apunta el enlace.

target: Indica dónde se abrirá el enlace (por ejemplo, en una nueva pestaña:
target="_blank" ).

title: Proporciona una descripción del enlace, que aparece como una
sugerencia cuando se pasa el ratón por encima.

Imágenes ( <img> )
Nos permite hacer una referencia y renderizar una imagen en un documento html .
La referencia puede ser a una ruta local o remota.

<img src="./directorio/imagen.jpg" alt="Descripción de la imagen">

Listas ordenadas y desordenadas ( <ul> y <ol> ) - <li>


Podemos crear listas ordenadas (1,2,…,n) o desordenadas, que a través de items
nos permiten mostrar de una mejor manera la información en documentos html .

Semana 1: Fundamentos de HTML y CSS 5


Tablas ( <table> )

La etiqueta
<table>se utiliza para definir una tabla, que es una estructura de datos organizada
en filas y columnas. Es ideal para presentar información de forma clara y concisa,
como listas de productos, resultados de búsquedas o datos estadísticos.

<table>
<tr> <th> Encabezado 1 </th> <th> Encabezado 2 </th>
</tr>
<tr> <td> Dato 1 </td> <td> Dato 2 </td>
</tr>
</table>

Elementos clave dentro de una tabla:

<tr> : Define una fila en la tabla.

<th>: Define una celda de encabezado. El contenido de estas celdas suele


estar en negrita y centrado.

<td> : Define una celda de datos. Contiene la información de cada celda de la


tabla.

Semana 1: Fundamentos de HTML y CSS 6


Ejemplo:

<table>
<caption>Tabla de productos</caption>
<tr>
<th>Producto</th>
<th>Precio</th>
<th>Cantidad</th>
</tr>
<tr>
<td>Manzana</td>
<td>$1.50</td>
<td>10</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.99</td>
<td>15</td>
</tr>
</table>

Sesión 2: Introducción a CSS y Bootstrap


Conceptos básicos de CSS: selectores, propiedades y valores

Modelo de caja (Box Model)

Colores, fuentes y tamaños

Introducción a Bootstrap: grid system y componentes básicos

¿Qué es CSS?

Semana 1: Fundamentos de HTML y CSS 7


CSS (Cascading Style Sheets) es un lenguaje de estilos que permite definir la
presentación de documentos HTML. Con CSS, se pueden modificar colores,
fuentes, tamaños, márgenes, alineaciones y otros aspectos visuales.

Selectores en CSS
Los selectores permiten aplicar estilos a elementos específicos en una página
web. Algunos de los selectores más comunes son:

/* Selector de etiqueta */
p{
color: blue;
}

/* Selector de clase */
.destacado {
font-weight: bold;
}

/* Selector de ID */
#titulo {
font-size: 24px;
}

/* Selector universal */
*{
margin: 0;
padding: 0;
}

Propiedades y Valores
Las reglas CSS se definen mediante pares propiedad-valor, separados por : .
Ejemplo:

Semana 1: Fundamentos de HTML y CSS 8


body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}

Modelo de Caja (Box Model)


El modelo de caja es el principio fundamental del diseño en CSS. Cada elemento
en una página web se considera una caja con las siguientes propiedades:

Content: Contenido del elemento (texto, imagen, etc.).

Padding: Espacio entre el contenido y el borde del elemento.

Border: Borde del elemento.

Margin: Espacio entre el elemento y otros elementos.

div {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}

Colores, Fuentes y Tamaños


Colores en CSS
Los colores pueden ser definidos con:

Nombres ( red , blue , green )

Código HEX ( #ff0000 )

Semana 1: Fundamentos de HTML y CSS 9


RGB ( rgb(255, 0, 0) )

HSL ( hsl(0, 100%, 50%) )

Ejemplo:

h1 {
color: #ff5733;
}

Fuentes y Tamaños
Las fuentes pueden especificarse con font-family , mientras que el tamaño se define
con font-size .

Flexbox
Flexbox es un modelo de diseño unidimensional que permite distribuir elementos
dentro de un contenedor de manera eficiente, incluso cuando sus tamaños son
dinámicos.

Ejemplo de uso básico de Flexbox:

.container {
display: flex;
justify-content: space-between;
align-items: center;
}

Ejemplo en HTML:

<div class="container">
<div class="box">Elemento 1</div>
<div class="box">Elemento 2</div>

Semana 1: Fundamentos de HTML y CSS 10


<div class="box">Elemento 3</div>
</div>

Grid System
CSS Grid permite diseñar páginas en dos dimensiones (filas y columnas). Es muy
útil para crear estructuras de página más complejas.
Ejemplo de Grid:

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

Ejemplo en HTML:

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

Introducción a Bootstrap
Bootstrap es un framework CSS que facilita el diseño web responsivo y moderno.
https://getbootstrap.com/docs/5.3/getting-started/introduction/

Bootstrap nos permite a través de sus clases ofrecer estandarización,


responsividad y una escalabilidad de nuestros proyectos web.

Componentes básicos de Bootstrap

Semana 1: Fundamentos de HTML y CSS 11


Bootstrap ofrece componentes listos para usar, como botones y alertas.

Uso de Bootstrap en un Proyecto


Para usar Bootstrap, se debe incluir su CDN en el archivo HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cs

Proyecto Semana 1:
Página Web Informativa:
Crear una página de presentación personal con HTML y estilos básicos de CSS o
Bootstrap.

Semana 1: Fundamentos de HTML y CSS 12

También podría gustarte