INTITUCION EDUCATIVA VILLA ESTRELLA
Introducción a HTML
Conceptos Básicos:
• HTML (Lenguaje de marcado de hipertexto) es el lenguaje utilizado para crear sitios y aplicaciones web.
• No es un lenguaje de programación sino un lenguaje de marcado que estructura el contenido web.
<!DOCTYPE html>
<html>
<head>
<title>Mi Primera Página</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Esta es mi primera página web.</p>
</body>
</html>
Explicación:
• <!DOCTYPE html>: Declara el tipo de documento.
• <html>: Elemento raíz de la página.
• <head>: Contiene metadatos como el título de la página.
• <body>: Contiene el contenido visible de la página.
Etiquetas Comunes en HTML:
• <h1> a <h6>: Títulos, <h1> es el más importante.
• <p>: Párrafos.
• <a>: Enlaces.
• <img>: Imágenes.
• <div>: División o contenedor para agrupar otros elementos.
Atributos HTML:
• class: Define una clase para CSS.
• id: Identificador único para un elemento.
• src: Fuente de un elemento multimedia, como una imagen.
• href: URL de un enlace.
• alt: Texto alternativo para imágenes.
Ejemplo de el atributo a la etiqueta enlace
<a href="[Link] target="_blank">Visita Example</a>
2. Introducción a CSS
Conceptos Básicos:
• CSS (Hojas de estilo en cascada) es el lenguaje que describe el estilo de un documento HTML.
• Permite cambiar colores, fuentes, espaciados y disposición de los elementos.
Sintaxis Básica de CSS:
h1 {
color: blue;
font-size: 20px;
}
Explicación:
• h1: Selector que apunta a todos los elementos <h1>.
• color: Propiedad que define el color del texto.
• font-size: Propiedad que define el tamaño de la fuente.
Maneras de Incorporar CSS:
1. En línea: Dentro de la etiqueta HTML usando el atributo style.
<h1 style="color: blue;">¡Hola, mundo!</h1>
Interno: Dentro de la etiqueta <style> en el documento HTML.
<style>
h1 {
color: blue;
}
</style>
Externo: En un archivo separado .css.
<link rel="stylesheet" href="[Link]">
Ejemplo de CSS Externo: Archivo [Link]:
body {
background-color: lightyellow;
}
p{
font-family: Arial, sans-serif;
color: green;
}