nie jest przestarzały w HTML5; nadal jest całkowicie ważny. Możesz łączyć pozycjonowanie ze specyfikacją szerokości, aby umieścić każdy podział w precyzyjnym prostokątnym obszarze na ekranie. Na przykład, aby umieścić górny pasek nawigacyjny dokładnie 100 pikseli od góry strony i ustawić go na 150 pikseli szerokości, użyj następującego polecenia:

#topnav {pozycja: bezwzględna; top: 100px; szerokość: 150px}

lub, jeśli zamiast tego używasz tagu < nav >, użyj tego:

nav {pozycja: bezwzględna; top: 100px; szerokość: 150px} Reguła stylu pozycji skutkuje pozycjonowaniem, które nie bierze pod uwagę innych elementów na stronie. Może to przysporzyć Ci kłopotów, ponieważ elementy mogą potencjalnie nakładać się nieatrakcyjnie, ale można to również wykorzystać do celowego tworzenia nakładających się elementów. Na przykład możesz użyć tej funkcji do nałożenia tekstu na zdjęcie.


Powrót

06.08.2020

Podziały formatowania

Podziały formatujesz tak samo, jak inne elementy. Możesz użyć stylów, aby określić rodzinę czcionek, styl czcionki, grubość czcionki, wyrównanie, kolor i wszystko inne, co omówiono do tej pory w tej książce. Możesz zmienić kolor tła działu za pomocą reguły stylu koloru tła. Na przykład, aby dodać tło w kolorze khaki do paska nawigacji, użyj następującego polecenia:

nav {float: left; width: 150px; padding-top: 15px; background-color: khaki}

Jednak gdy zaczniesz stosować kolory do podziałów, możesz odkryć pewne podstawowe problemy ze stroną. Na przykład strona The Garden Company z poprzedniego przykładu wygląda całkiem nieźle, gdy wszystko ma białe tło, ale obserwuj, co się stanie, gdy dodasz to tło khaki do paska nawigacji, jak pokazano na poniższym obrazku. Jest kilka problemów z tym układem. Po pierwsze, główny podział, który ma pozycję bezwzględną, zachodzi na pasek nawigacji. Główną przyczyną jest to, że pasek nawigacji jest szerszy niż powinien. Ponadto grafika przycisków na pasku nawigacyjnym ma prostokątne białe tło - fakt, który do tej pory nie był oczywisty. Możesz łatwo naprawić problemy z rozmiarem i pozycją, modyfikując style. Na przykład możesz zmniejszyć szerokość paska nawigacyjnego do 100 pikseli, jak pokazano poniżej:

nav {float: left; width: 100px; padding-top: 15px; background-color: khaki}

Niestety, problemu z tłem przycisku nie można rozwiązać za pomocą HTML; musisz edytować grafikę przycisku w programie obsługującym przezroczystość, ustawiając przezroczyste tło każdego przycisku. Jeśli Twój program do edycji grafiki nie obsługuje przezroczystości, jednym z rozwiązań jest zmiana koloru tła każdego przycisku na khaki. Ta metoda nie jest jednak tak dobra, ponieważ możesz później zdecydować się na zmianę koloru paska nawigacji. Na przezroczystym tle przyciski będą ładnie komponować się z dowolnym kolorem tła.


Powrót

07.08.2020

Kluczowe punkty

•  Aby utworzyć podział, otocz część strony znacznikiem < div >

•  HTML5 używa znaczników semantycznych do definiowania sekcji strony. Niektóre z najczęstszych to < header >, < footer >, < nav >, < article >, < aside > i < section >. Nie wszystkie przeglądarki obsługują jeszcze te tagi. Internet Explorer 9.0 i nowszy działa, podobnie jak obecne wersje Google Chrome i Firefox.

•  Każdy znacznik podziału ma atrybut id, który powinien być unikalny w obrębie tego dokumentu. Jednak wiele dokumentów może mieć te same nazwy działów i faktycznie jest to zalecane, aby jeden zewnętrzny arkusz stylów mógł formatować wiele dokumentów.

•  Jednym ze sposobów umieszczania podziału jest użycie atrybutu zmiennoprzecinkowego. Na przykład, aby umieścić podział po lewej stronie (do wykorzystania jako pasek nawigacyjny), użyj float: left.

•  Innym sposobem pozycjonowania dywizji jest użycie atrybutu pozycji. Prawidłowe wartości to wartości bezwzględne, względne i stałe. Korzystając z atrybutu pozycji, należy również użyć atrybutu góra, dół, lewo i / lub prawo, aby określić wartość liczbową pozycji.

- W przypadku pozycjonowania bezwzględnego element jest pozycjonowany absolutnie w swoim elemencie nadrzędnym, którym zwykle jest tag < body >, więc element jest pozycjonowany absolutnie na stronie.

- W przypadku pozycjonowania względnego element jest pozycjonowany względem swojej pozycji domyślnej.

- Przy stałym pozycjonowaniu element jest pozycjonowany względem okna przeglądarki.

•  Podziały można formatować przy użyciu tych samych stylów formatowania znaków, akapitów i stron, których nauczyłeś się w całej książce, w tym koloru tła i obrazu tła.


Powrót

08.08.2020

Tworzenie prostej tabeli

Znacznik < table > tworzy tabelę HTML. W tym tagu umieszczasz jeden lub więcej tagów < tr >, które definiują wiersze tabeli, a w każdym tagu < tr > definiujesz jeden lub więcej tagów < td >, które definiują komórki.

< table >

< tr >

< td > Komórka 1 < /td >

< td > Komórka 2 < /td >

< /tr >

< tr >

< td > Komórka 3 < /td >

< td > Komórka 4 < /td >

< /tr >

< /table >

Wyświetlany w przeglądarce kod, który właśnie pokazano, tworzy tabelę. Ta tabela nie jest zbyt interesująca w jej stanie domyślnym. A ponieważ domyślnie tabele HTML nie mają obramowań ani cieniowania, ledwo można stwierdzić, że to w ogóle tabela. Tekst po prostu pojawia się tam, gdzie powinien się pojawić zgodnie ze specyfikacją tabeli. Liczba kolumn w tabeli jest równa największej liczbie tagów < td > w dowolnym wierszu. Zobacz, co się stanie, gdy dodam kolejny tag < td > do drugiego wiersza. Zamierzam również dodać atrybut border = "1" w tagu < table >, aby obramowania tabeli były widoczne. dzięki czemu możesz lepiej zobaczyć, co się dzieje. Dodatki zaznaczono pogrubioną czcionką w poniższym kodzie:

< table border = "1" >

< tr >

< td > Komórka 1 < /td >

< td > Komórka 2 < /td >

< /tr >

< tr >

< td > Komórka 3 < /td >

< td > Komórka 4 < /td >

< td > Komórka 5 < /td >

< /tr >

< /table >

Zwróć uwagę, że ponieważ wiersze nie mają takiej samej liczby komórek, przeglądarka wstawia puste miejsce w wierszu, które nie zawiera dodatkowej komórki.


Powrót

09.08.2020

Określanie rozmiaru tabeli

Domyślnie rozmiar tabeli dostosowuje się do wszystkich swoich komórek, a wysokość i szerokość każdej komórki zmienia się, aby pomieścić największy wpis w tym wierszu lub kolumnie. Struktura tabeli rozszerza się lub kurczy w razie potrzeby podczas dodawania lub usuwania komórek lub zawartości w komórkach.

Przy tych domyślnych ustawieniach tabela może wyglądać na raczej ciasną, zwłaszcza jeśli nie używasz ramek między komórkami. Na przykład w tabeli z poprzedniego ćwiczenia mile widziane byłoby dodatkowe miejsce. Jednym ze sposobów dodania dodatkowych odstępów w tym przypadku byłoby ustawienie całkowitego rozmiaru tabeli na 100 procent. Zmusza to tabelę do rozszerzenia w poziomie, aby wypełnić dostępne miejsce w oknie przeglądarki. Aby to zrobić, dodaj atrybut szerokości do otwierającego znacznika < table > w następujący sposób:

< table width=100% >

Alternatywnie możesz umieścić specyfikację szerokości w stylu, na przykład:

< table style="width: 100%" >

Aby zastosować specyfikację szerokości do wszystkich tabel, umieść ją w arkuszu stylów, jak pokazano poniżej:

table {width: 100%} Nie musisz określać 100 procent; możesz także ustawić szerokość tabeli na 50, 75 lub inną wartość procentową. Możesz zrobić to samo z wysokością tabeli, rozszerzając ją i wypełniając w pionie całe okno przeglądarki, wykonując następujące czynności:

table (height: 100%)

Jedyną wadą określania szerokości i / lub wysokości w procentach jest to, że nie możesz mieć pewności, jakiego rozmiaru okna przeglądarki będą używać odwiedzający Twoją witrynę. Ten przykład wygląda świetnie w oknie 800 × 600. Ale w mniejszym oknie staje się tak samo ciasny jak poprzednio, a tekst zawija się w wiele linii. W większym oknie dodatkowa przestrzeń między kolumnami staje się wyolbrzymiona. Alternatywnym podejściem jest określenie liczby pikseli dla szerokości tabeli. W ten sposób szerokość wymagana przez tabelę w pikselach nie zmienia się bez względu na rozmiar okna przeglądarki. Na przykład, aby zablokować tabelę do szerokości 750 pikseli, użyj:

< table width = "750px" >

Kiedy przeglądarka renderuje tabelę o stałej szerokości w mniejszym oknie przeglądarki, w oknie pojawia się poziomy pasek przewijania. Po wyświetleniu w większym oknie dodatkowa przestrzeń pozioma pojawia się po prawej stronie tabeli (zakładając, że tabela jest wyrównana do lewej), a nie jest rozłożona na całą tabelę. Chociaż jest to mniej powszechne, mogą również wystąpić przypadki, w których warto ustawić określoną wysokość tabeli, w procentach lub w pikselach. Robisz to za pomocą tej samej metody, ale zamiast tego określasz wysokość. Na przykład w tagu użyj tego:

< table height = "400px" >

Aby określić wysokość w regule stylu, użyj tego:

table (height: 400px}


Powrót

10.08.2020

Określanie szerokości kolumny

Ustawienie całkowitego rozmiaru tabeli jest przydatne, ale w celu uzyskania większej kontroli możesz preferować osobne ustawienie szerokości każdej kolumny. Aby ustawić szerokość kolumny na pewną minimalną kwotę, określ szerokość w tagu < td > dla dowolnej komórki w tej kolumnie. Możesz użyć tej samej metody, co w przypadku tagu < table > w poprzedniej sekcji, jak pokazano w sekcji następująco:

< td width = "200px" >

Aby określić szerokość kolumny za pomocą stylu, użyj tego:

< td style = "width: 200px" >

Tradycyjne miejsce do ustawiania szerokości kolumny znajduje się w pierwszym wierszu tabeli, ale nie jest to wymagane; możesz ustawić szerokość dowolnej komórki w dowolnym wierszu. Cała kolumna będzie miała szerokość najszerszej komórki w tej kolumnie. W poniższym kodzie określone wartości są ustawione dla szerokości kolumn:

< table border="1" >

< tr >

< td width="100px" > < /td >

< td width="400px" > < /td >

< td width="100px" > < /td >

< /tr >

< tr >

< td >& nbsp;< /td >

< td >& nbsp;< /td >

< td >& nbsp;< /td >

< /tr >

< /table >

Porada: W przedstawionych tutaj przykładach zastosowano nierozdzielające spacje ( ) jako symbole zastępcze w pustych komórkach. Jest to opcjonalne, ale powoduje, że pusta tabela pojawia się tak, jak będzie wyglądać po umieszczeniu zawartości w komórkach, co może być ważne, gdy sprawdzasz swoją pracę w oknie przeglądarki podczas tworzenia strony.

Jeśli wprowadzisz tekst w jednej z komórek, który przekracza szerokość kolumny, przeglądarka zawinie tekst w wielu wierszach

Uwaga: Zawijanie tekstu przedstawione w poprzednim przykładzie nie jest uniwersalne we wszystkich przeglądarkach. Na przykład niektóre starsze wersje przeglądarki Internet Explorer będą nadal rozszerzać pierwszą kolumnę, aby zmieścić cały tekst w jednym wierszu. To ilustruje znaczenie sprawdzania swojej pracy wielu przeglądarek.

Jeśli poszerzysz okno przeglądarki, tekst pozostanie zawijany, ponieważ szerokość kolumn jest stała. Możesz także określić szerokość kolumny w procentach, dla różnych zachowań zawijania i zmiany rozmiaru przy różnych szerokościach okna przeglądarki. Załóżmy w poprzednim przykładzie, że określono odpowiednio 20 procent, 60 procent i 20 procent dla każdej z trzech kolumn:

< table border="1" >

< tr >

< td width="20%" > < /td >

< td width="60%" > < /td >

< td width="20%" > < /td >

< /tr >

< tr >

< td > < /td >

< td > < /td >

< td > < /td >

< /tr >

< /table >

Zacząłbyś od bardzo małego stołu, ponieważ jest on tak duży, jak musi być, aby pomieścić jego zawartość.

Jednak po dodaniu tekstu do komórki tabela rozszerza się. Pamiętaj, że tabela rozwija się proporcjonalnie; pierwsza kolumna będzie zawsze zajmować 20 procent szerokości całej tabeli, druga kolumna 60 procent i tak dalej. Szerokość okna przeglądarki określa, jak bardzo ta pierwsza kolumna może się rozszerzyć, zachowując proporcje. Oto jak wygląda przykładowa tabela w oknie przeglądarki o wymiarach 800 × 600, z przykładowym tekstem wprowadzonym w pierwszej komórce. Jeśli jednak rozszerzysz okno przeglądarki, na przykład do 1024 × 768, komórki tabeli rozciągną się, aby wypełnić dostępne miejsce, zachowując proporcje 20/60/20 procent.

Jak można się domyślić, sytuacja może się skomplikować, gdy zaczniesz łączyć ogólne szerokości tabeli z szerokościami poszczególnych komórek. Jeśli tabela nie wygląda tak, jak oczekiwano, spróbuj usunąć wszystkie specyfikacje szerokości ze znaczników < table > i < td > oraz wszystkie związane z szerokością zasady stylu z arkusza stylów, a następnie zacznij od nowa.


Powrót

11.08.2020

Łączenie komórek tabeli

Jak widzieliśmy w poprzednich sekcjach, każda komórka w danym wierszu musi mieć tę samą wysokość, a każda komórka w danej kolumnie musi mieć tę samą szerokość. Nie można nadać poszczególnym komórkom różnych wysokości lub szerokości, ale można objąć (scalić) dwie lub więcej sąsiednich komórek, tak aby jedna komórka obejmowała wiele wierszy i / lub kolumn. Ta technika jest przydatna do wyśrodkowania tekstu w kilku kolumnach. Przydaje się również przy tworzeniu układów stron opartych na tabelach. Aby scalić komórkę z sąsiednimi komórkami po jej prawej stronie, użyj atrybutu colspan i określ liczbę kolumn, które mają zostać połączone, na przykład to:

< td colspan = "3" >

Aby scalić komórkę z sąsiednimi komórkami pod nią, użyj atrybutu rowspan i określ liczbę wierszy, które mają zostać połączone, jak pokazano poniżej:

< td rowspan = "2" >

Korzystając z tych dwóch atrybutów, możesz tworzyć wyrafinowane układy tabel. Na przykład poniższa tabela ma pięć kolumn i pięć wierszy, ale niektóre komórki obejmują wiele kolumn lub wierszy:

< table border="1" >

< tr >

< td colspan="2" rowspan="2" >Survey Results< /td >

< td colspan="3" >Age< /td >

< /tr >

< tr >

< td >12 to 25< /td >

< td >26 to 40< /td >

< td >Over 40< /td >

< /tr >

< tr >

< td rowspan="3" >"What is your dream vacation destination?"< /td >

< td >Disneyworld< /td >

< td >25%< /td >

< td >50%< /td >

< td >25%< /td >

< /tr >

< tr >

< td >Las Vegas< /td >

< td >25%< /td >

< td >50%< /td >

< td >25%< /td >

< /tr >

< tr >

< td >Europe< /td >

< td >25%< /td >

< td >50%< /td >

< td >25%< /td >

< /tr >

< /table >


Powrót

12.08.2020

Używanie tabel do układu strony

Oprócz ich wartości przy układaniu danych tabelarycznych, tabele są również przydatne w języku HTML ze względu na ich możliwości tworzenia struktury stron. Strona internetowa ma zwykle pasek nawigacyjny u góry lub po lewej stronie. Dość łatwo jest utworzyć poziomy pasek nawigacji z regularnymi akapitami, ale aby utworzyć pionowy pasek nawigacji, musisz w jakiś sposób podzielić stronę na sekcje. Jednym ze sposobów jest użycie podziałów. Innym sposobem jest użycie tabeli. Korzystając z tabeli do układu strony, możesz umieścić hiperłącza nawigacyjne w kolumnie najbardziej wysuniętej na lewo, a następnie umieścić treść treści w innych kolumnach. Komórki tabeli pełnią rolę kontenerów, w których można umieścić wszystko: akapity, listy, nagłówki, grafikę i tak dalej. Niektórzy projektanci stron internetowych wolą umieszczać wszystko w tabeli i używać zakresów wierszy i kolumn do scalania komórek w razie potrzeby. Inni umieszczają tylko określoną zawartość w tabeli, pozwalając reszcie tekstu unosić się wokół niej. Umiejętności, których nauczyłeś się do tej pory w tym rozdziale, przydadzą się podczas tworzenia układów tabelarycznych. Możesz określić dokładne szerokości kolumn za pomocą pikseli lub ich względną szerokość w procentach, a także utworzyć rozpiętości wierszy lub kolumn według potrzeb.


Powrót

13.08.2020

Kluczowe punkty

•  Aby utworzyć tabelę, użyj tagu < table >. Ujmij każdy wiersz znacznikiem < tr > i każdą komórkę w każdym wierszu umieść w tagu < td >.

•  Rozmiar tabeli można określić w pikselach lub jako procent szerokości strony. Użyj atrybutu szerokości w ten sposób: < table width = "400" >.

•  Szerokość można również ustawić za pomocą reguły stylu, takiej jak: < table style="width: 400" >.

•  Możesz określić szerokość każdej komórki w procentach lub w pikselach w następujący sposób: < td width = "100" > lub < td style = "width: 100" >.

•  Aby scalić (rozciągnąć) wiele komórek, umieść atrybut colspan lub rowspan w komórce na górze lub najdalej na lewo w zakresie, który ma zostać podzielony, w następujący sposób: < td colspan = "2" >.

•  Możesz używać tabel jako kontenerów, aby ułatwić układ strony. Możesz umieścić całą treść strony lub jej część w tabeli.


Powrót

14.08.2020

Stosowanie obramowań tabeli

Tabele utworzone przy użyciu ustawień domyślnych są dość proste - w rzeczywistości są niewidoczne - więc odróżnienie, gdzie kończy się jedna komórka, a gdzie zaczyna się następna, może być trudne. Aby pomóc w rozwiązaniu tego problemu, możesz umieścić obramowania wokół komórek, globalnie lub selektywnie. Możesz także wypełnić (zacienić) określone komórki, aby wyróżnić je. Na przykład odstępy w poniższej tabeli utrudniają czytelnikowi śledzenie wiersza w poprzek strony. Możesz ułatwić sobie czytanie, stosując ramki

Wskazówka: jeśli nie lubisz podwójnych linii między każdą komórką, ustaw odstępy między komórkami na 0. Możesz zastosować obramowanie do tabeli, dodając atrybuty do znacznika lub za pomocą stylów, zastosowanych do pojedynczej tabeli lub umieszczonych w wewnętrznym lub zewnętrznym kaskadowym arkuszu stylów. W tym rozdziale przedstawiono obie metody, ale metoda stylu jest bardziej nowoczesna i niezawodna, ponieważ zapewnia spójne wyniki we wszystkich przeglądarkach.

Stosowanie obramowań przy użyciu atrybutów

Domyślnie tabela nie ma obramowania. Aby dodać obramowanie o szerokości jednego piksela zarówno wokół całej tabeli, jak i wokół każdej pojedynczej komórki, możesz dodać ten atrybut do tagu < table >, jak pokazano w poniższym kodzie:

< table border = "1" >

Niestety, różne przeglądarki inaczej wyświetlają atrybut border.

Uwaga: Możesz zastosować fazowane obramowanie w dowolnej przeglądarce, nie martwiąc się o niekompatybilność, używając formatowania opartego na stylu (użyj border-style:outset).

Atrybut border stosuje obramowanie do wszystkich stron wszystkich komórek. Jeśli nie chcesz mieć obramowania na niektórych stronach, możesz użyć atrybutów ramki i / lub reguł. Atrybut ramki określa, które strony zewnętrznej ramki tabeli będą wyświetlać obramowanie. Prawidłowe wartości to:

•  above . Powyżej górnej granicy

•  below . Poniżej dolnej krawędzi

• border. Wszystkie cztery boki

•  box. Wszystkie cztery strony

•  hsides. Tylko góra i dół (oznacza boki poziome)

•  vsides .Tylko lewy i prawy (oznacza boki pionowe)

•  lhs. Tylko lewa strona (oznacza lewą stronę)

•  rhs. Tylko prawa strona (oznacza prawą stronę)

•  void Brak zewnętrznej krawędzi

Atrybut rules działa tak samo dla wewnętrznych linii tabeli (granic komórek). Prawidłowe wartości to:

•  all. Wszystkie linie wewnętrzne

•  cols. Tylko pionowe linie wewnętrzne

•  rows. Tylko poziome linie wewnętrzne

•  none. Brak linii wewnętrznych

•  groups. Linie wokół zdefiniowanych grup, jeśli istnieją

Na przykład, jeśli chcesz, aby w tabeli były tylko pionowe obramowania, wokół całej tabeli i wokół każdej komórki, zastosuj te atrybuty do tagu < table >:

< table border = "1" frame = "vsides" rules = "cols" >


Powrót

15.08.2020

Stosowanie obramowań za pomocą stylów

Możesz także zastosować obramowanie, używając kaskadowych arkuszy stylów (CSS), co jest najbardziej elastyczną i spójną metodą. W większości przypadków należy wybrać metodę CSS, zwłaszcza w witrynach, które mają być aktywne przez wiele lat, ponieważ starsze metody formatowania tabel mogą zostać w przyszłości przestarzałe. W rozdziale 8 omówiono obramowanie akapitów oparte na stylu. Używasz ich w ten sam sposób dla tagów < table > i < td >. Recenzować:

•  Atrybut border-width steruje grubością obramowania. Określ wartość w pikselach.

• Atrybut border-color steruje kolorem obramowania. Określ kolor według nazwy, liczby szesnastkowej lub wartości RGB.

•  Atrybut stylu obramowania określa styl linii. Wybierz jedną z opcji: jednolita, kropkowana, przerywana, podwójna, rowkowa, kalenicowa, wpuszczana, początkowa lub brak.

•  Aby ustawić wszystkie trzy atrybuty naraz, użyj atrybutu obramowania, a następnie umieść po nim ustawienia w następującej kolejności: szerokość, kolor, styl.

•  Aby indywidualnie sformatować boki obramowania, zamień atrybut obramowania na bordertop, border-bottom, border-left lub border-right.

Te atrybuty można zastosować do całej tabeli (za pomocą znacznika < table > lub reguły stylu) lub do poszczególnych komórek (za pomocą znaczników < td >). Możesz zastosować je do poszczególnych instancji w samych znacznikach otwierających, możesz tworzyć reguły w obszarze < style >, które zarządzają wszystkimi instancjami w dokumencie, lub możesz tworzyć reguły w zewnętrznym arkuszu stylów, które zarządzają wszystkimi dokumentami, które go używają. Na przykład poniższy kod stosuje czarną przerywaną ramkę wokół zewnętrznej strony tabeli i srebrną, rowkowaną ramkę wokół jednej określonej komórki:

< table style="border-style: dotted; border-color: black" >

< tr >

< td style="border-style: groove; border-color: silver" >Cell 1< /td >

< td >Cell 2< /td >

< /tr >

< tr >

< td >Cell 3< /td >

< td >Cell 4< /td >

< /tr >

< /table >

Aby sformatować wszystkie tabele lub wszystkie komórki w ten sam sposób, zdefiniuj atrybuty w osadzonym arkuszu stylów, na przykład:

< style >

table {border-style: dotted; border-color: black}

td {border-style: groove; border-color: silver}

< /style >

Jak zawsze, możesz zastąpić regułę stylu atrybutem stylu umieszczonym specjalnie w pojedynczym znaczniku. Na przykład, aby pierwsza komórka była pozbawiona obramowania, zmodyfikuj jej tag

w następujący sposób: < table > < tr > < td style="border-style: none" >Cell 1< /td > < td >Cell 2< /td > < /tr > < tr > < td >Cell 3< /td > < td >Cell 4< /td > < /tr > < /table > Powrót 16.08.2020 Stosowanie wypełnień tła i pierwszego planu Każda tabela, wiersz i komórka to odrębny obszar i każdy może mieć własne tło. Na przykład możesz chcieć zastosować inny kolor tła do wiersza nagłówka, aby go wyróżnić, lub zmienić kolor każdej innej linii w liście, aby ułatwić odwiedzającym śledzenie wiersza w tabeli. Aby zastosować kolor tła do tabeli, użyj tej samej reguły stylu koloru tła, której używasz w przypadku dokumentów. Na przykład, aby zmienić kolor wiersza na pomarańczowy, użyj: < tr style="background-color: orange" > Tło tabeli może być również obrazem, podobnie jak tło dokumentu. Zastosuj atrybut background-image do dowolnej części tabeli. Na przykład, aby zastosować go do całej tabeli, użyj tego: < table style = "background-image: url (images / leaf.gif) > Jeśli obraz jest mniejszy niż przydzielone miejsce, zostanie podzielony na kafelki, tak jak w przypadku zastosowania obrazu do tła strony. Uwaga Jeśli zastosujesz zarówno kolor tła, jak i obraz tła do tych samych komórek, pierwszeństwo ma bardziej szczegółowa aplikacja. Na przykład, jeśli zastosujesz kolor tła do całej tabeli, a następnie zastosujesz inny kolor do pojedynczej komórki, inny kolor pojawi się w tej komórce. Pierwszym planem elementu jest jego tekst, jak nauczyłeś się w rozdziale 4, "Korzystanie z list i tła". Możesz ustawić kolor dowolnego elementu tabeli w następujący sposób: < table style = "color: blue" > Powrót 17.08.2020 Zmiana wypełnienia, odstępów i wyrównania komórek Dopełnienie komórek, odstępy między komórkami i wyrównanie komórek to trzy różne sposoby kontrolowania sposobu wyświetlania zawartości komórki na stronie. Dowiedziałeś się o tych funkcjach we wcześniejszych wpisach, ale przejrzyjmy je pokrótce. •  Dopełnienie odnosi się do odstępu między zawartością elementu a jego zewnętrzną krawędzią. W przypadku komórki tabeli dopełnienie odnosi się do odstępu między obramowaniem komórki a zawartym w niej tekstem lub grafiką. •  Odstęp odnosi się do wielkości odstępu między zewnętrzną stroną elementu a sąsiednim elementem. W przypadku komórki tabeli odstęp odnosi się do odstępu między obramowaniem jednej komórki a obramowaniem sąsiedniej komórki. •  Wyrównanie odnosi się do umieszczenia zawartości w wyznaczonym obszarze, w pionie lub w poziomie. W przypadku zwykłych akapitów (nie w tabeli) wyrównanie dotyczy tylko poziomego umieszczenia między marginesami. Jednak w przypadku komórki tabeli istnieją oddzielne ustawienia wyrównania w pionie i poziomie. Ustawianie dopełnienia komórek Aby ustawić dopełnienie dla całej tabeli, użyj atrybutu cellpadding w tagu < table >. (Atrybut cellpadding nie działa z pojedynczymi tagami wierszy i komórek). < table cellpadding = "4px" > Aby ustawić dopełnienie dla pojedynczej komórki, użyj atrybutu dopełnienia w stylu: < td style = "padding: 4px" > Aby ustawić dopełnienie w arkuszu stylów: td {padding: 4px} Uwaga Nie można zastosować dopełnienia do wiersza, ponieważ z technicznego punktu widzenia wiersz nie ma komórek do wypełnienia. Znacznik < tr > jest po prostu kontenerem dla komórek i tylko komórki oznaczone tagiem < td > (lub cała tabela) mogą mieć dopełnienie. Ustawianie odstępów między komórkami Domyślne obramowanie tabeli wygląda jak podwójna linia, ale ten efekt jest po prostu połączeniem obramowania wokół stołu jako całości i obramowania wokół każdej komórki. Podwójny efekt jest tworzony przez odstępy między komórkami. Aby obramowania tworzyły pojedynczą ciągłą linię między jedną a drugą komórką, ustaw odstępy między komórkami na zero: < table cellpadding = "10px" cellspacing = "0px" > Ustawianie wyrównania w poziomie i pionie Zawartość komórki ma dwa wyrównania: pionowe (górne, środkowe lub dolne) i poziome (lewe, środkowe, prawe lub justowanie). Możesz ustawić je za pomocą atrybutów lub stylów. Aby ustawić wyrównanie z atrybutami, użyj atrybutu align, aby określić wyrównanie w poziomie, a atrybutu valign, aby określić wyrównanie w pionie, jak pokazano poniżej: < td align = "center" valign = "middle" > Możesz również ustawić wyrównanie za pomocą stylu, używając wyrównania tekstu, aby określić wyrównanie w poziomie i wyrównania w pionie, aby określić wyrównanie w pionie, na przykład: < td style = "text-align: center; vertical-align: middle" > Można je zastosować do całej tabeli, poszczególnych wierszy lub pojedynczych komórek. (Tak, wyrównanie działa z wierszami, w przeciwieństwie do odstępów i dopełnienia). Powrót 18.08.2020 Kluczowe punkty •  Aby zastosować prostą domyślną ramkę do tabeli, umieść atrybut border = "1" w otwierającym tagu tabeli. Wartość większa niż 1 zwiększa obramowanie tabeli, ale nie zwiększa granic komórek. •  Atrybut frame określa, które strony ramki tabeli wyświetlają obramowanie; atrybut rules określa, które boki krawędzi komórki wyświetlają obramowanie. •  Aby uzyskać maksymalną elastyczność, określ obramowanie za pomocą arkuszy stylów. Atrybuty stylu obramowania w tabelach są takie same, jak atrybuty stylu obramowania wokół akapitów: border-width, border-color i border-style. •  Aby indywidualnie sformatować jedną stronę obramowania, określ stronę w atrybucie: border-top-width, border-bottom-style itd. •  Kolor tła można zastosować za pomocą atrybutu style = "background-color: color" dla całej tabeli lub dla pojedynczego wiersza lub komórki. Aby ustawić kolor tekstu (kolor pierwszego planu), użyj atrybutu koloru. • Dopełnienie to odstęp między krawędzią komórki a jej zawartością. Ustaw go za pomocą atrybutu cellpadding w tagu < table >. Dla pojedynczej komórki ustaw dopełnienie, używając stylu, na przykład: < td style = "padding: 4px" >. •  Odstęp to wielkość odstępu między zewnętrzną stroną elementu a sąsiednim elementem. Ustaw go za pomocą atrybutu cellspacing w tagu < table >. •  Wyrównanie to rozmieszczenie treści w komórce. W celu wyrównania w pionie użyj atrybutu valign; w celu wyrównania w poziomie użyj wyrównywania. Aby wyrównać za pomocą stylu, użyj opcji wyrównywanie tekstu w celu wyrównania w poziomie lub wyrównania w pionie w przypadku ustawienia w pionie. Powrót 19.08.2020 Tworzenie podstawowego formularza Możesz umieścić formularz w dowolnym miejscu w treści dokumentu HTML. Niektórzy lubią używać tabeli do organizowania elementów formularza; inne tworzą pola formularzy w zwykłych akapitach. Formularz jest zawarty w dwustronnym tagu < form >: < form method = "post" > … < /form > Atrybut method określa, co się stanie po przesłaniu formularza. Prawie wszystkie formularze używają atrybutu method = "post", co oznacza, że dane wprowadzane przez użytkowników do formularza będą gromadzone i dostarczane (pocztą elektroniczną) lub wysyłane na serwer, gdzie kod po stronie serwera może je pobrać i wykonać zadania takie jak przechowywanie go (w bazie danych). W otwierającym tagu < form > określasz atrybut akcji. Zazwyczaj jest to adres e-mail, na który należy wysyłać informacje, lub adres URL skryptu, który zostanie uruchomiony, gdy użytkownik prześle formularz. W przypadku dostarczania wiadomości e-mail atrybut akcji może wyglądać następująco: < form action = "mailto: edward@contoso.com" enctype = "text / plain" > Uwaga : atrybut enctype określa sposób kodowania wyników. Przy wysyłaniu wyniku za pomocą poczty elektronicznej wymagany jest typ kodowania tekstu / zwykły; w przeciwnym razie wyniki mogą być nieczytelne. Aby wysłać treść formularza do skryptu CGI, należy dołączyć adres URL odpowiedniego skryptu CGI przechowywanego na serwerze, jak pokazano poniżej: < form action = http://www.contoso.com/cgi-bin/feedback.pl > Umieszczasz różne znaczniki, które tworzą kontrolki formularza, pomiędzy otwierającymi i zamykającymi tagami . Dostępne kontrolki formularza obejmują pola tekstowe, przyciski, pola wyboru, listy i / lub przyciski poleceń. Przycisk polecenia to przycisk, który wykonuje funkcję, taką jak przesłanie formularza lub zresetowanie go. Tworzenie pola tekstowego Najbardziej podstawowym rodzajem kontrolki jest pole tekstowe. Użytkownicy mogą wprowadzać dane, takie jak nazwiska, adresy, numery telefonów i komentarze w polach tekstowych. Istnieją dwa typy pól tekstowych: zwykłe pola tekstowe (pojedyncza linia) i obszary tekstowe (wielowierszowe). Tworzysz zwykłe pole tekstowe za pomocą jednostronnego znacznika < input > z atrybutem type = "text", jak pokazano poniżej: < input type = "text" > Uwaga Pamiętaj, że jeśli piszesz kod zgodny z XHTML, musisz umieścić spację i ukośnik / na końcu jednostronnych tagów, na przykład: < input type = "text" / >. Nie jest to konieczne, jeśli tworzysz kod HTML. Każda kontrolka w formularzu musi mieć unikalną nazwę wyrażoną za pomocą atrybutu nazwy. Na przykład, aby nazwać imię konkretnego pola tekstowego, użyj następującego: < input type = "text" name = "firstname" > Możesz określić szerokość pola tekstowego za pomocą atrybutu rozmiaru. Domyślna szerokość to 20 pikseli. < input type = "text" name = "phone" size = "30" > Możesz również określić maksymalną długość ciągu tekstowego wprowadzanego przez użytkowników w polu tekstowym. Różni się on od rozmiaru pola tekstowego. Jeśli określona maksymalna długość jest większa niż szerokość pola tekstowego, tekst jest przewijany w poziomie w miarę wpisywania przez użytkownika. Gdy użytkownicy osiągną określoną maksymalną liczbę znaków, pole tekstowe nie przyjmuje więcej danych wejściowych. Użyj atrybutu maxlength w następujący sposób: < input type = "text" name = "phone" size = "30" maxlength = "100" > W HTML5 możesz wymagać od użytkowników wypełnienia pola, zanim będą mogli przesłać formularz (dotyczy tylko przeglądarek zgodnych z HTML5). Aby oznaczyć pole jako wymagane, dodaj wymagany atrybut do jego tagu, na przykład: < input type = "text" name = "phone" size = "30" maxlength = "100" require > Specjalne typy pól dla adresów e-mail i adresów internetowych Dwa nowe typy pól wejściowych w HTML5 obsługują adresy e-mail i adresy internetowe. Użyj atrybutu type = "email" zamiast type = "text", aby zdefiniować pole przeznaczone do zbierania adresów e-mail. Jeśli przeglądarka nie obsługuje HTML5, pole jest domyślnie typu tekstowego, więc nie ryzykujesz niczego, używając go. < input type = "email" name = "email-address" > To samo dotyczy adresów internetowych (znanych również jako jednolite lokalizatory zasobów lub adresy URL). Istnieje dla nich specjalny atrybut typu w HTML5, jak pokazano poniżej: < input type = "URL" name = "website" > W większości przeglądarek nie zauważysz żadnej różnicy. Jedynym wyjątkiem jest przeglądarka Apple iPhone, w której specjalna wersja klawiatury ekranowej pojawia się, gdy użytkownik wybierze pole e-mail lub WWW. Ta specjalna klawiatura zawiera dedykowane klawisze dla najpopularniejszych symboli używanych do wpisywania adresów e-mail i adresów URL. Inne przeglądarki mogą też w końcu zaimplementować specjalne traktowanie dla tych typów pól. Tworzenie obszaru tekstowego Tworzysz wielowierszowy obszar tekstowy za pomocą dwustronnego znacznika < textarea > zawierającego atrybut wierszy, który określa liczbę wierszy tekstu, które ma pomieścić pole, jak pokazano w poniższym przykładzie: < textarea name = "comments" rows = "5" > < /textarea > Możesz również dołączyć atrybut kolumny, który określa, ile znaków (każdy znak reprezentuje pojedynczą kolumnę) szerokości będzie miał obszar tekstowy. Wartość domyślna to 40 znaków. < textarea name = "comments" rows = "5" cols = "60" > < /textarea > Atrybut kolumny wpływa tylko na rozmiar pola, a nie na maksymalną liczbę znaków, które można wprowadzić. Możesz użyć atrybutu maxlength, aby ograniczyć liczbę znaków, które użytkownik może wprowadzić. Tworzenie przycisku Prześlij lub Wyczyść Będziesz musiał dołączyć przycisk Prześlij do formularza, aby odwiedzający mogli wysłać Ci informacje. Prześlij odnosi się do funkcji przycisku, a nie do sformułowania, które pojawia się na przycisku. Domyślny tekst przycisku to Prześlij, ale możesz użyć atrybutu wartości, aby wyświetlić inny tekst na przycisku. Na przykład, aby słowo Send pojawiło się na przycisku, ustaw atrybut value, jak pokazano poniżej: < input type = "submit" value = "Send" > Możesz również dołączyć przycisk Resetuj w formularzu, który pozwoli użytkownikowi wyczyścić wszystkie pola. Ponownie użyj atrybutu value, aby zmienić tekst na przycisku. < input type = "reset" value = "Clear" > Wielu projektantów stron internetowych uważa, że umieszczanie pól formularzy w tabelach w celu ułatwienia ich wyrównywania jest przydatne. Na przykład, jak pokazano na poniższej ilustracji, można umieścić etykiety pól w jednej kolumnie, a same pola w innej. Dodawanie tekstu domyślnego lub zastępczego Domyślnie pola tekstowe i obszary tekstowe są puste podczas ładowania formularza. Możesz opcjonalnie umieścić w nich tekst domyślny lub zastępczy. •  Tekst domyślny to zwykły tekst, który jest przesyłany wraz z wynikami formularza, tak jakby użytkownik faktycznie go wpisał. •  Tekst zastępczy to tekst "widmowy", który pojawia się jako monit w polu tekstowym, ale znika, gdy użytkownik wpisze tam coś innego. Jeśli użytkownik zdecyduje się pozostawić to pole tekstowe puste, nic nie zostanie przesłane. Większość przeglądarek obsługuje użycie domyślnego tekstu, nawet jeśli nie obsługują HTML5. W przypadku pola tekstowego dodaj atrybut wartości do tagu, który określa domyślny tekst, jak pokazano poniżej: < input type = "text" name = "country" value = "USA" > W przypadku obszaru tekstowego należy umieścić domyślny tekst między otwierającymi i zamykającymi znacznikami < textarea > , na przykład: < textarea name = "comments" rows = "5" > Świetnie! Tak trzymaj. < /textarea > Tekst zastępczy jest wyświetlany tylko w przeglądarkach zgodnych z HTML5. Aby użyć tekstu zastępczego, dodaj atrybut zastępczy, na przykład: < input type = "text" name = "country" placeholder = "Wpisz tutaj swój kraj" > Powrót 20.08.2020 Tworzenie pól wyboru i przycisków opcji Kiedy prawidłowe odpowiedzi na konkretny monit zawsze będą jedną z kilku prostych opcji, takich jak płeć lub status zatrudnienia, uzyskasz bardziej spójne i łatwiejsze do oceny wyniki, używając pól wyboru i przycisków opcji zamiast pól tekstowych. Załóżmy na przykład, że pytasz odwiedzających witrynę o odpowiedź typu "tak" lub "nie", na przykład "Czy jesteś zainteresowany otrzymaniem naszego katalogu pocztą?" Jeśli podasz pole tekstowe, ludzie mogą odpowiedzieć na pytanie na wiele sposobów: tak, n, t, n, tak, nie, tak, nie, tak, nie, być może, pewnie, nie, dziękuję i tak dalej. Tabelaryczne zestawianie takich wyników byłoby żmudne, ponieważ człowiek musiałby oceniać każdy z nich. Ale zaznaczając pole wyboru, usuwasz wszelkie wątpliwości: znacznik wyboru oznacza tak; brak haczyka oznacza nie. Używasz pól wyboru dla pojedynczych pytań binarnych (tak / nie). Formularz może zawierać wiele pól wyboru, ale każde z nich jest odrębną decyzją dla osoby wypełniającej formularz. Aby utworzyć pole wyboru, użyj atrybutu type = "checkbox" ze znacznikiem < input >, na przykład: < input type = "checkbox" name = "repair" > Domyślnie wyniki formularza będą zawierać wartość On, gdy pole wyboru jest zaznaczone. Dla pokazanego pola wyboru wyniki wyglądałyby następująco: repair=on Możesz zmienić to ustawienie domyślne, określając atrybut wartości. Na przykład możesz zgłosić słowo Tak w polu wyboru, jak pokazano tutaj: < input type = "checkbox" name = "repair" value = "Yes" > Domyślnie pola wyboru nie są zaznaczone; użytkownicy muszą kliknąć każde pole wyboru, aby je zaznaczyć. Jednak w niektórych przypadkach korzystne może być wcześniejsze zaznaczenie pola wyboru. Na przykład, aby zachęcić ludzi do zapisania się do Twojego biuletynu, możesz domyślnie zaznaczyć pole wyboru Newsletter, tak aby użytkownicy musieli je kliknąć, aby je wyczyścić. Aby to zrobić, dodaj atrybut zaznaczony = "check", jak w następującym tagu: < input type="checkbox" name="newsletter" checked="checked" > Użyj przycisków opcji (zwanych także przyciskami opcji), aby przedstawić grupę wzajemnie wykluczających się opcji. Po wybraniu przycisku opcji wszystkie inne przyciski opcji w grupie zostaną wyczyszczone. Aby utworzyć grupę przycisków opcji, wybierz nazwę grupy. Podasz tę samą nazwę w atrybucie nazwy dla każdego przycisku. Użyj atrybutu value (który będzie inny dla każdego przycisku w zestawie), aby określić wartość, która będzie raportowana dla grupy w wynikach formularza. Załóżmy na przykład, że chcesz, aby użytkownicy wybierali jedną z trzech kategorii członkostwa: złotą, srebrną i brązową. Ponieważ zarabiasz najwięcej na członkostwie Gold, chcesz, aby było to ustawienie domyślne. < p >< input type="radio" name="category" value="gold" checked="checked" > Gold< br > < input type="radio" name="category" value="silver" > Silver< br > < input type="radio" name="category" value="bronze" > Bronze< /p > Po każdym przycisku znajduje się tekst opisujący tę opcję (złoty, srebrny, brązowy). To jest zwykły tekst. Uwaga: Spacja przed tekstem jest domyślnie wstawiana, aby zapobiec umieszczaniu przycisków opcji w tekście. Nie musisz samodzielnie dodawać żadnej przestrzeni. Po zwróceniu wyników formularza ta grupa przycisków zgłosi swoją nazwę i wybraną wartość w następujący sposób: category=gold Powrót 21.08.2020 Tworzenie list Pola wyboru są dobre w przypadku pytań tak / nie, a przyciski opcji są odpowiednie, gdy jest kilka opcji do wyboru, ale co, jeśli masz kilkanaście lub więcej opcji? Przyciski opcji dla tak wielu opcji mogą zajmować dużo miejsca na ekranie i mogą przytłoczyć gości w sieci. W sytuacjach obejmujących wiele opcji rozważ listę, zwaną także menu. Lista może zawierać dowolną liczbę opcji, ale zajmuje bardzo mało miejsca w formularzu. Aby utworzyć listę, zacznij od dwustronnego znacznika < select >. W nim umieść każdą opcję w osobnym tagu < option >. Umieść tekst, który ma się pojawić na liście, między otwierającymi i zamykającymi tagami < option >. Uwaga : Domyślnie wyniki formularza zawierają tekst wybranej opcji. Jeśli chcesz, aby formularz zgłaszał coś innego, umieść go w atrybucie wartości w otwierającym tagu opcji. Lista może mieć dowolną wysokość. W poprzednim kodzie atrybut rozmiaru jest ustawiony na 1, co powoduje utworzenie listy rozwijanej. Jeśli ustawisz atrybut size na większą wartość, element będzie renderowany jako pole listy. Jeśli lista zawiera więcej pozycji niż mieści się w obszarze wyświetlania, pasek przewijania pojawia się automatycznie po prawej stronie pola. Na przykład możesz zmienić otwierający tag < select > w poprzednim kodzie na następujący: < p > Kolor: < select name = "colors" size = "5" > Jeśli opcje listy należą do kategorii, możesz podzielić je na sekcje. Aby sformatować listę, jak pokazano w poprzednim przykładzie, otocz grupy opcji znacznikiem < optiongroup >. Dołącz atrybut etykiety, który określa tekst nagłówka dla każdej grupy opcji Powrót 22.08.2020 Dodatkowe typy danych wejściowych w HTML5 HTML5 udostępnia kilka innych typów pól, które mogą dodać dodatkowego dopracowania do formularzy. Jeśli przeglądarka użytkownika ich nie obsługuje, renderuje je i traktuje jako pola tekstowe, dzięki czemu można z nich swobodnie korzystać bez obawy o zgodność wsteczną. Pola obrotowe służą do zwiększania wartości liczbowych. Poprzednie pole pokrętła zostało utworzone przy użyciu następującego kodu: < input type="number" name="copies" min="0"max="100" step="1" value="1" > Atrybuty min i max kontrolują odpowiednio wartości minimalne i maksymalne. Atrybut step określa, o ile wartość zwiększa się lub zmniejsza po kliknięciu przycisku strzałki w górę lub w dół. Atrybut value określa wartość domyślną. Suwak to przesuwany pasek, który można przeciągać z boku na bok. Jego typ to zakres, a jego atrybuty są prawie identyczne jak w przypadku pola spinowego. < input type="range" name="copies" min="1"max="4" step="1" value="1" > Selektor dat wyświetla kalendarz, w którym użytkownik może kliknąć i wybrać datę. Użyj typu daty, aby uzyskać selektor dat w przeglądarkach zgodnych z HTML5 w następujący sposób: < input type = "date" > Dla standardowej daty użyj type = "date". Dzięki temu użytkownik może wybrać konkretną datę z kalendarza. Możesz również użyć dowolnego z następujących typów dla innych wyborów związanych z datą i godziną: •  Typ = "month" wybiera cały miesiąc •  Typ = "week" wybiera cały tydzień •  Typ = "hour" wybiera tylko godzinę (bez daty) •  Typ = "datetime" wybierz datę i godzinę •  Type = "datetime-local" wybiera zarówno datę, jak i godzinę na podstawie lokalnej strefy czasowej użytkownika Powrót 23.08.2020 Zrozumienie CGI i innych zaawansowanych narzędzi Jak widzieliście, kierowanie wyników formularza na adres e-mail jest szybkim i bezproblemowym sposobem zbierania informacji, o ile obsługuje je przeglądarka internetowa odwiedzającego i program pocztowy. Jednak wraz ze wzrostem liczby wiadomości uporządkowanie wszystkich otrzymywanych informacji może stać się wyzwaniem. Musisz skopiować informacje z wyników formularza do bazy danych lub przynajmniej wydrukować kopię wiadomości e-mail. Kiedy zaczniesz otrzymywać setki przesłanych formularzy dziennie, ta odpowiedzialność może stać się przytłaczająca. Alternatywnie możesz polegać na skrypcie lub aplikacji opartej na serwerze do obsługi wyników formularza. Skrypt Common Gateway Interface (CGI) napisany w języku programowania, takim jak Perl, jest jedną z powszechnych, niedrogich możliwości. Odwołujesz się do skryptu w atrybucie action tagu < form >. (Serwer, na którym hostujesz swoją witrynę, musi zezwalać na skrypty CGI (niektóre nie, ze względów bezpieczeństwa). Ważne Jedną z wad używania skryptów CGI jest brak bezpieczeństwa. O ile nie zastosujesz środków bezpieczeństwa, zebrane dane znajdują się w plik na serwerze, co stanowi potencjalne zagrożenie bezpieczeństwa. Z tego powodu nie należy używać skryptu CGI do zbierania poufnych informacji, takich jak numer karty kredytowej lub PESEL, chyba że zaimplementujesz również środki bezpieczeństwa, które zapobiegną naruszeniu danych. Większość witryn komercyjnych używa do tego bezpiecznego serwera; możesz współpracować z firmą oferującą bezpieczne przetwarzanie formularzy, w tym przetwarzanie kart kredytowych, za miesięczną opłatą. Istnieją setki witryn sieci Web, które oferują bezpłatne skrypty CGI, które można modyfikować w tekście edytor (taki jak Notatnik), aby sprostać Twoim potrzebom. Aby to zrobić, musisz wiedzieć trochę o programowaniu, co wykracza poza zakres tej książki. Jeśli jednak jesteś zainteresowany nauką o skryptach Perl i CGI, lub y Szukasz usługi, która będzie hostować Twój skrypt CGI, zobacz jedną z następujących witryn sieci Web: •  Kompleksowa sieć archiwów Perl: www.cpan.org •  Archiwum skryptów Matta: www.scriptarchive.com •  Indeks zasobów CGI: cgi.resourceindex.com •  BigNoseBird.Com: www.bignosebird.com W miarę jak Twoja witryna sieci Web staje się bardziej wyrafinowana, możesz również chcieć dołączyć publiczny obszar tablicy ogłoszeń, w którym ludzie mogą publikować i czytać komentarze, lub księgę gości, w której ludzie mogą zostawiać publiczne komentarze. Nie możesz utworzyć jednego z nich, używając tylko języka HTML, ale możesz zintegrować ze swoją witryną dodatkowe komponenty, które wykonają zadanie. Istnieje wiele bezpłatnych i niedrogich źródeł kodu programistycznego dla tablicy ogłoszeń, zarówno w CGI (wspomniany wcześniej), jak iw innych językach. Na przykład sprawdź pakiet tablicy ogłoszeń phpBB typu open source na www.phpbb.com (Twój serwer musi obsługiwać PHP). Istnieje również wiele usług, które będą hostować tablice ogłoszeń na ich serwerze, takie jak ProBoards (www.proboards.com). Na swojej stronie WWW umieszczasz łącze do witryny hostującej forum dyskusyjne; dla odwiedzających, wygląda na to, że tablica ogłoszeń jest częścią Twojej witryny. Powrót 24.08.2020 Kluczowe punkty •  Aby utworzyć formularz, użyj dwustronnego znacznika < form >. W nim umieść co najmniej jeden znacznik < input > definiujący pola formularza. •  W otwierającym tagu < form > umieść atrybut method = "post" oraz atrybut action, który opisuje, w jaki sposób formularz powinien być przetwarzany. Najpopularniejszym atrybutem jest action = "mailto: adres", gdzie adres jest prawidłowym adresem e-mail. Jeśli zbierasz wyniki formularza za pomocą poczty e-mail, dołącz atrybut enctype = "text / plain". •  Aby utworzyć pole tekstowe, użyj opcji < input type = "text" name = "fieldname" >, gdzie fieldname jest unikalną nazwą przypisywaną do pola tekstowego. Opcjonalne dodatkowe atrybuty obejmują rozmiar i maksymalną długość. •  W przypadku zbierania danych przez Internet i pocztę e-mail można opcjonalnie użyć odpowiednio typu adresu URL i adresu e-mail. Działają one tylko w przeglądarkach zgodnych z HTML5. •  Aby utworzyć wielowierszowe pole tekstowe (obszar tekstowy), użyj dwustronnego znacznika < textarea > z atrybutem nazwy oraz liczbą wierszy i kolumn. Na przykład < textarea name = "comments" rows = "5" columns = "40" > < /textarea >. •  Aby utworzyć przycisk Prześlij, użyj znacznika < input z atrybutem type = "submit". Jeśli chcesz zmienić tekst przycisku, użyj atrybutu value. Na przykład < input type = "submit" value = "Send" >. Użyj type = "reset", aby utworzyć przycisk Reset, który czyści formularz. •  Pole wyboru to jednostronny, samodzielny element. Użyj tagu < input > z atrybutem type = "checkbox". •  Przycisk opcji działa w grupie z innymi przyciskami opcji; W danej chwili można wybrać tylko jedną osobę w grupie. Użyj jednostronnego tagu < input > z atrybutem type = "radio". Dla każdej opcji użyj wspólnego atrybutu nazwy i unikalnego atrybutu. •  Aby utworzyć listę, użyj dwustronnego tagu < select >, a wewnątrz niego umieść dwustronne tagi < option > dla każdej pozycji listy. •  Użyj atrybutu size = "1" ze znacznikiem < select >, aby utworzyć listę rozwijaną, lub podaj wyższą liczbę, aby utworzyć pole listy z paskiem przewijania. •  Aby utworzyć nagłówki kategorii na liście, użyj dwustronnego znacznika < optgroup > z etykietą tekstu, który powinien się pojawić. Na przykład < optgroup label = "Inkjet" >. •  HTML5 oferuje kilka innych typów danych wejściowych dla specjalnych przypadków, takich jak pola obrotowe (typ = "liczba"), suwaki (typ = "zakres") i selektory daty (typ = "data"). •  Aby przetworzyć dane wejściowe na serwerze, użyj skryptu Common Gateway Interface (CGI) lub programu innej firmy. Powrót 25.08.2020 Co nowego w audio i wideo w HTML5? Tradycyjnie programiści i projektanci najczęściej konfigurowali strony do odtwarzania wideo i audio w Internecie przy użyciu programu Adobe Flash. Witryny takie jak YouTube (http://www.youtube.com) umieszczają wideo w pliku Flash. Wymaga to od użytkownika końcowego zainstalowanego odtwarzacza Adobe Flash. Specyfikacja HTML5 wprowadza alternatywę: standardowy tag < video >, który umożliwia odtwarzanie treści wideo. Jednak tag < video > nadal wymaga pliku wideo, a także wymaga od użytkowników końcowych zainstalowania odpowiedniego odtwarzacza na swoich komputerach. W przypadku klipów audio tradycyjną metodą dostarczania jest użycie znacznika < object > lub < embed > do osadzenia klipu na stronie. Zamiast tego HTML5 udostępnia tag < audio >, który to robi. W chwili pisania tego tekstu tagi < audio > i < video > mają ograniczoną obsługę w przeglądarkach internetowych. Dodatkową złożonością jest konieczność obsługi wielu formatów wideo, w zależności od tego, co może odtwarzać przeglądarka użytkownika. Pokazujemy, jak wykorzystać nowe znaczniki < audio > i < video > i pomaga rozwiązać problemy związane ze zgodnością wideo. Zanim przejdziesz dalej, powinieneś zrozumieć, że w chwili pisania tego tekstu obsługa tych dwóch nowych tagów jest ograniczona do następujących przeglądarek: •  Internet Explorer 9+ •  Firefox 3.5+ •  Safari 3+ •  Chrome 3+ •  Opera 10.5+ •  iPhone 1+ •  Android 2+ Przeglądarki, które nie obsługują tych tagów, ignorują je, ale jeśli chcesz dostarczyć dźwięk lub wideo do pełnej gamy przeglądarek - nowych i starych, musisz mieć możliwość tego bez użycia tych tagów. Powrót 26.08.2020 Podstawy multimediów HTML Zanim przejdziemy do szczegółów tworzenia multimedialnych stron internetowych, należy mieć podstawową wiedzę o tym, jak HTML5 - i poprzednie wersje HTML - prezentują klipy audio i wideo. Najpopularniejszą metodą umieszczania treści multimedialnych na stronie internetowej jest osadzenie klipu audio lub wideo na stronie, tak aby był on odtwarzany na samej stronie, gdy odwiedzający kliknie przycisk. Aby to zadziałało, osoby odwiedzające Twoją witrynę muszą używać przeglądarki internetowej obsługującej typ pliku dźwiękowego lub wideo, który udostępniasz, lub muszą pobrać i zainstalować wtyczkę (program pomocniczy), aby dodać obsługę tego pliku do ich przeglądarki. Jeśli Twoi odbiorcy korzystają z przeglądarki Microsoft Internet Explorer w wersji 5.5 lub nowszej, możesz użyć do tego znacznika