Comienzo de lenguaje de marcas con HTML

 

introduccion html
Vamos a hacer una breve introducción primero a que es el HTML.
 
Bien, pues HTML es un lenguaje de marcas. Y os preguntareis, ¿qué es un lenguaje de marcas?
Pues el lenguaje de marcas es una forma de codificar un documento que incorpora etiquetas o marcas que contienen información adicional acerca de la estructura. El más extendido es el HTML.
Dentro de los lenguajes de marcas tenemos varias clases.
  • Marcado de presentación: Nos va a indicar el formato del texto.
  • Marcado por procedimiento: Está enfocado hacia la presentación del texto.
  • Marcado descriptivo: Utiliza etiquetas para describir elementos del texto pero sin decirnos como es representado.


¿En cual de estas clases encontramos el HTML?
Pues lo vamos a situar en el marcado de presentación, ya que este lenguaje nos va a servir para definir el contenido y formato de una página web, como textos, imágenes, hiperenlaces, etc…
 
¿Qué significa HTML?
Del ingles HyperText Markup Language  que en español se refiere a lenguaje de marcas de hipertexto.
 
¿Qué necesito para empezar con HTML?
Fácil. Ganas, Bloc de notas, navegador y ¡a currar!



¡EMPECEMOS!
 
Lo primero que debemos hacer es investigar para que sirve cada instrucción, yo os adjunto una página web en la cual podéis mirar varias cositas. AQUI
 
Primero vamos a escribir lo siguiente en el bloc de notas:
<html>
 
 
 
</html>
 
Aquí dentro irá todo el código que queremos escribir. Con esto le decimos al navegador que vamos a escribir en HTML y él nos entenderá.
 
Lo siguiente es definir el cuerpo que lo vamos a hacer con la siguiente instrucción: <body>
¿Como se nos queda? Tal que así:
 
<html>
          <body>
 
 
 
         </body>
</html>
 
¿Bien?
Pues continuemos…
Para crear párrafos vamos a usar el comando <p> y para mostrar texto en negrita <b>
Vamos a ver como queda nuestro primer ejemplo.
 
<html>
       <body>
              <p><b>soy un parrafo y estoy en negrita</b></p>
       </body>
</html>
 
Despues de esto clicamos en Guardar como y ponemos la extensión .html:
ejemplo1.html
 
Y veremos que se nos guarda como si abrieses una página del navegador. Doble click y ya está el primer resultado.
¡Muy bien!
Ya sabemos algo básico. Vamos a avanzar.
 
Ahora vamos a tratar algo en el encabezado de la página web.
Para decirle al navegador que queremos tratar con el encabezado usaremos el comando <head>
y queremos ponerle titulo a nuestra página, pues usamos <title>
¿Cómo nos quedaria?
 
 

<html>
  <head>
    <title>Lenguaje de marcas</title>
  </head>
       <body>
              <p><b>soy un parrafo y estoy en negrita</b></p>
       </body>
</html>


¡Estupendo!
Vamos a pasar a cambiar la forma del texto a itálica, pues nuestro comando seria <i>.
Aunque… tambien quiero linkear mi blog atraves de un hiperenlace, pues… 
<a href=”URL DEL BLOG”>NOMBRE</a>
Por supuesto todo esto va dentro del cuerpo.
Vamos a verlo en la práctica:

<html>
  <head>
    <title>Lenguaje de marcas</title>
  </head>
       <body>

              <p><b>soy un parrafo y estoy en negrita</b></p>
              <p><i>esto es italica</i></p>
              <P>
              <a href=”http://rinconmain.blogspot.com.es/”>BLOG</a>               </p>

       </body>
</html>


Vamos a guardarlo de la misma forma que antes y a ver que tal queda.


 
¿Vamos a por un poco más? ¡Venga!
No todos los textos tienen que ser negros y del mismo tamaño.
Para eso vamos a ver ahora como modificar las fuentes con el comando <font>
Aunque este es un tanto especial… vamos a seguir aumentando el comando.
Quieres cambiar el tamaño. pues usamos <font size=»nº»>
Este número va a variar del 1 al 7, tu decides que tamaño quieres.
También podemos modificar el color… <font color=»COLOR»>
Elige el color que tu quieras pero eso si, escribelo en ingles.
Vamos a ver unos ejemplos:

 <p><font size=»5″> esto es grande </font></p>

 <p><font size=»1″> esto es pequeño </font></p>

 <p><font color=»red»> esto es rojo </font></p>


¿Fácil?
Tambien podemos modificar el tamaño y el color en una misma sentencia:

<font size=»8″ color=»blue»> esto es azul y muuuy grande </font>


Ahora todo esto vamos a implementarlo en nuestro código, a ver que tal queda.



<html>
  <head>
    <title>Lenguaje de marcas</title>
  </head>
       <body>

              <p><b>soy un parrafo y estoy en negrita</b></p>

              <p><i>esto es italica</i></p>

              <P>
              <a href=”http://rinconmain.blogspot.com.es/”>BLOG</a>               </p>
              <p><font size=»5″> esto es grande </font></p>

              <p><font size=»1″> esto es pequeño </font></p>

              <p><font color=»red»> esto es rojo </font></p>

<p>
<font size=»8″ color=»blue»> esto es azul y muuuy grande </font>
</p>

       </body>
</html>

Ahora vamos a guardarlo y a ver que tal nos queda.


 
 
¡Estupendo!
 
Pues esto es todo, espero que os haya sido de gran utilidad.
Un saludo.
Fuente: Propia