Element
(z angielskiego ciało- body) przeznaczony jest do przechowywania treści strony internetowej (treści) wyświetlanej w oknie przeglądarki. Informacje, które powinny znaleźć się w dokumencie, powinny znajdować się wewnątrz kontenera . Informacje te obejmują tekst, obrazy, tagi, kod JavaScript itp.używany również do określania kolorów łączy i tekstu na stronie internetowej. Praktyka ta jest źle widziana w HTML-u i zamiast tego zaleca się używanie stylów do określenia schematu kolorów, stosując je do selektora treści.Często
służy do umieszczenia procedury obsługi zdarzeń, takiej jak onload, która jest uruchamiana po zakończeniu ładowania dokumentu do bieżącego okna lub ramki.Tagi otwierające i zamykające
nie są wymagane na stronie internetowej, ale uważa się za dobry styl użycie ich do zdefiniowania początku i końca dokumentu HTML.Składnia
...Zamykanie tagu
Nie wymagane.
Atrybuty
Przykład
Już Arystoteles w swojej „Polityce” stwierdził, że muzyka oddziałując na człowieka, przynosi „swego rodzaju oczyszczenie, czyli ulgę związaną z przyjemnością”.
Wynik bieżącego przykładu pokazano na ryc. 1. Podczas korzystania ze zdarzenia onload elementu
Wykonywany jest skrypt napisany w JavaScript, w tym przypadku wyświetla komunikat o załadowaniu dokumentu.Ryż. 1. Wyskakujące okienko w dokumencie
Specyfikacja
Każda specyfikacja przechodzi przez kilka etapów zatwierdzania.
- Zalecenie – specyfikacja została zatwierdzona przez W3C i jest zalecana jako standard.
- Rekomendacja kandydata ( Możliwa rekomendacja) - grupa odpowiedzialna za standard jest usatysfakcjonowana, że spełnia swoje cele, ale potrzebuje pomocy społeczności programistów we wdrożeniu standardu.
- Proponowane zalecenie Sugerowane zalecenie) - na tym etapie dokument jest przekazywany Radzie Doradczej W3C do ostatecznego zatwierdzenia.
- Wersja robocza — bardziej dojrzała wersja wersji roboczej, która została omówiona i poprawiona do przeglądu społeczności.
- Szkic redaktora ( Projekt redakcyjny) - wersja robocza normy po wprowadzeniu zmian przez redakcję projektu.
- Projekt ( Projekt specyfikacji) - pierwsza wersja robocza normy.
Wyróżnia się żywy standard HTML (Living) - nie trzyma się on tradycyjnej numeracji wersji, gdyż jest stale rozwijany i regularnie aktualizowany.
Etykietka (debel) przeznaczony jest do przechowywania zawartości strony internetowej (treści) wyświetlanej w oknie przeglądarki. Informacje, które powinny wyświetlić się w dokumencie, powinny znajdować się wewnątrz kontenera BODY. Informacje te obejmują tekst, obrazy, tagi, kod JavaScript itp.
Etykietka używany również do określania kolorów łączy i tekstu na stronie internetowej. Ta praktyka jest przestarzała w HTML 4 i zamiast tego zaleca się używanie stylów do określenia schematu kolorów, stosując je do selektora . Jednak większość opcji jest nadal obsługiwana w różnych przeglądarkach.
Często tag służy do umieszczenia procedury obsługi zdarzeń, takiej jak onLoad, która jest uruchamiana po zakończeniu ładowania dokumentu do bieżącego okna lub ramki.
Otwierające i zamykające znaczniki BODY na stronie internetowej są opcjonalne, ale dobrym pomysłem jest użycie ich do zdefiniowania początku i końca dokumentu HTML.
Składnia
...
Zamykanie tagu
Wymagany.
Opcje
alink - ustawia kolor aktywnego łącza.
tło - ustawia obraz tła na stronie internetowej.
bgcolor - kolor tła strony internetowej.
bgproperties - określa, czy tło ma być przewijane razem z tekstem, czy nie.
Bottommargin - wcięcie od dolnej krawędzi okna przeglądarki do treści.
leftmargin - poziomy margines od krawędzi okna przeglądarki do treści.
link - kolor linku.
scroll - ustawia, czy wyświetlać paski przewijania, czy nie.
tekst - kolor tekstu w dokumencie.
topmargin - wcięcie od górnej krawędzi okna przeglądarki do treści.
vlink - kolor odwiedzanych linków.
Przykład 1: Użycie tagu BODY
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Opis parametrów znacznika BODY
parametr ALINK
Opis
Ustawia kolor aktywnego łącza. Bieżący kolor łącza zmienia się na kolor aktywny w momencie kliknięcia łącza kursorem myszy lub wybrania go za pomocą klawiatury.
Składnia
Argumenty
Wartość koloru można ustawić na dwa sposoby.
1. Według nazwy
Przeglądarki obsługują niektóre kolory według nazwy.
2. Według wartości szesnastkowej
Do określenia kolorów używane są liczby szesnastkowe. System szesnastkowy w odróżnieniu od dziesiętnego opiera się jak sama nazwa wskazuje na liczbie 16. Liczby będą następujące: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Liczby od 10 do 15 zastępuje się literami łacińskimi. Liczby większe niż 15 w systemie szesnastkowym powstają poprzez połączenie dwóch liczb w jedną. Na przykład liczba 255 w systemie dziesiętnym odpowiada liczbie FF w formacie szesnastkowym. Aby uniknąć nieporozumień przy określaniu systemu liczbowego, przed liczbą szesnastkową umieszcza się symbol skrótu #, na przykład #666999. Każdy z trzech kolorów – czerwony, zielony i niebieski – może przyjmować wartości od 00 do FF. Zatem symbol koloru jest podzielony na trzy składowe #rrggbb, gdzie pierwsze dwa symbole wskazują czerwoną składową koloru, dwa środkowe - zielone, a dwa ostatnie - niebieskie.
Domyślna wartość
Pasuje do koloru łącza.
...
Parametr TŁO
Opis
Określa obraz, który ma być użyty jako tapeta. W przeciwieństwie do zwykłych obrazów tło nie ma ustawionej szerokości ani wysokości i jest zawsze wyświetlane w pełnym rozmiarze w 100%. Jeśli obraz jest mniejszy niż okno przeglądarki, obraz jest powtarzany poziomo w prawo i w dół, układając się jak mozaika. Z tego powodu na styku obrazów tła mogą wystąpić widoczne różnice, zauważalne dla osób odwiedzających witrynę. Wybierając obraz tła, upewnij się, że kontrast między nim a tekstem na stronie internetowej jest wystarczający. Animowane GIF-y mogą służyć jako tło, ale będą odwracać uwagę czytelnika.
Składnia
Argumenty
Dowolny prawidłowy adres obrazu — możesz użyć ścieżki względnej lub bezwzględnej.
Domyślna wartość
NIE.
Przykład 3: Ustawianie tapety na stronie internetowej
...
Parametr BGCOLOR
Opis
Ustawia kolor tła strony internetowej. Możesz użyć tego parametru w połączeniu z tłem, wybierając kolor tła zbliżony do obrazu tła
Składnia
Argumenty
Zobacz parametr ALINK.
Domyślna wartość
Zależy od przeglądarki i jej wersji, ale kolor tła jest zazwyczaj biały.
Przykład 4: Ustawianie koloru tła strony internetowej
...
Parametr BGPROPERTIES
Opis
Domyślnie obraz tła przewija się wraz z zawartością strony internetowej. Za pomocą parametru bgproperties możesz ustawić tło w jednym miejscu i w ten sposób wymusić przewijanie tylko zawartości. Ta jakość strony internetowej jest rzadko stosowana w witrynach internetowych, dlatego może wydawać się użytkownikom dziwna i nietypowa.
Składnia
Argumenty
Jest tylko jeden stały parametr, który ustala tło. Jeśli chcesz usunąć tę funkcję, usuń parametr bgproperties ze znacznika BODY lub ustaw go na pustą wartość - „”.
Domyślna wartość
NIE.
Przykład 5: Naprawianie tła
...
Notatka
- Nie wszystkie przeglądarki obsługują to ustawienie, na przykład Netscape je ignoruje.
- Zauważono, że podczas ustawiania obrazu tła na stronie internetowej za pomocą stylów parametr bgproperies przestaje działać.
Parametr LEFTMARGIN
Opis
Określa ilość miejsca od lewej i prawej krawędzi okna przeglądarki do zawartości strony internetowej.
Składnia
Argumenty
Dodatnia liczba całkowita określająca przesunięcie w pikselach.
Domyślna wartość
10 pikseli dla systemu Windows i 8 pikseli dla komputerów Macintosh.
Przykład 6: Zmiana lewego marginesu
...
Notatka
- Przeglądarka Netscape nie rozumie parametru leftmargin; do ustawiania marginesów używa parametrów margineswidth — marginesy poziome i margineswysokość — marginesy pionowe.
- Aby ustawić marginesy od prawej, dolnej i górnej krawędzi, użyj odpowiednio parametrów Rightmargin, Bottommargin i Topmargin.
Parametr LINK
Opis
Ustawia kolor nieodwiedzonych linków.
Składnia
Argumenty
Zobacz parametr ALINK.
Domyślna wartość
#0000FF
Przykład 7: Ustawianie koloru linków
...
PRZEWIŃ parametr
Opis
Parametr scroll kontroluje obecność pasków przewijania w oknie przeglądarki, gdy zawartość strony internetowej przekracza rozmiar bieżącego okna. To ustawienie działa tylko w przeglądarce Internet Explorer.
Składnia
Argumenty
tak - wyświetla paski przewijania.
nie - zapobiega wyświetlaniu pasków przewijania w oknie.
Domyślna wartość
Tak
Przykład 8: Ukrywanie paska przewijania
...
Parametr TEKST
Opis
Ustawia domyślny kolor tekstu używanego na stronie internetowej. Kolory poszczególnych elementów można łatwo zmieniać za pomocą stylów.
Składnia
Argumenty
Zobacz parametr ALINK.
Domyślna wartość
#000000
Przykład 9: Zmiana koloru tekstu
...
Parametr VLINK
Opis
Określa kolor linków odwiedzanych, czyli takich, które użytkownik już „kliknął”.
Składnia
Argumenty
Zobacz parametr ALINK.
Domyślna wartość
#551a8b (Nawigator 4); #800080 (Internet Explorer Windows); #006010 (Internet Explorer Macintosh).
Przykład 10: Ustawienie koloru odwiedzanych linków
...
Kolor tekstu
Kolor tła
Zdjęcie w tle
Kolor łącza
Wyściółka wokół treści
Ćwiczenia
Jak już wiesz, pomiędzy tagiem otwierającym i znacznik zamykający Umieszczana jest treść strony lub sama treść strony. Nazywa się to również słowem treść(z treści angielskiej - treść). Opcje tagów określić właściwości treści jako całości. W tej lekcji przyjrzymy się niektórym z nich.
Kolor tekstu
Kolor tekstu całego dokumentu jest określony przez parametr tekst. Przypisuje się mu nazwę koloru lub wartość koloru w formacie szesnastkowym, podobnie jak parametrowi kolor etykietka (zobacz Lekcję 2. Formatowanie testu):
LubUżycie tego przykładu spowoduje, że cały tekst na stronie będzie czerwony.
Parametr tekst jest opcjonalne. Jeśli go pominiesz, tekst na stronie będzie domyślnie czarny. Prawdopodobnie już to widziałeś, wykonując poprzednie ćwiczenia. :)
Kolor tła
Kolor tła strony jest określony przez parametr kolor. Akceptuje nazwę koloru lub wartość koloru w formacie szesnastkowym, podobnie jak parametr tekst.
LubW tym przykładzie tło strony będzie czerwone.
Parametr kolor jest opcjonalne. Jeżeli go pominiesz, domyślnym tłem strony będzie białe. To, co już widziałeś, wykonując poprzednie ćwiczenia. :)
Zdjęcie w tle
Korzystanie z parametru tło Możesz upewnić się, że strona nie ma zwykłego tła, ale tłem jest obraz. Dla tego parametru tło musisz przypisać ścieżkę do obrazu, który chcesz ustawić jako tło, a także parametr źródło etykietka
(Zobacz Lekcję 5. Obrazy):
W ten sposób możesz na przykład ozdobić tło strony jakimś wzorem. Nie należy jednak nadużywać tej możliwości i tworzyć dużych obrazów w tle, aby nie obciążać strony zbyt mocno.
Przykładowo mamy taki fragment wzoru:
Jeśli zrobimy z niego obraz tła, otrzymamy stronę z tłem takim jak to:
Parametr tło jest również opcjonalne. Jeżeli go pominiesz, domyślnym tłem strony będzie białe.
Kolor łącza
Istnieją 3 parametry tagu umożliwiające ustawienie koloru linków ciało:
Do parametrów tych przypisana jest nazwa koloru lub jego wartość szesnastkowa, podobnie jak inne parametry odpowiedzialne za kolor czegoś.
Tak to będzie wyglądać na stronie (aby zobaczyć wszystkie stany linku, zapamiętać jaki był pierwotnie, naciśnij i przytrzymaj, zobacz jak się stał, a na koniec zwolnij, wróć na tę stronę i zobacz, jaki ma kolor ):
Parametry te są opcjonalne. Jeśli je pominiesz, kolory linków przyjmą wartości domyślne (odpowiednio niebieski, czerwony, fioletowy).
Wyściółka wokół treści
Jeśli chcesz, aby zawartość strony odsunęła się od krawędzi okna przeglądarki o określoną odległość, w tym przypadku tag ciało są 4 parametry:
lewy margines- wcięcie od lewej krawędzi;
prawy margines- wcięcie od prawej krawędzi;
Górny margines- wcięcie od górnej krawędzi;
margines dolny- wcięcie od dolnej krawędzi.
Parametry te przyjmują wartości w pikselach. Nie są one wymagane i możesz używać ich wszystkich na raz lub osobno. Na przykład możesz wciąć tylko lewą i prawą stronę lub tylko górę i dół itp.:
LubCześć chłopaki!
Dzisiaj postanowiłem poruszyć temat, który nigdy nie przestanie być aktualny wśród młodych twórców stron internetowych.
Zawsze istnieje potrzeba dostosowania witryn po ich utworzeniu. Niektóre ustawienia wykonuje się poprzez edycję plików zainstalowanego szablonu motywu. Na przykład musisz wstawić kod wyświetlający podobne wpisy. Ale gdzie to wstawić?
Bardzo często nowicjusze zadają takie pytania. Niepokoją ich także inne podobne problemy, których rozwiązanie jest w zasadzie dokładnie takie samo. Dodatkowo w przyszłych artykułach będę często uciekał się do wstawiania kodów w różne miejsca szablonu. Dlatego ten materiał jest bardziej aktualny niż kiedykolwiek.
W tym artykule pokażę Ci, jak bardzo łatwo możesz zidentyfikować miejsce w szablonie WordPress, w którym musisz wstawić dowolny kod. Rozważę również inne ważne punkty, które mogą Cię niepokoić na początkowym etapie.
Zacznijmy od samej góry i przyjrzyjmy się plikom, które być może będziesz musiał edytować, jeśli chcesz wstawiać kody ręcznie, zamiast korzystać z wtyczek, ponieważ istnieje taka opcja. Niezbyt mi się to podoba, ale dla leniwych opiszę takie wtyczki w kolejnych artykułach.
Na sam początek prowadzę lekcję wideo, gdyż bez niej zrozumienie materiału przedstawionego w formie tekstowej poniżej będzie trudne.
Teraz wyjaśnię wszystko szczegółowo w formacie tekstowym.
Pliki odpowiedzialne za wyświetlanie każdego typu strony
Jeśli czytałeś wiele artykułów na innych blogach na temat implementacji niektórych funkcji za pomocą kodów (skryptów), to jestem na 100% pewien, że spotkałeś się z takimi zwrotami jak:
- Wklej ten kod do pliku odpowiedzialnego za wyświetlenie strony głównej;
- Wklej ten kod do pliku odpowiedzialnego za wysyłanie rekordów i innych.
Istnieje wiele plików, do których może być konieczne wstawienie kodów. Ale co to za pliki? Wszystko jest bardzo proste.
- Dane wyjściowe strony głównej - indeks.php;
- Wyjście rekordów - plik single.php;
- Dane wyjściowe strony - plik page.php;
- Wyjście archiwów i kategorii - Archive.php;
- Dane wyjściowe stopki - footer.php;
- Wyniki strony wyszukiwania - search.php;
- Dane wyjściowe paska bocznego - sidebar.php;
- Plik stylu - style.css;
- Plik wyjściowy zawierający 404 strony to 404.php.
Teraz, gdy powiedzą Ci, że musisz wkleić kod do takiego a takiego pliku, będziesz wiedział, gdzie szukać.
Pozostaje tylko odpowiedzieć na pytanie: jak określić właściwe miejsce w każdym z plików?
Ustalanie miejsca wstawienia kodu
Najpierw przejdźmy przez te miejsca, których nie trzeba identyfikować. Będą takie same dla wszystkich, niezależnie od szablonu.
Pierwszym miejscem, identycznym dla wszystkich szablonów, jest obszar w pliku Header.php. Są to znaczniki otwierające i zamykające
.Niektóre skrypty są zawsze umieszczane pomiędzy tymi tagami, co powinno działać na wszystkich stronach serwisu. Oznacza to, że pomiędzy tymi tagami umieściliśmy skrypt np. przycisków społecznościowych i działają one na wszystkich stronach serwisu, na których będziemy je wyświetlać.
Tagi te znajdują się na samej górze pliku Header.php.
Treść pomiędzy nimi będzie inna dla każdego, ponieważ wszystko zależy od szablonu.
Jeśli zostaniesz poinformowany, że musisz wstawić ten kod pomiędzy otwierającym i zamykającym znacznikiem nagłówka, skopiuj kod, poszukaj podobnego obszaru w pliku szablonu i po prostu wklej go pomiędzy tymi znacznikami.
Drugie miejsce, które jest również identyczne dla wszystkich szablonów, znajduje się w pliku odpowiedzialnym za wyjście stopki - footer.php.
Skrypty można łączyć nie tylko poprzez wstawianie ich pomiędzy tagami
w pliku Header.php. Można je także załadować poprzez plik footer.php, przyspieszając w ten sposób ładowanie strony serwisu.Faktem jest, że kiedy strona zaczyna się ładować, ładuje się od góry do dołu. Jeśli wszystkie skrypty znajdują się na górze strony, wyświetlanie jej zawartości ulegnie spowolnieniu, ponieważ załadowanie skryptów zajmie trochę czasu.
Naszym zadaniem jest jak najszybsze wyświetlenie zawartości strony zarówno odwiedzającym, jak i wyszukiwarkom. W takim przypadku wskazane jest wczytanie skryptów na samym końcu strony, aby najpierw wyświetlić treść, a dopiero potem załadować całą resztę.
Aby zaimplementować tę opcję, należy otworzyć plik footer.php i wstawić skrypt przed tagiem zamykającym body. Znajduje się na końcu zawartości pliku, ponieważ odpowiada za koniec obszaru strony.
Jak widać, wszystkie skrypty z tego obszaru wyświetliłem przed znacznikiem zamykającym(zaznaczone niebieską ramką). Swoją drogą, wypuściłem je poprzez załadowanie z plików, a nie poprzez umieszczenie samych skryptów w tym obszarze. Potem znacznie przyspieszyłam prowadzenie bloga. Jak to zrobić, będzie osobnym artykułem. Czekać!
Mam nadzieję, że gdy każą Ci wkleić kod w te obszary, zrobisz to bez żadnych problemów.
Przejdźmy do bardziej złożonego zagadnienia i spróbujmy nauczyć się identyfikować miejsca w innych plikach szablonów, w które wstawiane są różne inne kody. Zazwyczaj kody te obejmują:
- Wyświetl podobne posty;
- Wyjście formularza subskrypcji;
- Wyświetlanie przycisków społecznościowych i tak dalej.
Wszystko to umieszcza się po głównej części treści, czyli po zakończeniu artykułu. Każdy ma inny kod szablonu i dlatego uniwersalną odpowiedź na pytanie „Gdzie kończy się kod wyjściowy mojego artykułu?” po prostu nie.
Ale możesz łatwo określić koniec kodu, po czym musisz zaimplementować potrzebną funkcję. Częściowo pokazałem już tę metodę w artykule o wyborze szablonu WordPress (). Skorzystałem wówczas ze standardowej funkcjonalności przeglądarki internetowej.
Aby lepiej zrozumieć istotę tej metody, gorąco polecam obejrzenie filmu znajdującego się na początku tego wpisu. Pokazałem w nim jak wszystko dzieje się w czasie rzeczywistym. No cóż, teraz postaram się opisać to możliwie najjaśniej.
Pokażę Ci to na przykładzie przeglądarki Google Chrome. Inne przeglądarki również mają tę funkcję, ale mogą mieć nieco inną nazwę.
- Google Chrome - wyświetl kod elementu;
- Firefox - eksploracja elementu;
- Opera - sprawdź element.
Zasada jest podobna w 3 przeglądarkach. Teraz pokażę Ci, jak określić lokalizację dowolnego obszaru w dowolnym szablonie.
Przejdź do wyświetlenia kodu elementu (Google Chrome). Kliknij prawym przyciskiem myszy pusty obszar strony.
Następnie na dole strony pojawia się panel, na którym pokazany jest cały kod źródłowy strony, który możemy edytować i zobaczyć jak w czasie rzeczywistym zmieni się struktura i wygląd szablonu. Ale zmiany danych nie są zapisywane. Aby to zrobić, musisz edytować same pliki szablonów.
Oto jak wygląda panel.
Strzałką wskazałem lupę, klikając na którą możemy obejrzeć strukturę szablonu i określić z jakich bloków składa się nasz szablon. Nazywam tę funkcję inspektorem.
Po kliknięciu na inspektora możemy przesuwać myszką po naszej stronie i zobaczymy, że wszystkie elementy na które najedziemy, zaczną być podświetlane kolorowym tłem. Jako przykład pokażę Ci zrzut ekranu z artykułu o wyborze szablonu. Tam najechałem kursorem na tytuł wpisu.
Jeśli po wynikach naszego artykułu będziemy musieli wstawić kod, to nietrudno się domyślić, że musimy sprawdzić obszar naszego szablonu i znaleźć blok zawierający całą treść artykułu. Można przeszukiwać zarówno koniec bloku, jak i jego początek. Oznacza to, że możesz sprawdzić szablon zarówno od dołu, jak i od góry.
Ale tutaj jest jedna uwaga . Musimy znaleźć nie tylko linie artykułu, ale dokładnie bloki, w których znajduje się sama treść, ponieważ w plikach szablonów nie ma żadnych artykułów. Istnieje tylko kod wyświetlający treść i jest on zamknięty w blokach. Zaraz po znaczniku bloku zamykającego
