Clase01 HTML

Universidad Politécnica
Salesiana
Aplicaciones Telemáticas
HTML
HTML: HyperText Markup Language
• Lenguaje de marcado: etiquetas para escribir el contenido de las páginas web
• El estilo de presentación se configura a través de estilos CSS
• Estructura de la página básica:
Declaración del tipo de
<!DOCTYPE html>
<html> documento
<head> Cabecera (HEAD)
<meta charset="UTF-8">
<title>Título del documento</title>
</head>
<body> Cuerpo
Contenido del document
</body>
</html>
https://dev.w3.org/html5/html-author/
http://site.ebrary.com/lib/bibliotecaups/docDetail.action?docID=10510576&p00=html5
https://bibliotecas.ups.edu.ec:2708/lib/bibliotecaupssp/reader.action?docID=5349779&query=html5
HTML
• Sintaxis poco estricta:
<p> esto es un párrafo</p>
<p> esto es otro párrafo válido
<p>y este es otro
• Se puede validar una página
web:
• http://validator.w3.org/
XHTML
• XHTML tiene las mismas etiquetas que HTML pero con sintaxis
estricta:
• Facilita proceso de navegador  carga más rápido
• Facilita detección y corrección de errores
• XHTML: etiquetas en minúsculas
• HTML: indiferente
• XHTML: todas las etiquetas se deben abrir y cerrar, en HTML solo
algunas
• XHTML: todos los atributos deben ir entre comillas
HTML – elementos básicos - head
<!DOCTYPE html> head es un contenedor de metadatos
<html> sobre el documento HTML: título,
<head> estilo, links, scripts, etc.
<title> Título de la página html </title>
<style>
style se utiliza para definir el “formato”
body {background-color:yellow;} de la información que contiene el
p {color:blue} documento html
</style> link define la relación de la página con
<link rel=“stylesheet” href=“miEstilo.css”> una fuente externa; se usa por ejemplo
para enlazar a la hoja de estilos css
</head>
…
<!DOCTYPE html>
<html>
meta se usa para especificar la
descripción de la página,
<head>
palabras claves, autor,
<meta name="description" content=“Ejemplos HTML"> conjunto de caracteres, etc.
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content=“Juan Perez">
<meta charset="UTF-8">
<script>
script se usa para definir
function myFunction { código JavaScript en la capa
document.getElementById("demo").innerHTML = “Hola JavaScript!"; cliente.
}
</script>
base se usa para definir el URL
<base href="http://www.sitio.com/images/" target="_blank"> base para todos los URL
</head> relativos en una página html.
…
• Etiqueta Meta
• robots: define el comportamiento que los robots deben tener con la página. Podremos incluir todos los valores que
queramos separados por comas
Valor Descripción Usado

index Permite al robot indexar la página Todos
noindex Indica al robot que no indexe la página Todos
follow Permite al robot seguir los links en la página Todos
nofollow Indica al robot que no puede seguir los links de la página Todos
noodp Previene el uso de la descripción Open Directory Project, si la hay, como la Google, Yahoo, Bing
descripción de la página en los resultados de una búsqueda
noarchive Previene que los motores de búsqueda cachear el contenido de la página Google, Yahoo
nosnippet Previene que se muestre la descripción de la página en los resultados de Google

una búsqueda
noimageindex Previene que la página aparezca referida de un indice de imágenes Google
noydir Previene el uso de la descripción Yahoo Directory, si la hay, como Yahoo
descripción de la página en los resultados de una búsqueda
nocache Sinónimo de noarchive Bing
• Etiqueta Meta
• viewport: ayuda a conocer el tamaño inicia del viewport, es utilizado únicamente por dispositivos móviles.
Valor Posibles valores Descripción

width un entero positivo o la cadena device-width define el ancho, en pixels, del viewport
heigth un entero positivo o la cadena device-height define la altura, en pixels, del viewport
initial- un número positivo entre 0.0 y 10.0 define el ratio entre el ancho del dispositivo y el
scale tamaño del viewport
maximum- un número positivo entre 0.0 y 10.0 define el valor máximo del zoom; éste debe ser
scale mayor o igual a la minimum-scale o el
comportamiento sera indeterminado.
minimum- un número positivo entre 0.0 y 10.0 define el valor mínimo del zoom; este debe ser
scale menor o igual a la maximum-scale o el
comportamiento será indeterminado
user- un valor booleano (yesor no) Si tiene el valor no, el usuario no podrá hacer
scalable zoom en la página. Por defecto el valor es yes.
HTML – elementos básicos - body
<body atributo=“valor”> …. </body>
http://www.w3schools.com/tags/tag_body.asp
<p> Este es un párrafo </p>
<div> Esta etiqueta define una sección de un documento html.

Se utiliza para agrupar en un bloque elementos que deben tener el mismo estilo CSS
</div>
http://www.w3schools.com/
<h1> hasta <h6> son etiquetas que se usan para definir encabezados dentro
del texto.
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_h1_default_css
La etiqueta <b> especifica texto en negrita.</b><br>

<em>Texto enfatizado</em><br>
<i>cursiva </i> <br>
<strong>alternativa de negrita</strong><br>
<code>para especificar código fuente de computador</code><br>
<samp>ejemplo de salida de programa de computador</samp><br>
<kbd>entrada de teclado</kbd><br>
<var>Variable</var>
<p>Lista ordenada:</p>
<ol>
<li>Café</li>
<li>Te</li>
<li>Leche</li>
</ol>
<p>Lista no ordenada:</p>
<ul>
<li>Café</li>
<li>Te</li>
<li>Leche</li>
</ul>
<head>
<style> table, th, td { border: 1px solid black; } </style>
</head>
<body>
<table>
<tr>
<th>Mes</th>
<th>Ahorro</th>
</tr>
<tr>
<td>Enero</td>
<td>$100</td>
</tr>
</table>
</body>
• Imágenes: <img src=“nombre_imagen” width=“222”
height=“22” alt=”texto alternativo” />
• Formularios:
• <form>
• <input>
• Placeholder, autofocus, elegir fechas
• <command>
Página html ejemplo
• http://www.turnjs.com
HTML5
• Es una evolución de HTML4
• Más orientado a aplicaciones web que a páginas estáticas
• Se puede dibujar
• Etiquetas para presentar elementos como barras de navegación, gráficos
de pasteles, presentar , mejorar los formularios HTML.
• <div>
• <section>
• <article>
• <aside>
• <footer>
• <nav>
• <header>
HTML5
• APIs que incluye:
• HTML Geolocation
• HTML Drag and Drop
• HTML Local Storage
• HTML Application Cache
• <audio>
• <mark>
• <progress>
• <source>
• <summary>
• …
HTML 5: texto editable
<p contenteditable=“true”> texto editable </p>
<dl contenteditable=“true”>
<dt> </dt>
<dd> <dd/>
HTML5
• Canvas:
• <canvas id="canvas" width="150" height="150"></canvas>
<html> // draw the yellow circle context.arc(eyeX, eyeY, eyeRadius,
0, 2 * Math.PI, false);
<body> context.beginPath();
var eyeX = centerX + eyeXOffset;
<canvas id="canvas" width="150" context.arc(centerX, centerY,
height="150"></canvas> radius, 0, 2 * Math.PI, false); context.arc(eyeX, eyeY, eyeRadius,
0, 2 * Math.PI, false);
<script> context.fillStyle = 'yellow';
context.fillStyle = 'black';
var canvas = context.fill();
document.getElementById('canvas context.fill();
'); context.lineWidth = 5;
var context = context.strokeStyle = 'black';
canvas.getContext('2d'); // draw the mouth
context.stroke();
var centerX = canvas.width / 2; context.beginPath();
var centerY = canvas.height / 2; context.arc(centerX, centerY, 50,
// draw the eyes 0, Math.PI, false);
var radius = 70; context.beginPath(); context.stroke();
var eyeRadius = 10; var eyeX = centerX - eyeXOffset; </script>
var eyeXOffset = 25; var eyeY = centerY - eyeXOffset; </body>
var eyeYOffset = 20;
</html>
Validación de formularios
• Campos de texto obligatorios: atributo required.
• <input type="text" name="texto" required/>
• <input type="text" name="texto" placeholder="Debes introducir un texto"
required/>
• Campos de texto con formato específico: atributo pattern.
• <input type="text" name="texto" placeholder="Debes introducir un
email" pattern="^[\w._%-]+@[\w.-]+\.[a-zA-Z]{2,4}$" required/>
Validación de formularios
• Campos de texto con longitud máxima: atributo maxlength.
• <input type="text" name="texto" placeholder="Debes introducir un texto
menor a 50 caracteres" maxlength="50" required/>
• Validación de archivos
• <input type="file" name="texto" required/>
• Archivos con restricción de extension: atributo accept.

• <input type="file" name="texto" accept=".pdf" required/>
• <input type="file" name="texto" accept="application/pdf,image/jpg"
required/>
Tarea
• Realizar varias páginas web con HTML5
• Debe contener:
• Menú horizontal y vertical
• Galería de Imágenes
• Formulario para “comentarios”, con campos validados
• Drag and Drop
• Geolocalización (ingresar coordenadas y presentar en google maps
(http://programandoointentandolo.com/2013/12/geolocalizacion-con-
html5.html)

Clase01 HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Clase01 HTML

Caricato da

Copyright:

Formati disponibili

Universidad Politécnica

Valor Descripción Usado

nosnippet Previene que se muestre la descripción de la página en los resultados de Google

Valor Posibles valores Descripción

<div> Esta etiqueta define una sección de un documento html.

La etiqueta <b> especifica texto en negrita.</b><br>

• Archivos con restricción de extension: atributo accept.

Potrebbero piacerti anche