Teoría

Teoría

Aquí voy a ir apuntando lo que aprenda de HTML para probar los cuadros de código.

Índice


Cómo empezar la página.

Este es el código básico para que un archivo HTML sea leído correctamente por un navegador: 
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

<!DOCTYPE html> define la versión de HTML en la que está escrita la página. En este caso estamos usando la versión 5 pero se podría definir otra más antigua.
<html></html> esto le dice al navegador que la página está escrita en HTML. Siempre va después de <!DOCTYPE>.
<head></head> esto es la cabezera de la página. Aquí no va el contenido, aquí se establecen parámetros como el título de la página, el icono, las metaetiquetas, scripts, etc.
<body></body> aquí va todo el contenido normal de la página. Por ejemplo los textos, las imágenes, los vídeos, los botones, etc.
Estos elementos se llaman tags o etiquetas. Todos tienen una etiqueta de entrada y otra de salida que empieza por "/" exceptuando la etiqueta <br>, que puede estar sola.


Etiquetas de la cabezera de la página "<head>"

La etiqueta head sirve para definir la estructura principal de la página. Dentro de esta etiqueta puedes encontrar otras como:
<title></title> como dice su nombre, se encarga de darle un título a la página que aparecerá en la pestaña del navegador.
<meta></meta> sta etiqueta tiene muchas opciones y sirve para definir qué contenido existe en la página y a quién o a qué pertenece.
<link rel="" type="" href=""/> esta etiqueta es un enlace (como una acceso directo del ordenador) de un archivo externo a la página con nuestra página, que le asigna un nombre.
No tiene segunda etiqueta para cerrar
Se usa sobre todo para establecer un tema en la página
<style> { }</style> establece el diseño de uno o varios elementos en una página. Entre los corchetes se sitúan definiciones como colores, posiciones, etc. Puede haber varias etiquetas style en cada página.

Ejemplo de <head>: 

<title>Ramón Hdez - Teoría</title>
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Ramón HDEZ - Creador" content="Copyright 2018 (c) Ramón Hernández García.">
<meta name="robots" content="NOODP">
<meta name="description" content="Página personal de Ramón Hernández, estudiante madrileño.">
<meta name="keywords" content="Webpage, Ramón Hernández, rmnhg, kernel, linux, PC, Windows">
<meta name="author" content="Ramón Hernández">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />

<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/css/material-kit.css" rel="stylesheet"/>
<link href="assets/css/demo.css" rel="stylesheet" />

<style>
h1 {color:red;}
p {color:blue;}
</style>

Cuerpo. Códigos frecuentes.


Aquí os voy a dejar los códigos de elementos comunes y no tan comunes en una página dentro de <body>:

Cómo poner imágenes

Si queremos usar imágenes en nuestra página web debemos usar la etiqueta de <img width="" height=""></img> con el atributo src="<link>", width="<ancho_de_la_imagen> y height="<altura_de_la_imagen>".
Por ejemplo si quiero insertar esta imagen deberé escribir:
<img src="http://c1.staticflickr.com/4/3128/2436481628_881688fa7f.jpg"></img>

Quedaría así:


Y como no he añadido ni width ni height la imagen se muestra en su tamaño original.

Cómo poner vídeos

Para poner vídeos en nuestra página tenemos dos opciones:
  1. Usar la etiqueta <iframe width="" height=""></iframe> : Esta etiqueta lo que hace es abrir una página web dentro de otra. Es útil para abrir una página con un reproductor de vídeo, como es el caso de los vídeo embed de YouTube con links del formato de "https://www.youtube.com/embed/12345"
    Por ejemplo si quiero insertar este vídeo de AuronPlay deberé escribir:
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ADziCf-2EtU" frameborder="0" allowfullscreen></iframe>

    Quedaría así:

    Nota: los atributos de frameborder="0" y allowfullscreen hacen que no aparezca el marco de este subnavegador y que se pueda poner en pantalla completa.

  2. Usar la etiqueta <video width="" height="" controls></video> : Esta etiqueta lo que hace es abrir el reproductor nativo del navegador para reproducir vídeos directamente de una dirección determinada. Para establecer el vídeo necesito poner el atributo controls para activar los controles del reproductor y meter dentro otra etiqueta: <source> con los atributos src="<dirección_del_vídeo>" y type="<formato_del_vídeo>".
    Por ejemplo si quiero insertar este vídeo deberé escribir:
    <video width="560" height="315" controls><source src="assets/video/SampleVideo_1280x720_2mb.mp4" type="video/mp4"></video>

    Quedaría así:


Cómo poner música

Si queremos poner música en nuestra página web debemos usar la etiqueta <audio></audio> con el atributo controls para activar los controles del reproductor y con otra etiqueta dentro: <source> con los atributos src="<dirección_del_audio>" y type="<formato_del_audio>".
Por ejemplo si quiero insertar este sonido de caballo deberé escribir:
<audio controls><source src="assets/audio/horse.mp3" type="audio/mpeg"></audio>

Quedaría así:



Cómo poner javascript



Más cosillas: colores, tipos de texto, parametros, alineación, etc.


Más cosas:

Formatos de texto

Existen etiquetas que nos permiten customizar los textos. Nos podemos encontrar algunas como:
<b></b> o <strong></strong> hace que el texto salga en negrita.
Ejemplo: 
<b>Esto será un texto en negrita</b>

Esto será un texto en negrita
<i></i> hace que el texto salga en fuente itálica, en cursiva.
Ejemplo: 
<i>Esto será un texto en cursiva</i>

Esto será un texto en cursiva
<mark></mark> subraya el texto en amarillo.
Ejemplo: 
<mark>Esto será un texto subrayado en amarillo</mark>

Esto será un texto subrayado en amarillo
<ins></ins> subraya el texto por debajo.
Ejemplo: 
<ins>Esto será un texto subrayado</ins>

Esto será un texto subrayado
<small></small> sirve para introducir aclaraciones, hace el texto un poco más pequeño.
Ejemplo: 
<small>Esto es un texto en pequeño</small>

Esto es un texto en pequeño
<p></p> sirve para crear párrafos en la página. No conservan los saltos de línea.
Ejemplo: 
<p>Esto es un párrafo
con un salto de línea</p>

Esto es un párrafo con un salto de línea


<pre></pre> sirve para insertar texto preformateado en la página. Sí conserva los saltos de línea.
Ejemplo: 
<pre>Esto es un texto preformateado
con un salto de línea</pre>

Esto es un texto preformateado
			con un salto de línea



Tabla

Para crear una tabla deberemos usar la etiqueta <table></table> con varias subetiquetas:
<tr></tr> crea una fila horizontal y, a su vez, contiene más etiquetas:
  1. <th></th> que sirve para crear la primera fila que contiene los nombres de los elementos de cada columna.
  2. <td></td> que sirve para añadir las siguientes filas, todas comunes.
<caption></caption> que crea un título para la tabla. Esto es opcional y también va dentro de <table></table>
Por ejemplo, si queremos introducir una tabla con datos de personas podemos escribir:
<table style="width:50%;border:1px;padding-left:40px;">
	<caption> Datos de personas</caption>
	<tr>
		<th style="border:1px solid black;padding:10px">Nombre</th>
		<th style="border:1px solid black;padding:10px" colspan="2">Apellidos</th>
		<th style="border:1px solid black;padding:10px">Edad</th>
	</tr>
	<tr>
		<td style="border:1px solid black;padding:10px">Ramón</td>
		<td style="border:1px solid black;padding:10px">Fernández</td>
		<td style="border:1px solid black;padding:10px">Romero</td>
		<td style="border:1px solid black;padding:10px">19</td>
	</tr>
	<tr>
		<td style="border:1px solid black;padding:10px">Pedro</td>
		<td style="border:1px solid black;padding:10px">Calvo-Sotelo</td>
		<td style="border:1px solid black;padding:10px">Martínez</td>
		<td style="border:1px solid black;padding:10px">44</td>
	</tr>
</table>

Y quedaría así:
Datos de personas
Nombre Apellidos Edad
Ramón Fernández Romero 19
Pedro Calvo-Sotelo Martínez 44

Links útiles: