La guía para principiantes de diseño web Parte 1

A lo largo de esta serie, aprenderá cómo crear un sitio web utilizando las últimas técnicas de diseño web (HTML5 y CSS3). Esta serie está dirigida a aquellos con absolutamente ningún conocimiento previo de diseño web..

También disponible en esta serie:

La guía para principiantes de diseño web: Parte 1
La guía para principiantes de diseño web: Parte 2
La guía para principiantes de diseño web: Parte 3

Navegador web moderno

Como vamos a crear nuestras páginas web utilizando los últimos estándares (HTML5 y CSS3), necesitamos un navegador web moderno que pueda comprender las últimas tecnologías web..

Las versiones del navegador Internet Explorer de Microsoft debajo de IE8 simplemente no lo cortarán. Si está utilizando IE7 o inferior, descargue uno de los navegadores web a continuación.

Si ya está utilizando un navegador web diferente, verifique que cumpla con los requisitos mínimos a continuación para obtener el mejor rendimiento..

Mozilla Firefox 3+
Google Chrome
Apple Safari 4+
Ópera 10+
Microsoft Internet Explorer 8

"¿Por qué necesito un navegador determinado?" Tu puedes preguntar. Bueno, como HTML5 es relativamente nuevo, los navegadores antiguos no entienden cómo leer el código y convertirlo en una página web correctamente.

Editor de texto

Los archivos HTML son simplemente archivos de texto con una extensión .html, por lo que no necesita ningún software especializado o costoso como Dreamweaver para crearlos. De hecho, su computadora viene preinstalada con un software en el que puede escribir páginas web: 'Bloc de notas' en Windows o 'TextEdit' (en 'modo de texto sin formato') en Mac.

Mientras que el software preinstalado en su computadora hará, Está lejos de ser el mejor. Recomiendo descargar Notepad ++ si estás en Windows o TextWrangler en Mac. Ambos programas son completamente gratuitos y ofrecen una serie de funciones útiles para los desarrolladores web, como el resaltado de sintaxis, la edición de archivos con pestañas y la numeración de líneas..

Para los usuarios de Mac, recomiendo comprar TextMate, Coda o Espresso. Usuarios de Windows, intente E-TextEditor.

Introducción a HTML

Todos los sitios web en Internet están escritos en lenguaje de marcado de hipertexto (HTML). El lenguaje HTML ha crecido y se ha extendido a lo largo de los años a medida que la web se ha vuelto más común y los sitios web necesitan nuevas funciones.

El lenguaje HTML es mantenido por el World Wide Web Consortium (W3C) y la última especificación es actualmente HTML 5, que ha agregado una serie de nuevas características al lenguaje y está ayudando a allanar el camino a páginas web más interactivas y con más funciones.

Una simple página HTML se ve así:

Hola Mundo!

Hola y bienvenidos a mi sitio web.

El código anterior creará el siguiente sitio web cuando se abra en un navegador web:

HTML es un lenguaje muy simple de aprender. Simplemente está insertando 'etiquetas' en su contenido que describen cómo cada bit del contenido debe mostrarse en un navegador web.
Por ejemplo, insertaría etiquetas en su página donde desea que comiencen los nuevos párrafos de texto, para que el texto sea un encabezado dentro del documento, para insertar imágenes, enlaces a otras páginas en su sitio o en cualquier otro lugar de Internet, etc..

Las etiquetas HTML están envueltas dentro < > paréntesis angulares. Observando el ejemplo anterior, verá que cada 'etiqueta' es un par. Tenemos en la parte superior, y en el fondo.
informa al navegador web que todo dentro del par de etiquetas es código HTML. los La etiqueta le dice al navegador que el contenido HTML ha finalizado. La 'barra' en la última etiqueta denota esto como la etiqueta 'cierre'.

NOTA: los La línea debe incluirse en la parte superior de cualquier HTML5 para que se considere código "válido". Esta línea le indica al navegador web el tipo de documento del resto de la página, es decir, en qué versión de HTML está marcado el documento para que el navegador pueda procesarlo correctamente..

los ... La sección que sigue inmediatamente es donde se coloca información sobre la página web que no se mostrará en la página principal, pero contiene metadatos sobre su página para el navegador..

Dentro de En la sección, tenemos el texto "¡Hola mundo!" envuelto dentro ... etiquetas.
literalmente contiene el título de la página web actual que utiliza el navegador web para nombrar la ventana / pestaña:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_4.png"><br> <p>Siguiendo el <head> seccion tenemos <body>. Aquí es donde se coloca el contenido real de su página web. En el cuerpo tenemos una <p> etiqueta con un pequeño texto de bienvenida dentro.<br><p> Marcar un párrafo en tu página. Por ejemplo:</p> <pre> <p>Érase una vez en una tierra muy, muy lejana, vivía una princesa que vivió feliz para siempre..</p> <p>El fin.</p></pre> <p>Marca dos párrafos de texto. Si fuéramos a ver eso en un navegador, veremos lo siguiente:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_5.png"><br> <p>Quizás se pregunte por qué necesitamos estos <p> y </p> Etiquetas para mostrar un párrafo. Bueno, si no lo hicimos, y escribimos la página web así:</p> <pre> Érase una vez en una tierra muy, muy lejana, vivía una princesa que vivía feliz para siempre. El fin.</pre> <p>La página se verá así en un navegador:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_6.png"><br> <p>Como puede ver, el navegador ignora cualquier formato que hagamos en el archivo. Podríamos escribir nuestra página web de ejemplo de la siguiente manera y se mostrará lo mismo en el navegador:</p> <pre> <!doctype html><html><head><title>Hola Mundo!

Hola y bienvenidos a mi sitio web

El navegador solo está interesado en lo que las etiquetas HTML le dicen que haga. Ignorará cualquier espacio en blanco que incluya en el documento (espacios adicionales, pestañas, nuevas líneas, etc.)

Creando una página web simple

Ahora que comprende los conceptos básicos de HTML, ¡hagamos nuestra primera página web! La imagen de arriba es la apariencia de esta página..

Cree una nueva carpeta en algún lugar de su computadora y llámela 'html-from-scratch'. Usando su editor de texto preferido, cree un nuevo archivo en blanco y guárdelo en esta carpeta como 'my-first-webpage.html'.
Ingrese lo siguiente en el archivo:

    HTML desde cero

Lo anterior es un diseño de archivo HTML 5 básico. Hemos declarado el tipo de documento en la primera línea, abrimos nuestra y etiquetas y establezca "HTML From Scratch" como título de la página. Luego cerramos la cabeza y abrimos el cuerpo..

En la línea 7 hemos incluido un comentario. Use comentarios para dejar información adicional en su código que no se mostrará en su página web. Marque un comentario envolviendo su texto dentro etiquetas.

Finalmente, cerramos nuestras etiquetas de cuerpo y html abiertas para finalizar el documento.

Encabezamiento

Eliminar el línea de su código fuente y escriba lo siguiente:

  HTML desde cero

los La etiqueta es un elemento nuevo introducido en HTML5 que existe para marcar y estructurar la sección 'encabezado' de una página web. El encabezado es la sección superior de una página web, usualmente donde el nombre del sitio es.

Antes de HTML5 utilizamos

(o algo similar), pero no entraré en detalles sobre las especificaciones más antiguas de HTML ya que estamos aprendiendo el último estándar.

IMPORTANTE: no se debe confundir con . Ambas son etiquetas completamente diferentes.

Dentro de nuestro encabezado incluimos un

etiqueta. H1 se utiliza para marcar el encabezado principal en su página (en este caso, el nombre de nuestro sitio). HTML contiene etiquetas de encabezado del 1 al 6, con

siendo el título más grande y más importante de la página hasta

.

Navegación

A continuación, vamos a marcar el menú de navegación para el sitio web. Siguiendo el cierre , escriba lo siguiente:

   Casa
 Nettuts
 Google

Este fragmento de código puede parecer un poco aterrador, pero vamos a desglosarlo. El bloque de arriba marca un área de navegación (

) que contiene una lista desordenada (

).
es un nuevo elemento HTML5 para marcar un área de navegación en un sitio web. Esto generalmente se usa para mantener el menú de navegación principal de su sitio web, sin embargo, dado que solo estamos creando una única página web en este momento, solo haremos un enlace a Nettuts y Google.
- item (elemento de la lista) es un nuevo punto en la lista.
  
  Guarde su archivo y abra 'my-first-webpage.html' en su navegador web. Deberías ver esto:
  
  Como puedes ver, la etiqueta está funcionando correctamente, la <h1> la etiqueta muestra un título grande en la parte superior de la página, y nuestra lista de navegación de punto de bala se muestra correctamente.</p> <p>Puede notar que tenemos un problema con nuestra lista de navegación en este momento: los elementos no son hipervínculos y, por lo tanto, no se puede hacer clic. Para solucionar esto, cambie los tres elementos de la lista (<li>) a:</p> <pre> <li> Casa </li> <li> Nettuts </li> <li> Google </li></pre> <p>Dentro de cada uno de nuestros <li> Lista de artículos, hemos hecho el texto en hipervínculos. los <a> la etiqueta crea un ancla: un hipervínculo a otra página de su sitio web u otra ubicación en Internet.</p> <p>Para que la etiqueta de anclaje se vincule realmente en algún lugar, le proporcionamos la dirección para enlazar dentro de un parámetro 'href'. Los parámetros van dentro de la etiqueta de apertura (<a>…).<br>En nuestra página web, el enlace 'Inicio' va a la página actual ('my-first-webpage.html'), 'Nettuts' va a Nettuts (http://net.tutsplus.com) y el enlace 'Google' va a, lo has adivinado, google.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_10.png"><br> <hr> <h2>Contenido principal</h2> <p>Siguiendo el etiqueta, escriba lo siguiente:</p> <pre> <section> <p>Este es el contenido principal de mi sitio web..<br /> Aquí hay algunas cosas sobre mí:</p> <p>Pellentesque morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </section></pre> <p>los <section> La etiqueta también es nueva en HTML5 (solíamos usar algo como <div>) y, literalmente, crea una 'sección' de contenido en la página web. En este caso, estamos usando <section> Para marcar la sección principal de la página donde va nuestro contenido..</p> <p>En el interior, tenemos dos párrafos que contienen texto aleatorio. Aviso en el primer párrafo tenemos una <br /> etiqueta. Esto es un salto de línea; en otras palabras, el texto siguiente se mostrará en una nueva línea, pero en el mismo párrafo.</p> <p>los <br /> La etiqueta es especial ya que no tiene una etiqueta de cierre. En su lugar, la barra inclinada de cierre ('/') se incluye al final de la etiqueta. Esto se debe a que un salto de línea no contiene contenido, existe únicamente con fines estéticos, de lo contrario estaríamos escribiendo <br></br> que es un poco inútil.</p> <p>Varias otras etiquetas también son de cierre automático, como <img /> y <hr />, que veremos más adelante.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_11.png"><br> <hr> <h2>Imágenes</h2> <p>Dentro de su carpeta 'html-from-scratch', cree una nueva carpeta llamada 'images'. Guarde la imagen de abajo en esa carpeta (haga clic con el botón derecho, Guardar imagen como):</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1.jpg"><br> <p>Ahora, de vuelta al contenido principal del sitio web, antes del cierre. </section> etiqueta, ingrese lo siguiente para insertar la imagen en nuestra página:</p> <pre> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_2.jpg" alt="Envato Imagen del editor" /></pre> <p>los <img /> La etiqueta, al igual que la etiqueta de anclaje, se cierra automáticamente y acepta la mayoría de sus contenidos como parámetros en la etiqueta de apertura.<br>src = "..." significa "fuente" (la ruta a la imagen). La imagen se puede almacenar en otro lugar en Internet, o localmente con la página web. Aquí, hemos establecido la etiqueta para mostrar la imagen que guardamos en nuestro directorio de imágenes.</p> <p>alt = "..." contiene el 'Texto alternativo' que se mostrará si la imagen no se carga. Por lo general, usted describe brevemente la imagen aquí..</p> <p>Echa un vistazo a la página ahora. La imagen debe mostrar:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_12.png"><br> <hr> <h2>La barra lateral</h2> <p>A continuación, vamos a marcar la barra lateral de nuestra página web. Introduzca la siguiente <strong>después</strong> el cierre </section> etiqueta:</p> <pre> <aside> <hr /><h2>Barra lateral</h2> <p>Pellentesque morbi tristique senectus et netus et malesuada fames ac turpis egestas:</p> <ul> <li>Lorem ipsum dolor sit amet, consultor adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> </aside></pre> <p><aside> es una etiqueta HTML5 para marcar una sección de su página web aparte del contenido principal, como una barra lateral, que contiene contenido de información menos importante que la sección principal de la página.</p> <p>Dentro de nuestra barra lateral, tenemos un encabezado de tercer nivel (H3) titulado "Barra lateral", un párrafo que contiene un texto de marcador de posición aleatorio y luego una lista desordenada con 3 elementos.</p> <p>Eche un vistazo a su página, y debería ver el contenido anterior directamente debajo de lo que colocamos en el <section> etiqueta. No se preocupe de que la barra lateral no sea realmente una barra lateral, esta es la forma en que se diseñó HTML. Más sobre eso en breve.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_13.png"><br> <hr> <h2>El pie de página</h2> <p>En el pie de página, en la parte inferior de nuestro sitio web, incluiremos un pequeño aviso de copyright. Algunos sitios web llevan su pie de página un poco más lejos y otros detalles como un mapa del sitio.</p> <pre> <footer> <p> Copyright © Tu Nombre 2010.<br /> Parte de un tutorial para Nettuts+. </p> </footer></pre> <p><footer> También es una nueva etiqueta introducida en HTML5. Probablemente esté familiarizándose con esto ahora, y debería notar que hemos incluido un párrafo en el pie de página que contiene nuestro aviso de copyright y un salto de línea, seguido de un enlace para volver a Nettuts.</p> <p><strong>NOTA:</strong> ¿Ves ese '©' en nuestro pie de página? Esa es una entidad HTML. Esta entidad mostrará un símbolo de copyright (©) cuando se represente en el navegador.<br>Lea más sobre las entidades de caracteres HTML en Wikipedia.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_14.png"><br> <hr> <h2>En la parte 2</h2> <p>Con esto concluye la primera parte de esta serie. En solo un corto espacio de tiempo, ¡ya has logrado mucho! Has aprendido varias etiquetas HTML básicas y has codificado a mano tu primera página web.</p> <p>En la siguiente parte, aprenderemos a usar el código HTML de socio-en-crimen-para hacer la página web. <em>Mira</em> agradable, y convierte la página básica sin estilo en nuestro producto final:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_7.png"><br> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/code">Código</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/code/the-beginners-guide-to-web-design-part-2.html">La guía para principiantes de diseño web Parte 2</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-2_24.png');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/computers/the-beginners-guide-to-using-tex-in-os-x.html">La guía del principiante para usar TeX en OS X</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_19/the-beginners-guide-to-using-tex-in-os-x_7.png');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">es.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Información interesante y consejos útiles sobre programación. Desarrollo de sitios web, diseño web y desarrollo web. Tutoriales de Photoshop. Creación de juegos de ordenador y aplicaciones móviles. Conviértete en un programador profesional desde cero. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Buscar..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>