Elaboración de páginas web Html, Css y JavaScript

1
Comprende lo que es el HTML.
 Este es el lenguaje de codificación con el cual se hacen las páginas web. Para ver cómo luce, ve a Internet Explorer y haz clic derecho para seleccionar "Ver código fuente de la página". Verás una página con códigos: eso es el HTML. El código es lo que ve el navegador para interpretarlo y armar una página web.
  • En Google Chrome, presiona "F12".
  • En Mozilla Firefox, presiona "Ctrl+U" para ver el código fuente de la página.
  • En Safari, selecciona Ver > Ver fuente (u "Opción+Comando+U").
  • En Internet Explorer, la opción del menú "Ver" que deberás elegir es "Origen".
2
Comienza con una página lo más sencilla posible, sino te verás abrumado por la sintaxis y los lenguajes de script.
  • Es importante recordar que estarás escribiendo la información entre una etiqueta de apertura y una de clausura, ambas de HTML. Una etiqueta de apertura se verá así: <____>. Una etiqueta de clausura se verá así: </____>. Al final, reemplazarás el "____" por un código.

3  asegurate de escoger el software que no sea tan complicado para la elaboracion de la pagina


para aquellas personas que apenas comienzan con la elaboración de paginas web en HTML lo mejor sería que utilices note pad (bloc de notas) es mucho mas fácil en su manejo.
igualmente aquí te dejo algunos softwares que podrías utilizar para poner en práctica las paginas web: 

  • BlueGriffon
  • sublime text
  • Dreamweaver
  • Artisteer
4
Dile al navegador qué lenguaje vas a usar. Escribe <html>. Esta es la primera etiqueta que deberás escribir, la cual le indicará a la computadora que empezarás a hacer una página web. También se cerrará al final, así que al final del documento, ciérralo con <>. Esto finalizará la página web.

5Añade el encabezado (head) de la página como se muestra en el gráfico.



6 Ponle un título a la página. El título es importante, porque les dará a los usuarios una idea del tema de la página. Además, cuando los usuarios le pongan un marcador al sitio, el título es lo que único que verán en su lista de marcadores. El código HTML para el título es: <title>. Ciérralo al final del título escribiendo </title>. El título solo se mostrará en la pestaña, no será el título de la página en sí.

7 Haz el cuerpo de la página. Escribe <body> para abrir la etiqueta del cuerpo. Luego ciérrala con la etiqueta </body>. La información para la página web irá entre <body> y </body>.

  • Para darle un color de fondo a la página, podrás añadirle un estilo al cuerpo. En vez de solamente escribir, escribe <body style="background-color:silver">. Podrás probar con un color distinto o incluso con un código hexadecimal.Las palabras entre comillas se conocen como "atributos". ¡Deberán estar rodeados por comillas!
8 Añade algunas imágenes. Si quieres colocar alguna imagen de Internet a tu página web, el código HTML para las imágenes será: <img src="URL">. La etiqueta de clausura es: </img>, pero es opcional.


9 Añade algunas imágenes. Si quieres colocar alguna imagen de Internet a tu página web, el código HTML para las imágenes será: <img src="URL">. La etiqueta de clausura es: </img>, pero es opcional.

10 Guarda tu trabajo.


Ve a "Guardar como", ingresa un nombre de archivo que termine en la extensión .html (por ejemplo: "archivodeprueba.html") y escoge "Todos los archivos" o "text" en Tipo de archivo. No funcionará si no se siguen estos pasos. Ahora ve adonde lo hayas guardado y haz doble clic para abrirlo. Tu navegador predeterminado se abrirá con tu propia página web.


en este vídeo puedes observar mejor la creación de la pagina web.

ELABORACIÓN DE PAGINAS WEB CON CSS

PASO 1: ESCRIBIR EL CÓDIGO HTML

Para este tutorial, te sugiero que utilices las herramientas más sencillas. Por ejemplo, Notepad (Windows), TextEdit (Mac) o HTML Kit, serán suficiente. Una vez comprendido lo básico, probablemente se quieran utilizar herramientas más complicadas, o incluso programas comerciales como Style Master, Dreamweaver o GoLive. Pero para el desarrollo de una primera hoja de estilos, es mejor no distraerse con características avanzadas de otras herramientas.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
</head>

<body>

<!-- Menú de navegación del sitio -->
<ul class="navbar">
  <li><a href="indice.html">Página principal</a>
  <li><a href="meditaciones.html">Meditaciones</a>
  <li><a href="ciudad.html">Mi ciudad</a>
  <li><a href="enlaces.html">Enlaces</a>
</ul>

<!-- Contenido principal -->
<h1>Mi primera página con estilo</h1>

<p>¡Bienvenido a mi primera página con estilo!

<p>No tiene imágenes, pero tiene estilo.
También tiene enlaces, aunque no te lleven a
ningún sitio…

<p>Debería haber más cosas aquí, pero todavía no sé
qué poner.


</body>
</html>
Si tienes alguna duda con el significado de algunos de estas etiquetas aqui 
te muestro lo que significan algunos:
    

  • “ul” representa una lista con un hipervínculo por cada elemento. Esto mostrará nuestro “menú de navegación del sitio” con enlaces a otras páginas (ficticias) del sitio Web. Supuestamente, todas las páginas de nuestro sitio Web tienen un menú similar.
    • 

  • Los elementos “h1” y “p” componen el único contenido de esta página, mientras que la firma al final (“address”) será la misma para todas las páginas del sitio.
    • 



PASO 2: AÑADIR ALGUNOS COLORES



Necesitamos añadir un elemento <style> en el archivo HTML. La hoja de estilo estará en el interior de ese elemento. Volvamos entonces a la ventana del editor y añadamos las siguientes cinco líneas en la parte de la cabecera del archivo:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[etc.]




Las líneas que tienes que añadir están marcadas en rojo. La primera línea dice que eso es una hoja de estilo y que está escrita en CSS ("text/css"). La segunda línea indica que hemos añadido estilo al elemento "body". La tercera línea establece el color del texto como morado y la siguiente línea lo que hace es darle al fondo una especie de amarillo verdoso.





Las hojas de estilo en CSS están compuestas de reglas. Cada regla tiene tres partes:



    

  1. el selector (en el ejemplo sería: “body”), el cual le dice al navegador la parte del documento que se verá afectada por la regla;
    2. 

  2. la propiedad (en el ejemplo, 'color' y 'background-color' son ambas propiedades), las cuales especifican qué aspecto del diseño va a cambiarse;
    3. 

  3. y el valor ('purple' y '#d8da3d'), el cual da el valor para la propiedad.
    4. 



PASO 3: AÑADIR TIPO DE LETRA
debes tener en cuenta que existen multitudes de fuentes, pero aveces algunos ordenadores no abren la pagina con el mismo tipo de letra, así que debemos escoger una bastante usual.
    

  • Times New Roman
    • 

  •  Georgia 
    • 

  • Helvetica 
    • 

  • Geneva
    • 

  • Arial y SunSans-Regular son bastante similares.
    • 






Añade en el editor las siguientes lineas:




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]






Si guardas otra vez el archivo y haces clic en "Actualizar" en el navegador, deberían aparecer tipos de letra diferentes para el encabezado y para el otro texto.









paso 4: añadir una barra de NAVEGACIÓN 

La lista que aparece al principio de la página HTML será más adelante un menú de navegación. Algunos sitios Web tienen un menú al principio o en un lado de la página, y éste debería tenerlo también. Pondremos uno a la izquierda, ya que es más interesante ponerlo ahí que arriba…
El menú ya está en la página HTML. Es la lista <ul> que se encuentra al principio. Los enlaces que tiene no funcionan ya que nuestro "sitio Web", hasta el momento, sólo tiene una página, pero eso no es importante ahora. Por supuesto, en un sitio Web real no debería haber ningún enlace roto.

AÑADE LO SIGUIENTE:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
ten en cuenta lo siguiente:
'position: absolute' indica que el elemento ul está situado independientemente de cualquier texto que esté antes o después en el documento. 'left' y 'top' indican cuál es la posición. En este caso, está a 2em de la parte de arriba de la ventana y a 1em del lado izquierdo.'2em' significa 2 veces el tamaño del tipo de letra actual. Por ejemplo, si el menú se muestra con un tipo de letra de 12 puntos, entonces '2em' es 24 puntos. 'em' es una unidad muy útil en CSS ya que se puede adaptar automáticamente al tipo de letra que el usuario esté utilizando.
PASO 5: DAR ESTILO A LOS ENLACES
En este paso lo que se hará es cambiar algunas cosas de la pagina, por ejemplo "el estilo a los enlaces" Como el color en que se harán visibles dentro de tu pagina,(usualmente se utilza el color azul para los enlaces). también quitaremos los puntos que indican los diferentes elementos de la lista y moveremos los elementos a la izquierda, donde estaban antes los puntos. 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>


En HTML, los hipervínculos se crean con elementos <a>, por lo que para especificar el color, necesitamos añadir una regla de estilo para "a". Para diferenciar los enlaces visitados de los no visitados, CSS proporciona dos "pseudo-classes" (:link y :visited). Se llaman “pseudo-classes” para distinguirlas de los atributos de clase, que aparecen directamente en HTML, por ejemplo, class="navbar".






PASO6:AÑADIr UNA LÍNEA HORIZONTAL







El último elemento a añadir en la hoja de estilo es una regla horizontal para separar el texto de la firma que se encuentra al final. Utilizaremos 'border-top' para añadir una línea punteada encima del elemento <address>:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>


ya casi vamos terminando la pagina, solo falta que ver cómo se pone la hoja de estilo en un archivo diferente para que de esta forma otras páginas puedan utilizar el mismo estilo.


PASO 7: PONER LA HOJA DE ESTILO EN UN ARCHIVO SEPARADO







Ahora tenemos un archivo HTML con una hoja de estilo en su interior. Pero si nuestro sitio crece desearemos añadir más páginas que compartan el mismo estilo. Hay un método más adecuado que copiar la hoja de estilo dentro de cada página y que es: colocar la hoja de estilo en un archivo separado, haciendo que todas las páginas estén enlazadas a esa hoja.



Para separar la hoja de estilo del archivo HTML, necesitamos crear otro archivo de texto, que esté vacío. Puedes escoger "Nuevo" del menú Archivo del editor para crear una ventana vacía.



Después, corta y pega en la nueva ventana todo lo que hay dentro del elemento <style> del archivo HTML. No copies las etiquetas <style> y </style>. Éstas pertenecen a HTML, no a CSS. En la nueva ventana del editor, deberías tener la hoja de estilo completa:


body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }




Elige “Guardar como…” del menú Archivo, comprueba que está en el mismo directorio/carpeta que el archivo mipagina.html, y guarda la hoja de estilo como “miestilo.css”.



Vuelve a la ventana que muestra el código HTML. Borra todo lo que hay desde la etiqueta <style> hasta </style>, ambas inclusive, y reemplázalo por un elemento <link> de la siguiente forma:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <link rel="stylesheet" href="miestilo.css">
</head>

<body>
[etc.]




De esta forma, se le indicará al navegador que la hoja de estilo se encuentra en el archivo llamado "miestilo.css". Al no especificarse ningún directorio, el navegador mirará en el mismo directorio en el que se encuentra el archivo HTML.



Si has guardado el archivo HTML y lo has actualizado en el navegador, no deberías apreciar ningún cambio en el aspecto de la página. Ésta sigue guardando el mismo estilo, pero ahora viene establecido por el archivo externo.




PROGRAMACIÓN CON JAVASCRIPT



¿Qué es el famoso lenguaje Javascript?

Javascript es un sencillo lenguaje de programación, creado y diseñado para utilizarse en las páginas web.
Permite añadirles muchas funcionalidades, que las hacen más dinámicas, interactivas, útiles y atractivas.
Podrás comprobar muchos efectos útiles más abajo en esta misma página, incluso crearlos tu mismo, copiando los códigos.






































































No hay comentarios:















Publicar un comentario


















        

      









Suscribirse a:
Entradas (Atom)