HTML E INTERNET
YCCF20 de Junio de 2014
7.359 Palabras (30 Páginas)237 Visitas
HTML
Desde el surgimiento de internet se han publicado sitios web gracias al lenguaje HTML.
LENGUAJE HTML
Es un lenguaje de programación que se utiliza para el desarrollo de páginas de Internet. Se trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formato de Documentos para Hipertexto.
Sintaxis:
<html> (Inicio del documento HTML)
<head>
( Cabecera )
</head>
<body>
( Cuerpo )
</body>
</html>
<b> </b> Negrita
<p> </p> Definir párrafo
<Etiqueta> Apertura de la etiqueta
</Etiqueta> Cierre de la etiqueta
VENTAJAS
• Sencillo que permite describir hipertexto.
• Texto presentado de forma estructurada y agradable.
• No necesita de grandes conocimientos cuando se cuenta con un editor de páginas web o WYSIWYG.
• Archivos pequeños.
• Despliegue rápido.
• Lenguaje de fácil aprendizaje.
• Lo admiten todos los exploradores.
DESVENTAJAS
• Lenguaje estático.
• La interpretación de cada navegador puede ser diferente.
• Guarda muchas etiquetas que pueden convertirse en “basura” y dificultan la corrección.
• El diseño es más lento.
• Las etiquetas son muy limitadas.
ESTRUCTURA GENERAL DE UN DOCUMENTO HTML
Un documento creado en HTML contiene básicamente la siguiente serie de comandos que dan forma a su contenido:
<HTML> Indica el inicio del documento.
<HEAD> Inicio de la Cabecera.
<TITLE> Inicio del título del documento.
</TITLE> Final del título del documento.
</HEAD> Final de la Cabecera del documento.
<BODY> Inicio del cuerpo del documento.
</BODY> Final del cuerpo del documento.
</HTML> Final del documento.
El documento en sí está dividido en dos zonas principales:
El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>
El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>
Dentro del encabezado se encuentra información del documento, que no se ve en pantalla, en él encontramos el título del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido. Este es el que aparece en la barra superior de nuestro navegador de páginas Web.
Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, animaciones, formularios, etc.)
Por tanto, la estructura a manera de ejemplo queda de esta manera:
Con la ayuda de un Browser, Firefox o Internet Explorer abrimos el archivo index.htm y observamos la página creada.
Ahora con la ayuda de un procesador de palabras (Bloc de notas), copiamos el siguiente código fuente y guardamos el archivo con la extensión htm ó html con el nombre de index.
<HTML>
<HEAD>
<TITLE> Proyecto Web </TITLE>
</HEAD>
<BODY>
<HI> <CENTER> Página base o inicial </CENTER>
</HI>
<HR>
Esta es la primera página que observamos directamente de su código fuente.
El lenguaje HTML para generarla no es difícil, pronto estaremos en condiciones de hacer más cosas interesantes.
<P> Este es un segundo párrafo como alternativa de presentación.
</BODY>
</HTML>
FORMATOS DE TEXTO EN HTML
Vamos a ver una serie de etiquetas y atributos básicos para la creación de páginas webs. No entraremos a describir una a una todas las etiquetas y atributos que el HTML dispone. Simplemente explicaremos las más utilizadas y las que nosotros creemos indispensables.
Las primeras etiquetas que veremos son para dar formato al texto. Para ello tenemos una serie de etiquetas que escribimos en HTML envolviendo la palabra o el texto y que transforman ese texto en el formato que nosotros le hayamos querido dar.
ETIQUETA USO OBSERVACIONES
<b>…</b> Poner texto en negrita
<strong>…</strong> Poner texto en negrita
<i>…</i> Poner texto en cursiva
<em>…</em> Poner texto en cursiva
<u>…</u> Poner texto subrayado Etiqueta obsoleta. Sustituir por hojas de estilo.
<small>…</small> Poner texto más pequeño
<big>…</big> Poner texto más grande
<sub>…</sub> Poner texto subíndice
<sup>…</sup> Poner texto superíndice
<strike>…</strike> Poner texto como tachado Etiqueta obsoleta. Sustituir por hojas de estilo.
<s>…</s> Poner texto como tachado Etiqueta obsoleta. Sustituir por hojas de estilo.
<del>…</del> Poner texto como tachado
Como verás, algunas de las etiquetas que vamos a explicar están obsoletas (deprecated en inglés). Estas etiquetas en principio no deben de ser usadas porque dejarán de existir en HTML y los navegadores es posible que dejen de reconocerlas en un futuro.
Los motivos para incluirlas en este curso son:
Son una buena forma de introducirnos en los lenguajes propios de desarrollos webs desde el punto de vista didáctico. Una vez se entiendan estos conceptos, es más fácil abordar aspectos más avanzados como las hojas de estilo.
Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y cerrarse, conteniendo el texto o la palabra que queramos transformar en su interior. Por ejemplo:
<b>Este texto aparecerá escrito en negrita</b>. Se pueden combinar diferentes formatos, o sea, diferentes etiquetas. Por ejemplo, si queremos que un texto esté en negrita y en cursiva escribiríamos esto: <b><i>Este texto aparecerá escrito en negrita y en cursiva</i></b>.
Cuando combines, ten cuidado a la hora de cerrar las etiquetas. Debes cerrar las etiquetas por orden, de la más interior a la más exterior.
Veamos las principales etiquetas para dar formato a textos usando HTML.
Negrita
Existen dos etiquetas que harán que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es en principio indiferente. Puedes usar la que prefieras. La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un ejemplo de código y lo que veríamos en pantalla:
Esta palabra la vamos a poner en <b>negrita</b> y esta otra <strong>también</strong>
Esta palabra la vamos a poner en negrita y esta otra también
Cursiva
Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por supuesto cerrarla con la etiqueta </i>). También podemos utilizar la etiqueta <em>. Como en el caso de la negrita, es indiferente el uso de una u otra. Aquí presentamos un ejemplo:
Esta palabra la vamos a poner en <i>cursiva</i> y esta otra <em>también</em>
Esta palabra la vamos a poner en cursiva y esta otra también
Subrayado
Si queremos que la palabra o el texto quede subrayado, deberemos rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta </u>. Así subrayaríamos una frase importante:
<u>Así subrayaríamos una frase importante</u>
Así subrayaríamos una frase importante
Está etiqueta está obsoleta (deprecated), lo que significa que ya no se recomienda su uso. Para lograr el resultado deseado se deben usar hojas de estilo como veremos más adelante.
Palabras más grandes o más pequeñas
Puede que en una frase queramos destacar un palabra por medio de una variación de tamaño sin necesidad de utilizar los encabezados (los encabezados son etiquetas especiales que explicaremos más adelante). La variación de tamaño la podemos conseguir gracias a las etiquetas <big> y <small>. Sus propios nombres en inglés nos indican cuáles serán sus funciones: <big> agrandará el texto y <small> lo disminuirá.
Cada vez que escribamos una etiqueta, haremos el texto un punto más grande. Estas etiquetas también las podemos combinar, por lo que si escribimos dos veces la etiqueta <big>, haremos crecer la palabra dos puntos. Un ejemplo sería el siguiente:
Esta palabra se va a escribir <small>pequeñita</small>, esta se va a escribir <big>más grande</big> y ésta <big><big>más grande aún</big></big>.
Esta palabra se va a escribir pequeñita, esta se va a escribir más grande y ésta más grande aún.
Superíndices y subíndices
Mediante el HTML también podemos escribir expresiones con símbolos matemáticos. Gracias a las etiquetas siguientes podrás escribir subíndices y superíndices fácilmente. La etiqueta <sub> te servirá para escribir un subíndice y <sup> será la etiqueta para un superíndice. Así nos queda un ejemplo como el siguiente:
Gracias a estas etiquetas podemos escribir cualquier expresión con símbolos matemáticos como esta: H<sub>2</sub>O o números elevados a potencias 7<sup>3</sup>.
Gracias a estas etiquetas podemos escribir cualquier expresión con símbolos matemáticos como esta: H2O o números elevados a potencias 73.
...