HTML¶

Comenzamos trabajando con la parte de contenido HTML

Los recursos web que usaremos como apuntes son estos:

Los ejercicios de esta página son una ampliación de los ejercicios de Fernando Rodríguez Morón

Teoría¶

Explicación de:

etiquetas, cierre y autocierre
atributos
estructura de html

Referencia de html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

  </body>
</html>

Normas para las prácticas¶

Para la realización de todas las prácticas se deben cumplir las siguientes normas:

Los nombres de directorios y archivos no tendrán espacios en blanco
Nombre de directorios y ficheros en minúsculas
Los archivos deben tener siempre su extensión: .html .css .js
La estructura de directorios del sitio web tendrá la siguiente forma:
Se deben utilizar las etiquetas html5: main, figure, section, article, nav, header, footer, aside...
Las rutas deben ser siempre relativas.

/
└── index.html
└── html
│   ├── index.html
│   ├── ejercicio1.html
│   ├── ejercicio2.html
│   ├── ...
│   ├── css
│   │   ├── theme.css
│   │   └── theme_extra.css
│   ├── images
│   │   ├── algo.png
│   │   └── ...
│   ├── js
│   ├── fonts
│   ├── video
│   └── audio
├── css
│   └── ...
├── bootstrap
│   └── ...
└── js
    └── ...

Ejercicio 1¶

Hola mundo

Etiquetas:

html, head, meta, title, body
br, img

ejercicio 1

Ejercicio 2¶

Los tags meta son etiquetas que no se muestran pero sirven para el control de la página o dan información extra para los motores de búsqueda.

Investiga en internet sobre el tag meta con información de Refresh

Haz una página que escriba "Va a ser redirigido a la web del instituto" y que tras 5 segundo enlace a la web del IES

Ejercicio 3¶

Continuación de los campos meta

Visita esta página https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/los-meta-tags-mas-importantes-y-su-funcion/

Realiza la siguiente web y añade los meta para:

Poner que esa página la has hecho tú
Poner una descripción
Poner como palabra clave "html, mi primera web"
Que se elimine de la cache el 1 de enero del año que viene

Utiliza los tags:

h1, abbr, b, i, s, p

ejercicio 3

Ejercicio 4¶

Utiliza las etiquetas:

h1, ol, ul, li, dl, dt, dd

Texto: descargar

ejercicio 4

Ejercicio 5¶

Crea una página web con:

Una lista ordenada de tus 3 cosas favoritas en orden
Una lista sin orden de 3 cosas que no te gusten
Una lista de definiciones que te interesen

ejercicio 5

Ejercicio 6¶

Utiliza listas anidadas des ordenadas para hacer un racimo de uvas

ejercicio 6

Ejercicio 7¶

Utiliza las etiquetas:

table, thead, tbody, tr y td

Ejemplo de elementos:

<table>
    <caption>Presupuestos del 2020</caption>
    <thead>
        <tr>
            <th scope="col">Elementos</th>
            <th scope="col">Gastos</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Donuts</td>
            <td>3000€</td>
        </tr>
        <tr>
            <td>Aguacates</td>
            <td>18000€</td>
        </tr>
    </tbody>
</table>

Crea la siguiente tabla básica

ejercicio 7

Ejercicio 8¶

ejercicio 8

Ejercicio 9¶

ejercicio 9

Ejercicio 10¶

ejercicio 10

Ejercicio 11¶

ejercicio 11

Ejercicio 12¶

ejercicio 12

Ejercicio 13¶

ejercicio 13

Ejercicio 14¶

Crea una página web con tu horario

Formularios¶

Los formularios son la forma que tenemos en las páginas web para que los usuarios nos manden información. Los utilizamos muchas veces...

Al publicar un comentario en una página de Facebook o Instagram a através de la web
Al pedir comida a alguna empresa que tenga web
Al realizar pagos

La estructura general de los formularios es la siguiente:

<form>
  <fieldset>
    <legend>Nombre completo</legend>
    <p>
      <label for="nombre">Dinos tu nombre</label>
      <input type="text" name="nombre" id="nombre" value="" placeholder="Nombre completo...">
    </p>
  </fieldset>
  <fieldset>
    <legend>¿Cómo quieres el batido?</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small">
      <label for="size_1">Pequeño</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium">
      <label for="size_2">Mediano</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large">
      <label for="size_3">Grande</label>
    </p>
  </fieldset>
  <fieldset>
    <legend>Finalizar</legend>
    <input type="submit" name="enviar" value="Hacer pedido">
  </fieldset>
</form>

Ejemplo form

Observa las siguientes etiquetas y entiende su significado:

form
fieldset
legend
input
label

Entiende todos los atributos:

type
name
id
for
value
placeholder

Ejercicio 15¶

Haz un formulario completo con todos los tipos de controles input

<input type="button">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
<input type="checkbox">
<input type="radio">
<textarea rows="10" cols="50">Esto es el contenido</textarea>

NOTA: Ten en cuenta que los controles radio que estén asociados deben compartir el mismo nombre.

Ejercicio 16¶

Realiza el siguiente formulario de contacto:

Contact form

Ejercicio 17¶

Crea un formulario para que la gente pueda pedir un presupuesto a una empresa de pintura. Debe contener la siguiente información:

Datos de contacto
- Nombre
- Dirección completa
- Email
Datos del trabajo
- Número de habitaciones
- Color
- Un checkbox de si incluye pintar el techo
Otra información
- Un text area
Finalizar
- Botón de reset
- Botón de enviar

Ejercicio 18¶

Estás haciendo el formulario para que una pizzería de tu barrio pueda recogar pedidos en la web. Tienes que crear un formulario con los siguientes campos. Incluye una imagen de una pizza al comienzo de la página.

Configura tu pizza:

Tipos de masa: fina o gorda
Tipos de salsa: tomate, barbacoa o carbonara
Queso: Sí o no
Ingrediente: Busca un listado de ingrediente y pon al menos 10 posibilidades
Tamaño: pequeña, mediana, familiar

Datos de pago:

Número de cuenta
Mes de caducidad
Código de seguridad

Datos de entrega:

Dirección completa
textarea con observaciones

Finalizar:

Reset
Enviar

Ejercicio 19¶

Multimedia. Crea una página con la etiqueta audio, vídeo con fichero que descargues.

Contenido embebido. Al final de la página Copia el código de Youtube de algún vídeo para incluirlo en tu página.

Contenido embebido. Añade 1 canción a la lista de spotify compartida y pon al comienzo de esta página este código. Tiene cosas de CSS que ya veremos, debes sustituir la sección en la que pone XXXXXXXXXXXXXXX por la url que aparece en el Moodle.

<div style="float: right;">
<h1>Cosas que le gustan<br/> al resto de mi clase</h1>
<iframe src="XXXXXXXXXXXXXXX" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</div>

Ejercicio 20¶

Crea una página con un h1 con el nombre del instituto y un párrafo con una descripción. Luego busca en google maps su ubicación e investiga cómo puedes poner en tu página web el mapa incrustado.

Luego busca como llegar desde el instituto a algún punto del mundo andando e incrusta también la ruta.

Ejemplo: