25
HTML Paola Solís Colegio Bucerias Mtra. Azucena Cervantes Ponce

Exc2 paolasolis comp1_a

Embed Size (px)

Citation preview

HTMLPaola Solís

Colegio Bucerias Mtra. Azucena Cervantes Ponce

El código fuente de un programa informático (o software) es un conjunto de líneas de texto que son las instrucciones que debe seguir la computadora para ejecutar dicho programa. Por tanto, en el código fuente de un programa está escrito por completo su funcionamiento.

Código fuente

Wikipedia(2015) Código fuente Recuperado el 5/5/15 De:http://es.wikipedia.org/wiki/C

%C3%B3digo_fuente

<FONT SIZE=-1>Muestra</FONT> <FONT SIZE=6>Muestra</FONT> <FONT SIZE=2>Muestra</FONT> <FONT SIZE=6> Muestra <FONT SIZE=1>

Muestra </FONT> Muestra </FONT>

Etiquetas para manipular el tamaño de la letra.

UCA(2015) Tamaño de texto Recuperado el 5/5/15 De:

http://www2.uca.es/serv/sc/manual-html/font.htm

Los encabezados son para definir la estructura jerárquica de los párrafos en un documento.

Ej.

Texto muy grande Texto grande Texto algo más grande de lo normal Texto normal Texto pequeño Texto muy pequeño

Encabezados

Etiquetas para encabezados.

ETIQUETA EFECTO VISUALH1 PRUEBAH2 PRUEBAH3 PRUEBAH4 PRUEBA

H5 PRUEBA

H6 PRUEBA

H7 PRUEBA

La etiqueta FONT permite tener un gran control sobre el tamaño de un texto. Este tamaño se especifica con su atributo SIZE y afectará al texto que encierren la instrucción de inicio (<FONT SIZE="">) y de fin (</FONT>).

La primera de ellas es indicar un tamaño absoluto de 1 a 7. Correspondiendo 7 al tamaño mayor y 1 al menor. El tamaño por defecto del texto es el equivalente al número 3. Veamos un ejemplo:

ETIQUETA FONT

Esto es texto normal <FONT SIZE="6"> y

esto es grande </FONT>

IBIBLIO(2015)FONT/FONT SIZE Recuperado el 5/5/15 De:

http://ibiblio.org/pub/Linux/docs/LuCaS/Manuales-LuCAS/doc-curso-html/doc-curso-html/x1026.html

Con otro atributo de la etiqueta FONT: COLOR se puede cambiar el color del texto con la misma facilidad con la que hasta ahora se ha cambiado su tamaño. En un principio la única forma de indicar un color consistía en usar un código hexadecimal de la siguiente manera:

<FONT COLOR="#RRGGBB">

COMO MANIPULAR EL COLOR DE LA FUENTE?

Dónde hay que sustituír RR por dos números hexadecimales que indican la cantidad de rojo (desde 00 que es ausencia de color a FF que es máxima cantidad de color), GG por otros dos que indican la cantidad de verde y BB por dos que indican la cantidad de azul. Combinando estos tres colores en diferentes proporciones se pueden crear hasta 16 millones de colores. Este sistema suele parecer ligeramente complicado en un principio, pero con la práctica o con ayuda de herramientas gráficas de selección de colores se convierte en un método bastante sencillo e increíblemente potente.

Existe un segundo método de indicar el color que sin duda le resultará al lector más sencillo. Este método consiste en poner como valor de COLOR el nombre del color en inglés. Los colores aceptados son: Black (negro), white (blanco),green (verde), maroon (marron rojizo), olive (verde oliva), Navy (azul marino), purple (violeta), red (rojo),  yellow (amarillo), blue (azul), teal (verde azulado), lime (verde lima), aqua (azul claro), fuchsia (fusia), silver (gris claro). Aunque además de estos existen otros valores, no son soportados en todos los navegadores.

<H1> <FONT COLOR="FUCHSIA"> Colores en el Web </FONT> </H1> ya podemos decir que sabemos poner colores en las páginas Web, <FONT COLOR="green"> verde </FONT>, <FONT COLOR="blue"> azul </FONT> <FONT COLOR="red"> rojo </FONT>, etc. Ninguno se nos resiste.

EJEMPLO

IBIBLIO(2015)COLOR Recuperado el 5/5/15 De:http://ibiblio.org/pub/Linux/docs/

LuCaS/Manuales-LuCAS/doc-curso-html/doc-curso-html/x1026.html

La etiqueta <MARQUEE> </MARQUEE> crea una marquesina cuyo contenido se desplaza. Por defecto, ocupa todo el ancho de la pantalla, tiene una línea de altura y el texto se mueve lentamente de derecha a izquierda.

MARQUEE

Los atributos WIDHT y HEIGHT permiten controlar el ancho y el alto de la marquesina y pueden expresarse en pixeles o porcentualmente. El atributo ALIGN permite alinear el texto que rodea la marquesina, y puede tener los siguientes valores: top (arriba), middle (centrado) bottom (abajo). Los atributos HSPACE y VSPACE definen la separación horizontal y vertical del texto con los bordes de la marquesina:

<marquee width="50%" height="60" align="bottom">... texto ...</marquee>

VAGABUNDIA(2015)MARQUEE Recuperado el 5/5/15 De:http://vagabundia.blogspot.com/

2007/03/desplazamientos-de-textos-marquee.html

Para insertar imágenes en un sitio usaremos la etiqueta <img>.

Esta etiqueta debe ir acompañada del atributo src que es el que contiene el URL de la ubicación del archivo de la imagen.

El atributo alt se utiliza para dar una breve descripción de la imagen, la cual podremos observar en caso que el navegador del usuario, por alguna razón, no muestre la misma.

La etiqueta <img> no tiene cierre.

COMO INSERTAR IMAGEN.

<img src="/URL" alt="texto descriptivo">

EJEMPLO. CODIGO <img src="/../imagenes/foto1.jpg"

alt="Dos niñas de la mano"> IMAGEN

VIRTUALNAUTA(2015)IMAGEN Recuperado el 5/5/15 De:http://www.virtualnauta.com/html-

imagenes

PUEDES MANIPULAR EL ANCHO DE TU IMAGEN COLOCANDO ESTA ETIQUETA:

WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar.

ANCHO DE LA IMAGEN

PUEDES MANIPULAR EL ANCHO DE TU IMAGEN COLOCANDO ESTA ETIQUETA:

HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen.

Ej. <IMG SRC="/graficos/bebe1.jpg"

WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un bebé">

ALTO DE LA IMAGEN

Alt= Es la alternativa que se estableció cuando todavía existían visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima.

FUNCION ALT EN IMAGEN

WEBESTILO(2015)ANCHO/LARGO/ETIQUETA’’ALT’’

Recuperado el 5/5/15 De:http://www.webestilo.com/html/

cap6a.phtml