Documentos de Académico
Documentos de Profesional
Documentos de Cultura
1.1 | Comentarios 3
1.1 | Comentarios
link (cambia en HTML5): lo podemos utilizar para referenciar script (cambia en HTML5): tambin se puede aadir dentro
ficheros externos, por ejemplo, ficheros con hojas de estilo. del cuerpo. Permite aadir un script en la propia pgina, o
Es mejor practica usar referenciar ficheros externos de hojas referenciar un fichero que contiene scripts y es especfico para
de estilo, que definirlos en el propio documento HTML con la ello. Esta segunda forma, suele ser ms adecuada puesto que
etiqueta style para separar el contenido de la presentacin. el cdigo del script est totalmente separado del documento
Tambin podemos aadir el icono de favoritos. HTML.
<script type=text/javascript>
alert(hola mundo);
ILUSTRACIN: FAVICON </script>
id: este atributo debe tener un valor nico en toda la pgina, no class: aade un estilo CSS definido previamente en una hoja
deben existir dos etiquetas con el mismo valor en su atributo al elemento cuyo nombre se especifica en el valor del atributo.
id.
title: aade un texto explicativo especificado en el valor del
El valor de este atributo, identifica unvocamente la etiqueta atributo. Se muestra como un tool tip (globo informativo). La
en el que esta contenido dentro de la pagina. informacin se muestra al pasar el cursor sobre el elemento
generado por la etiqueta.
Asignar un identificador a un elemento, nos puede servir, por
ejemplo, para crear un enlace interno dentro de la propia pgina.
En posteriores mdulos veremos cmo se pueden acceder a
dichos elementos para manipularlos mediante javascript.
style: aade los estilos CSS especificados en el valor del
atributo.
Etiquetas principales del estndar HTML | TELEFNICA // 8
h[x] (titulo): define un titulo donde x es sustituido por un p (prrafo): define un prrafo. Entre cada prrafo, aade un
nmero del 1 al 6. h1 el titulo con mayor tamao de letra y pequeo espaciado si no usamos ningn estilo adicional. Si no
peso semntico y h6 el de menor tamao y peso semntico. Si aplicamos hojas de estilo, se ve de la siguiente forma:
no aplicamos hojas de estilo, se ve de la siguiente forma:
<p>
Lorem ipsum dolor sit amet, consectetur
<h1>ttulo 1</h1> adipiscing elit, sed do eiusmod tempor
<h2>ttulo 2</h1> incididunt ut labore et dolore magna
<h3>ttulo 3</h1> aliqua.
<h4>ttulo 4</h1> </p>
<h5>ttulo 5</h1> ttulo 1 <p>
<h6>ttulo 6</h1> Sed ut perspiciatis unde omnis iste
ttulo 2 natus error sit voluptatem.
ttulo 3 </p>
ttulo 4
ttulo 5
ttulo 6
ILUSTRACIN: TTULOS
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
ILUSTRACIN: PRRAFO
Etiquetas principales del estndar HTML | TELEFNICA // 9
Ntese que los saltos de lnea existentes en el texto del documento ul / li (lista no numerada / elemento lista): la etiqueta ol
HTML no se materializan como tal en el navegador. Tampoco el uso define una lista no numerada, mientras que li contiene cada
de mltiples espacios en blanco se ven reflejados como tal. elemento de la lista. Si no aplicamos hojas de estilo, se ve de
la siguiente forma:
Cualquier concatenacin de tabulaciones, saltos de lnea, y espacios
en blanco o combinaciones de estos, se representan como un nico
espacio en blanco independientemente del nmero de ocurrencias
existentes.
pre: texto pre-formateado. El texto incluido como contenido de
<ul>
esta etiqueta se representa tal y como se escribe, manteniendo
<li>Lorem ipsum dolor sit amet</li>
espacios en blanco, saltos de lnea, tabulaciones, etc.
<li>Sed do eiusmod tempor incididunt</li>
ol / li (lista numerada / elemento lista): la etiqueta ol define </ul>
una lista numerada, mientras que li contiene cada elemento
de la lista. Si no aplicamos hojas de estilo, se ve de la siguiente
forma:
<ol>
<li>Lorem ipsum dolor sit amet</li>
ILUSTRACIN: LISTA NO NUMERADA
<li>Sed do eiusmod tempor incididunt</li>
</ol>
table, caption, thead, tbody, tr, th, td (tabla / cabecera tabla /
cuerpo tabla / fila / celda cabecera / celda cuerpo): la etiqueta
table define una tabla en HTML. Dentro de esta etiqueta,
aadimos las etiquetas thead y tbody, que son la cabecera
1. Lorem ipsum dolor sit amet
(ttulos de la tabla) y el cuerpo de la tabla (datos contenidos en
la tabla) respectivamente.
2. Sed do eiusmod tempor incididunt
Tambin podemos omitir la cabecera de la tabla suprimiendo las Podemos aadir una leyenda a la tabla usando la etiqueta caption
etiquetas thead y tbody. Aadimos las filas directamente a la dentro de la tabla. El contenido de dicha etiqueta es el que se
tabla de la siguiente forma: incluir en la leyenda.
a (enlace): nos permite crear un enlace a un fichero o pagina
de nuestro sitio web, externo a nuestro sitio web o a elemento
interno de la propia pgina que tenga un atributo id declarado. El
contenido de la etiqueta ser convertido en un enlace. Atributos
<table> principales:
<tr> href: ruta del elemento referenciado. Si el elemento es un
<td>valor 1</th> fichero o pgina externa, su valor ser una ruta (absoluta o
<td>valor 2</th> relativa), aunque tambin puede ser una URL.
<td>valor 3</th>
</tr> Si el elemento es un fichero o pagina externa, su valor ser una
<tr> URL.
<td>valor 4</th> Si el elemento es interno de la propia pgina (referencia a una
<td>valor 5</th> etiqueta del propio documento), su valor tendr el siguiente
<td>valor 6</th> formato: #id donde id es el identificador de la etiqueta HTML
</table> que queremos enlazar.
valor 1 valor 2 valor 3
valor 4 valor 5 valor 6
target: especfica donde queremos abrir el enlace. Algunos img (imagen): inserta una imagen en el documento. Atributos:
valores interesantes para este atributo son:
src: URL o ruta donde se encuentra la imagen.
_self (valor por defecto si no se especifica el atributo
alt: texto alternativo. Debe ser un texto descriptivo de la
target): abre el enlace en la misma ventana.
imagen. Se utiliza en lectores para invidentes.
_blank: abre el enlace en una ventana o pestana nueva.
height: altura de la imagen en pixeles.
Si no aplicamos hojas de estilo, se ve de la siguiente forma:
width: anchura de la imagen en pixeles.
Si no aplicamos hojas de estilo, se ve de la siguiente forma:
div (divisor o capa): define una divisin o seccin en un span (divisor de elementos inline): agrupa los elementos que
documento HTML agrupando elementos en un bloque (salto contiene, pero no produce ninguno a nivel visual. Simplemente
de lnea antes y despus del contenido). Su misin es permitir crea un grupo de contenidos para poder aplicar estilos sobre
aplicar estilos sobre la seccin o bloque completo. Ejemplo: el conjunto completo. A diferencia de div, no crea un bloque, si
no que puede ser aplicado, por ejemplo, en una lnea de texto.
Ejemplo: