CÓDIGOS DE PÁGINAS WEB BÁSICAS
Procedimiento de creación en procesador de texto plano
Abrir el editor Bloc de notas o Notepad++
Escribir el código de la página web (ver ejemplos)
Guardar el archivo con el nombre index.html o el nombre que desees colocar como mipaginaweb.html siempre con la extensión HTML
Página hola mundo
<html>
<head> <title>Curso de HTML</title> </head>
<body>
Bienvenidos al curso de HTML
</body>
</html>
Página con imagen de fondo
<html>
<head> <title>Imagen de fondo</title> </head>
<body background="nombreimagen.jpg">
Bienvenidos al curso de HTML<br><br>
la etiqueta <br> nos sirve para dar espacios
</body>
</html>
nota el nombre de la imagen se cambia por el nombre exacto de la imagen y la extension puede ser jpg, gif, png.
Página con color de fondo e imagen
<html>
<head> <title>Imagen de fondo</title> </head>
<body bgcolor="#00BFFF">
Bienvenidos al curso de HTML<br>
La etiqueta <center> nos permite centrar elementos de la pagina web<br>
La etiqueta <img> nos permite ingresar una imagen<br><br>
<center><img src="/nombreimagen.png"></center>
</body>
</html>
Página con imágenes centradas y con tamaño alto 250px ancho 400px
<html>
<head> <title>Imagen de fondo</title> </head>
<body bgcolor="#00BFFF">
Otro ejemplo de HTML<br>
La etiqueta center nos permite centrar elementos de la pagina web<br>
La etiqueta img nos permite ingresar una imagen<br><br>
<center><img src="/nombreimagen1.png" width="400" height="250" alt="imagen1"></center><br>
<center><img src="/nombreimagen2.png" width="400" height="250" alt="imagen1"></center><br>
</body>
</html>
Página cambios de letra e hipervínculos o links
<html>
<head><title>Fuentes y links</title></head>
<body bgcolor="#0d9a3c">
<center> Las Fuentes y Links</center>
<br><hr><br><br>
para las fuente exite la etiqueta font que permite con sus atributos como color, size y face asignar el color, el tamaño en puntos y la fuente de la letra
como en el siguiente ejemplo <br><br>
<font color="blue" size="14" face="Tahoma">ESTE TEXTO ESTA ESCRITO EN AZUL SIZE 14 FUENTE TAHOMA </font>
<br><br>
La etiqueta "A" permite crear links o hipervinculos para los elementos en cuales esta delimitado, en sus atributos href se debe dar la URL a ejecutar y en target sise desea que esa pagina se abra en otra ventana ejemplo
<br><br>
<a href="http://www.evirtualcisneros.xyz" target="blank">EVIRTUALCISNEROS</<a><br><br>
<a href="http://evirtualcisneros.xyz/plataforma" target="blank"><img src="/imagenplataforma.jpg"></a><br>
</body>
</html>
Página con listado de imágenes en una tabla 3 columnas x 3 filas
<html lang="es">
<head> <title>TABLA 3X3</title> </head>
<body bgcolor="#C0D9D9" text="#000000">
<br><br><center><h1>
Tabla de peliculas</h1></center><br>
<hr width=50%><br>
<h2>Información General</h2>
<br>
<br>
<center><table width=80% align=center border=3>
<tr><th colspan=3>listado de peliculas</th></tr>
<tr align=center>
<td width=40% bgcolor="#C0C0C0">
Nombre pelicula
</td>
<td width=30% bgcolor="#C0C0C0">
Descripcion
</td>
<td width=30% bgcolor="#C0C0C0">
Imágen e link </td> </tr>
<tr> <td> LOGAN </td>
<td> Logan es una película estadounidense de 2017 y la última de la trilogía de Wolverine,
basada en el personaje de Wolverine, de Marvel Comics,
y producida por la 20th Century Fox. Wikipedia </td>
<td><a href="https://www.youtube.com/watch?v=nQY6D8aywLs" target="blank"><img src="/logan.jpg" height="40" width="80"></a></td> </tr>
<tr> <td> Liga de la justicia </td>
<td> Justice League es una película estadounidense próxima a estrenarse, perteneciente al género de superhéroes basada
en las historietas de DC Comics acerca de la Liga de la Justicia. Wikipedia </td>
<td><a href="https://www.youtube.com/watch?v=1c66wfYbNEs" target="blank"><img src="/liga.jpg" height="40" width="80"></a></td> </tr>
<tr> <td> Warcraft </td>
<td> Warcraft es una película épica estadounidense de fantasía de 2016, dirigida y
coescrita por Duncan Jones y basada en el universo del popular videojuego Warcraft. Wikipedia </td>
<td><a href="https://www.youtube.com/watch?v=nHqvekoDRCw" target="blank"><img src="/logan.jpg" height="40" width="80"></a></td> </tr>
</body></html>
Página para crear listas ordenadas y no ordenadas (viñetas)
<html>
<head><title>listas</title></head>
<body bgcolor="#adbc09">
<br><br><br><center><font size="12" color="blue">Lista de paginas web</font></center><br>
<br><br>Para realizar una lista se utilizan dos etiquetas una para listas "NO" ordenadas ul y otra para ordenadas ol, para señalar un nuevo item se utiliza para ambas etiquetas la etiqueta li a continuacion observamos este ejemplo:<br><br>
lista de peliculas no ordenada<br>
<ul>
<li><a href="https://www.youtube.com" target="blank">YOUTUBE</a></li>
<li><a href="http://www.evirtualcisneros.xyz" target="blank">EVIRTUALCISNEROS</a></li>
<li><a href="http://www.google.com" target="blank">GOOGLE</a></li>
</ul>
<br><br><br>
Lista ordenada con letras mayusculas
<ol>
<li type=A><a href="https://www.youtube.com" target="blank">YOUTUBE</a></li>
<li type=A><a href="http://www.evirtualcisneros.xyz" target="blank">EVIRTUALCISNEROS</a></li>
<li type=A><a href="http://www.google.com" target="blank">GOOGLE</a></li>
</ol>
<br><br><br>
La etiqueta "li" tiene un atributo llamado "type" y segun tomes la configuración puedes tener numeración en romanos, mayusculas, minusculas y numeros
<br><br>ejemplo:
<ol>
<li type=A>listado en letras mayusculas</li>
<li type=a>listado en letras minusculas</li>
<li type=I>romanos mayusculas</li>
<li type=i>romanos minusculas</li>
<li type=1>numeros</li>
</ol>
<br>
</body></html>
