Na początku było Słowo…
01.06.2020
Korzystanie z Monospace i preformatowanego tekstu
Większość tekstu w książkach jest ustawiana proporcjonalną czcionką. Oznacza to, że poszczególne postacie zajmują różne ilości miejsca w poziomie, w zależności od wielkości indywidualnej postaci. Na przykład litera M zajmuje więcej miejsca niż litera I, więc ciąg M zajmuje więcej miejsca niż ciąg I. Większość stron internetowych, do których jesteśmy przyzwyczajeni, używa czcionek proporcjonalnych; są atrakcyjne, profesjonalnie wyglądające i łatwiejsze do odczytania. Natomiast czcionka monospace to taka, której znaki zajmują dokładnie taką samą ilość poziomej przestrzeni, niezależnie od faktycznego rozmiaru i kształtu pojedynczego znaku. W czasach maszyny do pisania wszystkie typy były rozmieszczane w jednej płaszczyźnie ze względu na sposób, w jaki maszyna do pisania działała: karetka przesuwała dokładnie tyle samo miejsca w prawo, co podczas pisania, bez względu na to, która litera była wpisana. Oto te same 10 Ms i Is czcionką monospace:
Niektóre typowe zastosowania tekstu o stałej szerokości obejmują:
• Linie kodu programowania
• Tekst, który użytkownik ma wpisać
• Grafika ASCII (grafika utworzona przy użyciu znaków tekstowych)
Używanie tekstu o stałej szerokości w witrynie internetowej jest rzadkością, ale w szczególnych sytuacjach miło jest mieć taką możliwość. Aby zastosować styl monospace, możesz użyć dowolnego ze znaczników opisanych poniższej. Większość przeglądarek domyślnie nie rozróżnia formatowania między tymi znacznikami, ale możesz je zdefiniować inaczej w swoich stylach, jeśli chcesz.
Znacznik : Opis
< kbd > : (klawiatura) Znacznik używany w tekście o stałej szerokości, aby wskazać coś, co użytkownik powinien wpisać na klawiaturze powinien pisać na klawiaturze
< code > : (kod) Znacznik używany dla tekstu o stałej szerokości stosowanego do kodu programowania
< samp > : (Próbka) Znacznik używany do przykładowego tekstu, który w dużej mierze jest taki sam jak < code >
Uwaga Znacznik < tt > był szeroko stosowany do tekstu o jednolitej przestrzeni w dokumencie we wcześniejszych wersjach HTML, ale nie jest obsługiwany w HTML5.
Uwaga : Istnieje wiele różnych czcionek o stałej szerokości. Większość przeglądarek używa Kuriera (lub jego wariantu), chyba że określono inaczej. Na stronie 40 dowiesz się, jak określić czcionkę zwykłego tekstu w programie Internet Explorer, zmieniając ustawienie w przeglądarce, która steruje czcionką używaną monospace.
Te tagi działają dobrze, jeśli chcesz się upewnić, że znaki pojawiają się w czcionce o stałej szerokości, ale nie zmieniają faktu, że HTML pomija dodatkowe odstępy i podział wierszy, które może zawierać tekst. Podczas formatowania czegoś, co wymaga dokładnego włączenia białych znaków, takich jak spacje lub podziały wierszy, musisz użyć znacznika < pre >, który oznacza "wstępnie sformatowany". Tag < pre > nie tylko wyświetla tekst w monospace, ale także zachowuje wszystkie spacje i podziały wierszy, które przeglądarka internetowa zwykle ignoruje, dzięki czemu tekst będzie wyglądał bardzo podobnie do oryginału. Znacznik < pre > może się także przydać, gdy tekst skopiowany i wklejony z innego źródła zawiera wiele podziałów linii i akapitów. Możesz ręcznie wprowadzić znak < br > dla każdego podziału wiersza i < p > dla każdego podziału akapitu, ale jest to dość pracochłonne w przypadku dużego pliku z dużą ilością podziałów. Korzystanie ze znacznika < pre > jest skrótem. Jednym z powszechnych zastosowań znacznika
< pre > jest na przykład archiwum poezji, w którym łamanie wierszy i odstępy nadają znaczenie wierszom.
Powrót
02.06.2020
Formatowanie bloku cytatu
Cytując bloki z innych źródeł, zwyczajowo - zarówno na stronach internetowych, jak i w druku - wcina się te bloki od głównej części tekstu. Tag < blockquote > właśnie to robi. I nie ograniczaj się do korzystania z niego; możesz użyć < blockquote > dla dowolnego tekstu, który chcesz wciąć, a nie tylko cytaty. Tag < blockquote > ma atrybut cite = "URL", ale większość przeglądarek nic z tym nie robi. Jeśli znasz adres URL cytowanego źródła, dobrą praktyką jest umieszczenie go w tagu w przeglądarkach obsługujących ten atrybut oraz jako pomoc dla każdego, kto może przeglądać lub edytować surowy kod HTML później.
Uwaga : Istnieje również znacznik < q >, który służy do formatowania wbudowanych cytatów. Jego jedyną funkcją jest umieszczanie cudzysłowów wokół otaczającego tekstu. Większość ludzi nie używa tego tagu, ponieważ o wiele łatwiej jest po prostu wpisać znaki cudzysłowu.
Powrót
03.06.2020
Konfigurowanie ustawień widoku w Internet Explorerze
Na początku wspomniałem, że użytkownicy mogą dostosować sposób wyświetlania niektórych tagów we własnych systemach, ustawiając preferencje wyświetlania w swoich przeglądarkach. Aby zrozumieć, co ludzie robią z twoimi stronami, poświęć chwilę na sprawdzenie ustawień w Internet Explorerze 9. Możliwości dostosowywania w innych przeglądarkach, w tym we wcześniejszych wersjach Internet Explorera, są podobne. W tym ćwiczeniu będziesz przeglądać strony HTML w Internet Explorerze 9 i określać różne ustawienia.
Powrót
04.06.2020
Kluczowe punkty
• Większość tagów opiera się na funkcji, a nie na formatowaniu. Określają, że tekst ma określoną funkcję, taką jak nagłówek lub cytat, a nie określony sposób, w jaki powinien wyglądać.
• Dokładne formatowanie (wygląd) zastosowane do otagowanego tekstu jest kontrolowane przez ustawienia domyślne przeglądarki, indywidualne dostosowanie użytkownika lub style.
• Zdefiniuj nagłówki za pomocą znaczników od < h1 > do < h6 > (od największego do najmniejszego).
• Gdy jeden nagłówek następuje bezpośrednio za drugim jako podtytuł, możesz zgrupować je z < hgroup >, aby czytniki ekranu i kontury pokazywały je jako jedną całość.
• Aby pogrubić tekst, użyj znacznika < b >; aby to zrobić kursywą, użyj znacznika < i >.
• Znacznik dla indeksu górnego to < sup >; znacznik dla indeksu dolnego to < sub >.
• Tekst o stałej szerokości wykorzystuje czcionkę, której znaki zajmują tyle samo miejsca w poziomie, bez względu na konkretny znak; jego przeciwieństwem jest tekst proporcjonalny.
• Domyślnie większość tekstu w sieci pojawia się proporcjonalnie. Aby określić czcionkę o stałej szerokości, użyj znacznika < kbd >, < code > lub < samp >. HTML5 nie obsługuje już przestarzałego kodu < tt > dla tekstu o stałej szerokości.
• Domyślnie przeglądarka internetowa usuwa wszelkie spacje i ignoruje podziały akapitów (z wyjątkiem tych utworzonych przy użyciu znacznika < p >). Aby zmusić przeglądarkę do renderowania spacji i podziałów linii w tekście, umieść ten tekst w znaczniku < pre >.
• Aby rozpocząć cytat blokowy, użyj znacznika < blockquote >. Tag może przyjmować atrybut cite = "URL", ale większość przeglądarek go nie używa.
• W przeglądarce Internet Explorer możesz wybrać domyślny rozmiar tekstu z menu Widok. Wpływa to tylko na twoją kopię Internet Explorera, a nie na samą stronę.
• W programie Internet Explorer możesz wybrać domyślną czcionkę tekstową, otwierając okno dialogowe Opcje internetowe, klikając opcję Czcionki i określając czcionki do różnych celów.
Powrót
05.06.2020
Korzystanie z list i tła
Załóżmy, że przygotowujesz się do ważnego testu lub zbierasz informacje dotyczące dużego projektu w pracy. Jest dużo danych i bardzo mało czasu na ich strawienie. Co wolałbyś przejrzeć: długi raport na ten temat lub listę ważnych punktów?
Jeśli jesteś podobny do większości ludzi, prawdopodobnie wolałbyś listę. Listy ułatwiają przeglądanie tekstu. Nauczyciele języka mogą się tym, ale staliśmy się społeczeństwem skimmerów i przeglądarek. Ludzie nie lubią czytać akapit po akapicie zwykłego tekstu. Podoba im się ich informacja podzielona na łatwo przyswajalne kawałki. Tu nauczysz się tworzyć kilka rodzajów list przy użyciu HTML, w tym listy wypunktowane, listy numerowane i listy definicji. Dowiesz się, jak tworzyć listy zagnieżdżone na listach, jak używać stylów do określania znaku wypunktowania lub stylu numeracji oraz jak tworzyć linie poziome (które w języku HTML nazywane są regułami), które dodatkowo pomagają dzielić stronę. Dowiesz się także o kodach encji, które umożliwiają wstawianie znaków specjalnych lub symboli, które nie znajdują się na klawiaturze, w tym symboli, takich jak większe niż (>) i mniejsze niż (<), które normalnie byłyby interpretowane jako znaczniki HTML. Na koniec ten rozdział zawiera krótkie omówienie tła strony internetowej, zarówno jednolitego koloru, jak i grafiki. Większość profesjonalnych projektantów stron internetowych nie używa kolorów tła ani grafiki tła, ale wielu hobbystów uważa je za zabawne. Ponadto, gdy dowiesz się o używaniu podziałów, zobaczysz, jak zrozumienie tła może się przydać przy tworzeniu paska nawigacyjnego, który kontrastuje ze stroną główną.
Powrót
06.06.2020
Tworzenie list wypunktowanych i numerowanych
Wcześniej pracowłeś z plikiem zawierającym listę numerowaną, ale został on ustawiony jako zwykły akapit < p > z przerwami < br > dla każdego wiersza, na przykład:
1. Kliknij w polu Zaloguj
2. Wpisz premium
3. Kliknij w polu Hasło
4. Wpisz klient
Tagowanie listy w ten sposób działało w tym przypadku, ponieważ linie były krótkie i proste, ale HTML ma tagi zaprojektowane specjalnie do tworzenia list, i lepiej, jeśli to możliwe, używać tych tagów. Akceptują atrybuty, których można używać do kontrolowania formatowania, i tworzenia wiszące punktory i cyfry (to znaczy punktory i liczby, które rozciągają się lub "zawieszają się" na lewym marginesie akapitu). Znacznikiem dla listy numerowanej jest < ol >, co oznacza listę uporządkowaną. W przypadku listy punktowanej znacznikiem jest < ul >, co oznacza listę nieuporządkowaną. Każdy numerowany lub wypunktowany element na liście jest oznaczony < li > dla elementu listy. Zaczynasz listę otwierającym znacznikiem < ol > lub < ul >, otaczasz każdy element listy znacznikami < li > i < /li >, a następnie kończysz listę zamykającym znacznikiem < /ol > lub < /ul >. Oto lista numerowana z poprzedniego przykładu, tym razem za pomocą odpowiednich tagów:
< ol >
< li > Kliknij w polu logowania < /li >
< li > Wpisz premium < /li >
< li > Kliknij w polu Hasło < /li >
< li > Wpisz klient < /li >
< /ol >
Uwaga : Wcięcie zostało dodane, aby ułatwić czytanie tekstu, ale przeglądarka ignoruje dodatkowe spacje. W rzeczywistości, jeśli znacznik < ol > został umieszczony w tym samym wierszu, co pierwszy < li > , nie zrobiłoby to żadnej różnicy.
Prawdopodobnie zauważyłeś, że brakuje tutaj samych liczb. Dzieje się tak, ponieważ podczas tworzenia uporządkowanej listy w HTML nie przypisujesz numerów do elementów samodzielnie. Pozwolisz, aby HTML zajął się tym za Ciebie, podobnie jak wyrównanie akapitu. Rezultatem jest standardowa, rozpoznawalna lista numerowana. Lista wypunktowana działa w ten sam sposób, z tym wyjątkiem, że używasz znaczników < ul >. Oto przykład:
< ul >
< li > Przynieś pocztę < /li >
< li > Wyjmij śmieci >< /li >
< li > Nakarm psy < /li >
< li > Zatrzymaj dostarczanie gazet < /li> < /ul >
To tworzy podstawową listę wypunktowania na stronie internetowej.
Powrót
07.06.2020
Listy zagnieżdżone
Możesz zagnieżdżać listy między sobą. W poniższym przykładzie mamy wypunktowaną listę osadzoną na liście numerowanej. Zauważ, jak zbudowano tę zagnieżdżoną listę. Punktowana lista podrzędna (znacznik < ul >) jest umieszczana w jednym z znaczników
< ol >
< li > Czwartek: odrabianie lekcji algebry < /li >
< li > Piątek: Domy sąsiadów:
< ul > < li > Przynieś pocztę < /li >
< li > Wyrzuć śmieci < /li >
< li > Nakarm psy < /li >
< li > Zatrzymaj dostarczanie gazet < /li > < /ul > < /li >
< li > Sobota: myj samochód < /li >
< /ol >
Na stronie internetowej wyglądałoby to tak.
Powrót
08.06.2020
Zmiana znaku punktora lub cyfry
Listy wypunktowane i numerowane można nadać styl za pomocą atrybutu list-style-type: type. Jest to rodzaj atrybutu opartego na stylu, o którym będzie więcej w dalszej części, ale na razie używamy go jako samodzielnej techniki zmiany znaku wypunktowanego lub stylu numeracji. Możesz użyć wartości pokazanych poniżej dla atrybutu typu listy. (To nie jest wyczerpująca lista, ale obejmuje wszystkie wartości, których prawdopodobnie będziesz używać).
Lista Wypunktowana:
• disc : Wypełniony okrąg (domyślnie)
• circle : Niewypełnione koło
• square : Wypełniony kwadrat
Lista Numerowana:
• decimal : 1, 2, 3, 4 (domyślnie)
• decimal-leading-zero : 01, 02, 03, 04
• lower-roman : i, ii, iii, iv
• upper-roman : I, II, III, IV
• lower-alpha : a, b, c, d
• upper-alpha : A, B, C, D
• none : (nothing)
Aby zastosować atrybut, umieść go w otwierającym znaczniku < ul > lub < ol >. Na przykład, aby utworzyć listę punktowaną, która używa kwadratowego znaku punktora, rozpocznij listę w ten sposób:
< ul style = "list-style-type: square" >
Aby utworzyć listę numerowaną, która używa wielkich cyfr rzymskich, rozpocznij listę w ten sposób:
< ol style = "list-style-type: upper-roman" >
Uwaga : Innym sposobem określenia typu punktora lub numeru jest użycie kaskadowego arkusza stylów (CSS);
Powrót
09.06.2020
Określanie początku listy numerowanej
Aby rozpocząć listę numerowaną od liczby innej niż 1, użyj atrybutu start = "n" ze znacznikiem
- , gdzie n jest liczbą początkową. Na przykład:
- , jeśli chcesz zmienić numerację tylko dla jednego elementu.
Na przykład, aby wymusić numerację określonego elementu listy za pomocą 5 (lub na liście z cyframi rzymskimi, V), wstaw atrybut value = "n", jak pokazano tutaj:
< li value = "5" >
Uwaga: Atrybuty start = i value = są przestarzałe, ale nadal działają w HTML5.
Powrót
10.06.2020
Tworzenie list definicji
Lista definicji jest dokładnie tak, jak to brzmi: lista, która zawiera terminy z ich definicjami, takie jak w glosariuszu. Definiowane słowo służy jako nagłówek, a akapit definicji jest pod nim wcięty. Pełna lista (nagłówki i akapity definicji) jest zawarta w znacznikach < dl > i < /dl >, które oznaczają listę definicji. Każde słowo do zdefiniowania jest zawarte w znaczniku < dt > (definicja terminu), a akapity definicji znajdują się w znaczniku < dd > (opis definicji). Oto kod pokazanego właśnie przykładu:
< dl >
< dt > Grzyb < /dt >
< dd > Prymitywna, nie-naczyniowa, niefotosyntetyczna forma życia roślin. Przykłady obejmują pleśni, pleśni i grzybów. < /dd >
< dt > Nicień < /dt >
< dd > Mikroskopijny glisty żyjący w glebie. Są zarówno szkodliwe, jak i korzystne nicienie. Szkodliwi zbierają żniwo na korzeniach rośliny.
< /dd >
< /dl >
Ten przykład pokazuje relację jeden-do-jednego między słowami i definicjami (jedna definicja dla każdego słowa), ale nie jest to wymóg. Możesz mieć wiele kolejnych wpisów dowolnego typu. Możesz to zrobić, aby uwzględnić sytuacje, w których jedno słowo ma dwa znaczenia lub dwa słowa mają tę samą definicję.
Uwaga: HTML pozwala ominąć zamykające znaczniki < /dt > i < /dd> , ale powinieneś przyzwyczaić się do ich używania. XHTML wymaga ich.
Powrót
11.06.2020
Wstawianie znaków specjalnych
Znaki specjalne to znaki, których nie ma na standardowej polskiej klawiaturze. Przykłady obejmują litery ze znakami akcentującymi nad nimi, lub symbol własności, taki jak © lub ™. W HTML te znaki specjalne są nazywane jednostkami, a użytkownik tworzy je, używając kodów rozpoczynających się od znaku handlowego i (&), po którym następuje nazwa jednostki lub numer jednostki i kończy się średnikiem. Na przykład "& nbsp;" lub "& # 160" oba są renderowane jako przestrzeń niełamliwa.
Zarówno nazwy, jak i numery jednostek reprezentują to oba są renderowane jako przestrzeń niełamliwa. Oprócz symboli innych niż klawiaturowe, niektóre inne symbole muszą zostać utworzone jako elementy w HTML, ponieważ mają określone znaczenie w HTML. Najpopularniejsze to znak ampersand (&), większy niż znak (>) i mniejszy niż znak (<). Nie możesz po prostu wpisać tych symboli w kodzie HTML, ponieważ przeglądarka interpretuje je jako tagi lub elementy, a nie znaki do wyświetlenia.
Uwaga : Znacznik "& nbsp;" jest bardzo popularny przy tworzeniu spacji, a w rzeczywistości wiele programów do tworzenia witryn WYSIWYG, takich jak Microsoft Expression Web i Adobe Dreamweaver, wstawia je dla Ciebie po naciśnięciu spacji. Nie używaj jednak nieprzerwanych spacji zamiast dobrych technik układania. Na przykład, jeśli coś wymaga wcięcia o określoną wartość, użyj poprawnych tagów HTML i stylów, aby utworzyć wcięcie, a nie tylko "spacji" za pomocą kilkudziesięciu kodów.
Powrót
12.06.2020
Wstawianie linii poziomych
Poziome linie mogą być przydatne jako dzielniki między sekcjami tekstu na stronie internetowej. Na przykład w poprzednim ćwiczeniu utworzono informację o prawach autorskich, która może nieco zbyt dobrze wtapia się w resztę tekstu na stronie; wyróżniałby się bardziej, gdyby był oddzielony od reszty dokumentu poziomą linią. Możesz także dodać kolejną poziomą linię między dwoma pierwszymi nagłówkami i resztą dokumentu. Aby dodać linię poziomą, po prostu dodaj następujący jednostronny znacznik w miejscu, w którym chcesz aby pojawiła się linia
< hr >
Uwaga W XHTML musisz dodać spację i ukośnik zamykający, jak poniżej: < hr />. HTML5 rozpoznaje również tę składnię jako opcjonalną alternatywę. Ukośnik jest wymagany dla zgodności z XHTML, a spacja poprzedzająca ukośnik umożliwia starszym przeglądarkom prawidłowe odczytanie znacznika. Domyślnie linia przebiega przez całą szerokość okna przeglądarki, ma dwa piksele wysokości i jest czarna z wyrzeźbionym efektem. Możesz zmienić te cechy, stosując atrybuty w znaczniku. Większość oryginalnych atrybutów znacznika < hr > została uznana za przestarzałą w wersji HTML 4.01; atrybuty takie jak wyrównanie, kolor, rozmiar i szerokość nie są w ogóle obsługiwane w HTML5. Teraz ustawiasz charakterystykę renderowania linii poziomej za pomocą stylów, o czym dowiesz się później. Najlepiej jest określić jednolity wygląd dla wszystkich linii z kaskadowym arkuszem stylów, ale możesz także dodać styl bezpośrednio do znacznika < hr >, po prostu włączając atrybut style = " attributes" . Atrybuty, które można ustawić, to kolor, kolor tła, szerokość i wysokość. Na przykład, aby utworzyć zieloną linię o grubości 3 pikseli i obejmującą 50% szerokości okna, należy napisać < hr style="color: green; background-color: green; height: 3; width: 50%" >. Niektóre przeglądarki używają koloru do przypisania koloru do linii, inne używają koloru tła; dlatego należy dołączyć oba tagi i przypisać ten sam kolor dla obu. HTML rozpoznaje 16 podstawowych nazw kolorów:
• Aqua
• Black
• Blue
• Fuchsia
• Gray
• Green
• Lime
• Maroon
• Navy
• Olive
• Purple
• Red:
• Silver
• Tea:
• White
• Yellow
Powrót
13.06.2020
Wybieranie kolorów tła i pierwszego planu
Wielu ekspertów od projektowania stron internetowych ostrzega przed ciemnymi lub wzorzystymi tłami na stronach internetowych, ponieważ mogą utrudniać czytanie tekstu. Niektórzy projektanci posunęli się do stwierdzenia, że nie należy w ogóle używać żadnego koloru tła; wolą, aby czarny tekst na białym tle był normą. Szybkie spojrzenie na kilka głównych komercyjnych witryn internetowych potwierdzi niemal uniwersalność tej opinii. Sprawdź witryny o dużym natężeniu ruchu, takie jak www.msn.com, news.google.com i www.microsoft.com, a przekonasz się, że tekst jest prawie wyłącznie czarny (lub inny ciemny kolor) na białym (lub inne jasne tło). Zasady zostały jednak złamane i możesz znaleźć sytuacje, w których kolorowe lub wzorzyste tło jest idealne dla określonej strony (lub zestawu stron). Na przykład możesz przypisać kolor tła do strony internetowej, którą chcesz odróżnić od innej strony witryny internetowej.
Określanie kolorów
16 podstawowych kolorów zaprezentowanych wcześniej to najlepsze kolory do zastosowania na stronach internetowych, ponieważ są one powszechnie akceptowane. Każda przeglądarka interpretuje te kolory w ten sam sposób. Prawdopodobnie jednak znajdziesz wiele sytuacji, w których żaden z tych 16 kolorów nie jest odpowiedni. Na przykład może się okazać, że są zbyt ciemne lub zbyt jaskrawe, aby uzyskać atrakcyjne tło strony. Dlatego czasami będziesz musiał polegać na innych sposobach określania kolorów. Jednym ze sposobów określenia koloru jest jego wartość RGB (czerwono-zielono-niebieska). Za pomocą tej metody można opisać kolor za pomocą serii trzech liczb, od 0 do 255. Każda liczba reprezentuje składową koloru czerwonego, zielonego lub niebieskiego. Na przykład czysta czerwień to 255, 0, 0; to znaczy maksymalna czerwień (255), brak zieleni (0) i brak niebieskiego (0). Korzystając z tych trzech wartości, możesz utworzyć szeroką gamę kolorów. Na przykład 255, 153, 0 oznacza konkretny odcień pomarańczy - pełna czerwień, nieco więcej niż połowa zieleni i brak niebieskiego. Innym sposobem wyrażenia wartości kolorów w HTML jest użycie wartości szesnastkowej. Wartości szesnastkowe reprezentują wartości RGB przekonwertowane na podstawowy system numeracji 16. Na przykład wartość 255 jest konwertowana na FF, więc wartości RGB 255, 255, 0 można również wyrazić jako wartość szesnastkową # FFFF00. Problem z definiowaniem kolorów za pomocą wartości RGB lub szesnastkowych polega na tym, że nie każdy wyświetlacz obsługuje tak wiele kolorów. Wszelkie nieobsługiwane kolory są wyświetlane jako rozczochrane (tzn. Utworzone za pomocą wzoru kreskowania dwóch kolorów zmieszanych razem). Dlatego większość projektantów stron internetowych stara się trzymać tak zwanych kolorów bezpiecznych dla sieci. Kolor bezpieczny dla sieci to taki, który dokładnie pasuje do jednego z kolorów na standardowym 8-bitowym wyświetlaczu kolorowym. Kolory bezpieczne dla sieci używają tylko następujących wartości liczbowych dla czerwonego, zielonego i niebieskiego: 0, 51, 102, 153, 204 i 255. Aby zobaczyć próbki w pełnym kolorze dla wszystkich kolorów bezpiecznych dla sieci, patrz Dokumenty \ Microsoft Naciśnij \ HTML5 SBS \ Reference \ websafe.htm. Jeszcze innym sposobem wyrażenia wartości kolorów jest użycie rozszerzonych nazw. Są one podobne do podstawowych nazw kolorów, ale jest ich o wiele więcej. Oficjalnie są one obsługiwane tylko przez Internet Explorer, ale w rzeczywistości większość współczesnych przeglądarek je rozpoznaje..
Uwaga: Nie wszystkie nazwane kolory w rozszerzonym zestawie są bezpieczne dla sieci; w rzeczywistości większość z nich nie jest. Kolory z rozszerzonego zestawu są wygodne, ponieważ mają nazwy, ale kolory bezpieczne w Internecie są często lepszym wyborem.
Stosowanie koloru tła
Aby określić kolor tła dla całej strony, wstaw atrybut style = "background-color: color" do otwierającego znacznika . Na przykład, aby tło całej strony było żółte, użyj następujących poleceń:
< body style = "background-color: yellow" >
Możesz użyć nazwy koloru, wartości RGB lub wartości szesnastkowej. Dlatego poniższe są równoważne z właśnie pokazanym kodem:
< body style = "background-color: # FFFF00" >
< body style = "background-color: rgb (255,255,0)" >
Stosowanie koloru pierwszego planu
Kolor pierwszego planu jest domyślnym kolorem tekstu dla strony. Możesz ustawić kolor pierwszego planu, używając atrybutu style = "color: color". Można go połączyć z atrybutem koloru tła w pojedynczej instrukcji style =. Na przykład, aby ustawić żółty tekst na granatowym tle, użyj następujących poleceń:
< body style = "kolor tła: granatowy; kolor: żółty" >
Kiedy łączysz dwa atrybuty w jednej instrukcji style =, oddzielasz je średnikiem, jak pokazano w poprzednim przykładzie.
Uwaga : Ta metoda stosowania kolorów tła i pierwszego planu wykorzystuje style, o których dowiesz się więcej później. HTML5 nie obsługuje starszej metody stosowania kolorów w znaczniku < body >. W tym ćwiczeniu zmienisz kolory pierwszego planu i tła strony internetowej
Powrót
14.06.2020
Określanie pliku obrazu tła
Obraz tła pojawia się za tekstem na stronie. Domyślnie obraz jest kafelkowy, aby wypełnić stronę i przewija się ze stroną. Niestety w Internecie istnieje wiele przykładów nieskutecznych lub rozpraszających uwagę środowisk. Oto kilka wskazówek, jak ulepszyć twój: Wybieraj obrazy zaprojektowane do układania w kafelki, aby każda kopia płynnie przechodziła w następną. Gdy krawędzie obrazu dobrze się zleją, będzie wyglądać jak pojedynczy, duży obraz. Z drugiej strony krawędzie kafelkowych kopii poniższego obrazu dobrze łączą się w obu kierunkach. Użyj subtelnych wzorów, które nie rozpraszają tekstu. Jeśli określisz obraz tła, powinieneś również określić kolor tła. Kolor nie będzie widoczny, chyba że obraz z jakiegoś powodu się nie wyświetli lub jeśli obraz nie zawiera przezroczystych obszarów. Kolor tła jest szczególnie ważny, jeśli używasz ciemnego obrazu tła i jasnego koloru pierwszego planu; jeśli obraz nie pojawia się, tekst musi być widoczny na ciemnym tle, aby był czytelny. Aby użyć pliku obrazu tła, użyj atrybutu style = "background-image: url (image)" w otwierającym znaczniku , podobnie jak w przypadku kolorów pierwszego planu i tła w poprzedniej sekcji. Na przykład, aby użyć pliku obrazu tła o nazwie xxx.gif, który znajduje się w tym samym folderze co plik HTML, należy napisać:
< body style = "background-image: url (xxx.gif) " >
Zauważ, że musisz zawrzeć nazwę pliku obrazu w nawiasach następujących po adresie URL. Tag może przechowywać wiele specyfikacji stylów w jednym atrybucie style =. Oddziel je średnikami, tak jak wcześniej z kolorami pierwszego planu i tła. Na przykład, aby połączyć obraz tła, kolor tła i kolor pierwszego planu w jednym atrybucie, wykonaj następujące czynności:
< body style="background-image: url(xxx.gif)" >
Zauważ, że musisz zawrzeć nazwę pliku obrazu w nawiasach następujących po adresie URL. Tag może przechowywać wiele specyfikacji stylów w jednym atrybucie style =. Oddziel je średnikami, tak jak wcześniej z kolorami pierwszego planu i tła. Na przykład, aby połączyć obraz tła, kolor tła i kolor pierwszego planu w jednym atrybucie, wykonaj następujące czynności:
< body style="background-image: url(xxx.gif); color: green; background-color: beige" >
Domyślnie obraz tła jest powtarzany zarówno w poziomie, jak i w pionie, aby wypełnić okno. Możesz zmusić go, aby się nie powtarzał, dodając atrybut background-repeat = do znacznika i określając repeat-x (powtarzaj tylko w poziomie), repeat-y (powtarzaj tylko w pionie) lub no-repeat. Na przykład, aby zapobiec powtarzaniu się, użyj następujących poleceń:
< body style="background-image: url(xxx.gif); background-color: beige; background- repeat: no-repeat" >
Domyślnie obraz tła przewija się wraz z tekstem, gdy użytkownik przewija stronę w dół. Aby zmusić obraz do pozostania na stałe, dodaj atrybut background-attach = fixed do znacznika w następujący sposób:
< body style="background-image: url(xxx.gif); background-color: beige; background-attachment=fixed" >
W tym ćwiczeniu wyświetlisz obraz jako tło strony internetowej.
Powrót
15.06.2020
Kluczowe punkty
• Aby utworzyć listę numerowaną (uporządkowaną), użyj znaczników < ol >. Dla wypunktowana (nieuporządkowana) lista, użyj znaczników < ul >
• W tagach < ol > lub < ul > użyj tagów < li > dla każdego elementu listy. Wszystkie te tagi są dwustronne. HTML nie wymaga zamykania < /li >, ale XHTML tak.
• Listy uporządkowane i nieuporządkowane można zagnieżdżać. Umieść listę < ul > lub < ol > drugiego poziomu w znaczniku < li > < /li > na liście głównej.
• Aby użyć innego znaku punktora lub stylu numeracji, użyj atrybutu style = "list-style-type: type" w znaczniku otwierającym < ul > lub < ol>.
• Aby utworzyć listę definicji, użyj znaczników < dl > < /dl >. W tagach < dl > umieść każdy termin w tagu < dt > < /dt > i każdą definicję w tagu < dd > < /dd >.
• Możesz wyświetlać znaki specjalne na stronie internetowej, korzystając z odwołań do znaków HTML.
• Aby wstawić linię poziomą, użyj znacznika < hr >. To jest jednostronny tag. Umieść w niej wszelkie specyfikacje linii, takie jak kolor, wysokość i szerokość.
• Możesz określić kolory, używając podstawowych lub rozszerzonych nazw, wartości RGB lub wartości szesnastkowych.
• Aby przypisać kolor tła do strony, wstaw atrybut style = "background-color: color" do otwierającego znacznika < body >. Dla koloru pierwszego planu użyj style = "color: color". Te atrybuty można łączyć w pojedynczą instrukcję z separatorem średników, na przykład: style = "background-color: red; kolor biały".
• Aby przypisać obraz tła do strony, wstaw atrybut style = "background-image: image" do otwierającego znacznika < body >.
Powrót
16.06.2020
Tworzenie hiperłączy i kotwic
• Hiperłącze do strony internetowej.
• Hiperłącze do adresu e-mail.
• Utwórz i hiperłącz do kotwic.
• Hiperłącze do innej treści.
Sieć oparta jest na hiperłączach. Każda strona zawiera aktywne linki do innych stron, które z kolei prowadzą do jeszcze większej liczby stron, aż do wznowienia cała sieć (lub przynajmniej duża jej część) zostanie połączona. Właśnie stąd pochodzi nazwa "sieć". Hiperłącza mogą łączyć się z innymi miejscami na stronie internetowej, z innymi stronami w Twojej witrynie, ze stronami spoza witryny oraz z wieloma rodzajami treści internetowych i innych. Aktywujesz hiperłącze, klikając określony fragment tekstu lub grafiki, który w zależności od linku prowadzi do innej lokalizacji na stronie, otwiera inną stronę internetową, uruchamia wiadomość e-mail, pobiera plik, pozwala ci oglądać film lub słuchać klipu dźwiękowego, uruchamia program internetowy i tak dalej. Prawdopodobnie kliknąłeś tysiące hiperłączy, być może nie myśląc dużo o kodowaniu. Po tym rozdziale dowiesz się, jak one działają, i będziesz mógł stworzyć własny. W tym rozdziale dowiesz się o znaczniku < a >, który służy do tworzenia różnego rodzaju hiperłączy. Dowiesz się, jak tworzyć hiperłącza do stron internetowych i adresów e-mail, jak tworzyć punkty kontrolne w dokumencie oraz jak hiperłącza bezpośrednio do punktu kontrolnego. Pokażę też, jak hiperłączem do treści innych niż Internet, takich jak dokument Microsoft Word lub arkusz kalkulacyjny Microsoft Excel.
Powrót
17.06.2020
Hiperłącza do strony internetowej
Bez względu na rodzaj hiperłącza, który chcesz utworzyć, podstawowa składnia jest taka sama. Zaczyna się od znacznika < a >, a następnie używa atrybutu href =, który podaje adres URL lub ścieżkę do miejsca docelowego. Na przykład tag otwierający może wyglądać następująco:
< a href=http://chacker. pl >
Następnie następuje tekst podkreślony jako kliknięty tekst linku lub odniesienie do obrazu, który będzie służyć jako hiperłącze. Po tym tekście jest tag zamykający < /a >. Oto kompletny przykład:
Odwiedź < a href="https://chacker.pl/spow/" > Spowiednik html-ianki< /a > po więcej informacji
Podczas przeglądania w przeglądarce powoduje to powstanie hiperłącza tekstowego podobnego do tego pokazanego na poniższym obrazku:
Odwiedź Spowiednik html-ianki po więcej informacji
Hiperłącza są domyślnie podkreślone. Możesz określić alternatywne formatowanie hiperłączy za pomocą stylów
Powrót
18.06.2020
Korzystanie z częściowych ścieżek i nazw plików
W niektórych przypadkach hiperłącze nie wymaga podania nazwy pliku ani pełnej ścieżki do miejsca docelowego. To zależy od kontekstu i nazwy pliku. Jeśli nie utworzysz łącza do konkretnej strony, serwer, który hostuje witrynę sieci Web, odpowiada wyświetlając domyślną stronę dla tej witryny (jeśli jest dostępna). Jeśli przeglądarka nie zażąda określonej strony podczas uzyskiwania dostępu do serwera, większość serwerów wyśle stronę domyślną, zwykle o nazwie indeks lub domyślna. W przeglądarce Internet Explorer wpisz następujący adres URL w pasku adresu: http: // www. microsoft.com/en/us : Zostanie otwarta strona początkowa amerykańskiej wersji witryny Microsoft. Teraz wpisz ten adres URL: http://www.microsoft.com/en/us/default.aspx. Ta sama strona ładuje się. Za pierwszym razem, gdy pominąłeś nazwę pliku, serwer WWW odpowiedział wysyłając plik domyślny o nazwie default.aspx.
Uwaga Adres URL w tym przykładzie wskazuje stronę o nazwie default.aspx. ASP oznacza Active Server Pages, która jest zaawansowaną technologią wykorzystywaną do komercyjnego tworzenia stron internetowych. Strony utworzone za pomocą ASP zazwyczaj mają rozszerzenia .asp lub .aspx. W przypadku własnych stron należy nadal używać rozszerzenia .htm.
Jeśli chcesz utworzyć link do określonej strony, musisz podać pełną nazwę pliku. Na przykład, jeśli chcesz podać bezpośredni link do strony, na której użytkownicy mogą pobrać program Windows Media Player, możesz użyć tego tagu:
< a href ="http://www.microsoft.com/windows/windowsmedia/player/download/download.aspx" > Pobierz program Windows Media Player < /a >
Powrót
19.06.2020
Korzystanie ze ścieżek względnych i bezwzględnych
Ścieżki zawierające pełny adres, z którego każdy może przejść do tej strony, nazywane są ścieżkami bezwzględnymi. Ścieżki absolutne są bardzo niezawodne, ale są także długie i niewygodne w pisaniu. Na przykład:
< a href=http://www.contoso.com/gardener/images/foliage.htm > Diagnozowanie problemów z liśćmi
Kiedy łączysz się z plikami w tej samej witrynie internetowej, co sam link, nie musisz podawać pełnej ścieżki do pliku; możesz po prostu podać jego nazwę. Gdy plik znajduje się w tym samym folderze, wystarczy podać tylko nazwę pliku. Na przykład, jeśli strony index.htm i liście.htm witryny Ogrody Świata w sieci Web znajdowały się w tym samym folderze, w pliku index.htm, można odwołać się do pliku foliage.htm w następujący sposób:
< a href="liście.htm"> Diagnozowanie problemów z lisśćmi < /a >
Nazywa się to ścieżką względną, ponieważ plik docelowy jest względny względem położenia bieżącego pliku. Ścieżki względne ułatwiają tworzenie i testowanie witryny sieci Web w innym miejscu pliku niż to, w którym będzie ona ostatecznie przechowywana. Tworząc jak najwięcej odniesień względnych, unikniesz konieczności ponownego kodowania każdego adresu URL, gdy witryna zostanie przeniesiona do miejsca docelowego.
Podczas tworzenia łącza do pliku przechowywanego w podfolderze bieżącego można wskazać ten podfolder, ale w przeciwnym razie pozostawić ścieżkę względną. Załóżmy na przykład, że plik index.htm jest przechowywany w folderze o nazwie c: \ Spowiednik, a foliage.htm jest przechowywany w folderze c: \ Spowiednik \ artykuły, który można uznać za jego podfolder (lub folder podrzędny). Aby odwołać się do foliage.htm z poziomu index.htm, należy użyć takiego tagu:
< a href="artykuły/foliage.htm"> Diagnozowanie problemów z liśćmi < /a > Możesz także utworzyć łącze do pliku o jeden poziom wyżej (folder nadrzędny) z odnośnikiem względnym. Załóżmy na przykład, że chcesz odwoływać się do pliku index.htm z poziomu pliku leaves.htm (oba w tych samych lokalizacjach co poprzednio). Poprzedziłbyś odwołanie. ./, aby wskazać, że plik jest o jeden poziom wyżej: < a href="../index.htm"> Strona główna < /a >
Powrót
20.06.2020
Ustawianie okna docelowego
Domyślnie hiperłącze otwiera stronę, do której następuje odwołanie, w tym samym oknie przeglądarki. Oznacza to, że nowa strona zastępuje poprzednią stronę w przeglądarce. Zwykle jest to w porządku, ale w niektórych przypadkach możesz chcieć otworzyć hiperłącze w nowym oknie. Na przykład być może chcesz polecić odwiedzającym sprawdzenie strony w innej witrynie, ale nie chcesz, aby opuszczali Twoją witrynę. Aby skierować hiperłącze w celu otwarcia strony w nowym oknie, dodaj atrybut target = ? _ blank ? do znacznika < a >. Na przykład, aby otworzyć plik liście.html w nowym oknie, tag miałby następującą strukturę: < a href="liście.htm" target="_blank" > Diagnozowanie problemów z listami < /a > Uwaga : Atrybut target = jest niedozwolony w XHTML. W3C sugeruje używanie JavaScript w takich sytuacjach.
Powrót
21.06.2020
Hiperłącze do adresu e-mail
Hiperłącza mogą wskazywać na wszystko, nie tylko na strony internetowe. Możesz na przykład tworzyć hiperłącza do wiadomości e-mail, które uruchamiają domyślny program poczty elektronicznej użytkownika, tworzą nową wiadomość i wpisują adres odbiorcy. (Możesz także ustawić wypełnianie tematu wiadomości, jeśli chcesz). Hiperłącza e-mail są przydatne, gdy chcesz skierować kogoś do wysłania wiadomości do konkretnej osoby. Na przykład często podaje się link do wiadomości e-mail dla webmastera witryny. Aby utworzyć hiperłącze do adresu e-mail, użyj tego samego atrybutu href = jak poprzednio, ale zamiast adresu internetowego wpisz mailto: a następnie adres e-mail
< a href=mailto:support@adatum.com > Skontaktuj się z nami < /a >
Uwaga: Nie każdy, kto ma dostęp do Internetu, ma również skonfigurowany odpowiedni program poczty e-mail, aby korzystać z hiperłącza mailto:. Być może wolisz skonfigurować internetowy formularz kontaktowy. Nie wszystkie przeglądarki obsługują hiperłącza do wiadomości e-mail na żywo. Dobrym pomysłem jest podanie rzeczywistego adresu e-mail w formie tekstowej na stronie, na wypadek, gdyby ktoś nie mógł użyć Twojego hiperłącza. W takim przypadku tekst będzie odzwierciedlał adres w następujący sposób:
Skontaktuj się z < a href="mailto:support@adatum.com"> support@adatum.com < /a >
Przestroga Podanie adresu e-mail na publicznie dostępnej stronie internetowej będzie generować pewną ilość przychodzących wiadomości-śmieci lub spamu. Z tego powodu nie należy umieszczać głównego adresu e-mail na stronie publicznej. Jeśli masz własną domenę lub jeśli Twój dostawca usług internetowych lub firma hostingowa pozwala na posiadanie wielu adresów e-mail, utwórz specjalne konto, które będzie używane do kontaktu publicznego (lub poproś swojego specjalistę IT o utworzenie go dla Ciebie). W ten sposób, jeśli dostaniesz zbyt dużo niechcianej poczty, możesz usunąć ten adres i zacząć od nowa z nowym, bez zakłócania głównego konta e-mail. Jeśli nie masz dostępu do wielu kont e-mail, rozważ bezpłatne konto internetowe. Aby dodać domyślny wiersz tematu do wiadomości e-mail, dodaj atrybut? Subject = po adresie e-mail:
< a href=mailto:support@adatum.com?subject=Comment > Skontaktuj się z nami < /a >
Osoba używająca hiperłącza do skontaktowania się z tobą może zmienić wiersz tematu w swoim programie e-mail przed wysłaniem wiadomości. Wskazówka Nawet jeśli wszystkie wiadomości e-mail z witryny są kierowane do tej samej osoby, nadal możesz utworzyć wiele hiperłączy e-mail, z których każda ma inne domyślne wiersze tematu. Inna opcja, tytuł =, określa etykietkę ekranową hiperłącza. Ten atrybut wyświetla komunikat, gdy użytkownik umieści wskaźnik myszy nad hiperłączem. Domyślnie Etykietka ekranowa hiperłącza pokazuje adres linku, ale możesz ustawić, aby wyświetlał wszystko, co chcesz. W poniższym przykładzie, ponieważ tekst jest taki sam jak hiperłącze, marnotrawstwem byłoby, gdyby ScreenTip powtórzył to samo hiperłącze:
Skontaktuj się z < a href=mailto:support@adatum.com > support@adatum.com < /a >
Aby wyświetlić wiadomość Prosimy o kontakt z pytaniami lub komentarzami, dodaj do kodu:
< a href="mailto:support@adatum.com" title="Proszę o kontakt z pytaniami lub komentarzami" > support@adatum.com < /a >
Możesz także użyć atrybutu title =, aby pominąć zbędne fragmenty pełnego hiperłącza, aby goście nie widzieli ich na etykiecie ekranu. Na przykład utworzenie tytułu zawierającego tylko adres e-mail, a nie części tematu lub tytułu znacznika, ułatwia czytanie.
Powrót
22.06.2020
Tworzenie i hiperłącza do kotwic
Kotwica jest znacznikiem w dokumencie HTML, mniej więcej analogicznym do zakładki w dokumencie Word. Określasz lokalizację w dokumencie za pomocą nazwy kotwicy, a następnie możesz hiperłączyć bezpośrednio do tej kotwicy. Kotwice są najbardziej cenne w długich dokumentach z wieloma sekcjami. Zapewniają użytkownikom możliwość bezpośredniego przejścia do dowolnej sekcji, zamiast konieczności czytania lub przewijania całego dokumentu. Możesz to zrobić wewnętrznie, tworząc listę hiperłączy na górze dokumentu, lub możesz to zrobić zewnętrznie, dołączając nazwę kotwicy do hiperłącza do innego dokumentu. Proces składa się z dwóch części: oznaczasz lokalizację kotwicy, a następnie tworzysz hiperłącze, które się do niej odwołuje. Aby zdefiniować kotwicę, utwórz znacznik < a > wokół tekstu docelowego i dołącz atrybut name =. Załóżmy na przykład, że masz nagłówek o treści Wniosek i chcesz utworzyć punkt kontrolny o tej samej nazwie:
< a name="conclusion" > Wniosek < /a >
Aby odwołać się do punktu kotwiczenia, dołącz jego nazwę do atrybutu href =. Poprzedź nazwę kotwicy znakiem funta (#). Jeśli punkt kontrolny znajduje się w tym samym dokumencie co hiperłącze, możesz użyć odnośnika względnego w ten sposób:
< a href="#conclusion" > Wyświetl wniosek < /a>
W przeciwnym razie musisz podać nazwę pliku, w którym znajduje się kotwica. Na przykład, jeśli kotwica znajdowałaby się w pliku o nazwie report.htm, wyglądałaby następująco:
< a href="report.htm#conclusion" > Wyświetl wniosek < /a >
Te same zasady dotyczą nazwy pliku, jak w przypadku zwykłych hiperłączy. Jeśli dokument nie znajduje się w tym samym folderze, musisz odwołać się do folderu absolutnie lub względnie.
Powrót
23.06.2020
Hiperłącza do innych treści
Hiperłącze może odnosić się do dowolnego pliku, nie tylko dokumentu internetowego. Możesz skorzystać z tego, aby połączyć się z innymi treściami, takimi jak dokumenty Microsoft Office, skompresowane pliki archiwów, takie jak pliki .zip, a nawet pliki programów wykonywalnych, takie jak narzędzia instalacyjne dla programów, które chcesz udostępnić odwiedzającym. Procedura tworzenia linków do innych treści jest taka sama jak w przypadku linków do strony internetowej; jedyną różnicą jest nazwa pliku podana w hiperłączu.
Uwaga: Możesz tworzyć hiperłącza do zdjęć, ale połączenie z obrazem za pomocą znacznika < a > otwiera obraz w jego własnym oknie, zamiast na stronie internetowej. Później dowiesz się, jak umieszczać zdjęcia na samych stronach.
Zanim utworzysz link do treści innej niż HTML, musisz pamiętać, że nie każdy ma to samo oprogramowanie. Na początku może wydawać się świetnym pomysłem na przykład dostarczenie zestawu raportów jako dokumentów Word, ale co z ludźmi, którzy nie mają zainstalowanego Worda? Niektóre przeglądarki mają funkcję, która automatycznie próbuje pobrać odpowiednią przeglądarkę, odtwarzacz lub wtyczkę (rozszerzenie przeglądarki do obsługi określonego typu plików) w przypadku czegokolwiek, czego nie może wyświetlić jako treści natywnej. Jest to świetna funkcja, gdy działa, ale nie jest niezawodna, ponieważ nie wszyscy Twoi użytkownicy będą mieli przeglądarkę z tą funkcją. Jeśli nie podajesz alternatywy HTML dla pliku w formacie zastrzeżonym, powinieneś przynajmniej podać hiperłącze do bezpłatnej przeglądarki, która może wyświetlać ten typ pliku. Oto niektóre z popularnych przeglądarek i adresy, z których można je pobrać:
• Adobe Reader: get.adobe.com/reader
• Centrum pobierania Microsoft, oferujące przeglądarki Microsoft Office (PowerPoint, Excel, Word) oraz wersje próbne Microsoft Office http://www.microsoft.com/downloads/en/default.aspx
Wskazówka: Po 60-dniowym okresie próbnym oprogramowanie w wersji próbnej pakietu Office działa w trybie zmniejszonej funkcjonalności, który nadal umożliwia użytkownikom przeglądanie dokumentów utworzonych za pomocą programów Word, Excel i PowerPoint.
Powrót
24.06.2020
Kluczowe punkty
• Aby utworzyć hiperłącze, użyj znacznika < a > z atrybutem href =. Tag < a > jest dwustronny, więc dodaj < /a > po tekście, którego użyjesz jako hiperłącza.
• Używaj ścieżek bezwzględnych (czyli ścieżek zawierających pełną lokalizację pliku), odnosząc się do treści spoza własnej witryny sieci Web. Użyj ścieżek względnych, odnosząc się do plików w tym samym folderze co bieżąca strona lub w folderze nadrzędnym lub podrzędnym.
• Aby otworzyć cel hiperłącza w nowym oknie, dołącz atrybut target = "_ blank" w znaczniku < a >.
• Aby utworzyć hiperłącze, które otwiera wstępnie zaadresowaną wiadomość e-mail, poprzedz adres adresem mailto :, na przykład mailto: support@microsoft.com.
• Aby utworzyć punkt kontrolny, użyj atrybutu name = ze znacznikiem < a >, na przykład < a name= obj.
• Aby odwołać się do punktu kontrolnego, odwołaj się do nazwy punktu kontrolnego, ale pamiętaj, aby poprzedzić nazwę symbolem funta (#) w atrybucie href =, jak w < a href="#equipmentiorze >.
• Można tworzyć hiperłącza do innych rodzajów treści poza stronami internetowymi, ale należy dołączyć hiperłącza do przeglądarek dla wszystkich typów treści, które mogą nie być obsługiwane przez wszystkie przeglądarki i / lub udostępnić alternatywne wersje HTML lub zwykłego tekstu.
• Aby udostępnić przeglądarkę określonego rodzaju treści, utwórz hiperłącze wskazujące witrynę, z której można ją pobrać, lub zapisz przeglądarkę na własnej stronie internetowej i podaj link do niej.
Powrót
25.06.2020
Wprowadzenie do arkuszy stylów
Po zapoznaniu się z kaskadowymi arkuszami stylów będziesz się zastanawiać, jak ktokolwiek kiedykolwiek miał cierpliwość do tworzenia dużych stron internetowych bez nich. Kaskadowe arkusze stylów mogą zaoszczędzić ogromną ilość czasu, standaryzując formatowanie całej strony internetowej lub grupy stron. Kaskadowy arkusz stylów (CSS) to kod określający formatowanie w oparciu o style. Możesz przechowywać kod CSS w sekcji < head > strony, do której chcesz go zastosować, lub możesz przechowywać go w osobnym pliku z rozszerzeniem .css (który działa dobrze, jeśli chcesz zastosować ten sam CSS do więcej niż jednej strony internetowej). Formatowanie następnie "kaskaduje" w dół do poszczególnych wystąpień każdego znacznika. W razie potrzeby możesz także umieścić styl bezpośrednio w obrębie pojedynczego znacznika. W tych wpisach dowiesz się, jak konstruować arkusze stylów i dołączać je do dokumentu - umieszczając je w samym dokumencie lub łącząc się z nimi jako osobny plik. Dowiesz się, jak zdefiniować styl i jak go zastosować. Następne kilkanaście wpisów będzie zawierać dalsze możliwości ćwiczenia z różnymi rodzajami stylów
Powrót
26.06.2020
Zrozumienie stylów
Mówiąc najprościej, styl jest regułą formatowania. Tę regułę można zastosować do pojedynczego znacznika, wszystkich wystąpień określonego znacznika w dokumencie lub wszystkich wystąpień określonego znacznika w grupie dokumentów. W rozdziale 4 zobaczyłeś, jak używać atrybutu style = w przypadku list uporządkowanych i nieuporządkowanych. Na przykład, aby użyć kwadratowego znaku wypunktowania na nieuporządkowanej liście, należy użyć atrybutu style = z tagiem < ul > w następujący sposób:
< ul style = "list-style-type: square" >
Załóżmy jednak, że masz w dokumencie kilka nieuporządkowanych list i chcesz, aby wszystkie używały tego samego kwadratowego znaku punktora. Możesz wpisać atrybut stylu w otwierającym tagu < ul > dla każdego z nich, ale to dużo pracy. Zamiast tego możesz utworzyć sekcję < style > w sekcji < head >, która tworzy globalną regułę stylu dla wszystkich znaczników < ul > w dokumencie. Sekcja < style > może wyglądać następująco:
< style type="text/css" >
ul {
list-style-type: square
}
< /style >
Nie przejmuj się łamaniem linii; są po prostu sposobem na uczynienie twojego kodu bardziej czytelnym. Wiele programów do edycji CSS innych firm formatuje reguły stylu z dodatkowymi podziałami linii. Jednak powyższy kod można również napisać w następujący sposób:
< style type = "text / css" > ul {list-style-type: square} < /style > Zauważ, że znacznik < ul > nie ma nawiasów kątowych. Zauważ też, że reguły znacznika pojawiają się w nawiasach klamrowych. Oprócz tych dwóch drobnych różnic, składnia jest dokładnie taka sama, jak w przypadku zastosowania bezpośrednio do określonego znacznika < ul >. Nie musisz dołączać atrybutu style =, ponieważ cała definicja jest zawarta w tagu < style >.
Możesz zdefiniować wiele reguł w ramach jednej sekcji < style >. Na przykład jeśli chcesz rozwinąć ten przykład, aby również określić, że uporządkowane listy są oznaczone małymi literami, a nie cyframi, użyj następujących
< style type="text/css" >
ul {
list-style-type: square
}
ol {
list-style-type: lower-alpha
}
< /style >
Teraz załóżmy, że chcesz, aby te specyfikacje dotyczyły wszystkich wypunktowanych i numerowanych list we wszystkich dokumentach w całej witrynie sieci Web. Możesz utworzyć zewnętrzny kaskadowy arkusz stylów, a następnie odwołać się do tego arkusza stylów w sekcji < head > każdego dokumentu, do którego powinien mieć zastosowanie. Na przykład, oto cały tekst zewnętrznego kaskadowego arkusza stylów (zwykły plik tekstowy z rozszerzeniem .css), który zastosowałby określone reguły.
ul {
list-style-type: square;
}
ol {
list-style-type: lower-alpha;
}
Jest to ten sam kod, który został zawarty w tagu < style > w poprzednim przykładzie. Gdy reguły stylów pojawiają się w osobnym pliku, nie potrzebujesz tagu < style >. Kaskadowy arkusz stylów może stać się bardzo złożony, jeśli zawiera wiele reguł, ale zasady są zawsze takie same jak w tych przykładach.
Powrót
27.06.2020
Konstruowanie reguł stylu
Osadzony arkusz stylów składa się z dwustronnego znacznika < style > umieszczonego w sekcji < head > dokumentu. Pomiędzy tagami < head > i < /head > definiujesz reguły dla różnych stylów. Reguła stylu zaczyna się od nazwy znacznika lub innego elementu, którego dotyczy styl. Na przykład, jeśli tworzysz regułę, która będzie obowiązywać dla wszystkich instancji znacznika < h1 >, uruchom regułę h1 (bez nawiasów):
< style>
h1
< /style >
Wokół h1 nie są potrzebne nawiasy, ponieważ są one już zawarte w tagu < style >.
Następnie wpisz zestaw nawiasów klamrowych (możesz umieścić je w osobnych wierszach, aby zwiększyć czytelność, jeśli chcesz). Następnie umieść regułę w nawiasach klamrowych. Na przykład, aby utworzyć regułę zmieniającą tekst nagłówka pierwszego poziomu na czerwony, użyj następujących poleceń:
< style >
h1 {
color : red
}
< /style >
Jeśli chcesz zastosować więcej niż jedną regułę, na przykład kolor i krój pisma, rozdziel reguły średnikami w nawiasach klamrowych. Zapisywanie każdej reguły we własnej linii jest zwyczajowe, ale nie jest wymagane. Na przykład, aby określić, że tekst nagłówka musi mieć zarówno czerwony, jak i wysokość 14 pikseli, uwzględnij w swojej regule:
< style >
h1 {
color: red;
font-size: 14px;
}
< /style >
Jeśli do wielu tagów powinna być zastosowana ta sama reguła, możesz je wymienić razem i oddzielić je przecinkami. Na przykład, jeśli wszystkie style nagłówków od < h1 > do < h6 > powinny być czerwone, możesz napisać:
< style >
h1, h2, h3, h4, h5, h6 {
color: red
}
< /style >
Powrót
28.06.2020
Tworzenie stylów dla zagnieżdżonych znaczników
Czasami możesz chcieć zastosować określone formatowanie tylko wtedy, gdy jeden znacznik jest zagnieżdżony w innym. Na przykład być może chcesz, aby lista wypunktowana zagnieżdżona na innej liście wypunktowanej używała innego znaku wypunktowania. Jeśli po prostu utworzyłeś regułę dla całego znacznika, cały tekst, do którego zastosowano ten znacznik, zostałby sformatowany w ten sam sposób. Na przykład, jeśli utworzyłeś styl dla znacznika < ul >, wszystkie wypunktowane elementy będą miały ten sam znak wypunktowania. Zamiast tego musisz to określić, jeśli chcesz zastosować regułę tylko do zagnieżdżonego znacznika. Aby to zrobić, zamiast używać pojedynczej nazwy stylu na początku reguły, określ, że element jest zagnieżdżony, wyświetlając nazwę stylu nadrzędnego, a następnie nazwę stylu potomnego (potomnego). Na przykład, aby użyć okrągłych wypunktowań dla wszystkich wypunktowanych list zagnieżdżonych w listach numerowanych, określ następujące ustawienia:
ol ul {list-style-type: circle}
Ta technika działa z wieloma zagnieżdżonymi poziomami. Na przykład, aby zastosować to formatowanie tylko do list wypunktowanych zagnieżdżonych w innych listach wypunktowanych zagnieżdżonych w listach numerowanych, określ następujące ustawienia:
ol ul ul {list-style-type: circle}
Możesz to zrobić z dowolnymi atrybutami tekstu, nie tylko tymi związanymi z typem wypunktowania lub typu. Na przykład, aby cały pogrubiony tekst, który pojawia się na nieuporządkowanych listach, był niebieski, podaj następujące informacje:
ul b {color: blue}
Powrót
29.06.2020
Tworzenie klas i identyfikatorów do stosowania stylów
Jak właśnie zauważyłeś, reguły stylu mogą modyfikować wbudowane tagi w HTML, zmieniając ich formatowanie. Style się jednak nie kończą. Możesz tworzyć własne style, tworząc klasy i identyfikatory. Klasy i identyfikatory oznaczają niektóre elementy, dzięki czemu można się do nich odwoływać w arkuszu stylów. Klasę można zastosować do wielu wyborów, podczas gdy identyfikator jednoznacznie identyfikuje określony wybór w dokumencie. (Różne dokumenty mogą używać tego samego identyfikatora.) Załóżmy na przykład, że masz nieuporządkowaną listę produktów i chcesz, aby nowe produkty były wyświetlane na czerwono. Jednym ze sposobów na to byłoby ręczne dodanie atrybutu "style = "color: red" do każdego z elementów listy, taki jak ten:
< li style = "color: red" > Techniki opryskiwania drzew owocowych < /li >
Jednak ta metoda nie jest optymalna, ponieważ jeśli zmienisz zdanie i zdecydujesz, że zamiast tego nowe elementy będą niebieskie, będziesz musiał wprowadzić zmiany ręcznie dla każdej instancji. Lepszym sposobem jest utworzenie klasy o nazwie new i zdefiniowanie jej formatowania w obszarze < style >. Następnie możesz zastosować nową klasę do każdego punktu który chcesz wyróżnić. Aby zastosować styl klasy, dodaj atrybut class = do znacznika otwierającego dla elementu. Na przykład, aby element listy stał się częścią nowej klasy, użyj następujących poleceń:
< li class = "new" > Techniki opryskiwania drzew owocowych < /li >
Następnie w obszarze < style > dodaj styl, który definiuje klasę jako czerwoną. Jedyną różnicą między zdefiniowaniem klasy a ponownym zdefiniowaniem standardowego znacznika jest umieszczenie kropki przed nazwą klasy, jak pokazano tutaj:
< styl >
.new {
color: red
}
< /style >
Identyfikatory działają w ten sam sposób, z tym wyjątkiem, że można je stosować tylko raz na dokument. Na przykład możesz zastosować identyfikator do unikalnego nagłówka. Aby utworzyć identyfikator, dodaj atrybut id = do znacznika, jak poniżej:
< li id = "special" > Techniki opryskiwania drzew owocowych < /li >
Następnie zdefiniuj identyfikator w obszarze < styl>, poprzedzając nazwę identyfikatora symbolem skrótu (#), w następujący sposób:
< styl >
#special {
color: red
}
< /style >
Powrót
30.06.2020
Stosowanie stylów do hiperłączy
Domyślnie w większości przeglądarek hiperłącza tekstowe są wyświetlane jako podkreślony niebieski tekst, a odwiedzane hiperłącza (czyli hiperłącza do stron, które już odwiedziłeś) są wyświetlane jako podkreślony fioletowy tekst. Prawdopodobnie widziałeś strony internetowe, w których tak nie było, i być może zastanawiałeś się, jak to zrobili. Możesz kontrolować formatowanie hiperłączy, umieszczając atrybuty w znaczniku < a > dla każdego linku, chociaż jest to żmudne. Na przykład, aby utworzyć indywidualny hiperłącze w kolorze magenta, użyj tego:
< a href="xxx.htm" style="color: magenta" > Diagnozowanie problemów z listami < /a >
Jak można się było dowiedzieć w poprzedniej sekcji, można zastosować klasę do wszystkich hiperłączy, ale ta metoda nie umożliwia rozróżnienia między linkami odwiedzanymi a nieodwiedzonymi. Idealnie byłoby, gdyby były w różnych kolorach, a nie jest to możliwe, gdy używasz klasy do ich zdefiniowania. Aby zastosować różne kolory, możesz użyć pseudoklas. Pseudoklasa to klasa, która używa zmiennej do określania członkostwa. HTML definiuje pseudoklasy zwane linkami i odwiedzanymi odpowiednio dla nieodwiedzonych i odwiedzanych hiperłączy. Aby korzystać z pseudoklas, nie trzeba niczego stosować do poszczególnych tagów hiperłączy w sekcji < body >. Po prostu stwórz regułę stylu w sekcji < style > dla pseudoklas, a przeglądarka zastosuje tę regułę w całym dokumencie. Na przykład, aby wszystkie odwiedzane linki miały kolor magenta i wszystkie nieodwiedzone linki były czarne:
< styl >
a: link {color: black}
a: visited {color: magenta}
< /style >
Istnieją trzy dodatkowe pseudoklasy, których można używać ze stylami hiperłączy:
• focus : Służy do linków, które zostały wybrane za pomocą klawiatury, ale jeszcze nie zostały aktywowane. Nie stanowi to problemu po wybraniu łącza za pomocą myszy, ponieważ kliknięcie łącza zarówno zaznacza, jak i aktywuje. Ta pseudo-klasa nie jest powszechnie używana, ponieważ tak mało osób porusza się po stronach za pomocą klawiatury, że nie warto podejmować kłopotów.
• hover : Służy do zmiany wyglądu łącza po umieszczeniu myszy nad nim. Możesz użyć tej pseudoklasy, aby zmienić kolor linku, stać się pogrubionym itd., Gdy użytkownik na niego wskaże. • active : Służy do kliknięcia łącza. Natychmiast po kliknięciu link zmienia się w stan odwiedzonego. Możesz użyć tej pseudoklasy, jeśli ustawiłeś link i stany odwiedzane na tę samą wartość, ale chcesz, aby link zmienił się na chwilę po kliknięciu.
Uwaga : Łącze może znajdować się w więcej niż jednym stanie jednocześnie. Na przykład łącze może być odwiedzane, ale także w stanie najechania kursorem, jeśli wskaźnik myszy jest nad nim umieszczony. Dlatego kolejność wyświetlania reguł stylów dla łączy jest znacząca, ponieważ późniejsze reguły zastąpią wcześniejsze. Zdefiniuj je w następującej kolejności, aby uniknąć nieporozumień: link, odwiedzone, fokus, aktywowanie, aktywowanie.
Powrót
Powrót
< ol start = "3" >
Pamiętaj, że zawsze podajesz liczbę początkową jako cyfrę arabską, nawet jeśli wybrałeś dla tej listy styl rzymski lub literowy. Możesz użyć atrybutu value = "n" dla pojedynczego elementu listy