Conociendo HTML

CONOCIENDO HTML
Que es HTML?

El HTML ( HiperText Markup Language ) es el lenguaje utilizado para representar documentos en la Web, permite incluir texto normal, elementos multimedia (gráficos, vídeo, audio) además de enlazar desde la página a sitios externos.

Las etiquetas permiten controlar  elementos tipográficos del texto como son: tipo de letra, color y tamaño de las fuentes, el estilo ( negrita, cursiva, etc ), así como también la inclusión de tablas, listas, formularios, la inserción de fotos, sonidos, fondos, etc. 

El nombre de la etiqueta y sus atributos se colocan entre los símbolos < y > y normalmente se usan dos, una de inicio y otra final.

Como empezar a trabajar en HMTL

1.- Se necesita un editor de texto (Notepad, Wordpad)
2.- Colocar textos y etiquetas de acuerdo al efecto que se quiera dar.
3.- Guardar con la extensión .html
4.- Abrir la Página con un explorador.
5.- Para editarla dar clic derecho y elegir " Ver código Fuente"

A continuación detallo algunos ejercicios que serán de mucha ayuda.

 1.- código para cambiar el color al fondo de la página

 <body bgcolor="#ff0000">

 El color los puedes elegir buscando una paleta de colores e identificando el valor hexadecimal que posee he colocado una imagen con los colores para se pueda tener una refrencia de igual forma podremos trabajar con estos colores para textos,fondos, bordes, etc.
2.- Código para Centrar
<center> "Aquí colocar   los textos, tablas, objetos que se desea centrar" </center>


 3.- Para Ir variando los tamaños de los textos se debe colocar las siguientes etiquetas dependiendo del tamaña que se desee.
<h1> Texto muy grande</h1>
<h2>Texto grande</h2>
<h3>Texto algo más grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeño</h5>
<h6>Texto muy pequeño</h6>

 4.- Para colocar una tabla que se mueve de un lado al otro se debe utilizar las siguientes etiquetas
<marquee>
<table align="center" border="1" style="width: 100px;">
<tr>
   <td>Texto que ira dentro de la Tabla</td>
</tr>
</table>
</marquee>

5.- Para colocar objetos que descienden se puede buscar un gif animado que no agrade y reemplazarlo en el siguiente código en el área de la ubicación de la imagen, de igual forma se puede variar la posición, el tamaño de la imagen.


 <marquee behavior="scroll" direction="down" scrollamount="5" style="height: 700px; left: 100px; position: absolute; top: 200px; width: 616px;"><span style="color: red;"><img alt="" src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee> <marquee behavior="scroll" direction="down" scrollamount="7" style="height: 60px; left: 95px; position: absolute; top: 0px; width: 716px;"><span style="color: white;"><img alt="" src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee><marquee behavior="scroll" direction="down" scrollamount="7" style="height: 170px; left: 115px; position: absolute; top: 0px; width: 616px;"><span style="color: white;"><img alt="" 
src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee><marquee behavior="scroll" direction="down" scrollamount="3" style="height: 570px; left: 116px; position: absolute; top: 5px; width: 816px;"><span style="color: #ff0033;"><img alt="" 
src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee><marquee behavior="scroll" direction="down" scrollamount="5" style="height: 600px; left: 132px; position: absolute; top: 515px; width: 816px;"><span style="color: #ff9900;"><img alt="" 
src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee> <marquee behavior="scroll" direction="down" scrollamount="2" style="height: 110px; left: 148px; position: absolute; top: 5px; width: 816px;"><span style="color: white;"><img alt="" 
src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee> <marquee behavior="scroll" direction="down" scrollamount="7" style="height: 500px; left: 114px; position: absolute; top: 25px; width: 916px;"><span style="color: #339900;"><img alt="" 
src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee> <marquee behavior="scroll" direction="down" scrollamount="7" style="height: 450px; left: 330px; position: absolute; top: 25px; width: 965px;"><span style="color: #ff9900;"><img alt="" 
src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee><marquee behavior="scroll" direction="down" scrollamount="6" style="height: 430px; left: 246px; position: absolute; top: 15px; width: 716px;"><span style="color: white;"><img alt="" 
src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee> <marquee behavior="scroll" direction="down" scrollamount="5" style="height: 400px; left: 312px; position: absolute; top: 55px; width: 716px;"><span style="color: #339900;"><img alt="" 
src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee><marquee behavior="scroll" direction="down" scrollamount="2" style="height: 410px; left: 338px; position: absolute; top: 165px; width: 516px;"><span style="color: #cc00cc;"><img alt="" 
src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee> <marquee behavior="scroll" direction="down" scrollamount="7" style="height: 460px; left: 354px; position: absolute; top: 35px; width: 916px;"><span style="color: #33cc33;"><img alt="" 
src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee><marquee behavior="scroll" direction="down" scrollamount="1" style="height: 100px; left: 910px; position: absolute; top: 5px; width: 816px;"><span style="color: white;"><img alt="" 
src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee><marquee behavior="scroll" direction="down" scrollamount="7" style="height: 110px; left: 570px; position: absolute; top: 5px; width: 716px;"><span style="color: white;"><img alt="" 
src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee><marquee behavior="scroll" direction="down" scrollamount="7" style="height: 160px; left: 620px; position: absolute; top: 5px; width: 616px;"><span style="color: white;"><img alt=""
 src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee><marquee behavior="scroll" direction="down" scrollamount="1" style="height: 100px; left: 300px; position: absolute; top: 0px; width: 716px;"><span style="color: white;"><img alt=""
 src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee><marquee behavior="scroll" direction="down" scrollamount="5" style="height: 200px; left: 890px; position: absolute; top: 0px; width: 816px;"><span style="color: white;"><img alt="" 
src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee><marquee behavior="scroll" direction="down" scrollamount="7" style="height: 100px; left: 840px; position: absolute; top: 10px; width: 616px;"><span style="color: white;"><img alt="" src="http://www.gifss.com/informatica/arrobas/07.gif" /></span></marquee><br /><br />

 6.- Para colocar un texto que se desplaza en sentido vertical de abajo hacia arriba de igual forma se puede variar el alto.

 <marquee behavior="" direction="up" height="20" scrollamount="6"><span style="color: blue;">TEXTO A DESPLAZARSE</span></marquee>
7.-Imagen que se desplaza en sentido horizontal, para esta práctica se necesita buscar una imagen copiar la dirección Url y pegarla en el código

<marquee><img alt="" src="dirección URL de la Imagen" /></marquee>

8.- Para colocar una imagen como fondo de un texto, se requiere buscar la imagen y copiar el URL posteriormente se puede modificar el color del texto en borde la tabla, etc.


<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZGv2mK_P1VWlUSFwlNFWrxTAW41XWuhorqzDSm6eBclvUq0viVO5Z6Ixje6cM9lDwMNbobVEnooUZKucO5CDKM3C-zOxhzUfjpJTL4bXWve1e1KW40vkow9CRnYh-iMH3z2d5O9xCg5wm/s320/blog_icon.jpg" bgcolor="#0000FF" border="0" bordercolor="#00FF00" style="height: 250px; width: 320px;">
<tr>    <td><span style="color: white;">  MÓDULO BLOGS PARA LA EDUCACIÓN</span> </td> </tr>
</table>

9.- Para insertar el día y la fecha actual se debe colocar la siguientes etiquetas:

<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
mydate = new Date();
myday = mydate.getDay();
mymonth = mydate.getMonth();
myweekday= mydate.getDate();
weekday= myweekday;
if(myday == 0)
day = " Domingo, "
else if(myday == 1)
day = " Lunes, "
else if(myday == 2)
day = " Martes, "
else if(myday == 3)
day = " Miércoles, "
else if(myday == 4)
day = " Jueves, "
else if(myday == 5)
day = " Viernes, "
else if(myday == 6)
day = " Sábado, "
if(mymonth == 0)
month = "Enero "
else if(mymonth ==1)
month = "Febrero "
else if(mymonth ==2)
month = "Marzo "
else if(mymonth ==3)
month = "Abril "
else if(mymonth ==4)
month = "Mayo "
else if(mymonth ==5)
month = "Junio "
else if(mymonth ==6)
month = "Julio "
else if(mymonth ==7)
month = "Agosto "
else if(mymonth ==8)
month = "Setiembre "
else if(mymonth ==9)
month = "Octubre "
else if(mymonth ==10)
month = "Noviembre "
else if(mymonth ==11)
month = "Diciembre "
document.write("<font face=arial, size=1>"+ day);
document.write(myweekday+" de "+month+ "<\/font>");
// </script>

10 .- y lo que nunca nos debe faltar en nuestro Blog un contador de visitas, acontinuación dejo el código del que yo utilice.

<img alt="contador de visitas" src="http://contador-de-visitas.com/hit.php?id=1430187&amp;counter=0" style="border: 0px solid; display: inline;" />

SI quieres ver como te quedara cada uno de los elemntos explicados puedes hacerlo en la pestaña APLICACIONES HTML, Anímate a probarlo!!

No hay comentarios:

Publicar un comentario

Suscribirse a: Entradas (Atom)