•HTML es el lenguaje con el que se define el contenido de las páginas web. Básicamente se trata de un conjunto de etiquetas que sirven para definir el texto y otros elementos que compondrán una página web, como imágenes, listas, vídeos, etc.
•
•El HTML es un lenguaje de marcación de elementos para la creación de documentos hipertexto, muy fácil de aprender, lo que permite que cualquier persona, aunque no haya programado en la vida, pueda enfrentarse a la tarea de crear una web.
El elemento HTML <head> provee información general (metadatos) acerca del documento, incluyendo su título y enlaces a scripts y hojas de estilos.
El elemento <body> de HTML representa el contenido de un documento HTML. Solo puede haber un elemento <body> en un documento.
La etiqueta <body> es un elemento esencial en un documento HTML que define el área donde se coloca todo el contenido visible de la página web.
Es un contenedor que alberga texto, imágenes, enlaces, multimedia, formularios y otros elementos HTML que los visitantes pueden ver y con los que pueden interactuar.
La etiqueta <body> se encuentra dentro de la etiqueta <html> y sigue a la etiqueta <head> en la estructura de un documento HTML.
En términos simples, la etiqueta <body> es el “esqueleto” de una página web, y su contenido conforma la “carne” que le da forma y propósito. Los navegadores web utilizan la información contenida dentro de la etiqueta <body> para renderizar y mostrar el contenido de una página web a los usuarios.
Etiqueta html para agregar una imagen
<img src="perrojugandopelota.jpg" alt="perro mediano color negro jugando con una pelota">
img src: hace referencia al archivo de la imagen que se quiere mostrar.
alt: se refiere al texto que describe lo que muestra la imagen.
Para una buena optimización de la imagen, que además garantice la accesibilidad, lo idóneo es trabajar ambas partes del código, priorizando siempre al usuario respecto a los motores de búsqueda
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi página web</title>
</head>
<body>
<header>
<h1>Bienvenido a Mi Página Web</h1>
</header>
<nav>
<ul>
<li><a href="#sección1">Sección 1</a></li>
<li><a href="#sección2">Sección 2</a></li>
<li><a href="#sección3">Sección 3</a></li>
</ul>
</nav>
<main>
<section id="sección1">
<h2>Sección 1</h2>
<p>Contenido de la Sección 1</p>
</section>
<section id="sección2">
<h2>Sección 2</h2>
<p>Contenido de la Sección 2</p>
</section>
<section id="sección3">
<h2>Sección 3</h2>
<p>Contenido de la Sección 3</p>
</section>
</main>
<footer>
<p>Copyright © 2021 - Mi Página Web</p>
</footer>
</body>
</html>
¿Qué es CSS?
•CSS son las siglas en inglés para «hojas de estilo en cascada» (Cascading Style Sheets). Básicamente, es un lenguaje que maneja el diseño y presentación de las páginas web, es decir, cómo lucen cuando un usuario las visita. Funciona junto con el lenguaje HTML que se encarga del contenido básico de las páginas.
¿Cómo se linkea el documento css con HTML?
Puedes vincular tu archivo CSS a tu archivo HTML agregando un elemento link dentro del head de tu archivo HTML, así:
body{
background-color: blue;
}
Por medio de esta propiedad le da un color de fondo a la página web
. caja {
width:100%;
height:100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Por medio de estas propiedades hace flexible la caja rotulada con un selector de clase. Organiza el contenido en columnas y centra su contenido.
· ¿Qué es un id?
Un id es un atributo que se utiliza para diferenciar un elemento de manera única
¿Qué es un selector CSS?
•Los selectores CSS son herramientas utilizadas para definir el estilo que quieres dar a tus elementos en CSS. Existen muchos tipos de selectores en este lenguaje, cada uno con su propia sintaxis y utilidad.
Selectores que se usan en CSS
•Selector universal *
•
•Selectores de etiquetas <div >
•
•Selectores de Clases <div class="noticias">
Se puede reutilizar en distintas cajas que compartan la misma clase
•
•Selectores de Id <div id="contenido3">
Se usa para hacer una identificación a una caja
¿Qué es Bootstrap?
Bootstrap es un framework o conjunto de herramientas para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como, extensiones de JavaScript opcionales adicionales.
¿Cómo se linkea Boostrap con HTML?
1 Se debe agregar la etiqueta link antes de title para poder usar la funcionalidad de boostrap
2 Antes del cierre del body se debe agregar el script para poder usar funcionalidades de javascript que provee boostrap en las galería de imágenes
¿Qué es Javascript?
Javascript es un leguaje de programación o de secuencia de comandos que te permite implementar funciones complejas en páginas web.
•Se puede usar
•Para darle una dinámica a nuestras paginas, programamos el comportamiento de nuestra pagina.
¿Para qué usar javascript?
•Un uso muy común de Javascript es modificar dinámicamente HTML y CSS para actualizar una interfaz de usuario
¿Cómo se linkea el documento javascript con HTML?
Llamar a una función javascript desde un boton
Main.js