HTML Presentacion 1
Páginas: 26 (6497 palabras)
Publicado: 16 de septiembre de 2015
Introducción a HTML
Prof. Ing. Marianela Morillo Msc.
mcmorillo@urbe.edu.ve
Lenguajes de Marcado
• Los Lenguajes de Marcado inicialmente tenían el
propósito de tener la capacidad de procesamiento de
texto incorporado en los documentos usando etiquetas.
• La funcionalidad se extendió para usar los lenguajes de
marcado para definir una estructura del documento.
• El marcado se refiere a lasetiquetas especiales que se
incluyen en el texto solicitado por el usuario para realizar
operaciones especiales.
• Se identifican únicamente en un pasaje de texto por sus
especificaciones y restricciones.
• El primero y más usado lenguaje de marcado aceptado
es el SGML (Standard Generalized Language - Lenguaje de
Marcado Estándar Generalizado).
SGML
• Marcado Procedural
Define el tipo deprocesamiento que se va llevar a cabo
en puntos específicos de un documento
HTML (HyperText Markup Language - Lenguaje
de Marcado de Hipertexto).
• Marcado Descriptivo
Ofrece nombres para categorizar partes del documento,
identifican una porción del documento y su declaración .
XML (Extensible Markup Language - Lenguaje
de Marcado Extensible).
HTML
• Es una extensión del SGML, que permite incluir enlos
documentos Web:
– Texto, Imágenes, Tablas, Hiperenlaces y Archivos de Animación.
• Los documentos Web están presentes en el servidor
como archivos HTML.
• Un archivo HTML puede tener la extensión: .htm ó .html.
• Los navegadores Web leen el archivo HTML por medio
de etiquetas HTML específicas.
• Se han desarrollado una variedad de editores HTML.
Beneficios de HTML
• El HTML puede compartirgrandes cantidades de
información a través del mundo.
• Es básicamente formato ASCII, por lo que disminuye
la posibilidad de corrupción de datos por la red.
• Por ser un lenguaje de marcado, es muy fácil para
desarrollar y simple de comprender.
• El HTML es muy fácil de aprender porque tiene un
conjunto de etiquetas de marcado.
Conceptos HTML
• Características de los archivos HTML:
– Aparecen enforma de simples archivos de texto con
imágenes, sonidos o vídeos.
– Pueden enlazar unas páginas con otras usando
hiperenlaces.
– El usuario puede cargar nuevas páginas en el navegador
haciendo clic en los hiperenlaces.
• El código HTML contiene dos componentes:
– Etiquetas:
• Permiten que el texto HTML lleve a cabo un determinado proceso
como: formatear o proveer enlaces.
– Atributos:
•Controlan la presentación y aspecto de los textos.
Editores y Navegadores HTML
Etiquetas
• Las etiquetas deciden la naturaleza del formato que se va
a aplicar a los documentos HTML.
• Aparecen entre corchetes angulares (< >).
• La mayoría de las etiquetas:
– abren
y cierran
• Pueden estar anidadas.
• Ejemplo:
–
Esto es un ejemplo
Código de Ejemplo deHTML
Documento Maestro HTML
Documento Maestro HTML. Con las
etiquetas en mayúsculas.
Salida del Código de Ejemplo de HTML
Atributos
• Cada etiqueta tiene asociados un conjunto de atributos
posibles.
• Se utilizan para manejar requerimientos de formatos.
• El formato del texto puede incluir elementos como:
– Alineación, ancho, tamaño,color, entre otros. Estos están
asociados con las etiquetas HTML a través de los atributos.
• Se agregan dentro de las etiquetas HTML colocando:
– nombreAtributo = "valor"
• Dentro de una etiqueta HTML (dependiendo del caso)
puede tener “n” atributos.
Programar las Etiquetas
• Etiqueta
– Indica al navegador la versión HTML usada en el documento.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Etiqueta
– Especifica que el documento es de tipo HTML.
• Etiqueta
– Contiene la información acerca del documento.
• Etiqueta<br />
– Contiene el título de documento.<br />
– Requerida por las especificaciones 3.2 en adelante.<br />
<br />
• Etiqueta <BODY><br />
– Cubre todos las etiquetas, atributos e información que... <div class="paper-body__gradient paper-body__gradient--bottom paper-body__gradient--bottom-abs"></div>
<div class="center paper-body__cta--mod paper-body__cta-no-bg">
<a class="button button--large button--orange" onclick="upgradeRedirect()" rel="nofollow">
Leer documento completo </a>
<p class="ash-gray text-s">
Regístrate para leer el documento completo. </p>
</div>
</div>
</div>
</div>
</article>
</main>
<script>(function(d){var domain='buenastareas.com';if(d.referrer.match('^https?\:\/\/(|www\.)'+domain.replace('.com',"")+'\.com(.*)')){d.getElementById('stm-hero').className+=' stm-hero';d.getElementById('emptyTopicsList').innerHTML=(document.getElementById("topicsList"))?d.getElementById('topicsList').innerHTML:'';d.getElementById('text-header').innerHTML='';var sec=d.createElement('div');sec.className='section no-padding margin-2';var p=d.createElement('p');p.className='text-s uppercase ash-gray';p.innerText='Vista previa del texto';sec.appendChild(p);d.getElementById('text-header').appendChild(sec);}else{d.getElementById('stm-hero').className='';d.getElementsByTagName('article')[0].className='row no-border';}})(window.document);</script><div class="advertBox center margin-2 leaderboard_btf">
</div>
<a href="/content/access" rel="nofollow"></a>
<section class="row ">
<div class="columns position-relative
large-12">
<div class="">
<h2 class="heading-m padding-top-1 margin-2">
Estos documentos también te pueden resultar útiles </h2>
</div>
<section class="">
<ul class="unstyled">
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Html-1/75908731.html"
title="HTML 1">
<h6 class="heading-s">
HTML 1 </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...El lenguaje <b><i>HTML</i></b>:
Principios básicos
Características generales
Hipertexto e Hipermedia
<b><i>HTML</i></b>: HyperText Markup Language
El proceso de textos mediante marcas:
Script de IBM
TEX
Documentos <b><i>HTML</i></b>: fichero ASCII
Lenguajes interpretados y compilados
Edición de páginas <b><i>HTML</i></b>
Editores de propósito general
Editores asociados al navegador:
Netscape Composer
MS Front Page
Editores específicos
HoTMetaL
Procesadores... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Html-1/75908731.html"
title="HTML 1"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">729 Palabras</span>
<span class="essay-details__item">3 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Html-1/60368445.html"
title="html.1">
<h6 class="heading-s">
html.1 </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...los documentos <b><i>HTML</i></b>, que será
posteriormente interpretado por el navegador, con lo que iremos comprobando los cambios y añadidos que vayamos efectuando.
Método de trabajo: Con el editor de texto crearemos un fichero con el nombre que
queramos (p. ej. ejemplo1), pero que debe tener necesariamente la extensión .<b><i>html</i></b>
EL LENGUAJE <b><i>HTML</i></b>.
<b><i>HTML</i></b> es un lenguaje que se utiliza para la creación de páginas en la WWW. Por página entenderemos el... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Html-1/60368445.html"
title="html.1"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">863 Palabras</span>
<span class="essay-details__item">4 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Presentacion-Html-Css/76665208.html"
title="Presentacion HTML CSS">
<h6 class="heading-s">
Presentacion HTML CSS </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...<b><i>HTML</i></b>/CSS
Curso:
Programació
n WEB
Tribunal Federal de Conciliación y
Arbitraje
Instructora: Nancy Flores
Torrecilla
Mayo 2015
<b><i>HTML</i></b>
<b><i>HTML</i></b> significa Hyper Text Markup
Language (Lenguaje de marcado de hipertexto).
Hipertexto quiere decir "texto que contiene enlaces". Cada
vez que haces clic en una palabra que te lleva a otra página
web, estás haciendo clic en un hipertexto.
Un lenguaje de marcado es un lenguaje de programación
usado para que el... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Presentacion-Html-Css/76665208.html"
title="Presentacion HTML CSS"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">1230 Palabras</span>
<span class="essay-details__item">5 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Presentacion-1/70733068.html"
title="PRESENTACION 1">
<h6 class="heading-s">
PRESENTACION 1 </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...EVOLUCION
EN SENTIDO AMPLIO: ESTADO DE
CAMBIO CONTINUO
EJ. LA FAZ DE LA TIERRA SE
TRANSFORMA GRADUALMENTE
EN BIOLOGIA:
LAS FORMAS DE VIDA ACTUALES SON
EL PRODUCTO DE UN PROCESO DE
MODIFICACIÓN GRADUAL Y CONTINUA
DE FORMAS DE VIDA ANCESTRALES
EVOLUCION BIOLOGICA
AUDESIRK
COMO LA DESCENDENCIA DE LOS ORGANISMOS MODERNOS A PARTIR DE FORMA DE VIDA
ANTERIORES, ES DECIR CUALQUIER CAMBIO EN LAS PROPORCIONES DE DIFERENTES GENOTIPOS EN
UNA POBLACION, DE UNA GENERACION A LA OTRA.
VILLEE
AQUELLLO QUE... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Presentacion-1/70733068.html"
title="PRESENTACION 1"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">850 Palabras</span>
<span class="essay-details__item">4 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Presentaci%C3%B3n-1/82305718.html"
title="Presentación 1">
<h6 class="heading-s">
Presentación 1 </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...ni escribir) de personas mayores de 15 años es del 15.6%. Fuente:
INE.
• En Honduras el 24.3% de las madres mueren a causa del Cáncer. Fuente: INE.
Mayo 2009
Estadística Aplicada a los Negocios y Economía, Lind, Marchal, Wathen. 15a Ed. McGrawHill
<b><i>1</i></b>
25/01/2016
Qué es Estadística?
• Ciencia que:
▫ Recoge
▫ Organiza
▫ Presenta
▫ Analiza
▫ Interpreta
• El qué?
▫ Datos
• Con qué fin?
▫ Para propiciar una toma de decisiones más eficaz.
Estadística Aplicada a los Negocios y... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Presentaci%C3%B3n-1/82305718.html"
title="Presentación 1"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">1340 Palabras</span>
<span class="essay-details__item">6 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Presentaci%C3%B3n-1/6268976.html"
title="Presentación 1">
<h6 class="heading-s">
Presentación 1 </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...* Dicen que toma un minuto para conocer a una persona, unos días para apreciarlo, unos meses para amarlo pero una vida eterna para olvidarlo
* Nacimos para vivir, nacimos para soñar, nuestro destino es morir, nuestra misión es amar
* Conocerte fue mi destino, amarte fue mi fortuna, soñarte fue mi aventura y perderte fue mi tortura.
* Un saludo sencillo me hizo conocerte, una sonrisa tuya me llevó a quererte, un compartir diario me llevó a tenerte en mi corazón para nunca perderte... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Presentaci%C3%B3n-1/6268976.html"
title="Presentación 1"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">1159 Palabras</span>
<span class="essay-details__item">5 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Presentacion-1/3900291.html"
title="Presentacion 1">
<h6 class="heading-s">
Presentacion 1 </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...INTRODUCCIÓN
Placas tectónicas do mundo
A tectónica de placas é unha teoría científica que establece que a litosfera (a porción superior máis fría e ríxida da Terra) está fragmentada nunha serie de placas ou baldosas que se desprazan sobre o manto terrestre fluído (astenosfera). Esta teoría tamén describe o movemento das placas, as súas direccións e interaccións.
As diferentes placas desprázanse con velocidades da orde de 5 cm/ano o que é, aproximadamente, a velocidade con que crecen as... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Presentacion-1/3900291.html"
title="Presentacion 1"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">734 Palabras</span>
<span class="essay-details__item">3 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="essayPreview">
<div class="card">
<a class="heading-s black" href="/ensayos/Presentacion-1/45220774.html"
title="presentacion 1">
<h6 class="heading-s">
presentacion 1 </h6>
</a>
<div class="card__content-footer-container ">
<p class="card__content text-s ">
...auascalientes
Baja California
Baja California Sur
Campeche
Chiapas
Chihuahua
Coahuila
Colima
Distrito Federal
Durango
Estado de México
Guanajuato
Guerrero
Hidalgo
Jalisco
Michoacán
Morelos
Nayarit
Nuevo León
Oaxaca
Puebla
Querétaro
Quintana Roo
San Luis Potosí
Sinaloa
Sonora
Tabasco
Tamaulipas
Tlaxcala
Veracruz
Yucatán
Zacatecas
El Programa de Trabajo Decente
Promover el trabajo decente para todos
El trabajo decente es esencial para el bienestar de las... </p>
<div class="row card__footer-links ">
<div class="columns small-6">
<a href="/ensayos/Presentacion-1/45220774.html"
title="presentacion 1"
class="card__footer text-xs">
<span>
Leer más </span>
</a>
</div>
<div class="columns small-6">
<div class="card__caption card__caption weight-300 mid-gray text-s align-right">
<div class="essay-details no-margin--bottom">
<span class="essay-details__item">734 Palabras</span>
<span class="essay-details__item">3 Páginas</span>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</section>
</div>
</section>
<section class="row ">
<div class="columns position-relative large-12">
<section class="section no-border">
<div class="container">
<div class="row">
<div class="columns ">
<div class="section-heading ">
<h2 class="align-left margin-2 heading-m">
OTRAS TAREAS POPULARES </h2>
</div>
</div>
</div>
<div class="row" id="popular-tags-visible">
<div class="small-12 columns tag-block columns-small-1 columns-medium-2 columns-large-2">
<ul>
<li class="margin-1">
<a href="/ensayos/Introduccion-Ciclo-Escolar/78699448.html" title="introduccion ciclo escolar" class="mid-gray brand-primary--hover">introduccion ciclo escolar</a>
</li>
<li class="margin-1">
<a href="/ensayos/1-Concepto/78699451.html" title="1 Concepto" class="mid-gray brand-primary--hover">1 Concepto</a>
</li>
<li class="margin-1">
<a href="/ensayos/Diagnostico-De-Empresa/78699454.html" title="diagnostico de empresa " class="mid-gray brand-primary--hover">diagnostico de empresa </a>
</li>
<li class="margin-1">
<a href="/ensayos/Impresionismo/78699526.html" title="Impresionismo" class="mid-gray brand-primary--hover">Impresionismo</a>
</li>
<li class="margin-1">
<a href="/ensayos/El-Origen-De-Los-s-Lidos/78699529.html" title="EL ORIGEN DE LOS S LIDOS PLAT NICOS" class="mid-gray brand-primary--hover">EL ORIGEN DE LOS S LIDOS PLAT NICOS</a>
</li>
<li class="margin-1">
<a href="/ensayos/Clasificaci-n-Del-Dibujo/78699538.html" title="Clasificaci n del dibujo" class="mid-gray brand-primary--hover">Clasificaci n del dibujo</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</section>
<div class="advertBox center margin-1"></div>
<section class="section no-border brand-primary--bg">
<div class="row">
<div class="columns center">
<h3 id="banner_title" class="heading-l white">Únete a millones de otros estudiantes y comienza tu investigación</h3>
<h4 class="text-m white">Conviértase en miembro formal de Buenas Tareas</h4>
<a class="button--bg-color__white button-fullwidth" onclick="upgradeRedirect()" rel="nofollow">
INSCRÍBETE - ES GRATIS
</a> </div>
</div>
</section>
<footer class="section section--footer">
<div class="row">
<div class="medium-3 columns"><div class="copyright-block">
<p class="copyright-block__logo">
<i class="icon icon-sm-logo copyright-block__logo__icon"></i>
<span class="copyright-block__logo__span">Buenas Tareas</span>
</p>
<p class="copyright-block__social">
<a rel="nofollow" href="http://www.facebook.com/BuenasTareas">
<span class="copyright-block__social__circle">
<i class="copyright-block__social__circle__icon icon icon-ui-24-social-fb icon-ui-social-fb"></i>
</span>
</a>
<a rel="nofollow" href="https://twitter.com/buenastareas">
<span class="copyright-block__social__circle">
<i class="copyright-block__social__circle__icon icon icon-ui-social-tw"></i>
</span>
</a>
</p>
<small class="copyright-block__copyright text-s">
©2024 BuenasTareas.com </small>
</div>
</div>
<div class="medium-3 columns"><div class="vertical-nav-list">
<h6 class="vertical-nav-list__heading heading-xxs">Productos</h6>
<ul class="vertical-nav-list__container">
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/ojear/">Documentos de investigación</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/resumen-de-libros/">Notas de libros</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/generador-de-citas/">Generador de citas</a>
</li>
</ul>
</div>
</div>
<div class="medium-3 columns">
<div class="vertical-nav-list">
<h6 class="vertical-nav-list__heading heading-xxs">Empresa</h6>
<ul class="vertical-nav-list__container">
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/about.php">Empresa</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/advertise-with-us.php">Haz publicidad</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/legal.php">Legal (actualizado 9/9/14)</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/sitemap.html">Mapa del sitio</a>
</li>
</ul>
</div>
</div>
<div class="medium-3 columns"><div class="vertical-nav-list">
<h6 class="vertical-nav-list__heading heading-xxs">Ayuda</h6>
<ul class="vertical-nav-list__container">
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/help.php">Ayuda</a>
</li>
<li class="vertical-nav-list__item">
<a class="vertical-nav-list__item__anchor text-m" href="/about-us/contact">Contáctanos</a>
</li>
</ul>
</div>
</div>
</div>
</footer> </div>
<!-- global JS -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/labjs/2.0.3/LAB.min.js"></script>
<script type="text/javascript">
$LAB
.script("//cdnjs.cloudflare.com/ajax/libs/aja/0.4.1/aja.min.js")
.script("//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js")
.script("//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.runtime.min.js")
.script("//cdnjs.cloudflare.com/ajax/libs/jquery.payment/1.3.2/jquery.payment.min.js")
.script("//assets.buenastareas.com/234d3b97ed2b88737e66b0e02a8e5aa593c7f7c0/_assets/bts/92c1d4e847bc6d93ba58214aa322ee6c.js")
;
</script>
<script type="text/javascript">
window.SM2_DEFER = true;
function downloadJSAtOnload() {
$LAB
.script("//assets.buenastareas.com/234d3b97ed2b88737e66b0e02a8e5aa593c7f7c0/_assets/bts/76aff662ad8b32c9348bfa0fa9cb8f91.js")
.wait(function() {
});
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
</body>
</html>
Prof. Ing. Marianela Morillo Msc.
mcmorillo@urbe.edu.ve
Lenguajes de Marcado
• Los Lenguajes de Marcado inicialmente tenían el
propósito de tener la capacidad de procesamiento de
texto incorporado en los documentos usando etiquetas.
• La funcionalidad se extendió para usar los lenguajes de
marcado para definir una estructura del documento.
• El marcado se refiere a lasetiquetas especiales que se
incluyen en el texto solicitado por el usuario para realizar
operaciones especiales.
• Se identifican únicamente en un pasaje de texto por sus
especificaciones y restricciones.
• El primero y más usado lenguaje de marcado aceptado
es el SGML (Standard Generalized Language - Lenguaje de
Marcado Estándar Generalizado).
SGML
• Marcado Procedural
Define el tipo deprocesamiento que se va llevar a cabo
en puntos específicos de un documento
HTML (HyperText Markup Language - Lenguaje
de Marcado de Hipertexto).
• Marcado Descriptivo
Ofrece nombres para categorizar partes del documento,
identifican una porción del documento y su declaración .
XML (Extensible Markup Language - Lenguaje
de Marcado Extensible).
HTML
• Es una extensión del SGML, que permite incluir enlos
documentos Web:
– Texto, Imágenes, Tablas, Hiperenlaces y Archivos de Animación.
• Los documentos Web están presentes en el servidor
como archivos HTML.
• Un archivo HTML puede tener la extensión: .htm ó .html.
• Los navegadores Web leen el archivo HTML por medio
de etiquetas HTML específicas.
• Se han desarrollado una variedad de editores HTML.
Beneficios de HTML
• El HTML puede compartirgrandes cantidades de
información a través del mundo.
• Es básicamente formato ASCII, por lo que disminuye
la posibilidad de corrupción de datos por la red.
• Por ser un lenguaje de marcado, es muy fácil para
desarrollar y simple de comprender.
• El HTML es muy fácil de aprender porque tiene un
conjunto de etiquetas de marcado.
Conceptos HTML
• Características de los archivos HTML:
– Aparecen enforma de simples archivos de texto con
imágenes, sonidos o vídeos.
– Pueden enlazar unas páginas con otras usando
hiperenlaces.
– El usuario puede cargar nuevas páginas en el navegador
haciendo clic en los hiperenlaces.
• El código HTML contiene dos componentes:
– Etiquetas:
• Permiten que el texto HTML lleve a cabo un determinado proceso
como: formatear o proveer enlaces.
– Atributos:
•Controlan la presentación y aspecto de los textos.
Editores y Navegadores HTML
Etiquetas
• Las etiquetas deciden la naturaleza del formato que se va
a aplicar a los documentos HTML.
• Aparecen entre corchetes angulares (< >).
• La mayoría de las etiquetas:
– abren
• Pueden estar anidadas.
• Ejemplo:
–
Código de Ejemplo deHTML
Documento Maestro HTML. Con las
etiquetas en mayúsculas.
Salida del Código de Ejemplo de HTML
Atributos
• Cada etiqueta tiene asociados un conjunto de atributos
posibles.
• Se utilizan para manejar requerimientos de formatos.
• El formato del texto puede incluir elementos como:
– Alineación, ancho, tamaño,color, entre otros. Estos están
asociados con las etiquetas HTML a través de los atributos.
• Se agregan dentro de las etiquetas HTML colocando:
– nombreAtributo = "valor"
• Dentro de una etiqueta HTML (dependiendo del caso)
puede tener “n” atributos.
Programar las Etiquetas
• Etiqueta
– Indica al navegador la versión HTML usada en el documento.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Etiqueta
– Especifica que el documento es de tipo HTML.
• Etiqueta
– Contiene la información acerca del documento.
• Etiqueta