lunes, 22 de diciembre de 2014

HTML y CSS desde cero - Sintaxis y etiquetas basicas

Bienvenidos al primer tutorial de HTML y CSS en el cual veremos la sintaxis de HTML y las etiquetas mas básicas del mismo.


Para empezar a escribir código, solo necesitamos un editor de texto cualquiera, recomiendo Sublime Text 3, y un navegador de internet, que creo que todos tenemos, el que yo usare sera Google chrome, teniendo eso es suficiente, ahora para empezar a escribir el código, tenemos que crear un archivo de texto con cualquier nombre, puede ser "Mi primer pagina web" y al final colocarle la extensión html, quedaría algo así:

Ahora procederemos a abrir este archivo, pero con editor de texto, como los antes mencionados.

Es aquí en donde empezamos a escribir nuestro código html.

Html es un lenguaje que usa etiquetas. Una etiqueta se vería de la siguiente manera:
<html> </html>

En html toda etiqueta que se abre debe cerrarse,
Para abrir una etiqueta lo hacemos así:
<html>
Y para cerrarla:
</html>

 Dentro de una etiqueta podemos contener mas etiquetas, un ejemplo:
<html>
          <body>
          </body>
</html>
Si se fijan bien, vemos que la etiqueta html contiene otra etiqueta dentro, llamada body.
Siempre hay que seguir estas reglas, si queremos contener una o varias etiquetas dentro de otra, debemos colocarlas entre las etiquetas de inicio y de cierre de la etiqueta contenedora, y así podemos contener tantas etiquetas como queramos dentro de otras, e incluso podemos contener etiquetas dentro de otras etiquetas contenidas por otras y así tantas como queramos:
Ejemplo:
Así seria de la manera correcta:
<html>
          <body>
                    <h1>
                    </h1>
          </body>
</html>
De manera incorrecta:
<html>
          <body>
                    <h1>
                    </h1>
</html>
          </body>


Lo primero que debemos hacer y siempre lo harás, es definir el tipo de documento:


Con esto estamos indicando que usaremos html en su versión 5, ultima versión de html.

Ahora debemos poner las siguientes etiquetas que son las mas basicas y siempre pondras:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

La primera etiqueta que pusimos: <!DOCTYPE html> es para definir el tipo de documento, osea le estamos diciendo que usaremos la versión 5(Última versión) de html.

Las etiquetas <html> </html> son las que contendrán todo el contenido de la web, es decir, entre estas etiquetas van todas las demás.

Las etiquetas <head> </head> o cabecera, contiene información de primera, es decir es lo primero que se carga al cargar el sitio web como puede ser codificación de caracteres que usaremos, enlazar scripts y estilos, también podemos colocar un titulo en la pestaña. Osea que no necesariamente es lo que se va a ver en pantalla, si no que son valores que configuramos para que todo valla bien.

Las etiquetas <body> </body> o cuerpo, contendrá todo el contenido visual de la web, es decir, es lo que va a ver el que entra a tu pagina.

Las etiquetas <title> </title> o titulo, me permiten poner un titulo, pero que solo sera visible en las pestañas del navegador.

Bueno gente, eso es todo por este tutorial, los espero en el siguiente, un saludo.
Cualquier duda comentar 

No hay comentarios:

Publicar un comentario