viernes, 26 de febrero de 2016

¡Tu primera pagina web!

En este tutorial, veremos la manera mas rapida de crear un archivo con extensión .html, es decir nuestra primera pagina web.

Para empezar haremos un click derecho sobre nuestro escritorio y crearemos una carpeta.

Adentro de la carpeta crearemos un archivo nuevo de texto.

Lo llamaremos Index.html.

Si nos aparece un mensaje con la leyenda que el archivo ya no se podrá usar, hacemos click on yes o si en español.


Ahora ya tenemos nuestra página web, si damos click en este archivo se abrirá en el navegador de nuestra elección, notaremos que solo es un documento en blanco.

Editando nuestra primer página web.

Hacemos click derecho y seleccionamos -> abrir con -> Bloc de notas o notepad

La estructura básica del código HTML es la siguiente:




Una vez escrito el código en nuestro archive Index.html, lo guardamos haciendo click en File -> Save, o simplemente presionando la tecla CTRL+S

Para nuestro ejemplo utilizaremos un formato de un curriculum vitae, el cual se verá así una vez terminado:



El código es el siguiente:


<html>
    <head>
          <title> Mi primera página web. </title>
    </head>
          <body>
                   <h1> Curriculum Vitae </h1> 
                      <hr>
                     <h2>Información Personal</h2>
                   <p> <strong> Nombre: </ strong > Javier Gonzalez </ p >
                  <p> <strong>Ocupación: </ strong > Diseñador web </ p >
                  <p> <strong> Fecha de nacimiento: </ strong > 01/01/1900 </ p >
                  <p> <strong>Dirección: </ strong > </ br >
                 Calle las lomas 5435 </br>
                 Colonia 1 </br>
                  <hr>
              <h2>Educación</h2>
              <ul>
                  <li> UPV</li>
             <ul>
                <li> Information Tech </li>
           </ul>
          </ul>
           <hr>
               <h2> Habilidades</h2>
               <p> Conocimiento en tecnologías web </p>
                <hr>
                 <h2> Trabajos anteriores</h2>
<ul>
      <li>  Diseñador web </li>
                     <li> Tecnologías </li>
                   <li>  Ejemplo 3 </li>
             <ul>
   <body>
<html>



Explicación:


HTML es un lenguaje de etiquetas para describir documentos web, o bien páginas web, que juntamente estructuran nuestra página.

Las etiquetas HTML son palabras clave con corchetas angulares <etiqueta> </etiqueta>, la última etiqueta “</etiqueta>” se cierra con una diagonal antes de la palabra clave.

Los navegadores web, solo interpretan estas etiquetas, no se mostrara literalmente, para esto utilizamos editores HTML, como Dreamweaver, Notepad, Notepad++, entre otros.

<html>: Hyper Text Markup Languaje, con esta etiqueta, estamos mandando la instrucción que se trata de una pagina web.
<head>:  Provee Información acerca del archive HTML.
<title>: Es el título de nuestra página web.
<body>: Es el cuerpo de nuestro contenido, como el mensaje en una carta.
<h1>: Describe una cabecera
<h2>: Describe una cabecera de menor tamaño que h1
<p>: El texto entre <p> y </p>, describe un parágrafo.
<strong>: Texto tipo Bold
<br>: Salto de línea.
<hr>
<ul>: Una lista desordenada empieza con la etiqueta <ul>, cada lista debe empezar con la etiqueta <li>

<li>: Lista las palabras dentro de la etiqueta <ul>

Hasta aquí este tutorial, espero que haya sido de su agrado y si tienen alguna duda o comentario favor de escribir en la sección de comentarios, ¡Hasta Luego!

1 comentario: