Jóvenes, les comparto otros códigos de HTML para que los incrusten
en la página que estamos desarrollando en las clases de prácticas.
ENLACES (VÍNCULOS).
Creación de hiperenlaces.
Permiten enlazar dos páginas cualesquiera independientemente de la ubicación de
cada una: local o en red.
Ejemplos:
<A HREF= “http://www.facebook.com” > Facebook </A>
<A HREF= “pagina.html” > Página1 </A>
<A HREF= “http://www.google.com” ><IMG SRC=“imagen.gif” ></A>
Imágenes en la Web.
Inclusión de imágenes:
Formatos principales GIF y JPEG
Sintaxis:
<IMG SRC= “imagen.gif” >
Atributos
<IMG SRC= “imagen.gif” HEIGHT= valor WIDTH= valor >
Alineación
<IMG SRC= “imagen.gif” ALIGN= top
Por ejemplo
<P><IMG SRC="1.gif" ALIGN = ”TOP”>
INSERTAR TABLAS
Las tablas sirven para encolumnar y estructurar el texto y las imágenes con más
precisión.
La estructura de una tabla es muy versátil. Las marcas de una tabla son jerárquicas:
una tabla tiene una o más filas y cada una de las filas está dividida en una o más
columnas. Las marcas que se usan son:
<TABLE> </TABLE>Al inicio y al final
<TR> </TR>Definen las filas
<TD> </TD>Definen las columnas
Por ejemplo
<TABLE BORDER="1">
<TR>
<TD>uno</TD>
<TD>dos</TD> :
</TR> Resultado de la Tabla
<TR> uno dos
tres cuatro
<TD>tres</TD>
<TD>cuatro</TD>
</TR>
</TABLE>
INSERTAR VÍDEO.
<video width=320 height=240 controls poster="vistaprevia.jpg">
<source src="ejemplo.webm" type="video/webm">
<source src="ejemplo.ogg" type="video/ogg">
<source src="ejemplo.mp4" type="video/mp4">
</video>
AQUÍ LES COMPARTO EL CÓDIGO HASTA DONDE IBAMOS PRACTICANDO,
PARA A QUELLOS QUE NO LO TIENEN PUEDAN CONTINUAR CON SU
TRABAJO Y EN ESA PÁGINA INCRUSTEN LO QUE ACONTINUACIÓN SE LES
SOCLICITA.
ESTOS 4 PUNTOS SON LOS QUE VAN A AGREGAR EN EL CÓDIGO QUE LES
COMPARTO.
1. UTILIZANDO H1, COLOCAR EL TÍTULO DE MIS DATOS PERSONALES
2. UTILIZANDO H2, DEBERÁS PONER TUS DATOS COMO MATRICULA,
GRUPO, GRADO, NOMBRE, DIRECCIÓN, CORREO, FECHA DE NACIMIENTO
Y EDAD
3. LISTAS ORDENADAS
4. TABLA DE 6 COLUMNAS POR 6 FILAS.
CÓDIGO:
<!DOCTYPE html>
<html>
<head>
<title>
MI PRIMER PAGINA WEB
</title>
<style>
.logos{
background-color:aqua;
padding:15px;
}
</style>
</head>
<body BGCOLOR="lightyellow">
<div class="logos">
<img src="img/logoconalep.jpg" height="120px" width="100px">
<img src="img/portada.jpg" height="125px" width="1070px">
<img src="img/conalep170.png" height="125px" width="125px"
align="right">
<b>
<font color="magenta" size="+2">
<MARQUEE>PAGINA WEB EDUCATIVA</MARQUEE>
</font>
</b>
</div>
</H1>
<hr color="blue">
<H2 align="center">GRUPO 2103 DE INFORMÁTICA</H2>
<hr size=30 color="red">
<H3 align="center">Ejemplo de página WEB </H3>
<BR>
<b>
<h1 font size=+2" align="center">HAZ CLIC EN EL VÍNCULO</h1>
</b>
<h1 align="center">
<a href="http://www.franciscoabel.blogspot.com">1. Visita Mi Blog </a>
<p>
<a href="https://bahianet1.wixsite.com/portafolioconalep170">2. Visita Mi
Pagina Web </a>
</p>
</h1>
<img src="img/moji.png" height="300px" width="300px" align="right">
<B> <I>
<H2>ESTO ES UN EJEMPLO DE LISTAS </H2>
</B> </I>
<h3>
<OL>
<B>
<LI> <FONT COLOR="blue">PRIMERO</FONT>
<LI> <FONT COLOR="RED">SEGUNDO</FONT>
<LI> <FONT COLOR="GREEN">TERCERO</FONT>
</B>
</OL>
</h3>
<UL>
<LI> <B>Naturales </B>
<UL>
<LI> <FONT COLOR="magenta">Biologia</FONT>
<LI> <FONT COLOR="yellow">Botanica</FONT>
</UL>
<LI><B>Sociales </B>
<UL>
<LI> <FONT COLOR="magenta">Geografia</FONT>
<LI> <FONT COLOR="yellow">Historia</FONT>
</UL>
</UL>
</BODY>
</HTML>
GRABAR EL ARCHIVO CON SU NOMBRE Y LA PALABRA HTML, POR
EJEMPLO: ALONDRA.HTML Y LO SUBEN A LA PLATAFORMA PARA SU
REVISIÓN Y CALIFICACIÓN.
NOTA: AQUÍ LES DEJO LAS IMAGENES QUE VIENEN EN LA PÁGINA PARA
QUE LAS GUARDEN (HACIENDO CLIC DERECHO DEL MOUSE Y EN
“GUARDAR IMAGEN COMO”) EN LA MISMA CARPETA DONDE SE
ENCUENTRA EL CÓDIGO´DE LA PÁGINA.
