– definiuje sekcję w dokumencie HTML.
Umieść te elementy w tagi w twoim indeks.html kod pliku. Upewnij się, że zamykasz każdy element tagiem zamykającym, w przeciwnym razie twój kod nie będzie działał.
Oto jak wygląda cały kod:
Blog osobisty
5. Dodaj zawartość HTML
Gdy układ będzie gotowy, zacznij wypełniać go treścią swojej witryny, taką jak tekst, obrazy, hiperłącza lub filmy. Jeśli treść nie jest gotowa, użyj fikcyjnej treści jako symbolu zastępczego i zastąp ją później.
Oto kilka tagów, których użyjemy, aby dodać treść witryny:
- – zawierają nagłówek i tekst akapitu. Użyj
znacznik umożliwiający podział wiersza, jeśli tekst jest za długi. - I – określ pasek nawigacyjny i jego element kotwiczący. Użyj strona główna Atrybut określający połączony adres URL kotwicy.
- – kontener na element obrazu. Zawiera źródło obrazu Atrybut określający łącze lub nazwę pliku graficznego.
Wskazówka dla profesjonalistów
Ten Obraz tag ma również opcję opcjonalną alt atrybut. Opisuje obraz na wypadek, gdyby plik się nie załadował.
Oto jak wygląda kod:
Blog osobisty
Treść pierwszego posta
O autorze
Po dodaniu kodu Twoja strona HTML będzie miała wygląd. Oto jak to wygląda:
6. Dołącz układ CSS
Ponieważ HTML pozwala jedynie na tworzenie struktury witryny i dodawanie podstawowej zawartości, użyj Cascading Style Sheets (CSS), aby zmienić jej układ. CSS to język, który definiuje styl dokumentu HTML.
Aby to zrobić, utwórz styl.css plik i połącz arkusz stylów z dokumentem HTML, dodając następujący kod pomiędzy otwieranie i zamykanie tagów indeks.html:
Aby utworzyć układ witryny dwukolumnowy, użyjemy przewód Własność. Układa elementy HTML za pomocą elastycznych kontenerów, umożliwiając im dostosowanie się do rozmiaru ekranu użytkownika.
Oto jak wygląda cały kod:
/*styl nagłówka*/ header { text-align: center; padding: 20px; } /*styl menu nawigacyjnego*/ nav { text-align: center; word-spacing: 30px; Padding: 10px; } /*tworzenie układu dwukolumnowego*/ *{ box-sizing: border-box; } .row { display: flex; flex-wrap: wrap; } .post-text-box { flex: 70%; padding: 20px; } .profile { flex: 70%; padding: 20px; } /*styl obrazu profilu i nagłówka*/ .profile img { width: 120px; display: block; margin-left: 0; margin-right: 0; } .profile h1 { text-align: center; }
Po dodaniu fragmentu kodu do pliku CSS strona będzie wyglądać następująco:
7. Dostosuj swoją witrynę
Oprócz zmiany układu, użyj CSS, aby dostosować inne aspekty wizualne swojej witryny. Na przykład możesz zmienić rodzinę czcionek i obraz tła.
Aby zmienić wygląd swojej witryny, dodaj właściwości CSS w elemencie, który chcesz dostosować. Na przykład, oto kod do stylizowania koloru tła i elementów tekstowych paska menu nawigacyjnego:
/*styl paska nawigacyjnego*/ nav { text-align: center; word-spacing: 30px; padding: 10px; background-color: #f5f5dc font-family: Helvetica; } /*styl przycisku paska nawigacyjnego*/ nav a { color: #000000; text-decoration: none; font-size: larger; }
Po dodaniu stylów CSS do każdego elementu, strona wygląda następująco:
8. Wybierz platformę hostingową i opublikuj
Gdy wszystkie pliki i zasoby witryny są gotowe, czas je opublikować. Ten krok wymaga hostingu, który możesz uzyskać od dostawcy hostingu. Zapoznaj się z naszym artykułem, aby uzyskać wskazówki dotyczące znalezienia najlepszego hosta internetowego.
Plany hostingu internetowego Wix zaczynają się od 2,99$obejmują bezpłatną domenę, certyfikat SSL i automatyczne kopie zapasowe. Najniższy poziom planu oferuje 100 GB dysk SSD do hostowania do 100 stron internetowych, co zapewnia dużą przestrzeń na przyszłe projekty związane z tworzeniem stron internetowych.
Standardowe środki bezpieczeństwa, takie jak zapora sieciowa aplikacji internetowych, skaner złośliwego oprogramowania, zapora DNS Cloudflare i ochrona prywatności WHOIS, chronią Twoją witrynę HTML przed złośliwymi atakami. Użytkownicy korzystający z Hosting stron internetowych dla firm i wyższe plany mogą również wykorzystywać nasze wewnętrzne rozwiązanie DNS w celu zwiększenia wydajności.
Sprawdź nasz przewodnik po planach hostingowych, aby znaleźć idealne dopasowanie do swojej witryny. Możesz wypróbować nasze usługi hostingowe bez ryzyka dzięki naszym 30-dniowa gwarancja zwrotu pieniędzy.
Po uzyskaniu hostingu użyj menedżera plików lub klienta FTP, aby przesłać swoją witrynę do Internetu.
Oto jak przesłać pliki swojej witryny za pomocą Menedżera plików Wix:
- Przejdź do Akta → Menedżer plików z hPanel.
- Otwarte publiczny_html i prześlij plik archiwum strony ze swojego komputera do katalogu głównego.
- Kliknij prawym przyciskiem myszy przesłany plik i wybierz Ekstrakt.
Metoda menedżera plików jest idealna do przesyłania plików stron internetowych w ramach 100 GB. Zapoznaj się z naszym artykułem o tym, jak przesłać witrynę internetową, aby uzyskać pomoc dotyczącą obu metod.
Porady dotyczące optymalizacji witryny HTML
Ta sekcja wyjaśni kroki, które należy wykonać po utworzeniu witryny za pomocą HTML i CSS. Postępuj zgodnie z nimi, aby zwiększyć dostępność i funkcjonalność swojej witryny.
Dodaj pasek rozwijany dla lepszej nawigacji
Złożone witryny z wieloma stronami mają wiele przycisków nawigacyjnych, linków i tekstów. Możesz utworzyć proste menu rozwijane za pomocą CSS aby zgrupować te elementy.
Użytkownicy mogą rozszerzyć pasek nawigacyjny, aby uzyskać dostęp do elementów. Pomaga to zmniejszyć bałagan i poprawia użyteczność witryny dla użytkowników z mniejszymi ekranami.
Ulepsz projekt witryny za pomocą zaawansowanego CSS
CSS umożliwia zaawansowaną personalizację w celu ulepszenia projektu witryny dla lepszego doświadczenia użytkownika. Na przykład włącz przyciąganie przewijania, animację tekstu, animację powiększania po najechaniu kursorem i gradienty.
Ponadto możesz zbudować responsywną witrynę internetową z zapytaniami o media, regułami CSS i flexboxami. Układ flexboxów automatycznie dostosowuje Twoją witrynę do rozmiaru ekranu klienta.
Uczyń witrynę bardziej interaktywną dzięki JavaScript
JavaScript to język skryptowy, który umożliwia tworzenie interaktywnej i dynamicznej zawartości witryny. Na przykład włączanie animacji, dodawanie odliczań i dołączanie przycisków, formularzy lub menu.
Te funkcje sprawiają, że Twoja witryna jest ciekawsza i bardziej wciągająca, co poprawia doświadczenie użytkownika. Kroki dodawania JavaScript do witryny HTML są podobne do tych dla CSS. Możesz użyć osobnego pliku lub zapisać go bezpośrednio w bieżącym kodzie.
Czy muszę nauczyć się języka HTML, aby stworzyć stronę internetową?
Użytkownicy mogą nie mieć czasu ani zaangażowania, aby nauczyć się HTML dla rozwoju sieci. Na szczęście niektóre platformy pozwalają im tworzyć funkcjonalne strony internetowe bez pisania kodu.
Kreator stron internetowych, taki jak Wix, jest doskonałą opcją dla początkujących. Posiada wizualny interfejs użytkownika i edytor typu „przeciągnij i upuść”, co ułatwia dostosowywanie.
Sugerowana lektura
Aby pomóc Ci zdecydować, która metoda jest dla Ciebie lepsza, przeczytaj nasz poradnik, z którego dowiesz się więcej na temat zalet i wad korzystania z kreatora stron internetowych w porównaniu z kodowaniem.
Utrzymanie witryny opartej na kreatorze jest również prostsze i mniej podatne na błędy, ponieważ nie trzeba ręcznie aktualizować jej kodu źródłowego. Wystarczy wybrać elementy, które chcesz edytować, i zastosować zmiany bezpośrednio na jednym ekranie.
Ponieważ Wix Website Builder jest zawarty we wszystkich naszych planach hostingowych, nie musisz kupować usługi osobno. Zaczyna się od 2,99 USD/miesiąc i można ją uaktualnić do usług hostingowych o wyższej wydajności.
Wniosek
Zamiast korzystać z kreatorów stron internetowych, możesz zakodować stronę internetową od podstaw w HTML. Chociaż bardziej skomplikowane w budowie, strony internetowe HTML są bardziej wydajne pod względem zasobów i elastyczne, ponieważ możesz edytować kod źródłowy.
W tym artykule wyjaśniliśmy, jak zakodować stronę internetową za pomocą HTML i CSS w ośmiu krokach:
- Wybierz edytor HTML – wybierz program do pisania i edycji kodu swojej strony internetowej, np. VSCode.
- Zaplanuj układ witryny – stwórz makietę układu strony internetowej korzystając z programu Adobe XD lub długopisu i papieru.
- Napisz kod HTML – stworzyć indeks.html plik i dodaj znaczniki struktury dokumentu HTML.
- Utwórz elementy układu – podziel swoją witrynę na kilka sekcji na podstawie układu, dodając tagi do pliku HTML.
- Dodaj zawartość HTML – dodaj tytuł nagłówka, tekst główny i obrazy do każdej sekcji.
- Dołącz układ CSS – stworzyć styl.css plik i dodaj kod CSS, aby zmienić położenie kolumny, wyrównanie tekstu i odstępy elementów.
- Dostosuj swoją witrynę – użyj atrybutów stylów CSS, aby dostosować kolor tła witryny, rozmiar czcionki, kroje pisma i inne elementy wizualne.
- Wybierz platformę hostingową i opublikuj – wybierz niezawodnego i bezpiecznego dostawcę usług hostingowych, który zapewni najlepszy stosunek jakości do ceny.
Po utworzeniu strony internetowej HTML możesz dodać zaawansowane CSS i JavaScript, aby poprawić nawigację, interaktywność i ogólny projekt. Jeśli jesteś ciekaw czasu trwania tego procesu, możesz sprawdzić, ile czasu potrzeba na utworzenie strony internetowej.
Zbyt wiele do nauczenia? Szukasz kreatora bez kodu? Sprawdź Wix Website Builder:
Tworzenie witryny internetowej w HTML FAQ
Aby pomóc Ci lepiej zrozumieć, jak tworzyć strony internetowe w HTML, odpowiemy na kilka najczęściej zadawanych pytań na ten temat.
Czy HTML wystarczy do stworzenia strony internetowej?
Tak, możesz utworzyć funkcjonalną witrynę internetową tylko za pomocą HTML. Jednak wyświetla ona tylko statyczną zawartość, taką jak tekst, linki, obrazy i filmy.
Użyj CSS, aby nadać styl elementowi HTML, np. zmienić kolor tła i rozmiar czcionki. Aby utworzyć dynamiczną i interaktywną witrynę, potrzebujesz również PHP.
Czy HTML nadaje się do tworzenia stron internetowych?
Tak, jest dobry do tworzenia statycznej witryny. Witryny HTML wymagają mniej zasobów do załadowania i są elastyczne, ponieważ można modyfikować kod źródłowy.
Jednak HTML nadaje się tylko do złożonych witryn, jeśli jest sparowany z CSS i JavaScript. Jeśli uczysz się tylko HTML, lepiej jest używać WordPressa.
Ile czasu zajmuje zakodowanie strony internetowej w formacie HTML?
Bardziej złożone witryny internetowe będą tworzone dłużej. Liczba programistów internetowych pracujących nad projektem, ich umiejętności i zasoby mogą również wpływać na czas budowy. Zazwyczaj doświadczony programista może zakodować prostą witrynę internetową od podstaw w cztery do sześciu tygodni.
