Jak TO - Zrób stronę internetową
Dowiedz się, jak stworzyć responsywną stronę internetową, która będzie działać na wszystkich urządzeniach, komputerze, laptopie, tablecie i telefonie.
Utwórz stronę internetową od podstaw
„Wersja robocza”
Rozsądnym rozwiązaniem może być narysowanie szkicu układu strony przed utworzeniem strony internetowej:
Pasek nawigacyjny
Treść boczna
Jakiś tekst, jakiś tekst...
Główna zawartość
Jakiś tekst, jakiś tekst...
Jakiś tekst, jakiś tekst...
Jakiś tekst, jakiś tekst...
Stopka
Pierwszy krok — podstawowa strona HTML
HTML to standardowy język znaczników do tworzenia stron internetowych, a CSS to język opisujący styl dokumentu HTML. Połączymy HTML i CSS, aby stworzyć podstawową stronę internetową.
Uwaga: Jeśli nie znasz HTML i CSS, sugerujemy, abyś zaczął od przeczytania naszego samouczka HTML .
Przykład
<!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>
Przykład wyjaśniony
- Deklaracja
<!DOCTYPE html>
definiuje ten dokument jako HTML5 - Element
<html>
jest głównym elementem strony HTML - Element
<head>
zawiera metainformacje o dokumencie - Element
<title>
określa tytuł dokumentu - Element
<meta>
powinien definiować zestaw znaków jako UTF-8 - Element
<meta>
z name="viewport" sprawia, że strona wygląda dobrze na wszystkich urządzeniach i rozdzielczościach ekranu - Element
<style>
zawiera style dla strony internetowej (layout/design) - Element
<body>
zawiera widoczną zawartość strony - Element
<h1>
definiuje duży nagłówek - Element
<p>
definiuje akapit
Tworzenie zawartości strony
W <body>
elemencie naszej strony internetowej wykorzystamy nasz "Layout Draft" i stworzymy:
- Nagłówek
- Pasek nawigacyjny
- Główna zawartość
- Treść boczna
- Stopka
nagłówek
Nagłówek zwykle znajduje się u góry strony (lub tuż pod górnym menu nawigacyjnym). Często zawiera logo lub nazwę strony internetowej:
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
Następnie używamy CSS do stylizacji nagłówka:
.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;
}
Pasek nawigacyjny
Pasek nawigacyjny zawiera listę linków ułatwiających odwiedzającym poruszanie się po Twojej witrynie:
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
Użyj CSS do stylizacji paska nawigacyjnego:
/* 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 */
}
Zawartość
Utwórz układ dwukolumnowy, podzielony na „treść poboczną” i „treść główną”.
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
Do obsługi układu używamy CSS Flexbox:
/* 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 */
}
Następnie dodaj zapytania o media, aby układ był responsywny. Dzięki temu Twoja witryna będzie dobrze wyglądać na wszystkich urządzeniach (komputerach stacjonarnych, laptopach, tabletach i telefonach). Zmień rozmiar okna przeglądarki, aby zobaczyć wynik.
/* 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%;
}
}
Wskazówka: Aby utworzyć inny rodzaj układu, po prostu zmień szerokość flex (ale upewnij się, że sumuje się do 100%).
Wskazówka: czy zastanawiasz się, jak działa reguła @media? Przeczytaj więcej na ten temat w naszym rozdziale CSS Media Query .
Wskazówka: Aby dowiedzieć się więcej o module Flexible Box Layout, przeczytaj nasz rozdział dotyczący CSS Flexbox .
Co to jest rozmiar pudełka?
Możesz łatwo stworzyć trzy pływające pudełka obok siebie. Jeśli jednak dodasz coś, co zwiększy szerokość każdego pola (np. dopełnienie lub obramowanie), pole pęknie. Właściwość box-sizing
pozwala na uwzględnienie wypełnienia i obramowania w całkowitej szerokości (i wysokości) pudełka, upewniając się, że wypełnienie pozostaje wewnątrz pudełka i nie pęka.
Możesz przeczytać więcej o właściwości box-sizing w naszym samouczku CSS Box Sizing Tutorial .
Stopka
Na koniec dodamy stopkę.
<div class="footer">
<h2>Footer</h2>
</div>
I stylizuj to:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
Gratulacje! Zbudowałeś responsywną stronę internetową od podstaw.
Przestrzenie W3Schools
Jeśli chcesz stworzyć własną stronę internetową i hostować pliki .html, wypróbuj nasz darmowy kreator stron internetowych o nazwie W3schools Spaces :