Nieprawidłowe tworzenie stron internetowych och trudnetak się wydaje. Dowiedz się, jak kodować prosta strona Zza pomocą HTML - języki znaczniki dla sieci.

Zaprojektowanie i zbudowanie prostej strony internetowej jest bardzo łatwe. Nawet początkujący mogą nauczyć się projektowania stron internetowych bez wkładania zbyt dużego wysiłku i czasu.

HTML jest głównym językiem znaczników stron internetowych. Nauczmy się podstaw i spróbujmy stworzyć prostą stronę.

Wprowadzenie do HTML

HTML to hipertekstowy język znaczników.

Hipertekst to tekst, który działa jak łącze.

HTML definiuje strukturę strony internetowej i zapewnia jej prawidłowe wyświetlanie w przeglądarce. Dokument HTML może być bardzo prosty lub złożony, w zależności od wykonywanego zadania.

Przeglądarki WWW odbierają dokumenty HTML z serwera WWW i wyświetlają je jako strony WWW. Każda przeglądarka rozumie HTML i renderuje obrazy, tekst, filmy tak, jak jest napisane w kodzie.

HTML jest podstawowym językiem znaczników w Internecie. Służy jednak do tworzenia statycznych stron internetowych, bez interaktywności i animacji. html5, Ostatnia wersja HTML jest pod tym względem nieco lepszy, zwłaszcza jeśli chodzi o wideo lub audio.

Dzisiejszy HTML to HTML5, najnowsza wersja, która dodaje więcej funkcji niż poprzednie wersje i może teraz definiować sposób wyświetlania filmów, obrazów i tekstu na ekranie przeglądarki.

HTML5 to jedno z potężnych narzędzi do tworzenia stron internetowych. Dzięki HTML5 strumieniowanie multimediów jest możliwe bez użycia wtyczek innych firm, takich jak Flash. HTML5 obsługuje również przechowywanie danych po stronie klienta. Może to służyć do obsługi aplikacji internetowych, gdy klient jest w trybie offline.

Internet i HTML

Sieć składa się z połączonych stron internetowych i aplikacji, a także obrazów, filmów, animacji i treści interaktywnych. Języki znaczników stanowią podstawę sieci. Języki te są używane od czasów, gdy strony internetowe były bardzo proste i nadal będą częścią sieci, jej ewolucji i przyszłości.

HTML pozostaje podstawową umiejętnością wszystkich programistów i projektantów stron internetowych.

Według ankiety W3Techs HTML jest językiem używanym przez 74,3% wszystkich stron internetowych.

Jak stworzyć prostą stronę HTML

Programowanie HTML jest łatwe i dlatego można łatwo nauczyć się kodować prostą stronę HTML. Ale najpierw musisz nauczyć się podstaw języka.

Kodowanie HTML za pomocą edytora tekstu

Dokument HTML to w zasadzie Dokument tekstowy. Dostępnych jest wiele edytorów tekstu, których można używać do pisania HTML. Dwa najpopularniejsze to Dreamweaver i Wzniosły tekst. Bezpłatni redaktorzy- Notepad ++ dla Windows i Text Wrangler dla Mac. W rzeczywistości możesz stworzyć stronę internetową w Microsoft Word, ale nie powinieneś tego robić, ponieważ dodaje dodatkowy i niepotrzebny kod do dokumentów HTML.

Na przykład użyjemy Notepad ++ jako edytora. Możesz wybrać dowolnego edytora.

Tworzenie i edycja HTML

Tworzenie nowego dokumentu HTML przebiega tak samo, jak w przypadku każdego innego typu dokumentu. Wybierz „Plik” - „Nowy”, aby otworzyć nowy dokument w Notepad ++. Wprowadź zmiany w dokumencie i kliknij Zapisz.

Zapisywanie HTML

Dokument HTML to plik z rozszerzeniem .htm lub .html. Niektórzy edytorzy mogą również udostępniać opcję „Zapisz jako HTML”. Lepiej jest nazwać plik literami łacińskimi, małą literą i zastąpić spacje myślnikami lub kropkami.

Jeśli napisałeś kod w Notatniku i zapisałeś go jako dokument tekstowy, możesz go przetłumaczyć na stronę html za pomocą programu Całkowity dowódca. Wybierz polecenie „Zmień nazwę” i zmień rozszerzenie pliku z .txt na .html.

Format strony HTML

HTML jako język składa się z elementów, tagów i atrybutów, które definiują zawartość witryny. Elementy HTML pozwalają nam dodawać tabele, obrazy, wideo, audio itp. do strony internetowej.

elementy HTML

Elementy definiują strukturę i zawartość strony internetowej. Oznaczone nawiasami ostrymi wokół nazwy elementu. Treści, które nie znajdują się między „<>” zostanie wyświetlony na stronie. Element wygląda mniej więcej tak:

tagi

Element otoczony nawiasami ostrymi tworzy etykietę ( ). Tagi nie są wyświetlane na ekranie, ale pomagają przeglądarce zrozumieć, co powinna wyświetlać. Znacznik początkowy oznacza początek elementu, a znacznik końcowy oznacza jego koniec.

Na przykład:

Otwierający tag:

Znacznik zamykający:

Zawartość pomiędzy otwierającym i zamykającym znacznikiem jest zawartością elementu.

Tagi mogą być używane na dwa sposoby:

Używanie tagów w parach

Sparowane tagi zawierają tag otwierający i zamykający. Oto jak one wyglądają:

Oto tekst

Istnieje tag otwierający ( ) i zamykający tag () w celu wskazania końca akapitu. Oznacza to, że wszystko pomiędzy tymi dwoma znacznikami jest akapitem.

Pojedyncze tagi

Pojedyncze tagi służą do definiowania elementów samozamykających się i wstawiania elementów, takich jak obrazy. Nie musisz definiować początku i końca tych elementów.

Te elementy są napisane tak:

Zamknięcie / (ukośnik) jest również opcjonalne. To to samo co nagrywanie . Jednak, aby uniknąć pomyłek z tagiem otwierającym, dobrym pomysłem jest dodanie / (ukośnika) na końcu.

Atrybuty

Atrybuty to elementy rozszerzające tagi Dodatkowe informacje. Atrybut jest umieszczany w znaczniku otwierającym i zawiera nazwę oraz wartość.

Znacznik atrybutu będzie wyglądał tak:

Powyższy tag „HTML” ma atrybut „lang” o wartości „en-US”.

Struktura dokumentuHTML

Każdy dokument HTML ma podstawową strukturę zdefiniowaną za pomocą następujące produkty:

DOCTYPE lubDTD: Deklaracja typu dokumentu określa używaną wersję HTML. Ten znacznik jest umieszczany na początku dokumentu.

HTML: Para Tagi HTML definiuje początek i koniec dokumentu HTML.

RozdziałNAGŁÓWEK< głowa>: ta sekcja definiuje informacje ogólne na stronie i zwykle krótkie. Zawartość tego elementu nie jest wyświetlana na stronie. Tytuł zawiera znacznik TITLE, który określa tytuł dokumentu wyświetlany na pasku tytułu przeglądarki. HEADER może również zawierać metadane lub linki do plików zewnętrznych.

RozdziałCIAŁO: Ta sekcja zawiera główną treść strony. Jego zawartość jest wyświetlana w przeglądarce. Większość kodu strony HTML znajduje się wewnątrz elementu body.

Kodowanie: ten znacznik określa kodowanie używane w dokumencie HTML. Kodowanie określa sposób zapisywania pliku i sposób jego wyświetlania. Symbole specjalne. Ogólnie przyjętą wartością tego znacznika jest UTF-8, co pozwala na wyświetlenie prawie wszystkich znaków w języku.

prosta stronaHTML

Teraz, gdy rozumiemy podstawowe elementy HTML Spróbujmy stworzyć podstawową stronę HTML. Zacznijmy od utworzenia pustego dokumentu tekstowego w edytorze tekstu.

Krok 1: Pierwszy wiersz kodu HTML do dodania określa element DOCTYPE jako „html”. Oznacza to, że używana jest najnowsza wersja HTML.

Krok 3: Następnie dodajemy tag tytułu z tagiem tytułu i informacjami o zestawie znaków.

Witaj świecie

Krok 4: Następnie zapisywany jest znacznik BODY.

Witaj świecie

Krok 5: Teraz pusty dokument HTML jest gotowy. Zacznijmy dodawać tekst do wyświetlenia. Dodajemy tag tytułu

i tag

Definiują nagłówek pierwszego poziomu i akapit pod nim.

Witaj świecie

Witaj świecie

Prosta strona HTML

Strona główna HTML jest gotowa i możemy ją zapisać w wybranym przez nas folderze.

Widok stronyHTML


Aby wyświetlić stronę HTML, musimy ją otworzyć w przeglądarce. Przejdź do folderu, w którym zapisano dokument HTML i kliknij go dwukrotnie.

Otworzy się w przeglądarce i zobaczymy bardzo prostą stronę. Możesz sprawdzić, co pokazuje:

Tytuł taki jak „Witaj świecie”

Nagłówek pierwszego poziomu jako „Hello World”

Akapit z tekstem „Prosta strona HTML”

Teraz, gdy stworzyliśmy prostą stronę HTML, zobaczmy, jak możemy dodać więcej funkcji. HTML zapewnia o wiele więcej funkcji niż to, co dodaliśmy do głównej strony HTML. Możesz dodać kolor tła, czcionki, kolory czcionek, obrazy, łącza, listy i nie tylko, aby stworzyć piękną stronę HTML. Przyjrzyjmy się niektórym z nich dodatkowe funkcje.

Zaawansowane formatowanie tekstu

HTML zapewnia specjalne elementy do specjalnego formatowania tekstu.

Poziomy nagłówków można ustawić za pomocą tagów

-

. W sumie jest 6 poziomów nagłówków. I

- jest to największy z nich pod względem wielkości,

- najmniejszy.

tagi

są używane do wskazania początku nowego akapitu. Przeglądarka zwykle dodaje jedną pustą linię między dwoma akapitami.

Elementy formatujące służą do wyświetlania specjalnych typów tekstu. Tekst można sformatować za pomocą następujących tagów:

Pogrubienie -

Kursywa -

Podkreślone -

Czcionka -

Pełna lista tych tagów jest dostępna tutaj.

Dodawanie linków

To jest tekst linku


Dodawanie obrazów

Etykietka jest pojedynczym tagiem, bez tagu zamykającego. Możesz określić atrybuty obrazu.

Atrybut src określa położenie obrazu.

Atrybut style ma wiele opcji, w tym szerokość i wysokość obrazu w pikselach.

Atrybut alt daje krótki opis Obrazy. Używane, jeśli z jakiegoś powodu obraz się nie ładuje.


Dodawanie tytułu

Etykietka

jest nowością w HTML5 i określa najwyższy element strony internetowej. Nagłówki zazwyczaj zawierają logo firmy, informacje kontaktowe, linki nawigacyjne itp. W jednym dokumencie może znajdować się wiele elementów<>.

Zaawansowane koncepcje w HTML

HTML jest technologią łatwą do nauczenia, więc wielu projektantów pracuje tylko z podstawowymi koncepcjami. Jeśli chcesz w pełni wykorzystać HTML, będziesz musiał zapoznać się z zaawansowanymi koncepcjami. Pomoże Ci to stworzyć atrakcyjną stronę internetową przy mniejszym wysiłku.

Wymienimy kilka koncepcji, które pomogą Ci dalej. Możesz kontynuować naukę i korzystać z zaawansowanego języka HTML i jego funkcji.

Walidacja kodu HTML

Walidacja HTML służy do sprawdzania błędów w kodzie HTML. Jeśli Twoja strona internetowa nie ładuje się, możesz skorzystać ze sprawdzenia, aby znaleźć przyczynę problemu.

Walidacja przedstawia również zalecenia dotyczące kodu, który nie jest zgodny z najnowszym standardem HTML. Nieprawidłowy kod HTML uniemożliwi korzystanie z witryny. Może to powodować problemy z ładowaniem lub niezgodność danych wyjściowych z różne przeglądarki. Wiele usług walidacji jest bezpłatnych, takich jak validator.w3.org

Dodawanie dodatkowych tagów

Istnieje znacznie więcej znaczników i atrybutów HTML, niż omówiliśmy tutaj. Dwa dobre zasoby edukacyjne to w3schools i HTML Dog, które zawierają więcej samouczków i pełna lista Tagi.

Możesz również użyć opcji „Wyświetl stronę źródłową” w przeglądarce, aby zbadać kod dobrze zaprojektowanych witryn i poznać nowe techniki.

Dzięki usłudze hostingowej możesz dodać wiele stron HTML do swojej domeny internetowej. Możesz potrzebować oprogramowanie Przesyłanie FTP do przesyłania plików HTML na serwer WWW. Istnieje wiele usług hostingowych oferujących funkcję FTP.

UzupełnienieCSS iJavaScript

CSS można wykorzystać do szybkiej poprawy wygląd zewnętrzny Twoja strona. Możesz użyć CSS, aby dodać kolory, czcionki i zmienić rozmieszczenie elementów. Z oprawą stołu style css na stronę HTML, możesz zmienić styl całego tekstu.

JavaScript jest językiem programowania i może być używany do dodawania dodatkowych funkcji do stron HTML. Polecenia JavaScript są wstawiane między tagami. Można ich używać do dodawania interaktywnych przycisków, wykonywania obliczeń matematycznych i nie tylko.

Otwiera się przed Tobą wspaniały świat tworzenia stron internetowych. Odważyć się! Zdobycie tego szczytu jest łatwe, wystarczy zacząć.


Ogólnie oszacuję czas na naukę podstawową html jak 2-8 godzin, reszta jest opcjonalna. I oczywiście czas nauki zależy od zainteresowania. Polecam podzielić go na kilka dni po 20-30 minut każdy.

Jesteś gotowy? Więc zaczynajmy!

Do stworzenia strony w html NIE potrzebujemy połączenia internetowego.

będziemy potrzebować

1) Wybierać Edytor tekstu . wystarczy po raz pierwszy Notatnik(w nim potrzebujemy tylko polecenia Zapisz jako)
Jeśli od razu chcesz zacząć programować w wyspecjalizowanych edytorach tekstu, zwróć uwagę na:
1) dla Okna
NotePad++(pobierz lub )
typ(Ściągnij)

2) dla Prochowiec oraz linux
edytor bluefish(Ściągnij)

Ich różnica w stosunku do zwykłych edytorów tekstu polega głównie na tym, że wykonują automatyczne wcięcia, ! umożliwić ponowne zapisanie pliku w innym kodowaniu (pamiętaj, że spotkasz się z nim w przyszłości), maluj znaczniki w różnych kolorach, np. kod na dole lekcji. W zwykłym edytorze będzie to jeden kolor.

2) Dowolna przeglądarka internetowa, taka jak Internet Explorer dla Windows lub safari dla Mac OS X i iOS. Tak, możesz też Mozilla, Google Chrome , Opera, Yandex oraz Poczta przeglądarki itp.

Zacznijmy tworzyć stronę HTML

1) utwórz folder na pulpicie html. Zrobimy to tak, aby lekcje były uporządkowane i zawarte w jednym miejscu.

2) Tworzyć nasz plik w edytorze tekstowym takim jak Notatnik. Dalej Zapisz jako.

Kodowanie lepiej wybrać UTF-8, a następnie wybrać wszystkie typy plików i wybierz nazwę pliku z .html na końcu, na przykład index.html

Wybieramy jako katalog (folder) gdzie zapisać nasz html
Kliknij ratować. Gotowy!

Często zadawane jest pytanie o to, co rozszerzenie pliku nie jest widoczne. Zróbmy to w porządku

Możliwość zobaczenia rozszerzeń plików może pomóc w określeniu typu pliku i umożliwia ręczne (za pomocą polecenia Przemianować) zmienić nie tylko rozszerzenie, ale także typ pliku (np. z txt na html)

NIE powinno wyglądać tak: zdjęcie, dokument tekstowy, gra
tak powinno wyglądać: zdjęcie.jpg; dokument tekstowy.txt; game.exe

Ale jeśli nazwy plików nadal wyglądają tak, jak w pierwszej opcji (BEZ, na przykład, .txt ; jpg ; .exe na końcu nazwy pliku), wykonaj następujące czynności:

Patrzymy na ustawienia plików i folderów:

Do Windows XP Otwórz dowolny folder - Narzędzia (górny panel) - Opcje folderów - Widok - Ukryj rozszerzenia dla zarejestrowanych plików (odznacz) - Zastosuj

Do System Windows 7 Otwórz dowolny folder - Organizuj - Opcje plików i wyszukiwania - Widok - Ukryj rozszerzenia dla zarejestrowanych typów plików (odznacz) - Zastosuj

Do System operacyjny Mac Klikamy na pulpicie - Finder - Preferencje (Ustawienia) - Zaawansowane (Zaawansowane) - zaznacz pole w Pokaż wszystkie rozszerzenia plików (Pokaż rozszerzenia wszystkich plików) - Zastosuj

3) wklej w nim cały kod (wraz z komentarzami) poniżej:



<br>


Tytuł mojej strony


4) otwórz plik. Możesz wybrać inną przeglądarkę, aby otworzyć ten plik, w tym celu naciskamy prawy przycisk myszy na naszym pliku index.html - Aby otworzyć za pomocą i wybierz przeglądarkę z listy, na przykład Internet Explorer, Google Chrome, Mozilla, Yandex Browser itp.

W rezultacie, otwierając przeglądarkę internetową, wynikowy index.html, Powinieneś zobaczyć taką stronę:


Obrazek 1.

Na Rysunek 1 widzimy, jak przeglądarka wyświetliła w rezultacie Twoją stronę. Tekst następujących elementów jest podświetlony na czerwono:



<br>Tytuł twojej pierwszej strony <br>

Tytuł mojej strony

To moja pierwsza strona internetowa!

W poniższym kodzie możesz zobaczyć podstawowe minimum dokumentu html. Trzeba się tego nauczyć i nie mylić miejscami poprzez otwieranie i zamykanie tagów.



Etykietka głowa wybiera nagłówek dokumentu. Określa elementy związane głównie z wykorzystaniem przeglądarki do przetwarzania elementów Twojej strony (nazwa, słowa kluczowe, autorstwo itp.) Konkretnie o jego treści porozmawiamy później.

Etykietka tytuł oznacza tytuł strony. To jedyny tag zawarty w głowa Ten, który jest wyświetlany na stronie. To, co wpiszesz po otwarciu, a przed tagiem zamykającym, będzie tytułem Twojej strony w Internecie



<br>Tytuł strony <br>


Etykietka ciało oznacza treść strony. Co napisać po otwieraniu i zamykaniu tagów ciało i będzie treścią Twojej strony


<br>Tytuł strony <br>

Dowolny tytuł


Tylko tekst

Tekst w akapicie. Będzie napisane z Nowa linia i zakończ tagiem zamykającym


Inny tekst



Prawie wszystkie tagi w HTML otwieranie i zamykanie(wyjątkiem jest np. tag img, co oznacza wstawienie obrazka).



<br>Tytuł strony <br>



Jeszcze raz przypominam, że ważne jest, aby nie zapomnieć o pisaniu zamykanie tagów dla wszystkich innych typów tagów, w przeciwnym razie przeglądarka nie zrozumie dokładnie, gdzie chcesz zakończyć ten lub inny element. Jak poniżej:



<br>

Chcę zaznaczyć tekst pogrubiony, a ten kursywą



Celowo zapomnieliśmy o zamykającym tagu b po pogrubionym słowie. W rezultacie przeglądarka wyświetliła następujące

Chcę zaznaczyć tekst pogrubiony, a ten kursywą

Jak widać, tekst do końca będzie pogrubiony, a ten, który miał być kursywą, będzie zarówno pogrubiony, jak i kursywa. Więc uważaj!

5) Jeśli chcesz edytować coś w swoim pliku index.html(a teraz jest otwierany domyślnie tylko przez przeglądarkę), następnie wciskamy prawy przycisk myszy na naszym pliku index.html- wybierać Aby otworzyć za pomocą a z listy wybieramy już edytor tekstu, będzie albo Notatnik lub inny zainstalowany edytor tekstu.

W zasadzie wyjaśnił podstawy. Jak na razie strona html wygląda dość prosto, ale w kolejnych lekcjach opowiem Wam szczegółowo o tych i innych elementach oraz ich przeznaczeniu - wstawimy obrazki, zrobimy linki i wiele więcej)

Gratulacje!
To jest łatwe?)

Zacznijmy naszą dzisiejszą lekcję od stworzenia najprostszej strony internetowej. W tym celu najpierw przygotujemy dokument tekstowy, następnie skonwertujemy go na dokument htm, następnie wstawimy do niego kilka linijek kodu, a następnie otworzymy naszą utworzoną stronę internetową w przeglądarce. Następnie zapoznamy się z koncepcją tagów, wymaganymi elementami i ich odmianami, które powinny znajdować się na każdej stronie internetowej. Zajmiemy się ich różnicami i cechami ich zastosowania. Następnie poznamy podstawowe zasady niezbędne przy pisaniu kodów. Dotyczą one wymaganych elementów, zasad pisania tagów oraz funkcji przeglądarki w percepcji kodu.

Podstawowa struktura HTML
Stwórzmy ostateczny prosty html dokument. Aby to zrobić, utwórz folder na komputerze. Nazwij ją, jak chcesz. Wchodzimy w to, klik kliknij prawym przyciskiem myszy myszy przez puste pole i wybierz Nowy > Dokument tekstowy. Otwórz utworzony dokument tekstowy i górne menu wybierz „Plik” > „Zapisz jako...”. W oknie, które się otworzy, w wierszu „Nazwa pliku” piszemy index.htm. W wierszu „Kodowanie” wybierz UTF-8 i kliknij „Zapisz”. Będziemy mieli plik indeksu, w którym wprowadzimy wszystkie kody HTML.

Teraz skopiuj poniższy kod i wklej go do pliku indeks. Ważny! Musisz otworzyć ten plik w specjalnym edytorze. Zwykle używam Notatnika. Aby to zrobić, kliknij plik prawym przyciskiem myszy indeks i wybierz „Otwórz za pomocą...” > „Notatnik”. Istnieją inne specjalne edytory z podświetlaniem znaczników. Kto jest wygodniejszy. Następnie, naciskając klawisze Ctrl + S, zapisujemy nasze zmiany, a następnie dwukrotnie klikamy indeks. W przeglądarce otworzy się nasza pierwsza utworzona strona internetowa.

Moja pierwsza strona internetowa

To jest moja pierwsza strona internetowa

Aby przeglądarka podczas wyświetlania dokumentu zrozumiała, że ​​nie ma do czynienia ze zwykłym tekstem, ale z elementem formatującym i zastosowanymi znacznikami. Istnieją dwa rodzaje tagów - pojedyncze i sparowane (kontenery). Pojedynczy znacznik jest używany samodzielnie, podczas gdy znacznik pary może zawierać inne znaczniki lub tekst w środku. Tagi sparowane składają się z dwóch części - tagu otwierającego i zamykającego. Znacznik otwierający jest oznaczony jako pojedynczy znacznik, a znacznik ukośnika> jest używany w znaczniku zamykającym.

Każdy dokument HTML musi zaczynać się znacznikiem i kończyć jego odpowiednikiem, znacznikiem. Oprócz nich, w podany plik zawiera jeszcze trzy pary znaczników, które muszą być obecne w każdym innym dokumencie HTML. Para tagów

I są używane do odwoływania się do wszelkich informacji o samym dokumencie HTML. Tagi i służą do dodawania tytułu, który jest wyświetlany na pasku tytułu przeglądarki. Tagi i są używane do odwoływania się do dowolnego tekstu wyświetlanego na stronie HTML.

Wymagane elementy dokumentu XHTML
W języku XHTML więcej Nowa wersja HTML, do tworzonych stron internetowych wymagany jest jeszcze jeden element - tag. Ma to na celu wskazanie typu aktualnego dokumentu - DTD (definicja typu dokumentu, opis typu dokumentu). Jest to konieczne, aby przeglądarka wiedziała, jak interpretować bieżącą stronę internetową. Znacznik ten pojawia się na górze pliku i identyfikuje bieżący dokument HTML jako zgodny z wymaganiami XHTML (lub zgodny ze specyfikacją XHTML). Jeśli tworzysz dokument zgodny z XHTML, może wyglądać mniej więcej tak:

Moja strona XHTML To jest moja pierwsza strona XHTML.

Tag ma trzy smaki: Ścisły, Przejściowy i Ramowy. W górnej części dokumentu HTML deklarujesz, którego chcesz użyć.

Rygorystyczny Użyj tej odmiany tagu tylko wtedy, gdy masz pewność, że wszyscy użytkownicy Twojej strony internetowej korzystają z nowych przeglądarek internetowych, które potrafią poprawnie interpretować arkusze stylów. Wariant ścisły wygląda tak:

Przejściowy Użyj tej odmiany, jeśli nie wiesz dokładnie, które z nich oprogramowanie będzie używany do przeglądania Twojej strony internetowej.

Zestaw ramek Użyj tej odmiany podczas pracy z ramkami.

Zwróć uwagę na inną różnicę między kodami XHTML a zwykłymi. Dokumenty HTML: Znacznik ma trzy nowe atrybuty: xmlns, xml:lang i lang. Kiedy aplikacje HTML wystarczyło dołączyć znacznik, aby zidentyfikować plik jako dokument HTML, ale w tym przypadku trzeba dodać atrybut xmlns, który łączy dokument z definicją XHTML W3C, która wciąż ewoluuje. Na razie pamiętaj, aby umieścić tag i pełny tag na wszystkich swoich stronach internetowych.

Prawidłowe kodowanie
Same tagi nie wystarczą do stworzenia dobrej strony internetowej. Jeśli nadal możesz popełniać błędy podczas pisania kodu HTML, kody XHTML wymagają ścisłego przestrzegania zasad. Mimo że aktualne wersje większość nowoczesnych przeglądarek jest w stanie poprawnie zinterpretować Twoje kody, nawet jeśli są wpisywane z błędnych tagów, kolejne wersje przeglądarek nie będą się różnić taką pomysłowością. Możesz teraz myśleć o przyszłości i nauczyć się podążać za niektórymi podstawowe zasady pisanie kodów internetowych zgodnych ze standardami XHTML.

Uwzględnij wszystkie wymagane elementy XHTML omówione w tym samouczku w kodach swojej strony internetowej. Możesz stworzyć dla siebie szablon dokumentu XHTML, który początkowo będzie zawierał wszystkie niezbędne znaczniki.

We wszystkich tagach używaj małych liter. Dla przeglądarki nagrań

I są równoważne (choć niekoniecznie muszą być). Używaj małych liter we wszystkich swoich poleceniach, dzięki czemu nie musisz kodować swoich stron internetowych, gdy zmienią się standardy XHTML.

Nigdy nie używaj spacji w nazwach plików. stary systemy komputerowe mam trudności z odczytaniem nazw plików zawierających spacje (jak moja pierwsza strona .htm). Wpisz podkreślenie zamiast spacji (na przykład moja_pierwsza_strona.htm).

Wszystkie wartości atrybutów tagów muszą być ujęte w cudzysłowy podwójne lub pojedyncze. Brak cudzysłowów nie prowadzi do błędów, przeglądarki w wielu przypadkach poprawnie przetwarzają kod bez cudzysłowów, z wyjątkiem tekstu zawierającego spacje. Wtedy przeglądarka przyjmie jako wartość tylko pierwsze słowo. Dlatego zawsze przyzwyczajaj się do cytowania wartości atrybutów tagów.

Jeśli jakikolwiek tag lub jego atrybut został zapisany niepoprawnie, przeglądarka zignoruje taki tag i wyświetli tekst tak, jakby tag nie istniał. Ponownie należy unikać nieznanych tagów, ponieważ kod HTML nie przejdzie walidacji.

Istnieje pewna hierarchia zagnieżdżania tagów. Na przykład tag

Musi być w kontenerze i nigdzie indziej. Aby uniknąć błędów, upewnij się, że tagi są poprawnie umieszczone w kodzie. Jeśli znaczniki są sobie równoważne w hierarchii łączy, ich kolejność nie ma znaczenia. Możesz więc zamienić tagi i nie wpłynie to na końcowy wynik.

Istnieją trzy stany znacznika końcowego: Wymagany, Niewymagany lub Niewymagany. Wymagany znacznik końcowy musi być zawsze obecny, w przeciwnym razie spowoduje to błąd podczas renderowania dokumentu. W przypadku niektórych tagów w ogóle nie ma tagu końcowego. Opcjonalny tag zamykający wskazuje, że programista może go dodać lub pominąć, nie spowoduje to błędu. Zaleca się jednak zamknięcie wszystkich podobne tagi, w tym opcjonalne, dyscyplinuje, tworzy bardziej harmonijny i ścisły kod, który można łatwo modyfikować.

Zastanawiasz się, jak stworzyć stronę HTML? Aby to zrobić, musisz poświęcić kilka godzin, a będziesz wiedział, a pierwszą stronę możesz stworzyć w 5 minut.

HTML oznacza HyperText Język znaczników. W tłumaczeniu oznacza „Hypertext Markup Language”. Ważne jest, aby zrozumieć, że HTML nie jest językiem programowania, ale znacznikiem witryny.

Wszystko nowoczesne przeglądarki w stanie to rozpoznać. Następnie wyświetlają informacje w sposób przyjazny dla użytkownika, zgodnie z intencjami autora.

Ten język używa specjalnych znaczników. Każdy tag ma swoją własną funkcję. Jest ich dużo. Ideałem jest nauczenie się wszystkiego. Ale początkującemu wystarczy podstawowa wiedza.

Podstawy HTML

Zanim utworzysz stronę HTML, musisz wiedzieć, z czego się składa. W tym języku istnieją dwa pojęcia: element i tag.

Tagi początku i końca są używane do wskazania, gdzie ten element zaczyna się i kończy. To wygląda tak.

<открывающий тег>zawartość

Jak widać, jedyną różnicą między tagiem otwierającym a zamykającym jest „/”.

Cały dokument HTML jest zbiorem tych elementów. Istnieć pewne wymagania do struktury dokumentu. Cała zawartość strony musi znajdować się między dwoma tagami. oraz. Kiedy piszesz kod, wyrób sobie nawyk jednoczesnego umieszczania otwierającego i zamykającego znacznika.

Pamiętaj też, że struktura język HTML ma własną hierarchię. W przeciwnym razie nazywa się to zagnieżdżaniem. jest najważniejszy, ponieważ wszyscy inni są w nim.

HTML ma dwa element potomny:

  • ... ;
  • .. .

Blok HEAD zawiera różne informacje serwisowe. Ta informacja nie jest wyświetlana w przeglądarce. Na przykład instrukcje dla programistów, dowolnych programów, robotów i wiele więcej.

Co najważniejsze, nie ma tu treści.

Sekcja BODY określa treść dokumentu, który zostanie wyświetlony użytkownikowi.

Naucz się od razu tworzyć otwarte i zamknięte tagi, ponieważ może być 10 zagnieżdżonych elementów. Ponadto dla wygody zaleca się wcięcie znaczników zagnieżdżonych. Na przykład tak.

Dzieje się tak, aby tagi o jednakowym znaczeniu były na tym samym poziomie, a tagi podrzędne znajdowały się „wewnątrz”. Jest więc znacznie wygodniejszy do percepcji i wyszukiwania potrzebnego fragmentu kodu. W przeciwnym razie możesz się pomylić. Ale aby zaoszczędzić miejsce, body można również wykonać bez wcięć. Odbywa się to tak, aby wszyscy inni nie mieli dodatkowego wcięcia. Wszystko inne powinno być rozdzielone.

Jak stworzyć prostą stronę HTML

Aby napisać kod, potrzebujesz jakiegoś edytora. Jest ich dużo. Notepad++ i Adobe Dreamweaver są popularne. Można również użyć notatnika.

Tak wygląda edytor Notepad ++.

To jest bardzo wygodny edytor a jednak za darmo. Powyższy program Adobe Dreamweaver jest płatny. Różnica między edytorami przeznaczonymi do pisania a notatnikiem polega na tym, że wyróżniane są specjalne znaczniki. Jeśli nie jest podświetlony, napisałeś niepoprawnie.

Aby podświetlenie pasowało do języka, należy je określić w ustawieniach.

Zobaczmy, jak tworzyć Strona HTML w notatniku. Oznacza to, że zakończymy część techniczną, a następnie przejdziemy bezpośrednio do badania tagów.

Jak stworzyć stronę internetową w Notatniku HTML

Najpierw otwórz notatnik.

Następnie wpisz to, co pokazano na poniższym zrzucie ekranu.

Przyzwyczaj się do pisania własnymi rękami, a nie tylko do kopiowania. Kiedy piszesz własnymi rękami, lepiej zapamiętaj całą bazę tagów.

Następnie plik można otworzyć w przeglądarce i podziwiać wynik. Teraz powinieneś być w stanie zrozumieć, jak utworzyć stronę internetową w Notatniku HTML.

Światowe Konsorcjum W3C

Istnieje taka organizacja jak W3C, która opracowuje i wdraża wszystkie standardy dla Internetu. Wszystkie przeglądarki przestrzegają tych standardów i przetwarzają znaczniki stron (kody) zgodnie z tymi zasadami.

Na oficjalnej stronie twórców języka HTML można znaleźć tabelę ze wszystkimi tagami i zasadami ich używania. W tym artykule omówimy najbardziej podstawowe.

Czy możesz pomyśleć, jakie mogą być zasady? Wszystkie opisane tagi mają swoją rekomendację. Jest ich kilka:

  • Opcjonalny tag.
  • Zabroniony.
  • Pusty tag.
  • Przestarzały
  • Zaginiony.

Tagi w HTML

Przed utworzeniem strony HTML musisz dowiedzieć się, co powinno znaleźć się w części serwisowej HEAD.

Obszar HEAD zawiera zarówno wymagane, jak i opcjonalne znaczniki. Tag tytułu jest wymagany. Jest oznaczony nagłówek. Jest przypisany do całego dokumentu. A co widzisz w wynikach wyszukiwarka Google to tag tytułowy.

Przejdźmy do sekcji CIAŁO. Istnieją elementy, które są wyświetlane w przeglądarce, ale nie są wyświetlane. Na przykład komentarze nie są wyświetlane użytkownikowi. Mogą być używane do notatek lub jako wskazówka dla innych pracowników, jeśli pracujesz w zespole.

Są one oznaczone jako

Wszystko pomiędzy, jest w ten sposób traktowany przez program. Pamiętaj, że nie możesz zagnieździć znacznika komentarza w innym znaczniku komentarza. Bo jak tylko otworzysz.

Przykład takiego zagnieżdżenia:

kontynuacja pierwszego komentarza -->

Wynik w przeglądarce będzie następujący

kontynuacja pierwszego komentarza -->

A oto kawałek nie będą widoczne. Drugi tag otwierający