[How-To] ¿Cómo hacer una página web? (II)
Escrito por Penguino - December 5, 2008 – 12:56 pm -Bueno, vuelvo con este tutorial. Que será llevará mucho tiempo, pero no tanto como el que me llevó a mí aprender 2 lenguajes web (aproximadamente un año sin ayudas, solo Googleando). Busco resumir toda mi experiencia y explicar de la forma más sencilla posible. Yo sé que al intentar hacer esto sencillo, los pros dirán que estoy dando datos imprecisos, pero yo les respondo, los noobs necesitan que todo vaya por el camino más fácil, agradable, y no-aburrido. Después de esto, empiezo.
Ya expliqué la estructura básica del HTML, que como su nombre lo dice, es un lenguaje basado en etiquetas. Hoy aprenderemos las etiquetas básicas.
Las etiquetas básicas se encargan de darle el formato al texto que incluiremos en nuestra web. Así, podremos hacer las letras grandes, o bajar renglones, o centrar el texto…
Las cabeceras (o títulos)
Su nombre lo dice, los títulos. El nombre de la etiqueta es , donde el * es el nivel de la cabecera. Me explico. El <h1> es el título principal, el
<h2>es el título secundario, <h3>es el título terciario…. así hasta llegar al
<h6>, que es el título más pequeño que se puede conseguir.
Asi, si escriben
<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
Les sale un
Título 1
Título 2
Título 3
Bueno, ustedes entienden.
Los párrrafos
Verán, un documento HTML ignora todos los espacios y saltos de línea que vayan en el código, adí que un
Hola a todos
Esta es mi primera
página Web
Se mostrará sin espacios ni saltos de línea y se verá como un
Hola a todos Esta es mi primera página Web.
Y porqué ocurre esto? Porque el código HTML fue pensado así para evitar lagunas de código y hacer más fácil su interpretación. Con eso podemos convertir un enredado código de estos
<html><head><title>Hola, esta es mi primera página web</title></head></body><h1>Hola<h1><h2>Esto es un titulo</h2></body></html>
A un organizado
<html>
<head>
<title>Hola, esta es mi primera página web</title>
</head>
<body>
<h1>Hola</h1>
<h2>Esto es un título</h2>
</body>
</html>
Y el orden se nota. Asi que para insertar saltos de línea usamos el <br />, para que un
Hola
<br/>
Esto es mi página web
Se convierta en un
Hola
Esto es mi página web
Si no usamos el <br/>, ocurre esto
Hola Esto es mi página web
Ahora, si lo que quieren es separar párrafos, usen la etiqueta <p>. Así, si escriben
<p>Esto es mi párrafo de prueba, con mucho texto en él. Mucho, mucho, mucho texto de relleno, porque esto es un párrafo de prueba.</p>
<p>Este es el segundo párrafo de prueba, y escribo este porque simplemente el Lorem Ipsum está repetido por la web, y además no lo encontré Googleando</p>
Se volverá en un
Esto es mi párrafo de prueba, con mucho texto en él. Mucho, mucho, mucho texto de relleno, porque esto es un párrafo de prueba.
Este es el segundo párrafo de prueba, y escribo este porque simplemente el Lorem Ipsum está repetido por la web, y además no lo encontré Googleando
Los comentarios
Muchas veces los programadores web queremos dejarle claro a otra persona que vaya a editar el código que no debe hacer algo, que no debe modificar algo, que aquí empieza tal sección… y queremos hacer eso dentro del código. Para ello usamos las etiquetas especiales <!– y –>, que nos ayudan en esto. Así, si queremos escribimos algo así
<html>
<head>
<title>
<!– Aquí empieza el título de mi página web –>
Hola, esta es mi página web
<!– Aquí terminó el título de mi página web –>
</title>
</body>
<!–Aquí empieza el código, POR FAVOR NO MODIFIQUES NADA A PARTIR DE ACÁ –>
<h1>Título 1</h1>
<h2>Título 2</h2>
</body>
</html>
Nos despliega
Y como pueden ver, no se ven los comentarios. Eso es lo importante, que no se vean, sólo en el código.
Bueno, creo que es todo por hoy en el tutorial, así que hasta una próxima ocasión.
Otras partes del tutorial
Tags: HOW-TOs, Tutoriales, Web
Archivado en General, HOW-TOs, Tutoriales, Web | 1 Comentario »
Loading ...
Penguino on 
December 10th, 2008 at 1:42 pm
[...] [How-To] ¿Cómo hacer una página web? (III) Escrito por Penguino – December 10, 2008 – 1:41 pm – En el anterior post vimos el formato esencial del texto en HTML. Ahora profundizaremos un poco sobre el formato de texto. [...]