El post que buscas se encuentra eliminado, pero este también te puede interesar

Hacemos una web de verdad? Vamos...

Anuncios

Bueno, en éste post, vamos a aprender a hacer una web de verdad, una web desde 0, esa web que nos falta siempre algo para terminarla o no sabemos como arrancar..
El tutorial lo voy a dividir en 3 o 4 partes. La primer parte, osea ésta, vamos a conocer realmente cada etiqueta y sus funciones, y la vamos a poner en practica para que en el segundo tutorial no nos atrasemos y podamos ver bien profundo lo que son las hojas de estilos y dejar nuestra web casi lista, mientras que en el tercer tutorial vamos a retocar un poco la web con nuestro querido photoshop para hacer unos banners y botones (siempre manteniendo nuestra estructura báse de la web). Y en nuestro cuarto tutorial, vamos a ver un poco de php para la gente que necesite hacer de sus webs, distintos formularios para facilitar las cosas al visitante y vamos a subir nuestra página a un hosting, mientras pedimos nuestro dominio .com.ar en nic.ar.

Quiero que si están aburridos, salgan del post, que evitemos no leer algo, ya que todo lo que pongo es importante. Vamos a arrancar desde lo teórico, hasta lo practico, y cada cosa que aprendemos vamos a ponerlas en práctica cada uno en su computadora así le agarramos la mano rápido y podemos pasar al segundo tutorial y no necesito explicar cosas que ya vimos así no nos atrasamos.

Primera web y una de verdad... Allá vamos!!!



¿Que es Html?


Html, proviene de las siglas "HyperText Markup Language", es decir, "Lenguaje de marcado de Hipertexto). Ésto hace referencia al lenguaje de marcado predominante para la elaboración de páginas webs, que se utiliza para describir y traducir la estructura y la información en forma de texto, asi como para complementar el texto con objetos tales como imágenes.


¿Que necesitamos para arrancar?


Como la mayoria sabemos, para ponernos a diseñar páginas webs nos hace falta realmente poco material. En la mayoría de los equipos con windows, y en otros sistemas encontramos todos los materiales necesarios, por lo que en un principio nos alcanza y sobra.
En concreto, los materiales necesarios son un editor de textos, con el que programaremos nuestras páginas y un cliente web como Internet Explorer o Firefox, Opera, Google Chrome o cualquier navegador que nos guste y tengamos instalado. Respecto al editor de texto, en windows tenemos el famoso Bloc de Notas, así que tenemos todo lo necesario para arrancar!.



Estructura básica del Html:


Siempre para dar formato a la web, vamos a necesitar ciertos códigos, vamos a nombrarlos uno por uno y especificar para que sirven:

<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.

<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> es posible encontrar numerosas etiquetas


Etiquetas:

Tenemos muchas etiquetas en html, cada una cumple una función específica. Vamos a dar algunos ejemplos básicos y luego mostrar como funcionan:

Dentro de nuestra cabezera (<head> podemos poner las siguientes etiquetas:

<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">. Mas adelante vamos a especificar para que sirven nuestras hojas de estilos y como utilizarlas.

Dentro de nuestro cuerpo de página (<Body> podemos poner las siguientes etiquetas:

<h1> a <h6>: encabezados o títulos del documento con diferente relevancia. Mientras mas bajo sea el número que sigue de la letra "h" mayor es el tamaño de nuestro encabezado.

<table>: define una tabla. Mas adelante les voy a explicar y mostrar como se utiliza las tablas y sus respectivas filas/columnas.
<tr>: fila de una tabla.
<td>: celda de una tabla (debe estar dentro de una fila).

<div>: división 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="./imágenes/mifoto.jpg" />.

<b>: texto en negrita

<i>: texto en cursiva

<s>: texto tachado

Y muchas etiquetas más, pero quiero recordarles que, si en un principio utilizamos la etiqueta <b> para hacer algun texto o palabra en negrita, luego tenemos que cerrar dicha etiqueta de la siguiente forma: </b>. Lo que hace la barra "/", es indicar el fin de dicha etiqueta. Si no hacemos ésto, el código no tomará en cuenta cuando arranca ni donde termina.


Vamos a ver unos ejemplos para ir tomandole la mano al diseño web:

[color=#000000][color=#000000][color=#000000]<html>
    <head>
    <title> Mi primer web </title>
    </head>
    <body>
    <b> Esto es un texto en negrita </b>
    <i> Esto está en cursiva </i>
    <s> Este texto está tachado </s>
    <h1> Este encabezado tiene el primer nivel </h1>
    <h6> Este encabezado tiene el sexto nivel </h6>
    </body>
    </html>[/color][/color][/color]


Copiemos el codigo, guardemoslo bajo el nombre que querramos, pero con la extensión .html, en mi caso le voy a poner, prueba1.html, lo abrimos y vemos la estructura de nuestra web con las etiquetas que le indicamos.


Como podemos ver, nos quedó todo seguido las negritas, cursiva y el texto tachado. Para hacer un salto de linea (es como apretar enter acá), utilizamos la etiqueta <br>. Probemos!

[color=#000000][color=#000000][color=#000000]<head>
    <title> Mi primer web </title>
    </head>
    <body>
    <b><br> Esto es un texto en negrita</br> </b>
    <i><br> Esto está en cursiva </br></i>
    <s><br> Este texto está tachado </br></s>
    <h1> Este encabezado tiene el primer nivel </h1>
    <h6> Este encabezado tiene el sexto nivel </h6>
    </body>
    </html>[/color][/color][/color]


Como podemos visualizar, nuestra etiqueta <br> nos solucionó el problema.

Atributos:


¿Qué es un atributo?

Como recordarás, los elementos sirven para estructurar el contenido de todo el documento HTML e indican al navegador cómo debería presentarse el sitio web (por ejemplo, <br /> informa al navegador para que introduzca un salto de línea). En algunos elementos se puede añadir más información. Esa información extra se denomina atributo.

Ejemplo 1:

[color=#000000][color=#000000][color=#000000]<h2 style=background-color:#ff0000;>Mi amistad con HTML</h2> [/color][/color][/color]

Los atributos se incluyen siempre dentro de la etiqueta de inicio y llevan inmediatamente detrás el signo de igual ("=" con los valores de dichos atributos entre comillas ("". El punto y coma que sigue al atributo se usa para separar los diferentes comandos de estilo. Más tarde volveremos a tratar sobre este tema.

Existen muchos atributos diferentes. El primero que vas a aprender es style. Con el atributo style se puede añadir efectos de presentación a tu sitio web. Por ejemplo, un color de fondo:


Ejemplo 2:


[color=#000000][color=#000000][color=#000000]<html>
      
      <head>
      </head>

      <body style=background-color:#ff0000;>
      </body>

    </html>[/color][/color][/color]



Como podemos observar, el codigo anterior mostrará una página con fondo de color rojo.

¿Qué ocurrió para que la página apareciera en color rojo?

En el ejemplo anterior, hicimos referencia al color de fondo usando el código "#ff0000". Este es el código de color para el rojo en el sistema numérico hexadecimal (HEX). Cada color tiene su propio número hexadecimal.. Y estos son algunos ejemplos:


Blanco: #ffffff
Negro: #000000 (ceros)
Rojo: #ff0000
Azul: #0000ff
Verde: #00ff00
Amarillo: #ffff00

El código de color hexadecimal se compone de un numeral, "#", y seis dígitos (del 0 al 9) o letras (de la A a la F). Existen más de 1.000 códigos hexadecimales y no es fácil calcular qué código hexadecimal corresponde a un color específico.

También se pueden usar los nombres en inglés para los colores más comunues (white: blanco, black: negro, red: rojo, blue: azul, green: verde y yellow: amarillo).

Ejemplo 3:

[color=#000000][color=#000000][color=#000000]<body style=background-color: red;> [/color][/color][/color]


Enlaces

¿Qué necesito para crear un enlace?


Para crear enlaces se usa lo que siempre usamos al codificar HTML: un elemento. Un sencillo elemento con un atributo y podrás enlazar con cualquier cosa y con todo. Vas a ver ahora mismo un ejemplo de cómo se codificaría un enlace a Taringa.net:
Ejemplo 1:

[color=#000000][color=#000000][color=#000000]<a href="http://www.taringa.net/">Desde acá enlazamos con Taringa!</a> [/color][/color][/color]


¿Y se pueden crear enlaces internos dentro de una misma página?



También puedes crear enlaces internos dentro de una misma página; por ejemplo, una tabla de contenidos en la parte superior de la página con enlaces a cada capítulo que se encuentra más abajo. Todo lo que necesitas es usar un atributo muy útil llamado id (identification, en inglés; es decir, identificador) y el símbolo "#", conocido como numeral.

Usa el atributo id para marcar el elemento con el que quieras enlazar. Por ejemplo:


[color=#000000][color=#000000][color=#000000]<h1 id="encabezado1">Primer encabezado</h1> [/color][/color][/color]

Ahora ya puedes crear un enlace a dicho elemento usando el "Numeral" "#" en el atributo "href" del elemento a. El símbolo "#" debe ir seguido del id de la etiqueta con la que quieres enlazar. Por ejemplo:

[color=#000000][color=#000000][color=#000000]<a href="#encabezado1">Enlace con el primer encabezado</a> [/color][/color][/color]

Vamos a ver un ejemplo para que todo quede claro:

Ejemplo:


[color=#000000][color=#000000][color=#000000] <html>
      
      <head>
      </head>

      <body>

        <p><a href="#encabezado1">Enlace con el primer encabezado</a></p>
        <p><a href="#encabezado2">Enlace con el segundo encabezado</a></p>

        <h1 id="encabezado1">Primer encabezado</h1>
        <p>Texto texto texto texto</p>

        <h1 id="encabezado2">Segundo encabezado</h1>
        <p>Texto texto texto texto</p>
      
      </body>

    </html>[/color][/color][/color]


(Nota: El atributo "id" debe empezar con una letra)


¿Puedo crear enlaces a otras cosas?


También puedes crear enlaces a una dirección de correo electrónico. Se hace casi igual que cuando se crea un enlace a un documento:
Ejemplo :

[color=#000000][color=#000000][color=#000000]<a href="mailto:nuestroemail@taringa.net">Envíe un mensaje a nuestroemail en taringa.net</a> [/color][/color][/color]


Imágenes:


Es muy simple colocar imagenes a ésta altura, y lo hacemos con el siguiente código:

[color=#000000][color=#000000][color=#000000]<img src="NuestraFoto.jpg" alt="Nuestra FOTO!" />   [/color][/color][/color]

(El atributo "alt" lo que hace es que , al poner nuestro mouse sobre la imagen, saldrá el texto que pusimos nosotros.



Tablas:


Las tablas se usan cuando necesitamos mostrar "datos en formato de tabla", o sea, información que se presenta de forma lógica en filas y columnas.

¿Es díficil?


Construir tablas con HTML puede parecer, al principio, complicado, pero si no pierdes la calma y andas con ojo, en realidad es de lo más lógico: como todo en HTML.

Ejemplo 1:

[color=#000000][color=#000000][color=#000000]
    <table>
      <tr>
        <td>Celda 1</td>
        <td>Celda 2</td>
      </tr>
      <tr>
        <td>Celda 3</td>
        <td>Celda 4</td>
      </tr>
    </table>[/color][/color][/color]



¿Qué diferencia hay entre <tr> y <td>?


Como observarás en el ejemplo anterior, éste es probablemente el ejemplo más complicado de código HTML que hemos escrito hasta el momento. Vamos a desglosarlo y a explicar las diferentes etiquetas:

Para insertar tablas se usan 3 elementos diferentes:


La etiqueta de inicio <table> y la etiqueta de cierre </table> inician y finalizan la tabla. Lógico.
<tr> es la abreviatura de "table row" (es decir, fila de la tabla) e inicia y finaliza las filas horizontales. Lógico también.
<td> es la abreviatura de "table data" (es decir, datos de la tabla). Esta etiqueta inicia y finaliza cada una de las celdas que componen las filas de la tabla. Todo sencillo y lógico.

Y esto es lo que ocurre en el ejemplo 1: la tabla empieza con <table>, seguida de <tr>, que indica el inicio de una nueva fila. Se insertan dos celdas en esta fila: <td>Celda 1</td> y <td>Celda 2</td>. La fila se cierra a continuación con </tr> e inmediatemente después se inicia una nueva fila con <tr>. La nueva fila contiene dos celdas. Y por fin la tabla se cierra con </table>.

La celda 1 y la Celda 2 forman una fila, mientras que la Celda 1 y la Celda 3 forma una columna.

En el ejemplo anterior, la tabla consta de dos filas y dos columnas. Sin embargo, una tabla puede contener una cantidad ilimitada de filas y columnas.

Ejemplo 2:


[color=#000000][color=#000000][color=#000000]<table>
      <tr>
        <td>Celda 1</td>
        <td>Celda 2</td>
        <td>Celda 3</td>
        <td>Celda 4</td>
      </tr>
      <tr>
        <td>Celda 5</td>
        <td>Celda 6</td>
        <td>Celda 7</td>
        <td>Celda 8</td>
      </tr>
      <tr>
        <td>Celda 9</td>
        <td>Celda 10</td>
        <td>Celda 11</td>
        <td>Celda 12</td>
      </tr>
    </table>[/color][/color][/color]




¿Existe algún atributo para el elemento table?


Por supuesto, hay atributos. Por ejemplo, el atributo border se usa para especificar el grosor del borde de la tabla:

Ejemplo 3:


[color=#000000][color=#000000][color=#000000]<table border="1">
      <tr>
        <td>Celda 1</td>
        <td>Celda 2</td>
      </tr>
      <tr>
        <td>Celda 3</td>
        <td>Celda 4</td>
      </tr>
    </table>[/color][/color][/color]



El grosor de la tabla se especifica en píxeles.

Al igual que con las imágenes, se puede establecer el ancho de la tabla en píxeles, o, de modo alternativo, por medio de un porcentaje del ancho de la pantalla:

Ejemplo 4:

[color=#000000][color=#000000][color=#000000]<table border="1" width="30%">[/color][/color][/color]

La tabla del anterior ejemplo se mostrará en el navegador como una tabla con un ancho equivalente al 30 % de la pantalla. Pruébalo.

¿Hay algún otro atributo?


Para las tablas existen muchos atributos. Aquí mostramos dos más:

align: especifica la alineación horizontal del contenido de toda la tabla, de una fila o de una sola celda. Por ejemplo, left, center o right.
valign: especifica la alineación vertical del contenido de una celda. Por ejemplo, top, middle o bottom.

Ejemplo 5:

[color=#000000][color=#000000][color=#000000]<td align="right" valign="top">Celda 1</td>[/color][/color][/color]

¿Qué puedo insertar en las tablas?


En teoría, se puede colocar cualquier cosa dentro de una tabla: texto, enlaces, imágenes, ... Sin embargo, las tablas se usan para presentar datos en forma de tabla (es decir, datos que se pueden presentar de forma coherente en columnas y filas), así que evita colocar cosas dentro de una tabla porque quieras colocarlas una al lado de otra.

En los viejos tiempos de Internet -es decir, hace unos años-, las tablas se usaban con frecuencia como herramienta de presentación. Sin embargo, si quieres controlar la presentación de los textos y las imágenes existe un modo más Woow de hacerlo (pista: CSS). Y ésto, es lo que sigue ahora!!



Presentación (CSS)


¿No sería genial poder dar a tus páginas la presentación que se merecen?
Pues claro que sí; pero... ¿cómo?


Para la presentación de tu sitio web usa Cascading Style Sheets (CSS), es decir, hojas de estilo en cascada.
CSS se puede considerar la media naranja de HTML. Y a la hora de escribir código, no hay punto de comparación en cuanto a su situación: HTML se encarga del contenido en bruto de la página (la estructura), mientras que CSS le proporciona ese toque elegante (la presentación).

Como vimos antes, se pueden añadir estilos con CSS recurriendo al atributo style. Por ejemplo, por medio de dicho atributo se puede establecer el tamaño y tipo de fuente de un párrafo:

Ejemplo 1:

[color=#000000][color=#000000][color=#000000]
    <p style=font-size:20px;>El tamaño de este párrafo es de 20 píxeles</p>
    <p style=font-family:courier;>El tipo de letra usado en este párrafo es Courier</p>
    <p style=font-size:20px; font-family:courier;>Este párrafo combina tipo de letra 
    Courier con un tamaño de 20 píxeles</p> [/color][/color][/color]


En el ejemplo anterior hemos usado el atributo style para especificar el tipo de fuente que vamos a usar (por medio de la propiedad font-family) y el tamaño de la fuente (por medio de la propiedad font-size). Observa cómo en el último párrafo establecemos tanto el tipo de fuente como el tamaño separando ambas propiedades con un punto y coma.

Una de la características "elegantes" de CSS es la posibilidad de gestionar la presentación de manera centralizada.. En vez de usar el atributo style en cada etiqueta de inicio, se puede indicar al navegador, de una sola vez, cómo tiene que presentar el texto en la página:

Ejemplo 2:

[color=#000000][color=#000000][color=#000000]
    <html>
        <head>
            <title>Mi primera página con estilos CSS</title>    
            
            <style type="text/css">
                h1 {font-size: 30px; font-family: arial;}
                h2 {font-size: 15px; font-family: courier;}
                p {font-size: 8px; font-family: "times new roman";}
            </style>
            
        </head>
        <body>
            <h1>Mi primera página con estilos CSS</h1>
            <h2>Bienvenidos a mi primera página con estilos CSS</h2>
            <p>Aquí podés ver cómo funciona CSS</p>
        </body>
    </html>[/color][/color][/color]



¿Qué más puedo hacer con CSS?

CSS se puede usar para muchas más cosas que especificar tipos y tamaños de fuente. Por ejemplo, se puede añadir colores y fondos. Acá te dejo algunos ejemplos para que experimentes con ellos:


[color=#000000][color=#000000][color=#000000]<p style=color:green;>Texto de color verde</p>
    <h1 style=background-color: blue;>Encabezado de nivel 1 con fondo azul</h1>[/color][/color][/color]



¿CSS sólo trata de colores y tipos de fuente?


Aparte de añadir presentación relativa a colores, tipos de fuente, etc., CSS también se puede usar para controlar la configuración de la página y la presentación de la misma (márgenes, elementos flotantes, alineación, anchura, altura, etc.). Al establecer los diferentes elementos con CSS podrás presentar tus páginas de forma elegante y precisa.

Ejemplo 3:


[color=#000000][color=#000000][color=#000000]<p style=padding:25px;border:1px solid red;>Me encanta CSS</p>[/color][/color][/color]


Quiero agradecer a la comunidad: http://www.taringa.net/comunidades/webdesign/ por dar la oportunidad de aprender y estár para lo que se necesite.


Luego subiré imagenes para que quede mas claro y se les facilite el entendimiento.
Bueno, hay muchas cosas mas por aprender, pero quiero que pongan en práctica todo lo que vimos, que pronto empezamos a hacer nuestra primera web de verdad, vamos a evitar lo muy básico que siempre se vive posteando porque seguramente la tienen mas que clara, así que , practiquen con ésto, en especial con las tablas, que en unos días subo como hacer una web decente y luego nos metemos un poquito en photoshop para hacer nuestros banners, botones, etc así realmente queda como una verdadera y hermosa web!
Quiero que cualquier duda que tengan, pregunten que la vamos a responder, no tengan miedo a equivocarse que ninguno nació sabiendo, lo que no saben o no les sale solo preguntan y yo les voy a responder. Solo me queda decirles que practiquen, intenten hacer de todo ésto, una web aplicando todo lo básico que vimos, por ejemplo, hagamos una web a base de tablas, y que en una tenga una foto alineada a la derecha, con un encabezado con enfasis, etc, etc, etc...
Saludos a todos!

Nos vemos pronto!!!!

Anuncios

8 comentarios - Hacemos una web de verdad? Vamos...

XPecTrum +1
te dejo +10 le pones las imágenes y queda espectacular suerte.
Lk22_ +1
reco +5 good post
TheXnaKe +1
Manso loco, ahora le voy a cerrar el culo al decano de mi facultad!!!