HTML
Paola 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%B3d
igo_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 VISUAL
H1
PRUEBA
H2
PRUEBA
H3
PRUEBA
H4 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), maro
on (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/LuCa
S/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/despl
azamientos-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

Exc2 paolasolis comp1_a

  • 1.
  • 2.
     El códigofuente 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
  • 3.
     Wikipedia(2015) Códigofuente  Recuperado el 5/5/15  De:http://es.wikipedia.org/wiki/C%C3%B3d igo_fuente
  • 4.
     <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.
  • 5.
     UCA(2015) Tamañode texto  Recuperado el 5/5/15  De: http://www2.uca.es/serv/sc/manual- html/font.htm
  • 6.
     Los encabezadosson 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
  • 7.
    Etiquetas para encabezados. ETIQUETAEFECTO VISUAL H1 PRUEBA H2 PRUEBA H3 PRUEBA H4 PRUEBA H5 PRUEBA H6 PRUEBA H7 PRUEBA
  • 8.
     La etiquetaFONT 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
  • 9.
    Esto es textonormal <FONT SIZE="6"> y esto es grande </FONT>
  • 10.
     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
  • 11.
     Con otroatributo 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?
  • 12.
     Dónde hayque 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.
  • 13.
     Existe unsegundo 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), maro on (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.
  • 14.
     <H1> <FONTCOLOR="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
  • 15.
    IBIBLIO(2015)COLOR  Recuperado el5/5/15  De:http://ibiblio.org/pub/Linux/docs/LuCa S/Manuales-LuCAS/doc-curso-html/doc- curso-html/x1026.html
  • 16.
     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
  • 17.
     Los atributos WIDHTy 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>
  • 18.
    VAGABUNDIA(2015)MARQUEE  Recuperado el5/5/15  De:http://vagabundia.blogspot.com/2007/03/despl azamientos-de-textos-marquee.html
  • 19.
    Para insertar imágenesen 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.
  • 20.
     <img src="/URL"alt="texto descriptivo">  EJEMPLO.  CODIGO  <img src="/../imagenes/foto1.jpg" alt="Dos niñas de la mano">  IMAGEN
  • 21.
    VIRTUALNAUTA(2015)IMAGEN  Recuperado el5/5/15  De:http://www.virtualnauta.com/html-imagenes
  • 22.
     PUEDES MANIPULAREL 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
  • 23.
     PUEDES MANIPULAREL 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
  • 24.
     Alt= Esla 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
  • 25.
    WEBESTILO(2015)ANCHO/LARGO/ETIQUETA’’ALT’’  Recuperado el5/5/15  De:http://www.webestilo.com/html/cap6a.phtml