Html - Tema 1

Hyper Text Markup Language
Tema 1: Etiquetas básicas
© Abril, 2015 - Electiva I
Prof. Renny Batista

Introducción – ¿Que es HTML?
 HTML es un lenguaje de marcado para la descripción
de documentos web (páginas web).
 HTML significa Lenguaje de Marcado de Híper Texto
 Un lenguaje de marcas es un conjunto de etiquetas de
marcas
 Los documentos HTML son descritos por las etiquetas
 Cada etiqueta describe diferentes contenidos en un
documento HTML.
Abril, 2015 2

Introducción – ¿Que es HTML?
Abril, 2015 3
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
 La declaración DOCTYPE define el tipo de
documento
 El texto entre <html> y </html> describe un
documento HTML
 El texto entre <head> y </head>
proporciona información sobre el
documento
 El texto entre <title> y </title> ofrece un
título para el documento
 El texto entre <body> y </body> describe el
contenido de la página visible
 El texto entre <h1> y </h1> describe un
título
 El texto entre <p> y </p> describe un
párrafo
Usando esta descripción, un navegador web puede mostrar
un documento con un encabezado y un párrafo.

Introducción – Las etiquetas (tags)
 Etiquetas HTML son palabras clave (nombres de etiqueta)
rodeadas por paréntesis angulares:
<tagname>contenido</tagname>
 Etiquetas HTML normalmente vienen en pares como <p> y
</p>
 La primera etiqueta en una pareja es la etiqueta inicial, la
segunda etiqueta es la etiqueta de cierre
 La etiqueta final se escribe como la etiqueta inicial, pero
con una barra antes del nombre de la etiqueta.
Abril, 2015 4

Introducción – Las etiquetas (tags)
 Los elementos HTML pueden anidarse (elementos pueden
contener otros elementos).
 Todos los documentos HTML se componen de elementos
HTML anidadas.
Abril, 2015 5
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>Hola</p>
</body>
</html>

Introducción – Las atributos
 Los elementos HTML pueden tener atributos
 Los atributos proporcionan información adicional acerca de un
elemento
 Atributos siempre se especifican en la etiqueta inicial
 Atributos vienen en pares nombre / valor como: nombre = "valor"
Abril, 2015 6
 Los atributos proporcionan información adicional acerca
de los elementos HTML.

Introducción – Las atributos
 La mayoría de páginas web actuales utilizan los atributos id
y class de forma masiva. Sin embargo, estos atributos sólo
son realmente útiles cuando se trabaja con CSS y con
Javascript.
Abril, 2015 7
 Atributos básicos: se pueden utilizar prácticamente en
todas las etiquetas HTML
Atributo Descripción
id = “valor” Establece un identificador único a cada elemento dentro
de un documento HTML
class = “valor” Establece la clase CSS que se aplica a los estilos del
elemento.
style = “valor” Establece de forma directa los estilos CSS a un elemento
title = “valor” Establece el título a un elemento (mejora la accesibilidad y
el navegador lo muestra cuando el usuario pasa el ratón
por encima del elemento.

Introducción – Las etiquetas vacías
 Elementos HTML sin contenido se llaman elementos vacíos.
 <br> es un elemento vacío sin una etiqueta de cierre (la
etiqueta <br> define un salto de línea).
 Los elementos vacíos pueden ser "cerrados" en la etiqueta
de apertura de esta manera: <br />.
Abril, 2015 8

Introducción – El navegador
 El propósito de un navegador web (Chrome, IE, Firefox,
Safari, Opera) es leer los documentos HTML y visualizarlos.
 El navegador no muestra las etiquetas HTML, pero las utiliza
para determinar cómo se verá el documento.
Abril, 2015 9

Introducción – Estructura de una pagina HTML
 Sólo el área del <body> es visualizada por el navegador.
Abril, 2015 10

Los elementos HTML
 El lenguaje HTML clasifica a todos los elementos en dos
grupos: elementos en línea (inline elements) y elementos
de bloque (block elements).
 La principal diferencia entre los dos tipos de elementos es
la forma en la que ocupan el espacio disponible en la
página. Los elementos de bloque siempre empiezan en
una nueva línea y ocupan todo el espacio disponible
hasta el final de la línea, aunque sus contenidos no
lleguen hasta el final de la línea.
 Por su parte, los elementos en línea sólo ocupan el
espacio necesario para mostrar sus contenidos.
Abril, 2015 11

Los elementos HTML
 La siguiente imagen muestra cómo visualizan los
navegadores el código HTML anterior (mediante CSS se
han añadido bordes que muestran el espacio ocupado
por cada elemento)
Abril, 2015 12

Los elementos HTML
 Los elementos en línea definidos por HTML son: a, abbr,
acronym, b, basefont, bdo, big, br, cite, code, dfn, em,
font, i, img, input, kbd, label, q, s, samp, select,
small, span, strike, strong, sub, sup, textarea, tt, u,
var.
 Los elementos de bloque definidos por HTML son: address,
blockquote, center, dir, div, dl, fieldset, form, h1, h2,
h3, h4, h5, h6, hr, isindex, menu, noframes, noscript,
ol, p, pre, table, ul.
 Los siguientes elementos también se considera que son de
bloque: dd, dt, frameset, li, tbody, td, tfoot, th, thead,
tr.
 Los siguientes elementos pueden ser en línea y de bloque según
las circunstancias: button, del, iframe, ins, map, object,
script.
Abril, 2015 13

Etiquetas básicas: <! DOCTYPE>
 Ayuda a que el navegador muestre una página web
correctamente.
 Hay diferentes tipos de documentos en la web.
 Para mostrar un documento correctamente, el navegador
debe conocer tanto el tipo y la versión.
 La declaración <! DOCTYPE> no distingue entre mayúsculas
y minúsculas. Todos los casos son aceptables:
Abril, 2015 14
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

Etiquetas básicas: <! DOCTYPE>
 Declaraciones comunes:
– HTML5:
<!DOCTYPE html>
– HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
– XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
Abril, 2015 15

Etiquetas básicas: <head>
 El elemento <head> es un contenedor para todos los elementos
de cabeza.
 El elemento <head> puede incluir un título para el documento,
scripts, estilos, meta-información, y más.
 Los siguientes elementos pueden ir dentro del elemento <head>:
<title>
<style>
<base>
<link>
<meta>
<script>
<noscript>
Abril, 2015 16

Etiquetas básicas: <title> <link>
 La etiqueta <title>
Define un título en la barra de herramientas del navegador
proporciona el título de la página cuando se añade a los
favoritos.
Muestra el título de la página en los resultados del motor de
búsqueda.
 La etiqueta <link> define una relación entre un documento
y un recurso externo. Se utiliza para vincular a las hojas de
estilo externas.
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
Abril, 2015 17

Etiquetas básicas: <meta>
 Los metadatos es información sobre los datos.
 La etiqueta <meta> proporciona información sobre el
documento HTML. Los metadatos no se mostrará en la
página, pero son legibles por la máquina.
 Se utilizan normalmente para especificar de descripción de
páginas, palabras clave, autor del documento y otros
metadatos.
<head>
<meta charset="UTF-8">
<meta name="description" content=“Tutoriales web">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Pedro Perez">
</head>
Abril, 2015 18

Etiquetas básicas: <script>
 La etiqueta <script> se utiliza para definir un script del lado
del cliente, tales como JavaScript.
 El elemento <script> o bien contiene declaraciones de
scripting, o señala a un archivo de script externo a través del
atributo src.
 Los usos más comunes de JavaScript son la manipulación de
imágenes, validación de formularios, y los cambios
dinámicos de contenido.
<script type="text/javascript">
document.getElementById("demo").innerHTML = "Hola JavaScript!";
</script>
Abril, 2015 19

Etiquetas básicas: Títulos
 Las etiquetas de <h1> a <h6> se utilizan para definir títulos
HTML.
 <h1> define el título más importante. <h6> define el título
menos importante.
 Utilice los elementos de h1 a h6 sólo para los títulos. No los
utilice sólo para hacer un texto en negrita o mas grande.
Existen otras etiquetas destinadas para tal fin.
 Los motores de búsqueda utilizan los encabezados para
indexar la estructura y el contenido de sus páginas web.
Abril, 2015 20

Etiquetas básicas: Regla horizontal <hr>
 La etiqueta <hr> crea una línea horizontal en una página
HTML.
 El elemento hr se puede utilizar para separar el contenido.
<p>Este es un parrafo.</p>
<hr>
<hr>
Abril, 2015 21

Etiquetas básicas: Párrafos
 La etiqueta <p> define un párrafo.
 Los navegadores añaden automáticamente una línea en
blanco antes y después de un párrafo.
 Utilice la etiqueta <br> o <br /> si desea un salto de línea
(una nueva línea) sin comenzar un nuevo párrafo.
 El elemento <pre> define un texto pre formateado.
 El texto el interior de un elemento <pre> se presenta en un
tipo de letra de ancho fijo (por lo general Courier), y
preserva los espacios y saltos de línea que contenga el texto
Abril, 2015 22

Etiquetas básicas: Otras etiquetas en párrafos
Abril, 2015 23
Etiqueta Acción
<b> Define un texto en negrita
<strong> Define un texto fuerte, con agregado semántico de
importancia
<i> define el texto en cursiva, sin ninguna importancia extra.
<em> Define el texto, con agregado semántico de
importancia
<ins> define insertado (añadido) de texto
<sub> define un texto subíndice
<sup> define un texto en superíndice

Abril, 2015 24
Etiqueta Acción
<q> Define una breve cita. Los navegadores suelen insertar
comillas alrededor del elemento <q>.
<blockquote> Define una sección citado. Normalmente los
navegadores identan el contenido.
<address> Define la información de un contacto (autor /
propietario) de un documento o artículo. El elemento
generalmente se muestra en cursiva. La mayoría de los
navegadores le dan un salto de línea antes y después
del elemento.
<cite> Define el título de un trabajo u obra. Los navegadores
usualmente muestran este elementos en cursiva.

Abril, 2015 25
Etiqueta Acción
<kbd> Define la entrada de teclado:
<p>To open a file, select:</p>
<p><kbd>File | Open...</kbd></p>
<code> Define el código de programación:
<p>Coding Example:</p>
<code>
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
}
</code>

Etiquetas básicas: Comentarios
 Se puede agregar comentarios en un documento
HTML utilizando la siguiente sintaxis:

 Los comentarios no se muestran en el navegador, pero
pueden ayudar a documentar el archivo HTML.
 No se permite espacio en blanco entre el delimitador
de apertura de declaración de etiqueta ("<!") y el
delimitador de apertura de comentario ("--")
Abril, 2015 26

Estilos en HTML
 Cada elemento HTML tiene un estilo por defecto (color
de fondo es blanco y color del texto es negro).
 Se puede cambiar el estilo por defecto de un
elemento HTML modificando el atributo de estilo (style).
 En este ejemplo se cambia el color de fondo por
defecto de blanco a gris claro:
<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Abril, 2015 27

 El atributo de estilo HTML tiene la siguiente sintaxis.
style="property:value; property:value; …"
 La propiedad es una propiedad de CSS. El valor es un valor
CSS.
 CSS: siglas en inglés de cascading style sheets. Es un
lenguaje usado para definir y crear la presentación de un
documento estructurado escrito en HTML.
El atributo style
Abril, 2015 28
Atributo Propiedad
1
Valor
1
Propiedad
2
Valor
2

Propiedades básicas del atributo style
Abril, 2015 29
Propiedad Descripción
color Define el color del texto que se utilizará para un
elemento HTML
<h1 style="color:blue">Esto es un encabezado</h1>
<p style="color:red">Esto es un parrafo.</p>
font-family Define la fuente que se utilizará para un elemento HTML
<h1 style="font-family:verdana">Titulo</h1>
<p style="font-family:courier">parrafo</p>
font-size define el tamaño del texto que se utilizará para un
elemento HTML
<h1 style="font-size:300%">Titulo</h1>
<p style="font-size:160%">parrafo.</p>
text-align Define la alineación horizontal del texto de un elemento
HTML.
<h1 style="text-align:center">Titulo</h1>

Bibliografías
Eguíluz Pérez, J. Introducción a XHTML. http://www.librosweb.es
2008. Creative Commons reconocimiento no comercial -
sin obra derivada 3.0
Wikipedia. La enciclopedia libre. http://es.wikipedia.org/
W3Schools a web developers site. http://www.w3schools.com
Abril, 2015 30

Html - Tema 1

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Html - Tema 1

Similar to Html - Tema 1 (20)

More from Renny Batista

More from Renny Batista (12)

Recently uploaded

Recently uploaded (6)

Html - Tema 1