HTML
Tablas:
MARCA - COMANDO
|
LA MARCA REALIZA:
|
<TABLE BORDER="5" bgcolor ="blue" >
|
Colocar color de fondo a la tabla
|
<TD> <IMG
SRC="nubes2.jpg"> </TD>
|
Colocar una imagen en una celda de la tabla
|
<TR BGCOLOR="#DB70DB">
<TD> TEXTO
</TD>
<TD> TEXTO
</TD>
<TD> TEXTO
</TD>
</TR>
|
Ponerle color de fonfo a una fila
|
<TR BGCOLOR="RED">
<th>Hora </th>
<th>Lunes
</th>
<th>Martes </th>
</tr>
|
Primera fila de una tabla.
Es el encabezado de la tabla – aparece el texto como si fuera título.
|
Crear tablas
<TABLE BORDER = "5" >
<TR>
<TD> UNO </TD>
<TD> DOS </TD> </TR>
<TR>
<TD> TRES </TD>
<TD> CUATRO </TD> </TR>
<TR>
<TD> CINCO </TD>
<TD> SEIS </TD> </TR>
</TABLE>
EXPLICACIÓN
<TR> …. </TR>
crear un registro en la tabla R= row=renglón
<TD> dato en cada celda </TD>
crea cada celda de la tabla – es decir el número de columnas.
Para el ejemplo es una tabla de _3_ filas y _2_
columnas. CELDAS= 3F * 2C = 6 celdas.
Imágenes:
Colocar una imagen en el
cuerpo de la página
<IMG SRC="angel.jpg" >
<IMG SRC="ESPIRAL.GIF" WIDTH="300">
<IMG SRC="HADA.PNG" >
EXPLICACIÓN
El comando <IMG
SRC="nombre de la imagen y la extensión del archivo" > sirve para colocar una imagen en el
cuerpo de la página. Es necesario
siempre crear una carpeta para archivar los archivos HTML y las imágenes que se
van a trabajar. Todos en un mismo sitio,
tener en cuenta el tipo de imagen para escribir bien el nombre del
archivo. (jpg, png, gif tipos de imagen que
se pueden trabajar en html). WIDTH="numero" es el ancho de la imagen, siempre y
cuando se pueda modificar.
Vínculos:
El
hipervínculo es el elemento más importante del HTML, ya que es el que realmente permite
"navegar" por uno o varios documentos. Los usuarios podrán navegar por las páginas
haciendo clic con el ratón sobre las zonas activas o subrayadas. Estas zonas activas pueden corresponder a un
grupo de caracteres o una imagen.
Por
esto el elemento más importante que tiene una página de internet es el
hipervínculo, estos nos permiten cargar otra página en el navegador. Normalmente un navegador al encontrar esta
marca muestra un texto subrayado, y al hacer clic con el mouse sobre éste el
navegador carga la página indicada por dicho hipervínculo.
Crear vínculo a una dirección
de internet
<a href = "https://www.google.com.co"> ir a google </a>
EXPLICACIÓN
Crear un hipervínculo a una dirección en
internet, es necesario escribir completo
el link para asegurar que va a funcionar https://......
<a href = "https://www.google.com.co">
ir a google </a>
<a href….> è
Marca que permite hacer hipervínculos
"https://.....” è Dirección a la cual quiero acceder
<a … > ir a google è
Texto que sale subrayado que me indica que hay un vínculo.
</a> è Cerrar la marca del hipervínculo
Crear vínculo a una página
HTML
<a href = "clase03.html"> ir a otra pagina
</a>
EXPLICACIÓN
"clase03.html" es el nombre de la página con la que quiero crear el vínculo
ir
a otra pagina es el Texto que sale subrayado que me indica que hay un vínculo a otra página del
sitio WEB.
Todas las páginas e imágenes que me van
a permitir crear el sitio WEB deben estar en una misma carpeta.
Vinculo en la misma página.
<html>
<head>
</head>
<body>
<h1>opcion HREF de html
</h1>
<a href="#introduccion"> titulo de
Introducción</a><br>
<a href="#opcion dos">segunda
opcion</a><br>
<a href="#opcion tres">tercera
opcion</a><br>
<a href="#opcion cuatro">Cuarta
opción</a><br>
<a name="introduccion"></a>
<h2>titulo de Introducción</h2>
<p>
datos de la introduccion ......... etc.<br>
mas renglones de la primera opcion...... <br>
mas renglones de la primera opcion...... <br>
mas renglones de la primera opcion...... <br>
mas renglones de la primera opcion...... <br>
</p>
<a name="opcion dos"></a>
<h2>segunda opcion</h2>
<p>
aca inicia el segundo parrafo......<br>
mas renglones de la segunda opcion...... <br>
mas renglones de la segunda opcion...... <br>
mas renglones de la segunda opcion...... <br>
mas renglones de la segunda opcion...... <br>
</p>
<a name="opcion tres"></a>
<h2>tercera opcion</h2>
<p>
aca inicia el tercer parrafo......<br>
mas renglones de la tercera opcion...... <br>
mas renglones de la tercera opcion...... <br>
mas renglones de la tercera opcion...... <br>
</p>
<a name="opcion cuatro"></a>
<h2>Cuarta opción</h2>
<p>
aca inicia el cuarto parrafo......<br>
mas renglones de la cuarta opcion...... <br>
mas renglones de la cuarta opcion...... <br>
mas renglones de la cuarta opcion...... <br>
mas renglones de la cuarta opcion...... <br>
</p>
</body>
</html>
Vincular paginas abriéndolas en una
nueva ventana.
<body bgcolor="XXXXXX">
|
Color de fondo del cuerpo de la
página.
|
<CENTER> PALABRA
</CENTER>
|
Centrar una palabra
|
<body
background = "XXXXXX" >
|
Color imagen de fondo en el cuerpo de
la página.
|
<h6> palabra
</h6>
|
Texto como título tamaño 6
|
<br>
|
Enter – salto de línea
|
<P ALIGN="RIGHT">
XXXX
</P>
|
Alinear el texto a la derecha
|
<HR COLOR="XXXXX" SIZE =
"###">
|
Una línea de un color y un tamaño
determinado.
|
<IMG
SRC="XXXXX" >
|
Colocar una imagen en el cuerpo de la
página.
|
<hr>
|
Una línea horizontal
|
<font
color="XXXXX"> PALABRA
</font>
|
Un texto de un color de fuente
especifico.
|
<font face
="XXXX"> PALABRA </font>
|
Un texto de un tipo de fuente
especifico.
|
<font size
="XXXXXX"> PALABRA </font>
|
Un texto de un tamaño de fuente
especifico.
|
<font color="XXXXX"> <font face ="XXXX">
<font size ="XXXXXX"> PALABRA </font>
|
Un texto de un color, un tipo y un tamaño de fuente especifico.
|
<u> PALABRA </u>
|
Texto
subrayado
|
<b> PALABRA </b>
|
Texto en negrilla
|
<s> PALABRA </s>
|
Texto
tachado
|
<IMG SRC="XXXXX" WIDTH="###">
|
Colocar una imagen en el cuerpo de la
página redimensionándole el ancho.
|
<h2> <font face ="XXXXX"> <font color="XXXXX"> palabra
</font> </h2>
|
Texto
como título tamaño 2 con un
tipo de fuente y un color de la fuente especifico.
|
<!
H O L
A
|
Comentario.
|
<P
ALIGN="left">
XXXX
</P>
|
Alinear el texto a la izquierda
|
Etiquetas nos permiten cambiar el aspecto de la letra:
<b>...</b> Pone
el texto en negrita.
<i>...</i>
Representa el texto en cursiva.
<u>...</u> Para subrayar
algo.
<s>...</s> Para
tachar.
<font color="red">
TEXTO </font>
<font size="2"> TEXTO
</font>
<font face="Arial"> TEXTO
</font>
ALGUNOS COLORES QUE SE PUEDEN
USAR: Black, Silver, Gray, White,
Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal,
Aqua
EL TAMAÑO es SIZE: Se pueden trabajar con valores desde 1 a
7. También se puede utilizar los
modificadores +
y - para indicar un incremento
(o decremento) relativo del tamaño del tipo de letra.