Utwórz prostą stronę internetową. Co to jest strona internetowa

9 głosów

Witamy na stronach bloga Start-Luck. Dzisiaj chciałbym Wam pokazać, jak korzystać z kodu. Pisanie stron internetowych to interesująca czynność, która dla wielu może wydawać się przytłaczająca. W rzeczywistości prostą stronę można utworzyć w zaledwie 5 minut.

W tym artykule opowiem o tworzeniu strony html. Zadanie to wykonamy w mniej niż 10 minut, a następnie zajmiemy się bardziej szczegółowo głównymi tagami. Błędem byłoby nazywanie takiej publikacji lekcją. To bardziej ziarno, które ma pokazać ci prostotę pracy i dać ci pragnienie, by iść dalej, uczyć się więcej, robić lepiej.

Jak stworzyć stronę

Proponuję zrobić pierwszą stronę w notatniku. Najprostszy, który znajduje się w menu Start, folder Akcesoria. Nie musisz jeszcze niczego pobierać. Spróbuj wykorzystać to, co masz.

Otwórz dokument.

Wklej do niego ten kod.

<html > <głowa > <tytuł > Moja pierwsza strona</tytuł> </głowa> <ciało > <centrum >

</h1> <br/>
<centrum > „https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg”> <br/>
<fontstyle="kolor:czerwony"></czcionka> <br/>
<b></b> <br/>
Dotarliśmy do dna<br/>
Teraz wiesz trochę więcej o tagach i możesz ich używać. Spróbujmy wstawić link, aby połączyć kilka stron razem.<br/>
<godz. > Na przykład tutaj jest link do mojego bloga -<a href = "http://witryna/" > Zacznij od szczęścia</a>- mówi po prostu o "trudnym".<br/>
<br/>
</ciało> </html>

Moja pierwsza strona

Tworzenie strony jest łatwiejsze niż myślisz

Wielu może wydawać się, że tworzenie stron internetowych to trudne, a nawet niemożliwe zadanie. Aby to zrobić, musisz dużo się nauczyć, uczyć się, robić. W rzeczywistości istnieje około 100 tagów, których nawet nie musisz się uczyć. Ważne jest tylko, aby zrozumieć, co i gdzie jest stosowane. Informacje można przeglądać w różnych ściągawkach, a z czasem zaczniesz zapamiętywać tagi na maszynie.



Prosty kod, aby tekst był czerwony

Nie jest o wiele trudniej pisać pogrubioną czcionką

Dotarliśmy do dna

Teraz wiesz trochę więcej o tagach i możesz ich używać. Spróbujmy wstawić link, aby połączyć kilka stron razem..

Otóż ​​to. Twoja pierwsza strona jest gotowa

Plik musi mieć nazwę index.html. Zakończenie „.html” wskazuje rozszerzenie pliku. Jeśli po prostu wpiszesz nazwę indeksu, dokument zostanie zapisany jako plik tekstowy i nie zostanie otwarty przez przeglądarkę.

Zapisałem dokument na moim pulpicie. Teraz musisz go znaleźć, kliknij prawy przycisk myszy i otwórz w dowolnej przeglądarce. wybiorę Google Chrome.

Tak wygląda strona, którą właśnie stworzyłem. Twój nie będzie inny. Wszystko jest dokładnie takie samo: ze zdjęciami i kolorową czcionką.

Teraz omówię bardziej szczegółowo tagi, ale na razie po prostu usuń „ Centrum ” i wstaw wiersz zawierający słowo „ kolor”. Swoją drogą już pisałem. To bardzo proste, polecam go przeczytać.

Zapisz dokument ponownie, tym razem wystarczy użyć skrótu klawiszowego Ctrl + S, a następnie odświeżyć stronę w przeglądarce za pomocą przycisku F5

Pamiętaj, że prawie każdy tag musi się otwierać i zamykać. Oznacza to, że kod z ukośnikiem musi gdzieś się znajdować. W tym przypadku wygląda to tak: .

Widzisz, tytuł zmienił się na czerwony. W ten sam sposób możesz nadać żądany odcień dowolnej części tekstu.

Cóż, to wszystko, przykład jest gotowy i powinieneś być z siebie dumny. Oczywiście nie jest to jeszcze online, do tego musi być ustawiona strona internetowa, którą zapewnia hosting. Musisz także połączyć swoją domenę, aby inne osoby mogły zobaczyć Twoje dzieło.

Na razie tylko Ty możesz zobaczyć stronę. Ale trzeba przyznać, że taka strona może zaskoczyć tylko osobę z epoki żelaza. Ale to jest pierwsze doświadczenie, uczyńmy je jeszcze bardziej skutecznymi, rozumiejąc używane przez nas tagi. Pomoże Ci to nauczyć się tworzyć projekty bez niczyjej pomocy.

tagi

Za twoją zgodą przejdę na NotePad++. Posiada szereg zalet w porównaniu ze zwykłym notatnikiem. Teraz naprawdę będę potrzebować podświetlania tagów, aby pokazać elementy, o których będę mówić. Ogólnie rzecz biorąc, jeśli masz zamiar uczyć się html, gorąco polecam zainstalowanie tego bezpłatnego programu.

Nie jest jedynym i mogę zaoferować jeszcze kilka, jeśli ktoś jest zainteresowany alternatywami. Przejdziemy do części teoretycznej.

Główny

Strona zaczyna się i kończy tagami . Pokazują przeglądarce, że jest to dokument internetowy utworzony za pomocą html.

Dalej nadchodzi lub tytuł. Zawiera najwięcej ważna informacja o stronie, w naszym przypadku - . Jeśli nie znalazłeś jeszcze frazy „Moja pierwsza strona”, która występuje w kodzie, zwróć uwagę na samą zakładkę nad linią wyszukiwania.

Mianowicie tagi odpowiadają za początek i koniec głównych informacji o stronie.

Etykietka

wskazuje, że fraza jest nagłówkiem. Domyślnie jest nieco większy niż tekst podstawowy i jest pogrubiony. Gdybyśmy teraz pisali nie tylko w html, ale także tworzyli plik CSS, z którym nasz plik miał coś wspólnego, moglibyśmy bez pisania kontrolować rozmiar, czcionkę, a nawet kolor wszystkich nagłówków na stronie styl czcionki jak zrobiliśmy w przykładzie. Jednak na to za wcześnie.

Nawiasem mówiąc, tytuł i H1 mają wpływ na przypisanie Twojej witrynie miejsca w wyniki wyszukiwania. Trzeba je traktować z wielką uwagą i nie pisać w środku choćby tego. Są one związane z . Oprócz h1 są też h2, h3, h4.

W tej samej linii znajduje się otwieranie i zamykanie

. Dzięki temu elementowi możesz wyrównać tekst w środku. Jeśli ten znacznik zostanie usunięty, tekst zostanie wyrównany do prawej.


- jeden z nielicznych pojedynczych tagów. Oznacza to, że działa samodzielnie. Dzięki temu przeskakujesz elementy z jednej linii na drugą. Innymi słowy, cofnij się o krok. Napisali to raz, co oznacza, że ​​raz, dwa razy przesunęli się w dół, tak jak ja, a wcięcie okazało się trochę większe.

Zdjęcie

Dalej przychodzi tag obrazek , czyli obraz, obraz. Nawias kwadratowy otwiera się, mieszczą się w nim wszystkie podstawowe informacje o obrazie, dopiero potem się zamyka. Należy zauważyć że obrazek jest znacznikiem, a wszystkie inne elementy kodu, które mieszczą się w środku, są jego atrybutami.

Przede wszystkim idzie Alt , który jest opisem. Jest to również konieczne do optymalizacji. Czasami również dodawane tytuł . Po najechaniu myszą na obraz, obok kursora pojawia się etykietka, gdy strona jest już otwarta w przeglądarce.

Można było wgrać zdjęcie do folderu serwisu i ustawić do niego ścieżkę, ale poszedłem na łatwiznę. Wśród na Pixabay znalazłem zdjęcie, otworzyłem je w nowym oknie i wkleiłem link.

W tagu src ścieżka do obrazu jest napisana. To on mówi przeglądarce, że musisz iść dalej, aby znaleźć pożądany obraz i w którym kierunku patrzeć - piszesz sam.

Formatowanie tekstu

odpowiada za nadanie części tekstu specjalnego stylu, na przykład, jak w naszym przypadku, innego koloru. style="kolor:czerwony" wskazuje, że kolor będzie czerwony. Jeśli chcesz żółty, napisz żółty, zielony - zielony. Możesz użyć kodów kolorów z Photoshopa.

pomaga pogrubić tekst.


rysuje linia pozioma. Jest pojedynczy i używany tylko wtedy, gdy jest zamknięty. Jeśli napiszesz
kilka razy, po otwarciu strony w przeglądarce otrzymasz dokładnie taką samą liczbę poziomych pasków.

Spinki do mankietów

informuje przeglądarkę, że link będzie podążał. Chcesz przekierować czytelnika pod inny adres. Ten tag ma wymagany atrybut href="adres" . Ścieżka, w którą przeglądarka powinna przenieść użytkownika na stronę, jest wstawiana w cudzysłów. Po wpisaniu tego tagu wstawiany jest opis, słowo lub kilka, po kliknięciu na które czytnik zostanie przeniesiony dalej. Po spełnieniu tych warunków możesz wstawić drugi, zamykający tag .

Po napisaniu treści strony zamykasz tag ciało ponieważ ciało jest skończone. I zaznacz, że przestajesz używać dzisiaj html .

Jeśli chcesz dowiedzieć się więcej o tagach html i dowiedzieć się, jak wstawiać nie tylko zdjęcia, ale także filmy, tworzyć przyciski, różne formularze, listy, akapity, mogę zaoferować bezpłatny kurs Jewgienija Popowa ” podstawy HTML ”. Tylko 33 lekcje pomogą Ci osiągnąć nowy poziom.


Chcę również polecić kurs wideo, który mówi, jak tworzone są witryny. Cały proces pokazany jest na prawdziwych przykładach, co jest szczególnie dobre. Kurs przeznaczony jest zarówno dla początkujących, którzy jeszcze nie znają HTML, jak i dla tych, którzy już dobrze znają zarówno HTML, jak i CSS, jednak nie wiedzą, jak dobrze układać strony. Więcej informacji można uzyskać klikając w link: www.srs.myrusakov.ru/makeup


Ponadto weź Bezpłatna książka do tworzenia stron internetowych ! Ta książka jest skierowana do początkujących i to właśnie tam powstaje strona OD i DO. Oznacza to, że projekt jest przygotowywany, następnie tworzone są strony, napisana jest część oprogramowania, a następnie witryna jest umieszczana w Internecie. Autor dokładnie wszystko komentuje, a książka zawiera wiele zrzutów ekranu i ilustracji. Co więcej, osobliwością książki jest to, że nie powstaje jakaś abstrakcyjna strona, ale całkiem realna i istniejąca w Internecie.

Dziś zrobiłeś dużo, bo pierwszy krok jest najtrudniejszy.

Zapisz się do newslettera i Grupa VKontakte i dowiedz się więcej: jak i dlaczego potrzebujesz silnika strony, jaki jest układ bloków i siatka modułowa, jak pisać strony internetowe i wiele więcej.

Do zobaczenia i powodzenia!

Panowie, dobry humor wszystkim) Dzisiaj postanowiłem napisać artykuł na temat - Jak stworzyć własną stronę internetową. Do tego tematu skłonili mnie czytelnicy i przyjaciele, którzy z jakiegoś powodu nadal nie rozróżniają typów witryn i stron w Internecie. Bardzo rzadko nazywam cokolwiek stroną internetową))) Jednak wielu moich znajomych często tak mówi. Specjalnie dla nich postanowiłem opisać główne typy stron internetowych, które możesz stworzyć dla siebie, aby mieć jakąś reprezentację siebie w sieci.

Przed utworzeniem strony internetowej zdecydowanie musisz utworzyć adres e-mail lub adres e-mail. Opisałem opcje tworzenia w tym artykule -. A jeśli masz adres e-mail, skorzystamy z opcji tworzenia Twojej osobistej strony internetowej. Czytaj dalej, aby uzyskać wskazówki, jak stworzyć własną stronę internetową.

Witryna jednostronicowa

Najstarszy sposób))) Aby to zrobić, musisz nauczyć się podstaw języka HTML. W naszych czasach nie jest to konieczne, istnieje milion usług, które zostaną omówione poniżej. Jeśli jednak chcesz zrozumieć, jak działa witryna, a częściowo Internet, spróbuj samodzielnie utworzyć witrynę jednostronicową. Opisałem, jak to zrobić w artykule -. Istnieją opcje utworzenia jednostronicowej witryny internetowej z kreatorami witryn i bezpłatnymi platformami.

Strona w sieci społecznościowej Vkontakte

Myślę, że w naszych czasach zdanie: „Stworzyłem dla siebie stronę w Internecie” odnosi się przede wszystkim do portalu społecznościowego Vkontakte. VK to najpopularniejsza sieć społecznościowa w WNP. Stworzenie tutaj Twojej strony to kwestia 1 minuty. Co więcej, masz do dyspozycji dziesiątki przydatnych funkcji do działań w Internecie.
Dużo pisałem o Vkontakte i planuję napisać jeszcze więcej)) Dzięki tej sieci społecznościowej możesz i.

Vkontakte umożliwia również utworzenie wygodnego adresu URL do Twojej strony internetowej, zamiast standardowego adresu URL podczas rejestracji http://vk.com/id8032931. Następnie możesz zmienić go na piękny - http://vk.com/vasheimya.vashafamiliya.

Strona w sieci społecznościowej Facebook

Jeśli Vkontakte jest najpopularniejszą siecią społecznościową w WNP, to Facebook jest siecią społecznościową nr 1 na świecie. Uważa się, że Facebook jest przeznaczony dla zaawansowanych użytkowników rosyjskojęzycznych))) Ale osobiście uważam, że to wszystko dzięki temu, że Facebook jest bardzo popularny i wygodny.

Podobnie jak w Vkontakte, możesz przypisać sobie piękny adres dla swojej strony internetowej. Pełną instrukcję - jak stworzyć stronę na Facebooku opisałem w artykule -.

Blog

Blog to moja najbardziej polecana opcja tworzenia strony internetowej. Blog daje tysiące możliwości samorealizacji i jest bardzo prosty w obsłudze. Często tak bezpłatne, jak strony internetowe w mediach społecznościowych.
Oferuję wybór artykułów na temat tworzenia strony internetowej za pomocą bloga:

  • - szybko, ale kosztem hostingu i osobnej domeny.
  • to platforma blogowa firmy Google. Zintegrowany z wieloma usługami Google. Bardzo przydatne, jeśli jesteś fanem Google))
  • to najszybciej rozwijająca się platforma blogowa. W jednej z amerykańskich publikacji przeczytałam statystyki, że Tumblr jest bardziej popularny wśród amerykańskich dzieci w wieku 12-13 lat niż Facebook!!! Myślę, że to wskaźnik wygody i rozwoju tej platformy.
  • - oto podręczniki do prawie wszystkich znanych platform blogowych, w tym tych wymienionych powyżej.

Dziennik

Oto wszystkie podstawowe opcje tworzenia strony internetowej, czyli innymi słowy obecności w sieci. Dosłownie 1 minuta i jesteś już zanurzony w przestrzeni World Wide Web. Miłego przeglądania sieci!

Witajcie drodzy czytelnicy! Być może wszyscy internauci, przemierzając rozległe przestrzenie sieci, prędzej czy później mają ochotę zostawić tam coś swojego, przekazać ludziom swoją opinię na pewne rzeczy.

Nawiasem mówiąc, nawet dla początkujących użytkowników nie ma tu nic skomplikowanego. W tym artykule pokażę Ci jak stworzyć stronę internetową. Poznasz podstawy tego procesu.

Co to jest strona internetowa?

Dokument hipertekstowy lub strona internetowa to plik tekstowy oznaczony znacznikami przy użyciu języka HTML (HyperText Markup Language).

Wszystkie prezentowane tam obiekty są odtwarzane zgodnie z instrukcjami napisanymi przez to narzędzie, które zostały przesłane na jego żądanie przez serwer. Aby dodać znacznik do dokumentu, używane są znaczniki, które są ujęte w nawiasy kątowe. Z reguły są sparowane, to znaczy jest otwarcie i zamknięcie oraz między niektórymi informacjami.

Na przykład tag informujący przeglądarkę, że poniższy dokument HTML będzie wyglądał tak: . A ostatni, mówiący, że kod się tutaj kończy, wygląda tak:. Zatem jedyną różnicą między tagiem zamykającym a tagiem otwierającym jest obecność ukośnika po nawiasie otwierającym.

Ten język znaczników umożliwia formatowanie tekstu strony internetowej, instalowanie na niej zdjęć, elementów graficznych, tworzenie linków hipertekstowych, dodawanie elementów multimedialnych, nagrań dźwiękowych, skryptów (VBScript, JavaScript).

Aby dowiedzieć się, czym jest ten język, wcale nie trzeba wchodzić do nudnych podręczników. Dla mnie osobiście wystarczyło otworzyć przeglądarkę i wybrać opcję "Wyświetl kod źródłowy" (naciśnij prawy przycisk myszy). Wiersze kodu prezentowane w oknie to ten sam kod html. To właśnie ten kod przeglądarka dalej przekształca w stronę internetową.

Rodzaje stron w Internecie

Istnieją trzy rodzaje stron internetowych:

  1. Interaktywny. Są to formularze generowane w językach VBScript, JavaScript, PHP, za pomocą których serwer wymienia dane z użytkownikiem;
  2. Dynamiczny . Są napisane w ASP, PHP z uprawnieniami .aspx, .php. Strony te są tworzone przez silnik lub specjalny program, który generuje stronę internetową zgodnie z żądaniami użytkownika, korzystając z danych z serwera bazy danych;
  3. Statyczny . Należą do nich pliki statyczne (obrazki, tabele, typografia itp.) generowane w języku znaczników HTML.

Jak stworzyć?

Do tworzenia stron internetowych wykorzystywane są edytory html: FCKeditor, TinyMCE WYSIWYG Editor, Macromedia Dreamweaver, Microsoft FrontPage i inne. Wszystkie te edytory mają wiele różnych kreatorów, które ułatwiają tworzenie stron internetowych, a także szablony stron z projektem i strukturą. Z ich pomocą możesz szybko stworzyć własną stronę internetową.

Ale dla tych, którzy lubią robić wszystko sami, możesz użyć prostego notatnika, który jest już domyślnie zainstalowany na dowolnym komputerze.

Instrukcja:

  1. Utwórz plik za pomocą edytora tekstu. To jest pierwsza rzecz do zrobienia. W notatniku utwórz pusty plik o nazwie index.html. To właśnie tej strony serwer najpierw szuka, jeśli wprowadzisz adres zasobu bez określenia konkretnej strony internetowej witryny.
  2. Generuj instrukcje. Umieszczony między tagami oraz kod powinien składać się z dwóch części - treści dokumentu i nagłówka.
  3. Zróbmy nagłówek. Tagi otwierające i zamykające nagłówek: oraz. Ta „usługowa” część strony zawiera dane dotyczące tytułu okna, opisu, słów kluczowych dla wyszukiwarek, skryptów, opisów stylów i tak dalej. Pomiędzy tymi słowami wpisujemy tytuł okna strony za pomocą tagów: oraz. Twoja strona internetowa powinna teraz wyglądać tak:

    tytuł

  4. Zajmowaliśmy się nagłówkiem. Teraz musimy umieścić tagi ciała oraz. Pomiędzy nimi będą instrukcje dotyczące dokumentów: linki, teksty, zdjęcia itp., czyli ta główna.

Więc ogólnie kod powinien wyglądać tak:

tytuł <TITLE> </HEAD> <BODY>Treść strony internetowej</BODY> </HTML></p> <p>Gratulacje! Teraz już wiesz, jak stworzyć własną stronę internetową, aczkolwiek najprostszą! Tylko nie zapomnij zapisać dokumentu, w przeciwnym razie cała twoja praca pójdzie na marne i będziesz musiał wszystko robić od nowa.</p> <blockquote> <p>Obecnie istnieje wiele wizualnych edytorów kodu html, dzięki którym można tworzyć strony internetowe bez znajomości języka znaczników html. Ale myślę, że nadal musisz znać podstawy.</p> </blockquote> <p>Nawiasem mówiąc, mój blog jest oparty na bezpłatnej platformie WordPress. Płacę tylko za domenę i hosting - to całkiem sporo. Chcieć wiedzieć więcej? Oto link.</p> <p>Z poważaniem! Abdullin Rusłan</p> <p>Zanim rozpoczniemy naszą podróż przez samouczki dotyczące tworzenia stron internetowych w HTML i CSS, ważne jest, aby zrozumieć różnice między tymi dwoma językami, składnię każdego języka i podstawową terminologię.</p><h2>Co to jest HTML i CSS?</h2><p>HTML (HyperText Markup Language) definiuje strukturę treści i jej znaczenie, definiując taką treść, jak na przykład nagłówki, akapity lub obrazy. CSS (Cascading Style Sheets) lub Cascading Style Sheets to język prezentacji zaprojektowany do projektowania wyglądu treści przy użyciu na przykład czcionek lub kolorów.</p><p>Te dwa języki, HTML i CSS, są od siebie niezależne i tak powinny pozostać. CSS nie powinien być pisany wewnątrz dokumentu HTML i na odwrót. Z reguły HTML zawsze będzie reprezentował treść, a CSS zawsze będzie określał jej styl.</p><p>Mając takie zrozumienie różnicy między HTML i CSS, zagłębmy się bardziej szczegółowo w HTML.</p><h2>Podstawowe terminy HTML</h2><p>Zanim zaczniesz pracować z HTML, prawdopodobnie natkniesz się na nowe i często dziwne terminy. Z czasem poznasz je wszystkie bardziej szczegółowo, ale na razie powinieneś zacząć od trzech podstawowych terminów HTML – elementów, tagów i atrybutów.</p><h3>Elementy</h3><p>Elementy określają sposób definiowania struktury i zawartości obiektów na stronie. Niektóre z powszechnie używanych elementów zawierają wiele poziomów nagłówków (zdefiniowanych jako elementy z <h1>zanim <h6>) i akapity (zdefiniowane jako <p>); pozycje można dodać do listy <a> , <div> , , <span><strong>oraz <em>i wiele innych.</p><p>Elementy identyfikowane są za pomocą nawiasów kątowych<>, otaczający nazwę elementu. Czyli element będzie wyglądał tak:</p><h3>tagi</h3><p>Dodawanie nawiasów kątowych< и >tworzy tak zwany znacznik wokół elementu. Tagi najczęściej występują w parach tagów otwierających i zamykających.</p><p>Znacznik początkowy oznacza początek elementu. Składa się z symbolu<, затем идёт имя элемента и завершается символом >; Na przykład, <div> .</p><p>Znacznik końcowy oznacza koniec elementu. Składa się z symbolu< с последующей косой чертой и именем элемента и завершается символом >; Na przykład,</div> .</p><p>Zawartość pomiędzy znacznikami początkowym i końcowym jest zawartością tego elementu. Na przykład link będzie miał otwierający tag <a>i zamykający tag</a>. To, co znajduje się między tymi dwoma tagami, będzie zawartością linku.</p><p>Tak więc tagi linków wyglądałyby mniej więcej tak:</p><p> <a>...</a> </p><h3>Atrybuty</h3><p>Atrybuty to właściwości używane do dostarczania dodatkowych informacji o elemencie. Najczęstsze atrybuty to atrybut id, który identyfikuje element; atrybut class, który klasyfikuje element; atrybut src, który określa źródło osadzonej treści; oraz atrybut href, który określa łącze do powiązanego zasobu.</p><p>Atrybuty są zdefiniowane w znaczniku otwierającym po nazwie elementu. Ogólnie rzecz biorąc, atrybuty zawierają nazwę i wartość. Format tych atrybutów składa się z nazwy atrybutu, po której następuje znak równości, po której następuje wartość atrybutu w cudzysłowie. Na przykład element <a>z atrybutem href wyglądałoby to tak:</p><p>Shay Howe</p><h3>Demonstracja podstawowych terminów HTML</h3><p>Ten kod wyświetli tekst „Shay Howe” na stronie internetowej, a po kliknięciu tego tekstu przeniesie użytkownika do http://shayhowe.com. Element linku jest zadeklarowany ze znacznikiem początkowym <a>i zamykający tag</a> zawierający tekst, a także atrybut i wartość adresu linku zadeklarowanego za pomocą href="http://shayhowe.com" w tagu otwierającym.</p><p>Ryż. 1.01. Składnia schematu HTML obejmuje element, atrybut i znacznik</p><p>Teraz, gdy już wiesz, czym są elementy, tagi i atrybuty HTML, spójrzmy razem na naszą pierwszą stronę internetową. Jeśli coś wygląda tutaj na nowe, nie martw się - odszyfrujemy to na bieżąco.</p><h2>Dostosowywanie struktury dokumentu HTML</h2><p>Dokumenty HTML są proste <a href="https://bazava.ru/pl/download-a-text-document-world-office-how-to-install-the-word-on-a-computer-with-windows-of-any-version.html">dokumenty tekstowe</a>, zapisany z rozszerzeniem .html, a nie .txt. Aby zacząć pisać HTML, potrzebujesz najpierw edytora tekstu, z którego będziesz korzystać. Niestety nie obejmuje to <a href="https://bazava.ru/pl/izmenenie-registra-v-microsoft-word-kak-perevesti-zaglavnye-bukvy-v.html">Microsoft Word</a> lub Strony, ponieważ są to skomplikowane edytory. Dwa najpopularniejsze edytory tekstu do pisania HTML i CSS to Dreamweaver i Sublime Text. <a href="https://bazava.ru/pl/ustanovka-office-na-mac-openoffice-besplatnaya-alternativa-microsoft-office-dlya-mac.html">Darmowe alternatywy</a> Zobacz także Notepad++ dla Windows i TextWrangler dla Maca.</p><p>Wszystkie dokumenty HTML zawierają obowiązkową strukturę, która zawiera następujące deklaracje i elementy:<!DOCTYPE html> , <html> , <head>oraz <body> .</p><p>Deklaracja typu dokumentu lub<!DOCTYPE html>znajduje się na samym początku dokumentu HTML i informuje przeglądarki, która wersja HTML jest używana. Ponieważ będziemy używać <a href="https://bazava.ru/pl/skachat-apk-vatsap-dlya-android-poslednyaya-versiya-skachat-poslednyuyu.html">Ostatnia wersja</a> HTML, nasz typ dokumentu będzie po prostu<!DOCTYPE html>. Potem przychodzi żywioł <html>oznaczający początek dokumentu.</p><p>W środku <html>element <head>definiuje górę dokumentu, w tym różne metadane (informacje towarzyszące o stronie). Treść wewnątrz elementu <head>nie pojawia się na samej stronie internetowej. Zamiast tego może zawierać tytuł dokumentu (który pojawia się na pasku tytułu okna przeglądarki), łącza do dowolnych plików zewnętrznych lub inne przydatne metadane.</p><p>Cała widoczna zawartość strony internetowej będzie znajdować się w elemencie <body>. Struktura typowego dokumentu HTML wygląda tak:</p><p> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Witaj świecie!

Witaj świecie!

To jest strona internetowa.

Demonstracja struktury dokumentu HTML

Ten kod pokazuje dokument, zaczynając od deklaracji typu dokumentu,, po którym następuje natychmiast element . W środku przejdź do elementów oraz . Element zawiera kodowanie strony za pomocą tagu i tytuł dokumentu poprzez element . Element <body>zawiera nagłówek przez element <h1>i akapit tekstu do<р>. Ponieważ zarówno nagłówek, jak i akapit są zagnieżdżone w elemencie <body>, są widoczne na stronie internetowej.</p><p>Gdy element znajduje się wewnątrz innego elementu, znanego również jako element zagnieżdżony, dobrym pomysłem jest dodanie do niego wypełnienia, aby struktura dokumentu była dobrze zorganizowana i czytelna. W poprzednim kodzie oba elementy <head>oraz <body>zagnieżdżone i przesunięte wewnątrz elementu <html>. Struktura wyściółki dla elementów jest kontynuowana z nowymi dodanymi elementami wewnątrz <head>oraz <body> .</p><h3>Elementy samozamykające</h3><p>W poprzednim przykładzie element <meta>był jedynym tagiem, który nie zawierał tagu zamykającego. Nie martw się, zrobiono to celowo. Nie wszystkie elementy składają się z tagów otwierających i zamykających. Niektóre elementy po prostu otrzymują treść lub zachowanie poprzez atrybuty w tym samym znaczniku. <meta>jest jednym z tych elementów. Zawartość elementu <meta>w przykładzie jest przypisywana za pomocą atrybutu i wartości charset. Inne typowe elementy samozamykające to:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Struktura odlewu, wykonana z deklaracją typu dokumentu<!DOCTYPE html>i elementy <html> , <head>oraz <body>, jest dość powszechny. Chcemy zachować tę strukturę dokumentu pod ręką, ponieważ będziemy jej często używać podczas tworzenia nowych dokumentów HTML.</p><h3>Walidacja kodu</h3><p>Bez względu na to, jak starannie piszemy nasz kod, błędy są nieuniknione. Na szczęście przy pisaniu HTML i CSS mamy walidatory, które sprawdzają naszą pracę. W3C oferuje walidatory HTML i CSS, które skanują kod w poszukiwaniu błędów. Sprawdzanie poprawności naszego kodu nie tylko pomaga nam poprawnie renderować we wszystkich przeglądarkach, ale także pomaga nam poznać najlepsze praktyki podczas pisania kodu.</p><h2>Na praktyce</h2><p>Jako projektanci stron internetowych i front-end developerzy mamy luksus uczestniczenia w wielu wspaniałych konferencjach poświęconych naszemu rzemiosłu. Zorganizujemy własną Konferencję Styles i stworzymy dla niej stronę internetową na kolejnych lekcjach. Lubię to!</p><br><img src='https://i1.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>Przełączmy się trochę, odejdźmy od HTML i spójrzmy na CSS. Pamiętaj, HTML definiuje zawartość i strukturę naszych stron internetowych, podczas gdy CSS określa ich styl wizualny i wygląd.</p><h2>Podstawowe terminy CSS</h2><p>Oprócz terminów HTML istnieje kilka podstawowych terminów CSS, z którymi należy się zapoznać. Terminy te obejmują selektory, właściwości i wartości. Podobnie jak w przypadku terminologii HTML, im więcej pracujesz z CSS, tym bardziej te terminy stają się Twoją drugą naturą.</p><h3>Selektory</h3><p>Dodając elementy do strony internetowej, można je stylizować za pomocą <a href="https://bazava.ru/pl/flexbox-neskolko-poleznyh-primerov-dlya-raboty-v-rstka-s-pomoshchyu-css-flexbox-flexbox.html">za pomocą CSS</a>. Selektor określa, który element lub elementy w HTML należy kierować i stosować do nich style (takie jak kolor, rozmiar i położenie). Selektory mogą zawierać kombinację różnych metryk, aby wybrać unikalne elementy, w zależności od tego, jak bardzo chcemy być. Na przykład chcemy zaznaczyć każdy akapit na stronie lub wybrać tylko jeden konkretny akapit.</p><p>Selektory są zazwyczaj powiązane z wartością atrybutu, taką jak identyfikator lub wartość klasy, lub nazwą elementu, taką jak <h1>lub<р> .</p><p>W CSS selektory są połączone z nawiasami klamrowymi (), które obejmują style zastosowane do wybranego elementu. Ten selektor dotyczy wszystkich elementów <span><p>P(...)</p><h3>Nieruchomości</h3><p>Po wybraniu elementu właściwość określa style, które zostaną do niego zastosowane. Nazwy właściwości znajdują się po selektorze, w nawiasach klamrowych () i bezpośrednio przed dwukropkiem. Istnieje wiele właściwości, których możemy użyć, takich jak background , color , font-size , height i width oraz inne często dodawane właściwości. W poniższym kodzie definiujemy właściwości koloru i rozmiaru czcionki, które mają zastosowanie do wszystkich elementów <span><p>P ( kolor: ...; rozmiar czcionki: ...; )</p><h3>Wartości</h3><p>Do tej pory wybraliśmy element tylko za pomocą selektora i ustaliliśmy, jaki styl chcielibyśmy do niego zastosować za pomocą właściwości. Teraz możemy ustawić zachowanie tej właściwości za pomocą wartości. Wartości można określić jako tekst między dwukropkiem a średnikiem. Poniżej wybieramy wszystkie elementy <p >I ustaw wartość właściwości color na orange, a wartość właściwości font-size na 16 pikseli.</p><p>P ( kolor: pomarańczowy; rozmiar czcionki: 16px; )</p><p>Aby przetestować, w CSS nasz zestaw reguł zaczyna się od selektora, po którym następuje bezpośrednio nawias klamrowy. Wewnątrz tych nawiasów klamrowych znajdują się deklaracje składające się z par właściwości i wartości. Każda deklaracja zaczyna się od właściwości, po której następuje dwukropek, wartość właściwości i na końcu średnik.</p><p>Powszechną praktyką jest przesuwanie pary właściwości i wartości w nawiasach klamrowych. Podobnie jak w przypadku HTML, wcięcia pomagają utrzymać porządek i przejrzystość naszego kodu.</p><p><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>Ryż. 1.03. Struktura <a href="https://bazava.ru/pl/css-border-prozrachnyi-primer-krasivaya-ramka-dlya-vydeleniya-citat-sintaksis-css.html">składnia css</a> zawiera selektor, właściwości i wartości</p><p>Znajomość kilku podstawowych pojęć i ogólnej składni CSS to świetny początek, ale mamy jeszcze kilka punktów do nauczenia, zanim wskoczymy w głęboką głębię. W szczególności musimy przyjrzeć się bliżej działaniu selektorów w CSS.</p><h2>Praca z selektorami</h2><p>Selektory, jak wspomniano wcześniej, wskazują, które elementy HTML będą stylizowane. Ważne jest, aby w pełni zrozumieć, jak używać selektorów i jak one działają. Pierwszym krokiem powinno być poznanie <a href="https://bazava.ru/pl/informaciya-o-razmerah-i-vese-ustroistva-predstavlennaya-v-raznyh-edinicah.html">różne rodzaje</a> selektory. Zaczniemy od najbardziej podstawowych selektorów: selektorów typu, klas i identyfikatorów.</p><h3>Selektory typu</h3><p>Selektory typu są kierowane na elementy według ich typu. Na przykład, jeśli chcemy kierować reklamy na wszystkie elementy <div>musimy użyć selektora div. Poniższy kod pokazuje selektor typu dla elementów <div>, a także odpowiedni kod HTML.</p><p>Dział(...)</p><p> <div>...</div> <div>...</div> </p><h3>Klasy</h3><p>Klasy pozwalają wybrać element na podstawie wartości atrybutu klasy. Selektory klas są nieco bardziej szczegółowe niż selektory typu, ponieważ wybierają określoną grupę elementów, a nie wszystkie elementy tego samego typu.</p><p>Klasy umożliwiają zastosowanie tego samego stylu do wielu elementów naraz przy użyciu tej samej wartości atrybutu klasy dla wielu elementów.</p><p>W CSS klasy są oznaczone wiodącą kropką, po której następuje wartość atrybutu class. Selektor klas poniżej wybiera wszystkie elementy, które zawierają niesamowitą wartość atrybutu klasy, w tym elementy <div>oraz <span><p>Niesamowite (...)</p><p> <div class="awesome">...</div> </p><h3>Identyfikatory</h3><p>Identyfikatory są jeszcze bardziej precyzyjne niż klasy, ponieważ dotyczą tylko jednego unikalnego elementu na raz. Tak jak selektory klasy używają wartości atrybutu class, identyfikatory używają wartości atrybutu id jako selektora.</p><p>Niezależnie od typu renderowanego elementu, wartość atrybutu id może być użyta tylko raz na stronę. Jeśli id's są obecne, to powinny być zarezerwowane dla ważnych elementów.</p><p>W CSS identyfikatory są oznaczone symbolem hash na początku, po którym następuje wartość atrybutu id. Tutaj id wybierze tylko element zawierający atrybut id o wartości shayhowe .</p><p>#shayhowe ( ... )</p><p> <div id="shayhowe">...</div> </p><h3>Dodatkowe selektory</h3><p>Selektory są niezwykle potężne, a te opisane powyżej należą do najczęściej spotykanych selektorów. Te selektory to dopiero początek. Istnieje wiele zaawansowanych selektorów i są one łatwo dostępne. Kiedy już się z nimi dobrze poczujesz, nie bój się spojrzeć również na niektóre z bardziej zaawansowanych.</p><p>Dobra, zacznijmy składać wszystko razem. Dodajemy elementy do strony wewnątrz naszego kodu HTML, a następnie możemy je wybrać i stylizować je za pomocą CSS. Teraz połączmy kropki między HTML i CSS, aby te dwa języki działały razem.</p><h2>Połączenie CSS</h2><p>Aby nasz CSS mówił do naszego HTML, musimy wskazać plik CSS z HTML. Dobrą praktyką jest łączenie wszystkich naszych stylów w jednym <a href="https://bazava.ru/pl/vneshnii-zhestkii-disk-fail-ili-papka-povrezhdeny-kak-vosstanovit-faily-s.html">plik zewnętrzny</a>, do którego wewnątrz elementu znajduje się wskaźnik <head>nasz dokument HTML. Korzystanie z jednego <a href="https://bazava.ru/pl/margin-ili-padding-razmyshleniya-o-tom-chto-i-gde-ispolzovat-padding-margin-i-border.html">zewnętrzny CSS</a> pozwala nam stosować te same style w całej witrynie i szybko wprowadzać w niej zmiany.</p><h3>Inne opcje dodawania CSS</h3><p>Inne opcje dołączania CSS obejmują używanie stylów wbudowanych i wbudowanych. Możesz zobaczyć te opcje w prawdziwym życiu, ale generalnie nie są one mile widziane, ponieważ sprawiają, że aktualizacje witryny są kłopotliwe i kłopotliwe.</p><p>Aby utworzyć nasz zewnętrzny arkusz stylów, ponownie chcemy użyć wybranego przez nas edytora tekstu, aby utworzyć nowy plik tekstowy z rozszerzeniem .css. Nasz plik CSS musi być zapisany w tym samym folderze lub podfolderze, co nasz plik HTML.</p><p>Wewnątrz elementu <head>zastosowany element <link>, który definiuje relacje między plikami HTML i CSS. Ponieważ łączymy się z CSS, używamy <a href="https://bazava.ru/pl/kak-pravilno-ispolzovat-atribut-rel-nofollow---sekrety-seo-atribut-rel-chto-soboi.html">atrybut rel</a> z wartością arkusza stylów, aby wskazać ich związek. Ponadto atrybut href służy do wskazania lokalizacji lub ścieżki do pliku CSS.</p><p>W poniższym przykładowym dokumencie HTML element <head>wskazuje na zewnętrzny plik stylu.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>Aby CSS był poprawnie renderowany, wartość ścieżki atrybutu href musi być bezpośrednio zgodna z miejscem, w którym zapisany jest plik CSS. W poprzednim przykładzie plik main.css jest przechowywany w tej samej lokalizacji co plik HTML, znany również jako folder główny.</p><p>Jeśli plik CSS znajduje się w podfolderze, wartość atrybutu href powinna odpowiadać odpowiednio tej ścieżce. Na przykład, jeśli nasz plik main.css został zapisany w podfolderze o nazwie stylesheets, wówczas wartością atrybutu href będzie stylesheets/main.css . Tutaj ukośnik (lub ukośnik) służy do wskazania przejścia do podfolderu.</p><p>Na <a href="https://bazava.ru/pl/nevozmozhno-vypolnit-zapros-voznikli-problemy-s-interpretaciei-jpeg-dannyh.html">ten moment</a> nasze strony zaczynają ożywać, powoli, ale pewnie. Nie zagłębialiśmy się jeszcze zbyt głęboko w CSS, ale być może zauważyłeś, że niektóre elementy mają style, których nie zadeklarowaliśmy w naszym CSS. To przeglądarka narzuca tym elementom własne preferowane style. Na szczęście możemy dość łatwo nadpisać te style, co następnie zrobimy po zresetowaniu CSS.</p><h2>Korzystanie z resetowania CSS</h2><p>Każda przeglądarka ma własne domyślne style dla różnych elementów. Sposób, w jaki Google Chrome wyświetla nagłówki, akapity, listy itp., może się różnić od tego <a href="https://bazava.ru/pl/sdelat-gugl-poiskovikom-po-umolchaniyu-kak-ustanovit.html">Internet Explorer</a>. Resetowanie CSS stało się szeroko stosowane w celu zapewnienia zgodności z różnymi przeglądarkami.</p><p>Reset CSS pobiera wszystkie podstawowe elementy HTML z podanym stylem i zapewnia <a href="https://bazava.ru/pl/interesnye-instagram-akkaunty-bloggerov-kak-krasivo-oformit-profil-v.html">jednolity styl</a> dla wszystkich przeglądarek. Te resetowania zwykle obejmują usunięcie rozmiarów, dopełnienia, marginesów lub dodatkowych stylów w celu obniżenia tych wartości. Ponieważ kaskadowanie CSS działa od góry do dołu (więcej o tym wkrótce) - nasz reset powinien znajdować się na samym szczycie naszego stylu. Gwarantuje to, że te style są czytane jako pierwsze i to wszystko. <a href="https://bazava.ru/pl/chto-znachit-ochistit-kesh-i-kak-eto-sdelat-ochistka-kesha-raznyh.html">różne przeglądarki</a> będzie działać ze wspólnego punktu odniesienia.</p><p>Dostępnych jest wiele różnych resetów CSS, z których każdy ma swoje mocne strony. Jeden z najpopularniejszych autorstwa Erica Meyera, jego reset CSS został dostosowany do nowych elementów HTML5.</p><p>Jeśli masz ochotę na trochę przygód, jest też Normalize.css autorstwa Nicholasa Gallaghera. Normalize.css skupia się nie na używaniu twardego resetu dla wszystkich głównych elementów, ale na ustawianiu wspólnych stylów dla tych elementów. Wymaga to głębszego zrozumienia CSS, a także wiedzy, czego chcesz od stylów.</p><h3>Kompatybilność z różnymi przeglądarkami i testowanie</h3><p>Jak wspomniano wcześniej, różne przeglądarki inaczej renderują elementy. Ważne jest, aby rozpoznać wartość zgodności i testowania w różnych przeglądarkach. Witryny nie muszą wyglądać dokładnie tak samo we wszystkich przeglądarkach, ale powinny być zbliżone. Które przeglądarki chcesz obsługiwać iw jakim stopniu to decyzja, którą musisz podjąć w oparciu o to, co jest najlepsze dla Twojej witryny.</p><p>Jest kilka rzeczy, o których należy pamiętać podczas pisania CSS. Dobrą wiadomością jest to, że jest to wykonalne i wymaga trochę cierpliwości do opanowania.</p><h2>Na praktyce</h2><p>Wróćmy do miejsca, w którym ostatnio skończyliśmy na naszej stronie konferencji i zobaczmy, jak możemy dodać CSS.</p><ol><li>Wewnątrz naszego folderu styles-conference utwórzmy nowy folder o nazwie asset. W tym miejscu będziemy przechowywać wszystkie zasoby naszej witryny, takie jak style, obrazy, filmy itp. W przypadku naszych stylów dodajmy kolejny folder arkuszy stylów w folderze zasobów.</li><li>Korzystając z edytora tekstu, utwórz <a href="https://bazava.ru/pl/how-to-paint-a-background-in-a-different-color-in-photoshop-how-to-make-a-fill-in-photoshop.html">nowy plik</a> nazwany main.css i zapisz go w folderze stylów, który właśnie utworzyliśmy.</li><p>Patrząc na plik index.html w przeglądarce, widzimy, że elementy <h1>oraz <p>Zawiera już domyślny styl. W szczególności mają unikalny rozmiar czcionki i przestrzeń wokół siebie. Używając resetu Erica Meyera, możemy złagodzić te style, pozwalając każdemu z nich zacząć od tej samej podstawy. Aby to zrobić, spójrz na jego stronę, skopiuj kod i wklej go na górze naszego pliku main.css.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Licencja: brak (domena publiczna) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, skrót, akronim, adres, duży, cytuj, kod, del, dfn, em, img, ins, kbd, q, s, samp, mały, strajk, silny, sub, sup, tt, var, b, u, i, centrum, dl, dt, dd, ol, ul, li, fieldset, formularz, etykieta, legenda, tabela, podpis, tbody, tfoot, thead, tr, th, td, artykuł, na bok, płótno, szczegóły, embed, rysunek, figcaption, stopka, nagłówek, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margines: 0; padding: 0; border: 0; font-size: 100%; font: dziedziczenie; vertical-align: baseline ; ) /* Resetowanie roli wyświetlania HTML5 dla starszych przeglądarek */ article, side, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul (list-style: brak; ) blockquote, q ( cudzysłowy: brak; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- zwinąć:c upadek; odstępy między obramowaniami: 0; )</p><li>Nasz plik main.css zaczyna nabierać kształtu, więc dołączmy go do naszego pliku index.html. Otwórz index.html w <a href="https://bazava.ru/pl/luchshie-tekstovye-redaktory-dlya-windows-10-luchshie-tekstovye-redaktory-dlya.html">Edytor tekstu</a> i dodaj element <link>w <head>, zaraz po żywiole <title> .</li><li>Ponieważ wskazujemy style poprzez element <link>dodaj atrybut rel o wartości stylesheet .</li><p>Zamieścimy również link do naszego pliku main.css za pomocą atrybutu href. Pamiętaj, że nasz plik main.css jest zapisany w folderze stylesheets, który znajduje się w folderze asset. Zatem wartość atrybutu href, który jest ścieżką do naszego pliku main.css, powinna mieć wartość asset/stylesheets/main.css .</p><p> <head> <meta charset="utf-8"> <title>Konferencja stylów

Czas przetestować naszą pracę i zobaczyć, jak nasz HTML i CSS do siebie pasują. Otwarcie pliku index.html (lub odświeżenie strony, jeśli jest już otwarta) w przeglądarce powinno pokazać nieco inny wynik niż poprzednio.

Ryż. 1.04. Nasza strona internetowa konferencji Styles z resetowaniem CSS

Demo i kod źródłowy

Poniżej możesz wyświetlić stronę internetową konferencji Styles w jej obecnym stanie, a także pobrać źródło w tej chwili.

Streszczenie

Więc wszystko jest w porządku! W tym samouczku podjęliśmy kilka dużych kroków.

Pomyśl tylko, teraz wiesz Podstawy HTML i CSS. W miarę jak będziemy kontynuować i spędzasz więcej czasu na pisaniu HTML i CSS, praca z tymi dwoma językami stanie się znacznie wygodniejsza.

Przypomnijmy, że rozważyliśmy następujące kwestie:

  • Różnica między HTML a CSS.
  • Znajomość elementy HTML, tagi i atrybuty.
  • Konfiguracja struktury Twojej pierwszej strony internetowej.
  • Wprowadzenie do selektorów, właściwości i wartości CSS.
  • Praca z selektorami CSS
  • Wskaźnik do CSS z HTML.
  • Znaczenie resetowania CSS.

Przyjrzyjmy się teraz bliżej HTML i poznajmy trochę semantykę.

Zasoby i linki

  • Popularne terminy HTML za pośrednictwem Scripting Master
  • Warunki i definicje CSS za pośrednictwem imponujących stron internetowych
  • Narzędzia CSS: Zresetuj CSS za pomocą Erica Meyera

W ramach tego artykułu dla początkujących i zwykłych użytkowników zastanowię się, czym jest strona internetowa, a także niuansami z nią związanymi.

Dziś Internet jest już powszechny, dostępny nawet dla najbardziej początkujących użytkowników. Internet zapewnia dostęp do zasoby rozrywkowe, oraz witryny do komunikacji (na przykład sieci społecznościowe) oraz do Wyszukiwarki, i wiele więcej. Jednak niewiele osób jednocześnie nawet trochę wyobraża sobie, czym jest „strona internetowa”. Nie jest to ani złe, ani dobre, ale nadal warto znać przynajmniej niektóre podstawy, które zostaną omówione dalej.

Notatka: Radzę też przeczytać artykuł czym jest sieć.

Przede wszystkim powinieneś wiedzieć, że wszystkie witryny, blogi, fora i inne zasoby internetowe składają się z tych samych stron internetowych. Co więcej, strony te są połączone za pomocą linków internetowych, klikając w które w przeglądarce przechodzisz z jednej strony na drugą. Ten artykuł jest również stroną internetową. Co więcej, cała zawartość tej strony nazywana jest treścią. Czyli tekst, zdjęcia itp. Nawet wideo i audio są zawarte w koncepcji treści.

Zatem, Strona internetowa- jest to specjalny dokument zawierający szereg metadanych do wyświetlenia w przeglądarce (i innych technicznych rzeczach), a także treści (tekst, zdjęcia itp.), które można przeglądać, odsłuchiwać i tak dalej.

Najczęściej strony internetowe dzielą się na dwa rodzaje:

1. Statyczne strony internetowe. To zdanie jest okresowo źle rozumiane przez użytkowników, a wszystko z powodu obecności słowa „statyczny”. Chodzi o to, że słowo „statyczny” istnieje tylko dlatego, że cały ten specjalny dokument pozostaje taki sam. Jednocześnie strona może być animowana (bloki poruszają się płynnie i inne piękne rzeczy), może zawierać wideo, audio i inne elementy multimedialne. Jednak te strony są zwykłym, niezmiennym dokumentem HTML, a także powiązanymi plikami, które są ładowane przez przeglądarkę w celu prawidłowego wyświetlania strony internetowej (specjalne pliki w stylu CSS, które pozwalają sformatować wyświetlanie treści, obrazów, wideo, audio itp. .).

2. Dynamiczne strony internetowe. W przeciwieństwie do poprzedniego typu stron internetowych, dany typ przewiduje, że treść tej samej strony może ulec zmianie. Na przykład strony na forach, na których ludzie zostawiają swoje komentarze. Różne strony wyszukiwanie i wiele innych przykładów. Warto zauważyć, że te strony są również dokumentem html z towarzyszącymi plikami, jednak ich treść jest generowana oddzielny komputer, który jest zwykle nazywany serwerem. Przynajmniej raz, ale prawdopodobnie słyszałem o takich językach jak PHP, Asp.Net C#, Java i inne. To za ich pomocą odbywa się generowanie stron.

Również strony można podzielić ze względu na ich przeznaczenie (podam kilka opcji):

1. Strona osobista. To jest taka strona internetowa, której informacje dotyczą konkretnej osoby. Należy rozumieć, że taka strona może być oficjalna lub nie. Odnosi się do prawdziwa osoba, a także do wymyślonego. Na przykład na forach znajdują się strony o nazwie „profil użytkownika” - w rzeczywistości jest to strona osobista. Jeśli rozważymy inny przykład, to Twoja strona w sieć społeczna można również nazwać osobistym.

2. Strony medialne. Na tego rodzaju stronach internetowych zazwyczaj treść zawiera pewien rodzaj informacji medialnych w dominującej formie. Na przykład różne galerie zdjęć, kolekcje audio lub wideo.

3. Strona informacyjna. Zasadniczo każdą stronę internetową można nazwać informacyjną, ponieważ zawiera pewną treść. Jednakże zwyczajowo nazywa się strony informacyjne te strony, których głównym celem jest dostarczanie informacji użytkownikowi. W takim przypadku informacja może być powiązana z czymkolwiek. Na przykład ten artykuł - dobry przykład strona informacyjna.

4. Strona wyszukiwania. Ta strona ma na celu umożliwienie użytkownikowi witryny wyszukiwania potrzebnych informacji. Zazwyczaj taka strona zawiera pola do wpisania wyszukiwanych fraz oraz różne kontrolki do ustawienia zakresu wyszukiwania (np. przeszukaj całą witrynę lub tylko w komentarzach).