Omitiré que es el HTML, me es aburrido explicarlo y creo que ya existe mucha información al respecto.
Si quieren saber al respecto los invito a buscar en su navegador preferido la definición de HTML (HyperText Markup Language).
Comencemos...
Para poder crear una pagina web deben tener en mente que existe una estructura básica de etiquetas que nunca deben olvidar.
Estas son <html>, <head> y <body>.
Como pueden ver cada etiqueta comienza con "<" y finaliza con ">", estos signos son los delimitadores de etiquetas HTML.
Antes de continuar debo aclarar un asunto:
Todo el código que se escriba en este Blog pueden escribirlo en su editor de código favorito, sin embargo, si no saben ni si quiera que es eso solo utilicen el Block de Notas de Windows o el Editor de Texto de Linux y guarden los archivos como nombredelarchivo.html
Continuemos...
La etiqueta <html> (por el momento) le indica a los navegadores que el documento que interpretará es un HTML.
Las etiquetas <head> y <body> se escriben dentro de la etiqueta <html> en forma independiente y al igual que un ser humano primero va la cabeza (head) y luego el cuerpo (body).
Las etiquetas (en su mayoría) se abren y cierran, digo en su mayoría puesto que mas adelante veremos etiquetas que son únicas y no tienen su compañera de cierre.
Para cerrar una etiqueta (cualquiera sea, siempre y cuando tenga su etiqueta de apertura) se utiliza antes de su tag pero luego de la apertura la "/". Ejemplo: </html>.
Estructura básica de un documento HTML.
<html>
<head>
</head>
<body>
</body>
</html>
Esa estructura siempre debe estar puesto que es la base para que el navegador interprete correctamente un documento HTML.
Determinar el Titulo de una página web
Para poder determinar el titulo que tendra nuestra pagina web (el cual se visualiza en la parte superior del navegador [ya sea la pestaña o barra superior del mismo]) se debe utilizar la etiqueta <title>, esta va dentro de la etiqueta <head>
Ejemplo:
<head>
<title>Nuestra primera pagina</title>
</head>
Agregar contenido a nuestra pagina
Para poder agregar contenido ya sea texto, imagenes, videos, etc debemos empezar a comprender otras etiquetas y el concepto de "atributo".
Los atributos (aveces llamados parametros) son utilizados para determinar algunas caracteristicas de las etiquetas para que estas funcionen de maneras particulares o tengan determinadas caracteristicas.
Comencemos de a poco, pero antes de hacerlo vale aclarar que todo lo que veamos a continuación se escribe siempre dentro de las etiquetas <body></body>...
Para ingresar un párrafo necesitamos utilizar la etiqueta <p>
Ejemplo:
<p>Este es un párrafo</p>
<p>Este es otro párrafo</p>
Ahora bien, generalmente (y en realidad deberia ser siempre) las paginas web deben tener encabezados, estos son utilices no solo porque tienen pre establecido diferentes categorias sino que ademas son necesarios para mejorar el posicionamiento de nuestras web. Pero... ¿que son los encabezados?
Al igual que un diario tiene en su portada una titular gigante y debajo del mismo un subtitulo, las paginas web deberian tener lo mismo.
Estos titulos y subtitulos dentro del universo del HTML se llaman encabezados y a su vez tienen distintas categorias que fueron tomando con el tiempo.
La etiqueta de encabezados es <hX> siendo X un numero del 1 al 6, es decir, <h1> <h2> <h3> <h4> <h5> y <h6>
El <h1> es el denominado encabezado principal y debería haber 1 solo por cada documento HTML (puede utilizarse mas veces pero sería hacer un mal uso del mismo).
El <h2> es el denominado subtitulo y este al igual que todos los <hX> menores a 2 pueden ser utilizados sin limite sin embargo siempre deben respetar un orden decreciente, es decir un <h2> no debería funcionar como un subtitulo de un <h3>.
Dicho esto vamos con un ejemplo:
<h1>Titulo principal de la Pagina</h1>
<h2>Subtitulo de la pagina</h2>
<h3>Que es el HTML</h3>
<p>texto explicativo</p>
<h3>Etiquetas</h3>
<p>texto explicativo</p>
Las etiquetas <hX> deben cerrarse una vez utilizadas y una no puede incluir a otra. Además como pueden observar las etiquetas <hX> están fuera de las etiquetas <p> esto se debe a que existen etiquetas de Bloque y etiquetas de Linea. Con el tiempo iremos aprendiendo las diferentes etiquetas y sus tipos, sin embargo, a grandes rasgos los que podemos decir es que las etiquetas de bloque contienen pueden contener etiquetas de linea, por el contrario y generalmente asi sucede las etiquetas de linea son contenidas por las etiquetas de bloque.
Y ya que las menciono daré un ejemplo practico que nos lleva al aprendizaje de 2 nuevas etiquetas. Estas permiten dar cierto "formato" al texto. Estas son:
<strong>Texto en Negrita</strong>. Anteriormente esta etiqueta era <b> pero la misma cayo en desuso y se transformo en <strong> la cual debe abrirse y cerrarse conteniendo un texto en su interior.
<em>Texto con énfasis</em>. Anteriormente esta etiqueta era <i> y se conocía como letra Itálica.
Actualmente en HTML tanto la etiqueta <strong> como <em> son denominadas como etiquetas para dar "Énfasis" a las palabras.
Estas etiquetas son de linea por lo cual deben estar dentro de una etiqueta de bloque como ser <p>. Ejemplo:
<p>Estamos aprendiendo <strong>HTML</strong> de una manera <em>fácil y practica</em></p>.
Bien, creo que ya hemos visto suficiente por hoy, pero para que se vayan con un ejemplo visual y puedan practicar le voy a mostrar el código de una pagina HTML con las etiquetas que hemos aprendido hoy.
<html>
<head>
<title>Programando el Destino</title>
</head>
<body>
<h1>Programando el Destino</h1>
<h2>Tu ayuda virtual a la hora de desarrollar</h2>
<p>Hoy hemos aprendido lo <em>basico</em> del <strong>HTML</strong> pero <em>fundamental</em> para comenzar con nuestros desarrollos web. A comenzar con las prácticas y a consultar todas vuestras dudas puesto que para ello es la existencia de este <strong>Blog</strong></p>
</body>
</html>
Resultado:
Aclaración: No es necesario tabular el código, yo lo hago porque lo hace mas legible y permite editarlo con mayor facilidad pero su utilización es indistinta.
Espero que les sirva esta primera lección y no se olviden de consultar todas su dudas para eso existe este Blog.
No hay comentarios:
Publicar un comentario