Wiele osób uważa, że tworzenie własnej strony internetowej jestto trudna firma, która wymaga poważnego przygotowania i użycia złożonych narzędzi. W rzeczywistości na początek wystarczy minimalna wiedza i najbardziej podstawowy program Windows - Notatnik. Postępując zgodnie z prostymi instrukcjami tworzenia strony internetowej w Notatniku, możesz zrobić pierwszą pełną stronę w ciągu kilku godzin.
Doświadczeni programiści stron internetowychtwórcy witryn bardzo rzadko korzystają z Notatnika, ale istnieją dwie kategorie użytkowników, dla których ten program jest doskonałym wyborem:
Wielu specjalistów zapoznało się z układem iHTML, zrozumienie, jak utworzyć stronę internetową za pomocą Notatnika. Pozwoliło im to bezpiecznie i szybko skonsolidować całą zdobytą wiedzę. Notatnik nie jest zaprojektowany do pracy z kodem i znacznikami, nie ma żadnych wbudowanych wskazówek, autouzupełniania i innych układów dostępnych w nowoczesnych programach, co oznacza, że deweloper może polegać tylko na sobie i swojej pamięci.
Edytor tekstowy Notatnik ma najbardziej skromnyminimalistyczny interfejs, co oznacza, że zrozumienie złożonej funkcjonalności programu nie zajmuje dużo czasu. Jest to bardzo atrakcyjne dla użytkowników, którzy nie planują spędzać czasu na uczeniu się narzędzia, z którego często nie będą korzystać.
Instrukcja otwierania strony HTML w Notatniku zaczyna się od otwarcia programu. Najłatwiejszym sposobem na znalezienie Notatnika jest menu Start systemu Windows w sekcji Akcesoria.
Otwarty nowy plik należy zapisać za pomocąrozszerzenie HTML. Jest to ważne, ponieważ dzięki temu rozszerzeniu przeglądarka zrozumie, że ma przed sobą stronę internetową. Polecenie Zapisz jako w menu Plik otworzy nowe okno. Tutaj musisz nazwać dokument index.html, wybrać kodowanie utf-8 i folder do zapisania.
Teraz możesz otworzyć ten plik w dowolnym momencie, klikając go dwukrotnie lub klikając prawym przyciskiem myszy menu kontekstowe i wybierając „Otwórz za pomocą Notatnika”.
Strona została już utworzona i możesz zobaczyć jak wygląda w przeglądarce. Istnieje kilka sposobów otwierania dokumentu w przeglądarce internetowej:
plik: /// C: /Users/UserName/Desktop/my-site/index.htmlTeraz strona jest przewidywalnie pusta, czas wypełnić ją informacjami.
Wszystkie strony internetowe w bezmiarze sieci World Wide Websą napisane w specjalnym języku HTML (Hypertext Markup Language). Zrozumienie jego podstaw jest bardzo ważne, aby dowiedzieć się, jak stworzyć stronę internetową w Notatniku lub innym edytorze. Deweloper używa HTML, aby wyjaśnić przeglądarce, jak powinna wyglądać strona. Dlatego ważne jest, aby ustawić prawidłowe rozszerzenie pliku.
Język oparty jest na znacznikach - kombinacjach znaków ujętych w nawiasy ostre.
Przykłady tagów:
<h1> Nagłówek pierwszego poziomu </h1> <i> Tekst kursywą </i>Tekst pomiędzy otwierającym i zamykającym znacznikiem będzie obsługiwany przez przeglądarkę w specjalny sposób.
Oprócz danych wyświetlanych bezpośrednio na stronie, podczas tworzenia strony należy podać specjalne informacje serwisowe przeznaczone dla samej przeglądarki.
Powinieneś zacząć pracę z poprawnym formatowaniem dokumentu html. Podstawowa struktura strony wygląda tak:
<!DOCTYPE html> <html> <głowa> <meta zestaw znaków = "utf-8"> <title> Najlepsza witryna na świecie </title> </head> <ciało> </body> </html>Znaczenie każdego elementu:
DOCTYP - informacje techniczne dla przeglądarki, wskazujące jak powinna interpretować kod;HTML - tag główny strony;głowa - sekcja informacji o usługach niewidoczna dla odwiedzających witrynę;meta - znacznik usługi, atrybut charset określa kodowanie tekstu;tytuł - nazwa strony wyświetlana w zakładce przeglądarki;ciało - treść dokumentu, wyświetlana bezpośrednio na stronie.Po zapisaniu kodu i ponownym otwarciu (lub przeładowaniu) pliku w przeglądarce widać pierwszą zmianę - na zakładce pojawiła się nazwa strony.
Zanim zorientujesz się, jak utworzyć witrynę w HTML za pomocą Notatnika, musisz jasno wyobrazić sobie, jak ta witryna powinna wyglądać. Weźmy na przykład osobisty blog pewnego Johna Doe.
Główne elementy struktury tej strony to:
Kod HTML tej strony będzie wyglądał tak:
<!DOCTYPE html> <html> <głowa> <meta zestaw znaków = "utf-8"> <title> Najlepsza witryna na świecie </title> </head> <ciało> <div class = "wrapper"> <nagłówek> <a href="index.html"> <img src = "/ obrazy / obrazy / logo.png" alt = "" szerokość = "100"> </a> <h1> Jan Kowalski </h1> </header> <nawigacja> <ul> <li> <a href="bio.html"> Autobiografia </a> </li> <li> <a href="life.html"> Moje życie, moje osiągnięcia </a> </li> <li> <a href="gallery.html"> Album zdjęć </a> </li> <li> <a href="contacts.html"> Skontaktuj się ze mną </a> </li> <li> <a href="thanks.html"> Dzięki </a> </li> </ul> </nav> <główna> <artykuł> <h2>Superkoncert </h2> <div> Czy warta była kilometrowa kolejka po bilety? cieszyć się tym programem !! </div> <a href="posts/concert.html"> Zobacz więcej </a> </artykuł> <artykuł> <h2> Dlaczego kocham lody </h2> <div> Chcę podzielić się głębokimi powodami moja miłość do lodów... </div> <a href="posts/ice-cream.html"> Zobacz więcej </a> </artykuł> <artykuł> <h2> Być albo nie być? </h2> <div> Sprawy życia i śmierci. </div> <a href="posts/być-lub-nie-być.html"> Patrz szczegóły </a> </artykuł> </main> <stopka> Jan Kowalski (c) 2018 </footer> </div> </body> </html>Do opisu strony internetowej wykorzystywane są tagi semantyczne ze standardu HTML5: nagłówek, Główny, nav, stopka, artykuł.
Wyjaśnienia do kodu:
obrazy równo z plikiem index.html... W kodzie do tego za pomocą atrybutu szerokość szerokość jest ściśle ustawiona na 100 pikseli.h1, co podkreśla jego znaczenie.h2.obwoluta... Atrybuty klas są powszechnie używane do stylizowania elementów.Teraz strona wygląda tak:
Ten widok nie jest bardzo podobny do planowanego. Aby naprawić sytuację, musisz dodać dekorację.
Aby to zrobić, musisz utworzyć kolejny plik, obok index.html i nazwij to style.css... Będzie zawierał wszystkie niezbędne style.
W tej chwili struktura projektu wygląda tak:
Kontynuując zastanawianie się, jak stworzyć stronę internetową w Notatniku, przechodzimy na nowy poziom - łącząc arkusz stylów.
Aby przeglądarka mogła zrozumieć, skąd wziąć projekt, musisz podać adres pliku css. To jest informacja serwisowa, powinna być umieszczona w dziale głowa.
<głowa> <meta zestaw znaków = "utf-8"> <title> Najlepsza witryna na świecie </title> <link rel = "stylesheet" href = "style.css"> </head>Teraz wszystko, co zostanie opisane w pliku style.css, przeglądarka zastosuje się do strony. Na przykład zmieńmy kolor tła:
ciało { tło: # 89745d; }Cała zawartość arkusza stylów będzie wyglądać tak:
ciało { wypełnienie: 0; rodzina czcionek:bezszeryfowy; rozmiar czcionki: 16px; tło: # 89745d; } .opakowanie { wypełnienie: 20px; margines lewy: auto; margines prawy: auto; szerokość: 960px; } nagłówek { dekoracja tekstu: brak; } obraz nagłówka { wyrównanie w pionie: środek; margines prawy: 20px; } nagłówek h1 { wyświetlacz: inline-block; wyrównanie w pionie: środek; kolor: # f8d9b7; } nawigacja { wyściółka: 20px; dopełnienie-dolne: 20px; } ul. margines: 0; wyrównanie tekstu: środek; } nav ul li { wyświetlacz: inline-block; styl listy: brak; dopełnienie: 0px 15px; } nav ul li a { kolor: # f8d9b7; dekoracja tekstu: brak; } nav ul li a: najedź { dekoracja tekstu: podkreślenie; } artykuł { wypełnienie: 20px; margines: 20px 0; tło: # f8d9b7; cień pudełka: 0 0 15px # f8d9b7; } artykuł h2 { górny margines: 0px; margines-dolny: 15px; kolor: # d57106; } artykuł a { rozmiar czcionki: 14px; styl czcionki: kursywa; kolor: # d57106; } stopka { wypełnienie: 20px; wyrównanie tekstu: do prawej; kolor: # f8d9b7; rozmiar czcionki: 14px; grubość czcionki: pogrubiona; }Objaśnienia dotyczące stylów:
Jeśli odświeżysz dokument w przeglądarce, zobaczysz jego ostateczną reprezentację. Pierwsza strona internetowa została pomyślnie utworzona!
Jednak blog nie może składać się tylko z głównychstrony z listą artykułów. Konieczne jest w jakiś sposób wyświetlenie osobnego posta z pełnym tekstem, dodatkowo strony wskazane w menu nawigacyjnym są już zaplanowane.
Najważniejszą koncepcją Internetu jest łączenie poszczególnych dokumentów za pomocą linków. Jak stworzyć stronę z hiperłączem w Notatniku?
W rzeczywistości wszystko, co konieczne, zostało już zrobione. Pozycje menu i wskaźniki „Obejrzyj” są bardziej szczegółowo opakowane w specjalną etykietę a, który odpowiada za tworzenie hiperłącza. Wymagany adres jest wskazany w atrybucie href... Pozostaje tylko stworzyć same strony i umieścić je obok pliku index.html.
Przykładowy kod strony albumu fotograficznego (gallery.html):
<!DOCTYPE html> <html> <głowa> <meta zestaw znaków = "utf-8"> <title> Najlepsza witryna na świecie </title> <link rel = "stylesheet" href = "style.css"> </head> <ciało> <div class = "wrapper"> <nagłówek> <a href="index.html"> <img src = "/ obrazy / obrazy / logo.png" alt = "" szerokość = "100"> </a> <h1> Jan Kowalski </h1> </header> <nawigacja> <ul> <li> <a href="bio.html"> Autobiografia </a> </li> <li> <a href="life.html"> Moje życie, moje osiągnięcia </a> </li> <li> <a href="gallery.html"> Album zdjęć </a> </li> <li> <a href="contacts.html"> Skontaktuj się ze mną </a> </li> <li> <a href="thanks.html"> Dzięki </a> </li> </ul> </nav> <główna> <div class = "galeria"> <figura> <img src = "/ obrazy / obrazy / in-forest.jpg" alt = ""> <figcaption>W lesie </figcaption> </figur> <figura> <img src = "/ obrazy / obrazy / zima.jpg" alt = ""> <figcaption> Zimą </figcaption> </figur> <figura> <img src = "/ obrazy / obrazy / on-beach.jpg" alt = ""> <figcaption> Plaża </figcaption> </figur> <figura> <img src = "/ obrazy / obrazy / praca.jpg" alt = ""> <figcaption> W pracy </figcaption> </figur> <figura> <img src = "/ obrazy / obrazy / nowy-rok.jpg" alt = ""> <figcaption>Nowy Rok</figcaption> </figur> <figura> <img src = "/ obrazy / obrazy / obraz.jpg" alt = ""> <figcaption> Autoportret </figcaption> </figur> </div> </main> <stopka> Jan Kowalski (c) 2018 </footer> </div> </body> </html>Główna struktura, nagłówek, nawigacja i stopka całkowicie powielają stronę główną, zmienia się tylko sekcja Głównyktóry zawiera teraz galerię z wieloma blokami postać... Wewnątrz każdego bloku znajduje się zdjęcie i podpis do niego.
Ten sam plik służy do projektowania strony style.csspołączone wewnątrz sekcji głowa... Musisz dodać do niego kilka zasad dla galerii:
.Galeria { rozmiar czcionki: 0; } postać { wyświetlacz:blok wbudowany; wyrównanie w pionie: dół; szerokość: 33,3333%; rozmiar pudełka: obramowanie-pudełko; dopełnienie: 10px 15px; margines: 0px; rozmiar czcionki: 14px; kolor: # f8d9b7; wyrównanie tekstu: środek; } rysunek obrazek { szerokość: 100%; margines-dolny: 10px; }Tutaj używamy techniki css, która pozwala umieścić trzy bloki w rzędzie i ustawić ich szerokość dokładnie na jedną trzecią szerokości kontenera nadrzędnego.
Ostateczny widok galerii znajduje się poniżej.
Hiperłącza zapewniają ruch między stronami witryny: z menu można przejść do „Albumu ze zdjęciami”, a klikając logo można wrócić do strony głównej.
Więc zorientowaliśmy się, korzystając z instrukcji krok po kroku, jak stworzyć stronę internetową w Notatniku. Ale teraz nikt go nie widzi! Ale blogi osobiste są tworzone po to, aby dzielić się swoim życiem z całym światem.
Aby zaradzić tej sytuacji, musisz umieścićwszystkie utworzone pliki na hostingu i wybierz domenę dla witryny za pomocą specjalnej usługi. Istnieje ogromna liczba dostawców hostingu, którzy świadczą usługi dla każdego gustu i portfela.
Po zawarciu umowy z hosterem będziesz miał dostęp do panelu sterowania, do którego możesz przenieść wszystkie utworzone pliki. Obecnie struktura projektu wygląda następująco:
Tutaj należy również dodać pliki HTML dla pozostałych stron witryny.
Teraz wiesz, jak stworzyć stronę html wNotatnik, ale są wygodniejsze sposoby. Profesjonaliści używają specjalnych edytorów przeznaczonych do pracy z kodem. Oferują wiele przydatnych opcji ułatwiających tworzenie i edytowanie witryn.
Najpopularniejsze narzędzia - Visual StudioKod, wysublimowany tekst, notatnik ++. Nie należy obawiać się ich złożoności. Wiedząc, jak stworzyć stronę internetową za pomocą Notatnika, możesz łatwo dowiedzieć się, co jest. Wszystkie dodatkowe funkcjonalności tych edytorów mają na celu ułatwienie pracy webmastera i nie powinny mu w tym przeszkadzać.
Budowanie strony internetowej za pomocą Notatnika to dopiero początek długiej i ciekawej podróży jako web developer.
