Post on 03-Sep-2020
HTML: Organizacion del Contenido
Francisco J. Martın MateosCarmen Graciani Dıaz
Dpto. Ciencias de la Computacion e Inteligencia Artificial
Universidad de Sevilla
Metodologıa de la Programacion HTML: Organizacion del Contenido
Encabezados
Usualmente el contenido de un texto se organiza en seccionesy subsecciones
La version HTML de este tipo de organizacion son losencabezados
Hay seis tipos de encabezados en HTML
<H1> Texto </H1> - Mayor importancia<H2> Texto </H2>
<H3> Texto </H3>
<H4> Texto </H4>
<H5> Texto </H5>
<H6> Texto </H6> - Menor importancia
Atributos de estas etiquetas
Alineacion: align="left"|"center"|"right"|"justify"
El navegador presenta cada encabezado modificando eltamano de la letra y utilizando negrilla
Metodologıa de la Programacion HTML: Organizacion del Contenido
Barras horizontales
Otra forma de separar regiones de un documento HTML esmediante barras horizontales: <HR>
Atributos de esta etiqueta
Alineacion de la barra: align="left"|"center"|"right"Ancho de la barra: size="pixels"Longitud de la barra: width="longitud"Sombra de la barra: noshade
El valor "longitud" se puede indicar de forma absoluta,indicando el numero total de pixels, o de forma relativa,indicando el porcentaje de ventana del navegador que se debeocupar
Metodologıa de la Programacion HTML: Organizacion del Contenido
Parrafos
Dentro de cada seccion de un texto, el contenido se sueleorganizar en parrafos
La division en parrafos de un fichero HTML no se correspondecon una division en parrafos en el documento visualizado en elnavegador
El comienzo de un parrafo se indica con la etiqueta <P>
El parrafo termina
al encontrar la etiqueta final </P> (no es obligatoria)al encontrar otra etiqueta inicial <P>
Atributos de esta etiqueta
Alineacion: align="left"|"center"|"right"|"justify"
El navegador utiliza una separacion adicional entre parrafos
Para cortes de lınea sin separacion adicional usamos <BR>
Metodologıa de la Programacion HTML: Organizacion del Contenido
Estilos de texto
Etiquetas de estilo fısico: Especifican un cambio concreto enel tipo de letra
Texto en negrita: <B> ... </B>
Texto en cursiva: <I> ... </I>
Texto subrayado: <U> ... </U>
Texto monoespaciado: <TT> ... </TT>
Texto tachado: <STRIKE> ... </STRIKE>
Aumentar el tamano del texto: <BIG> ... </BIG>
Disminuir el tamano del texto: <SMALL> ... </SMALL>
Texto en subındice: <SUB> ... </SUB>
Texto en superındice: <SUP> ... </SUP>
Metodologıa de la Programacion HTML: Organizacion del Contenido
Estilos de texto
Etiquetas de estilo logico: Caracterizan un trozo de textodestacandolo en el contexto
Texto destacado: <EM> ... </EM>
Texto importante: <STRONG> ... </STRONG>
Citas y referencias: <CITE> ... </CITE>
Informacion sobre el autor: <ADDRESS> ... </ADDRESS>
Definicion de un termino: <DFN> ... </DFN>
Fragmento de codigo de programa: <CODE> ... </CODE>
Ejemplos de programa: <SAMP> ... </SAMP>
Variables, argumentos de un programa: <VAR> ... </VAR>
Metodologıa de la Programacion HTML: Organizacion del Contenido
Estilos de texto
Texto preformateado: <PRE> ... </PRE>
Estilo de texto monoespaciadoEl texto se presenta en el navegador tal cual esta escritoEl navegador no inserta espacios en blanco adicionales nicortes de lıneaLas lıneas no se ajustan al tamano de la ventana del navegador
Metodologıa de la Programacion HTML: Organizacion del Contenido
Estilos de texto
Modificador de estilo de fuente: <FONT> ... </FONT>
Atributos de esta etiqueta
Color del texto: color="color"Tamano de la fuente: size="[+-]numero-1-7"
Tamanos absolutos: 1, 2, 3, 4, 5, 6 y 7
Tamanos relativos con respecto al tamano inicial de fuente:+1, -1, +2, -2, +3, -3, +4, -4, +5, -5, +6, -6, +7 y -7
Fuente a utilizar: face="nombre"
"Times New Roman", "Century Schoolbook L", "Impact","Utopia", "Adobe Helvetica"
Se pueden indicar varios "nombre"s de fuente separados porcomasConsultar fuentes admitidas por el navegador
Tamano inicial de fuente: <BASEFONT>
Atributos de esta etiqueta
Tamano de la fuente: size="numero-1-7"
Metodologıa de la Programacion HTML: Organizacion del Contenido
Listas
Listas no enumeradas: <UL> ... </UL>
Atributos de esta etiqueta
Tipo de enumeracion: type="disc"|"circle"|"square"
Elementos de una lista no enumerada: <LI>El elemento termina
al encontrar la etiqueta final </LI> (no es obligatoria)al encontrar otra etiqueta inicial <LI>al encontrar la etiqueta final de lista
En listas no enumeradas anidadas el tipo de enumeracioncambia de un nivel al siguiente (hasta 3)
Metodologıa de la Programacion HTML: Organizacion del Contenido
Listas
Listas enumeradas: <OL> ... </OL>
Atributos de esta etiqueta
Tipo de enumeracion: type="1"|"A"|"a"|"I"|"i"Valor inicial: start="numero"
Elementos de una lista enumerada: <LI>
Atributos de esta etiqueta
Valor de enumeracion: value="numero"
Metodologıa de la Programacion HTML: Organizacion del Contenido
Listas
Listas de descripciones: <DL> ... </DL>
Cada elemento de la lista esta formado por dos partes
El termino que queremos describir: <DT>La descripcion de dicho termino: <DD>Ambos elementos terminan
al encontrar la etiqueta final correspondiente (</DT> o </DD>)(no es obligatoria)al encontrar otra etiqueta inicial (<DT> o <DD>)al encontrar la etiqueta final de lista
Metodologıa de la Programacion HTML: Organizacion del Contenido
Enlaces y “anclas”
Enlaces a otras paginas <A href="URI"> Texto </A>
La direccion de la pagina enlazada se resuelve teniendo encuenta el valor de la direccion base (etiqueta BASE)El Texto es el elemento activo a traves del cual el navegadorpuede acceder a la pagina enlazadaEl color del elemento activo Texto varıa en funcion de si lapagina ya ha sido visitada por el navegador o noSi se accede a la pagina enlazada, el navegador se situa alcomienzo de la misma
Metodologıa de la Programacion HTML: Organizacion del Contenido
Enlaces y “anclas”
Las “anclas” son marcas especıficas incluidas en el interior deun documento para indicar el comienzo de una seccion obloque de contenido: <A name="nombre"> Texto </A>
El "nombre" tiene que ser unico para cada marcaLa etiqueta no tiene ningun efecto visible sobre el Texto
Enlaces a puntos internos de otro documento:<A href="URI#nombre"> Texto </A>
Donde nombre es un “ancla” en el documento de direccion URI
Si se accede a la pagina enlazada, el navegador se situa en elpunto indicado por la marca "nombre"
Metodologıa de la Programacion HTML: Organizacion del Contenido
Imagenes
Inclusion de una imagen: <IMG src="URI">
La direccion de la imagen enlazada se resuelve teniendo encuenta el valor de la direccion base (etiqueta BASE)Los formatos de imagen usuales son GIF, JPG o PNG
Atributos de esta etiqueta
Alternativa para navegadores no graficos o error en lalocalizacion de la imagen: alt="texto"Borde: border="pixels"Modificacion de la anchura: width="longitud"Modificacion de la altura: height="longitud"Margenes laterales: hspace="pixels"Margenes superior e inferior: vspace="pixels"
Metodologıa de la Programacion HTML: Organizacion del Contenido
Imagenes
Por defecto una imagen se visualiza en lınea con el textocircundante
La alineacion se indica con el atributo align="valor":
En la lınea inferior de la imagen: "bottom"En la lınea central de la imagen: "middle"En la lınea superior de la imagen: "top"
Esto tiene un efecto negativo con imagenes grandes
Metodologıa de la Programacion HTML: Organizacion del Contenido
Imagenes
Si queremos incluir texto alrededor de la imagen tambienusamos el atributo align="valor":
Imagen a la izquierda con texto a su derecha: "left"Imagen a la derecha con texto a su izquierda: "right"
El atributo "clear" de la etiqueta <BR> permite saltar a lasiguiente lınea despues de la imagen
Salto de lınea dentro del texto alrededor de la imagen: <BR>Salto de lınea hasta la primera lınea con el margen libre a laizquierda: clear="left"Salto de lınea hasta la primera lınea con el margen libre a laderecha: clear="right"Salto de lınea hasta la primera lınea con ambos margeneslibres: clear="all"
Metodologıa de la Programacion HTML: Organizacion del Contenido
Imagenes
Es muy frecuente utilizar imagenes activas que enlazan a otrosdocumentos
Esto se consigue combinando las etiquetas <A ...> e<IMG ...> de la siguiente forma:<A href="URI"><IMG src="URI-imagen"></A>
En este caso se incluye un borde azul de 1 pixel de ancho,para quitar este borde hay que incluir el atributo border="0"
en la etiqueta IMG
Metodologıa de la Programacion HTML: Organizacion del Contenido