HTML
HTML es un lenguaje utilizado para crear páginas web. Utiliza una serie de etiquetas y
elementos para estructurar el contenido dentro de la página y definir cómo se presenta en el
navegador.
ESTRUCTURA BÁSICA
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<h1>Encabezado principal</h1>
<p>Párrafo de texto.</p>
</body>
</html>
Donde tendremos que:
<!DOCTYPE html> nos dará el tipo de archivo con el que estaremos trabajando.
<html> es como la llave que abré todo lo que contendrá nuestro código
<head> Todo lo que se mostrará en la parte superior.
<title> se refiere al texto mostrado en la pestaña del navegador.
<body> es el cuerpo, tendrá todas las cosas que se mostrarán en la página
<h1> . . . <h6> Tipos de títulos, siendo h1 el más grande y h6 más chico.
<p> párrafo
FUNCIONALIDADES
AGREGAR LINKS
<!DOCTYPE html>
<html>
<head>
<title>Links</title>
</head>
<body>
<h1>Inserción de links</h1>
<a href="[Link]
>Este es el código de invitación al classroom</a>
</body>
</html>
<a> Se utiliza para crear enlace.
<href> Es un atributo de la etiqueta <a> que especifica la URL del enlace que queremos
Luego del href se pone el texto a mostrar donde clickaremos en el y nos mandará a la página,
como un hipervínculo.
AGREGAR IMÁGENES
<!DOCTYPE html>
<html>
<head>
<title>Imagen</title>
</head>
<body>
<h1>Inserción de imágenes</h1>
<img src="[Link]
alt="Gran Imagen" width="300" height="200"/>
</body>
</html>
<img> será la etiqueta de para insertar la imagen.
src: donde se pone la dirección de imagen
alt: texto alternativo si la imagen no pudo ser cargada.
width: ancho de la imagen
height: alto de la imagen
IMAGENES CON LINK
<!DOCTYPE html>
<html>
<head>
<title>Imagen con link</title>
</head>
<body>
<h1>Inserción de imágenes con link</h1>
<a href="[Link]
target="_blank"><img
src="[Link] alt="Gran
Imagen" width="300" height="200"></a>
</body>
</html>
Lo único que cambia es que antes de la etiqueta <img> se insertará la imagen deseada.
target: especifica donde se muestra el link deseado. Los distintos tipos de target son:
_blank: Abre en una nueva ventana o pestaña del navegador.
_self: Abre en la misma ventana donde se encuentra la imagen. Valor predeterminado si no se
especifica nada.
_parent: Se debe abrir en el marco padre de iframe donde se encuentra el enlace.
_top: Abre el enlace en la ventana completa del navegador, eliminando todos los marcos.
MULTIMEDIA
<!DOCTYPE html>
<html>
<head>
<title>Multimedia</title>
</head>
<body>
<h1>Video</h1>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta el elemento de video.
</video>
<h1>Audio</h1>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento de audio.
</audio>
</body>
</html>
IFRAME Y MARCOS
<!DOCTYPE html>
<html>
<head>
<title>Página Principal</title>
</head>
<body>
<iframe src="iframe_content.html" width="600"
height="400"></iframe>
</body>
</html>
Los marcos (Frames) Son secciones de una ventana del navegador que pueden mostrar
diferentes documentos HTML simultaneamente. Pero esto quedó obsoleto para HTML5 que es lo
que usamos nosotros.
Por otro lado los Iframes (Inline Frames) son elementos de HTML que dejan incrustar un
documento HTML dentro de otro documento HTML. Se crean usando la etiqueta <iframe>.Los
iframes permiten entonces mostrar contenido de una página web dentro de otra sin recargar la
página principal. Un ejemplo de uso se verá más adelante.
LISTAS
<!DOCTYPE html>
<html>
<head>
<title>Lista</title>
</head>
<body>
<h1>Creación de lista</h1>
<h2>Listado de cosas</h2>
<ol>
<li>Árbol</li>
<li>Casa</li>
<li>Edificio</li>
</ol>
</body>
</html>
<ol> Abre la parte de numeración de la lista.
<li> Componentes de la lista.
MENÚ DESPLEGABLE
<!DOCTYPE html>
<html>
<head>
<title>Menú desplegable</title>
</head>
<body>
<label for="atajada">Vota tu atajada favorita de la actual
temporada</label>
<select name="atajada" id="atajada">
<option value="Heaton">Tom Heaton (Aston Villa)</option>
<option value="Schmeichel">Kasper Schmeichel (leicester
City)</option>
<option value="Ederson">Ederson (Man. City)</option>
<option value="Krul">Tim Krul (Norwich)</option>
<option value="De Gea">David De Gea (Man. United)</option>
<option value="Henderson">Dean Henderson (Sheffield
United)</option>
<option value="Leno">Bernd Leno (Arsenal)</option>
<option value="Fabianski">Łukasz Fabiański (West
Ham)</option>
</select>
</body>
</html>
for: Se le da el nombre específico (el que queramos nosotros) para el menú que realizamos.
<select> es lo que abre nuestra parte de menú de selección
‘name’ y ‘id’: se utiliza el mismo nombre que en ‘for’
<option> las diferentes opciones que tenemos donde ‘value’ será el identificador que se
seleccionó esa opción.
INPUTS
Se utiliza para crear controles interactivos generalmente para formularios con el fin de recibir
datos del usuario. Según que queramos recibir utilizaremos los distintos tipos de inputs:
TEXTO
Principalmente utilizado para el ingreso de nombre de usuario.
<!DOCTYPE html>
<html>
<head>
<title>Input de Texto</title>
</head>
<body>
<input type="text" id="username" name="username"
placeholder="Nombre de usuario" required minlength="3" maxlength="25">
</body>
</html>
‘required minlength=”A” maxlenght=”B”’ le hará al que esté rellenando ese campo poner un
usuario de un mínimo de A y máximo de B letras.
placeholder: se utiliza para darle una instrucción o ayuda de que debe poner ahí el usuario.
ÁREA DE TEXTO
<!DOCTYPE html>
<html>
<head>
<title>Input de número</title>
</head>
<body>
<textarea id="comentarios" name="comentarios" rows="4" cols="50"
placeholder="Escribe tus comentarios aquí..."></textarea>
</body>
</html>
CONTRASEÑA
<!DOCTYPE html>
<html>
<head>
<title>Input de contraseña</title>
</head>
<body>
<input type="pw" id="contraseña" name="contraseña"
placeholder="Contraseña" required minlength="8" maxlength="25">
</body>
</html>
MAIL
<!DOCTYPE html>
<html>
<head>
<title>Input de mail</title>
</head>
<body>
<input type="mail" id="mail" name="mail"
placeholder="alumno@[Link]" required minlength="8"
maxlength="25"> >
</body>
</html>
NÚMERO
<!DOCTYPE html>
<html>
<head>
<title>Input de número</title>
</head>
<body>
<input type="number" id="cantidad" name="cantidad" min="1" max="10"
step="1" value="1"></body>
</html>
step: me dice de cuánto aumenta.
value: de donde empieza.
FECHA
<!DOCTYPE html>
<html>
<head>
<title>Input de número</title>
</head>
<body>
<input type="date" id="cumpleaños" name="cumpleaños">
</body>
</html>
CHECKLIST
<!DOCTYPE html>
<html>
<head>
<title>Input de Checklist</title>
</head>
<body>
<input type="checkbox" name="intereses" value="deportes">
Deportes<br>
<input type="checkbox" name="intereses" value="musica"> Música<br>
<input type="checkbox" name="intereses" value="cine"> Cine<br>
</body>
</html>
SELECCIÓN
<!DOCTYPE html>
<html>
<head>
<title>Input de Selección</title>
</head>
<body>
<input type="radio" name="color" value="rojo"> Rojo<br>
<input type="radio" name="color" value="verde"> Verde<br>
<input type="radio" name="color" value="azul"> Azul<br>
</body>
</html>
BOTÓN PARA ENVIAR
<!DOCTYPE html>
<html>
<head>
<title>Botón</title>
</head>
<body>
<input type="submit" value="Enviar">
</body> </html>
BOTÓN PARA RESETEAR
<!DOCTYPE html>
<html>
<head>
<title>Botón</title>
</head>
<body>
<input type="reset" value="Reset">
</body>
</html>
ARCHIVO
<!DOCTYPE html>
<html>
<head>
<title>Input de archivo</title>
</head>
<body>
<input type="file" id="file" name="file">
</body>
</html>
URL
<!DOCTYPE html>
<html>
<head>
<title>Input de URL</title>
</head>
<body>
<input type="url" id="url" name="url" placeholder="Introduce la URL
de tu sitio web">
</body>
</html>
TELÉFONO
<!DOCTYPE html>
<html>
<head>
<title>Input de teléfono</title>
</head>
<body>
<input type="tel" id="tel" name="tel" placeholder="Introduce tu
número de teléfono">
</body>
</html>
TABLAS
<!DOCTYPE html>
<html>
<head>
<title>Input de URL</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<td >Nombre</td>
<td >Edad</td>
<td>Ciudad</td>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>34</td>
<td>Ituzaingo</td>
</tr>
<tr>
<td>Marta</td>
<td>66</td>
<td>Merlo</td>
</tr>
</tbody>
</table>
</body>
</html>
Para empezar a escribir una tabla se usa la etiqueta <table>
<thead> se refiere a la parte superior de esta tabla
<tbody> a los elementos que conformarán la tabla acomodados por esta parte superior
<tr> es cada renglón de la tabla
EXTRAS:
colspan=”n” o rowspan=”n”: permite fusionar n celdas consecutivas, ya sea columnas con colspan
o filas con rowspan
<tr>
<td colspan="2">Posición</td>
<td colspan="1">Canción</td>
<td>Album</td>
<td>Artista</td>
<td>Reproducciones</td>
<td></td>
</tr>
FORMULARIOS
Para realizar un formulario hay que primero comprender su estructura principal:
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
</head>
<body>
<h1>Creación de formularios</h1>
<form action="[Link]" method="GET">
<input type="submit" value="Enviar"> <!-- Botón de enviado -->
</form>
</body>
</html>
<form> dará inicio al formulario
action=””: es donde se enviará cada acción realizada en el formulario.
method: Se usa para enviar los datos del formulario al servidor. Se utilizan dos métodos GET y
POST.
GET: envía los datos anexándolos a la URL de la solicitud, es decir, que pueden ser visibles en la
URL por lo que se deberá utilizar únicamente cuando se envíen datos no sensibles del usuario.
Se puede almacenar en el historial.
POST: Envia los datos en el cuerpo de la solicitud HTTP (Se verá más adelante). Se utiliza cuando
los datos que ingresa el usuario son sensibles.
Un formulario se compone de diferentes campos o <label> donde se indicará qué se estará
ingresando. Luego de eso se hará un input para que el usuario pueda ingresar lo que quiera.
Ahora un ejemplo con un nombre de usuario:
<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
</head>
<body>
<h1>Creación de formularios</h1>
<form action="[Link]" method="GET">
<label for="username">Nombre de usuario:</label>
<br>
<input id="username" name="username" type="text" required
minlength="3" maxlength="25">
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Podemos agregar la cantidad de labels que queramos dándole su nombre en la parte de ‘for’
para que luego pueda ser identificado.