Anda di halaman 1dari 27

Introduccin al HTML

CORUNIVERSITEC
Multimedia y Web
Docente: Mg. Oscar Barrera
Semana:3
Introduccin

Un lenguaje de marcas es una forma de


codificar junto con el texto, incorporando
etiquetas que contienen informacin
adicional de la estructura del texto o su
presentacin.
HTML, siglas de HyperText Markup Language
(Lenguaje de Marcas de Hipertexto).
Es el lenguaje de marcado predominante
para la construccin de pginas web.
Nociones bsicas HTML

Toda etiqueta se identifica porque est


encerrada entre los signos menor que y
mayor que (<>), y algunas tienen atributos
que pueden tomar algn valor.
En general las etiquetas se aplicarn de dos
formas especiales:
Se abren y se cierran: <p></p>
No pueden abrirse y cerrarse: <hr>
Marcado HTML

Consta de varios componentes, incluyendo


elementos y sus atributos, tipos de data, y la
declaracin de tipo de documento.
Ejemplo de marcado en el lenguaje:
Me llamo Juan del Pueblo.
<nombre>Juan</nombre>
<apellido>del Pueblo</apellido>
Elementos

Estructura bsica de HTML con dos propiedades:


atributo y contenido.
Generalmente tiene una etiqueta de inicio y
una etiqueta de cierre:
etiqueta de inicio: <nombre-de-elemento>
etiqueta de cierre: </nombre-de-elemento>
Elementos tales como <br> y <hr>, no tienen
contenido ni llevan una etiqueta de cierre.
Atributos

La mayora de los atributos de un elemento


son pares nombre-valor.
Se separan por un signo de igual "=" y
escriben en la etiqueta de comienzo de un
elemento, despus del nombre de ste.
El valor puede estar rodeado por comillas
dobles o simples.
Estructura general
Los atributos del elemento estn contenidos en
la etiqueta de inicio y el contenido est
ubicado entre las dos etiquetas.
Tipos de marcado

Marcado estructural
Describe el propsito del texto.
Marcado presentacional
Describe la apariencia del texto.
Marcado hipertextual
Se utiliza para crear enlace.
Marcado estructural

El marcado estructural describe el propsito


del texto.
Ejemplo, <h2>Golf</h2>
indica encabezamiento de segundo nivel.
Marcado presentacional

El marcado presentacional describe la


apariencia del texto, sin importar su
funcin.
Ejemplo <strong>enfsis fuerte</strong> y
<em>nfasis</em>.
La mayora del marcado presentacional ha
sido reemplazado con HTML 5, en favor de
Hojas de estilo en cascada.
Marcado presentacional

<b>: texto en negrita (Etiqueta desaprobada.


Se recomienda usar la etiqueta <strong>)
<i>: texto en itlico (Etiqueta desaprobada. Se
recomienda usar la etiqueta <em>)
<s>: texto tachado (Etiqueta desaprobada. Se
recomienda usar la etiqueta <del>)
<u>: texto subrayado
Marcado hipertextual

El marcado hipertextual se utiliza para


enlazar partes del documento con otros
documentos o con otras partes del mismo
documento.
Para crear un enlace es necesario utilizar la
etiqueta de ancla <a> junto con el atributo
href, que establecer la direccin URL a la
que apunta el enlace.
Marcado hipertextual

Ejemplo, un enlace al Colegio sera de la


forma <a href=www.uprm.edu>UPRM</a>.
Tambin se pueden crear enlaces sobre
otros objetos, tales como imgenes <a
href=enlace><img src=imagen /></a>.
Cdigos HTML bsicos

Las etiquetas bsicas o mnimas son:


Cdigos HTML bsicos

DOCTYPE es la etiqueta raz que define el


tipo de documento:

<html>: define el inicio del documento


HTML, le indica al navegador que lo que
viene a continuacin debe ser interpretado
como cdigo HTML.
Cabecera del documento

<head>: define la cabecera del documento


HTML.
Contiene informacin sobre el documento
que no se muestra directamente al usuario.
Dentro de la cabecera

<title>: define el ttulo de la pgina. Por lo


general, el ttulo aparece en la barra de ttulo
encima de la ventana.
<link>: para vincular el sitio a hojas de estilo o
iconos:
<link rel="stylesheet" href="/style.css"
type="text/css">
Cuerpo del documento

<body>: define el contenido principal o


cuerpo del documento.
Es la parte del documento html que se
muestra en el navegador.
Dentro de esta etiqueta pueden definirse
propiedades comunes a toda la pgina,
como color de fondo y mrgenes.
Etiquetas en el cuerpo

<a>: Hipervnculo o enlace, dentro o fuera


del sitio web.
Debe definirse el parmetro de pasada por
medio del atributo href:
<a href="http://www.uprm.edu">UPRM</a>.
Etiquetas en el cuerpo

<img>: imagen. Requiere del atributo src, que


indica la ruta en la que se encuentra la imagen.
Por ejemplo:
<img src="./imagenes/mifoto.jpg" />.
Es conveniente, por accesibilidad, poner un
atributo alt="texto alternativo".
Etiquetas en el cuerpo
<h1> a <h6>: encabezados o ttulos del
documento con diferente relevancia.
Etiquetas en el cuerpo

Etiquetas para hacer listas:


<li> identifica un tem
</li> la etiqueta final puede ser opcional
<ol> lista ordenada
<ul> lista sin orden
Es requerida la etiqueta final para la lista
ordenada </ol> y sin orden </ul>.
Ejemplo de listado
Etiquetas en el cuerpo

<div>: divisin de la pgina. Se recomienda,


junto con css, en vez de <table> cuando se
desea alinear contenido.
<table>: define una tabla
<tr>: fila de una tabla
<td>: columna de una tabla
<th>: celda de encabezado dentro de una fila
Ejemplo de tabla
Editar cdigo HTML

Puede ser creado y editado con cualquier


editor de textos bsico.
Existen editores para la realizacin de sitios
Web con caractersticas WYSIWYG (What You
See Is What You Get, o en espaol: lo que
ves es lo que obtienes).
Ejemplos: Dream Weaver
Accesibilidad Web

El diseo en HTML aparte de cumplir con las


especificaciones propias del lenguaje debe
respetar unos criterios de accesibilidad
web, siguiendo unas pautas, o las
normativas y leyes vigentes en los pases
donde se regule dicho concepto.

CURSO HTML5