2. 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.
3. ATRIBUTOS DE LA ETIQUETA BODY: BGCOLOR, TEXT,
BACKGROUND.
• BGCOLOR
Pará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”>
• TEXT
Pará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”>
• BACKGROUND
Pará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 documento
Sintaxis tipo: <body background="ruta/archivo.gif">
4. • 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”
5. 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>
6. 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: <p style =“text-align: center; font-size: 12px; color:blue;”> Este
texto estara centrado, tendrá una fuente de 12 pixeles y color azul</p>
7. 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:
8.
9. • 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: <b>Este texto aparecerá escrito en negrita</b>.
• 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: <b><i>Este texto aparecerá escrito en negrita y en
cursiva</i></b>.
• 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.
10. 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
11. 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.
12. 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
13. 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: <!--, esto es, el símbolo menor que, seguido del símbolo fin de
exclamación y de dos guiones, todo ello sin espacios entre ellos. Todo el texto
que le siga será parte de comentario, que terminará cuando insertemos la
cadena de fin: --> , dos guiones y el símbolo mayor que. La estructura de un
comentario es por tanto:
• <!-- Esto es un comentario -->
• 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:
• <!-- Aquí comienza el cuerpo de la página -->
• <!-- Cambiar este párrafo para que se entienda mejor -->
• <!-- Debería añadir más enlaces en esta página -->
• 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 "<!-- " y " -->" 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.