Cargar imágenes en HTML

Hoy les traigo un pequeño tutorial donde explico de manera breve como cargar imágenes en HTML.

Pero antes de comenzar me gustaría compartirles el tutorial anterior acerca de estilos de letra en HTML.

Para cargar una imagen dentro de una pagina web, utilizamos la etiqueta <IMG> con el parámetro SRC, esta etiqueta no necesita una etiqueta de cierre, y solo debemos indicar la ubicación de nuestra imagen, ya sea en nuestro equipo, o directamente desde internet. como asignar una ruta para una imagen lo explico en este tutorial: color e imagen de fondo en HTML, solo que no con la misma finalidad, pero la idea es la misma.

En las paginas web los formatos de imágenes mas utilizados son: png, jpg y gif.

Ya que indicamos la ruta para acceder a nuestra imagen, solo indicamos el nombre y formato de nuestro archivo:

    <IMG SRC="NombreDeNuestraImagen.Formato">

A continuación les comparto un código de ejemplo:

<html>

    <head>
        <title>
            Imagenes en HTML.
        </title>
    </head>

    <body>
        <IMG SRC="Color e imagen de fondo en HTML3.png">
    </body>
</html>

Y el resultado que obtendríamos seria el siguiente:

Las imágenes que carguemos se pueden re-dimensionar, para esto existen las propiedades width y heigth. que indican el ancho y alto que tendrá nuestra imagen en pixeles. A continuación les muestro un ejemplo con estas propiedades.

<html>

    <head>
        <title>
            Imagenes en HTML.
        </title>
    </head>

    <body>
        <IMG SRC="Color e imagen de fondo en HTML3.png" width=100, heigth=100>
    </body>
</html>

Y el resultado que obtendríamos seria el siguiente:

 Se puede indica que el texto que esta alrededor de nuestra imagen se alinee en una cierta posición con respecto a nuestra imagen o indicar en que parte de la pantalla se alineara nuestra imagen, esto se puede lograr gracias a la propiedad align, donde se tienen los valores: top, middle, button, right o left.

-top: el texto se alinea en la parte superior de la imagen
-middle: el texto se alinea al centro de la imagen
-button: el texto se alinea en la parte inferior de la imagen
-right: la imagen se alinea a la derecha de la pagina web
left: la imagen se alinea a la izquierda de la pagina web

A continuación les comparto un pequeño ejemplo con esta propiedad:

<html>

    <head>
        <title>
            Imagenes en HTML.
        </title>
    </head>

    <body>
        <pre>
Texto alineado en la parte superior de la imagen<img src="Color e imagen de fondo en HTML3.png" width=100, heigth=100 align=top>
Texto alineado al centro de la imagen<img src="Color e imagen de fondo en HTML3.png" width=100, heigth=100 align=middle>
Texto alineado en la parte inferior de la imagen<img src="Color e imagen de fondo en HTML3.png" width=100, heigth=100 align=button>
Imagen alineada a la derecha de la pagina web<img src="Color e imagen de fondo en HTML3.png" width=100, heigth=100 align=right>





Imagen alineada a la izquierda de la pagina web<img src="Color e imagen de fondo en HTML3.png" width=100, heigth=100 align=left>
        </pre>
    </body>
</html>

Y el resultado obtenido con el código anterior, seria el siguiente:

Y por ultimo, como un dato extra, la imagen que estoy utilizando para los ejemplos, es la siguiente: "Bosque de sueños" de Mario Rafael Lince Benavides.

Espero y este tutorial les sea de utilidad, cualquier duda no duden en comentarla por favor. Muchas gracias por visitar este tutorial.

Fuente:
http://platea.pntic.mec.es/~abercian/guiahtml/imagenes.htm consultada el 14 de Julio del 2015.

Estilos de letra en HTML. Parte 2

Hoy les traigo otro tutorial acerca de estilos en HTML, pero en esta ocasión no cargaremos fuentes que tenemos instaladas en nuestro equipo, serán fuentes de Google que utilizaremos directamente desde internet.

Pero antes de iniciar, les comparto el tutorial de estilos de letra en html. parte 1 y el tutorial anterior acerca de color e imagen de fondo en html.

Ahora si comencemos con este tutorial.

Para poder cargar en  nuestra pagina web una fuente de Google, buscaremos la fuente que sea de nuestro agrado en esta pagina: https://www.google.com/fonts, una ves que tengamos la fuente que sea de nuestro interés veamos cual es su nombre, en mi caso me gusto esta fuente:

Y el nombre de la fuente siempre esta en la parte inferior izquierda en negritas, en este caso "Codystar", una ves que sabemos el nombre de la fuente que nos interesa, ya es momento de implementarla en nuestra pagina web.

Lo que haremos a continuación es cargar la fuente de nuestro interés a un estilo que generaremos. El nuevo estilo lo generaremos dentro de las etiquetas <head> y solo haremos referencia a el dentro de las etiquetas <body>.

<html>

    <head>
        <link rel="stylesheet" tyoe="text/css" href="http://fonts.googleapis.com/css?family=Codystar">

        <style>
            texto1 
            {
                font-family: "Codystar";
                font-size: 48px;
            }
        </style>
        <title>
            Estilo de letra
        </title>
    </head>

    <body>
        <pre>
<texto1><font color=red>Texto de Ejemplo</font></texto1>
        </pre>
    </body>

</html>

En la etiqueta <link> estamos haciendo referencia a la fuente que se encuentra en internet, solo tienen que sustituir "Codystar", por el nombre de la fuente de su elección. Una vez hecho esto dentro de la etiqueta <style>, estamos declarando una función llamada "texto1" (sustituye este nombre por un nombre a tu gusto), cada que utilicemos las etiquetas con el nombre de nuestra función, en este caso:

     <texto1> Texto que queremos que tenga nuestra fuente</texto1>

A nuestro texto se le aplicara lo que definimos dentro de nuestra función, en este caso, dentro de nuestra función se esta indicando que la fuente que utilizaremos sera la fuente que cargamos anteriormente, en este caso la fuente "Codystar", que tendrán que sustituir por la fuente de su elección, y se esta indicando que el tamaño del texto sera de 48 pixeles (este valor puede cambiar o simplemente omitirse dicha linea).

Y por ultimo dentro de las etiquetas <body> se esta indicando que nuestro texto tendrá nuestra fuente y que sera de color rojo, las etiquetas <font> con el parámetro color, la explique en este tutorial, Color de texto en html.

Y el resultado que obtendríamos con el ejemplo anterior, seria el siguiente:

A continuación les comparto un ejemplo en el que utilizo varias fuentes distintas en una misma pagina web, lo único que necesitamos hacer, es delimitar cada texto con las etiquetas correspondientes a esa fuente.

<html>

    <head>
        <link rel="stylesheet" tyoe="text/css" href="http://fonts.googleapis.com/css?family=Codystar">
        <link rel="stylesheet" tyoe="text/css" href="http://fonts.googleapis.com/css?family=Monoton">
        <link rel="stylesheet" tyoe="text/css" href="http://fonts.googleapis.com/css?family=Press Start 2P">
<style>
            texto1 
            {
                font-family: "Codystar";
                font-size: 48px;
            }
            texto2 
            {
                font-family: "Monoton";
                font-size: 48px;
            }
            texto3
            {
                font-family: "Press Start 2P";
                font-size: 48px;
            }
</style>
        <title>
            Estilo de letra
        </title>
    </head>

    <body>
        <pre>
<texto1><font color=red>Texto de Ejemplo</font></texto1>
<texto2><font color=cyan>Texto de Ejemplo</font></texto2>
<texto3><font color=gold>Texto de Ejemplo</font></texto3>
</pre>
    </body>

</html>

Y este seria el resultado que  obtendríamos con dicho código:

Espero y este tutorial les sea de utilidad, cualquier duda no duden en comentarla por favor. Muchas gracias por visitar este tutorial.

Fuente:
https://developers.google.com/fonts/docs/getting_started consultada el 12 de Julio del 2015.

Color e imagen de fonto en HTML

Hoy les traigo un pequeño tutorial sobre como podemos asignarle a nuestra pagina web un color de fondo o una imagen de fondo.

Pero antes de comenzar me gustaría compartirles el tutorial anterior acerca de Color de texto en HTML, que es de mucha utilidad y le da un mejor aspecto a nuestra pagina web.

Entonces, comencemos con el tutorial.

Si queremos asignar a nuestra pagina web un color de fondo dentro de la etiqueta <body> utilizaremos el parámetro bgcolor, lo que hará que todo el contenido dentro de las etiquetas body contenga un color de fondo igual al que le asignemos:

    <body bgcolor="color que queremos asignar de fondo">
        Contenido del body
    </body> 

El color de fondo lo podemos asignar por nombre o por valor hexadecimal.

A continuación les comparto un ejemplo del color de fondo por nombre:

<html>

    <head>
        <title>
            Color e imagen de fondo en HTML.
        </title>
    </head>

    <body BGCOLOR="yellow">
        Contenido de nuestra pagina web con BGCOLOR="yellow".
    </body>

</html>

Y este seria el resultado que obtendríamos:

Ahora el ejemplo del color de fondo por valor hexadecimal.

<html>

    <head>
        <title>
            Color e imagen de fondo en HTML.
        </title>
    </head>

    <body BGCOLOR="#a8dba1">
        Contenido de nuestra pagina web con valor Hexadecimal = "#a8dba1".
    </body>

</html>

Y este seria el resultado obtenido con el código anterior:

Si queremos asignar una imagen de fondo a nuestra pagina web, utilizaremos la etiqueta <body> pero ahora utilizaremos el parámetro background, lo que asignara al fondo de la pagina web esa imagen que elegimos, si la imagen es de tamaño menor al tamaño de la ventana, la imagen se estará duplicando y mostrando varias veces formando una especie de tapiz de la misma imagen.

Tenemos dos opciones para acceder a la imagen que queremos de fondo para nuestra pagina web, una es cargarla desde el equipo y otra es cargarla directamente desde internet, a continuación les pondré un ejemplo de ambos casos.

Al cargar la imagen desde el equipo podemos acceder de manera distinta a ella, si la imagen se encuentra en la misma carpeta que nuestro archivo .html, podemos acceder directamente a ella con solo poner el nombre y extensión de dicha imagen y que el navegador sea capaz de soportar ese formato.

<html>

    <head>
        <title>
            Color e imagen de fondo en HTML.
        </title>
    </head>

    <body background="Color e Imagen de fondo en HTML3.png">
        <font color="white">Contenido de nuestra pagina web con imagen de fondo desde la misma carpeta que el archivo .html.</font>
    </body>

</html>

Y el resultado que obtendríamos seria el siguiente:

Como dato extra, la imagen utilizada como fondo de pantalla de la pagina web es: "Bosque de sueños" de Mario Rafael Lince Benavides.

Si se encuentra en una carpeta distinta a la de nuestro archivo .html tenemos que especificar toda la ruta para acceder a dicho archivo, Para obtener la ruta del archivo, abrimos la carpeta donde se encuentra el archivo, y en la parte superior de la carpeta, damos click sobre la barra blanca y aparecerá la ruta hasta la carpeta:

Una vez que tengamos dicha ruta, en mi caso:

C:\Users\Usuario\Desktop\Carpeta de ejemplo\carpeta de imagenes

Al final le agregamos una diagonal, seguida del nombre y extensión de nuestro archivo, en mi caso la ruta quedaría así:

C:\Users\Usuario\Desktop\Carpeta de ejemplo\carpeta de imagenes/Color e imagen de fondo en HTML3.png

Y esa ruta que obtuvimos es la que colocaremos en el background de nuestra etiqueta body, a continuación les comparto un código acerca de esto:

<html>

    <head>
        <title>
            Color e imagen de fondo en HTML.
        </title>
    </head>

    <body background="C:\Users\Usuario\Desktop\Carpeta de ejemplo\carpeta de imagenes/Color e imagen de fondo en HTML3.png">
        <font color="white">Contenido de nuestra pagina web con imagen de fondo desde la misma carpeta que el archivo .html.</font>
    </body>

</html>

Y el resultado que obtendríamos seria el siguiente:

Si cargamos la imagen desde internet, lo único que necesitamos poner en el background es el url de la imagen, que en mi caso seria el siguiente:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPeoAcJP2X3zEpQ80TqmBK7MXheTsEVC2npONsYvHdyNLzFL0VByI6gttUGDqMvOnoH0mNA-0flhrq2bY1uEY7iinxeiqJMBVii2KVFTgCEZQNR2tdEwJh8kx_0SzuzfbGJ4z_U251q4U/s1600/Forest-like-a-Dream.jpg

Y a continuación les comparto un un ejemplo donde cargo una imagen desde internet:

<html>

    <head>
        <title>
            Color e imagen de fondo en HTML.
        </title>
    </head>

    <body background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPeoAcJP2X3zEpQ80TqmBK7MXheTsEVC2npONsYvHdyNLzFL0VByI6gttUGDqMvOnoH0mNA-0flhrq2bY1uEY7iinxeiqJMBVii2KVFTgCEZQNR2tdEwJh8kx_0SzuzfbGJ4z_U251q4U/s1600/Forest-like-a-Dream.jpg">
        <font color="white">Contenido de nuestra pagina web con imagen de fondo desde una pagina de internet.</font>
    </body>

</html>

Y el resultado obtenido con el código anterior, seria el siguiente:

Como dato extra, la imagen utilizada como fondo de pantalla de la pagina web es: "Forest like a Dream" de Silviu Vlasceanu.

Espero y este tutorial les sea de utilidad, cualquier duda no duden en comentarla por favor. Muchas gracias por visitar este tutorial.

Fuente:
http://www.htmlpoint.com/guida/html_04.htm consultada el 11 de Julio del 2015.

Color de texto en HTML

Hoy les traigo un pequeño tutorial sobre el color del texto en HTML.

Y antes de comenzar con este tutorial, les comparto el tutorial anterior referente a Estilos de letra en HTML. 

Y pues entonces, comencemos.

Algo que nos sera de mucha utilidad al diseñar paginas web es el modificar el color del texto, lo que le dara a nuestra pagina web un toque personal y la volvera mas llamativa. En este tutorial utilizaremos la etiqueta <font> con el parametro color:

        <font color="color que queremos asignar al texto"> Texto al que queremos con este color </font>

El color lo podemos asignar de 3 maneras diferentes:

    -Por nombre del color
    -Por su numero hexadecimal
    -O por su combinacion rgb

A continuacion les comparto un ejemplo en el que se utilizan las 3 maneras diferentes de asignar el color:

<html>

    <head>
        <title>
            Color de texto
        </title>
    </head>
    
    <body>
        Texto Normal<br/>
        <font color="red"> Texto Rojo </font><br/>
        <font color="cyan"> Texto Cyan </font><br/>
        <font color="violet"> Texto Violeta </font><br/>
        <font color="gold"> Texto Dorado </font><br/>
        <font color="silver"> Texto Silver </font><br/>
        <font color="brown"> Texto Cafe </font><br/>
        <font color="#7fdb9b"> Texto con Hexadecimal = "#7fdb9b" </font><br/>
        <font color="rgb(230, 235, 92)"> Texto con rgb = "rgb(230, 235, 92)" </font>
    </body>

</html>

Y este seria el resultado obtenido con este codigo:

Espero y este tutorial les sea de utilidad, cualquier duda no duden en comentarla por favor. Muchas gracias por visitar este tutorial.

Fuente:
http://www.desarrolloweb.com/articulos/556.php consultada el 09 de Julio del 2015.

Estilos de letra en HTML. Parte 1

Hoy les traigo un pequeño tutorial sobre los estilos de letra en HTML.

Y antes de comenzar con este tutorial, les comparto los tutorial anterior acerca de modificar el tamaño de letra en HTML y saltos de linea en HTML, que también es muy útil en el diseño de paginas web.

Y pues entonces, comencemos.

Algo que es muy útil al momento de manipular los textos dentro de las paginas web son las fuentes para el texto. Al diseñar una pagina web podemos acceder a todas las fuentes de texto con las que cuenta nuestro equipo de una manera muy fácil y rápida, con la etiqueta <font> con el parámetro face:

        <font face="fuente"> Texto que queremos con esta fuente </font>

A continuación pongo varios ejemplos de fuentes que se pueden utilizar.

<html>

    <head>
        <title>
            Estilos de letra
        </title>
    </head>

    <body>
        Texto Normal<br/>
        <font face="arial"> Texto Arial </font><br/>
        <font face="verdana"> Texto Verdana </font><br/>
        <font face="calibri"> Texto Calibri </font><br/>
        <font face="Times New Roman"> Texto Times New Roman </font><br/>
        <font face="Comic Sans MS"> Texto Comic Sans MS </font><br/>
        <font face="Bernard MT Condensed"> Texto Bernard MT Condensed </font><br/>
    </body>

</html>

Y para concluir este tutorial les explicare unas etiquetas mas que son muy buenas para la manipulación del texto.

La etiqueta <b> se utiliza para convertir el texto en negritas:

<b> Texto que queremos en negritas </b>

La etiqueta <i>  vuelve el texto en cursiva:

<i> Texto que queremos en cursiva </i>

La etiqueta <u> subraya el texto:

<u> Texto que queremos subrayar </u>

La etiqueta <s> tacha el texto:

<s> Texto que queremos tachar </s>

La etiqueta <tt> le da al texto la apariencia de ser de maquina de escribir:

<tt> Texto que queremos con apariencia de maquina de escribir </tt>

La etiqueta <big> hace que la fuente del texto se vuelva mas grande:

<big> Texto con fuente mas grande </big>

La etiqueta <small> hace que la fuente del texto se vuelva mas pequeña:

<small> Texto con fuente mas pequeña </small>

A continuación les pongo el el código de la pagina web de ejemplo:

<html>

    <head>
        <title>
            Estilos de letra
        </title>
    </head>

    <body>
        Texto Normal<br/>
        <font face="arial"> Texto Arial </font><br/>
        <font face="verdana"> Texto Verdana </font><br/>
        <font face="calibri"> Texto Calibri </font><br/>
        <font face="Times New Roman"> Texto Times New Roman </font><br/>
        <font face="Comic Sans MS"> Texto Comic Sans MS </font><br/>
        <font face="Bernard MT Condensed"> Texto Bernard MT Condensed </font><br/>

        <br/> Texto Normal <br/>
        <b> Texto Negritas </b><br/>
        <i> Texto Cursiva </i><br/>
        <u> Texto Subrayado </u><br/>
        <s> Texto Tachado </s><br/>
        <tt> Texto Maquina de Escribir </tt><br/>
        <big> Texto con Fuente mas Grande </big><br/>
        <small> Texto con Fuente mas Pequenia </small>
    </body>

</html>

Y este seria el resultado que obtendríamos:

Espero y este tutorial les sea de utilidad, cualquier duda no duden en comentarla por favor. Muchas gracias por visitar este tutorial.

Fuente:
https://es.wikibooks.org/wiki/Lenguaje_HTML/Propiedades_de_Fuentes_y_Texto consultada el 09 de Julio del 2015.

Tamaño de letra en HTML

Hoy les traigo un pequeño tutorial de tamaño de letra en HTML.

En el tutorial anterior les explicaba un poco acerca de los saltos de linea y párrafos en HTML, si no haz visto el tutorial anterior, selecciona aquí.

Hablando de la sintaxis como tal para manipular el tamaño de letra en HTML, contamos con las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, siendo <h1> la que le asigna al texto el mayor tamaño. Estas etiquetas necesitan su respectiva etiqueta de cierre.

<html>

    <head>
        <title>
            Tamanio de letra
        </title>
    </head>

    <body>
        Texto normal
        
        <h1>Texto (h1)</h1>
        <h2>Texto (h2)</h2>
        <h3>Texto (h3)</h3>
        <h4>Texto (h4)</h4>
        <h5>Texto (h5)</h5>
        <h6>Texto (h6)</h6>
    </body>

</html>

Otra etiqueta que nos puede servir mucho para manipular el tamaño del texto en HTML es la etiqueta <font> con el parámetro size:

                <font size=n>...</font>

Donde el valor de size va de 1 a 7, siendo 7 el valor que le asigna mayor tamaño al texto.

<html>

    <head>
        <title>
            Tamanio de letra
        </title>
    </head>

    <body>
        Texto normal
        
        <h1>Texto (h1)</h1>
        <h2>Texto (h2)</h2>
        <h3>Texto (h3)</h3>
        <h4>Texto (h4)</h4>
        <h5>Texto (h5)</h5>
        <h6>Texto (h6)</h6>

        <font size=1>Texto Size=1</font>
        <font size=2>Texto Size=2</font>
        <font size=3>Texto Size=3</font>
        <font size=4>Texto Size=4</font>
        <font size=5>Texto Size=5</font>
        <font size=6>Texto Size=6</font>
        <font size=7>Texto Size=7</font>
    </body>

</html>

Y nuestro código se vería así en el navegador:

Espero y este tutorial les sea de utilidad, cualquier duda no duden en comentarla por favor. Muchas gracias por visitar este tutorial.

Fuente:
https://www.uv.es/jac/guia/tamanyo.htm consultada el 07 de Julio del 2015.

Saltos de linea y párrafos en HTML

Hoy les traigo un pequeño tutorial de saltos de linea y párrafos en HTML.

En el tutorial anterior les explicaba un poco acerca de la sintaxis básica de HTML, si no haz visto el tutorial anterior selecciona aquí. 

Un programa que yo recomiendo para programación web es Brackets, si te interesa instalarlo en Windows, un tutorial acerca de eso esta aquí.

Y ya conociendo la sintaxis básica, comencemos.

Para realizar un salto de linea dentro de HTML se utiliza la etiqueta <br/>, cada vez que se utilice esta etiqueta, sera equivalente a un "Enter" dentro del contenido de la pagina web. Es necesario aclarar que esta etiqueta no cuenta con una etiqueta de cierre.

<html>
    
    <head>
        <title>
            Saltos de linea y parrafós
        </title>
    </head>
    
    <body>
        Texto normal
        <br/><br/>Texto<br/>con<br/>saltos<br/>de<br/>linea<br/><br/>
    </body>
    
</html>

Existe la etiqueta <p> para agrupar texto por párrafos, y estos pueden alinear a la izquierda, al centro o a la derecha, esta etiqueta si necesita una etiqueta de cierre.

<html>
    
    <head>
        <title>
            Saltos de linea y parrafós
        </title>
    </head>
    
    <body>
        Texto normal
        <br/><br/>Texto<br/>con<br/>saltos<br/>de<br/>linea<br/><br/>

        <p align="left">Texto a la izquierda</p>
        <p align="center">Texto al centro</p>
        <p align="right">Texto a la derecha</p>
    </body>
    
</html>

Y por ultimo, existe la etiqueta <pre>, que el contenido dentro de ella, se muestre con ese mismo formato dentro de el navegador, esta etiqueta si necesita una etiqueta de cierre.

<html>
    
    <head>
        <title>
            Saltos de linea y parrafós
        </title>
    </head>
    
    <body>
        Texto normal
        <br/><br/>Texto<br/>con<br/>saltos<br/>de<br/>linea<br/><br/>

        <p align="left">Texto a la izquierda</p>
        <p align="center">Texto al centro</p>
        <p align="right">Texto a la derecha</p>

        <pre>
        este texto
                tiene la etiqueta

p
    r
        e
        </pre>
    </body>
    
</html>

Este código se vería así: 

Espero y este tutorial les sea de utilidad, cualquier duda no duden en comentarla por favor. Muchas gracias por visitar este tutorial.

Fuente:
http://html.hazunaweb.com/105.php consultada el 07 de Julio del 2015.

Introducción a la programación en HTML

Hoy les traigo un pequeño tutorial de introducción a la programación en HTML.

¿Que es HTML?

HTML significa HyperText Markup Language (lenguaje de marcas de hipertexto). Es un lenguaje de programación interpretado, que se utiliza para la creación de paginas web.

Los documentos HTML son ficheros de texto plano (también conocidos como ASCII) que pueden ser editados con cualquier editor de texto. El nombre de los ficheros escritos en lenguaje HTML suelen tener la extensión html o htm.

Una etiqueta HTML consiste en un signo menor "<", un nombre de una directiva (orden o comando para el navegador), seguido de los parámetros o atributos y un signo mayor ">". Para cualquier etiqueta que indica un el inicio de un elemento hay otra de cierre que indica que esa directiva ya no debe actuar sobre el texto que sigue (en algunas ocasiones no es necesario ponerla, o no existe la etiqueta de cierre correspondiente).

<directiva parámetro="xxxx"> ... </directiva>

Sabiendo esto, comenzaremos a ver la sintaxis de la programación en HTML.

Un archivo html inicia con la etiqueta <html> y concluye con su respectiva etiqueta </html>

<html>
</html>

Las paginas html se dividen en 2 partes principales: head y body. 

La etiqueta <head> es donde se pone información sobre el documento, que no se ve en la pantalla del navegador, contiene a la etiqueta <title>, que es la encargada de mostrar el titulo de la pagina de internet, que se muestra en la pestaña del navegador. 

Mientras que la etiqueta <body> es la que contiene toda la información que se muestra en el cuerpo de la pagina de internet, como puede ser texto, imágenes, audios, vídeos, links, etc.

<html>
    
    <head>
        <title>
        </title>
    </head>
    
    <body>
    </body>
    
</html>

Algo que nos servirá al momento de programar para web es la identación del código, ya que esto nos ayudara a no perdernos entre nuestras etiquetas.

Y para concluir este tutorial este seria el código de nuestra "Primera pagina web":

<html>
    
    <head>
        <title>
            Mi primera pagina web
        </title>
    </head>
    
    <body>
        Hola Mundo!
    </body>
    
</html>

Que se vería así: 

Espero y este tutorial les sea de utilidad, cualquier duda no duden en comentarla por favor. Muchas gracias por visitar este tutorial.

Fuente:
http://www.juntadeandalucia.es/averroes/~04000134/informatica/html.html consultada el 07 de Julio del 2015.

Instalar Brackets en Windows

Hoy les traigo un pequeño tutorial de como instalar Brackets en Windows.

¿Qué es Brackets?

Brackets es un editor de texto de código abierto orientado a lenguajes de programación interpretados como lo son HTML, CSS, JavaScript.

¿Para que lo podemos utilizar?

Este editor de texto es muy útil ya que es capaz de detectar la sintaxis de muchos lenguajes de programación como lo son  C, C++, C#, CSS, Java, HTML, Python, Ruby, XML entre muchos otros, ademas de contar con la función de auto completar, que es muy útil al momento de programar.. Hace un momento mencionaba que Brackets es muy útil con los lenguajes de programación interpretados, ya que dichos lenguajes no necesitan un compilador, y eso es lo que vuelve a Brackets una herramienta muy útil y eficiente al momento de programar para web.

Para instalar Brackets primero debemos acceder a la siguiente pagina de internet:

Descarga Brackets desde aquí

Posteriormente seleccionamos el botón de  "Download Brackets":

Al seleccionar el botón comenzara la descarga automática. Una ves que el programa se termino de descargar, le damos doble click para comenzar la instalación y se mostrara la siguiente ventana:

 Presionamos el botón "Next" y nos mandara la siguiente ventana:

Presionamos la opción de "Install" y nos arrojara una ventana emergente donde nos preguntara si deseamos dejar que Brackets instale archivos en nuestro equipo, presionamos que si y comenzara la instalación. Al concluir con la instalación se mostrara por primera ves la interfaz de Brackets, que es la siguiente:

Y ahora ya contamos con Brackets listo para programar paginas web de manera rápida y sencilla:

Espero y este tutorial les sea de utilidad, cualquier duda no duden en comentarla por favor. Muchas gracias por visitar este tutorial.

Fuente:
http://html5facil.com/tips/brackets-io-un-editor-de-texto-open-source-por-adobe/ consultada el 07 de Julio del 2015.