miércoles, 16 de septiembre de 2015

html clase 03 – títulos y creación de links

  Bienvenidos a la clase 3: gracias por leer y seguir el curso. Es muy importante para mi, para poder seguir este curso que comenten que les parece las clases, y sobre todo que compartan el curso para que llegue a mas personas, y sea útil.

hoy seguiremos viendo los títulos, en la clase anterior aprendimos la etiqueta <h1> que lo indica. Pero es importante que entendamos esta etiqueta, para ello vamos a ver el siguiente ejemplo:

<html>
<head>
<title>mi web</title>
</head>
<body>
<h1>mi web</h1>
<p><h2>texto 1</h2>
blablabla
</p>
<p><h2>texto 2</h2>
blablabla
</p>
</body>
</html>

Este documento podemos verlo
en este link

  Aunque se puede colocar varios <h1> en el documento no es recomendable, lo correcto es colocar solo uno con la frase mas importante que describa el documento. Luego existen las derivadas: <h2>, <h3>, <h4>
Que estas también son usadas para indicar un título. El número que se pone luego de la h es el nivel de jerarquía del título:
el 1: indica la descripción del documento, es la letra mas grande.
el 2: indica secciones, un título con letras mas chicas.
el 3 indica una su sección dentro de la sección.

  De esta forma podemos entender la lógica que hay que seguir en nuestros documentos, si respetamos esto los buscadores indexarán mejor nuestra página y podrán encontrar mas rápido nuestra web. Pero de esto hablaremos mucho mas adelante.

  Pero no todas las etiquetas abren y cierran, hay algunas excepciones, una de ellas es la etiqueta <br>, que simboliza un retorno de carro, osea es como un punto aparte. Si colocamos 2 seguidas deja un renglón en blanco, vamos a ver un ejemplo:

<html>
<head>
<title>mi web</title>
</head>
<body>
<h1>mi web</h1>
<p><h2>texto 1</h2>
blabla<br>
bla
</p>
<p><h2>texto 2</h2>
bla<br><br>
blabla
</p>
</body>
</html>

  Si ejecutamos este código podremos ver su efecto.

  Y para finalizar aprenderemos a hacer links: lo mas interesante de los hipertextos.
los links se indican con la etiqueta <a>.

<a>
mi link
</a>

  En este ejemplo tenemos un link, pero donde nos dirige?.
AAAh, ¿no sabemos cómo poner una ruta?. para ello empezaremos a usar atributos, son propiedades de la etiqueta, es como darle un valor extra a la etiqueta que estamos usando.
  Si vamos a ponerle una puerta a la casa que estamos construyendo tenemos que ponerle a qué lugar irá luego de pasar por ella.
para ello se hace de la siguiente forma:
puerta=patio

esto se leería: por esa puerta pasaremos al patio. de la misma analogía usaremos el atributo href, que es a donde dirige el link y se hace de esta forma:
<a href="http://www.google.com.ar">ir a google</a>

como verán puse el link a google entre comillas en el atributo href. Esto parece medio complicado, pero con un poco de práctica se saca.
Vamos a ahcer un ejemplo:

<html>
<head>
<title>redes sociales</title>
</head>
<body>
<p><h1>links a redes sociales</h1>
<br>
Estos son algunos links a redes sociales:
<br><br>
<a href="http://www.facebook.com">Facebook</a><br>
<a href="http://www.twitter.com">Twitter</a>
</p>
</body>
</html>

Ver ejemplo

  Aquí podemos observar un menú a redes sociales.

ahora vamos a la tarea:
Realizar un menú que lleve a 3 documentos con diferentes textos.
y realizar esos 3 documentos con sus títulos y textos.

Recuerdo quien necesite apoyo o no entiende esta teoría puede acceder a una tutoría paga, esto ayuda a que este curso siga adelante. Pueden contactarme por las redes sociales, los links a mi perfil se encuentra en el menú en la portada de este blog.
Gracias!, y nos veremos en la próxima clase.

No hay comentarios: