Programación

Cómo hacer un sitio web para principiantes

Cómo hacer un sitio web para principiantes / Programación

¿Siempre has querido hacer un sitio web? Tal vez haya leído algunos de nuestros HTML (comprensión de HTML 5 pasos para comprender el código HTML básico 5 pasos para comprender el código HTML básico Leer más) y tutoriales de CSS 5 pasos para aprender CSS y convertirse en un brujo de CSS de Kick-Ass 5 pasos para bebé Aprender CSS y convertirse en un brujo CSS CSS es el cambio más importante que han visto las páginas web en la última década, y allanó el camino para la separación de estilo y contenido. En la forma moderna, XHTML define la estructura semántica ... Leer más, pero no sabe cómo usar esos idiomas en un proyecto más grande.

Hoy los guiaré a través del proceso de creación de un sitio web completo desde cero. No se preocupe si esto parece una tarea difícil, lo guiaré en cada paso del camino..

Producirá este sitio web utilizando HTML, CSS y JavaScript con un toque de jQuery (guía de jQuery Guía básica de JQuery para programadores de Javascript Guía básica de JQuery para programadores de Javascript Si usted es un programador de Javascript, esta guía de JQuery le ayudará empiezas a codificar como un ninja. Leer más). No haras nada De Verdad Al filo de la sangre, este código debería funcionar bastante bien en la mayoría de los navegadores modernos..

Si no está seguro de cualquier CSS, consulte la guía de CSS en W3Schools.com.

El diseño

Aquí está el diseño de este sitio web. Eche un vistazo a una imagen de alta resolución si desea un mejor aspecto, o mejor aún, descargue el proyecto completo aquí.

Diseñé este sitio web para una empresa ficticia en Adobe Photoshop CC 2017. Si está interesado, asegúrese de obtener el archivo .PSD de la descarga del paquete. Esto es lo que obtienes en el archivo de Photoshop:

Dentro de la PSD, encontrará todas las capas agrupadas, nombradas y codificadas por colores:

Necesitarás algunas fuentes instaladas para que las cosas se vean correctas. El primero es Font Awesome, usado para todos los íconos. Las otras dos fuentes son PT Serif y Myriad Pro (incluidas con Photoshop). Si no está seguro de cómo instalar fuentes, lea nuestra guía Cómo instalar fuentes en Windows, Mac y Linux Cómo instalar fuentes en Windows, Mac y Linux Leer más .

No se preocupe si no tiene Photoshop, no lo necesita para continuar..

Codigo inicial

Ahora que el diseño es claro, ¡comencemos a codificar! Crea un nuevo archivo en tu editor de texto favorito (estoy usando Sublime Text 3). Guardar esto como index.html. Puede llamar a esto lo que quiera, la razón por la que muchas páginas se llaman índice se debe a la forma en que funcionan los servidores web. La configuración predeterminada para la mayoría de los servidores es servir la página index.html si no se especifica ninguna página.

Si no desea conocer los detalles, vaya a buscar el código completo de la descarga..

Aquí está el código que necesitas:

    Medios de ruido

Esto hace varias cosas:

  • Define el HTML mínimo necesario requerido.
  • Define un título de página de “Medios de ruido”
  • Incluye jQuery alojado en Google CDN (¿qué es una CDN? ¿Qué son las CDN y por qué el almacenamiento ya no es un problema? ¿Qué son las CDN y por qué el almacenamiento ya no es un problema? ”Las CDN hacen que Internet sea más rápido y los sitios web accesibles incluso cuando se escala a millones de usuarios. , el ancho de banda cuesta dinero; aquellos de nosotros con contratos limitados sabemos que muy bien. No solo ... Leer más).
  • Incluye Font Awesome alojado en Google CDN.
  • Define un estilo etiqueta para escribir tu CSS en.
  • Define un guión etiqueta para escribir tu JavaScript en.

Guarde su archivo de nuevo y ábralo en su navegador web. Probablemente no te darás cuenta de mucho, y ciertamente no se verá como un sitio web todavía..

Observe cómo es el título de la página. Medios de ruido. Esto se define por el texto dentro de la título etiqueta. Esta tiene estar dentro del cabeza etiquetas.

El encabezado

Vamos a crear el encabezado. Esto es lo que parece:

Vamos a empezar con ese pedacito gris en la parte superior. Es un gris claro con un ligero gris oscuro debajo. Aquí hay un primer plano:

Añade este HTML dentro de la cuerpo etiqueta en la parte superior:

Mientras estés aquí, vamos a desglosar esto. UNA div es como un contenedor para poner otras cosas. Este “otras cosas” Puede haber más contenedores, texto, imágenes, cualquier cosa realmente. Hay algunas restricciones sobre lo que puede ir en ciertas etiquetas, pero los divs son cosas bastante genéricas. Tiene un carné de identidad de barra superior. Esto se usará para personalizarlo con CSS, y apuntarlo con JavaScript si es necesario. Asegúrese de que solo tenga un elemento con un ID en particular; deben ser únicos. Si desea que varios elementos tengan el mismo nombre, use una clase en su lugar, es para lo que están diseñados! Aquí está el CSS que necesita para personalizarlo (colóquelo en la parte superior dentro de su estilo etiqueta):

html, cuerpo margen: 0; relleno: 0; Familia tipográfica: 'Helvetica', 'Arial'; / * fuentes iniciales * / # barra superior ancho: 100%; fondo: # F1F1F1; / * gris claro * / borde inferior: 1px sólido # D4D4D4; / * gris oscuro "subrayado" * / altura: 25 px;

Observe cómo se utiliza el signo de hash (#, hashtag, signo de número) antes del nombre. Esto significa que el elemento es un ID. Si estuviera usando una clase, en su lugar usaría una parada completa (.). los html y cuerpo las etiquetas tienen su relleno y margen establecido en cero. Esto evita cualquier problema de espaciado no deseado.

Es hora de pasar al logo y la barra de navegación. Antes de comenzar, necesita un contenedor para poner este contenido. Hagamos de esto una clase (para que pueda reutilizarlo más adelante), y como está no Un sitio web receptivo, que sea de 900 píxeles de ancho..

HTML:

CSS:

.envoltura normal ancho: 900px; margen: 0 auto; relleno: 15px 40px; fondo: rojo; desbordamiento: auto;

Puede ser difícil saber qué está pasando hasta que termine el código, por lo que puede ser útil agregar un fondo de color (temporal) para ver qué está pasando:

fondo: rojo;

Es hora de crear el logo ahora. Se necesita fuente impresionante para el propio icono. Font Awesome es un conjunto de iconos empaquetados como una fuente vectorial, ¡increíble! El código inicial de arriba ya configura Font Awesome, así que todo está listo para funcionar!

Añadir este HTML dentro la envoltorio normal div:

  
Medios de ruido

CSS:

.logo-icon color: # 000000; tamaño de fuente: 60pt; flotador izquierdo;  h1 flotar: izquierda; margen: 21px 0 0 25px;

No se preocupe por que las otras fuentes no coincidan con el diseño, las ordenará más adelante. Si desea utilizar diferentes íconos, diríjase a la página de íconos de fuentes impresionantes y luego cambie fa-volumen hacia abajo al nombre del icono que desea utilizar.

Al pasar a la barra de navegación, utilizará una lista desordenada (UL) para esto. Añadir este HTML después la logo-contenedor (pero todavía dentro de la envoltorio normal):

los href Se utiliza para enlazar a otras páginas. Este sitio web tutorial no tiene otras páginas, pero puede poner el nombre y la ruta del archivo (si es necesario) aquí, por ejemplo. reviews.html. Asegúrate de poner esto entre comillas dobles.

Aquí está el CSS:

#navbar list-style-type: none; / * eliminar puntos de viñeta * / margen: 29px 0 0 0; relleno: 0; flotar derecho; tamaño de letra: 16 puntos;  #navbar li display: inline; / * hacer elementos horizontales * / #navbar li a: link, #navbar li a: visitada, #navbar li a: active text-decoration: none; / * eliminar subrayado * / color: # 000000; relleno: 0 16px 0 10px; / * espacios espaciados separados * / margen: 0; borde derecho: 2px sólido # B4B4B4; / * divider * / #navbar li a: link.last-link / * remove divider * / border-right: 0px;  #navbar li a: hover / * cambia de color al mover el mouse (mouseover) * / color: # EB6361;

Este CSS comienza con un lista desordenada. A continuación, elimina los puntos de bala utilizando tipo de estilo de lista: ninguno;. Los enlaces están separados un poco, y se le da un color cuando pasas el mouse sobre ellos. El pequeño divisor gris es un borde derecho en cada elemento, que luego se elimina para el último elemento usando el último enlace clase. Esto es lo que parece:

Todo lo que queda para esta sección es el resaltado de color horizontal rojo. Añadir este HTML después de la envoltorio normal:

Y aquí está el CSS:

# top-color-splash ancho: 100%; altura: 4px; fondo: # EB6361;

Esa es la sección superior hecha. Esto es lo que parece: bastante similar al diseño correcto?

Área de contenido principal

Ahora es el momento de moverse en el área de contenido principal, la llamada “encima de la tapa”. Así es como se ve esta parte:

Esta es una parte bastante simple, un texto de la izquierda con una imagen a la derecha. Esta área será flojamente dividido en tercios, aproximadamente la aproximación de la proporción de oro utilizando la proporción de oro en la fotografía para una mejor composición utilizando la proporción de oro en la fotografía para una mejor composición ¿Tiene problemas con la composición de la foto? Aquí hay dos técnicas basadas en la proporción de oro que mejorarán drásticamente sus disparos con poco esfuerzo de su parte. Lee mas .

Necesitará la imagen de muestra para esta parte. Está incluido en la descarga. Esta imagen tiene un ancho de 670 píxeles y proviene de nuestra revisión Panasonic Lumix DMC-G80 / G85. Revisión de Panasonic Lumix DMC-G80 / G85. Revisión de Panasonic Lumix DMC-G80 / G85. La Lumix G85 es la cámara sin espejo más reciente de Panasonic. el departamento de video, con salida HDMI y grabación 4K - ¡todo por $ 1000! Lee mas .

Agrega el HTML después la top-color-splash elemento:

 
 
Bienvenido!
 
Noise Media es una empresa tecnológica especializada en revisiones técnicas..
 
Somos muy buenos en lo que hacemos, pero desafortunadamente, no somos una empresa real..
 
Asegúrese de visitar makeuseof.com para ver el tutorial completo sobre cómo construir este sitio web.
 
O bien, echa un vistazo a nuestra revisión de la Panasonic G80 que se muestra a la derecha!

Observe cómo envoltorio normal El elemento ha regresado (esa es la alegría de usar clases). Quizás te preguntes por qué la imagen (img) la etiqueta no se cierra. Esta es una etiqueta de cierre automático. La barra inclinada (/>) indica esto, ya que no siempre tiene sentido tener que cerrar una etiqueta.

CSS:

.un tercio ancho: 40%; flotador izquierdo; tamaño de caja: caja de borde; / * asegúrese de que el relleno y los bordes no aumenten el tamaño * / margin-top: 20px;  dos tercios ancho: 60%; flotador izquierdo; tamaño de caja: caja de borde; / * asegúrese de que el relleno y los bordes no aumenten el tamaño * / padding-left: 40px; text-align: right; margen superior: 20px;  .featured-image max-width: 500px; / * reduce el tamaño de la imagen mientras mantiene la relación de aspecto * / .no-margin-top margin-top: 0; / * eliminar margen en cosas como encabezados * /

El atributo más importante aquí es tamaño de caja: caja de borde;. Esto asegura que los elementos siempre tendrán un ancho del 40% o 60%. El valor predeterminado (sin este atributo) es el ancho especificado más el relleno, los márgenes y los bordes. La clase de imagen (Foto principal) tiene un anchura máxima de 500px. Si solo especifica una dimensión (una anchura o una altura), y deja la otra en blanco, css cambiará el tamaño de la imagen mientras mantiene su relación de aspecto.

Área de cotización

Vamos a crear el área de cotización. Esto es lo que parece:

Esta es otra área simple. Contiene un fondo gris oscuro, con texto centrado en blanco..

Añadir este HTML después el anterior envoltorio normal:

 
 
“Makeuseof es el mejor sitio web de todos los tiempos.”
 
Joe Coburn

Y luego este CSS:

# quote-area background: # 363636; color: #FFFFFF; text-align: center; relleno: 15px 0;  h3 font-weight: normal; tamaño de letra: 20 puntos; margen superior: 0px;  h4 font-weight: normal; tamaño de letra: 16 puntos; margen inferior: 0;

No hay mucho que hacer aquí. El tamaño es el ajuste principal que se necesita: tamaño de fuente, espaciado, etc. Así es como se ve todo ahora: está empezando a parecer un sitio web!

Área de iconos

Sigamos presionando - ¡Está casi terminado! Aquí está la siguiente área que necesita crear:

Esta parte utilizará varias clases. Los tres íconos son casi iguales, con la excepción del contenido, por lo que tiene sentido usar clases en lugar de ID. Añadir este HTML después el anterior área de cotización:

 
 
  
 
Youtube
 
Echa un vistazo a nuestro canal de YouTube para obtener más revisiones técnicas, tutoriales y obsequios!
 
 
 
  
 
Opiniones
 
Si planea comprar un nuevo gadget, verifique aquí primero. Te daremos una revisión en profundidad de los últimos dispositivos..
 
 
 
  
 
Guías de compra
 
En las guías de compras nos esforzamos por brindar a los lectores las herramientas para obtener lo mejor por la menor cantidad de dinero..

Estos tres íconos también son Font-Awesome. El HTML está de nuevo usando el envoltorio normal clase. Aquí está el CSS:

.icon-outside box-sizing: border-box; / * asegúrese de que el relleno y los bordes no aumenten el tamaño * / float: left; ancho: 33,33%; relleno: 25px; margen: 0; text-align: center;  .icon-circle background: #EEEEEE; color: # B4B4B4; ancho: 200px; altura: 200px; radio del borde: 200px; / * hacer esquinas redondeadas * / margen: 0 auto; borde: 2px sólido # D6D6D6; tamaño de caja: caja de borde; / * asegúrese de que el relleno y los bordes no aumenten el tamaño * / font-size: 75pt; relleno: 30px 0 0 0; cursor: puntero;  .icon-circle: hover / * cambia de color al desplazar (mouseover) * / color: #FFFFFF; fondo: # EB6361;  h5 margen: 15px 0 10px 0; tamaño de letra: 20 puntos;

Hay algunas cosas nuevas en el CSS. Las esquinas redondeadas están siendo fijadas por radio del borde: 200px;. Al establecer este valor igual que el ancho, se obtiene un círculo perfecto. Puede reducir esto si prefiere más un cuadrado con esquinas redondeadas. Observe cómo se aplican las acciones flotantes a los divs, no está restringido solo a los enlaces. Esto es lo que parece esta sección ahora:

El pie de página

Lo último que hay que hacer es el pie de página! Esto es realmente simple, ya que es solo un área gris sin texto. Añade este HTML después de las áreas de iconos ' envoltorio normal:

Aquí está el CSS:

# pie de página ancho: 100%; fondo: # F1F1F1; / * gris claro * / borde superior: 1px sólido # D4D4D4; / * "línea superior" gris oscuro * / altura: 150 px;

Ver - cosas realmente simples.

Añadir un poco de Pizzazz

Eso es todo, ¡la codificación está hecha! Absolutamente puedes dejar las cosas como están, es una página web terminada. Puede que hayas notado, sin embargo, que no se ve exactamente como el diseño La razón principal de esto es las fuentes utilizadas. Vamos a arreglar eso.

La fuente utilizada para la mayoría de los títulos es Myriad Pro. Esto viene con Adobe Create Cloud, pero no está disponible como fuente web. La fuente actualmente utilizada en la página web es Helvética. Esto se ve bien, así que puedes dejarlo como está, sin embargo PT Sans Está disponible como una fuente web. La fuente utilizada para todo el texto es PT Serif, que está disponible como una fuente web.

Las fuentes web son un proceso simple. Al igual que al cargar una nueva fuente en su computadora, las páginas web pueden cargar fuentes a pedido. Una de las mejores formas de hacerlo es a través de Google Fonts..

Agrega este CSS para cambiar a las mejores fuentes:

@import url ('https://fonts.googleapis.com/css?family=PT+Sans'); @import url ('https://fonts.googleapis.com/css?family=PT+Serif'); h1, h2, h4, h5, h6 familia de fuentes: 'PT Sans', 'Helvetica', 'Arial';

Ahora modifique sus elementos html y cuerpo para usar las nuevas fuentes:

font-family: 'PT Serif', 'Helvetica', 'Arial';

Observe cómo el elemento h3 no está incluido en la lista. PT-Serif en lugar de PT-Sans.

Como último toque de belleza, usemos un poco de JavaScript para desplazarnos a través de tres imágenes destacadas diferentes. Necesitará Imagen_2 y Imagen_3 Para esta parte, y nuevamente, es opcional. El sitio web es completamente funcional en este punto sin esta característica. Así es como se verá (acelerado):

Modifique su HTML para incluir tres imágenes destacadas. Observe cómo dos de estos tienen una clase de CSS oculto. A cada imagen se le ha asignado una identificación para que el JavaScript pueda apuntar a cada una de ellas independientemente..

Aquí está el CSS necesario para ocultar las imágenes destacadas adicionales:

.oculto mostrar: ninguno;

Ahora que hemos resuelto el HTML y el CSS, vamos a cambiar a JavaScript. Es útil comprender el Modelo de objetos de documento y el desarrollo web. Uso del modelo de objetos de documento. Desarrollo del sitio web. Usar el modelo de objeto de documento. Este artículo le presentará el esquema de documentos con el que funciona JavaScript. Al tener un conocimiento práctico de este modelo de objeto de documento abstracto, puede escribir JavaScript que funcione en cualquier página web. Lea más (DOM) para esta parte, pero no es un requisito.

Encuentra el guión área en la parte inferior de la página:

Añade el siguiente JavaScript dentro de guión etiqueta:

/ * JavaScript va aquí, en la parte inferior de la página * / $ (document) .ready (function () // run una vez que la página esté lista var time = 2500; // obtenga los contenedores de imágenes $ im1 = $ (' # f-image-1 '); $ im2 = $ (' # f-image-2 '); $ im3 = $ (' # f-image-3 '); setInterval (function () // call function every x milisegundos (definidos en la variable de tiempo anterior) changeImage ();, time); var currentImage = 1; function changeImage () switch (currentImage) case 1: // show image 2 $ im1.hide (); $ im2 .show (); $ im3.hide (); currentImage = 2; break; case 2: // show image 3 $ im1.hide (); $ im2.hide (); $ im3.show (); currentImage = 3 ; break; predeterminado: // mostrar imagen 1 $ im1.show (); $ im2.hide (); $ im3.hide (); currentImage = 1;);

Hay algunas cosas que suceden aquí. El código está contenido dentro $ (documento) .ready (). Esto significa que se ejecutará una vez que su navegador haya terminado de mostrar la página; esta es una buena práctica. los setInterval () función se utiliza para llamar a la cambiar imagen() funciona regularmente en un intervalo predefinido en milisegundos (1000 milisegundos = 1 segundo). Esto se almacena en el hora variable. Puede aumentar o disminuir esto para acelerar o ralentizar el desplazamiento. Finalmente, se utiliza una declaración de caso simple para mostrar diferentes imágenes y realizar un seguimiento de la imagen que se muestra actualmente.

Desafío de codificación

¡Eso es! Esperemos que hayas aprendido mucho durante el proceso. Si te apetece un desafío y quieres poner a prueba tus nuevas habilidades, por qué no intentas implementar estas modificaciones:

Añadir un pie de página: Agregue un poco de texto al pie de página (sugerencia: podría reutilizar el envoltorio normal y un tercio / dos tercios clases).
Mejorar el desplazamiento de la imagen: Modifique el JavaScript para animar los cambios de imagen (sugerencia: mire jQuery fadein y animate).
Implementar múltiples citas: Modifique las citas para cambiar entre una de varias diferentes (sugerencia: mire el código de desplazamiento de la imagen para un punto de partida).
Configurar un servidor: Configure un servidor y envíe datos entre la página web y el servidor (sugerencia: lea nuestra guía de JSON y Python Cómo obtener Python y JavaScript para comunicarse mediante JSON Cómo obtener Python y JavaScript para comunicarse con JSON Hoy les mostraré cómo para usar JSON para enviar datos desde JavaScript a Python. Cubriré cómo configurar un servidor web, junto con todo el código que necesita. Leer más).

¿Has aprendido alguna habilidad nueva hoy? ¿Cómo te fue en los desafíos de codificación? ¿Qué modificaciones hiciste para hacer que este sitio sea tuyo? Háganos saber en los comentarios a continuación, nos encantaría saber!

Explorar más sobre: ​​CSS, HTML, Diseño Web..