Diversas características generales

Diversas Características Generales

HTML

Atributos• Los atributos proporcionan información adicional

acerca de los elementos HTML, siempre se especifican en la etiqueta de inicio y vienen en pares nombre / valor como: nombre = "valor«

• Un ejemplo: Los vínculos HTML se definen con la etiqueta <a>. La dirección del enlace se especifica en el atributo href:

<a href="http://www.w3schools.com">Enlace</a

• Los valores siempre iran entre comillas, si el atributo en si contiene comillas se usaran las simples.

ATRIBUTOS DE LA ETIQUETA BODY: BGCOLOR, TEXT, BACKGROUND.

• BGCOLORParámetro usado para especificar el color de fondo de la página. El color se define en base hexadecimal de la siguiente forma (#rrggbb) en el orden rojo, verde, azul (Red, Green, Blue).Sintaxis: <body bgcolor=”#0000FF”> o <body bgcolor=”blue”>• TEXTParámetro usado para definir el color del texto. Su formato es el mismo que el de bgcolor. Si no se pone nada es negro.Sintaxis: <body text=”#0000FF”> o <body text=”blue”>• BACKGROUNDParámetro usado para especificar la ruta y nombre de archivo (URL) de la imagen (formato GIF, JPG o PNG habitualmente) que será usada como fondo del documentoSintaxis tipo: <body background="ruta/archivo.gif">

• Ejemplo• Suponer la siguiente estructura de directorios y archivos:· HTML/pagina1.html: el archivo denominado pagina1.html está dentro de la carpeta HTML.· HTML/gifs/fondo.gif· HTML/ejemplos/pagina2.html: el archivo denominado pagina2.html está dentro de una subcarpeta denominada ejemplos, que se encuentra dentro de la carpeta HTML.

• Que escribir si desde la página pagina1.html se quiere poner como fondo la imagen fondo.gif, que se encuentra en el directorio gifs ?– <body background="gifs/fondo.gif">

• Si desde la página pagina2.html se quiere poner como fondo la imagen fondo.gif, que se encuentra en el directorio gifs, que se escribiria?– <body background="../gifs/fondo.gif">

• Poner atencion en ../ pues es lo que indica al navegador que debe acudir al directorio superior. Si se quisiéra subir dos niveles, por ejemplo si tenemos la página en HTML/ejemplos/miweb/pagina3.html

• Se escribiría “../../gifs/fondo.gif”

MÁRGENES: LEFTMARGIN, TOPMARGIN, RIGHTMARGIN Y BOTTOMMARGIN

• Ya se sabe de qué color será el fondo y el texto, pero también se puede predefinir los márgenes de la página web para que quede mucho mejor.

• Porque no se desea que el texto se quede muy pegado los márgenes igual que al escribir en una hoja no se escribe pegado al borde sino que se deja un margen.

• Para especificar los márgenes se utiliza el parámetro margin, con su correspondiente indicación delante.

• Así se tiene "leftmargin" para el margen izquierdo, "topmargin" para el margen de arriba, "rightmargin" para el margen de la derecha y "bottommargin" para el margen de abajo.

• Los márgenes se suelen medir en pixeles, término inglés que en castellano equivaldría a “puntos” (tener en cuenta que una pantalla tiene unas dimensiones en pixeles de ancho y pixeles de alto).

• Por ejemplo, si se quisiera que los márgenes sean de 10 pixeles por todas partes se escribira lo siguiente:

• <body leftmargin="10px" topmargin="10px" rightmargin="10px" bottommargin="10px"></body>

PÁRRAFOS Y APLICAR ESTILOS A PÁRRAFOS

• En relación a la alineación de párrafos Como se ve, se ha introducido el uso de estilos. Un estilo sirve para “moldear” la presentación de algo (un párrafo, un contenedor). En este caso, se dice que el estilo a aplicar al párrafo incluye el alineado del texto (atributo text-align) al centro (center).

• Un estilo se puede aplicar de distintas maneras. En este caso se hace de la forma más sencilla posible:

• Se escribe style = “característica a aplicar nº1 ; característica a aplicar nº2; característica a aplicar nº3;”.

• Por ejemplo: Este texto estara centrado, tendrá una fuente de 12 pixeles y color azul

FORMATOS DE TEXTO EN HTML: NEGRITA, CURSIVA, TACHADO, SUBRAYADO, SUPERÍNDICE, SUBÍNDICE.

• Ya se dijo que hay una serie de etiquetas y atributos básicos para la creación de páginas webs.

• No se entrara a describir una a una todas las etiquetas y atributos de que HTML dispone. Simplemente se explicaran las más utilizadas

• En este caso, algunas para dar formato al texto. Hay una serie de etiquetas que se escriben en HTML envolviendo la palabra o el texto y que transforman ese texto en el formato que se le haya querido dar.

• Así se puede ver en el ejemplo 16:

• Como vieron, algunas de las etiquetas de la tabla están obsoletas (deprecated en inglés). Estas etiquetas en principio no deberían de ser usadas porque dejarán de existir en HTML 5 y los navegadores es posible que dejen de reconocerlas en un futuro. Los motivos para incluirlas en este curso son:

• - Son etiquetas que han sido muy populares en el pasado y pueden encontrar muchas páginas webs que hacen uso de ellas.

• - Son etiquetas reconocidas por prácticamente todos los navegadores actuales.

• - Son una buena forma de introducirse 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 se quiera transformar en su interior.

• Por ejemplo: Este texto aparecerá escrito en negrita. • Se pueden combinar diferentes formatos, o sea, diferentes etiquetas. • Por ejemplo, si se quiere que un texto esté en negrita y en cursiva se

escribiría esto: Este texto aparecerá escrito en negrita y en cursiva.

• Cuando sehagan combinaciones, tener cuidado a la hora de cerrar las etiquetas. Se debe cerrar las etiquetas por orden, de la más interior a la más exterior.

LA ETIQUETA <PRE>

• La etiqueta <pre> se puede utilizar para que el navegador interprete el texto escrito tal y como está.

• Veamos dos ejemplo con el ejemplo 18 y sin esta etiqueta el ejemplo 17

LÍNEAS SEPARADORAS. SEPARADORES EN HTML: ETIQUETA <HR>

• Para separar un texto de otro o un párrafo de otro se puede utilizar una línea horizontal de un tamaño o un grosor determinado por el usuario. Este separador se escribe con la etiqueta <hr>. Esta no necesita ser cerrada.

• La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de una serie de atributos que se pueden predefinir. Por ejemplo, se puede definir su grosor mediante el parámetro size.

• Para escribir este parámetro en la etiqueta se escribira size=”x”, siendo “x” el número del grosor de la franja en pixeles (también se puede indicar en porcentajes).

• El ejemplo 19, muestra 2 franjas con diferentes grosores, siendo la primera 8 y la segunda 2.

• Otro parámetro que se puede definir es la anchura de la franja mediante el parámetro width .

• El parámetro será “width=x %”, siendo “x” el tanto por cien que se quiere que ocupe la franja.

• En el caso de no escribir nada (como en los ejemplos anteriores), la franja será predeterminada del 100%. Si se quiere que ocupe más o menos, se tendra que escribirlo usando el parámetro width.

COMENTARIOS EN HTML• Se llama comentario en el ámbito de HTML a las notas que el autor o

autores ponen en el código para facilitar su entendimiento. Estos comentarios no son mostrados por el navegador y, por tanto, sólo serán visibles al leer el código HTML de la página web por una persona.

• En general es recomendable ir insertando comentarios al crear una página para marcar determinadas partes y así encontrarlas más fácilmente. Algunos usos que suelen darse a los comentarios son:

• · Notas para recordar detalles del código la próxima vez que se vaya a cambiar, como por ejemplo para indicar por qué se ha usado una etiqueta y no otra. Este tipo de comentarios son muy usados cuando las páginas son complejas.

• · Apuntar que queda por hacer en una determinada sección o como es conveniente cambiarla. O bien para indicar el comienzo o fin de una determinada sección de la página.

• · Para identificar fácilmente partes importantes del código o aquellas que cambian más a menudo.

• · Usos particulares de cada webmaster. De hecho los comentarios pueden usarse para cualquier cosa y cada programador de páginas web tiene su propio modo de usarlos

CREACIÓN DE COMENTARIOS EN HTML• Para crear un comentario no se usa una etiqueta, aunque es una estructura

parecida. En primer lugar se pone una cadena que indica el comienzo del comentario:  , dos guiones y el símbolo mayor que. La estructura de un comentario es por tanto:

• • Suele ser recomendable dejar un espacio entre ambas cadenas y el texto

anterior y posterior, tal y como se acaba de mostrar.• Algunos ejemplos prácticos de comentarios serian:• • • • El navegador ignora los contenidos del interior de los comentarios. Al mostrar

la página los navegadores actúan como si los comentarios no existieran.• Para terminar sólo queda hacer una aclaración. Tal y como se ha dicho todo el

texto entre los símbolos "" es un comentario sea lo que sea y tenga el número de líneas que tenga. Sin embargo el estándar de HTML recomienda que los comentarios se limiten a una sola línea, y si debe ocupar varias necesariamente se aconseja incluir los símbolos de comentario en cada una de ellas.

Diversas características generales

Education

Transcript of Diversas características generales