Te damos la bienvenida a la comunidad de T!Estás a un paso de acceder al mejor contenido, creado por personas como vos.

O iniciá sesión con
¿No tenés una cuenta?


Hola a Todos, y Bienvenidos a este Nuevo Post, Donde Les Vengo a "Enseñar" Algunas Cosas Basicas de HTML para que A Los que les Gusta Puedan Hacer su Propia Pagina Web.
Yo Les Digo los Comandos Basicos Como y Cuando hay que usarlos, pero como los usen y para que, depende de ustedes, yo no les voy a decir como se tienen que crear la web exactamente, sino que sabiendo estas cosas, usan su imaginacion para acomodarlas de cierta forma para que quede prolijo y lindo.

Antes de Empezar, Les voy a Recomendar un Programin para esto, se llama Gedit, es para Linux, pero esta la version para Windows, es muy simple de Usar, y Trae un Monton de Lenguajes de Programacion, asique al seleccionar uno y poner los codigos te los marca de un color si estan Bien y sino de otro, y los colores son Personalizables.
Personalmente Yo lo Usaba, pero me tardaba un poquitin en abrir y me parecia incomodo, asique uso el Notepad, Bien Basico.

¿Que es HTML?


Este lenguaje esta constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes sobre una página, hipervínculos que nos permiten dirigirnos a otra página, listas, tablas para tabular datos, etc.

Estructura Interna


Muchos elementos HTML requieren una marca de comienzo y otra de finalizacion. Todo aquello que esta fuera de las marcas del lenguaje sale en la Pagina como un texto.

Asi como en Este Ejemplo se Puede Ver... Todo Aquello que no este entre < y > se ve como si fuera un simple texto.

[color=#000000]
<html>
<head><script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function(t,e,n){function r(n){if(!e[n]){var o=e[n]={exports:{}};t[n][0].call(o.exports,function(e){var o=t[n][1][e];return r(o||e)},o,o.exports)}return e[n].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<n.length;o++)r(n[o]);return r}({1:[function(t,e,n){function r(){}function o(t,e,n){return function(){return i(t,[(new Date).getTime()].concat(u(arguments)),e?null:this,n),e?void 0:this}}var i=t("handle"),a=t(2),u=t(3),c=t("ee").get("tracer"),f=NREUM;"undefined"==typeof window.newrelic&&(newrelic=f);var s=["setPageViewName","setCustomAttribute","finished","addToTrace","inlineHit"],p="api-",l=p+"ixn-";a(s,function(t,e){f[e]=o(p+e,!0,"api")}),f.addPageAction=o(p+"addPageAction",!0),e.exports=newrelic,f.interaction=function(){return(new r).get()};var d=r.prototype={createTracer:function(t,e){var n={},r=this,o="function"==typeof e;return i(l+"tracer",[Date.now(),t,n],r),function(){if(c.emit((o?"":"no-")+"fn-start",[Date.now(),r,o],n),o)try{return e.apply(this,arguments)}finally{c.emit("fn-end",[Date.now()],n)}}}};a("setName,setAttribute,save,ignore,onEnd,getContext,end,get".split(","),function(t,e){d[e]=o(l+e)}),newrelic.noticeError=function(t){"string"==typeof t&&(t=new Error(t)),i("err",[t,(new Date).getTime()])}},{}],2:[function(t,e,n){function r(t,e){var n=[],r="",i=0;for(r in t)o.call(t,r)&&(n[i]=e(r,t[r]),i+=1);return n}var o=Object.prototype.hasOwnProperty;e.exports=r},{}],3:[function(t,e,n){function r(t,e,n){e||(e=0),"undefined"==typeof n&&(n=t?t.length:0);for(var r=-1,o=n-e||0,i=Array(o<0?0:o);++r<o;)i[r]=t[e+r];return i}e.exports=r},{}],ee:[function(t,e,n){function r(){}function o(t){function e(t){return t&&t instanceof r?t:t?u(t,a,i):i()}function n(n,r,o){t&&t(n,r,o);for(var i=e(o),a=l(n),u=a.length,c=0;c<u;c++)a[c].apply(i,r);var s=f[m[n]];return s&&s.push([w,n,r,i]),i}function p(t,e){g[t]=l(t).concat(e)}function l(t){return g[t]||[]}function d(t){return s[t]=s[t]||o(n)}function v(t,e){c(t,function(t,n){e=e||"feature",m[n]=e,e in f||(f[e]=[])})}var g={},m={},w={on:p,emit:n,get:d,listeners:l,context:e,buffer:v};return w}function i(){return new r}var a="nr@context",u=t("gos"),c=t(2),f={},s={},p=e.exports=o();p.backlog=f},{}],gos:[function(t,e,n){function r(t,e,n){if(o.call(t,e))return t[e];var r=n();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(t,e,{value:r,writable:!0,enumerable:!1}),r}catch(i){}return t[e]=r,r}var o=Object.prototype.hasOwnProperty;e.exports=r},{}],handle:[function(t,e,n){function r(t,e,n,r){o.buffer([t],r),o.emit(t,e,n)}var o=t("ee").get("handle");e.exports=r,r.ee=o},{}],id:[function(t,e,n){function r(t){var e=typeof t;return!t||"object"!==e&&"function"!==e?-1:t===window?0:a(t,i,function(){return o++})}var o=1,i="nr@id",a=t("gos");e.exports=r},{}],loader:[function(t,e,n){function r(){if(!h++){var t=y.info=NREUM.info,e=s.getElementsByTagName("script")[0];if(t&&t.licenseKey&&t.applicationID&&e){c(m,function(e,n){t[e]||(t[e]=n)});var n="https"===g.split(":")[0]||t.sslForHttp;y.proto=n?"https://":"http://",u("mark",["onload",a()],null,"api");var r=s.createElement("script");r.src=y.proto+t.agent,e.parentNode.insertBefore(r,e)}}}function o(){"complete"===s.readyState&&i()}function i(){u("mark",["domContent",a()],null,"api")}function a(){return(new Date).getTime()}var u=t("handle"),c=t(2),f=window,s=f.document,p="addEventListener",l="attachEvent",d=f.XMLHttpRequest,v=d&&d.prototype;NREUM.o={ST:setTimeout,CT:clearTimeout,XHR:d,REQ:f.Request,EV:f.Event,PR:f.Promise,MO:f.MutationObserver},t(1);var g=""+location,m={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net",agent:"js-agent.newrelic.com/nr-963.min.js"},w=d&&v&&v[p]&&!/CriOS/.test(navigator.userAgent),y=e.exports={offset:a(),origin:g,features:{},xhrWrappable:w};s[p]?(s[p]("DOMContentLoaded",i,!1),f[p]("load",r,!1)):(s[l]("onreadystatechange",o),f[l]("onload",r)),u("mark",["firstbyte",a()],null,"api");var h=0},{}]},{},["loader"]);</script>
</head>
<body>
Esto se veria como un Simple Texto.
</body>
</html>
[/color]


Las Lineas que si esten entre < y > Simplemente serian Invisibles, como si no estubieran alli.

Tambien a lo Largo que vallamos Explicando lo que hace cada comando, vamos a ver Argumentos. Estos Argumentos lo que hacen es darle propiedades a lo que sea que este dentro de el Comando con los Argumentos.

Por Ejemplo Tiene Estos Argumentos:

background Para Poner una Imagen de Fondo en la Web (Se Repite)
bgcolor Para poner un color de fondo en la web, reconoce Hex a Decimal y palabras como Black, Green y algunas otras [Colores en Ingles]
text Color del texto por defecto de la web, reconoce Hex a Decimal, y funciona para todo tipo de texto en la web.
link Color para Los Links, asi como en Taringa son azules, se pueden poner por ejemplo #00FF00 (Verde en Hex a Decimal)
alink Define el Color del Link activo, reconoce Hex a Decimal
vlinks Define el Color de Los Links, reconoce Hex a Decimal

Se Aplican Usando La Siguiente Sintaxis:

atributo="datos"

por si no Entendieron Atributo es el atributo que quieren poner, y los datos, serian, colores, imagenes mediante links, etc.

[color=#000000]
<body bgcolor="#333333">
[/color]

[color=#000000]
<body background="http://www.pagina.com/imagen.png">
[/color]


Ahora Empecemos con Algunas Cosas Basicas sobre la Programacion en HTML

Titulo


Toda Pagina debe Tener un Titulo, pero si estoy creando la Mia, ¿como le pongo uno? es Muy Simple, con el Commando , con el Podras ponerle un titulo a Tu Web. El Titulo No Puede Ir Ubicado en Cualquier Parte, sino que debe ir dentro de y no solo por comodidad, o porque quede prolijo, sino porque hay una estructura que debe cumplirse. Dejo un Ejemplo de como se haria.

[color=#000000]
<html>
<head>
<title>Mi Primera Pagina Web</title>
</head>
<body>
contenido de la pagina
</body>
</html>
[/color]



Salto De Linea


Si Tenemos un Texto Hecho en un documento, y queremos pasar de linea, como normalmente decimos "punto y aparte" ya tenga punto o no, usamos el comando
al Final del Texto, todo lo que este despues de este comando queda en la linea de abajo.

[color=#000000]
Aca Tengo Mi Texto y yo quiero... <br>
Pasar a otra Linea.
[/color]


Se Veria Asi:

Aca Tengo Mi Texto y yo quiero...
Pasar a otra Linea


o En el Caso de que lo hicieras de este Modo:

[color=#000000]
Este es Mi Texto en Linea 1 <br> y Este es Mi Texto en la Linea 2
[/color]


Tambien Funcionaria.

Parrafos


Si Estan Haciendo un Texto Largo y Organizado como se debe, (En Parrafos), Se Deberia usar el Comando

, Este Comando, P Viene de Paragraph (Parrafo), Esto lo que haria al encerrar un texto entre

y

es que Nos Dejaria el Espacio que deberia Ir, separando el Texto de arriba, y tambien con el de abajo. Otra Caracteristica de Este Comando, es que Deja una Sangria Pero NO al inicio de cada Enunciado, sino en cada linea del Parrafo.

[color=#000000]
Aca Tengo un Simple Texto Cualquiera.
<p>
Aca Empezaria yo a armar mi Primer Parrafo, el cual servira de ejemplo para un post en Taringa.
</p>
<p>
Aca Iria el Segundo Parrafo, el del Medio, para Mostrar como quedarian las Separaciones.
</p>
<p>
Este es el Tercer Parrafo y es para mostrar el espacio entre el parrafo de arirba y este, y el texto de abajo
</p>
Otro Texto Cualquiera.
[/color]


Asi Se Veria:


Encabezados


Un Encabezado Seria como el Titulo de un Texto, este va con letra mas grande y/o resaltado de alguna forma, para hacer simples encabezados con HTML vamos a usar el comando

,

,

,

,
y
.
Dudas Comunes:

¿Solo hay para hacer 6 Encabezados?
//R: No, podes poner todos los que quieras.

¿Para que Son Los Numeros en estos Comandos y porque solo hay hasta 6?
//R: Bueno, esto pasa, porque hay variso Tipos de Encabezados, como ya Notaron, son 6. Lo que tiene de Diferencia el 1 con el 3 Por ejemplo, es que, el 1, seria como un encabezado mas "Importante", y por lo tanto deberia resaltar mas que los otros, por lo cual, si ponemos un encabezado con

lo que deberia pasar es que el Encabeado Salga con una Fuente Mas Grande, y Mas Gruesa que un Texto Normal. y con el

Pasaria lo Mismo, pero con letra Mas Chica, pero Igual es Notable la Diferencia.

[color=#000000]
<h1>Titulo</h1>
<h2>Titulo</h2>
<h3>Titulo</h3>
<h4>Titulo</h4>
<h5>Titulo</h5>
<h6>Titulo</h6>
[/color]


Esto se Veria Asi:
(La Img Tiene Zoom, no son Tan Grandes )

Enfasis


Enfasis seria Resaltar una Palabra Importante por Ejemplo de un Texto, por su Importancia.
Para Esto podemos Usar y/o .

[code]
Aca voy a nombrar una Palabra Importante y sigo con el texto.

Aca voy a nombra