HTML (HYPERTEXT MARKUP LANGUAGE)

ALUMNA:

ANDREA GUERRERO MOLINA

MATERIA:

ELECTIVA DE FORMACION INTEGRAL III

DOCENTE:

PAULA ANDREA ROA

CORPORACIÓN UNIFICADA NACIONAL DE EDUCACIÓN SUPERIOR CUN

IBAGUE

2015

HTML (HYPERTEXT MARKUP LANGUAGE)

ALUMNA:

ANDREA GUERRERO MOLINA

CORPORACIÓN UNIFICADA NACIONAL DE EDUCACIÓN SUPERIOR CUN

IBAGUE

2015

CONTENIDOS

1. Que es html

2. Aspectos del html

3. Historia del html

4. Estructura de un documento html

5. La sintaxis de los elementos html

6. Elementos de bloque y en línea

7. Referencias de carácter

1. QUE ES HTML 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. EL HTML se encarga de desarrollar una descripción sobre los contenidos que aparecen como textos y sobre su estructura, complementando dicho texto con diversos objetos (como fotografías, animaciones, etc). 2. Aspectos del html Para comenzar a crear nuestras páginas web lo único que tendremos que hacer es ir componiendo las diferentes etiquetasHTML dentro de un documento.Una etiqueta HTMLes un término rodeado por un signo de menor y otro de mayor; por ejemplo:

<strong>Esta etiqueta indica que el texto que aparece a continuación se debe destacar sobre el resto; normalmente se muestra en negrita.En muchos casos necesitaremos también una segunda etiqueta que delimite el final. Así, para que el texto deje de estar destacado y continúe normalmente, empleamos la misma etiqueta con una barra:</strong>

El conjunto de las dos etiquetas y el texto contenido en su interior conformarían un elemento HTML . Algunos elementos requieren esa apertura y cierre, mientras que en otros casos sólo necesitaremos una etiqueta, ya quereflejamos un elemento puntual o con un contenido vacío. Por ejemplo:

<hr /> hace que en el documento aparezca una línea separando el texto anterior del siguiente. Como se puede observar, cuando un elemento no va a tener una etiqueta de cierre (no existe un </hr>), el indicador de fin se añade en la propia etiqueta inicial. Nota: Todas las etiquetas HTML se escriben siempre en Minúsculas . Si bien los navegadores son capaces de interpretar las etiquetas en mayúsculas, las normas de la W3C especifican que todas las etiquetas se debe escribir en minúsculas. Otra característica importante de las etiquetas es que son anidables, por lo que podemos definir un párrafo (mediante lasetiquetas <p>y </p>) y en su interior incuir una lista de elementos, imágenes, texto destacado, etc. empleando diferentes etiquetas. Veremos muchos ejemplos al respecto. Parámetros de las etiquetas Muchas etiquetas HTML necesitan contar con parámetros para funcionar correctamente. Éstos son modificadores que se introducen entre los signos de apertura y cierre para definir algún matiz concreto del elemento HTML. Por ejemplo, la etiqueta

<img />se emplea para insertar una imagen en la página web, pero por si sola no funciona correctamente. Necesita que le incorporemos un parámetro en el que indiquemos qué imagen será la que se muestre. Quedaría así:

<img src=”fotodelgrupo.jpg” /> En el ejemplo siguiente, además de indicar qué imagen se mostrará, establecemos el tamaño que ocupará en la pantalla:<img src=”fotodelaula5.jpg” width=”300px” height=”150px” />Los parámetros se identifican por un término, seguido de un signo de igual y a continuación, entre comillas, el valor que le queramos asignar 3.Historia del HTML Este lenguaje fue desarrollado por la Organización Europea de Investigación Nuclear (CERN) en el año 1945 con la finalidad de desarrollar un sistema de almacenamiento donde las cosas no se perdieran, que pudieran ser conectadas a través de hipervínculos. Primeramente crearon un dispositivo llamado “memex”, el cual era considerado como un suplemento para la memoria. Posteriormente, Douglas Engelbart, diseñó un entorno de trabajo por computadora que recibiría el nombre de oNLine System que poseía un catálogo para facilitar la tarea de búsqueda dentro de un mismo organismo. Recién en 1965, Ted Nelson acuñó el término hipervínculo, ideando una estructura que se encontraba conectada de forma electrónica y que más tarde permitiría la creación de la World Wide Web (1989), un sistema de hipertexto a través del cual

era posible compartir una variada información sirviéndose de Internet (servía para la comunicación entre investigadores nucleares que formaran parte del CERN). El norteamericano Tim Berners-Lee fue el primero en proponer una descripción de HTML en un documento que publicó en 1991. Allí describía veintidós componentes que suponen el diseño más básico y simple del HTML. El tipo de codificación que se utilizó para el desarrollo de este sistema de hipervínculos debía ser comprendido, tanto por ordenadores tontos como por mega-estaciones, por eso fue necesario crear uno absolutamente simples, tanto en lo que respectaba al lenguaje de intercambio (HTML), como el que hacía referencia al protocolo de red (HTTP). Al día de hoy existen los Editores Web que permiten que los diseñadores, a través de herramientas gráficas que reciben el nombre de WYSIWYG puedan crear páginas web sin conocer el código html, este se crea de forma automatizada, dándole estructura a la web y permitiendo que sea más allá del ordenador donde es creada. Entre los recursos que pueden enlazarse al código HTML se encuentran fotografías, vídeos, archivos de otras webs o incluso de la misma y todo tipo de contenido que se encuentre subido a la red. 4. Estructura de un documento html

Cada página comienza con: < HTML > . A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD > . Después, el comando < BODY >, que indica el comienzo del cuerpo de la

página. Las instrucciones HTML se escribirán a continuación, y finalizarán con < /BODY >.

La página acabará con < /HTML > .

Es decir: <HTML>

<HEAD>

Definiciones de la cabecera

</HEAD>

<BODY>

Instrucciones HTML

</BODY>

</HTML>

Cabecera

La cabecera de un documento está delimitada por las etiquetas < HEAD > y </HEAD > Sus componentes son opcionales. El más importante es <TITLE> , que permite escribir el título del documento. El título no se muestra en la página, sino en la parte superior de la ventana del visualizador, como identificador en los bookmarks y en la history list. Se utiliza de la siguiente forma:

<HEAD>

<TITLE>Título del documento HTML</TITLE>

</HEAD>

5. La sintaxis de los elementos html

l lenguaje HTML original era muy permisivo en su sintaxis, por lo que era posible escribir sus etiquetas y atributos de muchas formas diferentes. Las etiquetas por ejemplo podían escribirse en mayúsculas, en minúsculas e incluso combinando mayúsculas y minúsculas. El valor de los atributos de las etiquetas se podían indicar con y sin comillas ("). Además, el orden en el que se abrían y cerraban las etiquetas no era importante.

La flexibilidad de HTML puede parecer un aspecto positivo, pero el resultado final son páginas con un código HTML desordenado, difícil de mantener y muy poco profesional. Afortunadamente, XHTML soluciona estos problemas añadiendo ciertas normas en la forma de escribir las etiquetas y atributos.

A continuación se muestran las cinco restricciones básicas que introduce XHTML respecto a HTML en la sintaxis de sus etiquetas:

1) Las etiquetas se tienen que cerrar de acuerdo a como se abren:

Ejemplo correcto en XHTML:

<p>Este es un párrafo con <a>un enlace</a></p>

2) Los nombres de las etiquetas y atributos siempre se escriben en minúsculas:

Ejemplo correcto en XHTML:

<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>

3) El valor de los atributos siempre se encierra con comillas:

Ejemplo correcto en XHTML:

<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>

4) Los atributos no se pueden comprimir:

Ejemplo correcto en XHTML:

<dl compact="compact">...</dl>

Este tipo de atributos en los que el nombre coincide con su valor no son muy habituales.

5) Todas las etiquetas deben cerrarse siempre:

La mayoría de etiquetas HTML encierran un contenido de texto entre la etiqueta de apertura y la etiqueta de cierre. Sin embargo, algunas etiquetas especiales llamadas "etiquetas vacías" no necesitan encerrar ningún texto.

La etiqueta <br> por ejemplo, se utiliza para indicar el comienzo de una nueva línea, tal y como se verá más adelante. Por sus características, la etiqueta <br> nunca encierra ningún contenido de texto.

Como el estándar XHTML obliga a cerrar todas las etiquetas abiertas, siempre que se incluya la etiqueta <br> se debería cerrar de forma seguida: <br></br>. Para que el código resulte más cómodo de escribir, XHTML permite en estos casos escribir de forma abreviada una etiqueta que se abre y se cierra de forma consecutiva.

En lugar de abrir y cerrar de forma consecutiva la etiqueta (<br></br>) se puede utilizar la sintaxis <br/> para indicar que es una etiqueta vacía que se abre y se cierra en ese mismo punto. En la forma compacta es habitual equivocarse con la posición del carácter /.

Ejemplo correcto en XHTML:

<br/>

Ejemplo incorrecto en XHTML (pero correcto en HTML):

<br>

6. Elementos de bloque y en línea

Como su nombre los indica, ya hay una definición en si, de cada tipo.

- Los elementos de tipo block, son elementos que forman un bloque separado. - Lo de tipo inline, son aquellos que permanecen en línea con los demás elementos.

Los elementos de tipo block

Estos elementos poseen las siguientes características:

Forma un bloque y se posiciona de forma vertical con un nuevo salto de línea.

Las anchura es la máxima que puede tomar dentro de siu elemento contenedor (padre)

La altura cambia en base al contenido que posea. Puede contener otros elementos de tipo inline y block Por medio de CSS se le puede aplicar una anchura y un altura fija.

Elemento que corresponden al tipo block:

Parrafos <p>

Titulares <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Cajas <div>

Listas <ul>, <ol>, <li>

Otros <menú>, <dir>, <pre>, <hr>, <blockquote>, <address>, <center>, <noframes>, <isindex>, <fieldset>, <table>, <form>

Los elementos inline

Estos elementos poseen las siguientes características:

Se posiciona horizontalmente en línea con los otros elementos. La altura y altura se define en base al contenido que posea. Solo puede contener elementos de tipo inline. No se puede aplicar una anchura y un altura fija por medio de CSS.

Elemento que por default corresponden al tipo inline:

<a>, <br>, <span>, <bdo>, <object>, <applet>, <img>, <map>, <iframe>, <tt>, <i>, <b>, <big>, <small>, <u>, <s>, <strike>, <Font>, <basefont>, <em>, <strong>, <dfn>, <code>, <q>, <sub>, <sup>, <samp>, <kbd>, <var>, <cite >, <abbr>, <acronym>, <input>

7. Referencias de carácter

Una referencia de caracteres es una pequeña pieza de código usada para representar ciertos caracteres en documentos HTML. Principalmente usada para insertar símbolos que no pertenecen al juego de caracteres (o en muchos casos, símbolos difíciles de ingresar), las referencias de caracteres pueden insertarse utilizando una expresión regular. De echo, cada referencia de caracteres puede insertarse de tres formas diferentes:

Por su nombre de entidad: Cada referencia de caracteres tiene una entidad asignada. El formato apra insertar un símbolo por su nombre de entidad está compuesto por un símbolo "&" seguido de su nombre de entidad y un punto y coma (";"). Por ejemplo, el símbolo de la libra esterlina ("£") puede ser insertado como "&pound;".

Por su valor decimal: Tal como con las entidades, un número único es asociado con cada referencia de caracteres. El formato es compuesto por un símbolo "&" seguido de un signo numeral ("#"), el número asociado y un punto y coma (";"). Por ejemplo, el símbolo de la libra esterlina ("£") puede ser insertado como "&#163;".

Por su valor hexadecimal: Este método funciona exactamente como el del valor decimalcon la diferencia que el número se escribe en formato hexadecimal y una "x" (en minúscula) se agrega a continuación del signo numeral ("#"). Las letras en el número hexadecimal deben ir en mayúsculas. Por ejemplo, el símbolo de la libra esterlina ("£") puede ser insertado como "&#xA3;".

CYBERGRAFIA http://www.htmlquick.com/es/reference/character-entity-reference.html Lee todo en: Definición de html - Qué es, Significado y Concepto http://definicion.de/html/#ixzz3lNpfOCZ5 Lee todo en: Definición de html - Qué es, Significado y Concepto http://definicion.de/html/#ixzz3lNpNfnp8 Lee todo en: Definición de html - Qué es, Significado y Concepto http://definicion.de/html/#ixzz3lNpDcES2