Tworzenie własnej strony internetowej dla początkujących: 5 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:29

Niezależnie od tego, czy kiedykolwiek marzyłeś o byciu programistą komputerowym, czy kiedykolwiek korzystałeś ze strony internetowej, a nie oszukujmy się, to prawie każdy z nas, informatyka stała się kręgosłupem biznesu. Chociaż programowanie na początku może wydawać się nieco przerażające, moim celem jest nauczenie Cię podstawowych podstaw projektowania stron internetowych, abyś po tym samouczku mógł stworzyć własną stronę internetową. Pomijając to, przejdźmy do tego!

Kieszonkowe dzieci

• Komputer Macintosh lub Windows (choć można również używać dystrybucji Linuksa, na razie je pomijam, ponieważ jest to wprowadzenie dla początkujących).
• Twój wybór edytora tekstu (Notatnik w systemie Windows, TextEdit na Macu) lub IDE. Z mojego doświadczenia wiem, że Visual Studio Code działa najlepiej dla mnie, więc polecam również sprawdzenie go tutaj: https://code.visualstudio.com/ nie wspominając, że działa na wszystkich platformach OS.

Krok 1: Tagi i trochę historii

Gdy już zdecydujesz się na wybór edytora tekstu lub IDE, zacznijmy od podstaw.

Wierzcie lub nie, HTML lub HyperText Markup Language istnieje już od prawie 30 lat iz każdym rokiem pojawia się coraz więcej ulepszeń języka. Teraz możesz zapytać, jak przeglądarka interpretuje to, co należy umieścić na ekranie? Odbywa się to w kilku częściach:

Formatowanie dokumentów HTML jest łatwe. Masz dwie sekcje zwane głową i ciałem. Nagłówek strony zawiera kod, który nie jest widoczny dla użytkownika. Służy do łączenia arkuszy stylów i deklarowania innych niezbędnych bitów potrzebnych do prawidłowego wyświetlania witryny. Podążając za głową, ciało jest tak, jak się wydaje, ciałem strony internetowej. Tutaj możesz mówić swoim głosem i pokazać publiczności swoje fantastyczne umiejętności HTML! Teraz nie jest to tak proste, jak po prostu wpisywanie tekstu w treści i wyświetlanie go dokładnie tak, jak chcesz, ale w pewnym sensie jest to prawie takie proste, korzystając z rzeczy, które nazywamy tagami.

Oto niektóre z podstawowych tagów HTML:

• tytuł – który służy do informowania przeglądarki, jaki jest tytuł strony. Jest to również to, co widzisz, gdy patrzysz na kartę strony internetowej.
• h1, h2, h3, h4 – które są używane dla różnych rozmiarów nagłówków, gdzie h1 jest największym, a h4 najmniejszym. Więcej na ten temat omówię w następnej sekcji.
• p – akapit, używany do pisania akapitów tekstu. Jak akapity na papierze.
• br – przerwa, która wstawia przerwę zgodnie z tekstem.
• a – służy do tworzenia linków do innych stron, takich jak link klikalny.
• img – służy do łączenia obrazu ze stroną internetową.
• ul, ol, li – listy nieuporządkowane, listy uporządkowane i elementy listy.
• – służy do tworzenia komentarzy inline w kodzie, które nie będą widoczne dla użytkownika końcowego.

A oto kilka tagów CSS (wizualnych):

• kolor – służy do przypisania konkretnego koloru do konkretnego elementu lub ustawienia na stronie.
• font-size – służy do zmiany rozmiaru czcionki na stronie.
• background-color – służy do zmiany koloru tła danego elementu lub całej strony.

Dołączyłam również małą ściągawkę, która pomoże Ci, jeśli poczujesz się trochę zagubiona, ale nie martw się, zrozumiesz to w mgnieniu oka! Ponadto www.w3schools.com jest również fantastycznym źródłem odpowiedzi na wszelkie pytania dotyczące programowania. Zdecydowanie zaoszczędzili mi czasu lub też.

Zasadniczo sposób, w jaki przeglądarka odczytuje plik, jest łatwy. Idzie linia po linii, a procesy działają po funkcji. Znaki są używane do deklarowania znacznika, takiego jak

i służą do zamykania tagów, takich jak

. Jest to ważne, w przeciwnym razie przeglądarka nie ma gdzie się zatrzymać. Pomiędzy

oraz

tagi, to miejsce, w którym wpisujesz to, co chcesz!

Krok 2: Konfiguracja edytora

Teraz, gdy omówiliśmy już nieco podstawowe elementy witryny HTML, zanurkujmy i wypróbujmy to sami. W następnym kroku do programowania witryny użyję Visual Studio Code, ale układ kodu będzie taki sam, jeśli wygodniej będzie Ci używać Notatnika lub TextEdit.

W Notatniku:

• W Notatniku program uruchamia się z pustym plikiem, co bardzo ułatwia rozpoczęcie pracy. Pozwoli nam to również przeskoczyć kilka kroków w porównaniu do korzystania z VS Code. Zacznijmy od zapisania pliku w odpowiednim formacie.
• Kliknij Plik > Zapisz
• Wprowadź nazwę pliku, a następnie.html i w obszarze Zapisz jako typ wybierz wszystkie pliki. Kliknij Zapisz.

W ramach kodu VS:

• Najlepszym sposobem na skorzystanie ze wszystkich funkcji IDE jest rozpoczęcie od utworzenia pliku i poinformowania IDE, jaki to typ pliku. Można to zrobić w następujący sposób:
• Kliknij Plik > Nowy plik
• Otwiera się pusty plik
• Następnie zacznij od zapisania pliku, choć pustego, ponieważ pozwoli to IDE zrozumieć, jaki typ pliku będzie miał produkt końcowy. Podczas zapisywania pamiętaj o dołączeniu rozszerzenia.html na końcu nazwy pliku. Kliknij Zapisz.

Krok 3: Plany

Po pomyślnym zapisaniu pliku filename.html zacznijmy od stworzenia struktury dla naszej strony internetowej. Pamiętaj z góry, jakie kluczowe części pliku musimy zadeklarować, zanim zaczniemy tworzyć resztę strony HTML. Porada od specjalistów: podczas uruchamiania frameworka dla witryny, tag HTML !DOCTYPE informuje przeglądarkę, że plik, który odczytuje, jest plikiem html. Może się to przydać, jeśli masz różne typy kodu w tym samym pliku i chcesz przełączać się między interpreterami. Jeśli chodzi o zakres tej instrukcji, nie będziemy tego zbytnio dotykać, ale jeśli po tej instrukcji chcesz dowiedzieć się więcej o rozwoju HTML, możesz spróbować. Aby uzyskać najlepszą praktykę, wstawię tag HTML !DOCTYPE na górze pliku. Pamiętaj, aby otwierać i zamykać za pomocą.

Tutaj przydaje się zapisanie pliku przed rozpoczęciem programowania, teraz, gdy IDE wie, że działa z plikiem HTML, użyje technologii Intellisense do zakończenia wyrażenia i zaproponuje sugestie, aby przypadkowo nie zapomnieć o zamknięciu tagu. Zauważ, że dla tych z was, którzy używają Notatnika, intellisense nie jest dostępny, jak w IDE. Zaczynamy od wprowadzenia tagów głowy i ciała w następujący sposób: (patrz drugie zdjęcie).

Teraz, gdy konfiguracja dokumentów została zakończona, możemy wyruszyć na wyścigi i dobrze się bawić!

Krok 4: Kod; Kod; Kod;

Możemy zacząć od wstawienia tytułu dla naszego nowo utworzonego pliku. Wpisz, co chcesz. Pamiętaj, że jest to nazwa, która pojawia się w zakładce przeglądarki. Zacznijmy też od wpisania nagłówka naszej strony. Przypomnij sobie wcześniej, jak to robimy. Czy słyszałem h1/2/3/4? To jest poprawne!

Zanim przejdziemy dalej, uważam, że warto otworzyć nasz plik w oknie przeglądarki, abyśmy mogli zobaczyć w czasie rzeczywistym, jak nasze zmiany odzwierciedlają się w przeglądarce. Możesz to zrobić, klikając Plik > Zapisz, aby zapisać plik, przechodząc do folderu, w którym zapisany jest plik HTML, dla mnie jest to pulpit i użyj wybranej przeglądarki, aby otworzyć plik i czy byś na to spojrzał, jest Twoja strona internetowa! Uwaga: osobiście używam Safari jako wybranej przeglądarki na moim komputerze, jednak w tworzeniu stron internetowych Firefox jest złotym standardem do testowania, ponieważ działa z prawie każdym językiem skryptów internetowych.

Jak widać, tytuł jest wyświetlany na karcie, a także widzimy nasz nagłówek h1. Wolę otwierać zarówno okno przeglądarki, jak i IDE, ponieważ kiedy wprowadzasz zmiany w IDE i zapisujesz, zmiany są natychmiastowe w przeglądarce.

Możesz spróbować dodać tagi i bawić się różnymi rzeczami, które możesz zrobić za pomocą HTML. Jak widać poniżej, dodałem kilka akapitów, przerw, zewnętrzne hiperłącze do Instructables.com, obraz (który może być połączony z zewnętrznego źródła lub w tym samym katalogu, w którym przechowywany jest plik. HTML), przykład listy nieuporządkowanej, listy uporządkowanej i na koniec komentarz.

Jeśli chcesz spróbować dodać trochę kolorów i opcji aranżacyjnych, możesz wprowadzić tag stylu w nagłówku pliku. To jest punkt, w którym następuje przejście z HTML do CSS, ale ze względów wizualnych wprowadzę kilka wierszy, abyś mógł zobaczyć, jak to działa. Zasadniczo sposób działania CSS polega na tym, że pozwala kontrolować elementy HTML w funkcjach za pomocą nawiasów { } do wprowadzania kodu dla określonego elementu HTML.

Krok 5: Końcowe myśli

I masz to; pomyślnie utworzyłeś swoją pierwszą stronę internetową! Ponieważ jest to przewodnik dla początkujących, chcę, aby Twoje pierwsze doświadczenie z HTML było przyjemne. Najlepszym sposobem na naukę z mojego doświadczenia jest zanurzenie się i wypróbowanie rzeczy w praktyce, zobaczenie, co możesz zrobić ze swoim kodem, a także zobacz, jak możesz złamać swój kod. To buduje integralność i pomaga lepiej zrozumieć, jak i dlaczego kod działa tak, jak działa. Pamiętaj, że www. W3Schools.com jest świetnym źródłem pytań, a nawet oferuje wirtualną piaskownicę w przeglądarce, aby wypróbować Twój kod. Mam nadzieję, że czegoś się nauczyłeś i szczęśliwego kodowania!