How TO - Erstellen Sie eine Website
Erfahren Sie, wie Sie eine responsive Website erstellen, die auf allen Geräten, PCs, Laptops, Tablets und Telefonen funktioniert.
Erstellen Sie eine Website von Grund auf neu
Ein „Layout-Entwurf“
Es kann sinnvoll sein, vor dem Erstellen einer Website einen Layout-Entwurf des Seitendesigns zu zeichnen:
Navigationsleiste
Nebeninhalt
Irgendein Text, irgendein Text..
Hauptinhalt
Irgendein Text, irgendein Text..
Irgendein Text, irgendein Text..
Irgendein Text, irgendein Text..
Fusszeile
Erster Schritt - Grundlegende HTML-Seite
HTML ist die Standardauszeichnungssprache zum Erstellen von Websites und CSS ist die Sprache, die den Stil eines HTML-Dokuments beschreibt. Wir werden HTML und CSS kombinieren, um eine einfache Webseite zu erstellen.
Hinweis: Wenn Sie sich mit HTML und CSS nicht auskennen, empfehlen wir Ihnen, zunächst unser HTML-Tutorial zu lesen .
Beispiel
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta
charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>A website created by me.</p>
</body>
</html>
Beispiel erklärt
- Die
<!DOCTYPE html>Deklaration definiert dieses Dokument als HTML5 - Das
<html>Element ist das Wurzelelement einer HTML-Seite - Das
<head>Element enthält Metainformationen über das Dokument - Das
<title>Element gibt einen Titel für das Dokument an - Das
<meta>Element sollte den Zeichensatz als UTF-8 definieren - Das
<meta>Element mit name="viewport" lässt die Website auf allen Geräten und Bildschirmauflösungen gut aussehen - Das
<style>Element enthält die Stile für die Website (Layout/Design) - Das
<body>Element enthält den sichtbaren Seiteninhalt - Das
<h1>Element definiert eine große Überschrift - Das
<p>Element definiert einen Absatz
Erstellen von Seiteninhalten
Innerhalb des <body>Elements unserer Website verwenden wir unseren "Layout-Entwurf" und erstellen:
- Eine Überschrift
- Eine Navigationsleiste
- Hauptinhalt
- Nebeninhalt
- Eine Fußzeile
Header
Eine Kopfzeile befindet sich normalerweise oben auf der Website (oder direkt unter einem oberen Navigationsmenü). Es enthält oft ein Logo oder den Namen der Website:
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
Dann verwenden wir CSS, um den Header zu formatieren:
.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c;
/* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}
Navigationsleiste
Eine Navigationsleiste enthält eine Liste mit Links, die Besuchern helfen, durch Ihre Website zu navigieren:
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
Verwenden Sie CSS, um die Navigationsleiste zu gestalten:
/* Style the top navigation bar */
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333;
/* Dark background color */
}
/* Style the navigation bar links */
.navbar
a {
float: left; /* Make sure that the links stay
side-by-side */
display: block; /* Change the display to
block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center;
/* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none;
/* Remove underline */
}
/*
Right-aligned link */
.navbar a.right {
float: right;
/* Float a link to the right */
}
/*
Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black;
/* Black text color */
}
Inhalt
Erstellen Sie ein 2-Spalten-Layout, aufgeteilt in einen „Nebeninhalt“ und einen „Hauptinhalt“.
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
Wir verwenden CSS Flexbox, um das Layout zu handhaben:
/* Ensure proper sizing */
* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create
two unequal columns that sits next to each other */
/* Sidebar/left column
*/
.side {
flex: 30%; /* Set the width of the sidebar
*/
background-color: #f1f1f1; /* Grey background color
*/
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
Fügen Sie dann Medienabfragen hinzu, um das Layout responsive zu machen. Dadurch wird sichergestellt, dass Ihre Website auf allen Geräten (Desktops, Laptops, Tablets und Telefone) gut aussieht. Ändern Sie die Größe des Browserfensters, um das Ergebnis anzuzeigen.
/* Responsive layout - when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*
Responsive layout - when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
Tipp: Um eine andere Art von Layout zu erstellen, ändern Sie einfach die Flex-Breite (aber stellen Sie sicher, dass sie 100 % ergibt).
Tipp: Fragen Sie sich, wie die @media-Regel funktioniert? Lesen Sie mehr darüber in unserem Kapitel CSS Media Queries .
Tipp: Um mehr über das Flexible-Box-Layout-Modul zu erfahren, lesen Sie unser CSS-Flexbox-Kapitel .
Was ist Box-Sizing?
Sie können ganz einfach drei schwebende Boxen nebeneinander erstellen. Wenn Sie jedoch etwas hinzufügen, das die Breite jeder Box vergrößert (z. B. Polsterung oder Rahmen), wird die Box brechen. Die box-sizingEigenschaft ermöglicht es uns, die Polsterung und den Rand in die Gesamtbreite (und -höhe) der Box einzubeziehen und sicherzustellen, dass die Polsterung innerhalb der Box bleibt und nicht bricht.
Sie können mehr über die Box-Sizing-Eigenschaft in unserem CSS-Box-Sizing-Tutorial lesen .
Fusszeile
Zuletzt fügen wir eine Fußzeile hinzu.
<div class="footer">
<h2>Footer</h2>
</div>
Und style es:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
Herzliche Glückwünsche! Sie haben eine responsive Website von Grund auf neu erstellt.
W3Schulräume
Wenn Sie Ihre eigene Website erstellen und Ihre .html-Dateien hosten möchten, probieren Sie unseren kostenlosen Website-Builder namens W3schools Spaces aus :
