Element HTML

W informatyce , element HTML jest elementem, który wskazuje na strukturę HTML dokumentu . Aż do wersji 4.01 tego formatu włącznie, element HTML jest elementem SGML , który spełnia wymagania co najmniej jednej definicji typu dokumentu HTML (DTD). Te elementy mają dwie właściwości: atrybuty i treść, które są zarówno dozwolone, jak i wymagane zgodnie z odpowiednim HTML DTD (na przykład ścisłe HTML 4.01 DTD). Elementy mogą reprezentować nagłówki, akapity, hiperłącza , listy, opakowane media i różne inne struktury.

Wersja HTML 4 definiuje 91 elementów.

Poziom bloku i poziom tekstu

Większość elementów HTML w treści dokumentu jest klasyfikowanych na poziomie bloku lub tekstu.

(Zobacz „Globalna struktura dokumentu HTML” )

Elementy korzeni

Elementy główne to kontenery zawierające wszystkie inne elementy HTML. Każda strona HTML zawiera elementy główne.

<html></html> Ogranicza dokument HTML (zamiast dokumentu lub klasy XML ). Podstawowy język dokumentu HTML można zdefiniować za pomocą atrybutu lang (np. enDla języka angielskiego). Jedyną dozwoloną treścią jest element <head>i element <body>lub element <head>i element <frameset>. <head></head> Ogranicza sekcję nagłówka dokumentu, która zawiera informacje o stronie internetowej . Element <head>zawiera głównie metadane dokumentu. Istnieje siedem możliwych elementów nagłówka, które zawierają element metarozszerzalnej specyfikacji metadanych. <body></body> Ogranicza treść dokumentu.

Te elementy główne są zorganizowane w następujący sposób:

<html> <head> <!-- Cette section peut contenir n'importe quels [[#Éléments d'en-tête|éléments d'en-tête]] qui peuvent être organisé de n'importe quelle façon et apparaître autant de fois que souhaité, à l'exception de <base> et <title> qui ne peuvent apparaître qu'une seule fois chacun. Le seul élément obligatoire de l'en-tête (délimitée entre les balises <head> et </head>) est : <title>. --> </head> <body> <!-- Ne peut avoir comme enfants directs que des éléments de type ''%block'' en HTML strict, mais admet également des éléments de type ''%inline'' ou du texte anonyme en HTML transitionnel. --> </body> </html>

Elementy nagłówka

<title></title>

Element <title>jest jedynym wymaganym elementem w dokumencie HTML. Chociaż jest to wymagane, aby dokument był ważny, większość popularnych przeglądarek nie zareaguje na jego brak. Jest umieszczony między tagami <head></head>. Zawartość tego elementu będzie wykorzystywana przez przeglądarkę użytkownika do oznaczenia strony (np. Na zakładce lub w ulubionych), a także przez wyszukiwarki. Element <title>może pojawić się tylko raz w dokumencie HTML. Zwykle służy do zwięzłej identyfikacji zawartości strony. Nie jest częścią treści dokumentu, a raczej jego własnością. Teoretycznie nie ma ograniczeń co do liczby znaków, które mogą zawierać <title>, z drugiej strony przeglądarki ogólnie ograniczają wyświetlanie. Podobnie żaden inny tag HTML nie zostanie zinterpretowany.

<base>

Tag <base>służy do wskazania, z której witryny lub katalogu chcesz przejść. W tym celu konieczne jest wskazanie bezwzględnej ścieżki do katalogu docelowego. Na przykład, jeśli jesteś w folderze www i określisz w swoim kodzie ścieżkę do pliku index.html , bez podstawy, zostaniesz przekierowany do ścieżki http://votre-site.com/index.html.
Jeśli jednak wskażesz bazę, na przykład http://your-site.com/pages/, ten sam link będzie prowadzić do http://votre_site.com/pages/index.html.
Składnia: <base href="votre_chemin"/>

<link>

Ten element określa łącza do innych dokumentów, takich jak poprzednie i następne łącza lub wersje alternatywne. Nagłówek HTML może zawierać dowolną liczbę elementów <link>. Element <link>ma atrybuty, ale nie ma treści. Jest powszechnie używany do łączenia z zewnętrznymi arkuszami stylów, przy użyciu następującego sformułowania . <link rel="stylesheet" type="text/css" href="url">

<script></script>

Ten element umożliwia dołączenie kodu skryptu (najczęściej w JavaScript ), często po to, aby strona była interaktywna. W przypadku, gdy przeglądarka odwiedzającego nie rozpoznaje tagu, W3C zaleca skomentowanie kodu:

<script> //<!-- Code du script //--> </script>

<noscript></noscript>

Te tagi umożliwiają wstawianie na stronę elementów, które będą wyświetlane tylko wtedy, gdy przeglądarka nie będzie w stanie interpretować skryptów.

<style></style>

Ten element umożliwia dołączenie informacji o stylu w formacie CSS .

<object></object>

Umożliwia wstawienie obiektu poprzez określenie jego charakteru za pomocą atrybutu type. Może to być aplet Java , aplikacja Flash , wideo, dźwięk ...

<meta>

Ten element może służyć do określenia autora, daty publikacji, daty wygaśnięcia, opisu strony, słów kluczowych i wszelkich innych metadanych, które nie są dostarczane za pośrednictwem innych elementów i atrybutów header ( head). Ze względu na swój ogólny charakter elementy meta określają klucz / wartość  (in) .

W formularzu elementy meta mogą określać nagłówki HTTP, które powinny być wysyłane przed rzeczywistą treścią, gdy strona HTML jest udostępniana z serwera WWW do klienta. Na przykład :

<meta http-equiv="foo" content="bar">

Ten przykład określa, że ​​strona powinna być udostępniana z nagłówkiem HTTP o nazwie „foo”, który ma wartość „bar”.

W ogólnej formie metaelement określa nazwę ( name) i contentpowiązane atrybuty treści ( ), które opisują aspekty strony HTML. Aby uniknąć ewentualnych niejasności, można podać opcjonalny trzeci atrybut w schemecelu określenia struktury semantycznej, która definiuje znaczenie klucza i jego wartość. Na przykład: <meta name="foo" content="bar" scheme="DC">

W tym przykładzie metadane:

Aby uzyskać więcej informacji na temat używania metaelementu w HTML , zobacz specyfikację W3C .

Blok

Wiele elementów HTML zostało zaprojektowanych w celu zmiany struktury semantycznej lub znaczenia dokumentu. Niektóre są na poziomie bloków, ale większość z nich jest na poziomie liniowym i można je uwzględnić w zwykłym tekście głównym.

Ogólne elementy blokowe

<p></p> : Znacznik typu blok , odpowiada tworzeniu nowego akapitu.

Składnia:

<p>Mon texte…</p>

Tag zamykający nie jest wymagany w HTML. Jest to jednak obowiązkowe w xHTML  !

Poziom linii

Wyrażenie ogólne

Wyrażenie kodu komputerowego

Specjalne elementy na poziomie zamówienia

Znajomości

Jedną z najbardziej podstawowych i najważniejszych rzeczy są linki lub hiperłącza.

Kod do wstawienia linku jest prosty:

<a href="Votre lien">Ceci est un lien</a>

Tag otwierający to <a href="">, tag zamykający to </a>. Między cudzysłowami musisz wskazać pełny adres URL linku, z wyjątkiem niektórych przypadków, które zobaczymy później. Pełny adres URL oznacza, że ​​wstawiasz to, co jest wyświetlane w pasku adresu podczas przeglądania danej strony. Bez względu na witrynę, do której chcesz utworzyć link, ta technika zawsze zadziała .

Przykładowy adres URL: http://fr.wikipedia.org/wiki/Hypertext_Markup_Language

Co daje nam w kodzie:

<a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">L’article de Wikipédia sur le html</a>

Opcja targetsłuży do wskazania, czy cel jest otwarty w tym samym oknie, czy w nowym oknie przeglądarki. Przykład:

<a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language" target="_blank">L'article dans une nouvelle fenêtre</a>

Obrazy i obiekty

<img>

Posługiwać się :

<img src="votre_image.jpg">

Znacznik obrazu jest powiązany ze źródłowym adresem URL za pomocą atrybutu „src”. Innymi słowy, wstawiasz ścieżkę do obrazu pomiędzy "", aby zdefiniować obraz do wstawienia.

Możesz modyfikować inne właściwości obrazu za pomocą następujących atrybutów:

 width="150" Ustawia szerokość obrazu na 150 pikseli. height="150" Dopasowuje wysokość obrazu do 150 pikseli. title="Message" Wstawia komunikat, który będzie wyświetlany po pozostawieniu myszy nad obrazem.

Znacznik pikselowy to obraz elektroniczny, zwykle wielkości jednego piksela (1x1), niewidoczny dla odwiedzających witrynę. Może się to wiązać z ciasteczkami na twardym dysku gości i na przykład umożliwiać późniejszą informację, czy dany element został otwarty, w szczególności podczas otrzymywania wiadomości e-mail.

<span>

Ogólny tag tekstowy, który nie ma określonego znaczenia.

Poniższy kod:

La voiture <span style="color:red">rouge</span>.

wyświetli się: Czerwony samochód .

Zwykle jest używany do ozdabiania zdania lub grupy słów. Idzie w parze ze znacznikiem, który jest typu block . <div></div>

Zestaw ramek

System ramek grupuje cztery tagi HTML:

<frameset>

Standardowy HTML 4.0 przestarzały w HTML 5.

Kontener ramek na dokument. Dokument HTML zawiera element bodylub element frameset. Ten ostatni określa następnie zakres okna wyświetlania, w którym pojawią się ramki (elementy frame), które zawiera. Każda ramka zawiera pełnoprawny dokument HTML. Ich układ jest definiowany przez listy oddzielone przecinkami, atrybuty HTML rowsi cols.

Zestawy ramek umożliwiają udostępnianie danych poprzez wykorzystanie elementu OBJECTw elemencie HEADdokumentu zestawu ramek

<frame>

Standardowy HTML 4.0 przestarzały w HTML 5.

Definiuje pojedynczą ramkę lub region pliku frameset. Oddzielny dokument może zostać wyświetlony z framenazwanym atrybutem src.

Możliwe jest również umieszczenie ramki na inne dokumenty HTML. Aby to zrobić, wystarczy przypisać ramce nazwę za pomocą atrybutu „nazwa”, a następnie „autorzy” uznają ją za „cel” linków zdefiniowanych w innych dokumentach. Atrybut TARGET można ustawić dla elementów tworzących łącza (A, LINK), mapy obrazu (AREA) i formularze (FORM).

<noframes>

Standardowy HTML 4.0 przestarzały w HTML 5.

Element noframesumożliwia zdefiniowanie alternatywnej zawartości HTML dla agentów użytkownika, które nie implementują technologii frameworków.

Przykład

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>A simple frameset document</title> </head> <frameset cols="20%, 80%"> <frameset rows="100, 200"> <frame src="contents_of_frame1.html"> <frame src="contents_of_frame2.gif"> </frameset> <frame src="contents_of_frame3.html"> <noframes> <p>This frameset document contains:</p> <ul> <li><a href="contents_of_frame1.html">Some neat contents</a></li> <li><img src="contents_of_frame2.gif" alt="A neat image"></li> <li><a href="contents_of_frame3.html">Some other neat contents</a></li> </ul> </noframes> </frameset> </html>

<iframe>

Standard HTML 4.0 dozwolony w HTML 5.

Wprowadzony w 1997 roku przez Microsoft Internet Explorer , tag iframeoznacza ramkę inline . Wyświetla inny dokument HTML w ramce. Ale w przeciwieństwie do elementu object, może być celem linków zdefiniowanych przez inne elementy i może być wybierany przez agenta użytkownika do drukowania, przeglądania źródła itp.

Zawartość elementu jest używana jako tekst alternatywny w przeglądarkach, które nie obsługują ramek iframe.

Przykład:

<!DOCTYPE html> <html> <head> <title>Document avec une iframe</title> </head> <body> <iframe src="http://www.w3schools.com">Impossible d'afficher l'iframe</iframe> </body> </html>

Witryny Facebook i Twitter używają ramek iframe do bezpośredniego wyświetlania treści z witryn internetowych osób trzecich. Google AdSense używa go do wyświetlania banerów reklamowych w innych witrynach.

Zobacz też

Uwagi i odniesienia

  1. (w) "  Globalna struktura dokumentu HTML  " , na W3C (dostęp 9 lipca 2016 )
  2. (w) Adam Roberts, „  Target (atrybut HTML) - SitePoint  ” w witrynie sitepoint.com ,14 maja 2014(dostęp 4 września 2020 ) .
  3. http://www.w3.org/TR/html401/present/frames.html
  4. Udostępnianie danych między ramkami
  5. http://www.w3.org/TR/html401/present/frames.html#h-16.3

Linki zewnętrzne