Tag nagłówka HTML
W tym podręczniku omówimy „”Tag. A więc zacznijmy!
Tag nagłówka HTML
HTML zapewnia „„Tag, który służy do zdefiniowania tytułu i nagłówka powiązanej treści na stronie internetowej. Możesz także dodać nagłówek nagłówka, akapitu, logo, obrazu i linków.
Składnia
Składnia znacznika nagłówka to:
Elementy HTML
Elementy, które chcesz dołączyć w nagłówku, muszą zostać dodane pomiędzy znacznikami nagłówka otwierającego i zamykania.
Przejdźmy do przykładu, w którym nauczymy się tworzyć nagłówek.
Przykład: jak utworzyć nagłówek?
W pliku HTML najpierw użyjemy „„Tag, aby utworzyć nagłówek. Następnie dodaj nagłówek „”I cztery linki za pomocą„”Tag wewnątrz„”Tag. W "Href", dodać "#”I ustaw link strony, którą chcesz dodać. Następnie przypisz nazwy linków jako „Dom”,„O”,„Skontaktuj się z nami", I "Polityka prywatności". Te nazwy linków pojawią się na nagłówku strony internetowej.
Html
Linuxhint
Dom
O
Skontaktuj się z nami
Polityka prywatności
Na poniższym obrazie widać, że nagłówek jest tworzony:
Możesz także stylizować nagłówek za pomocą CSS. Oto metoda, aby to zrobić.
W CSS użyjemy „nagłówek„Aby uzyskać dostęp do nagłówka utworzonego w HTML. Tutaj użyj „tekst-align„Wartość nieruchomości jako„Centrum„Aby wyrównać nagłówek i linki na środku strony. Ustawimy również kolor tła nagłówka jako „RGB (80, 80, 79)”I ustaw kolor nagłówka jako„RGB (206, 158, 34)". Dostosujemy rozmiar czcionki do „30px". Następnie ustaw wyściółkę jako „30px".
CSS
nagłówekText-Align: Center;
Tło: RGB (80, 80, 79);
Kolor: RGB (206, 158, 34);
Rozmiar czcionki: 30px;
Wyściółka: 30px;
Poniższy obraz pokazuje, że nagłówek jest skutecznie stylizowany:
Teraz stylizujemy linki.
Linki do stylu
Aby to zrobić, najpierw użyj „A„Aby uzyskać dostęp do linków. Tutaj ustawimy wartość „dekoracja tekstu„Nieruchomość jako„nic„Aby wyczyścić domyślną dekorację linków. Następnie ustaw margines-lew jako „40px”, Margines-prawy jako„30px”, I margines jako„50px". Ostatecznie ustawimy kolor linków jako „RGB (206, 158, 34)”:
ADekoracja tekstu: Brak;
margines lewica: 40px;
margines-prawy: 30px;
margines: 50px;
Kolor: RGB (206, 158, 34)
Oto wynik, który pokazuje, że nagłówek jest skutecznie stylizowany:
Nagłówek z logo
Możesz także dodać logo do nagłówka strony internetowej. W tym celu musisz dodać obraz logo w pliku HTML i ustawić go na nagłówku za pomocą CSS.
Przykład
Tutaj utworzymy div wewnątrz znacznika nagłówka i nazwiemy klasę div jako „obraz". Pozostała część nagłówka jest taka sama jak poprzedni przykład:
…
W CSS użyjemy „.obraz”Aby uzyskać dostęp do Div i dodać obraz logo za pomocą„tło" nieruchomość. W "URL ()”, Dodamy ścieżkę obrazu jako„URL (logo.PNG)". Tutaj użyjemy „bez powtórki„Aby uniknąć powtórzenia obrazu. Ostatecznie ustawimy szerokość logo jako „250px”I wysokość jako„100px”:
.obrazTło: URL (logo.png) bez powtórzenia;
szerokość: 250px;
Wysokość: 100px;
Za pomocą powyższego kodu uzyskano następujące dane wyjściowe i można zauważyć, że logo jest dodawane w lewym górnym rogu nagłówka:
Nagłówek z obrazem
Możliwe jest również utworzenie nagłówka z obrazem tła. Stwórzmy to.
Przykład
Najpierw dodamy obraz w pliku HTML, taki sam jak poprzedni przykład, a następnie dodamy ścieżkę obrazu w adresie URL () jako „obraz.jpg”I użyj„bez powtórki„Wartość, aby uniknąć powtórzenia obrazu. Następnie użyj właściwości pozycji tła, aby ustawić pozycję obrazu jako „Centrum”I właściwość wielkości tła jako„okładka„Aby ustawić obraz w całym nagłówku. Na koniec ustaw wysokość obrazu jako „250px”:
.obrazTło: URL (obraz.jpg) bez powtórzenia;
Upozycja tła: Center;
Rozmiar tła: okładka;
Wysokość: 250px;
Oto wynik, który pokazuje, że obraz jest dodawany w nagłówku:
Otóż to! Wyjaśniliśmy szczegółowo tag nagłówka.
Wniosek
W HTML „The””Tag służy do tworzenia nagłówka stron internetowych. W części nagłówka strony internetowej można dodać nagłówek, krótki akapit, logo, obraz tła i pasek nawigacyjny. W tym podręczniku omówiliśmy tag i podaliśmy przykład, tworząc i stylizując nagłówek strony internetowej.