Estructura básica HTML y colores

IESTP “SAN PEDRO DEL VALLE DE
MALA”
UNIDAD DIÁCTICA
TALLER DE PROGRAMACIÓN DISTRIBUÍDA
ACTIVIDAD DE APRENDIZAJE Nº 2

ESTRUCTURA DE UNA PÁGINA
Un documento escrito en HTML contendría básicamente las siguientes etiquetas:

<HTML> Indica el inicio del documento.
<HEAD> Inicio de la cabecera.
<TITLE> Inicio del título del documento.
</TITLE> Final del título del documento.
</HEAD> Final de la cabecera del documento.
<BODY> Inicio del cuerpo del documento.
</BODY> Final del cuerpo del documento.
</HTML> Final del documento.

El documento se hallará situado en algún ordenador al que se pueda acceder a traves
de Internet. Para indicar la situación del documento en Internet se utiliza la URL
(Uniform Resource Locator). La URL es el camino que ha de seguir nuestro navegador a
traves de Internet para acceder a un determinado recurso, bien sea una página Web,
un fichero, un grupo de noticias, etc. Es decir, lo que el navegador de páginas Web
hace es acceder a un fichero situado en un ordenador que está conectado a la red
Internet. La estructura de una URL para una página Web suele ser del tipo
http://dominio/directorio/fichero. El dominio indica el nombre del ordenador al que
accedemos, el directorio es el nombre del directorio de ese ordenador y fichero el
nombre del fichero que contiene la página Web escrita en HTML. Por ejemplo:

http://www.básico.com/principal /index.hml

CUERPO DEL DOCUMENTO

La etiqueta <BODY></BODY> indica el inicio y final de nuestra página Web. Será entre
el inicio y el final de esta etiqueta donde pongamos los contenidos de nuestra página,
textos, gráficos, enlaces, etc.... Esta etiqueta tiene una serie de parámetros opcionales
que nos permiten indicar la "apariencia" global del documento:

background= "nombre de fichero gráfico"
Indica el nombre de un fichero gráfico que servirá como "fondo" de nuestra página. Si
la imagen no rellena todo el fondo del documento, esta será reproducida tantas veces
como sea necesario.

bgcolor = "código de color"
Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el
parámetro background.

ENTENDER LOS COLORES
El código de color es un número compuesto por tres pares de cifras hexadecimales que
indican la proporción de los colores "primarios", rojo, verde y azul. El código de color
se antecede del símbolo # (aunque no es indispensable) .

DOCENTE: VICTOR CHUMPITAZ AVALOS. Página[1]
MODULO: DESARROLLO DE SOFTWARE Y GESTIÓN DE BASE DE DATOS

MALA”
UNIDAD DIÁCTICA

Los Monitores de las computadoras presentan el color en el modo RGB, en donde R es
Rojo (Red), G es verde (Green) y B es Azul (blue) siendo 0 el valor del color más oscuro
y 255 el más claro en el espectro.
En RGB el blanco y el negro tienen los siguientes valores:

COLORES VALOR ROJO VALOR VERDE VALOR AZUL
BLANCO 255 255 255
NEGRO 0 0 0

HTML no puede leer valores Decimales en los colores que en este caso serían del 0 al
255, pero si valores Hexadecimales. Para representar valores Hexadecimales después
del 9 en valores del alfabeto occidental sería (de la A hasta el F) donde A=10, B =11,
C=12, D=13, E=14, F=15.

Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F

ROJO VERDE AZUL
FF 00 00

Ejemplos:

#000000 - Negro
#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul
#FFFFFF - Blanco

El primer par de cifras indican la proporción de color Rojo, el segundo par de cifras la
proporcion de color Verde y las dos últimas la proporcion de color Azul. Cada par de
cifras hexadecimales nos permiten un rango de 0 a 255. Combinando las proporciones
de cada color primario obtendremos diferentes colores.

Práctica: Abrir el Bloc de Notas y digitar lo Siguiente guardarlo como index.html.

<html>
<head><title>IESTP "San Pedro del Valle Mala"</title>
</head>
<body bgcolor="889940" >
</body>
</html>

Nota: si deseas agregar un fondo añade el siguiente código borrando el atributo
bgcolor de la etiqueta body; background = "image / image01.jpg"
Donde:


MALA”
UNIDAD DIÁCTICA

backgroun es el atributo.
Image es el directorio o carpeta
image01.jpg es el archivo que se encuentra dentro del directorio o carpeta
image.

JUEGO DE CARACTERES DEL DOCUMENTO
Antes de Ingresar al Texto debemos de Entender los caracteres con tildes y otros
códigos.

Todos los navegadores de páginas Web actuales soportan todos los caracteres gráficos
del la especificación ISO 8859-1, que permiten escribir textos en la mayoría de los
países occidentales.

De cualquier forma y como muchos sistemas tienen distintos juegos de caracteres
ASCII, se han definido dos formas de representar caracteres especiales usando
solamente el código ASCII de 7 bits. Para hacer referencia a estos caracteres se les
asigna un código numérico o un nombre de " entidad”. Asimismo hay caracteres que se
utilizan para las etiquetas de HTML, por ejemplo < y >. Estos caracteres pueden ser
representados por un código numérico o una entidad cuando deseemos que aparezcan
en el documento "tal cual". Las entidades comienzan por el símbolo & (ampersand) y
terminan con el símbolo; (punto y coma).

A continuación veamos una tabla con las principales entidades:

Caracter Código Entidad Caracter Código Entidad
! ! -- " " --
# # -- $ $ --
% % -- & & --
' ' -- ( ( --
) ) -- * * --
+ + -- , , --
- - -- . . --
/ / -- : : --
; ; -- < < --
= = -- > > --
? ? -- @ @ --
[ [ -- \ --
] ] -- ^ ^ --
_ _ -- ` ` --
{ { -- | | --
} } -- ~ ~ --
  nbsp ¡ ¡ iexcl
¢ ¢ cent £ £ pound
¤ ¤ curren ¥ ¥ yen
¦ ¦ brvbar § § sect
¨ ¨ uml © © copy


MALA”
UNIDAD DIÁCTICA
ª ª ordf « « laquo
¬ ¬ not  shy
® ® reg ¯ ¯ macr
° ° deg ± ± plusmn
² ² sup2 ³ ³ sup3
´ ´ acute µ µ micro
¶ ¶ para · · middot
¸ ¸ cedil ¹ ¹ sup1
º º ordm » » raquo
¼ ¼ frac14 ½ ½ frac12
¾ ¾ frac34 ¿ ¿ iquest
À À Agrave Á Á Aacute
Â Â Acirc Ã Ã Atilde
Ä Ä Auml Å Å Aring
Æ Æ AElig Ç Ç Ccedil
È È Egrave É É Eacute
Ê Ê Ecirc Ë Ë Euml
Ì Ì Igrave Í Í Iacute
Î Î Icirc Ï Ï Iuml
Ð Ð ETH Ñ Ñ Ntilde
Ò Ò Ograve Ó Ó Oacute
Ô Ô Ocirc Õ Õ Otilde
Ö Ö Ouml × × times
Ø Ø Oslash Ù Ù Ugrave
Ú Ú Uacute Û Û Ucirc
Ü Ü Uuml Ý Ý Yacute
Þ Þ THORN ß ß szlig
à à agrave á á aacute
â â acirc ã ã atilde
ä ä auml å å aring
æ æ aelig ç ç ccedil
è è egrave é é eacute
ê ê ecirc ë ë euml
ì ì igrave í í iacute
î î icirc ï ï iuml
ð ð eth ñ ñ ntilde
ò ò ograve ó ó oacute
ô ô ocirc õ õ otilde
ö ö ouml ÷ ÷ divide
ø ø oslash ù ù ugrave
ú ú uacute û û ucirc
ü ü uuml ý ý yacute
þ þ thorn ÿ ÿ yuml

p á gina
p á gina esto sería igual a = página
p á gina o también asi =página


MALA”
UNIDAD DIÁCTICA

ESPECIFICAR COLORES EN EL DOCUMENTO
Los colores del Documento, como los que se usan de fondo o para el texto, se pueden
cambiar usando los atributos de la etiqueta body. Los colores predeterminados verían
de acuerdo con el navegador y además el usuario los puede ajustar a sus necesidades
como se muestra al comienzo tanto en colores como forma y diseño.

Atributos Valores Descripción
bgcolor 000000 (valor hexadecimal Cambios en el color de
o nombre del color) fondo de la página.
text ffffff valor hexadecimal o Cambios en el color de la
nombre del color) fuente de la Página(color
del texto)

Ejercicio: 1
Abrir el bloc de notas y escribir el siguiente código HTML guardarlo con el nombre
ejercicio1.html.

<html>
<head><title>Mi Primera Página en HTML - con nuevo colores en el
documento"</title>
</head>
<body bgcolor="000000" text="ffffff">
Esta es una página sencilla en HTML.
</body>
</html>

Nota: Recuerde que una ETIQUETA en HTML es un comando que se usa para
decirle a la computadora como presentar el contenido en una página.
Usted puede reconocer con facilidad las etiquetas por que están entre
paréntesis angulares o signo menor y mayor (< >)
Y un ATRIBUTO es parte de una etiqueta y estos van dentro de una
etiqueta de apertura; no olvide que la mayoría de etiquetas tienen
atributos. Busca los colores hexadecimales en esta URL.
http://html-color-codes.info/codigos-de-colores-hexadecimales/

LA ETIQUETA FONT.
Para poder controlar en mayor medida apariencia del texto se creó la etiqueta FONT

<font face= “arial” size = “+1” color= “blue”>

Atributo face : Podemos dar un formato de texto del tipo arial u otro tipo.
Atributo size : Podemos aplicar un tamaño de texto.
Atributo Color: Podemos aplicar un color de Texto.


MALA”
UNIDAD DIÁCTICA

TEXTOS EN NEGRITA, ITÁLICA Y SUBRAYADO.

EFECTOS DESEADOS ETIQUETA
Texto en Negrita <b>
Texto en Itálica <i> (Cursiva)
Texto en Subrayado <u> (por underline)

Ejercicio: 2
Abrir el bloc de notas y escribir el siguiente código HTML guardarlo con el nombre
ejercicio2.html.

<html>
<head><title>Aplicando la Etiqueta FONT - y sus atributos"</title>
</head>
<body bgcolor="ffffff" >
<font face= “arial” size = “+1” color= “0000AA”>Esta es una página
sencilla en HTML.</font>
<b> Este texto está en Negrita</b>
<i> Este texto está en Itálica</i>
<u> Este texto está en Subrayado (underline)</u>
</body>
</html>

Ejercicio: 3
Colocar un Texto en Negrita y Cursiva a la vez.

Nota: una etiqueta que va dentro de otra etiqueta (después de la apertura y cierre de la
primera etiqueta) se llama ANIDADMIENTO.

ESPACIO ENTRE LÍNEAS DE TEXTO.

Cuando usted agrega saltos entre líneas en cuerpo de la página o si usa la tecla ENTER con el
teclado para agregar un salto de línea entre dos líneas de texto en su página, ese salto de línea
no aparecerá cuando el navegador presente la página en pantalla o en ejecución.
Para eso se utiliza la ETIQUETA <br /> y <p>.

La etiqueta <br /> inserta un salto de línea sencillo y le dice al navegador que presente la
siguiente línea antes de continuar. Si Inserta varias etiquetas <br />, el programa mostrará
varias líneas antes de seguir.
La etiqueta <p> significa salto de párrafo. L a Diferencia entre las dos es que el salto de Párrafo
hace que el navegador salte una línea antes y después del Párrafo.
Mientras que el salto de línea marca una línea dentro del texto en lugar en donde se ponen.
La etiqueta de párrafo se considera contenedora, por sus etiquetas de apertura y de cierre se
deben usar para incluir párrafos de contenido.


MALA”
UNIDAD DIÁCTICA

Ejercicio: 3
<html>
<head><title>Aplicando Saltos de Línea"</title>
</head>
<body bgcolor="ffffff">
Bienvenido<br />
Gracias por visistar mi primera página <br />
Web. Tengo otras páginas que le podrían interesar.<br />
Gracias por visistar mi primera página Web. <br />
Tengo otras páginas que le podrían interesar.
<p>Los atributos tienen sus valores indicados entre comillas ("), pero
si no los indicamos entre comillas también funcionará en la mayoría de los
casos. Sin embargo, es aconsejable que pongamos siempre las comillas
para acostumbrarnos a utilizarlas, por dar homogeneidad a nuestros códigos
y para evitar errores futuros en sistemas más quisquillosos. </p>
</body>
</html>

Realizar los siguiente; Colocar etiquetas salto de líneas dentro de un Párrafo.

Atributos de la Etiqueta <P>
<html>
<head><title>Aplicando Saltos de Línea"</title>
</head>
<body bgcolor="ffffff">
<p align="right">Los atributos tienen sus valores indicados entre comillas ("), pero
si no los indicamos entre comillas también funcionará en la mayoría de los casos.
Sin embargo, es aconsejable que pongamos siempre las comillas para acostumbrarnos
a utilizarlas, por dar homogeneidad a nuestros códigos y para evitar errores futuros
en sistemas más quisquillosos. </p>
<hr />
<p align="center">Los atributos tienen sus valores indicados entre comillas ("), pero
<hr />
<p align="left">Los atributos tienen sus valores indicados entre comillas ("), pero
<hr />
<p align="justify">Los atributos tienen sus valores indicados entre comillas ("), pero


MALA”
UNIDAD DIÁCTICA
</body>
</html>

Especificación :
<hr /> es para colocar Líneas horizontales.

El atributo align=” right” Permite alinear todo el párrafo a la Derecha.

El atributo align=” center” Permite alinear todo el párrafo a la Derecha.

El atributo align=”Left” Permite alinear todo el párrafo a la Derecha.

El atributo align="justify">Permite Justificar un Párrafo.

USO DE TÍTULOS
Una de las formas para más fáciles para formatear texto es la etiqueta h. Está disponible en
seis niveles de importancia desde < h1> hasta <h6>. Con estas etiquetas podemos colocar
Títulos al principio de cada Tema y Párrafos.

<h1>Mucha importancia</h1>

Mucha importancia
<h2>Menos importancia</h2>

Menos importancia
<h3>Mucha menos importancia</h3>

Mucha menos importancia


MALA”
UNIDAD DIÁCTICA

CUENTOS EN VERSO DE RUBÉN
DARÍO
SONATINA

Texto de color Naranja justificado

La princesa está triste... ¿qué tendrá la princesa? Los suspiros se escapan de
su boca de fresa, que ha perdido la risa, que ha perdido el color. La princesa
está pálida en su silla de oro, está mudo el teclado de su clave sonoro, y en un
vaso, olvidada, se desmaya una flor.

Texto de color Rojo a la derecha

El jardín puebla el triunfo de los pavos reales. Parlanchina, la dueña dice cosas
banales, y vestido de rojo piruetea el bufón. La princesa no ríe, la princesa no siente; la
princesa persigue por el cielo de Oriente la libélula vaga de una vaga ilusión.

Texto de color Azul centrado

¿Piensa, acaso, en el príncipe de Golconda o de China, o en el
que ha detenido su carroza argentina para ver de sus ojos la
dulzura de luz? ¿O en el rey de las islas de las rosas
fragantes, o en el que es soberano de los claros diamantes,o en
el dueño orgulloso de las perlas de Ormuz?

INDICACIONES:
Coloca una Imagen de Fondo en el cuerpo de la Página esa imagen debe de tener una
carpeta con el nombre image. Buscar en google Ficha Imágenes de 1024 x 768. Añadir
el atributo PROPERTIES=”FIXED” dentro de la Etiqueta Body.

NOTA: TRABAJAR CON TODOS LOS ATRIBUTOS POSIBLE EMPEADOS EN EL MANUAL.
MEJOR DISEÑO LA CALIFCACIÓN SERÁ DE 16.


Estructura básica HTML y colores

Recomendados

Recomendados

Más contenido relacionado

Similar a Estructura básica HTML y colores

Similar a Estructura básica HTML y colores (20)

Más de Victor Manuel Chumpitaz Avalos

Más de Victor Manuel Chumpitaz Avalos (6)

Último

Último (20)

Estructura básica HTML y colores