-------------------- INTRODUCCION -------------------
Hola, este es la 2° parte del curso de html y ahora vamos a ver otras herramientas para complementar con las que vimos en el post anterior
1º PARTE:
--------------------- LISTAS --------------------
Existen dos tipos de listas:
- Las ordenadas
- Las no ordenadas
Listas ordenadas:
Las listas ordenadas son, simplemente las que están enumeradas.
Comenzamos creándola con la etiqueta <ol></ol>, esto lo que haces es decirle a la pagina que vamos a empezar a enumerar una lista, luego hay que especificar cada ítem con la oración que queramos que tenga este. Para esto ultimo usaremos dentro de la lista, las etiquetas <li>"Acá va el texto del ítem"</li>, usaremos una etiqueta de estas para cada ítem que queramos en nuestra lista ordenada.
<ol>
<li>Argentina</li>
<li>Uruguay</li>
<li>Brasil</li>
</ol>
Listas no ordenadas:
Ahora, ¿que pasa si no queremos enumerar cada ítem, si no solo ponerle viñetas a cada una? pues entonces usamos las listas no ordenadas. lo bueno de estas es que funcionan igual que las ordenadas, con la única diferencia de que, en vez de usar <ol></ol> para crear la lista, usaremos<ul></ul>, después es todo exactamente igual.
<ul>
<li>Huracan</li>
<li>Belgrano</li>
<li>San Martin de San Juan</li>
</ul>
Aca va un ejemplo de como quedaría cada una.
--------------------- ESTILOS PARA LAS LETRAS --------------------
Como te había contado en el post anterior HTML es el esqueleto de la pagina y CSS vendría a ser la piel de esta, sin embargo podemos darle algo de estilo a las palabras que vayamos escribiendo sin tener que preocuparnos todavía por crear un archivo CSS. Vamos a aprender algunas cosas para que cuando empecemos a aprender CSS se nos haga mucho mas fácil.
Comentarios
Los comentarios nos sirve a los desarrolladores para recordarnos ciertas cosas, ya sea para recordar para que sirve el código debajo del comentario, o para remarcar algo. Estos solo van a estar visibles para nosotros mientras estamos creando nuestra pagina en el editor de texto, no lo va a ver nadie que visite la pagina porque justamente son solo comentarios.
para hacer uno usaremos la sintaxis:
<!-- "Acá va el comentario" -->
Tamaño de las letras
Para este ejemplo recorda que <p></p> y <h1></h1> son etiquetas de inicio y de cierre para párrafos y títulos respectivamente.
Vamos a cambiar el tamaño de el texto, usando el atributo style(este atributo también nos sirve para el color de las letras, la tipografía, el fondo, etc. como vamos a ver abajo).
Esta es su sintaxis:
style = "font-size: 12px"
Advertencia!!!:No te olvides de las comillas!!!
- font-size quiere decir "tamaño de la fuente"
- px es una abreviatura de pixeles
- en 12 pones la cantidad de pixeles que queres para la fuente
Esto va justo después de la p que abre la etiqueta y antes del signo ">" que cierra a esta!!!
Quedaria algo asi:
<p style = "font-size: 12px">Texto del párrafo aca</p>
Color de las letras
Para cambiar el color del texto, simplemente se añade el atributo style en la etiqueta de inicio como el del tamaño de la fuente, luego establecemos que sea igual a "color:red" (color rojo) o cualquier color que queramos.
<h3 style=color:red>Titulo aca</h3>
Tipos de fuentes
Aparte del color y el tamaño también podemos elegir el tipo de tipografía. Usaremos para esto:
<h1 style=font-family:Helvetica></h1>
En lugar de Helvetica podemos poner la fuente que queramos.
Hay que tener ojo,con poner el nombre exacto de la tipografía porque si no no la va a tomar correctamente (te aconsejo que la busques en el bloc de notas si no te acordás en Formato - Fuente).
--------------------- COLOR DE FONDO --------------------
La propiedad style tambien nos sirve para definir el color de fondo de las cosas (y no solo del cuerpo de la pagina).
En este caso se aplica igual que los anteriores solo que en este caso:
<body style = "background-color: brown" ></body>
Entonces después de background-color ponemos el color que queramos, en ingles obviamente.
Y el body no es necesariamente en lo único que podemos implementar el color de fondo, también lo podemos hacer en listas ordenadas, no ordenadas, etc.
Un ej:
El código para este ej, seria el siguiente:
<body style = "background-color: Brown" >
<h3>Cosas para hacer</h3>
<ol style = "background-color: Yellow">
<li>Ir al super</li>
<li>Conseguir el diario</li>
<li>Ir al club</li></ol>
</body>
Los colores no necesariamente tienen que estar escritos por su nombre. supongamos que queremos un verde claro, pero no cualquier verde claro si no una tonalidad especial, entonces usaremos los valores Hexadecimales, como por ej: #01AEF0 que representa un verde palido
Esta es una pagina muy buena para buscar valores hexadecimales:
html-color-codes.info/codigos-de-colores-hexadecimales/
--------------------- RESALTAR TEXTO --------------------
En el post anterior habíamos aprendido como poner negritas con las etiquetas "<strong></strong>", pero a parte de resaltarlo remarcando las palabras, también se pueden resaltar con itálicas(cursiva para nosotros). Lo hacemos con las etiquetas <em></em>
Esta es una frase en Itálica
--------------------- APLICANDO LO APRENDIDO --------------------
Como en el post anterior fui haciendo una pagina para mostrar lo que íbamos aprendiendo me gustaría usarla y seguir implementando cosas para que vean como se puede ir mejorando de a poco la misma.
El codigo
  es algo que le agregue para hacer el espaciado al principio de la oración.
--------------------- FINAL DE LA 2º PARTE --------------------
Hasta aca llegamos con la parte 2, pronto voy a hacer la 3º y ultima parte de estos post para aprender las bases de HTML, seguramente haga luego unos posts sobre CSS y como combinar ambos, asi que suerte y practiquen que asi es como van a llegar a dominar este lenguaje. Cualquier comentario de critica constructiva me va a ayudar a mejorar en cuanto a los post asi que no dudes en hacerlos . Nos vemos!!!