Guia N°01

INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO
PÚBLICO
“HÉROES DE SIERRA LUMI”
CREACION R. M. Nº 236-1999-ED - REVALIDACIÓN R. D. Nº 081-2006 – ED
“primera casa de estudios superiores de la cuenca del alto y bajo tulumayo”
Guía de Practica N° 01
I. Creación de la primera pagina
1. Crear un directorio de trabajo para la página (ejm. mipagina) en “mis

documentos”
2. Con el sublime text escribir el siguiente código:
<html>
<head>
<title>pagina de inicio</title>
</head>
<body bgcolor="99CC99" >
</body>
</html>
3. Guardar el archivo “guardar como” con el nombre inicio.html en la

carpeta “mipagina”
La página resultante es como sigue:
Calle Infantil S/N Primer Barrio – Comas – Concepción- Junín 1

EMAIL: iestphersil4@gmail.com WEB: www.iestphersil.edu.pe
PÚBLICO
II. TEXTO
 Se requiere dar formato al texto
<y> indican inicio y fin de etiqueta
Carácter Representación
< <
> >
á á
Algunos caracteres Á Á
especiales é é
É É
í í
Í Í
ó ó
Ó Ó
ú ú
Ú Ú
Se puede escribir directamente
ñ ñ
sin la representación en HTML
Ñ Ñ
™
&nbsp espacio en blanco
 comentarios
<br> Saltos de línea,no requiere fin de etiqueta
<pre> y </pre> texto preformateado. Aparece tal como se lo escribe, no

requiere saltos de linea ni espacios en blanco en HTML
No permite incluir en el texto etiquetas: <img> (para
incluir imágenes), <object> (para incluir objetos como
animaciones), <big>, <small>, <sub> ni <sup>
<hr>
Regla horizontal separar secciones dentro de una misma página no precisa
ninguna etiqueta de cierre

PÚBLICO
Algunos atributos de la regla horizontal:
Atributo Significado Posibles valores

align alineación de la left (izquierda)
regla dentro de la right (derecha)
página center (centro)
width ancho de la regla un número,
acompañado de %
cuando se desee
que sea en porcentaje
size alto de la regla un número
noshade eliminar el no puede tomar valores
sombreado de la
regla
Inicio<hr align="left" width=“50%" size=“10" noshade>Bienvenidos a mi

página.
III. Una ilustración simple
<html>
<head>
<title>pagina de inicio</title>
</head>
<body bgcolor="99CC99" background="imagenes/fondopatas.gif"
leftmargin="40" topmargin="40" marginwidth="40" marginheight="40">
hola mundo este es un texto común

como están, canción&oacute<br>
cuando se esta pensando
<pre>Hola, BIENVENIDOS
esta ES MI PÁGINA WEB
y esto un texto preformateado</pre>
Inicio de un separador horizontal<hr align="left" width="50%" size="10"
noshade>Bienvenidos a mi página.
</body>
</html>

PÚBLICO
<font> y </font> propiedades del texto

face fuente nombre de la fuente, o fuentes
color color del texto número hexadecimal o texto predefinido
valores del 1 al 7, siendo por defecto el 3,
o desplazamiento respecto al tamaño por
size tamaño del texto
defecto,
añadiendo + o - delante del valor
<font color="#993366" size="4" face="Arial">

Bienvenidos a mi página, texto con propiedades
</font>
fuente para todo el documento
<body>
<basefont color="#006699" size="4" face="Arial">

PÚBLICO
Etiquetas asociadas al tipo de letra:
Etiqueta Significado Ejemplo

<b> negrita curso HTML aulaclic
<i> cursiva curso HTML aulaclic
<u> subrayado curso HTML aulaclic
<s> tachado curso HTML aulaclic
<tt> teletipo (máquina curso HTML aulaclic
de escribir)
<big> aumenta el tamaño curso HTML aulaclic
de la fuente
<small> disminuye el curso HTML aulaclic
tamaño de la
fuente
<p> y </p> Parráfos atributo align: cuyos valores pueden ser left
(izquierda), right (derecha), center (centrado) ojustify
(justificado).
<p align="center">este es un parrafo

muy simple (centrado)</p>
<p>Aqu&iacute encontra otro párrafo (la
separacion es amplia).</p>
<div> y </div> agrupar bloques de texto, pero con la diferencia de

que la separación entre ellos es menor. Tiene los
mismos atributos de alineación.
<div align="center">otro parrafo con

agrupacion de bloques </div>
<div>note que el espacio es menor</div>
<center> y </center> Texto centrado
<center>texto centrado</center>

PÚBLICO
IV. Encabezados – Títulos
Etiqueta Ejemplo
<H1> Título 1: HTML
<H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4>
V. Marquesinas
<marquee> y </marquee>.
<marquee bgcolor="#006699" behavior="alternate" direction="right">

<b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b>
</marquee>
Behavior alternate scroll slide
direction down up left right
VI. Listas
<li>Perro</li>  Perro
<li>Gato</li>  Gato
<li>Periquito</li>  Periquito
<ul> y </ul>. Lista desordenada

Viñeta
<ul type="circle">
<li>Perro</li> circle (círculo), disc (disco) o square
<li>Gato</li> (cuadrado).
<li>Periquito</li>
</ul>

PÚBLICO
<ol> y </ol>. Lista ordenada

type
1 (números), a (letras minúsculas), A
(letra mayúsculas), i (numeros romanos en
minúsculas) o I (números romanos en
mayúsculas).
Listas anidadas: combinación de las anteriores.
VII. ENLACES
hiperenlace, hipervínculo, o vínculo
<a> y </a>.
href especifica la página a la que está asociado el enlace
Referencia absoluta: Conduce a una ubicación externa al sitio
<a href="http://www.aulaclic.com">Visita www.aulaclic.com</a>
Referencia relativa al sitio: Conduce a un documento situado dentro del

mismo sitio
<a href="inicio1.html">cambiar a otro documento "ref. relativa"</a>

<a href="../mipagina/imagenes/inicio1.html">otra carpeta </a>
<a href="//D:/diplomado/tutoriales/html/index.htm">navegar por el tutorial</a>
Destino del enlace: determina en qué ventana va a ser abierta la página

vinculada
atributo targetx _blank Abre el documento vinculado en una

ventana nueva del navegador.
_self Abre el documento vinculado en el
mismo marco o ventana que el vínculo
Anclas o puntos de fijación: permite ir directamente al apartado deseado en

un documento extenso
<a name="miancla"></a>Texto con ancla define el ancla

<a href="#miancla">Enlace al ancla</a> lleva al ancla
Correo electrónico
<a href="mailto:jucelele@hotmail.com">mi e-mail </a>
<a href="mailto:jucelele@hotmail.com?subject=el asunto del mensaje">

mi e-mail </a>

PÚBLICO
Vínculo a ficheros para descarga
<a href="sib1.doc" target=_blank >

haz clic aquí para descargar el archivo
</a>
VIII. IMÁGENES
<img>
src : especifica el nombre de la imagen
Las imágenes pueden ser de formatos diferentes: bmp, gif, jpg, etc
<img src="imagenes/gatito.gif" alt="imagen ejemplo">
<img src="imagenes/foto.gif" alt="mi fiesta">
El atributo border puede tomar valores numéricos
<img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4">
imagen con borde y con un enlace:
<a href="inicio1.html" target="_blank" >

<img src="imagenes/gatito.gif" border="4" >
</a>
Tamaño de la imagen
width (anchura) y height (altura)
<img src="imagenes/foto.gif" alt="mi fiesta" width="500" height="400">
Alineacion de la imagen: align, Este atributo indica la alineación de las

imágenes con respecto a la línea de texto en la que se encuentran.
Los valores del atributo align pueden ser los siguientes:

PÚBLICO
bottom Inferior
left izquierda
middle medio
right derecha
texttop texto superior
top superior
Este
<img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4" align="middle">
es un grafico
IX. TABLAS
<table> y </table> INICO Y FIN DE TABLA

<tr> y </tr> Inicio y fin de fila
<td> y </td> columna o celda
<table> inicio de tabla

<tr> inicio de fila 1
<td>…</td> celda 1 de la fila 1
</tr> fin de la fila 1
<tr> inicio de fila 2
</tr> fin de la fila 2
……..
</table> fin de la tabla
Atributos de una tabla:

un número, acompañado de %
width ancho de la tabla cuando se
desee que sea en porcentaje
height altura de la tabla cuando se
espacio entre el
contenido
cellpadding un número
de las celdas y el
borde
cellspacing espacio entre celdas un número
border grosor del borde un número
left (izquierda)
alineación de la tabla
align right (derecha)
dentro de la página
center (centro)

PÚBLICO
bgcolor color de fondo número hexadecimal

background imagen de fondo número hexadecimal
bordercolor color del borde número hexadecimal
<table width="50%" border="2" align="center" cellspacing="0"

bordercolor="green" bgcolor="blue">
<table border="2">
<tr>
<td>nombre</td>
<td>descripocion</td>
<td>FOTOGRAFIA</td>
</tr>
<tr>
<td>FIESTA 4 DE JULIO</td>
<td>POR EL CENTENARIO DE LA FACULTAD</td>
<td>aquí va texto, imágenes, video</td>
</tr>
<tr>
<td>GATITO</td>
<td>GRAFICO EXTARIDO DEL TUTORIAL</td>
<td><img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4"></td>
</tr>
<tr>
<td>OTROCalle
CUALQUIERA</td>
Infantil S/N Primer Barrio – Comas – Concepción- Junín 10
<td>PUEDE IR CUALQUIER COSA</td> WEB: www.iestphersil.edu.pe
EMAIL: iestphersil4@gmail.com
<td>O SIMPLEMENTE TEXTO</td>
PÚBLICO

width ancho de la tabla cuando se
height altura de la tabla cuando se
alineación horizontal left (izquierda)
align del right (derecha)
contenido de la celda center (centro)
baseline (línea de base)
alineación vertical del bottom (inferior)
valign
contenido de la celda middle (medio)
top (superior)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal
bordercolor color del borde número hexadecimal
Atributos de una celda:
<tr align="center" bgcolor="yellow"> Para toda la fila la alineación es

Centrado y el fondo amarillo
<td bgcolor="purple">GATITO</td> Solo para la celda el fondo es

Púrpura
Titulo de columna

PÚBLICO
<th> y </th> idéntico a td pero centrado y negrilla
Combinación de celdas
colspan y rowspan
 colspan especifica el número de columnas por las que se

extenderá la celda
 rowspan especifica el número de filas por las que se extenderá la
celda
<table width="575" border="2" cellspacing="2">

<tr align="center" valign="middle">
<th colspan="4">combinacion de 4 columnas</th>
</tr>
<th rowspan="2">NOMBRE</th>
<th colspan="2">DATOS</th>
<th rowspan="2">FECHA</th>
</tr>
<th>NOTA 1</th>
<th>NOTA 2</th>
</tr>
<td>JUAN CARLOS</td>
<td>1.75</td>
<td>2.97</td>
<td>16/AGOSTO/2017</td>
</tr>
<td>LUISA</td>
<td >3.65</td>
<td >2.65</td>
<td>30/AGOSTO/2017</td>
</tr>
</table>

PÚBLICO
X. MARCOS (FRAME)
<frameset> y </frameset> Define el conjunto de marcos no

requiere las etiquetas <body> y
</body>

cols tamaño de cada una un número (acompañado de %
de cuando se
las columnas en que desee que sea en porcentaje)
se por cada
divide el documento columna, separados por comas.
rows tamaño de cada una un número (acompañado de %
de cuando se
las columnas en que desee que sea en porcentaje)
se por cada fila,
divide el documento separados por comas.
framebo aparece o no el borde yes
rder de los marcos no
framesp separación entre los un número
acing marcos
border grosor del borde un número, acompañado de %
cuando se
borderc color del borde número hexadecimal
olor
<frame> indica el documento a cargar en el marco

atributos de un marco:

PÚBLICO

yes o 1
frameborder aparece o no el borde del marco
no o 0
name nombre del marco cualquier valor
si aparece, el usuario no podrá
noresize redimensionar el tamaño de este no puede tomar valores
marco
anchura del margen con respecto a un número, acompañado de %
marginwidth los cuando se
bordes del marco desee que sea en porcentaje
altura del margen con respecto a los
marginheight cuando se
bordes del marco
se mostrará o no la barra de
yes
desplazamiento cuando la página
scrolling no
delmarco no se pueda visualizar
auto
completamente en él
documento que se cargará en el
src ruta y nombre del documento
marco
<frameset rows="90,*" framespacing="3" frameborder="yes" border="3" bordercolor="blue">

<frame src="titulo.html" name="marcosuperior" frameborder="yes" scrolling="yes" noresize>
<frameset cols="150,*" framespacing="3" frameborder="yes" border="3" bordercolor="red">
<frame src="menu.html" name="marcoizquierdo" scrolling="yes" noresize>
<frame src="inicio.html" name="marcoderecho">
</frameset>
</frameset>

PÚBLICO
Destino de los enlaces de un marco: Los nombres de los marcos pueden

constituirse en el destino
De un documento: En la página del marco izquierdo (menu.html) crear el

siguiente enlace:
<a href="inicio1.html" target="marcoderecho">matematicas</a>
XI. FORMULARIOS
Permite recoger datos introducidos por el usuario. Un formulario está formado,

entre otras cosas, por etiquetas, campos de texto, menús desplegables, y
botones
<form> y </form> indican el inicio y fin de un formulario
El atributo action indica una dirección de correo electrónico o la dirección del

programa que se encargará de procesar el contenido del
formulario.
El atributo method indica el metodo mediante el que se transfieren las

variables del formulario. Su valor puede ser get o post
Elementos de un Formulario
<textarea> y </textarea> área de texto
<textarea name=“area1" cols="30" rows="3">

Aquí se escribe el texto</textarea>
<input> elemento de entrada

atributo name indica el nombre del elemento de entrada
atributo type indica el tipo de elemento de entrada.
El atributo size indica el número de caracteres
El atributo maxlenght indica el número de caracteres
El atributo value indica el valor inicial del campo de texto
Elementos para type:

PÚBLICO
XII. Colores Web

PÚBLICO
Nombre de color con distinta codificación
W3C / CSS /
Colores X11
HTML / VGA
Nombre
RGB Muestra Muestra RGB
Gray #BEBEBE #808080
Green #00FF00 #008000
Maroon #B03060 #7F0000
Purple #A020F0 #7F007F
Colores con doble denominación
Color
W3C / CSS /
X11
HTML / VGA
RGB Muestra
Silver #C0C0C0 Gray
Lime #00FF00 Green
Magenta #FF00FF Fuchsia

PÚBLICO
Cyan #00FFFF Aqua
Cyan #00FFFF Aqua
Tabla de colores[editar]
Véase también: Anexo:Colores
La siguiente tabla de colores ha sido adoptada para su uso

por W3C/CSS,1 HTML/X11,2 Mozilla,3 SVG,4 Internet
Explorer (IE)/Microsoft Windows,5 etc.
Código hex Valores Valores Valores
Nombre HTML
R G B R G B H S L H S V
Colores rojos
240 128 0° 79% 0° 47%
LightCoral F08080
128 72% 94%
250 128 6° 93% 6° 55%
Salmon FA8072
114 71% 98%
205 92 0° 53% 0° 55%
IndianRed CD5C5C
92 58% 80%
0° 100% 0° 100%
Red FF0000 255 0 0
50% 100%
348° 348°
220 20
Crimson DC143C 83% 91%
60
47% 86%
178 34 0° 68% 0° 81%
FireBrick B22222
34 42% 71%
165 42 0° 75% 0° 58%
Brown A52A2A
42 65% 91%
0° 100% 0° 100%
DarkRed 8B0000 139 0 0
27% 54%
0° 100% 0° 100%
Maroon 800000 128 0 0
25% 50%
Colores rosas
255 228 6° 100% 6° 12%
MistyRose FFE4E1
225 94% 100%
350° 350°
255 192
Pink FFC0CB 100% 24%
203
88% 100%
351° 351°
255 182
LightPink FFB6C1 100% 28%
193
86% 100%
330° 330°
255 105
HotPink FF69B4 100% 58%
180
71% 100%
188 143 0° 25% 0° 24%
RosyBrown BC8F8F
143 65% 74%

PÚBLICO
340° 340°
219 112
PaleVioletRed DB7093 60% 49%
147
65% 86%
328° 328°
255 20
DeepPink FF1493 100% 92%
147
54% 100%
322° 322°
199 21
MediumVioletRed C71585 81% 90%
133
43% 78%
Colores naranjas
37°
255 239 37° 16%
PapayaWhip FFEFD5 100%
213 100%
92%
36°
255 235 36° 20%
BlanchedAlmond FFEBCD 100%
205 100%
90%
33°
255 228 33° 24%
Bisque FFE4C4 100%
196 100%
88%
38°
255 228 38° 30%
Moccasin FFE4B5 100%
181 100%
85%
28°
255 218 28° 28%
PeachPuff FFDAB9 100%
185 100%
86%
36°
255 222 36° 32%
NavajoWhite FFDEAD 100%
173 100%
84%
17°
255 160 17° 52%
LightSalmon FFA07A 100%
122 100%
74%
233 150 15° 72% 15° 47%
DarkSalmon E9967A
122 70% 92%
39° 39°
255 165
Orange FFA500 100% 100%
0
50% 100%
33° 33°
255 140
DarkOrange FF8C00 100% 100%
0
50% 100%
16°
255 127 16° 68%
Coral FF7F50 100%
80 100%
66%
255 99 9° 100% 9° 72%
Tomato FF6347
71 64% 100%
16° 16°
OrangeRed FF4500 255 69 0 100% 100%
50% 100%
Colores marrones
245 222 39° 77% 39° 27%
Wheat F5DEB3
179 83% 96%
222 184 34° 57% 34° 39%
BurlyWood DEB887
135 70% 87%

PÚBLICO
210 180 34° 44% 34° 33%

Tan D2B48C
140 69% 83%
244 164 28° 87% 28° 60%
SandyBrown F4A460
96 67% 96%
218 165 43° 74% 43° 85%
Goldenrod DAA520
32 49% 85%
205 133 30° 59% 30° 69%
Peru CD853F
63 53% 81%
184 134 43° 89% 43° 94%
DarkGoldenrod B8860B
11 38% 72%
210 105 25° 75% 25° 86%
Chocolate D2691E
30 47% 82%
160 82 19° 56% 19° 72%
Sienna A0522D
45 40% 62%
139 69 25° 76% 25° 86%
SaddleBrown 8B4513
19 31% 55%
Colores amarillos
60°
255 255 60° 12%
LightYellow FFFFE0 100%
224 100%
94%
48°
255 248 48° 14%
Cornsilk FFF8DC 100%
220 100%
93%
54°
255 250 54° 20%
LemonChiffon FFFACD 100%
205 100%
90%
250 250 60° 80% 60° 16%
LightGoldenrodYellow FAFAD2
210 90% 98%
238 232 55° 67% 55° 29%
PaleGoldenrod EEE8AA
170 80% 93%
240 230 54° 77% 54° 41%
Khaki F0E68C
140 75% 94%
60° 60°
255 255
Yellow FFFF00 100% 100%
0
50% 100%
51° 51°
255 215
Gold FFD700 100% 100%
0
50% 100%
189 183 56° 38% 56° 43%
DarkKhaki BDB76B
107 58% 74%
Colores verdes
amarillentos
84°
173 255 84° 82%
GreenYellow ADFF2F 100%
47 100%
59%
90° 90°
127 255
Chartreuse 7FFF00 100% 100%
0
50% 100%
90° 90°
124 252
LawnGreen 7CFC00 100% 100%
0
49% 98%

PÚBLICO
154 205 80° 61% 80° 76%

YellowGreen 9ACD32
50 50% 81%
107 142 80° 60% 80° 75%
OliveDrab 6B8E23
35 35% 56%
60° 60°
128 128
Olive 808000 100% 100%
0
25% 50%
85 107 82° 39% 82° 56%
DarkOliveGreen 556B2F
47 30% 42%
Colores verdes
120° 120°
152 251
PaleGreen 98FB98 93% 40%
152
79% 99%
120° 120°
144 238
LightGreen 90EE90 73% 39%
144
75% 93%
157° 157°
0 250
MediumSpringGreen 00FA9A 100% 100%
154
49% 98%
150° 150°
0 255
SpringGreen 00FF7F 100% 100%
127
50% 100%
120° 120°
Lime 00FF00 0 255 0 100% 100%
50% 100%
120° 120°
143 188
DarkSeaGreen 8FBC8F 25% 24%
143
65% 74%
120° 120°
50 205
LimeGreen 32CD32 61% 76%
50
50% 81%
147° 147°
60 179
MediumSeaGreen 3CB371 50% 67%
113
47% 71%
146° 146°
46 139
SeaGreen 2E8B57 50% 67%
87
36% 54%
120° 120°
34 139
ForestGreen 228B22 61% 76%
34
34% 55%
120° 120°
Green 008000 0 128 0 100% 100%
25% 50%
120° 120°
DarkGreen 006400 0 100 0 100% 100%
20% 40%
Colores azul-verdes
180° 180°
224 255
LightCyan E0FFFF 100% 12%
255
94% 100%

PÚBLICO
180° 180°
175 238
PaleTurquoise AFEEEE 65% 26%
238
81% 93%
160° 160°
127 255
Aquamarine 7FFFD4 100% 50%
212
75% 100%
180° 180°
0 255
Aqua / Cyan 00FFFF 100% 100%
255
50% 100%
174° 174°
64 224
Turquoise 40E0D0 72% 72%
208
56% 88%
178° 178°
72 209
MediumTurquoise 48D1CC 60% 66%
204
55% 82%
181° 181°
0 206
DarkTurquoise 00CED1 100% 36%
209
82% 100%
160° 160°
102 205
MediumAquamarine 66CDAA 51% 51%
170
60% 80%
177° 177°
32 178
LightSeaGreen 20B2AA 70% 82%
170
41% 70%
182° 182°
95 158
CadetBlue 5F9EA0 41% 39%
160
63% 78%
180° 180°
0 139
DarkCyan 008B8B 100% 100%
139
27% 54%
180° 180°
0 128
Teal 008080 100% 100%
128
25% 50%
Colores azules
240°
230 230 240° 8%
Lavender E6E6FA 67%
250 98%
94%
209° 209°
206 231
BlueWeb CEE7FF 100% 20%
255
90% 100%
187° 187°
176 224
PowderBlue B0E0E6 52% 23%
230
80% 90%
195° 195°
173 216
LightBlue ADD8E6 53% 25%
230
79% 90%
203° 203°
135 206
LightSkyBlue 87CEFA 92% 47%
250
75% 98%
197° 197°
135 206
SkyBlue 87CEEB 71% 42%
235
73% 92%

PÚBLICO
214° 214°
176 196
LightSteelBlue B0C4DE 41% 21%
222
78% 87%
195° 195°
0 191
DeepSkyBlue 00BFFF 100% 100%
255
50% 100%
219° 219°
100 149
CornflowerBlue 6495ED 79% 58%
237
66% 93%
210°
30 144 210° 0%
DodgerBlue 1E90FF 88%
255 100%
100%
207° 207°
70 130
SteelBlue 4682B4 61% 40%
180
71% 89%
225° 225°
65 105
RoyalBlue 4169E1 73% 71%
225
57% 88%
240°
240° 0%
Blue 0000FF 0 0 255 100%
100%
100%
240° 240°
MediumBlue 0000CD 0 0 205 100% 40%
80% 100%
240° 240°
DarkBlue 00008B 0 0 139 100% 90%
55% 100%
240° 240°
Navy 000080 0 0 128 100% 100%
50% 100%
240° 240°
25 25
MidnightBlue 191970 78% 88%
112
44% 78%
Colores violetas y púrpuras
300° 300°
216 191
Thistle D8BFD8 24% 11%
216
80% 85%
300° 300°
221 160
Plum DDA0DD 47% 27%
221
75% 87%
300° 300°
238 130
Violet EE82EE 76% 46%
238
72% 93%
302° 302°
218 112
Orchid DA70D6 59% 48%
214
65% 86%
300° 300°
255 0
Fuchsia / Magenta FF00FF 100% 100%
255
50% 100%
260° 260°
147 112
MediumPurple 9370DB 60% 49%
219
65% 86%

PÚBLICO
288° 288°
186 85
MediumOrchid BA55D3 59% 60%
211
58% 83%
249° 249°
123 104
MediumSlateBlue 7B68EE 80% 57%
238
67% 93%
248° 248°
106 90
SlateBlue 6A5ACD 53% 55%
205
58% 80%
271° 271°
138 43
BlueViolet 8A2BE2 76% 81%
226
53% 89%
282° 282°
148 0
DarkViolet 9400D3 100% 100%
211
41% 82%
280° 280°
153 50
DarkOrchid 9932CC 61% 76%
204
50% 81%
300° 300°
139 0
DarkMagenta 8B008B 100% 100%
139
27% 54%
300° 300°
128 0
Purple 800080 100% 100%
128
25% 50%
248° 248°
72 61
DarkSlateBlue 483D8B 39% 56%
139
39% 54%
275° 275°
Indigo 4B0082 75 0 130 100% 100%
25% 50%
Colores blancos
255 255 —° 0% —° 0%
White FFFFFF
255 100% 100%
245 245 —° 0% —° 0%
WhiteSmoke F5F5F5
245 96% 96%
255 250 0° 2% 0° 0%
Snow FFFAFA
250 100% 100%
25°
255 245 25° 6%
Seashell FFF5EE 100%
238 100%
97%
250 240 30° 67% 30° 8%
Linen FAF0E6
230 94% 98%
250 235 34° 78% 34° 14%
AntiqueWhite FAEBD7
215 91% 98%
253 245 39° 85% 39° 9%
OldLace FDF5E6
230 95% 99%
40°
255 250 40° 6%
FloralWhite FFFAF0 100%
240 100%
97%
60°
255 255 60° 6%
Ivory FFFFF0 100%
240 100%
97%

PÚBLICO
245 245 60° 56% 60° 10%

Beige F5F5DC
220 91% 96%
240 255 120° 6% 120° 0%
Honeydew F0FFF0
240 100% 100%
245 255 150° 4% 150° 0%
MintCream F5FFFA
250 100% 100%
240 255 180° 6% 180° 0%
Azure F0FFFF
255 100% 100%
208°
240 248 208° 6%
AliceBlue F0F8FF 100%
255 100%
97%
240°
248 248 240° 2%
GhostWhite F8F8FF 100%
255 100%
99%
340°
255 240 340° 6%
LavenderBlush FFF0F5 100%
245 100%
97%
Colores grises
220 220 —° 0% —° 0%
Gainsboro DCDCDC
220 86% 86%
211 211 —° 0% —° 0%
LightGrey D3D3D3
211 83% 83%
192 192 —° 0% —° 0%
Silver C0C0C0
192 75% 75%
169 169 —° 0% —° 0%
DarkGray A9A9A9
169 66% 66%
210° 210°
119 136
LightSlateGray 778899 22% 26%
153
60% 69%
210° 210°
112 128
SlateGray 708090 22% 29%
144
56% 66%
128 128 —° 0% —° 0%
Gray 808080
128 50% 50%
105 105 —° 0% —° 0%
DimGray 696969
105 41% 41%
180° 180°
DarkSlateGray 2F4F4F 47 79 79 25% 40%
25% 31%
—° 0% —° 0%
Black 000000 000
0% 0%

Guia N°01

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia N°01

Cargado por

Copyright:

Formatos disponibles

INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO

I. Creación de la primera pagina

1. Crear un directorio de trabajo para la página (ejm. mipagina) en “mis

3. Guardar el archivo “guardar como” con el nombre inicio.html en la

La página resultante es como sigue:

Calle Infantil S/N Primer Barrio – Comas – Concepción- Junín 1

 Se requiere dar formato al texto

<y> indican inicio y fin de etiqueta

&nbsp espacio en blanco

comentarios

<br> Saltos de línea,no requiere fin de etiqueta

<pre> y </pre> texto preformateado. Aparece tal como se lo escribe, no

Calle Infantil S/N Primer Barrio – Comas – Concepción- Junín 2

Algunos atributos de la regla horizontal:

Atributo Significado Posibles valores

Inicio<hr align="left" width=“50%" size=“10" noshade>Bienvenidos a mi

III. Una ilustración simple

hola mundo este es un texto común

Calle Infantil S/N Primer Barrio – Comas – Concepción- Junín 3

<font> y </font> propiedades del texto

Atributo Significado Posibles valores

<font color="#993366" size="4" face="Arial">

fuente para todo el documento

Calle Infantil S/N Primer Barrio – Comas – Concepción- Junín 4

Etiquetas asociadas al tipo de letra:

Etiqueta Significado Ejemplo

<p align="center">este es un parrafo

<div> y </div> agrupar bloques de texto, pero con la diferencia de

<div align="center">otro parrafo con

<center> y </center> Texto centrado

Calle Infantil S/N Primer Barrio – Comas – Concepción- Junín 5

IV. Encabezados – Títulos

<H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4>

<marquee bgcolor="#006699" behavior="alternate" direction="right">

Behavior alternate scroll slide

direction down up left right

<ul> y </ul>. Lista desordenada

Calle Infantil S/N Primer Barrio – Comas – Concepción- Junín 6

<ol> y </ol>. Lista ordenada

Listas anidadas: combinación de las anteriores.

<a href="http://www.aulaclic.com">Visita www.aulaclic.com</a>

Referencia relativa al sitio: Conduce a un documento situado dentro del

<a href="inicio1.html">cambiar a otro documento "ref. relativa"</a>

<a href="//D:/diplomado/tutoriales/html/index.htm">navegar por el tutorial</a>

Destino del enlace: determina en qué ventana va a ser abierta la página

atributo targetx _blank Abre el documento vinculado en una

Anclas o puntos de fijación: permite ir directamente al apartado deseado en

<a name="miancla"></a>Texto con ancla define el ancla

<a href="mailto:jucelele@hotmail.com">mi e-mail </a>

<a href="mailto:jucelele@hotmail.com?subject=el asunto del mensaje">

Calle Infantil S/N Primer Barrio – Comas – Concepción- Junín 7

Vínculo a ficheros para descarga

<a href="sib1.doc" target=_blank >

<img src="imagenes/gatito.gif" alt="imagen ejemplo">

<img src="imagenes/foto.gif" alt="mi fiesta">

El atributo border puede tomar valores numéricos

<img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4">

imagen con borde y con un enlace:

<a href="inicio1.html" target="_blank" >

width (anchura) y height (altura)

<img src="imagenes/foto.gif" alt="mi fiesta" width="500" height="400">

Alineacion de la imagen: align, Este atributo indica la alineación de las

Los valores del atributo align pueden ser los siguientes: