Hostwinds Tutoriels
Résultats de recherche pour:
Table des matières
Comment créer une page de destination personnalisée en utilisant HTML et CSS
Mots clés: Web Site
Ce guide apprendra comment créer la page de base 'sous la construction de construction en utilisant HTML et CSS.
Pour créer une page d'atterrissage, vous devrez disposer d'un éditeur de texte, soit celui fourni dans votre gestionnaire de fichiers CPanel, Notepad ++ ou tout éditeur de texte de votre choix fonctionnera bien à suivre dans ce guide.Si vous utilisez un panneau de commande tel que CPanel, vous ajouterez ces fichiers à votre répertoire public_html ou à la racine de document de votre nom de domaine.Si vous n'utilisez pas de panneau de commande, vous ajouteriez probablement ces fichiers à votre / var / www / html, bien que l'emplacement de la racine du document de votre domaine puisse varier.
Création de votre fichier de site
Commençons par créer un fichier index.html et ouvre-la dans votre éditeur de texte.
Pourquoi l'index?
La façon dont Apache est configurée, dans votre dossier de domaine (ou Public_html), il lit votre DirectoryIndex tel que index.htm, index.html ou index.php si ces fichiers existent et servent ce fichier comme page d'accueil de votre dossier.S'il n'y a pas l'un de ces fichiers, il affichera une liste d'index.Vous pouvez modifier votre index de répertoire via votre fichier .htaccess.
Votre HTML est essentiellement la structure de la page de votre site Web. Vous devrez donc vous assurer qu'il est configuré correctement.
Pour cet exemple, vous devrez identifier le script HTML, l'en-tête et le corps.Vous pouvez le faire en utilisant les "balises" suivantes
<html>
<head></head>
<body></body>
</html>
Les balises sont la manière dont nous identifions différents éléments de notre document HTML et viendront généralement par paires.La plupart des étiquettes auront une start \ <> et une extrémité \, certaines balises n'auront pas la deuxième étiquette et se termineront par A /> Ceci s'appelle un "élément vide", principalement vu sur des liens et des images.
La tête Tag
C'est là que vous stockez les données qui ne contentent pas de contenu, telles que les métadonnées de site, le titre de document, le jeu de caractères, les styles en ligne, les liens de script et d'autres méta-informations.Nous allons utiliser deux étiquettes différentes dans notre section de tête:
Tag balagage - Cette balise changera ce qui est affiché dans l'onglet
Tag de liaison - C'est ici que vous associez n'importe quel style ou scripts externes.Nous allons utiliser cela pour ajouter une feuille de style à notre site web
L'étiquette du corps
C'est là que vous ira le contenu de votre site.Si nous voulions, nous pourrions ajouter des tests directement.Par exemple, si nous ajoutons "Hello World!"Dans notre HTML, cela ressemblera à ceci:
<!DOCTYPE html>
<HTML>
<head></head>
<body>Hello World!!</body>
</HTML>
Voici à quoi ressemblera la page Web après avoir ajouté ce code et visité votre nom de domaine avec votre navigateur:
Ensuite, connectons la feuille de style dans votre HTML.Comme nous l'avons mentionné ci-dessus, vous pouvez joindre une feuille de style en ajoutant une liaison de votre feuille de style à la tête de votre document HTML.Après avoir terminé, cela devrait ressembler à ceci:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
</body>
</html>
Ajouter des conteneurs et du contenu
Pour aider à mieux organiser votre contenu, vous pouvez utiliser des balises pour spécifier différents objets tels que des conteneurs, des images, des en-têtes, etc. Vous allez appeler ces différentes tags plus tard dans votre feuille de style.
Pour cet exemple, je vais utiliser un conteneur div et le \
et \
Mots clés.
<!DOCTYPE html>
<html>
<head>
<title>Coming Soon</title>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
<div>
<h1>This Site is Under Construction</h1>
<p>Content Coming December 2018</p>
</div>
</body>
</html>
Voici à quoi ressemblera la page Web avant l'ajout dans la feuille de style:
Ajouter du style à votre site
Créez et modifiez votre feuille de style 'CSS.CSS'
Maintenant, créons un fichier .CSS.Cela devrait correspondre au nom de fichier que vous avez ci-dessus, notre exemple est CSS.CSS.Vous pouvez appeler les différents éléments que vous avez étiquetés via des balises dans votre document HTML dans votre feuille de style.
Dans cet exemple, nous avons 4 éléments différents: corps, div, h1 et p. Ci-dessous, nous pouvons voir comment utiliser ces balises pour changer l'arrière-plan, le centrer et modifier le dimensionnement du texte. Nous allons également démontrer comment ajouter une ombre de texte pour aider avec clarté.
Voici notre fichier CSS.css:
body {
background-image:url('background-background-image-blue-sky-1054218.jpg');
background-size: 100%, 100%;
}
div {
font-family: verdana;
color:black;
text-align: center;
margin-top:250px;
}
h1{
text-align:center;
font-size: 75px;
margin:0px;
padding:0px;
text-shadow: 2px 1px 1px grey;
}
p{
font-size: 40px;
text-shadow: 1px 1px 3px lightgrey;
}
Il y a beaucoup d'attributs différents que vous pouvez ajouter à votre feuille de style. Dans cet article, nous venons de couvrir quelques options de base.
De nombreuses propriétés différentes nécessitent une structure légèrement différente selon ce qu'elle change.
Testez votre site
Maintenant, vous pouvez consulter votre nouvelle page d'atterrissage!Si vous n'avez pas déjà signalé votre domaine à votre hébergement, vous pouvez utiliser un site de test tel que Hosts.CX ou votre adresse IP dédiée pour afficher votre site.
Écrit par Hostwinds Team / novembre 24, 2018