PRINCIPIOS DE PROGRAMACIÓN 6 (COMPUTACIÓN)

El Regreso

Pues como dice la canción: “ya llegue de donde andaba, se me concedió volver” – En estas ultimas semanas he estado muy ocupado, por ahi me han dicho que mis post no llevan un orden y que no tiene tintes prácticos, en esta ocasión pondré un pequeño código en html.

El primer código que los programadores hacemos se llama “Hola Mundo” o “Hello World” para los que hablan english. Este código  según los cánones del programador no debería llamarse así, ni mucho menos programación. El html es un lenguaje de marcas o marcado, quiere decir que tiene etiquetas, por ejemplo: <PRINCIPIO> – <FIN>

Su característica principal es precisamente esa, para cada marca hay un inicio o apertura y un fin o cierre. La primer etiqueta, y tal ves las más importante, es:

<HTML> y </HTML>

Las siguientes etiquetas irán dentro de ella, como segunda tenemos a:

<HEAD> y </HEAD>

Después veremos porque es importante. Como tercer lugar esta:

<BODY> y </BODY>

En ella ira todo el contenido o cuerpo, ya sea texto, imágenes o una que otra animación. Ahora que conocemos las etiquetas (marcas principales) vamos a abrir nuestro editor de texto que prefiramos y acomodaremos las etiquetas de la siguiente manera:

editoresTexto

En mi caso los editores son leaf pad y bloc de notas de MS Windows, en Mac desconozco cual se use :p

Al acomodo de estas etiquetas le llamamos Estructura Básica, cada lenguaje tiene una propia, ademas de reglas sintácticas y lexicográficas, como buena práctica recomiendo usar la sangría como un aspecto de jerarquía en todos los lenguajes formales, ha y no se preocupen el humano no entra en esa categoría. Después de esto procedemos a guardarlo como: “index.html” en el caso del bloc de notas sera necesario guardarlo con todo y comillas. En leaf pad solo guárdenlo como index.html

GuadarEditorTxt

Yo tuve que guardar en bloc de notas index1.html porque tengo los dos editores en la misma maquina, pero ustedes no deben tener ese problema, yo por mi parte seguiré usando los 2. Para finalizar agregaremos en <HEAD> esto:

<TITLE>Mi primer código en HTML</TITLE>

Esta etiqueta lo que hace es poner el titulo en la pestaña de nuestro explorador. Ahora pondremos 2  etiquetas en <BODY>:

<H1>Hola mundo</H1>

<P>Esta es mi primer página en HTML</P>

La etiqueta <H1> significa el primer titulo o encabezado y la etiqueta <P> párrafo. Les debería quedar mas o menos así:

codigoTerminado

Guardaremos los cambios y abriremos nuestro archivo HTML en el explorador que usemos, en mi caso Chromium, una versión más light que Chrome :p

códigoFinal

Dependiendo de la codificación de su explorador, les podría mostrar la página como a mi, que no reconoce el acento o tilde. Pero esa es otra historia. Espero la próxima semana darle otra forma a este código para que se vea más profesional y lo puedan presumir.

Anuncios
Etiquetado , ,

Un pensamiento en “PRINCIPIOS DE PROGRAMACIÓN 6 (COMPUTACIÓN)

  1. Andreu Neira dice:

    Hola Kyo.
    Muchas gracias por iniciarnos en el mundo de la programación. Habemos muchos profesionales en muy diversas áreas en el mundo que quisiéramos conocer, por lo menos por encima, lo que la programación implica.
    Felicidades. Encuentro muy práctico tu post de hoy.
    Espero que sigas posteando más entradas de programación para no-programadores.
    —Andreu

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

A %d blogueros les gusta esto: