HTML
Las "tags"
HTML, o "etiquetas" HTML, son códigos utilizados para
"marcar" el texto de una página web, con el fin de dar instrucciones
al navegador sobre cómo mostrarlo.
Es decir, las etiquetas
HTML son el lenguaje utilizado para estructurar y definir el contenido en un
documento HTML. Estas etiquetas se encuentran en el HTML (o Lenguaje de Marcado
de Hipertexto) de cada página.
Una tag HTML contiene
tres partes:
Una etiqueta de apertura
— esta empezará con un símbolo < >.
Contenido — unas breves
instrucciones sobre cómo mostrar el elemento en la página.
Una etiqueta de cierre —
cerrará con un símbolo </ >.
Sin embargo, algunas tags
HTML pueden no cerrarse. Esto significa que la etiqueta HTML no necesita
cerrarse con un </ >. Normalmente, usarás etiquetas no cerradas para
metadatos o saltos de línea.
<!DOCTYPE>: Se
utiliza para especificar la versión de HTML que se está utilizando en la
página.
<html>: Define el
inicio y el final de la página web.
<head>: Define la
sección de encabezado de la página, donde se incluyen elementos como el título
de la página, metaetiquetas, scripts, entre otros.
<title>: Define el
título de la página web que aparece en la pestaña del navegador.
<body>: Define la
sección del cuerpo de la página web, donde se incluyen todos los elementos que
se mostrarán en la página.
<h1> a <h6>:
Define los encabezados o títulos de diferentes niveles de jerarquía en la
página web. El uso de esta etiqueta formateará cualquier texto entre la
etiqueta <h> de apertura y la etiqueta </h> de cierre como un
Título o subtítulo. Por ejemplo, en <h>Etiqueta de
encabezamiento</h2>, <h2> y </h2> serían las etiquetas HTML y
"Etiqueta de encabezamiento" es el elemento HTML, es decir, el
encabezamiento de la página.
<a>: Define un
enlace que el usuario puede hacer clic para ir a otra página web o a una
sección diferente de la misma página.
<img>: Define una
imagen que se mostrará en la página web.
Ejemplo: <img
src="imagen.jpg" alt="Descripción de la imagen">
<p>Etiqueta de
párrafo</p>: Define un párrafo de texto. Las etiquetas <p> y
</p> son etiquetas HTML y la "Etiqueta de párrafo" es el
elemento HTML, es decir, el texto de la página. Esta etiqueta formatea
cualquier texto entre la etiqueta <p> de apertura y la etiqueta
</p> de cierre como un párrafo estándar o texto de cuerpo principal.
<b>Etiqueta de
negrita</b>: Esta etiqueta dará formato de negrita a cualquier texto que
se encuentre entre la etiqueta <b> de apertura y la etiqueta </b>
de cierre. Aquí, <b> y </b> son las etiquetas HTML y la "etiqueta
de negrita" es el elemento HTML, es decir, el texto de la página.
<i>Etiqueta de
cursiva</i>: Esta etiqueta formateará como cursiva cualquier texto entre
la etiqueta de apertura <i> y la etiqueta de cierre </i>. Aquí,
<i> y </i> son las etiquetas HTML y "Etiqueta cursiva" es
el elemento HTML (el texto de la página).
<u>Etiqueta de
subrayado</u>: Esta etiqueta formateará cualquier texto entre la etiqueta
<u> de apertura y la etiqueta </u> de cierre como subrayado. Aquí,
<u> y </u> son las etiquetas HTML y "Etiqueta de subrayado"
es el elemento HTML, es decir, el texto de la página.
CODIGO HTML BASICO:
<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Título
de la página</title>
</head>
<body>
<!-- Aquí va todo el contenido
visible de la página -->
</body>
</html>
CSS
CSS (Hojas de Estilo en
Cascada) es el código que usas para dar estilo a tu página web. CSS Básico te
lleva a través de lo que tú necesitas para empezar. Contestará a preguntas del
tipo: ¿Cómo hago mi texto rojo o negro? ¿Cómo hago que mi contenido se muestre
en tal y tal lugar de la pantalla? ¿Cómo decoro mi página web con imágenes de
fondo y colores?
PROPIEDADES CSS:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties
JAVASCRIPT
lenguaje de programación
usado para hacer páginas web dinámicas e interactivas. Se ejecuta en el
navegador del usuario (lado del cliente) y permite crear funcionalidades como
animaciones, formularios, menús desplegables y actualizar contenido sin recargar
la página. No debe confundirse con Java, ya que son lenguajes diferentes aunque
su nombre sea similar, y se puede usar tanto en el navegador como en servidores
para crear aplicaciones web, aplicaciones móviles y automatizar tareas.
EJEMPLO:
HTML:
<!DOCTYPE
html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Título
de la página</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>hola</h1>
<h2>hola</h2>
<div>
<p>
<b><i><u>NO
TE RINDAS</u></i></b><br>
No te rindas, aún estás a tiempo<br>
de alcanzar y comenzar de
nuevo,<br>
aceptar tus sombras,
enterrar tus miedos,<br>
liberar el lastre,
retomar el vuelo.<br>
<hr></hr>
No te rindas que la vida
es eso,<br>
continuar el
viaje,<br>
perseguir tus
sueños,<br>
destrabar el
tiempo,<br>
correr los escombros y
destapar el cielo.<br>
<hr></hr>
No te rindas, por favor
no cedas,<br>
aunque el frío
queme,<br>
aunque el miedo
muerda,<br>
aunque el sol se esconda
y se calle el viento,<br>
aún hay fuego en tu
alma,<br>
aún hay vida en tus
sueños,<br>
porque la vida es tuya y
tuyo también el deseo,<br>
porque lo has querido y
porque te quiero.<br>
<hr></hr>
Porque existe el vino y
el amor, es cierto,<br>
porque no hay heridas que
no cure el tiempo,<br>
abrir las puertas, quitar
los cerrojos,<br>
abandonar las murallas
que te protegieron.<br>
<hr></hr>
Vivir la vida y aceptar
el reto,<br>
recuperar la risa,
ensayar el canto,<br>
bajar la guardia y
extender las manos,<br>
desplegar las alas e
intentar de nuevo,<br>
celebrar la vida y
retomar los cielos.,<br>
<hr></hr>
No te rindas, por favor
no cedas,<br>
aunque el frío
queme,<br>
aunque el miedo
muerda,<br>
aunque el sol se ponga y
se calle el viento,<br>
aún hay fuego en tu
alma,<br>
aún hay vida en tus
sueños,<br>
porque cada día es un
comienzo nuevo,<br>
porque esta es la hora y
el mejor momento,<br>
porque no estás sola,
porque yo te quiero.<br>
</p>
</div>
<h3>hola</h3>
<!--
Aquí va todo el contenido visible de la página -->
</body>
</html>
CSS:
h1{
color:white;
margin: 10px;
padding:50px;
text-align: center;
background: linear-gradient(blue, pink);
font-size:77px;
}
h2{
background-color:yellow;
color: blue;
background-color: powderblue;
text-decoration: none;
padding: 10px;
transition: background-color 0.5s;}
h2:hover {
/*
Estilos al pasar el cursor */
color: white;
background-color: gold;
}
