Hoe u een aangepaste bestemmingspagina maakt met HTML en CSS

Deze gids zal leren hoe u de basis 'in aanbouwlanding kunt maken met HTML en CSS.

Als u een bestemmingspagina wilt maken, moet u een teksteditor hebben, ofwel die in uw CPANEL-bestandsbeheer, notepad ++ of een teksteditor van uw keuze zal werken, zal prima werken in deze gids.Als u een bedieningspaneel zoals CPANEL gebruikt, voegt u deze bestanden toe aan uw public_html of de documenttoets voor uw domeinnaam.Als u geen bedieningspaneel gebruikt, voegt u deze bestanden waarschijnlijk toe aan uw / var / www / html, hoewel de locatie van de documentwortel van uw domein kan variëren.

Uw sitebestand maken

Laten we beginnen met het maken van een index.html-bestand en open het in uw teksteditor.

Waarom index?
De manier waarop Apache is ingesteld, in uw domeinmap (of public_html), het leest uw directoryindex zoals index.htm, index.html of index.php als deze bestanden bestaan en dit bestand bedienen als de startpagina van uw map.Als er geen van deze bestanden is, wordt het een indexvermelding weergegeven.U kunt uw map-index wijzigen via uw .htaccess-bestand.

Uw HTML is in wezen de structuur van uw website-pagina, zodat u ervoor moet zorgen dat deze correct is ingesteld.

Voor dit voorbeeld moet u het HTML-script, de koptekst en het lichaam identificeren.U kunt dit doen met behulp van de volgende "tags"

<html>
<head></head>
<body></body>
</html>

Tags zijn hoe we verschillende elementen in ons HTML-document identificeren en in het algemeen in paren zijn.De meeste tags hebben een start \ <> en een einde \, sommige tags hebben niet de tweede tag en eindigen met een /> Dit wordt een 'leeg element' genoemd, voornamelijk op links en afbeeldingen.

De hoofd-tag

Dit is waar u de gegevens opslaat die geen inhoud is, zoals Site Metadata, de documenttitel, het tekenset, inline stijlen, scriptkoppelingen en andere meta-informatie.We zullen twee verschillende tags in onze hoofdsectie gebruiken:

Title-tag - Deze tag verandert wat op het tabblad wordt weergegeven

Link-tag - Hiermee kunt u elke externe stijl of scripts bijvoegen.We zullen dit gebruiken om een stylesheet toe te voegen aan onze website

De body-tag

Dit is waar uw site-inhoud gaat.Als we wilden, zouden we direct tests kunnen toevoegen.Als we bijvoorbeeld "Hallo World!" ToevoegenIn onze HTML ziet het er als volgt uit:

<!DOCTYPE html>
<HTML>
<head></head>
<body>Hello World!!</body>
</HTML>

Hier is hoe de webpagina eruit zal zien na het toevoegen van deze code en het bezoeken van uw domeinnaam met uw browser:

Laten we de stylesheet in uw HTML aansluiten.Zoals we hierboven vermeld, kunt u een stylesheet bevestigen door uw stylesheet aan de kop van uw HTML-document toe te voegen.Nadat je klaar bent, zou het er als volgt uit moeten zien:

<!DOCTYPE html>
<html> 
<head>
<link rel="stylesheet" href="css.css"/>
</head> 
<body>
 </body> 
</html>

Voeg containers en inhoud toe

Om uw inhoud beter te organiseren, kunt u tags gebruiken om verschillende objecten zoals containers, afbeeldingen, headers, enz. Te specificeren, u noemt deze verschillende tags later in uw stylesheet.

Voor dit voorbeeld zal ik een div-container en de \ gebruiken

en \

tags.

<!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>

Hier is hoe de webpagina eruit zal zien voordat we de stylesheet toevoegen:

Stijl toevoegen aan uw site

Maak en bewerk uw stylesheet 'CS.SSS'

Laten we nu een .css-bestand maken.Dit moet overeenkomen met het bestandsnaam dat u hierboven bent, dus ons voorbeeld is CS.SSS.U kunt de verschillende elementen bellen die u hebt gelabeld via tags in uw HTML-document in uw stylesheet.

In dit voorbeeld hebben we 4 verschillende elementen: lichaam, div, h1 en p. Hieronder kunnen we zien hoe u deze tags kunt gebruiken om de achtergrond te wijzigen, te centreren en het formaat van de tekst te wijzigen. We zullen ook tonen hoe we een tekstschaduw toevoegen om te helpen met duidelijkheid.

Hier is ons CSS.css-bestand:

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;
}

Er zijn veel verschillende kenmerken die u aan uw stylesheet kunt toevoegen. In dit artikel hebben we net een paar basisopties behandeld.

Veel verschillende eigenschappen vereisen een iets andere structuur, afhankelijk van wat het verandert.

Test uw site

Nu kunt u uw nieuwe bestemmingspagina bekijken!Als u uw domein nog niet hebt gewezen op uw hosting, kunt u een testsite zoals hosts.cx of uw speciale IP-adres gebruiken om uw site te bekijken.