Czym jest ZNACZNIK?
Siłą stron internetowych są tak zwane ZNACZNIKI lub TAGI. Są to specjalne kody Które pozwalają w odpowiedni sposób sformatować tekst zawarty w pliku HTML. Istnieją też znaczniki strukturalne, których zadaniem jest podział strony na sekcje, jak również wyznaczyć granicę pomiędzy częścią widoczną dla uzytkownika od tych, w których znajdują się informacje przeznaczone wyłącznie dla przeglądarki (różnego rodzaju ustawienia). Szczegółowy podział wybranych znaczników znajdziesz poniżej.
Podział znaczników ze względu na jego budowę:
Przykład pierwszy to znacznik dwuelementowy. Wszystko co zostanie umieszczone pomiędzy znacznikiem
początkowym, a końcowym otrzyma cechę określoną przez znacznik.
1 - znacznik początkowy
2 - znacznik końcowy
Przykład drugi to znacznik jednoelementowy. Ta grupa znaczników ze względu na swoją funkcję nie wymagają
zamknięcia. 3 - znacznik jednoelementowy
. Dla zachowania konwencji, zamiast znacznika
końcowego, dodaje się w znaczniku elementowym na jego końcu znak ukośnika - /
(slash) 5.
niemal wszystkie znaczniki mogą zawierać w sobie dodatkową właściwość
rozszerzającą jego możliwości 4.
Struktura dokumentu HTML.
Oto lista znaczników niezbędnych, bez których dokument HTML nie będzie prawidłowo wyświetlany
i interpretowany przez przeglądarki oraz wyszukiwarki:
<html> ... </html>
Pomiędzy tymi znacznikami znajdują się wszystkie inne znaczniki oraz treść strony internetowej.
<head> ... </head>
"Głowa" strony internetowej. Pomiędzy tymi znacznikami znajdują się wszystkie ustawienia, których nie widać w
postaci treści strony internetowej.
<body> ... </body>
To ciało dokumentu - pomiędzy tymi znacznikami znajdują się treści i znaczniki, które użytkownik widzi w oknie
przeglądarki.
Znaczniki wewnątrz HEAD.
W części <head> istnieje jeszcze kilka ważnych znaczników:
<title> ... </title>
Znacznik ten odpowiada za wyświetlanie tutułu strony w karcie przeglądarki. Na przykład:
<title> :: mypage :: </title>
<meta>
Ten znacznik dostarcza informacji o sposobie kodowaniu tekstu (język), informuje o słowach kluczowych i opisie
strony dla wyszukiwarek. Może też dostarczać informacje o prawach autorskich, autorze strony i wiele innych.
Ten zapis znacznika <meta> umożliwia prawidłowe wyświetlanie znaków diakrytycznych:
<meta charset="utf-8" />
<link>
ten znacznik zawiera informację o tym, że istnieją dodatkowe pliki które chcemy dołączyć do strony. Te pliki
odpowiadają za dostarczenie informacji o wyglądzie, czcionkach i innych informacjach dostarczanych z zewnątrz.
Ten zapis znacznika <link> pozwala dołączyć plik style.css znajdujący
się w folderze css:<link rel="stylesheet" href="css/style.css" />
ZAPAMIĘTAJ!
Podobnie jak we wszystkich językach programowania, tównież w HTML mozna stosować komentarze.
aby wstawić nowy komentarz należy napisać następujące znaki:<!--od tego momentu wszystko co napiszesz, nie będzie wyświetlane w oknie przeglądarki. aby zakończyć komentarz trzeba napisać-->
<!-- To jest przykładowy komentarz -->ta treść nie będzie widoczna na stronie internetowej.
Znaczniki wewnątrz BODY.
Zdecydowana większość znaczników umieszcza się w części <body>.
Poniżej znajdziesz wybrane znaczniki przydatne podczas tworzenia stron internetowych:
<script> ... </script>
Umożliwia dodanie dodatkowych skryptów w pliku html.
<div> ... </div>
Blok (nazywany też pudełkiem) używany do budowania elementów strony. Niezbędne do tego są style CSS. Sam znacznik
DIV niewiele zmienia.
<span> ... </span>
Znacznik podobny do DIV, ale ten używany jest najczęściej do tekstu (blok liniowy).
<p> ... </p>
Akapit tekstu.
<a> ... </a>
Znacznik pozwalający tworzyć łącza do innych obiektów w sieci (np. obrazy inne pliki lub strony). Jego przykładowe
użycie wygląda w sposób następujący:
To jest link do <a href="https://www.google.pl"> GOOGLE </a>
<img/>
Wyświetlanie obrazów na stronie internetowej. Przykładowe użycie znacznika:
<img src="obrazek.png" />
What is the HTML TAG?
The essence of web pages are so-called TAGS. These are special codes that allow you to specifically format the text included in an HTML file. There are also structural tags, whose task is to divide the page into sections, as well as to mark the border between the parts visible to the user from those containing information intended only for the browser (various website settings). A detailed breakdown of the selected tags can be found below.
Division of tags by its structure:
Example one is a two-element tag. Everything that is placed between the start marker and the
end marker will get the property specified by the marker.
1 - starting html tag
2 - final html tag
Example two is a single element tag. This group of tags, because of their function, do not require an
ending. 3 - single element html tag
. To maintain convention, instead of an end tag,
you add in a one-element tag at its end with a slash. 5.
Almost all tags can
include an additional property that extends its capabilities. 4.
Structure of an HTML document.
Here is a list of required tags, without which an HTML document will not be displayed
correctly and interpreted correctly by web browsers and search engines:
<html> ... </html>
Between these tags are all the other tags and the content of the web page.
<head> ... </head>
"Head" of the website. Between these tags are all the settings that you don't see as web page content.
<body> ... </body>
This is the body of the document - between these tags are the content and markup that the user sees in the
web browser window.
Tags inside HEAD.
inside the <head> tag, there are a few more important tags:
<title> ... </title>
This tag is responsible for displaying the page title in the browser tab . For example:
<title> :: mypage :: </title>
<meta>
This tag provides information about how the text is encoded (language), informs about keywords and description
of the page for search engines. It can also provide information about copyright, page author and much more.
This tag <meta> writing enables correctly displayed diacritical marks:
<meta charset="utf-8" />
<link>
this tag contains information that there are additional files you want to attach to the page. These files
are responsible for providing information about the design, fonts and other outside information.
This tag <link> writing allows you to attach a file style.css
located in the cssfolder :
<link rel="stylesheet" href="css/style.css" />
REMEMBER!
As in all programming languages, HTML can use comments.
To insert a new comment, type the following characters:<!--From now on, everything you write will not be displayed in the web browser window.-->
<!-- This is a sample comment -->this content will not be visible on the website.
Tags inside BODY tag.
The vast majority of tags are placed between tags <body>.
Below you will find a selection of tags useful when creating web pages:
<script> ... </script>
Allows you to embed additional scripts in an html file.
<div> ... </div>
A block (also called a box) used to build page elements. CSS styles are necessary for this. The
DIV tag alone does not change much in the layout of a web page.
<span> ... </span>
A tag similar to DIV, but this one is mostly used for text (line block).
<p> ... </p>
Text paragraph.
<a> ... </a>
A tag that allows you to create links to other objects on the web (such as images, other files, or pages).
An example of its use is as follows:
This is a link to <a href="https://www.google.com"> GOOGLE </a>
<img/>
Displaying images on a web page. Example of tag usage:
<img src="image.png" />