[HTML5] Créditos iniciales

¿Qué ser eso?

Bienvenidos al tutorial raro… de HTML (HyperText Markap Language) que es el lenguaje que nos permite crear páginas web, también conocido como markup. En conjunto con otros lenguajes, como puede ser el CSS, PHP o JavaScript, se completa visualmente y en contenidos.
En particular, vamos a trabajar con la versión 5, es decir: HTML5. Mucho más sencilla, clara, más fácil de editar y compatible con más servicios.

¿Como se puede crear?

La sencilla y casi olvidada herramienta de… ¡Bloc de notas! Un editor de texto es lo único que nos hace falta, aunque si buscamos algo más específico, siempre podemos acudir a algun otro como Notepad++, que es el que actualmente yo uso (y funciona bastante bien).
Lo que necesitaremos será guardar nuestros documentos en diferentes formatos, como puede ser *.html, *.css, *.js o el que sea que utilicemos. Pero como vamos a empezar con HTML, nuestro formato será *.htm o *.html.

Primeros pasos, babe!

Abrimos el Paddie y guardamos un archivo llamado index.html (o como queramos llamarlo en un principio).
Bien, en HTML trabajaremos usando etiquetas o tags. Todas funcionan de una manera similar, salvo excepciones en las que se añade información para el correcto funcionamiento.

La sintaxis en estas etiquetas ha de ser correcta, o de lo contrario, fallará, pudiendo desbaratar otros elementos..
Así que comenzamos a escribir nuestro documento: <!DOCTYPE html>. Incluimos la siguiente línea de <html lang=”es”>, para especificar que nuestra página está en español.

Después, escribimos <head></head>, en la que especificaremos importantes datos de nuestra web. Como por ejemplo, el uso de tildes, que se escribe tal que así <meta charset=’utf-8′>.

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset='utf-8'>
    </head>
</html>

Si especificamos, la primera línea de código indica al navegador que el documento debe leerse de acuerdo a las normas de HTML.
Después de esto, tenemos ya escrito el esqueleto de nuestra página web. Dentro de las etiquetas <body></body>, estará escrito el código del contenido de nuestra web. Para escribir un párrafo, ya que en HTML no nos vale pulsar la tecla Enter, especificaremos cada párrafo dentro de la etiqueta <p></p>

Captura

¿Cómo se llama la web?

Como se puede suponer, es una herramienta muy fácil, ya que se integra mediante la etiqueta <title></title>. Así, una vez esté abierta la web en nuestro navegador, aparecerá el nombre elegido.
Aprovechemos ahora y siempre para ser originales, derrochar estilo y humor (aunque sea un consejo que, personalmente, no sé seguir).

¿Y como coloco un título EN la web?

Para colocar lo que puede ser el título o los botones de navegación, se utiliza la etiqueta <header>. En la etiqueta <header> podemos colocar un <hgroup>, y dentro de este, un <h1>
<hgroup> y <h1> pueden ser llamados subtítulos, y su agrupamiento. Resulta más cómodo más adelante y facilita la búsqueda de nuestra web en la red.

<body>
    <header>
    <hgroup>
        <h1> Tecno newbie! </h1>
    </hgroup>

Ahora…

… si guardamos y abrimos nuestro archivo index.html con doble clic… TADÁA! Se abre ante nosotros nuestra página web… muy cutrona, muy simple, sin colores ni nada por el estilo… Pero todo llegará, en los próximos post, cuando empecemos a trabajar con CSS3. De momento, tendremos que terminar de lurkear con HTML5 y las etiquetas que nos quedan por explorar. Tal vez un poco denso, pero poco a poco se irá suavizando el contenido.

Intentaré no desvariar mucho antes de seguir con esta COSA que escribo más para mí misma que para los que lean, al menos en un principio. Aun así, espero que sea de utilidad.

SeeU!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s