Cómo hacer un sitio web: para principiantes

Cómo hacer un sitio web: para principiantes

¿Siempre has querido hacer un sitio web? Quizás hayas leído algo de nuestro HTML ( entender HTML ) y tutoriales de CSS, pero no sé cómo usar esos lenguajes en un proyecto más grande.





Hoy te 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). No harás nada De Verdad vanguardista, por lo que este código debería funcionar bastante bien en la mayoría de los navegadores modernos.





Si no está seguro de ningún CSS, eche un vistazo a la Guía CSS a 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 una mejor apariencia, o incluso mejor, descargue el proyecto completo aquí.



Diseñé este sitio web para una empresa ficticia en Adobe Photoshop 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 del PSD, encontrará todas las capas agrupadas, nombradas y codificadas por colores:



Necesitará instalar algunas fuentes para que todo se vea correcto. El primero es Fuente impresionante , utilizado para todos los iconos. Las otras dos fuentes son PT Serif y Myriad Pro (incluido con Photoshop). Si no está seguro de cómo instalar fuentes, lea nuestra guía.

No te preocupes si no tienes Adobe Photoshop , no lo necesita para continuar.



Código inicial

Ahora que el diseño está claro, ¡comencemos a codificar! Cree un nuevo archivo en su editor de texto favorito (estoy usando Texto sublime 3 ). Guardar esto como index.html . Puede llamar a esto como 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, obtenga el código completo de la descarga.

Aquí está el código que necesita:

|_+_|

Esto hace varias cosas:

  • Define el HTML mínimo requerido.
  • Define un título de página de 'Noise Media'
  • Incluye jQuery alojado en Google CDN (qué es un CDN).
  • Incluye Font Awesome alojado en Google CDN.
  • Define un estilo etiqueta para escribir su CSS.
  • Define un texto etiqueta para escribir su JavaScript.

Guarde su archivo nuevamente y ábralo en su navegador web. Probablemente no notará mucho, y ciertamente no se verá como un sitio web por el momento.

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

El encabezado

Creemos el encabezado. Así es como se ve eso:

Comencemos con esa pequeña parte gris en la parte superior. Es un gris claro con un ligero gris oscuro debajo. Aquí hay un primer plano:

Agregue este HTML dentro del cuerpo etiqueta en la parte superior:

gráficos integrados / a bordo
|_+_|

Mientras estás aquí, analicemos esto. A div es como un contenedor para poner otras cosas. Estas 'otras cosas' pueden ser más contenedores, texto, imágenes, cualquier cosa en realidad. Existen algunas restricciones sobre lo que puede incluir ciertas etiquetas, pero los divs son cosas bastante genéricas. Tiene un identificación de barra superior . Esto se utilizará para diseñarlo con CSS y apuntarlo con JavaScript si es necesario. Asegúrese de tener solo un elemento con una identificación en particular, deben ser únicos. Si desea que varios elementos tengan el mismo nombre, utilice un clase en cambio, ¡es para lo que están diseñados! Aquí está el CSS que necesita para diseñarlo (colóquelo en la parte superior dentro de su estilo etiqueta):

|_+_|

Observe cómo se usa el signo de almohadilla (#, hashtag, signo de almohadilla) antes del nombre. Esto significa que el elemento es un ID. Si estuviera usando una clase, usaría un punto (.) En su lugar. los html y cuerpo las etiquetas tienen su relleno y margen establecidos en cero. Esto evita problemas de espaciado no deseados.

Es hora de pasar al logotipo y la barra de navegación. Antes de comenzar, necesita un contenedor para colocar este contenido. Hagamos de esto una clase (para que pueda reutilizarla más adelante), y como es no un sitio web receptivo, hágalo de 900 píxeles de ancho.

HTML:

|_+_|

CSS:

|_+_|

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

|_+_|

Es hora de crear el logo ahora. Fuente impresionante es necesario para el icono en sí. Font Awesome es un conjunto de iconos empaquetados como una fuente vectorial, ¡increíble! El código inicial anterior ya configuró Font Awesome, ¡así que todo está listo para funcionar!

Agregar este HTML dentro los envoltura normal div:

|_+_|

CSS:

|_+_|

No se preocupe si las otras fuentes no coinciden con el diseño, lo arreglará más adelante. Si desea utilizar diferentes iconos, diríjase al Iconos impresionantes de fuente página y luego cambiar fa-volumen-abajo al nombre del icono que desea utilizar.

Pasando a la barra de navegación, usará una lista desordenada ( los ) para esto. Agregar este HTML después los contenedor de logo (pero todavía dentro del envoltura normal ):

|_+_|

los href se utiliza para vincular a otras páginas. Este sitio web de tutoriales no tiene otras páginas, pero puede poner el nombre y la ruta del archivo (si es necesario) aquí, p. Ej. reviews.html . Asegúrate de poner esto dentro de las dos comillas dobles.

Aquí está el CSS:

|_+_|

Este CSS comienza con un lista desordenada . Luego elimina las viñetas usando tipo de estilo de lista: ninguno; . Los enlaces están un poco espaciados y se les da un color cuando pasa el mouse sobre ellos. El pequeño divisor gris es un borde derecho en cada elemento, que luego se quita para el último elemento usando el último enlace clase. Así es como se ve eso:

Todo lo que queda para esta sección es el resaltado de color rojo horizontal. Agregue este HTML después de envoltura normal :

|_+_|

Y aquí está el CSS:

|_+_|

Esa es la sección superior hecha. Así es como se ve: bastante similar al diseño, ¿verdad?

Área de contenido principal

Ahora es el momento de pasar al área de contenido principal, la denominada 'parte superior de la página'. 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, aproximándose aproximadamente al Proporción áurea .

Necesitará la imagen de muestra para esta parte. Está incluido en la descarga. Esta imagen tiene 670 píxeles de ancho y pertenece a nuestra revisión de Panasonic Lumix DMC-G80 / G85.

Agrega el HTML después los salpicadura de color superior elemento:

|_+_|

Note como el envoltura normal ha regresado el elemento (ese es el placer de usar clases). Quizás se pregunte 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:

|_+_|

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 cualquier relleno, márgenes y bordes. La clase de imagen ( Foto principal ) tiene un anchura máxima de 500px . Si solo especifica una dimensión (un ancho o una altura) y deja la otra en blanco, css cambiará el tamaño de la imagen manteniendo su relación de aspecto.

Área de cotización

Creemos el área de cotización. Así es como se ve esto:

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

Agregar este HTML después el anterior envoltura normal :

no uefi configuración de firmware de windows 10
|_+_|

Y luego este CSS:

|_+_|

No pasa mucho aquí. El tamaño es el principal ajuste necesario: tamaño de fuente, espaciado, etc. Así es como se ve todo ahora: ¡comienza a verse como un sitio web!

Área de iconos

Sigamos presionando, ¡está casi terminado! Aquí está la siguiente área que debe crearse:

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

|_+_|

Estos tres iconos también son Font-Awesome . El HTML vuelve a utilizar el envoltura normal clase. Aquí está el CSS:

|_+_|

Hay algunas cosas nuevas en CSS. Las esquinas redondeadas están siendo establecidas por radio de borde: 200px; . Establecer este valor igual que el ancho da como resultado un círculo perfecto. Puede reducir esto si prefiere más un cuadrado con esquinas redondeadas. Observe cómo las acciones de desplazamiento se aplican a los divs; no está restringido solo a los enlaces. Así es como se ve esta sección ahora:

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

|_+_|

Aquí está el CSS:

|_+_|

Mira, cosas realmente simples.

Añade algo de dinamismo

Eso es todo, ¡la codificación está lista! Absolutamente puede dejar las cosas como están, es una página web terminada. Sin embargo, es posible que haya notado que no parece exactamente como el diseño. La principal razón de esto son las fuentes utilizadas. Resolvamos 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 que se utiliza actualmente en la página web es Helvética . Esto se ve bien, por lo que puede dejarlo como está, sin embargo PT Sans está disponible como fuente web. La fuente utilizada para todo el texto es PT Serif , que está disponible como fuente web.

Las fuentes web son un proceso simple. Al igual que 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 Fuentes de Google .

ver películas en línea gratis sin descargar ni registrarse

Agregue este CSS para cambiar a las mejores fuentes:

|_+_|

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

|_+_|

Observe cómo el elemento h3 no está incluido en la lista; esto se establecerá por defecto en PT-Serif en lugar de PT-Sans .

Como un poco de belleza final, usemos algo de JavaScript para desplazarnos por tres imágenes destacadas diferentes. Necesitará Image_2 y Image_3 para esta parte, y nuevamente, es opcional. El sitio web es completamente funcional en este momento 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 CSS de oculto . A cada imagen se le ha asignado un ID para que JavaScript pueda apuntar a cada una de ellas de forma independiente.

|_+_|

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

|_+_|

Ahora que se ocuparon de HTML y CSS, cambiemos a JavaScript. Es útil comprender el Modelo de objetos de documento (DOM) para esta parte, pero no es un requisito.

Encuentra el texto área en la parte inferior de la página:

|_+_|

Agregue el siguiente JavaScript dentro del texto etiqueta:

|_+_|

Aquí están sucediendo algunas cosas. 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 () La función se usa para llamar al cambiar imagen () funcionan regularmente en un intervalo predefinido en milisegundos (1000 milisegundos = 1 segundo). Esto se almacena en el tiempo variable. Puede aumentar o disminuir esto para acelerar o ralentizar el desplazamiento. Finalmente, se usa 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 todo! Ojalá hayas aprendido mucho durante el proceso. Si te apetece un desafío y quieres poner a prueba tus nuevas habilidades, ¿por qué no pruebas a implementar estas modificaciones?

Agregar un pie de página: Agregue un poco de texto en el pie de página (pista: podría volver a usar el envoltura normal y un tercio / dos tercios clases.).

Mejora el desplazamiento de la imagen: Modifique JavaScript para animar los cambios de la imagen (pista: mire jQuery fundirse y Animado ).

Implementar múltiples citas: Modifique las comillas para cambiar entre una de varias diferentes (pista: 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 (pista: lea nuestra guía de JSON y Python).

Una vez que se sienta cómodo usando JavaScript o si tiene alguna experiencia con Ruby, puede intentar crear un sitio web con un creador de sitios web estático como GatsbyJS o Jekyll.

Cuota Cuota Pío Correo electrónico Cómo cambiar la apariencia de su escritorio de Windows 10

¿Quiere saber cómo hacer que Windows 10 se vea mejor? Utilice estas sencillas personalizaciones para personalizar Windows 10.

Leer siguiente Temas relacionados
  • Programación
  • HTML
  • Web Design
  • CSS
Sobre el Autor Joe Coburn(136 Artículos publicados)

Joe es licenciado en Ciencias de la Computación por la Universidad de Lincoln, Reino Unido. Es un desarrollador de software profesional, y cuando no está volando drones o escribiendo música, a menudo se le puede encontrar tomando fotos o produciendo videos.

Más de Joe Coburn

Suscríbete a nuestro boletín

¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!

Haga clic aquí para suscribirse