HTML - atrybuty

Widzieliśmy kilka tagów HTML i ich zastosowanie jak tagi nagłówków <h1>, <h2>, tag akapitu <p>i inne tagi. Używaliśmy ich do tej pory w ich najprostszej formie, ale większość tagów HTML może mieć również atrybuty, które są dodatkowymi bitami informacji.

Atrybut jest używany do definiowania właściwości elementu HTML i jest umieszczany wewnątrz znacznika otwierającego elementu. Wszystkie atrybuty składają się z dwóch części - aname i a value

Plik nameto właściwość, którą chcesz ustawić. Na przykład akapit<p> element w przykładzie zawiera atrybut o nazwie align, którego możesz użyć do wskazania wyrównania akapitu na stronie.
Plik valuejest tym, czego chcesz, aby wartość właściwości była ustawiona i zawsze umieszczana w cudzysłowie. Poniższy przykład pokazuje trzy możliwe wartości atrybutu align: left, center i right.

W nazwach i wartościach atrybutów nie jest rozróżniana wielkość liter. Jednak konsorcjum World Wide Web Consortium (W3C) zaleca małe litery / wartości atrybutów w swoich zaleceniach HTML 4.

Przykład

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Align Attribute  Example</title> 
   </head>
	
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>
	
</html>

Spowoduje to wyświetlenie następującego wyniku -

Podstawowe atrybuty

Cztery podstawowe atrybuty, których można użyć w większości elementów HTML (choć nie we wszystkich), to -

Id
Title
Class
Style

Atrybut Id

Plik idatrybut znacznika HTML może służyć do jednoznacznego identyfikowania dowolnego elementu na stronie HTML. Istnieją dwa główne powody, dla których warto użyć atrybutu id na elemencie -

Jeśli element zawiera atrybut id jako unikalny identyfikator, można zidentyfikować tylko ten element i jego zawartość.
Jeśli masz dwa elementy o tej samej nazwie na stronie WWW (lub arkuszu stylów), możesz użyć atrybutu id, aby rozróżnić elementy o tej samej nazwie.

Arkusz stylów omówimy w osobnym tutorialu. Na razie użyjmy atrybutu id, aby rozróżnić dwa elementy akapitu, jak pokazano poniżej.

Example

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

Tytułowy Atrybut

Plik titleatrybut podaje sugerowany tytuł elementu. Składają się natitle atrybut jest podobny do wyjaśnienia dla id atrybut -

Zachowanie tego atrybutu będzie zależało od elementu, który go przenosi, chociaż często jest wyświetlany jako podpowiedź, gdy kursor znajdzie się nad elementem lub podczas ładowania elementu.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

To da następujący wynik -

Teraz spróbuj ustawić kursor na „Przykład znacznika nagłówka z tytułem”, a zobaczysz, że tytuł, którego użyłeś w swoim kodzie, pojawia się jako podpowiedź kursora.

Atrybut klasy

Plik classatrybut służy do kojarzenia elementu z arkuszem stylów i określa klasę elementu. Dowiesz się więcej o używaniu atrybutu class, kiedy nauczysz się kaskadowego arkusza stylów (CSS). Więc na razie możesz tego uniknąć.

Wartością atrybutu może być również lista nazw klas oddzielonych spacjami. Na przykład -

class = "className1 className2 className3"

Atrybut stylu

Atrybut style umożliwia określenie reguł kaskadowego arkusza stylów (CSS) w elemencie.

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
	
</html>

To da następujący wynik -

W tej chwili nie uczymy się CSS, więc kontynuujmy bez zawracania sobie głowy CSS. Tutaj musisz zrozumieć, czym są atrybuty HTML i jak można ich używać podczas formatowania treści.

Atrybuty internacjonalizacji

Istnieją trzy atrybuty internacjonalizacji, które są dostępne dla większości (choć nie wszystkich) elementów XHTML.

dir
lang
xml:lang

Dir Attribute

Plik diratrybut pozwala wskazać przeglądarce kierunek, w którym powinien płynąć tekst. Atrybut dir może przyjąć jedną z dwóch wartości, jak widać w poniższej tabeli -

Wartość	Znaczenie
ltr	Od lewej do prawej (wartość domyślna)
rtl	Od prawej do lewej (w przypadku języków, takich jak hebrajski lub arabski, czytanych od prawej do lewej)

Example

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>
	
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
	
</html>

To da następujący wynik -

Gdy atrybut dir jest używany w tagu <html>, określa sposób prezentacji tekstu w całym dokumencie. Kiedy jest używany w innym tagu, kontroluje kierunek tekstu tylko dla zawartości tego tagu.

Atrybut lang

Plik langatrybut umożliwia wskazanie głównego języka używanego w dokumencie, ale ten atrybut został zachowany w HTML tylko w celu zapewnienia zgodności wstecznej z wcześniejszymi wersjami HTML. Ten atrybut został zastąpiony przezxml:lang atrybut w nowych dokumentach XHTML.

Wartości atrybutu lang to standardowe dwuznakowe kody języka ISO-639. CzekHTML Language Codes: ISO 639 aby uzyskać pełną listę kodów języków.

Example

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

To da następujący wynik -

Atrybut xml: lang

Xml: lang atrybut jest zastąpienie XHTML dla lang atrybutu. Wartość atrybutu xml: lang powinna być kodem kraju zgodnym z ISO-639, jak wspomniano w poprzedniej sekcji.

Atrybuty ogólne

Oto tabela innych atrybutów, które są łatwo używane z wieloma tagami HTML.

Atrybut	Opcje	Funkcjonować
wyrównać	prawo, lewo, środek	Poziomo wyrównuje etykiety
valign	góra, środek, dół	Ustawia tagi w pionie w elemencie HTML.
bgcolor	wartości numeryczne, szesnastkowe, RGB	Umieszcza kolor tła za elementem
tło	URL	Umieszcza obraz tła za elementem
ID	Określony przez użytkownika	Nazywa element do użycia z kaskadowymi arkuszami stylów.
klasa	Określony przez użytkownika	Klasyfikuje element do użycia z kaskadowymi arkuszami stylów.
szerokość	Wartość numeryczna	Określa szerokość tabel, obrazów lub komórek tabeli.
wysokość	Wartość numeryczna	Określa wysokość tabel, obrazów lub komórek tabeli.
tytuł	Określony przez użytkownika	Tytuł „Pop-up” elementów.

Zobaczymy powiązane przykłady, gdy przejdziemy do badania innych tagów HTML. Pełną listę tagów HTML i powiązanych atrybutów można znaleźć w sekcji Lista tagów HTML .