Strona internetowa Bare Bones: 10 kroków

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

Dzisiaj stworzymy od podstaw bardzo prostą stronę internetową. Porozmawiamy o elementach HTML, stylizacji Twojej strony internetowej (kolory, czcionki, wyrównanie itp.), a na koniec o tym, jak wstawić obraz na swoją stronę internetową!

Pod koniec tej instrukcji będziesz mieć podstawowe umiejętności tworzenia strony internetowej od zera i odkryjesz, że kodowanie nie jest tak trudne, jak się wydaje!

Krok 1: Korzystanie z Notatnika

Zamierzamy użyć Notatnika w systemie Windows do stworzenia naszej pierwszej strony internetowej. Chociaż każdy edytor tekstu wystarczy, notatnik jest preinstalowany na komputerach z systemem Windows, więc jest świetnym punktem wyjścia.

Aby otworzyć notatnik, przejdź do paska wyszukiwania w lewym dolnym rogu ekranu i wpisz „Notatnik”. Następnie wybierz aplikację „Notatnik”, która pojawi się w wynikach wyszukiwania. Powinno otworzyć się nowe okno.

Krok 2: Dodawanie podstawowego drzewa dokumentów HTML

Wszystkie strony internetowe muszą mieć standardową strukturę szkieletową, aby przeglądarka internetowa (Chrome, Firefox, Edge, Internet Explorer, Safari…) mogła przetwarzać i wyświetlać Twoją stronę internetową.

Nazywa się to drzewem dokumentów html. W Notatniku wpisz „elementy” lub „tagi” HTML, jak pokazano na zrzucie ekranu. Możesz również skopiować i wkleić:

Krok 3: Zapisywanie jako strona.html

Teraz, gdy mamy naszą podstawową strukturę HTML w Notatniku, zapiszmy ją, abyśmy nie stracili żadnej pracy i abyśmy mogli zobaczyć nasze zmiany w miarę postępów w Instructable.

1. Wybierz „Plik” > „Zapisz jako…” (zrzut ekranu 1)
2. Zmień typ pliku na „Wszystkie pliki” (zrzut ekranu 2)
3. Nadaj plikowi wybraną nazwę. Pamiętaj, aby zanotować, gdzie zapisujesz dokument na komputerze, aby móc go później otworzyć. UWAGA: Najważniejszą częścią zapisywania tego pliku jest dodanie „.html” na końcu nazwy pliku. Umożliwi to Twojemu komputerowi rozpoznanie go jako strony internetowej. Jeśli więc chcesz nazwać swój plik „moja_strona”, dodaj na końcu.html, np. „moja_strona.html”

Krok 4: Dodawanie tytułu do Twojej strony internetowej

Mamy więc podstawową strukturę html potrzebną przeglądarkom internetowym do interpretacji i wyświetlania naszej strony internetowej, ale nie mamy żadnej treści. Zmieńmy to!

Pierwszą rzeczą, którą powinniśmy zrobić, to nadać naszej stronie tytuł. Większość stron internetowych ma tytuł. To jest to, co wyświetla się na karcie w przeglądarce internetowej (patrz zrzut ekranu). Nadaję mojej stronie tytuł "Strona Taylora". Aby to zrobić, musimy dodać element „title”.

Strona Taylora

W tym momencie zauważysz, że każdy tag ma tag „otwierający” i „zamykający”. Jak na przykład

oraz.

Ma to na celu rozeznanie, gdzie zaczyna się tytuł, a gdzie kończy. Prawie wszystkie tagi html podążają za tym, jednak są pewne wyjątki.

Krok 5: Dodawanie treści do Twojej strony internetowej

Cóż, mamy tytuł naszej strony internetowej, ale nadal nie mamy dla niego żadnej treści. Dodajmy polotu!

Dodaliśmy tytuł do naszej strony internetowej za pomocą elementu „title”. Nadajmy naszej stronie duży, przyciągający uwagę nagłówek, używając elementu 'h1', który jest elementem nagłówka.

Strona Taylora

Witam na mojej stronie

Krok 6: Przeglądanie naszych dotychczasowych zmian

Mamy tytuł, mamy trochę treści, sprawdźmy naszą stronę internetową, jak idzie do tej pory.

1. Zapisz plik w notatniku
2. Przejdź do miejsca, w którym zapisałeś plik i kliknij go dwukrotnie. Powinien automatycznie otworzyć się w domyślnej przeglądarce internetowej. Wygląda dobrze!

Krok 7: Dodawanie znacznika akapitu

Mamy tytuł, nagłówek, teraz dodajmy akapit z dodatkowym tekstem. Nazwa elementu dla akapitu to „p”. Możesz zobaczyć jego zastosowanie poniżej:

Strona Taylora

Witam na mojej stronie

Dziś dowiemy się, jak stworzyć tę bardzo prostą stronę internetową!

Uwaga: zmiany możesz przeglądać w dowolnym momencie, zapisując notatnik i otwierając plik.

Krok 8: Daj mu trochę koloru

Nasza strona internetowa jest w toku, ale jest całkiem prosta. Nadajmy kolor naszemu tagowi akapitu!

Możemy pokolorować różne elementy, dodając atrybut „style” do tagu „p”, jak opisano poniżej:

Strona Taylora

Witam na mojej stronie

Dziś dowiemy się, jak stworzyć tę bardzo prostą stronę internetową!

Krok 9: Dodawanie zdjęcia

Czym jest strona internetowa bez zdjęć? Dodajmy zdjęcie do naszej strony!

Pierwszym krokiem jest znalezienie obrazu, który Ci się podoba. Użyłem obrazów google do wyszukania golden retrievera. Wyciągnij obraz w górę i upewnij się, że adres URL kończy się na.jpg,.png,.gif,-j.webp

Po wybraniu obrazu musimy dodać go do strony html za pomocą tagu „img”. Mój obraz to:

Dodaj go do swojej strony za pomocą tagu „img” z atrybutem „src”:

Strona Taylora

Witam na mojej stronie

Dziś dowiemy się, jak stworzyć tę bardzo prostą stronę internetową!

Krok 10: Przeglądanie produktu końcowego

Zapisz plik notatnika i otwórz produkt końcowy. Powinieneś zobaczyć swoją stronę internetową!