Como usar el codigo HTML

por heavenly-dangerous Lun Dic 15, 2008 8:33 pm

Hola!!
Pues bien, debido a que el dia de ayer una personita me preguntó "¿qué es el HTML?, y para que sirve?", he decidido hacer un tutorial acerca de este codigo que sin duda hemos visto en muchas paginas...

Primero comenzaré con lo que dice la real Wikipedia:

HTML, siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje de marcado predominante para la construcció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.

Códigos HTML básicos [editar]<html>: define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML.
<head>: define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario. Como por ejemplo el título de la ventana del navegador. Dentro de la cabecera <head> podemos encontrar:
<title>: define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana
<link>: para vincular el sitio a hojas de estilo o iconos Por ejemplo:<link rel="stylesheet" href="/style.css" type="text/css">
<style>: para colocar el estilo interno de la página, ya sea usando CSS, JavaScript u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link>
<body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo <body> podemos encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: encabezados o títulos del documento con diferente relevancia.
<table>: define una tabla
<tr>: fila de una tabla
<td>: celda de datos de una tabla
<a>: Hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de pasada por medio del atributo href. Por ejemplo: <a href="http://www.wikipedia.org">Wikipedia</a> se representa como Wikipedia)
<div>: área de la página
<img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: <img src="./imagenes/mifoto.jpg" />
<li><ol><ul>: Etiquetas para listas.
<b>: texto en negrita (Etiqueta descartada. Se recomienda usar la etiqueta <strong>)
<i>: texto en cursiva
<u>: texto subrayado
La mayoría de etiquetas deben cerrarse como se abren, pero con una barra ("/") tal como se muestra en los siguientes ejemplos:
<table><tr><td>Contenido de una celda</td></tr></table>
<script>Código de un script integrado en la página</script>

Eso es lo que dice la Wiki... pero para algun@s puede resultar complicado y dificil de recordar... sobre todo si no son muy apegadas a estas cosas de computación. Asi que solo les daré unas indicaciones del HTML que cualquiera podria llegar a necesitar.

Empecemos por decir qué paginas usan código HTML:
-Myspace
-Hi5
-livejournal
Y algunos otros blogs...
esas son las páginas que frecuentemente utilizamos...

Ahora bien, supongo que han notado esto:

Como usar el codigo HTML Tutorial1

Ese molesto recuadrito que dice "photobucket", "imagenes para tu perfil", "decora tu perfil", "asdf.com", etc...
y que automáticamente te manda al bucket o a la pagina de donde obtuviste la imagen.
Sin embargo, puedes redireccionar y cambiar tu codigo HTML para que ese recuadro no aparezca mas, es una cosa realmente sencilla.

1.- Primero, debes pegar tu codigo HTML, en este caso usé el HTML de una imagen que queria pegar en el perfil de un Myspace.

Como usar el codigo HTML Tutorial2

2.- Como podrás notar, la referencia tiene el link del bucket donde se encuentra la imagen, es por eso que al darle click automaticaente entrarás a esa pagina.
Asi que si quieres que eso no pase y que tu imagen mande a tu myspace, o foro *en este caso es la imagen de promocion del foro, asi que lo conveniente es cambiar la direccion del HTML, para que al darle click, mande directo aca al foro.* solo borra esa direccion, y cambiala por la pagina a la que quieres que mande, asi:

Como usar el codigo HTML Tutorial2-1

3.- Listo, la direccion del bucket ha sido borrada y reemplazada por la direccion del foro:

Como usar el codigo HTML Tutorial3

es importante que no borres las comillas (".") ni tampoco los corchetes (< >), asi como es importante que escribas tu direccion con el http://....

Ahora bien, tambien puedes hacer que al pasar el mouse sobre la imagen tenga otro texto. Es decir, que el recuadrito amarillo que dice "photobucket" se reemplaze por lo que tu quieras. En este caso haré que la imagen diga "Inner Core Forum", lo cual es muy sencillo:

4.- Como usar el codigo HTML Tutorial4-1

Luego de todo esto, publica tu imagen y listo:

Como usar el codigo HTML Tutoria5

Puedes poner el texto que quieras para que aparezca cuando el mouse pase sobre la imagen, aqui otros ejemplos tomados de algunos livejournals cofcofmalicecofcof:

Como usar el codigo HTML Tutorial6

Dudas publicarlas como respuesta....
Saludos y espero les sea de utilidad.

:3

por Reira-chan Mar Ene 13, 2009 9:11 pm

pues como que esta muy complicado de usar
ademas eso es mas de q ue lo usen esos que hacen paginas no crees?
osea a mi como para que me serbiria? nada que ver o alomejor soy medio mensa para esas cosas de las computadoras jajajajaja igual tu tienes talento XD

Como usar el codigo HTML

Como usar el codigo HTML

Re: Como usar el codigo HTML