Guia HTML

Resumen.
Tutorial de HTML
Introduccin
HTML = HyperText Markup Language
Se usan tags para identificar contenido.
Para el diseo Web, adems de HTML (estructura), hay que aprender CSS (presentacin),
JavaScript (comportamiento), PHP (backend, motor) y CMS (gestin de contenido).
La estructura bsica de un archivo HTML es la siguiente:
<html>
<head>
Contiene todos los elementos no visuales que hacen funcionar la pgina. Ejemplo:
<title>first page</title> El ttulo es importante para los motores de bsqueda.
</head>
<body>
Contiene elementos visuales. Ejemplo:
This is a line of text.
</body>
</html>
Como se trata de un archivo de texto es posible utilizar cualquier editor de texto (ej: Notepad).
El archivo se guarda con la extensin .html o .htm .
Basics
Prrafos
<p>hola</p> Crea un prrafo
hola<br/>hola Nueva lnea de texto sin crear un prrafo
Formato de texto
<b>hola</b> Negrita
<big>hola</big> Grande
<i>hola</i> Cursiva
<small>hola</small> Pequeo
<strong>hola</strong> Fuerte (visualmente: negrita). Significa que el texto es importante
<sub>hola</sub> Subscripted text: Ms pequeo y por debajo de la lnea habitual
<sup>hola</sup> Superscripted text: Ms pequeo y por encima

<ins>hola</ins> subrayado
<em>hola</em> Importante (visualmente: subrayado)
<del>hola</del> tachado
Headings, lneas y comentarios

<h1>El ms grande</h1> Cabeceros
<h6>El ms pequeo</h6>
<hr/> Lnea horizontal
 Comentario
Elementos
Los elementos se escriben usando un tag de empiece y otro de final (en general, ya que
algunos solo consisten en un nico tag). Los elementos estn anidados unos dentro de otros.
Atributos
Dan informacin adicional sobre un elemento o tag, modificndolos a su vez. Muchos tienen
un valor para determinarlos.
<p align=center>Alinea el texto en el centro.</p>
<hr width=50px> Lnea con ancho de 50 pxeles
<hr width=50%> Se define tambin el ancho con porcentajes
Imgenes
<img src=image.jpg height=50% width=50px border=1px alt= Texto que aparece si no
se puede ver imagen/> src define la URL de la imagen
Links
<a href=http://www.sololearn.com target=_blank>Ir a solo learn</a> El target del ejemplo
hace que se abra en una ventana nueva
Listas
<ol> Lista ordenada (<ul> si es lista sin orden)
<li>Rojo</li>
<li>Azul</li>
<ol/>
Tablas
<table align=center border=2>
<tr> Define fila
<th bgcolor=red>Red</th> Define cada header
<th>Blue</th>
<th>Green</th>
</tr>
<tr>
<td><br/></td> Define cada columna
<td colspan=2><br/></td> Une dos columnas en una. rowspan se utiliza de forma anloga
</tr>
</table>
Elementos inline and block

Los elementos block empiezan en lnea nueva: <h1>, <form>, <li>, <ol>, <ul>,<p>, <pre>,
<table>, <div>. El ltimo sirve para contener otros elementos HTML y darles formato con CSS,
por ejemplo.
Los elementos inline normalmente aparecen en la misma lnea: <b>, <a>, <strong>,<img>,
<input>,<span>. El ltimo suele usarse para dar estilo a ciertas partes del texto. Estos
elementos no pueden contener elementos block, pero s al revs.
Algunos pueden funcionar como ambos: applet (embedded Java applet), iframe (inline frame),
ins (inserted text), map (image map), object (embebbed object), script (script within an HTML
document).
Forms
Se utilizan para recopilar informacin sobre el usuario.
<form action=http://www.sololearn.com method=GET> action indica la pgina que se

cargar despus de enviar. Method indica si la informacin enviada ser visible (GET) o no
(POST)
</form>
<form>
<input type=text name=username/><br/>
<input type=password name=password/>< br/>
<input type=radio name=gender value=male/>Male < br/> Permite escoger solo uno
<input type=radio name=gender value=female/> Female< br/>
<input type=checkbox name=gender value=1/>Male < br/> Permite escoger ambos
<input type=checkbox name=gender value=2/> Female< br/>
<input type=submit value=Submit/> < br/> Botn con el nombre del valor
<input type=email name=email/> < br/> Exige el format del email (@)
<textarea name=message></textarea> Permite aadir ms de una lnea
</form>
Colores HTML
Los colores se representan con valores hexadecimales (de 0 a F). Se definen con # + 3 o 6
caracteres.
<body bgcolor=#000099>
<Font color=#000099>kdjfk </font>

Frames
Una pgina puede dividirse en frames. Cada tag <frame> define una ventana dentro de un
<frameset> (este ltimo tag no puede usarse en HTML5).
<frameset cols=100, 25%,*></frameset> Nmero de columnas o filas, y porcentaje o nmero

de pixeles de espacio que ocupa cada uno.
<frameset rows=100, 25%,*></frameset>
<frame noresize=noresize> El usuario no puede elegir el tamao del elemento
<frameset cols=25%,50%,25%>
<frame src=a.htm/>
<frame src=b.htm/>
<frame src=c.htm/>
<noframes>Frames not supported!</noframes> Aparece si el navegador no soporta frames
</frameset>
<iframe> Define un frame en lnea
HTML5
Introduccin
El documento empieza con la siguiente declaracin: <!DOCTYPE HTML>
La declaracin de charsed tambin est simplificada: <meta charset=UTF-8>
Modelos de contenido
Se introducen siete nuevos modelos de contenido en HTML5, mientras que antes slo se
tenan el block y el inline. Se disean para hacer la estructura ms significativa para el
navegador y diseador. Un elemento puede pertenecer a ms de uno de estos modelos.
- Metadata: Establece la presentacin o comportamiento del resto del contenido. Sus

elementos se encuentran en la cabeza del coumento.
- Embedded: Contenido que importa otros recursos en el documento.
- Interactivo: Contenido para interaccin con el usuario.
- Heading: Define el cabecero de la seccin.
- Phrasing: Contiene elementos inlet.
- Flow content: Contiene la mayora de elementos HTML5 que se incluiran en el flujo
normal del documento.
- Sectioning content: Define el alcance de los encabezados, contenido, navegacin y pies
de pgina.
Estructura habitual de la pgina
Header, nav y footer

<div id=header> (HTML4) <header> (HTML5)
<footer></footer>
<nav></nav> No tiene por qu contener todos los enlaces, slo bloques de ellos. Por ejemplo
algunos estarn en el footer
Article, section y aside

<article> es una pieza de contenido independiente. Pueden estar anidados dentro de otros
(por ejemplo los comentarios de un post de blog dentro del artculo que representa el post del
blog). Antes se usaba <div>.
<section> es un contenedor lgico de la pgina o artculo. Pueden usarsepara dividir el

contenido dentro de un artculo, aunque no tiene slo por qu usarse aqu.
<aside> tambin puede ir dentro de article si se refiere directamente al contenido de este.
Elemento audio y vdeo

Hay dos formas de introducirlo:
<audio src=audio.mp3 controls>

Audio element not supported by your browser Texto que aparece si no se consigue abrir
</audio>
<audio controls>
<source src=audio.mp3 type=audio/mpeg> Se pueden linkar varios audios. Se usar el
primer formato reconocido
<source src=audio.ogg type=audio/ogg> No lleva />
Audio element not supported by your browser
</audio>
El caso de video es anlogo. Por ejemplo:
<video controls>
<source src=video.mp4 type=video/mp4>
Video
</video>
Controls significa que hay un botn para que el usuario pulse. Autoplay hara que se
reprodujera automticamente. Loop lo pondra en bucle.
El elemento progreso
Status:<progress min=0 max=100 value=35></progress>
Web Storage API

HTML5 permite que las pginas web almacenen datos en el ordenador del usuario. Todas las
pginas del mismo dominio podrn acceder a estos datos.
Hay dos tipos: sessionStorage(), que se destruye cuando se cierra el navegador, y

localStorage(), que no. Ambos usan la misma sintaxis en las funciones.
Guardar un valor: localStorage.setItem(key1, value1);

Obtener un valor (lo imprime): alert(localStorage.getItem(key1));
Borrar un valor: localStorage.removeItem(key1);
Borrar todos: localStorage.clear();
Geolocation API
Navigator.geolocation.getCurrentPosition(); Devuelve un objeto si funciona. Siempre da
latitud, longitud y la exactitud.
Los parmetros posibles son:
- showLocation. Es obligatorio y Define el mtodo de la devolucin de llamada que

recupera la informacin.
- ErrorHandler. Es opcional. Define el mtodo a usar cuando un error ocurre en el
proceso de la llamada asncrona.
- Options. Tambin es opcional. Define las opciones para recuperar la informacin.
La posicin puede representarse en dos formas: geodtica y cvica.
Drag and Drop API

Permite coger un objeto y arrastrarlo a una posicin diferente: <img draggable=true/>
La API para HTML5 se basa en eventos.
SVG
Son las siglas de Scalable Vector Graphics. Sirven para dibujar imgenes que no pierden calidad
al ampliar.
<img src=image.svg alt= height=300>
Para dibujar un crculo, rectngulo, lnea, polilnea, elipse o polgono :
<svg width=2000 height=2000>

<circle cx=80 cy=80 r=50 fill=green stroke=blue/> stroke pone el borde
</svg>

<rect width=300height=100
x=20 y=20 fill=green/>
</svg>

<line x1=10 y1=10 x2=200 y2=100
style=stroke:#000000; stroke-linecap:round;
stroke-width:20/>
</svg>

<polyline style=stroke-linejoin:miter; stroke:black;
stroke-width:12; fill: none;
points=100 100, 150 150, 200 100/>
</svg>

<circle cx=80 cy=80 rx=50 ry=70 fill=green/> stroke pone el borde
</svg>

<polygon style=fill: green; stroke:black;
points=100 100, 150 150, 200 100/>
</svg>
SVG Animations and Paths

<rect width=150height=150 fill=orange>
<animate attributeName=x from 0 to 300 attributeName especifica el atributo que va a
modificarse
dur=3s fill=freeze repeatCount=2/> fill especifica si el valor del atributo vuelve a su valor
inicial (remove) o se queda en el ultimo (freeze). Si se quiere repetir indefinidamente, se
asignar el valor indefinite
</rect>
</svg>
En path se describe el recorrido que queremos que haga el boli. En el siguiente ejemplo se
mueve hasta la posicin 0, 0, luego 200 abajo y a la derecha, etc. Z es para cerrar la forma. Si
en lugar de maysculas se usaran minsculas, indicara que son posiciones relativas.
<path d=M 0 0 L200 200 L200 0 Z style=stroke:#000; fill:none;/>
</svg>
El elemento canvas
Se utiliza para incluir desde lneas simples hasta objetos grficos complejos.
<canvas id=canvas1 width=200 height=100> El id se incluye para llamarlo desde

Javascript
</canvas>
<html>
<head></head>
<body>
<canvas id="canvas1"
width="400" height="300"></canvas>
<script>
var can = document.getElementById("canvas1");
var ctx = can.getContext("2d");
</script>
</body>
</html>
Dudas
Cmo se montan juntos el CSS y el HTML?
Por qu si se pone el texto despus del hr luego sale siempre a la izquierda, aunque ponga
centrado?
<html>
<head>
<title>Attributes</title>
</head>
<body>
<p align="center">This is a text <br />This is also a text.
<hr width="10%" align="right" />
</p>
</body>
</html>
Dnde se guardan las imgenes?
Class y span
<head>
<title>My Blog</title>
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
</head>
Trailing solidus not allowed

Guia HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Guia HTML

Uploaded by

Copyright:

Available Formats

Resumen.

Se usan tags para identificar contenido.

La estructura bsica de un archivo HTML es la siguiente:

hola<br/>hola Nueva lnea de texto sin crear un prrafo

<strong>hola</strong> Fuerte (visualmente: negrita). Significa que el texto es importante

<sub>hola</sub> Subscripted text: Ms pequeo y por debajo de la lnea habitual

<sup>hola</sup> Superscripted text: Ms pequeo y por encima

<em>hola</em> Importante (visualmente: subrayado)

Headings, lneas y comentarios

<hr/> Lnea horizontal

Comentario

<p align=center>Alinea el texto en el centro.</p>

<hr width=50px> Lnea con ancho de 50 pxeles

<hr width=50%> Se define tambin el ancho con porcentajes

Elementos inline and block

<form action=http://www.sololearn.com method=GET> action indica la pgina que se

<Font color=#000099>kdjfk </font>

<frameset cols=100, 25%,*></frameset> Nmero de columnas o filas, y porcentaje o nmero

<frameset rows=100, 25%,*></frameset>

<frame noresize=noresize> El usuario no puede elegir el tamao del elemento

<iframe> Define un frame en lnea

La declaracin de charsed tambin est simplificada: <meta charset=UTF-8>

- Metadata: Establece la presentacin o comportamiento del resto del contenido. Sus

Header, nav y footer

Article, section y aside

<section> es un contenedor lgico de la pgina o artculo. Pueden usarsepara dividir el

<aside> tambin puede ir dentro de article si se refiere directamente al contenido de este.

Elemento audio y vdeo

<audio src=audio.mp3 controls>

El caso de video es anlogo. Por ejemplo:

Web Storage API

Hay dos tipos: sessionStorage(), que se destruye cuando se cierra el navegador, y

Guardar un valor: localStorage.setItem(key1, value1);

Los parmetros posibles son:

- showLocation. Es obligatorio y Define el mtodo de la devolucin de llamada que

La posicin puede representarse en dos formas: geodtica y cvica.

Drag and Drop API

La API para HTML5 se basa en eventos.

Para dibujar un crculo, rectngulo, lnea, polilnea, elipse o polgono :

<svg width=2000 height=2000>

<svg width=2000 height=2000>

<svg width=400 height=410>

<svg width=400 height=410>

<svg width=2000 height=2000>

<svg width=400 height=410>

SVG Animations and Paths

<canvas id=canvas1 width=200 height=100> El id se incluye para llamarlo desde

<p align="center">This is a text <br />This is also a text.

<hr width="10%" align="right" />

<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">

Trailing solidus not allowed

You might also like