Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML

No description
by

José Pol Lezcano

on 31 March 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML

HTML
¿Qué es HTML?
HTML es un lenguaje para crear páginas web.

HTML son las iniciales de Hyper Text Markup Language
HTML es un lenguaje de marcas
Un lenguaje de marcas es un lenguaje que se define con etiquetas que describen un documento.
Los documentos HTML son páginas web.
Etiquetas de HTML
Las etiquetas son palabras clave rodeadas de los signos mayor y menor qué cómo <html>
Normalmente van en parejas con una etiqueta de apertura y una de cierre
La etiqueta de cierre lleva una barra inclinada
<etiqueta>
Contenido
</etiqueta>
Elementos HTML
Usualmente nos referimos a un "elemento" y a "etiquetas" como sinónimos
Pero un elemento es todo lo que hay entre dos etiquetas incluso las etiquetas.
Ejemplo de un elemento (o etiqueta):
<p>
Esto es un párrafo
</p>
Navegadores web
Un navegador web es un software que se encarga de leer los documentos HTML y mostrarlos como páginas web
Los navegadores no muestran las etiquetas, pero las usan para determinar como mostrar los contenidos
Estructura del documento HTML
Un documento HTML presenta:
- Una etiqueta de inicio DOCTYPE
- Un elemento html que engloba la totalidad de los elementos del documento.
- Un elemento body que engloba todos los contenidos visibles
<!DOCTYPE html>
<html>
<body>
<h1>Esto es un encabezamiento</h1>
<p>Esto es un párrafo.</p>
<p>Esto es otro párrafo</p>
</body>
</html>
declara la versión de HTML
contiene TODO el documento
contiene TODO el contenido
Ejercicio 1:
Uso del block de notas
para crear un documento HTML
1-. Escribimos el siguiente texto con el bloc de notas
2-. Lo guardamos y cambiamos su extensión .txt por la
extensión .html
3-. Lo abrimos haciendo doble click (se abrirá con un navegador)
<!DOCTYPE html>
<html>
<body>

<h1>Mi primera web</h1>

<p>Hola, me llamo
tunombreaquí
y este es mi primera web</p>

</body>
</html>
HTML básico, 4 etiquetas
Encabezamientos <h1>

Párrafos <p>

Enlaces <a>

Imágenes <image>
Copia el siguiente texto en el block de notas y repite los pasos del ejercicio 1
Ejercicio 2
Uso de cuatro etiquetas para abrir boca...
<!DOCTYPE html>
<html>
<body>

<h1>Esto es un encabezamiento</h1>
<h2>Esto es un encabezamiento</h2>
<h3>Esto es un encabezamiento</h3>

<p>Esto es un párrafo.</p>
<p>Esto es otro párrafo.</p>

<a href="http://www.google.com">Esto es un enlace</a>

<p>Debajo de esta línea saldrá una imagen,..., espero.</p>
<img src="logo_navegadores.png">

</body>
</html>
HTML - Elementos
<!DOCTYPE html>
<html>
<body>

<h1>Esto es un encabezamiento</h1>
<h2>Esto es un encabezamiento</h2>
<h3>Esto es un encabezamiento</h3>

<p>Esto es un párrafo.</p>
<p>Esto es otro párrafo.</p>

<a href="http://www.google.com">Esto es un enlace</a>

<p>Debajo de esta línea saldrá una imagen,..., espero.</p>
<img src="logo_navegadores.png">

</body>
</html>
El documento tiene un elemento <body> que incluye 3 elementos <h_>, 3 elementos <p>, un elento <a> y un elemento <img>
El elemento <html> incluyte todos los elementos del documento salvo el <!DOCTYPE>
NO OLVIDAR LAS ETIQUETAS DE CIERRE
Existen etiquetas vacias (ej: <br>)
HTML no es sensible al uso de mayúsculas y minúsculas, pero se recomienda el uso de minúsculas.
Tampoco es sensible al uso de espacios y saltos de línea. Úsalos para mejorar el aspecto del código.
HTML - Atributos
<!DOCTYPE html>
<html>
<body>

<h1>Esto es un encabezamiento</h1>
<h2>Esto es un encabezamiento</h2>
<h3>Esto es un encabezamiento</h3>

<p>Esto es un párrafo.</p>
<p>Esto es otro párrafo.</p>

<a href="http://www.google.com">Esto es un enlace</a>

<p>Debajo de esta línea saldrá una imagen,..., espero.</p>
<img src="logo_navegadores.png">

</body>
</html>
Los atributos dan información adicional a las los elementos
Siempre se colocan en la etiqueta inicial y van entre comillas
Siempre van en parejas con su nombre y su valor. Ej: src="logo_navegadores.png"
Es insensible al uso de mayúsculas o minúsculas pero se recomienda usar siempre las minúsculas
ENCABEZAMIENTOS <h1>
Los encabezamientos se definen con las etiquetas <hX> dónde X es un valor del 1 al 6, siendo 1 para el encabezamiento principal y 6 para el menos destacado.
No hay que usar los encabezamientos para poner negrita en un texto, los buscadores usan los contenidos de las etiquetas <h...> para situar las webs

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
Líneas <hr>
La etiqueta
<hr>
dibuja una línea que puede ser usada para separar contenidos
Comentarios en documentos HTML
Las etiquetas
<!--
, y
-->
sirven para comentar el documento.
ÚSALAS, facilitará la comprensión de tu código a otras personas, ¡y a ti mismo!
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<!-- This is a comment -->
Falta un elemento de la estrucutra, el <head></head> que se sitúa antes del body, se explicará más adelante.
Párrafos <p>
La etiqueta
<hr>
dibuja una línea que puede ser usada para separar contenidos
Comentarios en documentos HTML
Las etiquetas
<!--
, y
-->
sirven para comentar el documento.
ÚSALAS, facilitará la comprensión de tu código a otras personas, ¡y a ti mismo!
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<!-- This is a comment -->
Formato de texto
<b>Texto en negrita</b><br>
<em>Texto enfatizado (cursiva)</em><br>
<i>Texto en cursiva</i><br>
<small>Texto pequeño</small><br>
<strong>Texto importante (negrita)</strong><br>
Texto<sub>subíndice</sub><br>
Texto<sup>superíndice</sup><br>
<ins>Texto insertado (subrayado)</ins><br>
<del>Texto borrado (tachado)</del><br>
<mark>Texto marcado</mark><br><br>
Etiquetas de formato de texto
Etiquetas salida ordendor :P
<code>Código de ordenador (fuente monospace)</code><br>
<kbd>Entrada de texto de teclado</kbd><br>
<samp>Salida de computadora</samp><br>
<var>Variable</var>
<pre>Preformateado
(incluye un salto de línea
al inicio y conserva los espacios)</pre><br><br>
Ejercicio 4
Crea un documento con los códigos que verás a continuación:
- Encabezamientos
- Líneas
- Parrafos
- Formato de Texto
<abbr title="Aquí puedes incluir explicaciones breves">La etiqueta &#60;abbr&#62; incluye una caja con texto que aparece al pasar por encima del texto marcado</abbr><br>

<address>Escrito por <a href="mailto:webmaster@example.com">José Pol</a>.<br>
Visitanos en:<br>
Ejemplo.com<br>
AC 564, ESPAÑA (cursiva y cambio de líneas)</address>

Este párrafo va de izquierda a derecha.<br>
<bdo dir="rtl">Pero este va de derecha a izquierda. Utilísimo, ¿a que sí?.</bdo><br>

<blockquote cite="puedes incluir la fuente aquí">Introduce un tabulador a la izquierda en todo el texto y saltos de línea antes y después del mismo. Sirve para hacer citas de fuentes que se pueden indicar con el atributo cite, sin que tenga repercusión en el documento.</blockquote>

<q>La etiqueta &#60q&#62 incluye unas "comillas" igual que si lo hicieras por texto</q><br>

La etiqueta <cite>cite</cite> simplemente pone en cursiva un texto para hacer citas<br>

Exactamente lo mismo que hace <dfn>dfn</dfn><br>
Etiquetas de citas
Ejercicio 5
Prepara un documento un poco extenso e incluye:
- un enlace con y sin target="_blank". Comprueba la diferencia.
- un ancla.
ENLACES <a>
La etiqueta que crea los enlaces es <a></a>
Por defecto un enlace se mostrará:
subrayado y azul si no ha sido visitado
subrayado y púrpura si ha sido visitado
subrayado y rojo si está activo (pulsado)
al pasar sobre un enlace el cursor nos mostrará el dedito de Vettel :-)
Sintaxis
<a href="url">Texto enlace</a>
Atributo
target=""
indica dónde abrir el documento.
_blank
lo abre en una ventana nueva. Por defecto lo abrirá en la misma ventana
Atributo id
=""
Crea un ancla que puede ser referenciado desde otro elemento <a>
<a id="ancla">Sección anclada</a>
<a href="#tips">Visita la sección anclada</a>
<a href="url#tips">Visita la sección anclada en la página indicada por la url</a>
Elemento <head></head>
En el head se encuentra información específica del documento y la ubicación de archivos relacionados con él. La información del head no aparecerá en pantalla. En el head en contraremos los siguientes elementos:
"mailto:direccióncorreo" abre el gestor de correo para enviar un e-mail a la dirección indicada
<title>
Da título a la página que figura en el encabezamiento del navegador y que luego servirá para dar nombre a la página al guardarla en favoritos. También da información a los navegadores.

<meta>
Permite dar información para los navegadores. Funciona con los siguientes atributos:
<meta name="keywords" content="..., ..., ...">
<meta name="description" content="..., ..., ...">
<meta name="author" content="José Pol">
<meta http-equiv="refresh" content="30">
<meta charset="utf-8">
permite a la página emplear los caracteres españoles y catalanes (ñ, á, é, i, ó, ú, à, è, ò)

Otros elementos importantes son
<link>
y
<scritp>
que se verán más adelante.
A partir de ahora en todos tus ejercicios
Incluye el elemento <head> con el elemento <meta charset> y con el elemento <title>, cómo mínimo.
Estilos CSS
CSS (Cascading Style Sheets) se utiliza para formatear los documentos HTML.
CSS fue introducido con el HTML4 y sustituye a un montón de etiquetas HTML que definían los estilos de los elementos y que con el CSS se recomienda evitar.
CSS se incorpora en el documento HTML de tres maneras:
En la linea a formatear: mediante el atributo style=""
En el mismo documento HTML: mediante la etiqueta <style>...</style> en el <head>
En un archivo externo: al que se referencia en el <head> con el elemento <link>
Para abrir boca con el CSS, Ejercicio 6
Crea un documento HTML que incorpore los siguientes ejemplos
Colores de fondo: background
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
...
Fuentes colores y tamaños
...
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
...
Alineación de texto
...
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
Ejercicio 7
Con las indicaciones del profesor, ahora repetiremos el ejercicio colocando las instrucciones CSS en el <head> para empezar a ver las diferencias (¡y sus ventajas!)
IMÁGENES <img>
La etiqueta que las imágenes es <img>, no tiene etiqueta de cierre.
Sintaxis
<img src="dirarchivo" alt="texto">
Atributo src
=""
indica el nombre y dirección del archivo a mostrar
Atributo alt
=""
Muestra un texto alternativo si no se puede cargar la imagen
Dar tamaño a la imagen desde HTML
Con los atributos width="" y height="" se indica el tamaño de la imagen en píxeles.
Es una buena práctica realizarlo, ya que reserva el tamaño de la imagen en la presentación.
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
Elementos <maps> y <area>
Mira este código:
en el elemento <img> se ha incluido el atributo usemap="#nombredelmapa"
al elemento <map> se le atribuye un nombre con el atributo name="nombedelmapa"
el elemento <map> incluye los elementos <area>
el elemento <area>:
se define la forma con el atributo shape="", sus posibles valores son default, rect, circle, poly (éste mejor no usarlo)
se definen las coordenadas con el atributo coords="x,y,anch,alt" / "x,y,radio"
se define el enlace a abrir con href=""
admite el atributo target=""
<img src="img/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="img/sun.gif" target="_blanck">
<area shape="circle" coords="90,58,3" alt="Mercury" href="img/merglobe.gif">
<area shape="circle" coords="124,58,8" alt="Venus" href="img/venglobe.gif">
</map>
Ejercicio 8
Crea un documento HTML con:
una imagen con atributos alt, width y height
el mismo elemento con la dirección indicada en el src errónea para ver el texto del alt
una imagen con un mapa definido con, al menos, tres enlaces
Tablas <table>
Mira la estructura de la derecha:
la etiqueta <table> contiene la totalidad de la tabla
cada fila se define con la etiqueta <tr>
dentro de cada fila se definen las celdas con la etiqueta <td>
<table border="1">
<tr>
<td>fila 1, celda 1</td>
<td>fila 1, celda 2</td>
</tr>
<tr>
<td>fila 2, celda 1</td>
<td>fila 2, celda 2</td>
</tr>
</table>
<th>
Es como la etiqueta para definir la celda <td>, pero con valor de encabezado
permite agrupar celdas horizontalmente y verticalmente
colspan="" y rowspan=""
Para incluir un título sobre la tabla
<caption>
otras etiquetas referente a tablas son: <colgroup> y <col> (para agrupar estilos por columnas) y <thead>, <tbody> y <tfoot> (para definir inicio, cuerpo y pié de tablas)
Ejercicio 9
Realizar la siguiente tabla:
con un título
con estructura de inicio, cuerpo y pie
con formato de encabezamiento en el inicio
con celdas agrupadas como en el ejemplo
<table border="1">
<caption>TÍTULO &#60;caption&#62;</caption>
<thead>
<tr>
<th>celda 1</th>
<th>celda 2</th>
<th>celda 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>celda 4</td>
<td>celda 5</td>
<td>celda 6</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>celda 7</td>
<td>celda 8</td>
<td>celda 9</td>
</tr>
<tr>
<td>celda 10</td>
<td>celda 11</td>
<td>celda 12</td>
</tr>
<tr>
<td>celda 13</td>
<td>celda 14</td>
<td>celda 15</td>
</tr>
<tr>
<td>celda 16</td>
<td>celda 17</td>
<td>celda 18</td>
</tr>
<tr>
<td>celda 19</td>
<td>celda 20</td>
<td>celda 21</td>
</tr>
</tbody>
</table>
<table border="1">
<caption>TÍTULO &#60;caption&#62;</caption>
<thead>
<tr>
<th>celda 1</th>
<th>celda 2</th>
<th>celda 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>celda 4</td>
<td>celda 5</td>
<td>celda 6</td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="2"><center>celda 7</center></td>
<td>celda 9</td>
</tr>
<tr>
<td colspan="2" rowspan="2"><center>celda 10</center></td>
<td>celda 12</td>
</tr>
<tr>
<td>celda 15</td>
</tr>
<tr>
<td>celda 16</td>
<td>celda 17</td>
<td rowspan="2">celda 18</td>
</tr>
<tr>
<td>celda 19</td>
<td>celda 20</td>
</tr>
</tbody>
</table>
texto de partida y solución
tabla de partida
Listas <ul><ol><li>
Listas ordenadas (ojo al type="")
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
Listas desordenadas (ojo al style="")
<h4>Disc bullets list:</h4>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

<h4>Circle bullets list:</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

<h4>Square bullets list:</h4>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
Listas de definiciones
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Listas anidadas
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
Ejercicio 9
Haz un ejemplo de cada tipo de lista similar a los mostrados
Caracteres ASCII
Cualquier carácter lo podemos escribir como su código ASCII.
< puede ser escrito así: &#60; (o también así: &lt;)

también puedes probarlo con el carácter "a", por ejemplo:
a puede ser escrito así: &#97;

o un carácter acentuado:
é es &#233;
Formularios
Los formularios se utilizan para pasar datos a un servidor. La forma de introducir datos es muy variada, dispondremos de cuadros te textos, listas, botones, checkbox, etc.
En un formulario dispondremos de unos elementos <input> que en el elemento <form></form> al que pertenecen.
<form>
...
elementos input
...
</form>
Tipos de input:
Campos de texto: type="text";
Campos de contraseña: type="password"
Botones tipo radio: type="radio" value="valor" (los botones pertenecientes al mismo grupo comparten el valor del atributo name="")
Checkbox: type="checkbox" value="valor" (los botones pertenecientes al mismo grupo comparten el valor del atributo name="")
Boton de envio: type ="submit" value="enviar"
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
Password: <input type="password" name="pwd">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<input type="submit" value="Submit">
</form>
Más sobre formularios en HTML
<label for="valordelname"></label>
<select> LISTAS DESPLEGABLES
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

/* selected preselecciona una de las opciones */
/* <optgroup></optgroup> agrupa distintas <option> */
<textarea>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<fielset>
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
Atributos y etiquetas interesantes
autocomplete: hace que el navegador muestre entradas anteriores
autofocus (sin valor): coloca el cursor en ese campo.
checked: por defecto activa un capo radio o checkbox.
required: hace que el campo que lo tenga como atributo sea necesario.
<datalist><option>: sirve para hacer una lista de autocompletado.
HTML5
Nuevos elementos HTML5
HTML5 nos da nuevos elementos que funcionan básicamente como divs pero que tienen nombres específicos.

<header>
<article>
<aside>
<figure><figcaption>
<footer>
<nav>4
<section>

<progress value="50" max="100"></progress>

Estas etiquetas nos pueden ahorrar crear clases o ids a las que referenciar en CSS
Nuevos tipos de inputs en HTML5
Tenemos nuevos tipos de inputs pero que no funcionan en todos los navegadores

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
Full transcript