Ruiz guerra HTML

Instituto Tecnológico de Nor-Oriente
INTECNOR
Perito en Industria Alimentaria
Informática II
Dubley Omar Sandoval Hernández
¿Que es HTML?
René Estuardo Ruiz Guerra
5to. Perito en Industria Alimentaria
Sección: “B”
9 de febrero de 2015, Llanos de la
Fragua, Zacapa

¿Qué es y para qué sirve HTML?
¿QUÉ ES Y PARA QUÉ SIRVE HTML?
HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está
compuesto por una seríe de etiquetas que el navegador interpreta y da forma en la
pantalla. HTML dispone de etiquetas para imágenes, hipervínculos que nos
permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc.
Podríamos decir que HTML sirve para crear páginas web, darles estructura y
contenido. Un ejemplo sencillo de código HTML podría ser:
<html>
<body>
<p>Esto es un párrafo. Bienvenidos a esta página web.</p>
</body>
</html>

Este ejemplo está formado por 3 etiquetas HTML. Como podemos observar cada
una de las etiquetas debe acabar con su homóloga de cierre. En este caso la
etiqueta <html> debe cerrarse con </html>, la etiqueta <body> con </body> y la
etiqueta <p> con </p>.
Hay muchas más etiquetas que veremos más adelante pero nos debe quedar claro
que por cada etiqueta que abramos, deberemos incluir la correspondiente etiqueta
de cierre. Así conseguiremos un código HTML bien formado y que los navegadores
puedan interpretar sin ambigüedad.
Este sencillo ejemplo mostraría por pantalla lo siguiente.
¿Qué ocurriría si una etiqueta que abramos no tiene su correspondiente cierre?
Digamos que se trataría de un código HTML mal construido, y los navegadores esto
lo pueden interpretar de distintas maneras. Quizás nos muestren la página tal y
como esperábamos sin aparente error. Quizás nos muestren una página de error o
se quede en blanco el navegador. Nuestro objetivo ha de ser siempre construir
páginas HTML bien estructuradas y sin ambiguedades, es decir, hacer un correcto
uso del lenguaje para que los navegadores puedan saber exactamente qué es lo
que pretendemos mostrar.
ALGO DE HISTORIA

HTML nació públicamente en un documento llamado HTML Tags (Etiquetas HTML),
publicado por primera vez en Internet por Tim Berners-Lee en 1991. En esta
publicación se describen 22 etiquetas que mostraban un diseño inicial y
relativamente simple de HTML. Varios de estos elementos se conservan en la
actualidad. Otros se han dejado de usar, y muchos otros se han ido añadiendo con
el paso de los años. De esta manera, podemos hablar de que han existido distintas
versiones de HTML a lo largo de la historia de internet. Nosotros vamos a trabajar
con el HTML estándar actual, que es el utilizado por los navegadores y páginas web
de hoy en día. Sin embargo, no vamos a prestarle atención a las versiones y
especificidades de cada versión, ya que el objetivo de este curso es aprenderlos
fundamentos de HTML y entender cómo funciona, no conocer la sintaxis o
especificidades de una versión concreta. ¿Por qué no le damos importancia a la
versión? Porque una persona que cuenta con los fundamentos y comprensión
básica sobre el lenguaje es capaz de adaptarse a las características particulares de
una versión sin problema. En cambio, centrarse en los detalles de una versión sin
conocer los fundamentos hará que no tengamos capacidad para comprender lo que
hacemos ni para adaptarnos a los continuos cambios que tienen lugar en el ámbito
de los desarrollos web.
Tim Berners-Lee

Evolución del HTML hacia marcado o aplicación
En los últimos tiempos estamos viendo como el navegador esta pasando de ser un
programa a ser un framework.
Mi pregunta es, ¿qué tendencia se marca con el HTML5? Seguir siendo un lenguaje
de marcado con ciertas características visuales o se tiende a un cambio de base
para orientarlo definitivamente hacia la creación de app potentes y flexibles?
Y aunque parezca algo de respuesta obvia por la repetición de la cantinela que
hacen todos los medios, no dejo de ver, de vez en cuando, pasos atras en la
orientación del HTML hacia aplicaciones como es la negativa del W3C a incorporar
objetos reales a Javascript o mantener algunas normas antiguas y un poco viejas
en css o en HTML.

1 - Etiquetas del lenguaje HTML
Las Etiquetas
El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de
texto destacado de una forma especial que permiten la definición de las distintas
instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas
estructuras del lenguaje. A estas marcas las denominaremos etiquetas y serán la
base principal del lenguaje HTML. En documento HTML será un fichero texto con
etiquetas que variarán la forma de su presentación.
Una etiqueta será un texto incluido entre los símbolos menor que < y mayor
que >.. El texto incluido dentro de los símbolos será explicativo de la utilidad de la
etiqueta. Por ejemplo:
<B> Letra Negrita, del inglés Bold (negrita).
<TABLE> Definirá una tabla.
<IMG> Inclusión de una IMaGen.
Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el
mismo texto que la de inicio añadiéndole al principio una barra inclinada /. El efecto
que define la etiqueta tendrá validez para todo lo que este incluido entre las
etiquetas de inicio y fin, ya sea texto plano o otras etiquetas HTML.
<ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA>
Por ejemplo, con la etiqueta siguiente:
<B>Texto que será en negrita</B>.
Obtendremos:

Texto que será en negrita
Algunas etiquetas no necesitarán la de fin, serán aquellas en las que el final este
implícito, por ejemplo <P> párrafo, <BR> salto de línea ó <IMG> inclusión de una
imagen. Definen un efecto que se producirá en un punto determinado sin afectar a
otros elementos.
El uso de mayúsculas o minúsculas en las etiquetas es indiferente, se
interpretarán del mismo modo en ambos casos, pero lo normal es expresarlas en
mayúsculas para que destaquen con más nitidez del texto normal.
Atributos de las Etiquetas
Las etiquetas pueden presentar modificadores que llamaremos atributos que
permitirán definir diferentes posibilidadesde la instrucción HTML. Estos atributos se
definirán en la etiqueta de inicio y consistirán normalmente en el nombre del atributo
y el valor que toma separados por un signo de igual. El orden en que se incluyan
los atributos es indiferente, no afectando al resultado. Si se incluyen varias veces el
mismo atributo con distintos valores el resultado obtenido será imprevisible
dependiendo de como lo interprete el navegador. Cuando el valor que toma el
atributo tiene más de una palabra deberá expresarse entre comillas, en otro caso
no será necesario.
Un ejemplo de atributo será:
<A HREF="http://www.uca.es">Pagina principal de la UCA</A>
En este caso la etiqueta A presenta un atributo HREF cuyo valor
es http://www.uca.es.
Igualmente una etiqueta podría presentar varios atributos:
<HR ALIGN=LEFT NOSHADE SIZE=5 WIDTH=50%>
En este caso la etiqueta HR presenta cuatro atributos. El segundo
atributo NOSHADE es un caso especial que no presenta valor. El orden en que se
especifiquen los atributos no afectarán al resultado final.
Etiquetas correctas
Todo texto que se encuentre entre los caracteres < y > se considerará una
etiqueta, si la etiqueta no fuera una de las validas del lenguaje HTML no será tenida
en cuenta, sin causar ningún tipo de error. Dejándose el texto o las etiquetas a las
que afectaba como si no existiera la etiqueta extraña. Cuando se comete un error

sintáctico al expresar una etiqueta o un atributo no se producirá ningún error,
simplemente no de obtendrá el efecto que deseábamos.
El lenguaje HTML es un lenguaje que evoluciona muy rápidamente y cada nueva
versión de los programas navegadores presenta etiquetas nuevas que causan
efectos más espectaculares o atributos nuevos de las etiquetas ya existentes. Esto
causa que los programas más antiguos no entiendan estas nuevas etiquetas y por
tanto las considere erróneas y no realice la acción que deseábamos. Dándose el
caso de atributos que son validos solo para un único navegador.
Cuando creemos código HTML hay que hacerlo lo más estándar posible para
permitir que el documento pueda ser visto de forma efectiva por distintos
navegadores en maquinas distintas. Por tanto debemos renunciar a efectos
espectaculares que solo tienen validez en un navegador e intentar comprobar como
se ve el documento en una variedad de navegadores, ya que las personas que se
conectan a nuestras páginas no tendrán en la mayoría de los casos el mismo que
nosotros. Tambien es interesante como se vería el documento en los distintos
tamaños de la ventana del navegador, teniendo en cuenta que todos no tienen un
monitor con la misma resolución.
En este manual se han tratado de incluir las características más estándar de
HTML y en caso de tratarse de instruccione
Leyenda:
 D: Desaprobado
 L: Loose DTD (Definición del Tipo de Documento Transicional)
 F: Frameset DTD (Definición del Tipo de Documento con Marcos)
Nombre Etiqueta
inicial
Etiqueta final Des. DTD Descripción
a <a> </a> Origen o destino del vínculo
abbr <abbr> </abbr> Abreviatura (p.ej.:WWW,
HTTP, etc.)
acronym <acronym> </acronym>
address <address> </address> Información sobre el autor
applet <applet> </applet> D L Applet Java
area <area> Prohibido Área de un mapa de imágenes
en el lado del cliente
b <b> </b> Estilo de texto en negrita
base <base> Prohibido URI base del documento
basefont <basefont> Prohibido D L Tamaño base de fuente
bdo <bdo> </bdo> Anular algoritmo BiDi I18N
big <big> </big> Estilo de texto grande
blockquote <blockquote> </blockquote> Cita larga
body Opcional Opcional Cuerpo del documento
br <br> Prohibido Salto de línea forzado

button <button> </button> Botón
caption <caption> </caption> Título de tabla
center <center> </center> D L Forma abreviada de DIV
align=center
cite <cite> </cite> Cita
code <code> </code> Fragmento de código de
computadora
col <col> Prohibido Columna de una tabla
colgroup <colgroup> Opcional Grupo de columnas de una
tabla
dd <dd> Opcional Descripción de una definición
del <del> </del> Texto borrado
dfn <dfn> </dfn> Definición
dir <dir> </dir> D L Lista tipo directorio
div <div> </div> Contenedor genérico de
idioma/estilo
dl <dl> </dl> Lista de definiciones
dt <dt> Opcional Término definido
em <em> </em> Énfasis
fieldset <fieldset> </fieldset> Grupo de controles de un
formulario
font <font> </font> D L Cambio local de la fuente
form <form> </form> Formulario interactivo
frame <frame> Prohibido F Subventana
frameset <frameset> </frameset> F Subdivisión en ventanas
h1 <h1> </h1> Encabezado
head Opcional Opcional Cabecera del documento
hr <hr> Prohibido Separador horizontal
html Opcional Opcional Elemento raiz del documento
i <i> </i> Estilo de texto en itálica
iframe <iframe> </iframe> L Subventana en línea
img <img> Prohibido Imagen incluida
input <input> Prohibido Control de formulario
ins <ins> </ins> Texto insertado
isindex <isindex> Prohibido D L Entrada de texto en una sola
línea con indicador
kbd <kbd> </kbd> Texto que debe introducir el
usuario
label <label> </label> Texto del rótulo de un campo
de formulario

legend <legend> </legend> Leyenda de un grupo de
campos
li <li> Opcional Objeto de lista
link <link> Prohibido Un vínculo independiente del
medio
map <map> </map> Mapa de imágenes en el lado
del cliente
menu <menu> </menu> D L Lista tipo menú
meta <meta> Prohibido Metainformación genérica
noframes <noframes> </noframes> F Contenedor de contenidos
alternativos para la
representación no basada en
marcos
noscript <noscript> </noscript> Contenedor de contenidos
alternativos para la
representación no basada en
scripts
object <object> </object> Objeto incluido genérico
ol <ol> </ol> Lista ordenada
optgroup <optgroup> </optgroup> Grupo de opciones
option <option> Opcional Opción seleccionable
p <p> Opcional Párrafo
param <param> Prohibido Valor de propiedad con
nombre
pre <pre> </pre> Texto preformateado
q <q> </q> Cita corta en línea
s <s> </s> D L Estilo de texto tachado
samp <samp> </samp> Ejemplo de salida de
programas, scripts, etc.
script <script> </script> Sentencias de script
select <select> </select> Selector de opciones
small <small> </small> Estilo de texto pequeño
span <span> </span> Contenedor genérico de
idioma/estilo
strike <strike> </strike> D L Estilo de texto tachado
strong <strong> </strong> Énfasis fuerte
style <style> </style> Información de estilo
sub <sub> </sub> Subíndice
sup <sup> </sup> Superíndice
table <table> </table>
tbody Opcional Opcional Cuerpo de tabla
td <td> Opcional Celda de datos de una tabla
textarea <textarea> </textarea> Campo de texto multilínea
tfoot <tfoot> Opcional Pie de tabla

th <th> Opcional Celda de encabezado de tabla
thead <thead> Opcional Cabecera de tabla
title <title> </title> Título del documento
tr <tr> Opcional Fila de una tabla
tt <tt> </tt> Estilo de texto de teletipo o
monoespacio
u <u> </u> D L Estilo de texto subrayado
ul <ul> </ul> Lista no ordenada
var <var> </var> Variable o argumento de un
programa

Ruiz guerra HTML

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (13)

Destacado

Destacado (20)

Similar a Ruiz guerra HTML

Similar a Ruiz guerra HTML (20)

Último

Último (20)

Ruiz guerra HTML