CURSO DE HTML
Contenido
TEMARIO Descarga en WORD
PROGRAMAS A UTILIZAR
- Visual Studio Code Es un editor de codigo fuente desarrollado por Microsoft. Utilizaremos este programa por que es más ligero y tiene mas opciones a diferencia de otros
REQUISITOS BÁSICOS
CONCEPTOS BÁSICOS
HTML (hyper text markup language -> lenguaje de marcado de hipertexto). Es un
lenguaje de marcado o
etiquetas que se utiliza para crear paginas web.
HTML solo es la estructura; Para dar la apariencia o estilos se utiliza otro
lenguaje
OJO HTML NO ES UN LENGUAJE DE PROGRAMACION
QUE ES HTML
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 se creó en un principio con objetivos divulgativos de
información con texto y
algunas imágenes.
No se pensó que llegara a ser utilizado para crear área de ocio y consulta con
carácter multimedia (lo
que es actualmente la web), de modo que, el HTML se creó sin dar respuesta a todos
los posibles usos que
se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro.
Sin embargo, pese a
esta deficiente planificación, si que se han ido incorporando modificaciones con el
tiempo, estos son
los estándares del HTML.
METADATOS
<!DOCTYPE html>
<!-- Especifica el idioma -->
<html lang="es">
<head>
<!-- Especifica los caracteres especiales -->
<meta charset="UTF-8">
<!-- Especifica la compatibilidad con IE ultima version -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Especifica la escala de visualizacion en pantallas grandes y pequeñas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Permite poner un favicon(icono pequeño en la pestaña del navegador) -->
<link rel="shortcut icon" href="icon/img-96.png" type="image/x-icon">
<title>Document</title>
</head>
<body>
</body>
</html>
METAETIQUETAS PARA SEO Y REDES SOCIALES
<!DOCTYPE html>
<!-- Especifica el idioma -->
<html lang="es">
<head>
<!-- Especifica los caracteres especiales -->
<meta charset="UTF-8">
<!-- Especifica la compatibilidad con IE ultima version -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Especifica la escala de visualizacion en pantallas grandes y pequeñas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- META ETIQUETAS PARA SEO -->
<!-- Titulo entre 55-65 caracteres -->
<title>Curso HTML</title>
<!-- Descripcion no mas de 165 caracteres -->
<meta name="description" content="En esta página estamos aprendiendo HTML">
<!-- Especifica la URL original para acceder a este sitio web -->
<link rel="canonical" href="https://tudominio.com/isai-ismael">
<!-- Permite poner un icono en la pestaña del navegador -->
<link rel="icon" href="img/logo.png">
<!-- Permite poner un icono en la pestaña del navegador PARA MOVILES-->
<link rel="apple-touch-icon" href="img/logo.png">
<!-- Permite poner un color en la barra superior del navegador PARA MOVILES-->
<meta name="theme-color" content="#ff6600">
<!-- META ETIQUETAS PARA REDES SOCIALES -->
<meta property="og:title" content="Curso HTML">
<meta property="og:description" content="En esta página estamos aprendiendo HTML">
<!-- Permite poner una imagen al copiar nuestro URL en una red social -->
<meta property="og:image" content="https://tudominio.com/img/foto.png">
<meta property="og:url" content="https://tudominio.com/index.html">
</head>
<body>
</body>
</html>
ETIQUETAS AVANZADAS
<!-- DATALIST -->
<input list="frutas">
<datalist id="frutas">
<option value="uva"></option>
<option value="mango"></option>
<option value="péra"></option>
</datalist>
<!-- DAR COLOR AL NAVEGADOR EN MOVILES -->
<meta name="theme-color" content="#083756" />
<!-- ENLACE DE DESCARGA -->
<a href="CV/Vitae.pdf" download="nombre">Descargar</a>
ETIQUETAS MAS USADAS
<h1>titulo principal</h1>
<h2>titulo</h2>
<h3>titulo</h3>
<h4>titulo</h4>
<h5>titulo</h5>
<h6>titulo</h6>
<header>Determina encabezados y pueden estar ubicados en diferentes partes de la pagina</header>
<nav>Determina un menu de navegación</nav>
<ol>
<li>Listas ordenadas</li>
</ol>
<ul>
<li>Listas desordenadas</li>
</ul>
<main>Define la seccion PRINCIPAL del documento. Solo puede existir UN MAIN por documento</main>
<article>
<h2>Siempre va tener su titulo</h2>
<p>Especifica contenido independiente y debe tener sentido por sí mismo.</p>
</article>
<section>
<h2>titulo</h2>
<p>Agrupa contenido que esta relacionado. Contiene informacion dependientes.</p>
</section>
<div>
Es una etiqueta contenedora que no tiene semántica(NO se usa para estructurar un documento);
Esta etiqueta era utilizada antes como contenedor, cuando no existían etiquetas para estructurar un documento.
</div>
<aside>
Representa contenido complementario.
Contiene informacion que se vincula con la informacion principal,
pero que no es parte de esa informacion.
</aside>
<footer>
Representa un pie de pagina en nuestro contenido de seccion mas cercano
</footer>
ATRIBUTOS AVANZADOS
step="0.01 <!-- Para dar decimales a un input number -->
VER PDF EN HTML
<iframe src="data:application/pdf;base64,<?= base64_encode($i->archivo) ?>"
width=50% height=200></iframe>
PAGINA DE RECUPERAR CONTRASEÑA
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recuperar contraseña</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 0px 15px;
}
.container {
max-width: 500px;
margin: 30px auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form {
display: flex;
flex-direction: column;
}
h2 {
font-size: 25px;
margin-bottom: 20px;
text-align: center;
}
label {
font-size: 18px;
margin-bottom: 10px;
}
input {
padding: 14px;
border: none;
border-radius: 5px;
margin-bottom: 20px;
background: #E6EFFF;
outline: none;
font-size: 16px;
font-weight: bold;
color: rgb(5, 13, 39);
}
button {
background-color: #2A7ED6;
color: #fff;
padding: 15px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
}
button:hover {
background-color: #2372C4;
}
p {
text-align: right;
padding-bottom: 20px;
}
p a {
color: #2372C4;
font-weight: bold;
text-decoration: none;
}
p a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<form action="" method="post">
<h2>Recuperar contraseña</h2>
<label for="email">Correo electrónico:</label>
<input type="text" id="email" name="email" required>
<p>Tambien puedes <a href="">Iniciar Sesion</a></p>
<button type="submit">Recuperar Contraseña</button>
</form>
</div>
</body>
</html>
PAGINA DE FORMULARIO DE RECUPERAR CONTRASEÑA
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recuperar contraseña</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 0px 15px;
}
.container {
max-width: 500px;
margin: 30px auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form {
display: flex;
flex-direction: column;
}
h2 {
font-size: 25px;
margin-bottom: 20px;
text-align: center;
}
label {
font-size: 18px;
margin-bottom: 10px;
}
input {
padding: 14px;
border: none;
border-radius: 5px;
margin-bottom: 35px;
background: #E6EFFF;
outline: none;
font-size: 16px;
font-weight: bold;
color: rgb(5, 13, 39);
}
button {
background-color: #2A7ED6;
color: #fff;
padding: 15px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
}
button:hover {
background-color: #2372C4;
}
p {
text-align: right;
padding-bottom: 20px;
}
p a {
color: #2372C4;
font-weight: bold;
text-decoration: none;
}
p a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<form action="" method="post">
<h2>Recuperar contraseña</h2>
<label for="password">Nueva contraseña</label>
<input type="password" id="password" name="password" required>
<label for="passwordRepeat">Repetir nueva contraseña</label>
<input type="password" id="passwordRepeat" name="passwordRepeat" required>
<p>Tambien puedes <a href="">Iniciar Sesion</a></p>
<button type="submit">Recuperar</button>
</form>
</div>
</body>
</html>
PAGINA DE ENVIAR CORREO DE RECUPERAR CONTRASEÑA
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restablecer contraseña</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
text-align: center;
}
h1 {
margin-top: 50px;
margin-bottom: 20px;
}
p {
margin-bottom: 40px;
}
a.button {
background-color: #007bff;
color: #fff;
display: inline-block;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
text-decoration: none;
transition: background-color 0.3s;
}
a.button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Restablecer contraseña</h1>
<p>Haga clic en el botón para restablecer su contraseña:</p>
<a class="button" href="route('recuperar.form', [$id_usuario, $codigo])">Restablecer contraseña</a>
</body>
</html>