Resultados 1 al 9 de 9

Tema: MiniTutorial HTML (Exclusivo)

  1. #1 MiniTutorial HTML (Exclusivo) 
    Avanzado
    Fecha de ingreso
    Jun 2006
    Ubicación
    Donde vivo
    Mensajes
    338
    Descargas
    0
    Uploads
    0
    Hola a todos,
    No se si tengo mi sitio por aqui ni tampoco si quiero uno Solo que llevo un tiempo sin aparecer y que ahora me interesan mas otro tipo de cosas. Eso si, creo que ahora mi ética esta mas clara y tengo claro que es importante y que no lo es tanto.
    Pero aunque me haya ausentado un tiempo (de vez en cuando miro el foro), con lo que me gusta este tipo de lenguage (por su sencilleza), no he podido resistirme a escribir este MiniTutorial de HTML.

    Empezamos:

    HTML es un lenguage que se escribe mediante etiquetas. Una etiqueta se escribe con esas flechitas (<>) y siempre tiene apertura y fin (bueno, miento, hay algunas etiquetas que no se cierran pero ya lo veremos mas adelante). Este es el formato que se usa: <etiqueta> y las cerraduras se ponen con una barra (Shift + 7, normalmente), ejemplo: apertura, <etiqueta> y cerradura, </etiqueta>. Entero se usaria asi:
    <etiqueta>
    lo que se quiera introducir en ella
    </etiqueta>
    Nota: en HTML los saltos de linea son insignificantes, se puede escribir todo en una linea como cada palabra en una (ya veremos los saltos de linea mas adelante).
    Al programar HTML tenemos que tener en cuenta que el texto tiene que tener forma de piramide. Me explico, si pusieramos cinco espacios antes de cada etiqueta y en las etiquetas que estan dentro diez y asi consecutivamente, tendria que parecer una piramide hacia la derecha. Es decir, que si una etiqueta empieza dentro de otra, tambien tiene que acavar alli. Este seria el uso erroneo:
    <etiqueta1><etiqueta2>textoooo</etiqueta1></etiqueta2>
    Tendria que ser asi:
    <etiqueta1><etiqueta2>textoooo</etiqueta2></etiqueta1>
    Estructura básica de una pagina HTML
    Una página HTML tiene unas etiquetas básicas, que son: <html>, <head> y <body>. Sin andarme con chapas, alli va un ejemplo:
    <html>
    <head>
    </head>
    <body>
    </body>
    </html>
    Como abreis podido fijaros esto es muy complicado (es coña) y este codigo es una pagina en blanco, es decir, tiene etiquetas pero le falta el contenido. Expliquemos esas etiquetas:

    - <html>:
    Tooooooodo el contenido de la pagina ira alli dentro. Hay algunas etiquetas que se escriben fuera, pero no aparecen visiblemente en la pagina. Todo el resto de etiquetas estaran dentro de esta etiqueta madre.

    - <head>:
    Digamos la cabeza de la página. Alli meteremos el título, metas (preparación para buscadores) etc. El que siempre se pone es el título, que va entre etiquetas <title> (con su respectiva cerradura: </title>). El resto ya los aprenderemos mas adelante.

    - <body>:
    Si head es la cabeza, este será el cuerpo de la página. Dentro meteremos todo el contenido visible en ella: texto, imagenes etc. Claro que siempre hay exepciones, como por ejemplo JavaScript, que puede escribirse en head y enlazarse desde body.

    Pues con eso tenemos lo suficiente como para escribir nuestra propia página con texto, tooooodo el texto que queramos Desde un chiste hasta la biblia Por ejemplo:
    <html>
    <head>
    <title>Mi biografia (aqui pondreis el titulo que querais)</title>
    </head>
    <body>
    Naci el diez de mayo de...
    Este sitio es para poner todo el texto que queramos, escribiendolo o pegandolo directamente (el formato usado en programas para escribir como el tipo de letra, tamaño etc. no se copiara aqui, hay que hacerlo mediante etiquetas).
    </body>
    </html>
    Dentro de <head></head>
    Aqui os anunciaré y explicaré brevemente las etiquetas básicas que se usan dentro del head.

    - <title>:
    Como ya os he esplicado anteriormente, entre dentro de esta etiqueta se pone el titulo que aparecera en la parte superior del navegador.

    - <script>:
    Aqui se ponen los codigos de otros lenguages de tipo script, por ejemplo javascript, que seria asi:
    <script type="javascript [versión]">
    el codigo javascript
    </script>
    Donde pone javascript se pondria el lenguage que vas a usar.

    - <meta>:
    Esta etiqueta se usa para preparar la web para buscadores usando palabras clabe o descripción. Esta seria la sintaxis con la descripción:
    <meta name="el nombre del metado" content="la descripción de la página" lang="el idioma de la pagina en el siguiente formato: ES, FR etc.">
    Y esta con palabras clave:
    <meta name="el nombre de tu metado" content="las palabras clabe separadas por coma">
    Nota: cualquiera puede pensar que se puden poner buenas palabras clabe para atraer a toda la gente, pero los buscadores tienen filtros para evitar esto. El mas utilizado es el que comprueva que las palabras clabe aparezcan en la página.

    Dentro de <body></body>
    Aqui va todo lo que es imágenes, formateo de texto etc.
    Tambien podemos ponerle un fondo a la página. Para poner una imágen de fondo usar el formato siguiente:
    <body background="la imagen en .jpg o en .gif"></body>
    Y para poner un color de fondo este otro:
    <body bgcolor="#el color en hexadecimal"></body>
    - <img>:
    Esta etiqueta es para insertar imágenes. Se usa de la siguiente manera:
    <img src="direccion de la imagen .jpg o .gif">
    - <b>:
    Esta etiqueta es para poner un texto en negrita. Se usa de la siguiente manera:
    <b>texto que se quiera poner en negrita</b>
    - <u>:
    Esta etiqueta es para subrayar un texto. Se usa de la siguiente manera:
    <u>texto que se quiera subrayar</u>
    - <i>:
    Esta etiqueta es para poner un texto en cursiva. Se usa de la siguiente manera:
    <i>texto que se quiera poner en cursiva</i>
    - El alineado:
    <p style="text-align:center;">El texto con este atributo aparecerá centrado.</p>
    <p style="text-align:left;">El texto con este atributo aparecerá
    alineado a la izquierda.</p>
    <p style="text-align:right">El texto con este atributo aparecerá
    alineado a la derecha.</p>
    <p style="text-align:justify">El texto con este atributo aparecerá justificado, es decir, con los márgenes alineados a derecha e izquierda.</p>
    - El color del texto:
    <p style="color:#el color en hexadecimal">el texto que se desee escribir en ese color</p>
    - El tamaño del texto:
    Para esto se pueden usar cabeceras. Desde el <h1> (el mas grande) hasta el <h6> (el mas pequeño). Esto iria asi:
    <h2>el texto que se quiera introducir en ese tamaño</h2>
    - Los enlaces:
    Los enlaces se hacen para ir a otra página, la etiqueta usada es <a href>. Por ejemplo:
    <a href="la dirección de la otra página">el texto que quieras que aparezca como enlace</a>
    Colavoración
    Este apartado es para deciros que como es normal no habre puesto todo, asi que os pido porfavor que si veis algo que falta o una información suplementaria lo posteeis y actualizaré el post. Asi elte tutorial dejara de ser mini y podra conseguir un pequeño puesto fijo en este foro Pensad en lo feliz que sera...
    Ya publicaré aqui los nombres de los colavoradores y gracias por adelanto.


    Pues solo me queda saludaros y recordaros que podeis copiar este texto y pegarlo en cuantas páginas querais, porque solo es información y no es propiedad de nadie
    Última edición por rat; 03-06-2008 a las 20:18
    Ojo por ojo y el mundo se quedará ciego.
    Citar  
     

  2. #2  
    Moderador Global
    Fecha de ingreso
    Aug 2005
    Mensajes
    6.280
    Descargas
    7
    Uploads
    0
    Muy buena introducción, simple y concisa.

    Claro que tienes aquí tu sitio! Y claro que la vida es cuestión de prioridades.

    Me alegra leerte.

    Salu2


    Keep on Rollin'

    . . . . . . . . . . . . . . . . . . . .
    [[ NORMAS DEL FORO ]]
    . . . . . . . . . . . . . . . . . . . .
    __________
    Citar  
     

  3. #3  
    Moderador HH
    Fecha de ingreso
    Nov 2006
    Mensajes
    1.516
    Descargas
    7
    Uploads
    0
    Hey Rat!! Cuanto tiempo sin leerte amigo!

    Me alegro de que vuelvas de vez en cuando con Temas de este calibre
    Muy bueno el Tuto, estara muy bien para aquellos que quieran iniciarse en la programacion por etiquetas.


    Un saludo

    PD: Por si no me reconoces (es que cambie de nombre) antes era [Blu]Raid
    Mess with the best, die like the rest.


    Hazle a los demas... antes de que te hagan a ti.
    Citar  
     

  4. #4  
    Co-Admin HackHispano.com Avatar de clarinetista
    Fecha de ingreso
    Jan 2004
    Ubicación
    HackHispano/SM
    Mensajes
    7.690
    Descargas
    30
    Uploads
    8
    Creo que es un tema que puede ayudar a muchos noveles en la programacion web.
    Lo fijo.
    Bienvenido de nuevo rat y piensa que no es cuestión de si te gusta un bar o no.
    Te gusta el ambiente que hay en el mismo.
    Un saludo
    Citar  
     

  5. #5  
    Avanzado
    Fecha de ingreso
    Jun 2006
    Ubicación
    Donde vivo
    Mensajes
    338
    Descargas
    0
    Uploads
    0
    Cita Iniciado por j8k6f4v9j Ver mensaje
    Me alegra leerte.
    Y a mi ser leido
    Cita Iniciado por RaidMan Ver mensaje
    Hey Rat!! Cuanto tiempo sin leerte amigo!
    Y yo sin ser leido (otra vez)
    Cita Iniciado por RaidMan Ver mensaje
    PD: Por si no me reconoces (es que cambie de nombre) antes era [Blu]Raid
    Sisi, claro que te reconozco, cambiaste de nombre justo despues de terminar el reto hacker ese, jej.
    Cita Iniciado por clarinetista Ver mensaje
    Bienvenido de nuevo rat y piensa que no es cuestión de si te gusta un bar o no.
    Te gusta el ambiente que hay en el mismo.
    En eso tienes razon, aunque no te guste o no interese mucho el tema de algun sitio (como por ejemplo de este foro), puedes quedarte porque te gusta el ambiente

    En cuanto a la colaboración, si queda asi y puede ayudar a alguien, bien, y si alguien aporta algo, pues mejor

    Salu2.

    PD:
    ¿Porque es exclusivo? ¿Porque no me conecto mucho?
    Ojo por ojo y el mundo se quedará ciego.
    Citar  
     

  6. #6  
    Co-Admin HackHispano.com Avatar de clarinetista
    Fecha de ingreso
    Jan 2004
    Ubicación
    HackHispano/SM
    Mensajes
    7.690
    Descargas
    30
    Uploads
    8
    Joder, exclusivo de HH, hecho por rat
    Citar  
     

  7. #7  
    Iniciado
    Fecha de ingreso
    Jun 2008
    Ubicación
    madrid
    Mensajes
    2
    Descargas
    1
    Uploads
    0
    gracias por el aposte
    Citar  
     

  8. #8  
    Iniciado
    Fecha de ingreso
    Sep 2009
    Mensajes
    4
    Descargas
    0
    Uploads
    0
    Gracias tio, nunca me dio por mirar un tuto de esto pero la verdad es que te lo as currado ademas esta muy claro todo, gracias por el aporte, ...
    Citar  
     

  9. #9  
    Moderador HH
    Fecha de ingreso
    Dec 2001
    Ubicación
    España
    Mensajes
    834
    Descargas
    2
    Uploads
    0
    Muy buenas Rat(aunque llegue con más de un año pico de retraso), no quería dejar de comentar que está bien como introducción básica. Aunque yo me centraría en XHTML 4.01 que mucho más actual y flexible y además es muy parecido. O sino al menos haría una mención especial por si alguien se quiere tomar en serio el tema que sepa qué tiene que buscar.

    También le daría especial importancia a que los estilos no se deben añadir en las etiquetas sino usando hojas de estilo (muy importante).
    Eso aumentaría un poco el tutorial, pero sería más completo.

    Salu2
    Normas Del Foro | En la comunidad ayudamos a resolver problemas, solo pedimos paciencia y cabeza.
    Más información sobre mi: Raúl Jiménez
    Citar  
     

Temas similares

  1. Respuestas: 0
    Último mensaje: 09-11-2013, 16:19
  2. Respuestas: 0
    Último mensaje: 13-11-2008, 17:44
  3. PHP y HTML
    Por Deskicio en el foro PROGRAMACION WEB
    Respuestas: 2
    Último mensaje: 05-02-2008, 18:40
  4. Html
    Por SUPREMO en el foro APLICACIONES
    Respuestas: 5
    Último mensaje: 03-09-2006, 15:59
  5. html
    Por shok en el foro PROGRAMACION WEB
    Respuestas: 2
    Último mensaje: 24-02-2003, 23:27

Marcadores

Marcadores

Permisos de publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •