Każda strona internetowa ma ogólna struktura podstawowe kody html. Przyjrzyjmy się najbardziej podstawowym kodom HTML stron internetowych.
Kod HTML najprostszej strony (strony internetowej):
Tekststrony
W samym kodzie strony wielkość liter nie ma znaczenia, możesz napisać zarówno "HTML, BODY ..." jak i "html, body ...".
T egy oraz służą do tego, aby kod dokumentu był rozpoznawany jako html.
- wskazuje, że zaczyna się "nagłówek" strony - tytuł strony i jej informacje techniczne.
– „Głowa” strony się skończyła.
Tagi się otwierają <тег> i zamykanie . Są tagi, których nie trzeba zamykać. Niektóre tagi, które nie są nawet zamknięte, nie powodują błędów, ale zawsze zamykają się, jeśli powinny zostać zamknięte.
Tekst strony - pomiędzy tymi tagami znajduje się cała zawartość strony - tekst, zdjęcia, linki itp.
- Dokument się skończył. Z reguły to t tag y młyn Pojawia się na samym końcu dokumentu.
Tagi formatowania tekstu
-
są nagłówki.
Im mniejsza liczba, tym większa czcionka w nagłówku, możesz dostosować rozmiar każdego typu nagłówka. Uważa się, że tagi ,
najbardziej „ulubionych” tagów wyszukiwarek, poprzez te tagi wyszukiwarki określają temat treści. tagi
-
musi być zamknięty.
Przykłady:
Tag nagłówka drugiego poziomu
- hnagłówek drugiego poziomu
Nagłówek czwartego poziomu
- h nagłówek czwartego poziomu
Tagi są również często używane do formatowania tekstu - , , , , .
Tekst będzie pogrubiony
Tekst będzie pogrubiony
– tag analogowy
Tekst kursywą
- analogowy
Podkreślony tekst
Tekst przekreślony
Zwiększony
oraz
zredukowany
tekst w porównaniu z obecnym.
Napisany u góry
- X 2
indeks
- X 2
Tekst o stałej szerokości
- jak maszyna do pisania
Wszystkie te metki są dwustronne i muszą być zamknięte. Tagi mogą być używane w połączeniu. Na przykład:
Tekst pogrubiony, kursywa i podkreślony
Z reguły tagi są zamykane w kolejności, w jakiej zostały otwarte. Jeśli zmienisz kolejność, może to nic nie zmienić, ale przy złożonym formatowaniu tekstu będziesz mieć problemy.
Podziały wierszy i bloki tekstu
Tagi tytułu (
-) tłumaczy wiersz po sobie ("naciśnij enter"), chyba że w arkuszach stylów określono inaczej. Gdy napiszesz tekst w "gołym html", podziały wiersza nie będą brane pod uwagę, tekst zostanie umieszczony w rzędzie do nagłówków lub specjalnych znaczników.
- tłumaczy ciąg. Tag zamykający nie jest potrzebny. Jeśli potrzebujesz dużej przerwy między wierszami, możesz użyć kilku z tych tagów, na przykład
– pięć nowych wierszy.
– pozioma linia podziału:
Wiele tagów może używać specjalnych atrybutów, takich jak tag
możesz określić jego grubość:
więcej postaci, tym grubsza linia.
Etykiety dwustronne służą również do formatowania tekstu
,
.– Akapit
Tekst
- Domyślnie również akapit, ale utworzony do złożonego formatowania lokalizacji treści na stronie, używany do układu poprzez arkusze stylów.- czcionka sformatowana. Pomiędzy tymi znacznikami tekst jest wyświetlany jak na maszynie do pisania (ze spacjami, podziałami wierszy).
Wklejanie obiektów
Aby wstawić obraz, musisz stworzyć kod:
http://site.ru/image.png">
http://site.ru/image.png - Tenadres obrazu.
http://witryna.ru/"> Przejdź do Site.ru
Gdzie
http://witryna.ru/ - strona, do której prowadzi link,Przejdź do Site.ru – tytuł linku , tak zwana kotwica.
Kod linku zawiera atrybut
cel=" _pusty " - link otworzy się w nowym oknie i w kodzie obrazugranica = "0" - obraz nie będzie miał ramki.Listy
Listy tworzone są za pomocą następujących kodów html:
Pierwsza pozycja na liście Druga pozycja na liście Trzecia pozycja na liście
stoły
Tabele są elementem bardziej złożonym niż te tagi html, można im poświęcić cały post, tutaj tylko pokażę przykładowy kod najprostszej tabeli:
Zawartość Podział wiersza po każdym tagu w kodzie jest umieszczany dla wygody edycji kodu html. Ten sam kod tabeli można wstawić w następujący sposób:
Zawartość To jest główna struktura strony serwisu. Znając podstawy, możesz przejść do bardziej skomplikowanych.
Główny kody html
aktualizacja: 10 kwietnia 2017 r. przez: AdministratorHTML- Standardowy język znaczników hipertekstowych. (język angielski skrót hipertekstowy język znaczników).
Język HTML został wynaleziony w XX wieku do wyświetlania tekstu (na początku był to tylko tekst), a następnie, wraz z rozwojem technologii komputerowej, zaczęły pojawiać się wideo, audio, obrazy itp. (w XXI wieku informację tę nazywano „treścią”), co samo w sobie doprowadziło do konieczności ekspansji Internetu. W rezultacie zaczął się rozwijać język HTML.
Dziś oprócz HTML istnieją inne języki programowania, są to PHP, CSS, MSQ, skrypty Java i inne. Ich liczba stale rośnie, podobnie jak jakość pisania kodu.
Język HTML wykonuje tylko znaczniki strony, co powinno być wyświetlane w witrynie, a pozostałe języki nadają stronie „kolory” i łączą ją w jedną całość, nadając witrynie piękno i znaczenie.
W XXI wieku taka koncepcja jak epoka multimediów Web 2.0 jest już w pełni wykorzystywana, w której tekst już schodzi na dalszy plan. Ale dalej ten moment tekst jest nadal używany w witrynach z reguły w celu opisania niektórych działań lub elementów witryny, niezależnie od tego, czy jest to materiał wideo, czy audio. Dlatego nadal musisz nauczyć się języka HTML, bez którego nie będziesz w stanie pisać i pięknie projektować tekstu i innych elementów strony.
Język HTML ma wiele wersji, ale z reguły nie uległy one dużym zmianom. Obecnie główna wersja język HTML to HTML 4.01 Transitional, język przejściowy od HTML 4.01 Transitiona do HTML 5.0, najnowszej wersji HTML.
Ten kurs obejmie HTML 4.01 Transitiona, ponieważ piąta wersja jest wciąż w fazie rozwoju.
Zacznijmy więc uczyć się języka HTML. Podam opis tylko tych tagów, które są często spotykane podczas pisania witryn, a pozostałe albo w ogóle nie są używane, albo są używane bardzo rzadko.
Tabela znaczników i atrybutów HTML.
Tagi i atrybuty:
Opis tagów i atrybutów:
Znacznik pary (posiada znacznik otwierający i zamykający z „/” w znaczniku zamykającym). jest wspólnym tagiem HTML. To jest ogólny kontener, w którym zmieszczą się wszystkie istniejące tagi. Ten tag i trzy następne są wymagane dla każdego HTML-strony.
.Ten tag zawiera nazwę strony witryny. Wyszukiwarki najpierw szukają tego tytułu.
Tag pary. Napisane w środku sparowany tag .Ten znacznik zawiera; nitowany stół style css, tytuł strony witryny, opis strony, skrypty, kodowanie strony.
Tag pary. Napisane wewnątrz tagu pary po tagu pary
. Ten tag zawiera wszystkie inne tagi HTML które nadają stronie wygląd i objętość. W tym tagu odbywa się cały proces tworzenia strony.Tag pary. Napisane wewnątrz tagu pary
. Ten tag służy do wyróżniania nagłówków w witrynie. Im większa liczba w tagu, tym mniejsza wartość tytułu. W związku z tym im mniejszy tytuł, tym mniejszy jego wpływ na Wyszukiwarki w zakresie optymalizacji serwisu. Ten tag odgrywa dużą rolę, podobnie jak tagw znajdowaniu witryny w zapytaniach wyszukiwania. Tag pary. Napisane wewnątrz tagu pary
. Głównym celem tego tagu jest podzielenie tekstów na akapity.Tag pary. Napisane wewnątrz tagu pary
. Jest linkiem do innych części tego samego HTML stronę lub łącze do innej witryny.
. Cel jest taki sam jak tag, ale może rozdzielić całą zawartość na części ze spacjami między nimi. Niewielka aktywność fizyczna.
![]()
Niesparowany tag. Napisane wewnątrz tagu pary
. Znacznik wskazuje, że w tej lokalizacji znajduje się obraz.
Tag pary. Napisane wewnątrz tagu pary
. Wstawia tabelę do witryny., , . Głównym celem tych tagów jest tworzenie sekcji tekstu pogrubiony oraz kursywny aby przyciągnąć ludzkie oko. Te tagi pozwalają podkreślić główną ideę tekstu.
Tag pary. Napisane wewnątrz tagu pary
. Znacznik nie przenosi obciążenia semantycznego, ale za pomocą tego znacznika można wyróżnić dowolny obszar HTML strony, za pomocą których w arkuszu stylów CSS będzie można dokonać dowolnych zmian w zakresie projektowania.Tag pary. Napisane wewnątrz tagu pary
. Cel jest taki sam jak tag, ale o mniejszym promieniu działania, który działa wewnątrz tagu., , , ,
, Sparuj tagi. Napisane wewnątrz tagu pary
. Podziel tekst na listy punktowane., Sparuj tagi. Napisane wewnątrz tagu pary
. Podziel tabelę na wiersze i kolumny.
Tag pary. Napisane wewnątrz tagu pary
. Zaznacza główny wiersz w tabeli, pogrubia tekst i wyrównuje do środka komórki.
src="", href="" Dwa atrybuty, których istotą jest to, że podają adres wskazanych w nich informacji. Oznacza to, że wskazują miejsce, w którym znajduje się ta lub inna treść. Może to być zwykły tekst, zasób lub jakiś rodzaj informacji graficznej; obraz, wideo, dźwięk itp. Ale te atrybuty są ściśle oddzielone celem. Atrybut src="" nadaje adresy tylko do źródeł graficznych, czyli miejsca, w którym się znajdują. A atrybut href="" podaje adresy tylko do innych stron witryn lub do innych zasobów, czyli w rzeczywistości jest to banalne hiperłącze do innego źródła znajdującego się na innej stronie witryny.
klasa ="" Atrybut, który można przypisać do prawie każdego tagu. Istotą tego atrybutu jest nadanie nazwy konkretnemu fragmentowi treści, gdy jest on dalej rozważany i modyfikowany za pomocą arkuszy stylów CSS.
tytuł="", alt="" Dwa atrybuty, których istotą jest na przykład podanie pewnego rodzaju graficznego źródła; opis obrazu. Ale ponieważ jest ich dwóch, ich opis jest inny. W atrybucie title="" zapisany jest opis, który zostanie podświetlony po najechaniu kursorem myszy na ten obiekt, aby odwiedzający wiedział, co jest ukryte pod tym obiektem. Z reguły jest to link. W alt atrybut="" opis jest napisany ten obiekt co wyjaśnia wyszukiwarce, jaki rodzaj obiektu ma wprowadzić do bazy danych w celu zindeksowania. Ten opis jest niewidoczny dla odwiedzających witrynę, ale widoczny dla wyszukiwarek.
wyrównaj = "", wyrównaj = "" Dwa atrybuty, których istotą jest wyrównanie określonej części witryny w poziomie lub w pionie. Oznacza to, że jasno pokazują przeglądarce, w którym obszarze witryny powinna się znajdować ta informacja. Atrybut align="" wyrównuje część lub całą zawartość w poziomie. Atrybut valign="" wyrównuje w pionie część lub całość treści.
szerokość ="", wysokość ="" Dwa atrybuty, których istotą jest rozciąganie lub zmniejszanie jakiegoś obiektu na stronie. Zasadniczo te atrybuty powodują deformację niektórych obiektów na przykład; tabele, na wysokość i szerokość, zmieniając w ten sposób ich rozmiar.
granica ="" Atrybut ramki tabeli. Za pomocą tego atrybutu możesz uczynić ramę stołu widoczną i niewidoczną, a także ustawić grubość ramy.
cellpadding = "", odstęp komórek = "" Te dwa atrybuty są takie same jak w atrybucie border="" z tą różnicą, że granice są przypisane nie do całej tabeli, ale do jej elementów wierszy i kolumn.
bgkolor="" Atrybut określający kolor ramki tabeli.
Teraz kilka słów o tagach, których użyliśmy do stworzenia tej strony.
Opis tagów html z przykładu
1. Te tagi muszą być obecne na każdej stronie internetowej. Mówią przeglądarkom i wyszukiwarkom, że jest to strona html.
Każda strona html ma następującą strukturę:
... Tagi nagłówków ... ... treść strony ...2.
- pomiędzy tymi tagami znajduje się cała widoczna zawartość strony.4.
- między tymi tagami wpisany jest tytuł strony, który jest wyświetlany na samej górze przeglądarki. Nawiasem mówiąc, kiedy szukasz czegoś w wyszukiwarkach, pierwszą rzeczą, która się wyświetla, jest tylko nazwa strony. Etykietka często skracany jako „tytuł”. Radzę przeczytać artykuł: jak skomponować tag </p> <p>Przejdźmy teraz do tagów znajdujących się w treści strony html (wewnątrz <body>oraz</body> ).</p> <p>5. <center></center>- te tagi wyrównują wszystko w środku do środka. W tym przypadku środkiem będzie - środek ekranu. W przyszłości zalecamy zaprzestanie używania tych tagów.</p> <p>6. <h1></h1>jest jedną z klas tagów nagłówka <h1>..<h6>, zwykle zawierający tytuł strony. Na przykład ta strona ma tag tytułu „Przykład <a href="https://bazava.ru/pl/sozdanie-html-form.html">tworzenie html</a> stron".</p> Notatka <p>tagi te mają duże znaczenie w rankingu witryn, dlatego należy ich używać ostrożnie i mądrze.</p> <p>Podczas pisania kodu html musisz przestrzegać <a href="https://bazava.ru/pl/ofisnye-pravila-prostoe-reshenie-slozhnyh-problem.html">prosta zasada</a>: tag głowy musi być na pierwszym miejscu <h1>, a potem mogą już iść <h2> , <h3>itp. Najważniejsze, żeby nie być pierwszym <h2>, po <h1>, po <h3>itp. Musi istnieć ścisła hierarchia. nagłówki <h2> , <h3>itp. może być ich wiele.</p> <p>7. <br/>to pojedynczy znacznik, który nie wymaga znacznika zamykającego. Przechodzi do następnej linii. W moim przykładzie dwa pojedyncze znaczniki są zapisywane z rzędu, aby dwukrotnie przejść do następnej linii.</p> <p>8. <span><img src='https://i0.wp.com/URL_ИЗОБРАЖЕНИЯ' loading=lazy loading=lazy> </span> to pojedynczy tag, który wyświetla obraz.</p> <ul><li>src jest wymaganym parametrem, który określa adres obrazu (zamiast URL_IMAGE musisz podać adres, pod którym przechowywany jest obraz). <br><u>Notatka</u>: <ul><li>Jeśli obraz znajduje się w tym samym folderze co twoja strona html, wystarczy wpisać nazwę obrazu, w przeciwnym razie musisz wpisać bezwzględny lub względny adres URL;</li> <li>Nie zapomnij dołączyć rozszerzenia obrazu. Na przykład .jpg , .gif , .jpeg .</li> </ul></li> <li>alt lub title - w tych parametrach możesz wpisać opis do swojego obrazu. Po najechaniu kursorem myszy na obraz pojawi się ten opis. Parametry te są ważne dla promocji serwisu, zwłaszcza w wyszukiwarce grafiki. Jeśli obraz nie został załadowany, zostanie wyświetlony ten tekst, co również jest plusem.</li> </ul><p>9. <font></font>- te tagi służą do zmiany czcionki, tła, rozmiaru itp. Krótko mówiąc, wszystko związane z formatowaniem tekstu można skonfigurować w jednym tagu. Ten tag ma sporo atrybutów, które omówię w osobnym samouczku.</p> <p>Uwaga: - podobny tag.</p> <p>Istnieje również właściwość czcionki CSS, w której możesz ustawić wszystkie te opcje.</p> <p>10. - zaznacz pogrubioną czcionką. Wszystko, co jest pomiędzy <b>oraz</b> zostanie wyróżniony pogrubioną czcionką. Na przykład, jeśli napiszesz go na samym początku treści, a zamkniesz na samym końcu, to cały tekst na stronie będzie pogrubiony. Jest to dość powszechny tag, którego analogiem jest <strong></strong> .</p> <p>Wyszukiwarki zwracają uwagę na ten tag pod kątem zwiększenia wpływu słów kluczowych. Musisz jednak uważać, ponieważ pogrubione słowa kluczowe za każdym razem będą postrzegane jako spam.</p> <p><b>Strona HTML i jej struktura zdefiniowana przez tagi główne</b></p> <p>Zobaczmy jak wygląda najzwyklejsza strona internetowa od środka.</p> <ul><li><b>Struktura HTML</b> w zasadzie stanowi podstawę każdej strony internetowej.</li> <li>Obecnie istnieje kilka rodzajów <b>HTML</b> dokumenty. Każdy typ dokumentu ma swój własny <b>Struktura HTML</b>(szczegóły na dole strony).</li> <li><b>Prawidłowa początkowa struktura HTML</b> jest zastawem <span>witryna w różnych przeglądarkach</span>.</li> </ul><i> </i> <p>W menu systemowym Start lub Start przejdź do sekcji Programy (Wszystkie programy), otwórz folder Standard (Akcesoria), wybierz Notatnik. Oczywiście nie jest to jedyne narzędzie do pisania kodu, ale na tym etapie jest to potrzebne.</p> <p>Przykład struktury dokumentu:</p> <p>Rozważ tagi HTML, które definiują strukturę strony</p><ul><li><html> </html>- obowiązkowe, określ <b>HTML</b> dokument.</li> <li><head> </head>- zdefiniować sekcję z informacjami o usługach, zawierać instrukcje dla wyszukiwarek, przeglądarek, skryptów.</li> <li><title> - określ główny tytuł strony internetowej.
- zdefiniować nagłówek 3 poziomu.
Struktura dokumentu HTML | Pisanie kodu strony
Sekwencja działań jest następująca:
1. Napisz kod w Notatniku HTML strony:
4. Otwórz IE ( Internet Explorer) lub inna domyślna przeglądarka. W jego menu próbujemy znaleźć i otworzyć zapisany na komputerze plik index.html. Możesz również znaleźć i otworzyć plik w dowolnej przeglądarce w oknie, które pojawia się po wpisaniu kombinacji dwóch klawiszy na klawiaturze: Ctrl i O - przytrzymaj Ctrl, a następnie naciśnij łacińska litera O.
Do Dalsze badanie materiał potrzebuje:
Po prostu musisz mieć kilka różnych przeglądarek na swoim komputerze. Pobierz Mozilla Firefox, Opera za darmo i kontynuuj naszą lekcję.
Otwórz index.html w Firefoksie. W wczesne wersje Dzięki tej przeglądarce nie będziesz w stanie odczytać napisanego tekstu, więc zostaną wyświetlone niezrozumiałe znaki. Ta niepoprawność jest eliminowana przez proste włączenie in HTML kod dwóch tagów z zestawem atrybutów, które są również wymagane.
Poprawna struktura HTML 4.01
Powinna to być początkowa struktura strony HTML:
|
|
Dodaj akapity, nagłówek sam i zobacz, co się stanie. Nie zapomnij odświeżyć zawartości okna przeglądarki po każdym zapisaniu dokumentu, naciskając przycisk w Mozilla Firefox lub przyciski w programie Internet Explorer lub F5, aby zmiany zaczęły obowiązywać.
Czy wszystko ci się udało? - Więc byłeś ostrożny i zrobiłeś wszystko dobrze.
Tłumaczy się to jako „język znaczników hipertekstowych”. Hipertekst to specjalna metoda poruszania się po stronach internetowych, realizowana w postaci linków hipertekstowych. Klikając w te linki, możesz łatwo poruszać się po strukturze witryny. W tym przypadku przejścia nie zachodzą liniowo, tj. zawsze masz możliwość przejścia do dowolnej strony serwisu, do której link jest aktualnie widoczny.
Znacznik odnosi się do niektórych reguł i właściwości, które są wyposażone w elementy strony. Są realizowane w postaci tzw. tagów. Na przykład, aby określić, że określony tekst na stronie powinien być wyśrodkowany na stronie, możesz oznaczyć go znacznikiem środka. Możesz za jego pośrednictwem zobaczyć kod HTML konkretnej strony. menu kontekstowe. Na przykład, aby uzyskać dostęp do tego kodu w Przeglądarka Firefox musi być wciśnięty kliknij prawym przyciskiem myszy na stronie i wybierz „ Źródło stron".
