Вы находитесь на странице: 1из 8

24/04/18

HTML
HTML es un lenguaje de marcado que se utiliza para el desarrollo de paginas 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
HTML es un lenguaje que se utiliza para la creación de paginas en la WWW. Por
pagina entenderemos el documento que aparece en el visualizador o navegador.
Se compone de una serie de comandos, que son interpretados por el visualizador,
o programa que utilizamos para navegar por el WWW. En última instancia es el
visualizador el que ejecuta todas las ordenes contenidas en el código HTML, de
forma que un visualizador puede estar capacitado por unas prestaciones, pero no
para otras. Así, podremos especificar que una página tenga una imagen de fondo,
o un texto parpadeando, pero si nuestro visualizador no está capacitado para esas
funciones, no podremos verlas
El navegador y HTML
Un navegador o navegador web (del inglés, web browser) es una aplicación que
opera a través de internet, interpretando a información de archivos y sitios web
para que podamos leerla, (ya se encuentre está alojada en un servidor dentro de a
Wordl Wide Web o en un servicio local)
El navegador interpreta el código, HTML generalmente, en el que está escrita la
página web y lo presenta en pantalla permitiendo al usuario interactuar con su
contenido y navegar hacia otros lugares de la red mediante enlaces o
hipervínculos
Funcionalidad
La funcionalidad básica de un navegador web es permitir la visualización de
documentos de texto posiblemente con recursos multimedia incrustados. Los
documentos puedes estar ubicados en las computadoras en donde está el
usuario, pero también pueden estar en cualquier otro dispositivo que esté
conectado a la computadora del usuario o a través de internet, y que tenga los
recursos necesarios para la transmisión de los documentos un software servidor
Estructura de un documento HTML.
Un documento HTML, no es mas que el texto definido entre las marcas: <HTML>
</HTML>
Un documento HTML siempre se compone de las siguientes dos partes:
<HTML>
<HEAD> Cabecera del documento
</HEAD>
<BODY> Contenido del documento
</BODY>
</HTML>
Si estamos trabajando en el bloc de notas debemos guardar el documento con el
nombre y terminado en .html (ejemplo.html)
15/05/18
Cabecera
Se inicia mediante el comando <HEAD> y se termina con </HEAD>. Dentro de la
cabecera hay información del documento, que no se ve en la pantalla principal y
que precisa de las características del documento, principalmente el título del
documento
El título del documento se declara entre las etiquetas <TITLE> y </TITLE>. El título
debe ser breve y descriptivo de su contenido, pues será lo que vean los demás
cuando añadan nuestra página a su bookmark (o libro de direcciones favoritas).
Cuerpo
Se inicia mediante el comando <BODY> y se termina con el comando </BODY>.
Este comando acepta numerosos modificadores. Dentro del cuerpo del documento
se incluye cualquier carácter imprimible
Comandos básicos del HTML
La marca <P> sirve para separar párrafos en HTML. Además de introducir un salto
de línea, permite forzar un segundo salto de línea para dejar una línea en blanco
entre un párrafo y el siguiente. De esta manera los párrafos quedan mas
espaciados y el texto se vuelve más legible
LEFT: el párrafo es justificado a la izquierda. Valor por defecto.
CENTER: el párrafo es centrado
RIGHT: el párrafo es justificado a la derecha
<BR>
La marca <BR> introduce un salto de línea en el punto del documento en el que es
colocada. Es equivalente al punto y aparte de un texto normal
Titulos de encabezamiento
HTML dispone de seis cabeceras. O tipos de letras predefinidos de distinto
tamaño, que se utilizan para marcar los títulos o resaltes en las páginas. Se
activan con el comando <Hn> y se desactivan con </Hn>, donde n es un numero
de 1 a 6 siendo el numero indicativo del tamaño. El tamaño mayor es
correspondiente al número 1
Títulos de encabezamiento
<H1> Nivel de encabezado 1 </H1>
<H2> Nivel de encabezado 2 </H2>
<H3> Nivel de encabezado 3 </H3>
<H4> Nivel de encabezado 4 </H4>
<H5> Nivel de encabezado 5 </H5>
<H6> Nivel de encabezado 6 </H6>
Los títulos de encabezado requieren la marca de fin y siempre provocan un salto
de línea, aunque no se le indique.
Dando estilo al texto
Las marcas de estilo de texto especifican el tipo de letra (negrita, cursiva, ...),
tamaño, color que se desea que aparezca el texto
Tipos de letra
Algunas de las marcas que permiten especificar la tipografía de los caracteres son
las siguientes:
<B> Negrita (Bold) </B>
<I> Cursiva (Italic) </I>
<U> Subrayado (Underline) </U>
Todas estas marcas requieren etiquetas de comienzo y fin, y se pueden anidar
Tamaño del texto
Para modificar el tamaño se utiliza el atributo SIZE de la marca <FONT>, de la
manera siguiente:
<FONT SIZE= “Tamaño”>Texto</FONT>
El comando <FONT> requiere de la etiqueta cierre
HTML define siete tamaños de letra distintos, siendo el tamaño 3 el que se adopta
por defecto. Sin embargo, la mayoría de los navegadores permiten establecer cual
es la correspondencia real del tamaño 3. Así, se puede hacer que el tamaño 3
corresponda a una fuente Arial de 16, o a una times de 8
 Existen dos formas de establecer el tamaño de un trozo de texto
Si queremos modificar el tamaño de todo el texto del documento, una forma de
hacerlo sería englobar todo el cuerpo del documento en una etiqueta con el
tamaño de letra que queremos utilizar. Así escribiremos algo parecido a lo que
sigue:
<HTML>
<HEAD>
</HEAD>
<BODY> <FONT SIXE=4>
(contenido del documento)
</FONT></BODY>
</HTML>
22/05/18
Colores del texto
Para dar color a un texto se utiliza el comando siguiente:
<FONT COLOR= “color”>Texto</FONT> en un principio la forma de especificar un
color en HTML, era mediante el formato hexadecimal.
05/06/208
Listas
Las listas en HTML proporcionan una forma de clasificar la información, y que
hacer que ésta sea mas inteligible por parte del visitante de las paginas
Listas ordenadas: OL
También llamadas listas numeradas son aquellas que cada elemento tiene delante
un numero que indicia el orden del elemento dentro del conjunto de la lista
La marca para crear una lista ordenada es <OL>…</OL>. Son obligatorias las
etiquetas de comienzo y fin de estas marcas
Cada elemento de la lista ordenada se identifica escribiéndolo dentro de la marca
<LI> … </LI>. La etiqueta de fin puede ser omitida.
Con la marca LI no es necesario introducir un retorno de carro detrás de cada
elemento de la lista
Es posible especificar el tipo de numeración que se dará (números arábigos,
números romano, letras, etc.) por defecto se sigue la numeración árabe
Las listas numeradas pueden ser anidadas una dentro de otra
Listas desordenadas: UL
También llamadas listas no numeradas son listas que no es necesario numerar de
alguna manera los elementos que la componen, sino que cada elemento tiene
delante un símbolo (un punto, un cuadrado, etc.)
La forma de especificar una lista desordenada es mediante la marca <UL>. Las
etiquetas de comienzo y fin de esta marca son obligatorias
Cada elemento de la lista se identifica mediante la marca <LI>. La etiqueta de fin
para la marca <LI> se puede omitir
También es posible en las listas desordenadas especificar el símbolo que va a
aparecer delante de cada elemento de la lista
Las listas desordenadas también pueden ser anidadas una dentro de otra
Listas de definición: DL
A diferencia de los tipos anteriores de listas, las listas de definición, se utilizan
para presentar la información sin marcas, ni números, sino que utiliza los
sangrados de los párrafos
Las listas de definición están constituidas por términos y su subsiguiente definición
La forma de implementar las listas de definición es con la marca <DL> de la
siguiente forma:
<DL>
<DR> Nombre del termino
<DD> definición del termino
</DL>
Cada termino de la lista de definición se indica con la marca <DT> y no sangrara,
mientras que la descripción del termino se indica con la marca <DD> y sangrara
hacia la derecha para resaltar del término.
Antes y después de la descripción de cada palabra clave, las listas de definición
incorporan un retorno de carro.
Las listas de definición también pueden anidarse.
Texto preformateado: PRE
El hecho de que HTML ignore los retornos de carro a la hora de mostrar un texto
no es un comportamiento arbitrario, sino que la forma que tenemos de que,
independientemente que la ventana de visualizador, nuestro párrafo quede
convenientemente justificado
Sin embargo, es posible que en alguna ocasión queramos que el texto aparezca
en el visualizador tal y como lo hemos introducido, respetando los retornos de
carro e incluso los espacios que podamos haber dejado entre caracteres. Para ello
podemos utilizar la marca <PRE> y englobar en ella todo el texto del documento
La marca <PRE> respeta tanto los retornos de carro como los espacios en blanco
del archivo original, y la letra aparece como tipo de letra de espacio no
proporcional (el tipo de letra usado por el texto preformateado es el mismo que el
de <TT> … </TT>), y no con el tipo de letra habitual del visualizador. Esta marca
permite mostrar el texto preformateado tal cual
Además, en el texto preformateado no se interpretan los caracteres especiales
HTML: <, > y &
17/07/18
Enlaces: A
La clave de la facilidad de uso de los documentos HTML, reside
fundamentalmente en los enlaces. Los enlaces (o links) proporciona al que visita
las paginas un: mecanismo muy sencillo para moverse entre distintos documentos,
permitiéndole moverse en aquellos aspectos que considere mas importantes,
mientras que desde el punto de vista del que crea las paginas permite distribuir de
forma transparente al visitante del lugar o lugares en los que se van a almacenar
los distintos documentos
Para definir enlaces hipertexto se utiliza la marca <A> de la manera siguiente:
<A HREF=”dirección”>Texto del enlace</A>
Donde:
 Dirección: es el destino del enlace
 Texto del enlace: es el texto indicativo del enlace que aparece en la
pantalla normalmente con color especial y subrayado
<A> requiere de la marca de fin
Vamos a distinguir tres tipos de enlaces
1. Enlaces a otras zonas de la misma página
2. Enlace a otras páginas
3. Enlaces a otras zonas de otras páginas
Enlaces a otras personas de la misma página
A veces, en el caso de documentos (o páginas) muy extensos, nos puede
interesar dar un salto desde una posición a otra determinada
Así es posible hacer enlaces que llevan al usuario de una parte del documento a
otra dentro del mismo documento con solo hacer click. A este tipo de enlaces los
llamaremos enlaces locales.
Estos enlaces constan de dos objetos:
 El enlace:
Corresponde a la zona en la cual el usuario hará click, para viajar a otra parte del
documento
Esta zona aparece subrayada en el documento. Un enlace local se crea
delimitando la zona con el comando <A href=”#nombre”> …</A>, en que nombre
es la etiqueta que se esta referenciando
 El nombre enlazado o referenciado:
Corresponde a la zona del documento a la cual el usuario llegara al hacer click en
la referencia correspondiente. Un nombre local se crea delimitando la zona con el
comando <A NAME=”nombre”>… </A>, en que nombre es la etiqueta que
asignamos a esta zona
Enlaces a otras páginas
Para enlazar a otro documento, es necesario conocer la ubicación exacta del
documento que se referenciara. Una ubicación puede ser referenciada en forma
relativa o absoluta
 Ubicación relativa:
Se indica especificando la posición del documento en la estructura de
subdirectorios a partir de la ubicación del documento actual. Solo se puede usar
para documentos ubicados en el mismo ordenador.
Una referencia relativa a otro documento se hace usando el comando:
<A HREF=”ubicación”>…</A>
 Ubicación absoluta:
Se indica especificando el URL (uniform resurce locator) de la página que se está
referenciando
Los URL son una manera universal de especificar una dirección. La forma más
básica de referenciar un hipertexto es usar el comando:
<A HREF=”http://ordenador/directorio/archivo”>…
El ordenador indica la maquina donde se encuentra el documento, el directorio y
archivo indican su posición dentro de ese ordenados. Los URL tienen muchas
formas distintas para referenciar distintos objetos

Вам также может понравиться