Bueno gente, como les habia prometido, aqui llega la segunda parte.
Si todavia no leiste el primero, anda abajo de todo que tenes el link!
Si se acuerdan del capitulo pasado, ya aprendimos a armar la estructura basica de una pagina, y a ponerle texto adentro de ella, pero la cagada es que todo el texto que colocamos es re plano, cero formato, todo chato, por mas que en el codigo veamos que hay espacios. Esto sucede porque como les habia dicho, para acomodar todos los elementos en una pagina, necesitamos utilizar etiquetas.
Algunas de las etiquetas mas utilizadas comúnmente son:
PARRAFOS
<p></p>. Esta se utiliza para organizar el texto en parrafos, por ejemplo, podriamos armar dos parrafos asi:
<html>
<head>
</head>
<body>
<p>Hola, este es el primer parrafo</p>
<p>Hola, este es el segundo parrafo.</p>
</body>
</html>
( Espero que ya no haga falta que les diga que lo tienen que guardar como .html y abrirlo con el navegador )
Traten de no hacer chiquero con el codigo html, si ustedes escriben todo el codigo en una sola linea, el navegador lo va a interpretar perfectamente, pero después, cuando el codigo sea muy largo, no van a entender un choto ustedes! Ejemplo de algo que si funciona pero es totalmente inentendible para un humano a la larga:
<html><head></head><body><p>Hola, este es el primer parrafo</p><p>Hola, este es el segundo parrafo.</p></body></html>
NEGRITA
Para poner el texto en negrita, utilizamos la etiqueta <strong></strong>, por ejemplo ( A partir de ahora voy a dejar de poner la estructura basica, pero ustedes ya saben que el contenido visible se coloca entre las etiquetas <body></body> )
<strong>Hola, esto esta en negrita</strong>
O sino:
<p>Hola, esto esta en <strong>negrita</strong> ( ahora, unicamente la palabra “negrita” esta en negrita )</p>
ENFASIS
Ahora, vamos a utilizar la etiqueta para dar énfasis a una palabra o frase, la misma es <em></em>, por ejemplo:
<p>Hola, este texto esta en un parrafo, y esta <strong>palabra</strong> esta en negrita, y tambien le voy a dar énfasis a <em>esta palabra</em></p>
Entienden como va todo? Fijense que todo el texto forma un parrafo, porque esta encerrado entre <p></p>, “palabra” esta en negrita porque esta encerrado entre <strong></strong>, y “esta palabra” tiene énfasis porque esta encerrado entre <em></em>!!!
LISTA ORDENADA
Tambien con HTML, podemos ordenar en lista, o sea, tipo 1, 2 , 3 ,4 , etc. La etiqueta utilizada es <li>, y todos los elementos de una lista se agrupan con <ul>, o sea, con <ul> indicamos que comienza un listado, con <li></li> colocamos cada elemento, y cuando termina la lista, cerramos con </ul>, por ejemplo, seguimos combinando todas las etiquetas aprendidas:
<p>Hola, este texto es un parrafo, y ahora <strong>esto va en negrita</strong> y aca <em>con énfasis</em>, y ahora armamos un listado:</p>
<ul>
<li> este es el 1er elemento, y fijense que abrimos la agrupación con UL</li>
<li>este es el segundo elemento</li>
<li>este el tercer elemento</li>
<li>este el cuarto y ultimo, y abajo vamos a cerrar el listado con UL</li>
</ul>
<p>Aca abrimos otro parrafo! Y ponemos <strong>NEGRITA!</strong></p>
TITULOS
Tambien tenemos forma de indicar titulos, o sea, titulo que se supone que es encabezado, cada encabezado tiene un nivel, nivel 1, nivel 2, nivel 3, de acuerdo a la importancia, ustedes le asignan el nivel que quieren, las etiquetas son <h1></h1>, <h2></h2>, <h3></h3>,<h4>/<h4>, Ahora el ejemplo, seguimos agregando cosas a nuestro codigo ( Para que se entienda bien todo, ya ahora voy a incluir la estructura completa, que habiamos visto al principio:
<html>
<head>
</head>
<body>
<h1>Este es el titulo!</h1>
<p>Hola, aca estamos colocando texto en un parrafo <strong>con negrita</strong> y aca <em>con énfasis</em></p>
<ul>
<li>armamos un listado</li>
<li>elemento 2</li>
<li>ultimo elemento, y cerramos el ul</li>
</ul>
<h2>Un titulo menor </h2>
<p>aca otro parrafo, no se…</p>
</body>
</html>
ESPACIOS Y LINEAS HORIZONTALES
Si queremos dejar espacios de lineas para abajo sin abrir otro parrafo, utilizamos la etiqueta <br />, esta no tiene apertura y cierre, es unica, al colocar <br /> el navegador tira el contenido una linea abajo, tambien, esta la etiqueta <hr />, esta, lo que hace es trazar una linea horizontal en toda la pagina, vamos a verla en practica:
<html>
<head>
</head>
<body>
<h1>Este es el titulo!</h1>
<p>Hola, aca estamos colocando texto en un parrafo <strong>con negrita</strong> y aca <em>con énfasis</em></p>
<p>aca escribo algo, y dejo espacio abajo con br <br /><br /><br /> cada br es un espacio, ahora voy a trazar una linea horizontal <hr />
<ul>
<li>armamos un listado</li>
<li>elemento 2</li>
<li>ultimo elemento, y cerramos el ul</li>
</ul>
<h2>Un titulo menor </h2>
<p>aca otro parrafo, no se…</p>
</body>
</html>
Bueno, esto es todo por hoy! En la proxima, vamos a terminar de ver algunas etiquetas mas, como armar tablas, y, ustedes se preguntaran, como carajo le damos color a esto no? Bueno, vamos a aprender a darle estilos a nuestra pagina!
Otros Capitulos:
Si todavia no leiste el primero, anda abajo de todo que tenes el link!
Si se acuerdan del capitulo pasado, ya aprendimos a armar la estructura basica de una pagina, y a ponerle texto adentro de ella, pero la cagada es que todo el texto que colocamos es re plano, cero formato, todo chato, por mas que en el codigo veamos que hay espacios. Esto sucede porque como les habia dicho, para acomodar todos los elementos en una pagina, necesitamos utilizar etiquetas.
Algunas de las etiquetas mas utilizadas comúnmente son:
PARRAFOS
<p></p>. Esta se utiliza para organizar el texto en parrafos, por ejemplo, podriamos armar dos parrafos asi:
<html>
<head>
</head>
<body>
<p>Hola, este es el primer parrafo</p>
<p>Hola, este es el segundo parrafo.</p>
</body>
</html>
( Espero que ya no haga falta que les diga que lo tienen que guardar como .html y abrirlo con el navegador )
Traten de no hacer chiquero con el codigo html, si ustedes escriben todo el codigo en una sola linea, el navegador lo va a interpretar perfectamente, pero después, cuando el codigo sea muy largo, no van a entender un choto ustedes! Ejemplo de algo que si funciona pero es totalmente inentendible para un humano a la larga:
<html><head></head><body><p>Hola, este es el primer parrafo</p><p>Hola, este es el segundo parrafo.</p></body></html>
NEGRITA
Para poner el texto en negrita, utilizamos la etiqueta <strong></strong>, por ejemplo ( A partir de ahora voy a dejar de poner la estructura basica, pero ustedes ya saben que el contenido visible se coloca entre las etiquetas <body></body> )
<strong>Hola, esto esta en negrita</strong>
O sino:
<p>Hola, esto esta en <strong>negrita</strong> ( ahora, unicamente la palabra “negrita” esta en negrita )</p>
ENFASIS
Ahora, vamos a utilizar la etiqueta para dar énfasis a una palabra o frase, la misma es <em></em>, por ejemplo:
<p>Hola, este texto esta en un parrafo, y esta <strong>palabra</strong> esta en negrita, y tambien le voy a dar énfasis a <em>esta palabra</em></p>
Entienden como va todo? Fijense que todo el texto forma un parrafo, porque esta encerrado entre <p></p>, “palabra” esta en negrita porque esta encerrado entre <strong></strong>, y “esta palabra” tiene énfasis porque esta encerrado entre <em></em>!!!
LISTA ORDENADA
Tambien con HTML, podemos ordenar en lista, o sea, tipo 1, 2 , 3 ,4 , etc. La etiqueta utilizada es <li>, y todos los elementos de una lista se agrupan con <ul>, o sea, con <ul> indicamos que comienza un listado, con <li></li> colocamos cada elemento, y cuando termina la lista, cerramos con </ul>, por ejemplo, seguimos combinando todas las etiquetas aprendidas:
<p>Hola, este texto es un parrafo, y ahora <strong>esto va en negrita</strong> y aca <em>con énfasis</em>, y ahora armamos un listado:</p>
<ul>
<li> este es el 1er elemento, y fijense que abrimos la agrupación con UL</li>
<li>este es el segundo elemento</li>
<li>este el tercer elemento</li>
<li>este el cuarto y ultimo, y abajo vamos a cerrar el listado con UL</li>
</ul>
<p>Aca abrimos otro parrafo! Y ponemos <strong>NEGRITA!</strong></p>
TITULOS
Tambien tenemos forma de indicar titulos, o sea, titulo que se supone que es encabezado, cada encabezado tiene un nivel, nivel 1, nivel 2, nivel 3, de acuerdo a la importancia, ustedes le asignan el nivel que quieren, las etiquetas son <h1></h1>, <h2></h2>, <h3></h3>,<h4>/<h4>, Ahora el ejemplo, seguimos agregando cosas a nuestro codigo ( Para que se entienda bien todo, ya ahora voy a incluir la estructura completa, que habiamos visto al principio:
<html>
<head>
</head>
<body>
<h1>Este es el titulo!</h1>
<p>Hola, aca estamos colocando texto en un parrafo <strong>con negrita</strong> y aca <em>con énfasis</em></p>
<ul>
<li>armamos un listado</li>
<li>elemento 2</li>
<li>ultimo elemento, y cerramos el ul</li>
</ul>
<h2>Un titulo menor </h2>
<p>aca otro parrafo, no se…</p>
</body>
</html>
ESPACIOS Y LINEAS HORIZONTALES
Si queremos dejar espacios de lineas para abajo sin abrir otro parrafo, utilizamos la etiqueta <br />, esta no tiene apertura y cierre, es unica, al colocar <br /> el navegador tira el contenido una linea abajo, tambien, esta la etiqueta <hr />, esta, lo que hace es trazar una linea horizontal en toda la pagina, vamos a verla en practica:
<html>
<head>
</head>
<body>
<h1>Este es el titulo!</h1>
<p>Hola, aca estamos colocando texto en un parrafo <strong>con negrita</strong> y aca <em>con énfasis</em></p>
<p>aca escribo algo, y dejo espacio abajo con br <br /><br /><br /> cada br es un espacio, ahora voy a trazar una linea horizontal <hr />
<ul>
<li>armamos un listado</li>
<li>elemento 2</li>
<li>ultimo elemento, y cerramos el ul</li>
</ul>
<h2>Un titulo menor </h2>
<p>aca otro parrafo, no se…</p>
</body>
</html>
Bueno, esto es todo por hoy! En la proxima, vamos a terminar de ver algunas etiquetas mas, como armar tablas, y, ustedes se preguntaran, como carajo le damos color a esto no? Bueno, vamos a aprender a darle estilos a nuestra pagina!
Otros Capitulos: