Wynaleziono wiele języków, ale język HTMLnależy do szeregu specjalnych i najbardziej poszukiwanych. Z nim wiąże się wiele innych kluczowych inicjatyw programistycznych. Dużo staje się dostępne, gdy wiedza o języku znaczników jest obecna w umyśle programisty - HyperText Markup Language (HTML).

przykładowa strona html

W istocie, w HTML nie ma nic skomplikowanego i przezza kilka minut każdy, najbardziej oddalony od programisty i osoby internetowej, utworzy stronę HTML w notatniku. Przykładem, który zasługuje na uwagę, jest prostota, która jest naprawdę dostępna dla wszystkich.

Ogólny opis

Plik HTML to jedna strona strony, choć można to argumentować, ale fakt, że jeden plik jest jedną stroną, jest zrozumiały na początek.

Plik HTML zaczyna się od nagłówka DOCTYPE w plikuco oznacza, że ​​typ tego pliku to HTML. Wszystkie elementy strony (znaczniki) są wskazane w nawiasach trójkątnych. Każda para ("<" i ">") zawiera jeden tag HTML. Zazwyczaj tagi HTML są sparowane, czyli "/ tag" dla każdego "tagu". Oba są zamknięte w nawiasach ostrych. Istnieją pojedyncze znaczniki, z których najpopularniejszym "br /" jest przejście do następnej linii.

Największym tagiem w pliku jest sam HTML, wktóry zawiera tylko dwa tagi: HEAD i BODY. W pierwszym są różne opisy, określone są linki do innych stron, mogą być obecne skrypty PHP i JavaScript. W drugim zapisywana jest zawartość strony. Również w postaci tagów i skryptów.

Prosta strona HTML

Przykład tworzenia takiej strony znajduje się poniżej w artykule. Rozważ to ostrożnie.

Przykład autora nie jest obrazem

Sekcja HEAD

Głównym celem znacznika HEAD jest ogólny opis strony i typowe skrypty, chociaż ta ostatnia jest stosunkowo względną koncepcją. Zwykle ważne są tu tylko dwie rzeczy:

  • słowa kluczowe i opis strony;
  • linki do innych plików (* .css i * .js).

Aby wyświetlić zawartość strony, zawartość tej sekcji ma tylko znaczenie pośrednie, ponieważ wskazuje: gdzieś w innych plikach istnieją reguły CSS dla znaczników i skryptów innych języków.

Strona HTML ma tytuł (TITLE), któryJest wyświetlany, gdy użytkownik przynosi mysz do karty, na której jest otwarta strona. Jest to ważna kwestia, ponieważ sprawia, że ​​strona jest bardziej czytelna, łatwiejsza do powiedzenia, podpisana czytelnym tekstem.

przykład strony internetowej html

Znaczniki META są ważne w ogólnym programowaniu internetowym, ale kiedy chcesz utworzyć stronę HTML w notatniku, przykład niechciany jest do bałaganu z nadmiarowymi konstrukcjami.

Łącza LINK i SCRIPTuwaga. Pierwsza wskazuje na miejsce, w którym znajduje się arkusz stylów CSS, a druga na lokalizację pliku kodu JavaScript. Może być wiele takich odniesień.

Skrypty powinny być podchwycone, kiedy wiedzaHTML zostanie wzmocniony, następnie należy natychmiast zwrócić uwagę na kaskadowe arkusze stylów. W plikach CSS znajdują się w szczególności reguły projektowania znaczników HTML.

Sekcja BODY

Właściwie jest to przykład strony HTMLsekcja BODY. To tutaj zawiera wszystkie informacje, całą zawartość strony witryny. Wszystkie informacje prezentowane są w postaci znaczników i skryptów, na przykład wstawiania kodu JavaScript lub fragmentów programów PHP.

Ważne jest, aby zrozumieć, że przykład strony internetowej HTML wprzeglądarka i ten sam przykład w edytorze tekstu, w szczególności w Notatniku, to nie to samo. W pierwszym przypadku mamy gotowy tekst HTML, w którym wykonywane są wszystkie skrypty. Na przykład PHP wykonało swoją część i wygenerowało niezbędne znaczniki zamiast kodu w odpowiednich miejscach. JavaScript spełnił również swoją misję, chociaż wciąż jest o tym mowa.

prosta strona przykładowa HTML

HTML to tag, a nie skrypt. Ostatecznie przeglądarka wyświetla tylko zawartość strony, tylko jej tagi. Tam nie ma kodu PHP.

JavaScript jest w specjalnej pozycji, jego opieką - służyć stronę, a nie tylko w czasie rozruchu (przeciążenie), ale w chwilach, gdy strona jest w przeglądarce odwiedzającego oraz badaniach.

Prosty przykład kodu strony HTML (tylko sekcja BODY) znajduje się poniżej.

Przykład autora nie jest obrazem

W przeglądarce użytkownika wygląda to tak, jak pokazano poniżej.

Przykład autora nie jest obrazem

Kod nie określał, jak powinien wyglądaćelementy wyświetlane przez przeglądarkę. Wszystkie widoczne projekty są w regułach CSS. W tym przypadku w pliku Mcss / scPhpWordRW.css, do którego się odwołano (patrz pierwszy przykład strony HTML).

W przeciwieństwie do HTML, motyw CSS jest prostszybardzo przystępne reguły i ich liczba jest niewielka, gdy przykład tworzenia strony HTML nie wymaga niczego poza notatnikiem. Wszystko jest bardzo łatwo dostępne do natychmiastowego opanowania:

Przykład autora nie jest obrazem

Pokazuje to, w jaki sposób tag jest po prostu opisanyscLogo_vDoc, a ten opis jest w normalnym stanie tagu wyświetla obraz vDoc-logo.png, a gdy wskaźnik myszy znajduje się nad nim - wyświetlane vDoc-logo-h.png.

HTML Opis Struktura

Język nie implikuje żadnej struktury ikoncepcja składni jest bardzo względna. Nie ma zmiennych, ale jest wiele możliwości. Podstawową podstawą hipertekstu jest to, że istnieje element (tag), który koniecznie ma nazwę.

Nazwa przypadku para tag, składający się z imion (Zmienna) i wsporników kątowych ( «<» + tagName + «>»), jeśli mówimy o początku znacznika i «</» + tagName + «>», jeśli rejestrowane jego koniec.

Przykład strony HTML opisującej atrybuty znajduje się poniżej w tekście.

Przykład autora nie jest obrazem

Znacznik może mieć atrybuty, a następnie są one umieszczaneprzez spację po nazwie znacznika do nawiasu zamykającego ">". Atrybuty, jeśli mają znacznik, są zapisywane tylko na początku tagu. Treść tagu znajduje się między początkiem tagu a jego końcem.

Ogólna zawartość opisów HTML

HTML pozwala na opisywanie małych i wielkich literelementy. Pierwszy zajmuje pewien obszar w oknie przeglądarki, może być umieszczony absolutnie, czyli we właściwym miejscu w obszarze wyświetlania strony HTML i mieć określony rozmiar.

przykład tworzenia strony html

Elementy zamówienia są generalnie wyświetlanejeden wątek, czyli jak wskazano w pliku strony i są wyświetlane. Wyświetlenie całkowitego przepływu może wpłynąć na ładowanie strony. Umieszczenie, widoczność i inne właściwości elementów bloków mogą w każdej chwili zostać zmienione za pomocą kodu JavaScript.

Oprócz prostych elementów, HTML oferuje opis tabel i formularzy. Te elementy są bardzo poszukiwane w "budowaniu na co dzień".

Opis tabeli: znaczniki TABELA, TR, TD

Używając tagu TABLE, możesz utworzyć tabelę,wskazać określoną liczbę wierszy TR i w każdym wierszu pewną liczbę komórek TD. W przeciwieństwie do zwykłego stołu organizacji, ze względu na charakter HTML znaczników organizacji tabelarycznej ogranicza się do tej deklaracji, bo jeśli deweloper chce mieć prostokątny stół, w którym liczba kolumn we wszystkich rzędach taka sama, to musi wynikać, że dla siebie.

przykładowa strona HTML HTML

Podstawowa pozycja HTML: rób wszystko, co jest wskazane, ale nic, co nie jest zrozumiane. W niektórych przypadkach liczba kolumn w każdym wierszu tabeli nie jest tak ważna, ale jeśli chcesz połączyć komórki w pionie lub poziomie, musisz bardzo dokładnie policzyć wszystko.

Przykład strony HTML opisującej prostą tabelę jest wyraźnie pokazany w artykule.

Przykład autora nie jest obrazem

Oto tabela w rozmiarze trzech rzędów na trzykolumny, aw pierwszym wierszu zamiast tagu TD użyto tagu TH - nagłówka kolumny. Nie ma specjalnych różnic między tymi dwoma znacznikami, ale można użyć pierwszego, aby odróżnić pierwszy wiersz tabeli, aw CSS do TH można dołączyć własny styl, który odróżnia go od innych TD.

Opis formularza: FORMULARZ, tagi INPUT

Formularze są najbardziej pożądaną częścią tagów HTML. Korzystając z formularzy, możesz przesyłać informacje. W rzeczywistości sama strona jest wynikiem informacji, ale forma jest jej wprowadzeniem.

Przykład strony HTML z prostym opisem formy:

Przykład autora nie jest obrazem

Korzystanie z formularzy jest znacznie większe, aległówne możliwości są następujące. Możesz określić pola wejściowe, przypisać im projekt i procedury obsługi, aby przeanalizować dane wprowadzane przez użytkownika. Możesz określić ukryte pola i wysłać informacje o stronie ze strony. Możesz wyznaczyć przyciski do przesyłania informacji, klikając, które inicjuje transfer informacji.

Korzystanie z HTML

Znajomość języka hipertekstu jest nieodzownym warunkiempracować nad dowolną specjalizacją z zakresu programowania internetowego, ale jeśli potrzebujesz pisać programy w PHP lub JavaScript, musisz znać HTML + CSS doskonale.

Język PHP został oznaczony w poprzednim przykładzie. PHP działa na serwerze, ponieważ strona z tym formularzem została przesłana z serwera do przeglądarki z wypełnionymi polami. W szczególności funkcja TestOnBlur, wspomniana w znaczniku INPUT (procedura obsługi zdarzeń onblur), otrzymała wszystkie parametry w postaci pól tekstowych.

tworzenie strony html w przykładowym notatniku

Przeglądarka uruchamia JavaScript i dodziałało poprawnie wysłać dane z powrotem do serwera klucza, który jest projektowanie :. onclick = jQuery ( „# do”) val ( „koszyk”), trzeba mieć pomysł, nie tylko co do jQuery, ale co # Aby Val , koszyk. Dokładniej mówiąc, konieczne jest, aby znać podstawowe tagi HTML oraz ogólne zasady mające zastosowanie do nich style CSS.

To wystarczy, aby szybko podnieść swoje kwalifikacje do dowolnej specjalizacji w dziedzinie programowania internetowego.

</ p>