Clase 3 Introduccion A HTML

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.
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.
<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
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.
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>.
<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".
<h1> a <h6>: encabezados o ttulos del
documento con diferente relevancia.
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
<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

Clase 3 Introduccion A HTML

Uploaded by

Document Information

Original Description:

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

Clase 3 Introduccion A HTML

Uploaded by

Copyright:

Available Formats

Introduccin al HTML

Un lenguaje de marcas es una forma de

Toda etiqueta se identifica porque est

Consta de varios componentes, incluyendo

Estructura bsica de HTML con dos propiedades:

La mayora de los atributos de un elemento

El marcado estructural describe el propsito

El marcado presentacional describe la

<b>: texto en negrita (Etiqueta desaprobada.

El marcado hipertextual se utiliza para

Ejemplo, un enlace al Colegio sera de la

Las etiquetas bsicas o mnimas son:

DOCTYPE es la etiqueta raz que define el

<html>: define el inicio del documento

<head>: define la cabecera del documento

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

<body>: define el contenido principal o

<a>: Hipervnculo o enlace, dentro o fuera

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

Etiquetas para hacer listas:

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

Puede ser creado y editado con cualquier

El diseo en HTML aparte de cumplir con las

You might also like