HTML y CSS
Información básica para el desarrollo web
Diseño Digital
Diana Williams Solís
12-1 B
Introducción a HTML y CSS
1. ¿Qué es HTML?
¿Qué es HTML?
HTML (HyperText Markup Language) o Lenguaje de Marcado de Hipertexto, es el estándar
que se utiliza para crear y estructurar las páginas web. Su función principal es organizar el
contenido de dicha página, utilizando etiquetas que le indican al navegador cómo debe
mostrarse. Sin HTML, no tendríamos la estructura básica de un sitio web.
DIANA WILLIAMS
. ¿Qué es una etiqueta HTML?
Una etiqueta HTML es una palabra o letra especial rodeada de corchetes angulares “< >”.
Estas etiquetas se utilizan para crear elementos HTML, como párrafos o enlaces.
Muchos elementos tienen una etiqueta de apertura y una etiqueta de cierre; por ejemplo, un
elemento p (párrafo) tiene una etiqueta <p>, seguida del texto del párrafo, y luego una etiqueta
de cierre </p>.
Algunos elementos no tienen etiqueta de cierre. Estos se llaman elementos vacíos. Por
ejemplo, el elemento br para insertar saltos de línea simplemente se escribe <br>.
Si estás trabajando con XHTML, puedes escribir elementos vacíos usando etiquetas de cierre
automático, por ejemplo, <br />.
DIANA WILLIAMS
. Ejemplos y datos importantes de HTML
Ejemplos de etiquetas HTML y datos importantes:
- <html>: Indica el inicio y el final de un documento HTML. Todo el contenido debe estar
dentro de esta etiqueta.
- <head>: Contiene metadatos, enlaces a CSS, y el título del documento. No se muestra en la
página.
- <title>: Define el título que aparece en la pestaña del navegador.
- <body>:Contiene el contenido visible de la página como texto, imágenes, enlaces, etc.
- <h1> a <h6>: Encabezados de mayor a menor importancia.
- <p>:Define un párrafo.
- <a>: Define un hipervínculo, usando el atributo href.
- <img>: Muestra una imagen, usando el atributo src.
- <div>: Contenedor genérico
DIANA WILLIAMS para agrupar contenido y aplicar estilos.
. Datos curiosos sobre HTML
Datos curiosos sobre HTML:
- HTML fue desarrollado por Tim Berners-Lee
en 1991.
- Las primeras versiones no tenían soporte para
estilos o scripts.
- HTML5, la versión más reciente, permite
incrustar audio, video y gráficos.
DIANA WILLIAMS
DIANA WILLIAMS
2. ¿Qué es CSS?
¿Qué es CSS?
CSS (Cascading Style Sheets) o Hojas de Estilo en Cascada, es un lenguaje que se utiliza para
definir la presentación y el diseño de un sitio web. Con CSS, puedes cambiar colores, fuentes,
márgenes, diseño y mucho más. Es esencial porque separa el contenido del diseño, lo que hace
que sea más fácil mantener y actualizar el aspecto de una página.
DIANA WILLIAMS
. Conceptos Básicos de CSS
Qué es un selector y tipos
Un selectores el nombre que tiene un determinado elemento dentro del código de tu web. Conociendo el
nombre del selector puedes modificar ese determinado elemento a tu antojo. Hay dos tipos de selectores:
identificadores y clases.
– Un identificador es el nombre de un elemento concreto que no se repite más que una vez en toda la web. Es un
nombre único, y aplicándole una modificación vas a modificar únicamente este elemento
– Una clase es el nombre de una regla que se repite en varios sitios de tu web. Por ejemplo, puedes tener una clase
llamada .negro que puedes aplicar tanto a textos como a botones para que se pongan de este color. Es decir, defines
un estilo genérico que puedes aplicar a cualquier elemento cuantas veces quieras
Qué es una propiedad
Una propiedad es la modificación o modificaciones concretas que aplicas en la hoja de estilos CSS a un elemento
de tu web mediante un selector.
o background-color: #ccc; (color de fondo gris especificado en código hexadecimal)
o color: #fff; (color del texto dentro de la caja en blanco
o width: 100px; (ancho de 100 píxeles)
o padding: 20px; (relleno o margen interior de 20 píxeles por cada lado)
o border: 1px solid #000; (borde de color negro continuo de 1 píxel de grosor)
o border-radius: 5px; (redondeado de un ángulo de 5 píxeles en todas las esquinas de la caja)
DIANA WILLIAMS
.Ejemplos sobre CSS
Por ejemplo, mediante una regla CSS puedo redefinir el estilo de todas las etiquetas h1
(títulos 1 de mi web) para que a partir de ahora tengan un tamaño de 36 píxeles, color negro y
tipografía Open Sans. El modo de hacerlo sería colocando el siguiente código en la hoja de
estilos CSS:
Además con CSS puedes personalizar por completo el comportamiento responsive de tu
plantilla, es decir, que se vea como quieras en cada dispositivo.
DIANA WILLIAMS
. Datos curiosos sobre CSS
Datos curiosos sobre CSS:
- CSS fue desarrollado en 1996.
- CSS3 introdujo animaciones,
transiciones y diseño responsive.
- Puedes
crear diseños complejos sin usar
imágenes, solo con CSS.
DIANA WILLIAMS
. Ejemplo que integra HTMLy CSS
<!DOCTYPE html>
<html>
<head>
<title>Mi primera página</title>
<style> body { background-color: #f0f0f0; font-family:
Arial; } h1 { color: blue; } p { color: #333333; }
</style>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Esta es mi primera página con HTML y CSS.</p>
</body>
</html>
DIANA WILLIAMS
GRACIAS POR SU
ATENCIÓN