Hostwinds Tutorials
Suchergebnisse für:
Inhaltsverzeichnis
So erstellen Sie eine benutzerdefinierte Zielseite mit HTML und CSS
Stichworte: Web Site
In diesem Anschluss erfahren Sie, wie Sie die grundlegende 'Untergestellte Landing-Seite mit HTML und CSS erstellen können.
Um eine Landing-Seite zu erstellen, müssen Sie einen Texteditor haben, entweder der in Ihrem CPANEL-Dateimanager, Notepad ++, oder ein beliebiger Texteditor Ihrer Wahl wird in diesem Handbuch gut funktionieren.Wenn Sie ein Bedienfeld wie CPANEL verwenden, fügen Sie diese Dateien entweder Ihrem öffentlichen Verzeichnis der Public_HTML oder dem Dokumentstamm für Ihren Domainnamen hinzu.Wenn Sie kein Bedienfeld verwenden, fügen Sie diese Dateien höchstwahrscheinlich auf Ihr / var / www / html hinzu, obwohl der Speicherort der Dokumententräger der Domäne möglicherweise variieren kann.
Erstellen Ihrer Site-Datei
Beginnen wir mit der Erstellung einer Index.html-Datei und öffnen Sie sie in Ihrem Texteditor.
Warum Index?
Die Art und Weise, wie Apache in Ihrem Domänenordner (oder public_html) eingerichtet ist, liest er Ihren DirectoryIndex wie index.htm, index.html oder index.php, wenn diese Dateien vorhanden sind, und diese Datei als Homepage Ihres Ordners bedienen.Wenn es keine dieser Dateien gibt, zeigt es eine Indexauflistung.Sie können Ihren Verzeichnisindex über Ihre .htaccess-Datei ändern.
Ihr HTML ist im Wesentlichen die Struktur Ihrer Website-Seite, sodass Sie sicherstellen müssen, dass er ordnungsgemäß eingerichtet ist.
In diesem Beispiel müssen Sie das HTML-Skript, den Header und den Körper identifizieren.Sie können dies mit den folgenden "Tags" tun
<html>
<head></head>
<body></body>
</html>
Tags sind, wie wir in unserem HTML-Dokument verschiedene Elemente identifizieren und in der Regel paarweise kommen.Die meisten Tags haben ein Start \ <> und ein Ende \, einige Tags haben nicht das zweite Tag und endet mit A /> Dies wird als "leeres Element" bezeichnet, das hauptsächlich auf Links und Bildern gesehen wird.
Der Kopf Tag
Hier speichern Sie die Daten, die nicht zufrieden sind, z. B. Site-Metadaten, Dokumenttitel, Zeichensatz, Inline-Styles, Skriptverbindungen und andere Meta-Informationen.Wir werden in unserem Kopfteil zwei verschiedene Tags verwenden:
Titel-Tag - Dieses Tag wird ändert, was auf der Registerkarte angezeigt wird
Link-Tag - Hier würden Sie externe Stil oder Skripts anhängen.Wir verwenden dies, um unserem Website ein Stylesheet hinzuzufügen
Der Körper Tag
Hier wird Ihre Site-Inhalte gehen.Wenn wir wollten, könnten wir Tests direkt hinzufügen.Zum Beispiel, wenn wir "Hallo World" hinzufügen!In unserem HTML sieht es so aus:
<!DOCTYPE html>
<HTML>
<head></head>
<body>Hello World!!</body>
</HTML>
So sieht die Webseite aus, nachdem Sie diesen Code hinzugefügt und Ihren Domainnamen mit Ihrem Browser aufgerufen haben:
Nächstes verbinden wir das Stylesheet in Ihrem HTML.Wie bereits erwähnt, können Sie ein Stylesheet anhängen, indem Sie das Hinzufügen Ihres Stylesheets mit dem Kopf Ihres HTML-Dokuments hinzufügen.Nachdem Sie fertig sind, sollte es so aussehen:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
</body>
</html>
Fügen Sie Container und Inhalte hinzu
Um den Inhalt besser zu organisieren, können Sie Tags verwenden, um verschiedene Objekte wie Container, Bilder, Header usw. anzugeben. Sie nennen diese verschiedenen Tags später in Ihrem StyleSeet.
Für dieses Beispiel werde ich einen DIV-Container verwenden und das \
und \
Stichworte.
<!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>
So wird die Webseite aussehen, bevor wir sie im Stylesheet hinzufügen:
Hinzufügen von Stil zu Ihrer Site
Erstellen und bearbeiten Sie Ihr Stylesheet 'css.css'
Nun, lass uns eine .css-Datei erstellen.Dies sollte dem obigen Dateinamen übereinstimmen, sodass unser Beispiel CSS.CSS ist.Sie können die verschiedenen Elemente anrufen, die Sie in Ihrem HTML-Dokument in Ihrem HTML-Dokument in Ihrem HTML-Dokument gekennzeichnet haben.
In diesem Beispiel haben wir 4 verschiedene Elemente: Körper, Div, H1 und p. Nachfolgend können wir sehen, wie Sie diese Tags verwenden können, um den Hintergrund zu ändern, mitzumachen, zu zentrieren und die Größen des Textes zu ändern. Wir zeigen auch, wie Sie einen Textschatten hinzufügen, um mit Klarheit zu helfen.
Hier ist unsere CSS.css-Datei:
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;
}
Es gibt viele verschiedene Attribute, die Sie zu Ihrem Stylesheet hinzufügen können. In diesem Artikel haben wir gerade ein paar grundlegende Optionen abgedeckt.
Viele verschiedene Eigenschaften erfordern eine etwas andere Struktur, je nachdem, was er sich verändert.
Testen Sie Ihre Site
Jetzt können Sie Ihre neue Zielseite überprüfen!Wenn Sie Ihre Domäne noch nicht auf Ihr Hosting hingewiesen haben, können Sie ein Teststandort wie hosts.cx oder Ihre dedizierte IP-Adresse verwenden, um Ihre Site anzuzeigen.
Geschrieben von Hostwinds Team / November 24, 2018