Manual Básico de HTML

Manual básio de html


Aquí tienes un manual básico de HTML qué te servira para empezar tu web.



1.-¿Qué es HTML?

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.

HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).

Seguir leyendo en Wikipedia...




2.-Tags para un documento HTML minimo

<HTML> Principio de un documento HTML
</HTML> Fin de un documento HTML
<HEAD> Principio de la cabecera
</HEAD> Final de la cabecera
<TITLE> Principio del título de la página
</TITLE> Fin del título de la página
<BODY> Principio del documento
</BODY> Final del documento

-Organizalos en un bloc de notas como el siguiente ejemplo:

<HTML>
<HEAD>
<TITLE> Tïtulo de la página </TITLE>
</HEAD>
<BODY>
Aquí el contenido de tu web
</BODY>

-Cuando tengas listo tu documento guardalo como el siguiente ejemplo: nombre_del_documento.htm o nombredeldocumento.html



3.-Etiquetas de texto

3.1-Color:


Rojo
Azul
Verde
Amarillo

-Solo tienes que poner este código (<font color="COLOR">Aqui el contenido</font>) y editar las partes verdes
. En "COLOR" deberas poner el código hexadecimal del color deseado (Si no sabes como obtener ese código entra aquí)


3.2-Tamaño del Texto:

TutorialeScorpion
La mejor ayuda para webmaster de PWG!

-Solo edita las partes verdes de este código (<span style="font-size: 20px"><span style="font-family: calibri;">Texto<br />
<span style="font-size: 15px;"><span style="font-family: calibri;">Texto</span></span></span></span>)




3.3-Texto en:

Negrita: <b> Contenido en negrita </b>
Italica:
<i> Contenido en italica </i>
Subrayado: <u> Contenido subrayado </u>
Tachado: <s> Contenido tachado </s>

-Edita las partes verdes. Si quieres combinar más de uno a la vez solo fuciona los códigos. Ejemplo:
TutorialeScorpion:  <i><b><u>TutorialeScorpion:</b></u></i>


3.4-Tipo de fuente:


Arial: <span style="font-family:Arial;">Texto</span>
Calibri: <span style="font-family: calibri;">Texto</span>
Times new roman: <span style="font-family: Times new Romani;">Texto</span>
Verdana: <span style="font-family: Verdana;">Texto</span>

-Edita las partes verdes. Te recomiendo que abras word, veas los tipos de fuente (te da una vista previa de la fuente), copias el nombre de la fuente y lo pegas.



3.5-Resultado de todo junto


TutorialeScorpion

-Recursos para webmaster de PWG!

-Todo lo que necesitas para tu web en una sola página


Código:

<span style="font-family: papyrus;"><strong><br />
</strong></span><span style="color: rgb(0, 0, 255);"><span style="font-size: 16px;"><span style="font-family: papyrus;"><strong>TutorialeScorpion</strong></span></span></span><u><span style="font-size: medium;"><span style="font-family: Arial;"><br />
<br />
-Recursos para webmaster de PWG!</span></span></u><span style="font-size: medium;"><span style="font-family: calibri;"><em><br />
</em><span style="font-family: Verdana;"><em>-Todo lo que necesitas para tu web en una sola p&aacute;gina</em></span><br />
</span></span>





4.-Vinculo

En la misma ventana: <a href="URL">Texto</a>
En Otra ventana: <a href="URL">Texto</a>
Ventana emergente: <a onclick="window.open(this.href,'','resizable=no,location=no,menubar=no,scrollbars=no,status=no,toolbar=no,fullscreen=no,dependent=no,width=900,height=900,status'); return false" href="URL">Texto</a


-Edita las partes en verde. En el caso de la ventana emergente los números en verde son las medidas de la ventana.






5.-Colocar imagen

Imagen sin cambios: <img alt="" src="URL DE LA IMAGEN" />




Con otro tamaño: <img width="200" height="52" src="URL DE LA IMAGEN" alt="" />


Con vinculo: <a href="URL"><img alt="" src="URL DE LA IMAGEN" /></a>
 


-Edita las partes en verde. Hay otras maneras de imagen vinculo, solo has cambios como enseño en el "apartado 5".
Si no sabes como conseguir el URL de una imagen ve el siguiente vídeo.