Comment faire un site web: pour les débutants

Avez-vous toujours voulu faire un site web? Peut-être vous avez lu certains de nos HTML (compréhension HTML

) et tutoriels CSS, mais ne savent pas comment utiliser ces langues sur un plus grand projet.5 étapes pour comprendre le code HTML de base5 étapes pour comprendre le code HTML de baseLire la suite

Aujourd`hui, je vais vous guider à travers le processus de fabrication d`un site web complet à partir de zéro. Ne vous inquiétez pas si cela semble être une tâche difficile, je vais vous guider à travers chaque étape du chemin.

Vous produirez ce site en utilisant HTML, CSS et javascript avec une touche de jQuery (guide pour jQuery). Vous ne serez pas faire quoi que ce soit vraiment bord de saignement, de sorte que ce code devrait fonctionner assez bien dans la plupart des navigateurs modernes.

Si vous n`êtes pas sûr de tout CSS, jetez un oeil au guide CSS à W3Schools.com.

La conception

Voici la conception de ce site. Jetez un oeil à une image haute résolution si vous voulez mieux voir, ou mieux encore, téléchargez le projet complet ici.

J`ai conçu ce site pour une entreprise fictive dans CC Adobe Photoshop 2017. Si vous êtes intéressé, assurez-vous que vous prenez le fichier du téléchargement .PSD bundle. Voici ce que vous obtenez dans le fichier Photoshop:

A l`intérieur du PSD, vous trouverez toutes les couches groupées, nommées et un code couleur:

Vous aurez besoin de quelques polices installées pour des choses à regarder correctement. La première est la police impressionnant, utilisé pour toutes les icônes. Les deux autres polices sont PT Serif et Myriad Pro (inclus avec Photoshop). Si vous n`êtes pas sûr comment installer des polices, puis lire notre guide.Comment faire pour installer les polices de caractères sous Windows, Mac & LinuxComment faire pour installer les polices de caractères sous Windows, Mac & LinuxLire la suite

Ne vous inquiétez pas si vous n`avez pas Photoshop, vous n`avez pas besoin de procéder.

code initial

Maintenant que la conception est claire, nous allons commencer à coder! Créez un nouveau fichier dans votre éditeur de texte favori (j`utilise Sublime Text 3). Enregistrer ce que index.html. Vous pouvez appeler ce que vous voulez, la raison pour laquelle de nombreuses pages sont appelées index est due à la façon dont fonctionnent les serveurs Web. La configuration par défaut pour la majorité des serveurs est de servir la page index.html si aucune page est spécifiée.

Si vous ne voulez pas apprendre les détails, allez saisir le code complet du téléchargement.

Voici le code dont vous avez besoin:

lt;htmlgt;lt;têtegt;lt;méta charset="UTF-8"gt;lt;Titregt;Médias de bruitTitregt;lt;lien rel="stylesheet" type="text / css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"gt;lt;stylegt;/ * Le CSS va ici, en haut de la page * /stylegt;têtegt;lt;corpsgt;lt;scénario src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text / javascript"gt;scénariogt;lt;scénario type="text / javascript"gt;/ * javascript va ici, en bas de la page * /scénariogt;corpsgt;htmlgt;

Cela fait plusieurs choses:

• Définit le code HTML strict minimum nécessaire.
• Définit un titre de page « Media Noise »
• Comprend jQuery hébergé sur Google CDN (ce qui est un CDN).
• Comprend polices impressionnant hébergé sur Google CDN.
• définit un style tag pour écrire votre CSS.
• définit un scénario tag pour écrire votre javascript.

Enregistrer à nouveau votre fichier et ouvrez-le dans votre navigateur Web. Vous ne remarquerez probablement pas beaucoup, et il ne sera certainement pas ressembler à un site Web pour l`instant.

Remarquez comment le titre de la page est Médias de bruit. Il est défini par le texte à l`intérieur du Titre marque. Ce a être à l`intérieur du tête Mots clés.

l`en-tête

Créons l`en-tête. Voilà ce qui ressemble à:

Commençons par ce petit gris en haut. Il est un gris clair avec un léger gris foncé en dessous. Voici un gros plan:

Ajouter ce code HTML à l`intérieur du corps tag en haut:

lt;div ça="barre du haut"gt;divgt;

Pendant que vous êtes ici, nous allons décomposer. UNE div est comme un récipient pour mettre d`autres choses. Ce « autres choses » peut être plusieurs conteneurs, textes, images, quoi que ce soit vraiment. Il y a quelques restrictions sur ce qui peut aller dans certaines balises, mais divs sont des choses assez génériques. Il a un ça de barre du haut. Il sera utilisé pour le style avec CSS, et cibler avec javascript si nécessaire. Assurez-vous que vous avez un seul élément avec un identifiant particulier - ils doivent être uniques. Si vous souhaitez que plusieurs éléments ont le même nom, utilisez un classe à la place - c`est ce qu`ils sont conçus pour! Voici le CSS dont vous avez besoin pour le style (il sera en haut dans votre style marque):

html, body {marge: 0-rembourrage: 0-famille de polices: `Helvetica`, `Arial`- / * Polices initiales * /}#barre du haut {largeur: 100%-Contexte: # F1F1F1- /* gris clair */border-bottom: 1px solid # D4D4D4- /* gris foncé "souligner" * /la taille: 25px-}

Remarquez comment est utilisé le signe dièse (#, hashtag, signe dièse) avant le nom. Cela signifie que l`élément est une pièce d`identité. Si vous utilisez une classe, vous devez utiliser un point (.) À la place. le html et corps étiquettes ont leur remplissage et la marge à zéro. Cela évite les problèmes d`espacement indésirables.

Il est temps de passer au logo et barre de navigation. Avant de commencer, vous avez besoin d`un récipient pour mettre ce contenu. Faisons en sorte que cette classe (donc vous pouvez réutiliser plus tard), et comme cela est ne pas un site web réactif, faire 900 pixels de large.

HTML:

lt;div classe="-Emballage normale"gt;divgt;

CSS:

.-Emballage normale {largeur: 900px-marge: 0 auto-rembourrage: 15px 40px-Contexte: rouge-débordement: auto-}

Il peut être difficile de dire ce qui se passe jusqu`à ce que vous avez terminé le code, il peut être utile d`ajouter un (temporaire) fond coloré pour voir ce qui se passe:

Contexte: rouge-

Il est temps de créer le logo maintenant. est nécessaire pour la police Impressionnant l`icône elle-même. Font impressionnant est un ensemble d`icônes emballés comme une police vectorielle - génial! Le code initial ci-dessus déjà configuré la police Impressionnant, il est donc prêt à partir!

Ajouter ce HTML à l`intérieur la -Emballage normale div:

lt;div ça="logo-conteneur"gt;lt;je classe="logo-icon fa fa-réduction de volume"gt;jegt; lt;h1gt;Médias de bruith1gt;divgt;

CSS:

.logo-icon {Couleur: # 000000-taille de police: 60pt-flotte: la gauche-}h1 {flotte: la gauche-marge: 21px 0 0 25px-}

Ne vous inquiétez pas les autres polices qui ne correspondent pas à la conception - vous ranger que jusqu`à plus tard. Si vous souhaitez utiliser différentes icônes, tête vers la page Icônes Impressionnant police, puis changer fa-réduction de volume au nom de l`icône que vous souhaitez utiliser.

Déplacement sur la barre de navigation, vous utiliserez une liste non ordonnée (UL) pour ça. Ajouter ce HTML après la logo-conteneur (Mais toujours à l`intérieur du -Emballage normale):

lt;ul ça="navbar"gt;lt;ligt;lt;une href=""gt;Accueilunegt;ligt;lt;ligt;lt;une href=""gt;Surunegt;ligt;lt;ligt;lt;une href=""gt;Avisunegt;ligt;lt;ligt;lt;une href="" classe="dernière liaison" gt;Contactunegt;ligt;ulgt;

le href est utilisé pour créer un lien vers d`autres pages. Ce site de tutoriel n`a pas d`autres pages, mais vous pouvez mettre le nom et le chemin du fichier (si nécessaire) ici, par exemple reviews.html. Assurez-vous de mettre cela à l`intérieur des deux guillemets doubles.

Voici le CSS:

#navbar {liste-style-type: aucun- / * Supprimer des points de balles * /marge: 29px 0 0 0-rembourrage: 0-flotte: droite-taille de police: 16pt-}#navbar li {afficher: en ligne- / * Faire des articles horizontale * /}#navbar li a: link, #navbar li a: visited, #navbar li a: active {text-decoration: aucun- / * Supprimer soulignement * /Couleur: # 000000-rembourrage: 0 16px 0 10px- / * Liens espacer * /marge: 0-border-right: 2px solid # B4B4B4- / * Diviseur * /}#navbar li a: link.last-link {/ * Supprimer diviseur * /border-right: 0px-}#navbar li a: hover {/ * Changement de couleur sur le vol stationnaire (mouseover) * /Couleur: # EB6361-}

Cette CSS commence par une liste non ordonnée. Il supprime alors les points de balle à l`aide liste-style-type: none-. Les liens sont espacés un peu, et donné une couleur lorsque vous passez votre souris sur eux. Le petit diviseur gris est un bord droit sur chaque élément, qui est ensuite éliminé pour le dernier élément en utilisant le dernière liaison classe. Voilà ce qui ressemble à:

Tout ce qui reste pour cette section est le point culminant de couleur rouge horizontale. Ajouter ce code HTML après la -Emballage normale:

lt;div ça="top-color-éclaboussures"gt;divgt;

Et voici le CSS:

# Top-color-éclaboussures {largeur: 100%-la taille: 4px-Contexte: # EB6361-}

C`est la partie supérieure fait. Voici à quoi il ressemble - assez similaire à la droite de la conception?

Zone de contenu principal

Il est maintenant temps de passer la principale zone de contenu - le soi-disant « au-dessus du pli ». Voici ce que cette partie ressemble à:

Ceci est une partie assez simple, un texte de la gauche avec une image à droite. Cette zone sera librement divisé en tiers, se rapproche autant que Nombre d`or.En utilisant le ratio d`or en photographie pour une meilleure compositionEn utilisant le ratio d`or en photographie pour une meilleure compositionLuttez-vous avec la composition de photo? Voici deux techniques basées sur le ratio d`or qui permettra d`améliorer considérablement vos photos avec peu d`effort de votre part.Lire la suite

Vous aurez besoin de l`image échantillon pour cette partie. Il est inclus dans le téléchargement. Cette image est large 670 pixels, et est de notre Panasonic Lumix DMC-G80 / G85 examen.

Ajouter le code HTML après la top-color-éclaboussures élément:

lt;div classe="-Emballage normale"gt;lt;div classe="un tiers"gt;lt;h2 classe="sans marge supérieure"gt;Bienvenue!h2gt;lt;pgt;Le bruit Media est une société de technologie spécialisée dans les revues de technologie.pgt;lt;pgt;Nous sommes très bien ce que nous faisons, mais malheureusement, nous ne sommes pas une entreprise réelle.pgt;lt;pgt;Assurez-vous que vous visitez makeuseof.com pour le tutoriel complet sur la façon de construire ce site.pgt;lt;pgt;Vous pouvez également consulter notre examen du G80 Panasonic montré à droite!pgt;divgt;lt;div classe="deux tiers"gt;lt;img classe="l`image sélectionnée" src="image_1.jpg" / Gt;divgt;divgt;

Remarquez comment la -Emballage normale élément est de retour (c`est la joie d`utiliser des classes). Vous demandez peut-être pourquoi l`image (img) Balise ne se ferme pas. Ceci est une balise de fermeture auto. La barre oblique (/ Gt;) Indique cela, car il ne fait pas toujours sens devoir fermer une balise.

CSS:

.un tiers {largeur: 40%-flotte: la gauche-box-sizing: border-box- / * Assurer le rembourrage et les frontières n`augmentent pas la taille * /margin-top: 20px-}.deux tiers {largeur: 60%-flotte: la gauche-box-sizing: border-box- / * Assurer le rembourrage et les frontières n`augmentent pas la taille * /padding-left: 40px-text-align: droite-margin-top: 20px-}.l`image sélectionnée {largeur maximale: 500px- / * Pour réduire la taille de l`image tout en maintenant le rapport d`aspect * /}.sans marge supérieure {margin-top: 0- / * Supprimer la marge sur des choses comme les en-têtes * /}

L`attribut le plus important ici est box-sizing: border-box-. Cela garantit les éléments vont toujours être 40% ou 60% de sa largeur. La valeur par défaut (sans cet attribut) est votre largeur spécifiée plus tout rembourrage, les marges et les frontières. La classe d`image (l`image sélectionnée) a un largeur maximale de 500px. Si vous ne spécifiez une dimension (une largeur ou une hauteur), et laisser l`autre en blanc, redimensionnera l`css image tout en maintenant son ratio d`aspect.

Zone de devis

Créons la zone de citation. Voici à quoi cela ressemble:

Ceci est un autre domaine simple. Il contient un fond gris foncé, avec un texte centré sur blanc.

Ajouter ce HTML après la précédente -Emballage normale:

lt;div ça="quote-zone"gt;lt;div classe="-Emballage normale"gt;lt;h3gt;« MakeUseOf est le meilleur site jamais »h3gt;lt;h4gt;Joe Coburnh4gt;divgt;divgt;

Et puis ce CSS:

# Quote-zone {Contexte: # 363636-Couleur: #FFFFFF-text-align: centre-rembourrage: 15px 0-}h3 {font-weight: normal-taille de police: 20pt-margin-top: 0px-}h4 {font-weight: normal-taille de police: 16pt-margin-bottom: 0-}

Il n`y a pas beaucoup de choses ici. Le calibrage est le principal ajustement nécessaire - taille de la police, l`espacement, et ainsi de suite. Voici ce que le tout ressemble maintenant - il commence à ressembler à un site Web!

Zone d`icônes

Gardons appuyer sur - il est presque fini! Voici la zone suivante qui a besoin de créer:

Cette partie utilisera plusieurs classes. Les trois icônes sont essentiellement les mêmes, à l`exception du contenu, il est donc logique d`utiliser des classes au lieu de ids. Ajouter ce HTML après la précédente quote-zone:

lt;div classe="-Emballage normale"gt;lt;div classe="icon-outer"gt;lt;div classe="icone-cercle"gt;lt;je classe="fa logo-icon fa-youtube"gt;jegt;divgt;lt;h5gt;Youtubeh5gt;lt;pgt;Commander notre chaîne YouTube pour plus de commentaires tech, des tutoriels et des cadeaux!pgt;divgt;lt;div classe="icon-outer"gt;lt;div classe="icone-cercle"gt;lt;je classe="fa logo icône fa-caméra rétro"gt;jegt;divgt;lt;h5gt;Avish5gt;lt;pgt;Si vous avez l`intention d`acheter un nouveau gadget, vérifiez d`abord ici. Nous vous donnerons des examens approfondis des derniers appareils.pgt;divgt;lt;div classe="icon-outer"gt;lt;div classe="icone-cercle"gt;lt;je classe="logo-icon fa fa-dollar"gt;jegt;divgt;lt;h5gt;Guides d`achath5gt;lt;pgt;A Guides d`achat nous nous efforçons de fournir aux lecteurs les outils nécessaires pour obtenir les meilleurs trucs pour le montant le plus bas de l`argent.pgt;divgt;divgt;

Ces trois icônes sont également Font-Impressionnant. Le code HTML utilise une fois de plus -Emballage normale classe. Voici le CSS:

.icon-outer {box-sizing: border-box- / * Assurer le rembourrage et les frontières n`augmentent pas la taille * /flotte: la gauche-largeur: 33,33%-rembourrage: 25px-marge: 0-text-align: centre-}.icone-cercle {Contexte: #EEEEEE-Couleur: # B4B4B4-largeur: 200px-la taille: 200px-border-radius: 200px- / * Faire des coins arrondis * /marge: 0 auto-frontière: 2px solid # D6D6D6-box-sizing: border-box- / * Assurer le rembourrage et les frontières n`augmentent pas la taille * /taille de police: 75pt-rembourrage: 30px 0 0 0-le curseur: aiguille-}.icon-cercle: vol stationnaire {/ * Changement de couleur sur le vol stationnaire (mouseover) * /Couleur: #FFFFFF-Contexte: # EB6361-}h5 {marge: 0 15px 10px 0-taille de police: 20pt-}

Il y a quelques nouvelles choses qui se passent dans le CSS. Les coins arrondis sont fixés par Rayon de la bordure: 200px-. La définition de cette valeur même que les résultats largeur dans un cercle parfait. Vous pouvez réduire si vous préférez plus d`un carré avec des coins arrondis. Remarquez comment les actions vol stationnaire sont appliquées aux divs - il ne se limite pas seulement aux liens. Voici ce que cette section ressemble maintenant:

le pied de page

La dernière chose à faire est le pied de page! C`est vraiment simple, car il est juste une zone grise sans texte. Ajouter ce HTML après l`affichage de l`icône -Emballage normale:

lt;div ça="bas de page"gt;divgt;

Voici le CSS:

#bas de page {largeur: 100%-Contexte: # F1F1F1- /* gris clair */border-top: 1px solid # D4D4D4- /* gris foncé "Topline" * /la taille: 150px-}

Voir - trucs vraiment simple.

Ajouter un peu de piquant

Ca y est, le codage est fait! Vous pouvez laisser absolument les choses comme elles sont, il est une page Web terminée. Vous avez peut-être remarqué cependant qu`il ne semble pas exactement comme la conception. La principale raison est les polices utilisées. Trions cela.

La police utilisée pour la plupart des titres est Myriad Pro. Cela vient avec Adobe Créer Cloud, mais ce n`est pas disponible en PoliceWeb. La police utilisée actuellement sur la page Web est Helvetica. Cela semble ok, vous pouvez donc le laisser tel est cependant PT Sans est disponible en tant que PoliceWeb. La police utilisée pour tout le texte est PT Serif, qui est disponible en tant que PoliceWeb.

WebFonts sont un processus simple. Tout comme le chargement d`une nouvelle police sur votre ordinateur, les pages Web peuvent charger des polices sur demande. Une des meilleures façons de le faire est par Google Fonts.

Ajouter ce CSS pour passer à meilleures polices:

@importer url ( `https://fonts.googleapis.com/css?family=PT+Sans`)-@importer url ( `https://fonts.googleapis.com/css?family=PT+Serif`)-h1, h2, h4, h5, h6 {famille de polices: PT Sans `, `Helvetica`, `Arial`-}

maintenant modifier vos éléments html et le corps à utiliser les nouvelles polices:

Video: Créer votre Site Internet avec Wordpress (Facile & en 30 min !) - Tuto Débutant

famille de polices: `PT Serif`, `Helvetica`, `Arial`-

Remarquez comment l`élément h3 ne figure pas dans la liste - ce sera par défaut PT-Serif au lieu de PT-Sans.

Comme un peu final de joliesse, nous allons utiliser un peu de javascript pour faire défiler trois images différentes en vedette. Tu auras besoin de Image_2 et image_3 pour cette partie, et encore, il est facultatif. Le site est entièrement fonctionnel à ce stade sans cette fonctionnalité. Voici ce qu`il ressemblera à (accéléré):

Modifier votre code HTML pour inclure trois images présentées. Remarquez comment deux d`entre eux ont une classe CSS caché. Chaque image a été donné un code d`identification que le javascript peut cibler chacun d`eux indépendamment.

lt;div classe="deux tiers"gt;lt;img ça="f-image-1" classe="l`image sélectionnée" src="image_1.jpg" / Gt;lt;img ça="f-image-2" classe="featured-image cachée" src="Image_2.jpg" / Gt;lt;img ça="f-image-3" classe="featured-image cachée" src="Image_3.jpg" / Gt;divgt;

Voici le CSS