Tutorial de HTML

**piluve** Mar Dic 28, 2010 1:57 pm

Este es un tuto que creé yo si lo queréis en pdf tiene imágenes y está mucho mejor aquí tenéis el link

http://www.megaupload.com/?d=JYZZFFPN

Capítulo 1 Introducción:
HTML (Hiper Text Markup Language) más o menos la traducción sería lenguaje de etiquetado de hipertexto con lo cula esto ya nos da una explicación de cómo sería este lenguaje…
Pues ni más ni menos este es un lenguaje en el que el elemento principal son las etiquetas; bueno y tu dices…¿Qué es una etiqueta? Bien para explicártelo te pondré un ejemplo creo que es la mejor manera para entenderlo:
<etiqueta>
Sí,es eso pero ¿esto solo? Pues sí HTML se basa en eso en etiquetas>. Las etiquetas claro está que son más complejas que esta y pueden contener atributos, se abren y se cierrán…
Pongamos más ejemplos de etiquetas:
<etiqueta>alguna información aquí</etiqueta>
<etiqueta atributo=”valor”>alguna información aquí</etiqueta>
Y estas sería las principales etiquetas usadas en HTML

Capítulo 2 ¿CSS?
Como veis me gusta comenzar con una definición: CSS(Cascading Style Sheets) amhh te has perdido ¿no?...Esto es una “utilidad” que lo que hará será aplanar el terreno a la hora de programar en HTML
CSS lo que hace es darle un aspecto visual más bonito a una web ya sea con colores, centrados de texto u otras cosas…
Por lo tanto HTML para crear la sintaxis y CSS para una ortografía impecable (me refiero a que sea bonito).

Capítulo 3 Antes de continuar:
 No necesitaras conocimientos previos en programación de ningún tipo.
 Los códigos que se irán poniendo es recomendable que vosotros también los hagáis .Para hacerlo solo necesitáis un editor de texto plano o sea Notepad o cualquier otro editor de textos.
 También necesitareis un navegador El MozillaFirefox es multiplataforma y reconoce bien todos los códigos de HTML.
 Cada vez que guardes un código tiene que ser:

Páginaprincipal.html

 Prohíbo el uso de Dreamweber y Front Page son dos editores de webs muy famoso más para comenzar os recomiendo que comencéis como toda la vida con el notepad y a probar una y otra vez

Parte primera HTML

Capítulo 4 Mi primera web

Comenzaremos con la etiqueta básica de HTML <html></html> dentro de ella irá todo el código de la web .
Ahora continuamos con <head></head> esta etiqueta determina el nombre que aparecerá en la pestaña del navegador.Esta etiqueta va junto a “title”. <head><title></title></head>
La siguiente etiqueta será en la que vallan las imágenes, textos, tablas lo que sea… y es la siguiente <body></body>

Bien ya conoces todas las etiquetas principales que usaremos así que ahí va el primer código(el cual recomiendo que copiéis y lo probéis vosotros igual que yo).

<html>
<head><title>Mi web</title></head>
<body>
Mi web es muy Chula muy guay mola mazo jeje no se que más poner.
</body>
</html>
Biennnn !!!si guardas esto como web.html y lo abres con el navegador tendrás tu primer código válido.
Como se puede apreciar es muy sencillo crear el código base de la web, en los siguientes capítulos avanzaremos más rápido por lo tanto hay que estar atentos y intentar ir haciendo los códigos y probándolos.
Capítulo 5 Etiquetas básicas
1. Párrafos.
Los párrafos son una manera de estructurar el contenido de la web dentro de estas simples estructuras.
Para crear un párrafo solo tienes que usaar la etiqueta: <p>Contenido del párrafo</p> se puede dejar sin cerrar más recomiendo que lo cerréis:

<p>La democracia es el gobierno del pueblo, por el pueblo, para el pueblo.</p>
Esto sería un párrafo.

1.1. Saltos de línea.
El navegador cuando lee el código de la web no diferencia los saltos de línea por lo tanto tenemos que indicarlo donde acaba una línea. La estructura del salto de línea es muy simple:<br/>
<p>
Mi casa tiene cien puertas<b/>
Y mil ventanas que dan al mar [.…]<b/>
</p>

1.2 Títulos

Para hacer que una parte del texto resalte lo que tenemos que hacer es usar una etiqueta muy simple con la siguiente estructura<hx> donde x sería un número del 1 al 6 que determinaría desde un título muy importante <h1></h1> hasta uno muy pequeño <h6></h6>.

Una recomendación siempre debemos de tener un h1 en la web ya que los buscadores como Google o Bing (entre otros )van recorriendo las webs buscando estos h1 que según como vena nos posicionaran mejor en las listas.Cuando entremos en CSS explicaré un poca más sobre este tema.
<h1>Muy importante</h1>
Muy importante

<h6>No tan importante</h6>
No tan importante
1.3 Rayas horizontales

Bueno pues estas rayas horizontales la verdad esque no son muy usaos hoy en día ya que con CSS podemos realizar separadores también pero si os digo la verdad a mi en personal no me molestan mucho ya que dan un toque agradable a la página.
Su estructura es la siguiente <hr/>

<p>Mi web mola mazo y ahora pongo una raya por el medio….

<hr/>

ABCDEFGHIJKLMNÑOPQRLSTUVWXYZ..</p>

1.4 Comentarios
Los comentarios son usados como en cualquier lenguaje de programación para insertar un texto que el navegador no lea y que le sirva de ayuda al programador a la hora de organizarse, para explicar lo que es un comentario os pongo un ejemplo:

<!- -Esto no será leído ni interpretado por el navegador-->

Capítulo 6 Resaltando el texto

Bien para resaltar partes del texto vamos a usar dos etiquetas que son <em></em> y <strog></strong> una lo que hará será poner en cursiva y otra en negrita aunque esto no nos importa mucho ya que con CSS ya veréis como modificamos estas dos etiquetas.

<em>Esta es una cita famosa</em> <br/>
<strong>Este es su autor</strong>

Si probáis este código veréis que tiene bastantes usos ya que aunque solo sea resaltando algo ayuda a mejorar el estilo de nuestra web(ya veréis cuando entremos en CSS…)

2 Acrónimos

Un acrónimo será una etiqueta que usaremos por ejemplo si queremos aclarar una cosa como por ejemplo m.(metros).
Usaremos la siguiente etiqueta <abbr>

<p>
Mido cinco <abrr title=”Metros”>m. y si no entro en mi cama.
</p>

Esta foto muestra el resultado como veis aunque está un poco pequeño alado de m. aparece un cuadradito con Metros

Capítulo 7 Enlaces

Como primer enlace usaremos el <a></a> para enlazar dos páginas en el escritorio a modo de menú veréis como es muy sencillo:

Página 1
<html>
<head><title>Mi web</title></head>
<body>
<h1>Ejemplo de enlace a una página dentro del mismo directorio</h1>
<!- -Para usar este enlace debemos tener en la misma carpeta o el escritorio otro -->
<!—documento html llamado página.html.
<a href="página.html" title="Página enlazada">

Enlace a otra página de mi web

</a>

</body>
</html>

Página 2
<htm>
<head><title>Página dos</title></head
<body>
<h1>Esta es la segunda página</h1>
</body>
</html>

Este fue un ejemplo muy sencillo de una página con un pequeño menú y diréis pues menuda caca no¿?..
Tranquilos en los siguientes capítulos hablaré de listas para que podamos crear un menú como dios manda y esperar a que llegue CSS..

Capítulo 8 Listas
Bueno una lista es una manera de agrupar un conjunto de términos como por ejemplo :
Voi a comprar:
Huevos
Leche
Pan
[…]
Estos son las dos listas que más vamos a usar como veis no tiene mucha complicación

Para insertar un elemento en la columna en las dos se usaría la misma etiqueta<li></li>
Esta etiqueta delimitará un elemento de la lista a continuación pongo un código con dos ejemplos.

<ol>
<li>huevos</li>
<li>chocolate</li>
</ol>


<ul>
<li>huevos</li>
<li>chocolate</li>
</ul>
Cuando entremos en CSS usaremos la lista desordenada para hacer un menú bastante majo para nuestra web.

Capítulo 9 Imágenes

Bueno pues lo primero: si queremos meter una imagen en nuestra web es recomendable que sea o .GIF .JPEG o .PNG son los formatos de imágenes más usados y los que recomiendo.

Para insertar una imagen en la página usaremos la siguiente etiqueta:

<img src=”lugar en el que se encuentre la imagen” with=” ancho” height=”alto” alt=”simple descripción>
Para indicar los valores de ancho y alto usaremos o bien % o píxeles recomiendo el % ya que es más sencillo.
Me gustaría comentar antes de cerrar el capítulo que una web porque tenga muchas imágenes (además de ralentizar la carga) no será mejor sino lo que importa es el contenido de la web.

Tutorial css/html http://www.megaupload.com/?d=JYZZFFPN