Na początku było Słowo…
08.05.2020
ścieżka bezwzględna: ścieżki zawierające pełny adres, z którego każdy może skorzystać, aby przejść do strony internetowej.
dostępność: podzbiór użyteczności, który odnosi się do przydatności witryny internetowej do użytku przez kogokolwiek, niezależnie od wieku i niepełnosprawności.
wyrównanie: poziome umieszczenie akapitu, określone za pomocą atrybutu wyrównania tekstu.
anchor: Znacznik w dokumencie HTML, mniej więcej analogiczny do zakładki w dokumencie Microsoft Word.
atrybut: Tekst w znaczniku, który zawiera informacje o tym, jak powinien się on zachowywać. Czasami nazywany argumentem.
obraz tła: obraz pojawiający się za tekstem na stronie internetowej. Domyślnie obraz jest kafelkowy, aby wypełnić stronę, i przewija stronę.
linia bazowa: fikcyjna linia, na której spoczywa tekst. element na poziomie bloku Element zajmujący pełny akapit lub więcej.
Treść: sekcja dokumentu HTML zdefiniowana przez dwustronny znacznik
breadcrumbs: ślad hiperłączy, które pozwalają użytkownikowi wykonać kopię zapasową jednego lub więcej poziomów w strukturze strony internetowej.
program do tworzenia przycisków: program służący do generowania przycisków dla stron internetowych.
kaskadowy arkusz stylów: dokument określający formatowanie poszczególnych znaczników, a następnie można go zastosować do wielu stron internetowych.
komórka: odrębny obszar tabeli, w którym można umieścić tekst, grafikę lub nawet inne tabele.
folder podrzędny: podfolder folderu nadrzędnego.
klasa: kategoria treści zdefiniowana przez programistę sieci Web, stosowana do stosowania spójnego formatowania wszystkich elementów w tej kategorii. Podobne do identyfikatora, ale wiele elementów może mieć tę samą klasę w dokumencie.
kodek: Kompresja / dekompresja. Plik pomocnika współpracujący z programem odtwarzacza multimediów do odtwarzania skompresowanego pliku wideo.
przycisk polecenia: przycisk, który wykonuje funkcję.
skompilowany: Skompilowany język programowania, który uruchamia program czytelny dla człowieka za pomocą narzędzia, które konwertuje go na plik wykonywalny (zwykle z rozszerzeniem .exe lub .com), który jest następnie dystrybuowany do użytkowników.
opis definicji < dd >. : Akapit, który definiuje termin definicji.
lista definicji < dl >. : Znacznik zawierający pełną listę nagłówków i akapitów definicji.
definicja definicji < dt >. : Słowo lub fraza do zdefiniowania na liście definicji.
przestarzałe: Tag, który nie jest już obsługiwany w najnowszej wersji standardu HTML.
znacznik opisowy; Znacznik, który opisuje funkcję tekstu, a nie podaje wskazówek dotyczących formatowania. Nazywany także tagiem logicznym.
dithered: kolor utworzony przez wzór kreskowania dwóch kolorów zmieszanych razem.
em: Mnożnik podstawowego rozmiaru czcionki.
encje: Znaki specjalne w HTML, które są tworzone przy użyciu kodów rozpoczynających się od ampersand (&), po których następuje nazwa encji lub numer encji i kończące się średnikiem (;).
nazwa jednostki: nazwa definiująca znak specjalny.
numer jednostki: Liczba definiująca znak specjalny.
rozszerzona nazwa: inny sposób wyrażania wartości kolorów. Rozszerzone nazwy są podobne do podstawowych nazw kolorów, ale jest ich więcej. Nie wszystkie kolory wymienione w rozszerzonym zestawie są bezpieczne dla Internetu.
Extensible Markup Language (XML): język ściśle związany z HTML, którego programiści używają do tworzenia własnych tagów.
zewnętrzny arkusz stylów: zwykły plik tekstowy z rozszerzeniem .css, który definiuje style do zastosowania na stronach internetowych.
rozmiar pliku: liczba bajtów, które plik zajmuje na dysku.
rodzina czcionek: zestaw czcionek wymienionych w kolejności preferencji.
kolor pierwszego planu: domyślny kolor strony internetowej, który można ustawić za pomocą argumentu style = "color: color".
ramka: część okna przeglądarki, w której ładuje się strona internetowa.
zestaw ramek: plik kontenera, który opisuje, na ile ramek zostanie podzielone okno przeglądarki oraz jakie będą ich rozmiary i kształty.
zawieszanie: punktory i cyfry "wiszące" na lewej krawędzi akapitu.
Head: sekcja dokumentu HTML zdefiniowana przez dwustronny znacznik . Sekcja Head zawiera tytuł strony i informacje na temat dokumentu, który nie jest wyświetlany, na przykład jego metatagi. Może także zawierać wiersze kodu uruchamiające skrypty.
nagłówek: przyjazny lub opisowy tytuł pojawiający się na pasku tytułowym przeglądarki Microsoft Internet Explorer. Tekst jest określony w znaczniku < title > umieszczonym w sekcji < head >.
hiperłącze: tekst lub grafika, którą można kliknąć, aby przejść do innej lokalizacji na stronie internetowej, otworzyć inną stronę internetową, rozpocząć wiadomość e-mail, pobrać plik, obejrzeć film, posłuchać klipu audio, aktywować Program internetowy i nie tylko.
Hypertext Markup Language (HTML): Podstawowy język programowania w sieci WWW.
ID: Identyfikator unikalnego elementu w dokumencie. Podobne do klasy, z tym że w dokumencie może być przypisanych wiele elementów do tej samej klasy, ale każdy identyfikator może być przypisany tylko raz na dokument.
mapa obrazu: nakładka na grafikę, która przypisuje hiperłącza do określonych zdefiniowanych obszarów (punktów aktywnych) na obrazie. Gorące punkty mogą mieć kształt prostokątny, okrągły lub nieregularny (nazywany poli-gorącym punktem).
Wcięcie: Wcięcie powoduje przesunięcie tekstu ze zwykłej pozycji, w prawo lub w lewo. W HTML trzy typy wcięć możesz ustawić wcięcie pierwszego wiersza, dopełnianie i margines.
inline span: Powłoka, w której można umieścić dowolne potrzebne argumenty.
interpretowany: program dystrybuowany w formacie czytelnym dla ludzi, a program, w którym jest otwarty, dba o jego uruchomienie.
wiodące: ilość miejsca między każdą linią.
element listy < li >. : Element na liście numerowanej lub wypunktowanej.
metatag: typ znacznika nagłówka, który dostarcza informacji o dokumencie, takich jak słowa kluczowe.
czcionka monospace: czcionka, w której każda litera zajmuje tyle samo miejsca w poziomie, niezależnie od jej rzeczywistego rozmiaru i kształtu.
pasek nawigacji: zestaw hiperłączy, które łączą się z głównymi stronami witryny sieci Web.
zagnieżdżony: termin odnoszący się do osadzania w nim, tak jak gdy lista jest osadzona w liście.
tag jednostronny: tag, który nie ma tagu zamykającego i przyjmuje argumenty.
lista uporządkowana < ol >. : Lista numerowana.
tytuł strony: tekst w nagłówku dokumentu HTML, który pojawia się na pasku tytułowym przeglądarki internetowej i na przycisku paska zadań Microsoft Windows.
formatowanie akapitów: formatowanie, które dotyczy tylko całych akapitów, a nie pojedynczych znaków.
folder nadrzędny: folder o jeden poziom powyżej folderu podrzędnego (lub podfolderu).
odtwarzacz: zewnętrzny program, który odtwarza plik audio lub wideo w osobnym oknie.
wtyczka: plik pomocnika, który pozwala na otwieranie treści, których przeglądarka nie obsługuje natywnie, w oknie przeglądarki.
czcionka proporcjonalna: czcionka, w której znaki zajmują różne ilości miejsca w poziomie w zależności od ich wielkości.
pseudo-klasa: klasa, która określa zmienną za pomocą zmiennej składowej
tryb dziwactwa: tryb używany do przetwarzania stron HTML, gdy przeglądarka nie napotyka znacznika DOCTYPE.
przekierowanie: Przekierowanie konfiguruje starą stronę internetową, aby automatycznie wyświetlać nową stronę internetową.
ścieżka względna: ścieżka, która używa tylko nazwy pliku, a nie pełnego adresu. Ścieżka względna szuka pliku docelowego w tym samym folderze, co lokalizacja bieżącego pliku.
rozdzielczość: rozmiar grafiki, określony przez liczbę pikseli, które ją tworzą. Rozdzielczość jest wyrażona w szerokości i wysokości.
reguła: argument, szczególnie gdy jest stosowany w znaczniku stylu lub sekcji.
sample: seria "migawek" audio wykonywanych na sekundę podczas digitalizacji klipu audio.
częstotliwość próbkowania: liczba próbek pobranych na sekundę.
znacznik semantyczny: znacznik, którego nazwa jest oparta na jego użyciu, taki jak < aside > lub < article >.
spam : Wiadomości-śmieci.
znaki specjalne: Znaki, których nie ma na standardowej klawiaturze angielskiej.
tryb standarowy: tryb używany do przetwarzania stron HTML, gdy przeglądarka napotka znacznik DOCTYPE.
styl: Reguła formatowania, którą 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.
tabela: Siatka wierszy i kolumn, których przecięcia tworzą komórki.
tagi: w HTML tagi wskazują, gdzie należy zastosować formatowanie, jak powinien wyglądać układ, jakie zdjęcia powainny być umieszczone w określonych lokalizacjach i więcej.
motywy: formatowanie szablonów w programie Word, które można zastosować do dowolnego dokumentu.
znacznik dwustronny: znaczniki, które otaczają tekst między znacznikami otwierającym i zamykającym.
lista nieuporządkowana < ul >. : Wypunktowana lista.
użyteczność: Termin odnoszący się do doświadczenia użytkownika, gdy odwiedza witrynę internetową. Cechami użyteczności są łatwość uczenia się, łatwość użytkowania, zapamiętywania, obsługi błędów i subiektywnej satysfakcji.
odwiedzone hiperłącze: hiperłącze do strony, która została już odwiedzona.
Strona internetowa: zwykły plik tekstowy, który został zakodowany przy użyciu języka HTML (Hypertext Markup Language), dzięki czemu wygląda dobrze sformatowany w przeglądarce internetowej.
Kolor bezpieczny dla sieci: Kolor, który dokładnie odpowiada jednemu z kolorów na standardowym 8-bitowym wyświetlaczu.
Konsorcjum World Wide Web (W3C): organizacja nadzorująca specyfikacje HTML i zarządzająca większością standardów internetowych
Powrót
09.05.2020 Powrót
Co to jest HTML?
Mówiąc najprościej, strona internetowa (lub dokument HTML) to zwykły plik tekstowy, który został zakodowany przy użyciu języka HTML (Hypertext Markup Language), dzięki czemu wygląda dobrze sformatowany w przeglądarce internetowej. Oto, co oznacza HTML, słowo po słowie:
• Hypertext : kliknij, aby przejść z dokumentu do dokumentu. Jest to odniesienie do zdolności stron internetowych do łączenia się ze sobą.
• Markup : znaczniki które stosują konwencje układu i formatowania do zwykłego tekstu. Dosłownie zwykły tekst jest "oznaczony" tagami.
• Język Odniesienie do faktu, że HTML jest uważany za język programowania.
Wskazówka : Kiedy ludzie myślą o programowaniu komputerowym, zwykle myślą o napisaniu skompilowanego programu. Skompilowany język programowania uruchamia czytelny dla człowieka kod programowy za pomocą narzędzia, które konwertuje go na plik wykonywalny (zwykle z rozszerzeniem .exe lub .com), który jest następnie dystrybuowany do użytkowników. Natomiast HTML jest interpretowanym językiem programowania. Oznacza to, że program jest dystrybuowany w formacie czytelnym dla ludzi, a program w którym jest otwarty, zajmuje się jego uruchomieniem. Kod HTML stron internetowych znajduje się w plikach. Za każdym razem, gdy przeglądarka otwiera stronę internetową, przetwarza kod HTML w pliku.
Powrót
10.05.2020 Powrót
Zrozumienie znaczników HTML
Kod w pliku HTML składa się z tekstu otoczonego znacznikami. Te tagi wskazują, gdzie należy zastosować formatowanie, jak powinien wyglądać układ, jakie zdjęcia powinny być umieszczone w określonych miejscach i więcej. Załóżmy na przykład, że chcesz wyrazić kursywą pewne zdanie:
Wszystko jest na sprzedaż.
W HTML nie ma przycisku kursywy do kliknięcia, podobnie jak w edytorze tekstu. Dlatego musisz "oznaczyć" słowo, które ma być zapisane kursywą. Kod do włączania kursywy to < i >, a kod do wyłączania kursywy to < /i >. Twój kod HTML wyglądałby mniej więcej tak:
< i > Wszystko < /i > jest w sprzedaży. To jest przykład dwustronnego znacznika, który otacza tekst między otwierającymi i zamykającymi znacznikami, w tym przypadku < i > i < /i >. Zwróć uwagę na ukośnik w tagu zamykającym (< /i >). Ten ukośnik odróżnia znacznik otwierający od znacznika zamykającego. W przypadku dwustronnego znacznika dla każdego otwierającego znacznika zawsze znajduje się odpowiedni znacznik zamykający. Aby zrozumieć, jak powstał ten system znakowania, musisz wiedzieć, że w dawnych czasach Internetu prawie wszyscy łączyli się z nim za pomocą modemu telefonicznego z prędkością od 2400 b / s do 28,8 Kb / s. To jest naprawdę powolne. Pliki tekstowe przesyłane są znacznie szybciej niż pliki binarne, więc aby każdy rodzaj systemu wymiany informacji był popularny, musiał być oparty na tekście. W przeciwnym razie ludzie zasnęliby podczas oczekiwania na załadowanie strony. Osoby projektujące strony internetowe także chciały, aby ich strony były atrakcyjne. Nie mogli jednak po prostu formatować stron w edytorze tekstu, ponieważ każdy edytor tekstu obsługiwał formatowanie inaczej i nie można było ustalić, z którego użytkownika strony może korzystać. Pliki do edycji tekstu są również znacznie większe niż zwykłe pliki tekstowe.
Twórcy sieci opracowali eleganckie rozwiązanie. Zamiast wysyłać sformatowane strony przez Internet, stworzyli aplikację - przeglądarkę internetową - która może interpretować kod tekstowy (znaczniki HTML) jako instrukcje formatowania. Tekst można szybko i sprawnie wysłać w formacie zwykłego tekstu, a następnie przetwarzać i wyświetlać w atrakcyjny sposób i graficznie na lokalnym komputerze. HTML sam świetnie działał w przypadku wszelkiego rodzaju formatowania tekstu, ale niektórzy projektanci stron internetowych chcieli umieścić grafikę na swoich stronach. Aby to uwzględnić, stworzono znacznik < img > , za pomocą którego projektanci odnoszą się do grafiki przechowywanej na serwerze. Gdy przeglądarka internetowa dotrze do tego znacznika, żąda, aby plik obrazu został pobrany z serwera i wyświetlony na stronie. Znacznik < img > różni się na kilka sposobów od znacznika < i >. Jest jednostronny, co oznacza, że nie ma tagu zamykającego i przyjmuje atrybuty. Atrybut to tekst wewnątrz tagu, który zawiera informacje o tym, jak tag powinien się zachowywać. Na przykład dla znacznika < img > musisz podać źródło, w skrócie src. Oto przykład:
< img src = "tree.gif" >
Ten znacznik < img > używa atrybutu src = i określa, że plik tree.gif ma być wyświetlany. Wiele tagów akceptuje atrybuty, opcjonalne lub wymagane. W Spowiedniku zobaczysz wiele przykładów. Dzięki HTML możesz również tworzyć hiperłącza z jednej strony na drugą. Gdy odwiedzający witrynę sieci Web kliknie hiperłącze, przeglądarka internetowa ładuje stronę, do której się odwołuje, lub przechodzi do zaznaczonej sekcji ("zakładki") na tej samej stronie.
Znacznik hiperłącza to < a >, dwustronny znacznik, ale większość ludzi nie rozpoznałaby go bez atrybutu określającego plik lub lokalizację, do której należy przejść. Na przykład, aby utworzyć hiperłącze ze słowami Kliknij tutaj, które po kliknięciu przeskakuje do pliku index.htm, kodowanie wyglądałoby następująco:
< a href= "index.htm" > Kliknij tutaj < /a >
HTML ma oczywiście znacznie więcej, ale w zasadzie tak to działa. Zwykły tekst jest oznaczony znacznikami, które wskazują, gdzie należy zastosować takie elementy, jak formatowanie, hiperłącza i grafika, a przeglądarka internetowa interpretuje te znaczniki i wyświetla stronę w stanie sformatowanym. Sztuczka polega oczywiście na tym, aby wiedzieć, których znaczników użyć, gdzie są odpowiednie i jakich atrybutów potrzebują. I to jest temat tego Spowiednika!
Powrót
12.05.2020 Powrót
Zrozumienie kaskadowych arkuszy stylów
Projektanci stron internetowych, którzy pracowali z wczesnymi wersjami HTML do tworzenia dużych witryn internetowych, często byli sfrustrowani ilością powtórzeń związanych z ich pracą. Załóżmy, że witryna internetowa ma 200 stron, z których wszystkie mają ten sam podstawowy układ i wygląd. Aby zmienić projekt w całej witrynie, projektant musiałby wejść i ręcznie edytować każdą z tych 200 stron. Późniejsze wersje HTML ominęły ten problem, obsługując kaskadowe arkusze stylów. Opierając się na tej samej zasadzie, co szablony stylów w edytorze tekstu lub programie do układania strony, projektanci stron internetowych używają kaskadowych arkuszy stylów, aby określić formatowanie określonego typu znacznika - zwykle w osobnym dokumencie arkusza stylów - a następnie zastosować ten arkusz stylów do wiele stron. Chcesz zmienić styl? Po prostu zrób to w arkuszu stylów, a zmiana zostanie zastosowana automatycznie do wszystkich stron. Chociaż nadal możesz formatować dokumenty przy użyciu starszych metod - a nauczysz się, jak to zrobić trochę w tej książce - większość projektantów stron internetowych opiera się prawie wyłącznie na kaskadowych arkuszach stylów do formatowania w dzisiejszych czasach, a XHTML prawie tego wymaga więc. Na początku może się to wydawać zastraszające, ale jeśli tworzysz witrynę wielostronicową, dodatkowe problemy związane z konfiguracją kaskadowego arkusza stylów zwrócą się wielokrotnie.
Powrót
13.05.2020 Powrót
Dlaczego warto uczyć się HTML w Notatniku?
Uczymy się kodowania HTML na poziomie początkującym, ale uczymy w dość fundamentalny sposób: poprzez tworzenie zwykłych plików tekstowych w Notatniku. Obecnie na rynku jest tak wiele dobrych programów do tworzenia witryn internetowych, że możesz się zastanawiać, dlaczego my mamy takie podejście. Mówiąc najprościej, to dlatego, że tworzenie własnego kodu jest najlepszym sposobem na naukę HTML. Tu zbudujesz witrynę internetową od podstaw, pisząc każdy wiersz kodu. Jest to wolniejsze i nie tak fajny jak fantazyjny program graficzny, ale jest świetnym treningiem. Będziesz jednak znacznie lepszym projektantem stron internetowych - i lepiej zrozumiesz, co dzieje się w programach do projektowania - jeśli na początku poradzisz sobie z Notatnikiem.
Powrót
14.05.2020 Powrót
Wybór wersji HTML
Różne wersje HTML używają różnych znaczników dla niektórych typów treści, chociaż są one bardziej podobne niż różne ogólnie, szczególnie na poziomie początkującym opisanym w tej książce. Oto krótkie porównanie wersji HTML, które możesz napotkać:
• HTML4 Bardzo stabilny, powszechnie akceptowany zestaw kodów, który również dość wybacza małe błędy kodowania. Używanie kodów HTML4 jest pożądane, gdy ważna jest kompatybilność ze wszystkimi przeglądarkami.
• XHTML Ścisła, oparta na standardach implementacja HTML4 utworzona przy pomocy XML (eXtensible Markup Language). Kodowanie XHTML używa tych samych kodów co HTML4, więc jest kompatybilny z tymi samymi przeglądarkami co HTML4.
• HTML5 Zmieniony zestaw kodów oparty na HTML4 w celu dodania nowych możliwości. HTML5 oferuje wiele dramatycznych usprawnień w zakresie obsługi aplikacji i multimediów, ale wiele z tych funkcji wykracza poza zakres naszej nauki. Jeśli chodzi o podstawowe kodowanie, największą różnicą jest to, że istnieją nowe specyficzne kody dla różnych typów treści, które były wcześniej obsługiwane za pomocą bardziej ogólnych kodów. Na przykład HTML5 ma znaczniki < audio > i < video > do wstawiania treści multimedialnych, podczas gdy HTML4 wstawia wszystkie typy treści multimedialnych za pomocą ogólnego znacznika < embed >.
Ponieważ piszę o HTML5, może wydawać się oczywistą decyzją o kodowaniu za pomocą tagów HTML5, ale nie jest tak prosta jak w rzeczywistych sytuacjach. Dobra przeglądarka internetowa powinna idealnie obsługiwać każdy tag i każdą wersję HTML, jaką może, ponieważ różne różnice wersji HTML powinny być całkowicie niewidoczne dla odwiedzających witrynę. Jednak HTML5 jest tak nowy, że jeszcze nie wszystkie przeglądarki go dogoniły, a osoby korzystające ze starszych komputerów mogą nie mieć najnowszej wersji przeglądarki, nawet jeśli dostępna jest wersja zgodna z HTML5. Kod, który utworzysz podczas ćwiczeń , oparty jest na HTML5, ale pokażę też pewne obejścia w sytuacjach, w których kody HTML5 mogą powodować problemy w niektórych przeglądarkach. Nauczysz się obu sposobów tworzenia określonego efektu, dzięki czemu będziesz mógł wywoływać kody, które mają być używane w pracy w prawdziwym życiu, gdy pojawiają się sytuacje
Co to są XML i XHTML?
Istnieje język związany z HTML o nazwie Extensible Markup Language (XML), którego programiści używają do tworzenia własnych tagów. Jest szeroko stosowany na przykład w bazach danych, ponieważ może definiować tagi dla każdego pola danych. Ponieważ XML można tak całkowicie dostosować, programiści mogą tworzyć w nim prawie każdy inny język znaczników, po prostu tworząc ponownie wszystkie oficjalnie akceptowane znaczniki tego języka. W3C właśnie to zrobił: odtworzyli cały język HTML w XML i nazwali go Extensible HTML (XHTML). Wersja 1.0 została wydana w 2001 roku; obecna wersja to XHTML 2.0, wydana w 2004 roku. Zatem XHTML jest HTML napisany w większym języku XML. Ponieważ jego funkcjonalność jest praktycznie identyczna z HTML, podstawowy zestaw tagów jest taki sam i możesz uczyć się zarówno HTML, jak i XHTML w tym samym czasie. Możesz także użyć XHTML do tworzenia nowych tagów i rozszerzeń, co jest cenną funkcją dla zaawansowanych programistów internetowych. Jest tylko jedna rzecz w XHTML, na którą należy uważać: nie toleruje błędów. Na przykład w HTML, technicznie rzecz biorąc, każdy akapit powinien zaczynać się od < p >, a kończyć każdy akapit < /p >. Ale w HTML możesz pominąć zamykający tag < /p >, jeśli chcesz (lub jeśli go zapomnisz). To nie zadziała w XHTML. Istnieje wiele drobnych sposobów, w jakie XHTML jest tak wybredny. W pewnym momencie sądzono, że XHTML ostatecznie zastąpi HTML4 jako jego następcę, ale z powodu problemów z interoperacyjnością tak się nie stało; zamiast tego HTML5 jest gotowy na sukces HTML4. My nie opisujemy wprost XHTML, ale większość tego, czego się nauczysz, można zastosować do kodowania XHTML.
Powrót
15.05.2020 Powrót
Dlaczego kod w HTML5?
Krótka odpowiedź brzmi: powinieneś napisać kod w HTML5, ponieważ jest to inwestycja w przyszłość. Za kilka lat będzie to standard, na którym opierać się będą prawie wszystkie strony internetowe. Nieco dłuższą odpowiedzią jest to, że pozwala na czystszy, łatwiejszy do napisania kod. Technologia stron internetowych wzrosła skokowo, głównie ze względu na wzrost prędkości połączenia internetowego przeciętnego człowieka, ale także dlatego, że użytkownicy, projektanci i programiści coraz bardziej wymagają od swoich stron internetowych większej funkcjonalności, na przykład bardziej precyzyjnej kontroli czcionek i układu , lepsze renderowanie na urządzeniach o bardzo różnych rozmiarach, od telefonów komórkowych po ogromne monitory stacjonarne, lepsze obrazy, większa interaktywność, wideo, audio, animacje oraz lepsza obsługa różnych formatów zdjęć i plików. Ponieważ większość ludzi ma szybkie połączenia, nie muszą długo czekać na załadowanie stron zawierających duże pliki audio i wideo, co oznacza, że coraz więcej witryn zawiera treści audio i wideo. HTML nie został pierwotnie zaprojektowany z myślą o rygorach dostarczania treści multimedialnych, dlatego coraz więcej profesjonalnych witryn przeniosło się na inne języki i technologie, które narzucają piggyback na HTML, aby dostarczać te treści, takie jak JavaScript, Java i strony Active Server (ASP) ). HTML5 dodaje kilka nowych znaczników, dzięki którym integracja audio, wideo i aplikacji jest płynniejsza i bardziej niezawodna. Dowiesz się o wielu z tych nowych znaczników później, w tym < audio >, < video > i < canvas >. HTML5 usuwa obsługę niektórych starszych tagów. Na przykład stary sposób (wcześniejszy niż HTML4) określania czcionki jako znacznika < font >. Obecnie większość ludzi używa kaskadowych arkuszy stylów do zdefiniowania czcionki, więc znacznik < font > od dawna nie był używany przez wielu projektantów stron internetowych. HTML5 formalnie usuwa go z udręki. Jedną z największych rzeczy, które usuwa HTML5, jest możliwość tworzenia witryn sieci Web z wieloma ramkami za pomocą poleceń < frame > i < frameset >. Nadal możesz tworzyć witryny internetowe z wieloma sekcjami, ale są one obsługiwane znacznie lepiej przy użyciu tabel lub podziałów.
Powrót
16.05.2020 Powrót
Edycja i przeglądanie plików HTML
Otwieranie strony internetowej w Notatniku
Notatnik jest dołączony do wszystkich wersji systemu Windows i znajdziesz go w folderze Wszystkie programy (lub Programy) / Akcesoria w menu Start. Jest to prosty edytor tekstu, który zapisuje tylko w formacie zwykłego tekstu. Jest to idealne rozwiązanie do edycji HTML, ponieważ nie musisz martwić się o dodatkowe formatowanie tekstu w pliku. Uwaga: Do wykonania ćwiczeń opisanych w tej książce można użyć innej aplikacji do edycji tekstu. Notatnik to tylko sugestia. Podczas zapisywania lub otwierania plików w Notatniku domyślnym rozszerzeniem jest .txt. Okna dialogowe Zapisz i Otwórz są domyślnie ustawione tak, aby filtrować listy plików, więc pojawiają się tylko te pliki z rozszerzeniami .txt. Oznacza to, że za każdym razem, gdy szukasz pliku, musisz zmienić typ pliku na Wszystkie pliki, aby móc przeglądać strony internetowe (które mają rozszerzenia .htm lub .html).
Uwaga : Możesz napotkać różne rozszerzenia plików stron internetowych w Internecie, takie jak .php, .asp i .jsp. Są to wszystkie specjalne formaty zaprojektowane do użycia z określonymi technologiami serwerowymi. Ta książka dotyczy tylko opracowania podstawowego typu strony internetowej: typu z rozszerzeniem .htm lub .html.
W tym ćwiczeniu otworzysz stronę internetową w Notatniku i sprawdzisz jej tekst i znaczniki.
KONFIGURACJA : Użyj pliku powitalnego : Pobierz plik ćwiczenia. Wypakuj go do folderu Spowiednik.
1. Z menu Start wybierz Wszystkie programy | Akcesoria | Notatnik
2. W oknie bez tytułu Notatnika wybierz Plik | Otwarty.
3. Przejdź do folderu zawierającego plik.
4. Kliknij strzałkę w dół Pliki typu, a następnie kliknij Wszystkie pliki.
5. W oknie dialogowym Otwórz kliknij witaj.html, a następnie kliknij Otwórz. Plik witaj.html zostanie otwarty w Notatniku.
Uwaga : Rozszerzenie .htm może nie pojawić się w pliku powitalnym w oknie dialogowym Otwórz. Domyślnie rozszerzenia plików dla znanych typów plików są wyłączone w systemie Windows. Aby je włączyć, otwórz Komputer (lub Mój komputer), a następnie w menu Narzędzia (naciśnij klawisz Alt na pasku menu, jeśli go nie widzisz), kliknij Opcje folderów. Na karcie Widok w oknie dialogowym Opcje folderów wyczyść pole wyboru Ukryj rozszerzenia znanych typów plików, a następnie kliknij przycisk OK.
6. Znajdź znaczniki < html > i < /html >. Te znaczniki oznaczają początek i koniec kodu HTML.
7. Znajdź znaczniki < body > i < /body >.
Te znaczniki oznaczają początek i koniec widocznej części strony internetowej podczas przeglądania w przeglądarce.
8. Znajdź znaczniki < p > i < /p >.
Te znaczniki oznaczają początek i koniec akapitu.
CZYSZCZENIE : Pozostaw stronę otwartą w Notatniku do późniejszego wykorzystania.
Powrót
17.05.2020 Powrót
Otwieranie pliku z Eksploratora Windows
Szybkim sposobem otwarcia większości typów plików w domyślnych aplikacjach jest dwukrotne kliknięcie ich w dowolnym oknie Eksploratora Windows. Problem z robieniem tego w przypadku plików HTML polega jednak na tym, że domyślną aplikacją jest przeglądarka internetowa, a nie Notatnik; dlatego zamiast otwierania pliku w Notatniku, otwiera się on w przeglądarce internetowej. Jednym ze sposobów obejścia tego jest kliknięcie pliku prawym przyciskiem myszy w Eksploratorze Windows, wybranie Otwórz za pomocą menu kontekstowego, a następnie kliknij Notatnik. Spowoduje to otwarcie Notatnika i załadowanie pliku.
Powrót
18.05.2020 Powrót
Podgląd strony internetowej w przeglądarce internetowej
Ponieważ Notatnik nie jest programem WYSIWYG ("To, co widzisz, dostajesz"), nie będziesz w stanie od razu zobaczyć, jak wpisane znaczniki wpłyną na gotowy produkt. Aby obejść ten problem, większość projektantów stron internetowych ma otwarte okno przeglądarki obok Notatnika. Możesz wyświetlić podgląd swojej pracy w dowolnej przeglądarce; nie musisz używać Internet Explorera 9. W rzeczywistości, w miarę postępów w rozwijaniu umiejętności tworzenia stron internetowych, prawdopodobnie będziesz chciał nabyć kilka różnych przeglądarek do testowania swoich stron, ponieważ każda przeglądarka może wyświetlać elementy strony nieco inaczej. Jednak dla początkujących Internet Explorer jest dobrym wyborem, ponieważ jest najpopularniejszą przeglądarką - tą, z której najczęściej korzystają Twoi odbiorcy. Inne popularne przeglądarki to Google Chrome, Firefox, Safari i Opera.
Przestroga : Wersje programu Internet Explorer wcześniejsze niż wersja 9 nie obsługują niektórych funkcji HTML5. Prawdopodobnie będziesz chciał przetestować swoje strony internetowe we wcześniejszej wersji, aby upewnić się, że osoby, które ich używają, będą mogły wyświetlić Twoją stronę. Ale nie używaj wcześniejszej wersji Internet Explorera, gdy przeglądasz nasze przykłady ; nie uzyskasz pełnego efektu nowych funkcji HTML5.
Wskazówka : Jeśli karta graficzna w komputerze ma dwa złącza monitora lub jeśli masz dodatkową kartę wideo, którą możesz zainstalować w systemie, możesz ustawić dwa monitory obok siebie. W ten sposób możesz pracować nad kodem HTML w Notatniku na jednym monitorze i wyświetlać pełny ekran strony w Internet Explorerze na drugim. Wszystkie najnowsze wersje systemu Windows obsługują co najmniej dwa monitory, a niektóre wersje obsługują jeszcze więcej.
W tym ćwiczeniu wyświetlisz plik HTML w Internet Explorerze.
USTAWIENIA : Użyj pliku powitalnego z poprzedniego ćwiczenia
1. Wybierz Start | Internet Explorer.
Uwaga : W zależności od systemu i domyślnej przeglądarki program Internet Explorer może nie zostać przypięty do górnej części menu Start. Jeśli nie jest, kliknij Start | Wszystkie programy | Internet Explorer.
2. Wybierz Plik | Otwórz.Pojawi się okno dialogowe Otwórz.
Uwaga :Jeśli pasek menu nie pojawia się w przeglądarce Internet Explorer, naciśnij klawisz Alt, aby go wyświetlić.
3. Kliknij przycisk Przeglądaj, a następnie przejdź do katalogu zawierającego Twój plik
4. Kliknij witaj.html, a następnie kliknij Otwórz.
Ścieżka do pliku pojawi się w oknie dialogowym Otwórz.
5. Kliknij OK.
Plik zostanie otwarty w przeglądarce Internet Explorer
Metoda, której się nauczyłeś, działa szczególnie dobrze, gdy masz już otwartą przeglądarkę internetową, w którym to przypadku możesz pominąć krok 1. Alternatywną metodą jest przejście do lokalizacji przechowywania za pomocą Eksploratora Windows i dwukrotne kliknięcie pliku. Pamiętaj, że nie można kliknąć dwukrotnie strony internetowej, aby ją edytować; musisz kliknąć go prawym przyciskiem myszy. Domyślnie operacja dwukrotnego kliknięcia jest zarezerwowana do otwarcia strony w przeglądarce internetowej. Co było trudem jeszcze kilka stron temu, teraz jest wygodą!
Wskazówka : Nie wszystkie przeglądarki wyświetlają strony dokładnie w ten sam sposób. Na przykład pomysł jednej przeglądarki na wygląd tekstu może być inny. Warto sprawdzać strony w wielu przeglądarkach, takich jak Firefox, Chrome i Opera. Są one dostępne do bezpłatnego pobrania ze strony www.firefox.com, www.google.com/chrome i www.opera.com, odpowiednio.
Powrót
19.05.2020 Powrót
Wprowadzanie, zapisywanie i wyświetlanie zmian
Po wprowadzeniu zmiany na stronie internetowej prawdopodobnie będziesz chciał zobaczyć jej podgląd. Jeśli skonfigurujesz okna przeglądarki Internet Explorer i Notatnika obok siebie w poprzednich dwóch ćwiczeniach, możesz łatwo zobaczyć te zmiany. Po prostu zapisz swoją pracę w Notatniku, a następnie odśwież ekran w Internet Explorerze. W tym ćwiczeniu dodasz słowo ,"szalonym", przed słowem świecie w pliku witaj.htm, a następnie wyświetlisz podgląd tej zmiany w Internet Explorerze. To ćwiczenie opiera się na dwóch poprzednich, więc upewnij się, że je ukończyłeś. Możesz skorzystać z tej procedury przez resztę książki, aby wyświetlić podgląd pracy z każdego ćwiczenia.
KONFIGURACJA : Przed rozpoczęciem tego ćwiczenia należy otworzyć plik witaj.html w Notatniku i przeglądarce Internet Explorer. Użyj pliku powitalnego z poprzedniego ćwiczenia
1. W Notatniku zlokalizuj słowo "świecie" i wstaw przed nie słowo "szalony":
< p > Witaj szalony świecie < /p >
2. Zapisz swoją pracę (Plik | Zapisz).
3. Na pasku narzędzi programu Internet Explorer kliknij przycisk Odśwież.
Zwróć uwagę, że strona internetowa pokazana w Internet Explorerze odtąd brzmi teraz "szalonym".
Powrót
20.05.2020 Powrót
Kluczowe punkty
• Dowolny edytor zwykłego tekstu, w tym Notatnik, może być edytorem HTML.
• Większość stron internetowych ma rozszerzenie .htm lub .html. Możesz je otworzyć w Notatniku, ale najpierw musisz zmienić ustawienie Pliki typu w oknie dialogowym Otwórz na Wszystkie pliki. Musisz zmienić to ustawienie za każdym razem, gdy korzystasz z okna dialogowego Otwórz.
• Alternatywnym sposobem otwarcia strony internetowej w Notatniku jest kliknięcie jej prawym przyciskiem myszy w Eksploratorze Windows, wybranie Otwórz za pomocą menu kontekstowego, a następnie kliknięcie Notatnika.
• Aby wyświetlić podgląd strony w przeglądarce internetowej, wybierz Plik | Otwórz z menu przeglądarki.
• Możesz dwukrotnie kliknąć plik .htm lub .html w Eksploratorze Windows, aby otworzyć go automatycznie w domyślnej przeglądarce internetowej.
• Aby zobaczyć zmiany wprowadzone w Notatniku odzwierciedlone w przeglądarce internetowej, zapisz swoją pracę w Notatniku, a następnie kliknij Odśwież w oknie przeglądarki.
Powrót
21.05.2020 Powrót
Konfigurowanie struktury dokumentu
Każde społeczeństwo potrzebuje infrastruktury z pewnymi zasadami, na które wszyscy zgodzą się dla ogólnego dobra publicznego. Na przykład wszyscy zgodziliśmy się, że czerwone światło oznacza "stop", a zielone światło oznacza "idź". Każdy, kto chce uczestniczyć w systemie transportu, musi przestrzegać tych zasad, w przeciwnym razie nastąpi chaos. HTML jest taki sam. Możesz wykazać się kreatywnością przy użyciu treści WWW, ale musi istnieć podstawowa struktura dla przeglądarek internetowych, aby poprawnie czytać i renderować strony internetowe. Oznacza to, że dokument musi zawierać pewne znaczniki, które określają jego główne sekcje i wskazują przeglądarce, jakiego rodzaju kodowania używa dokument. W tej części dowiesz się, jak utworzyć dokument z odpowiednimi znacznikami. Dowiesz się, jak określić rodzaj pisanego HTML i jak tworzyć sekcje Head and Body. Dowiesz się również, jak tworzyć podziały akapitów i wierszy, określać tytuł strony, wprowadzać ukryte słowa kluczowe, za pomocą których można znaleźć stronę w wyszukiwarkach, oraz publikować stronę testową na serwerze internetowym. Zobacz także Czy potrzebujesz tylko szybkiego odświeżenia tematów w tym rozdziale? Zobacz sekcję Kluczowe punkty na końcu tej części
Powrót
22.05.2020 Powrót
Określanie typu dokumentu
Podczas tworzenia dokumentu HTML5 pierwszym wierszem dokumentu powinien być ten tag:
< ! DOCTYPE html >
Tag DOCTYPE zawsze zaczyna się od wykrzyknika i jest zawsze umieszczany na początku dokumentu, przed jakimkolwiek innym tagiem. Większość znaczników HTML nie rozróżnia wielkości liter, ale słowo DOCTYPE powinno zawsze być pisane wielkimi literami. Korzystanie ze znacznika DOCTYPE jest jak podpisanie umowy. Jest to opcjonalny tag, ale kiedy go użyjesz, obiecujesz, że twoje kodowanie będzie zgodne z pewnymi standardami. Gdy przeglądarka internetowa napotka znacznik DOCTYPE, przetwarza stronę w trybie standardów. Gdy nie napotyka tagu DOCTYPE, zakłada, że strona ma coś dziwnego i przetwarza stronę w trybie dziwactwa. Gdy przeglądarka zobaczy tag , zakłada, że używasz HTML5. Rozróżnienie między trybem standardowym a trybem dziwactw pojawiło się we wcześniejszych dniach, kiedy występowały problemy ze standaryzacją między przeglądarkami internetowymi. W niektórych przeglądarkach, aby prawidłowo wyświetlać strony, trzeba było trochę kreatywności z kodem HTML. Nowoczesne kodowanie HTML na to nie pozwala, ale niektóre starsze strony nadal zawierają te przestarzałe obejścia. Używając znacznika DOCTYPE, obiecujesz przeglądarce internetowej, że na stronie nie ma nic oprócz czystego kodu HTML. Wcześniejsze wersje HTML używały bardziej złożonych znaczników DOCTYPE. Jeśli używasz HTML w wersji 4.01, składnia tagu to:
< ! DOCTYPE HTML PUBLIC "- // W3C / DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd" >
Jeśli używasz XHTML, składnia tagu to:
< ! DOCTYPE HTML PUBLIC "- // W3C / DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
Uwaga Jeśli piszesz kod XHTML, wymagany jest tag DOCTYPE.
Powrót
23.05.2020 Powrót
Tworzenie sekcji HTML, head i body
Całe twoje kodowanie HTML - oprócz znacznika DOCTYPE - powinno być umieszczone w dwustronnym znaczniku < html > Przypomnijmy z wprowadzenia, że gdy tag jest dwustronny, wymaga odpowiedniego tagu zamykającego, który jest identyczny z tagiem otwierającym, ale zawiera ukośnik: . Znaczniki < html > i < / html > służą jako "opakowanie" wokół wszystkich innych znaczników w dokumencie. Ponadto dokument powinien mieć dwie sekcje: head i body. Sekcja head jest zdefiniowana przez dwustronny tag < head >. Sekcja head zawiera tytuł strony, który jest tekstem, który pojawi się na pasku tytułowym przeglądarki internetowej i na przycisku paska zadań Microsoft Windows. Zawiera także informacje o nie wyświetlanym dokumencie, takie jak jego znaczniki < meta >. Możesz także dołączyć wiersze kodu uruchamiające skrypty, takie jak Javascript. Sekcja body jest zdefiniowana przez dwustronny znacznik < body > i zawiera wszystkie informacje, które pojawiają się w przeglądarce internetowej podczas przeglądania strony. Uwaga Znaczniki < html > , < head > i < body > są opcjonalne w kodzie HTML - ale nadal należy ich używać, ponieważ jest to dobra praktyka projektowa. Są wymagane w XHTML. Ponadto w XHTML należy dodać argument do znacznika < html>, który deklaruje jego przestrzeń nazw XML, odniesienie do faktu, że XHTML jest tworzony w XML. Oto jak otwierający tag powinien wyglądać w dokumencie XHTML:
< html xlmns = http://www.w3.org/1999/xhtml >.
W tym ćwiczeniu utworzysz plik szablonu HTML5, którego możesz później użyć ponownie do własnej pracy.
KONFIGURACJA : Uruchom program Microsoft Notepad przed rozpoczęciem tego ćwiczenia.
1. W Notatniku otwórz menu Format. Zawijanie wyrazów powinno mieć obok niego znacznik wyboru. Jeśli nie, kliknij go, aby włączyć funkcję Zawijanie wyrazów.
Wskazówka : Korzystanie z zawijania tekstu ułatwia przeglądanie długich linii kodu HTML bez przewijania.
2. W oknie Notatnika wpisz następujące polecenie:
< ! DOCTYPE html >
3. Naciśnij Enter, a następnie wpisz:
< html >
< head >
4. Naciśnij Enter dwa lub trzy razy, aby dodać puste linie, a następnie wpisz:
< / head >
< body>
5. Naciśnij Enter dwa lub trzy razy, aby dodać puste linie, a następnie wpisz:
< / body >
< / html >
6. Zapisz plik jako HTML5.htm na pulpicie Windows (lub w innym dogodnym dla Ciebie miejscu).
Uwaga: Większość plików, z którymi pracujesz, będzie przechowywana w innym miejscu, ale może okazać się pomocne, aby szablony utworzone w tym ćwiczeniu były przydatne do ponownego wykorzystania. Pulpit jest wygodnym miejscem do ich przechowywania lub możesz przechowywać je w dowolnym miejscu.
Masz teraz szablon do tworzenia dowolnych dokumentów HTML, które lubisz. Możesz ponownie otworzyć ten plik szablonu i zapisać go pod różnymi nazwami, co pozwoli zaoszczędzić czas podczas ponownego tworzenia tych podstawowych tagów.
Wskazówka : Jeśli chcesz uniknąć przypadkowego edytowania szablonu w przyszłości, ustaw go jako tylko do odczytu. Aby to zrobić, w Eksploratorze Windows kliknij plik prawym przyciskiem myszy, a następnie wybierz Właściwości z menu kontekstowego. W oknie dialogowym Właściwości zaznacz pole wyboru Tylko do odczytu. Podczas próby zapisania zmian w pliku tylko do odczytu pojawia się komunikat o błędzie, a okno dialogowe Zapisz jako monituje o zapisanie jego kopii pod nową nazwą.
Powrót
24.05.2020 Powrót
Tworzenie akapitów i podziałów linii
W sekcji < body > dokumentu wpisujesz tekst, który pojawi się na stronie internetowej. Każdy akapit tekstu powinien być zawarty w dwustronnym znaczniku wskazującym jego rodzaj. Najbardziej podstawowym typem akapitu jest akapit treści, oznaczony znacznikiem < p >. Jest to dwustronny znacznik, więc tekst akapitu jest umieszczany między < p > a < /p >.
Uwaga : W HTML kod nadal będzie działał, nawet jeśli pominięto < /p >; w XHTML nie będzie. Jednak nawet jeśli nigdy nie planujesz kodowania w XHTML, dobrą praktyką jest włączenie uderzenia znacznika < /p >. W ten sposób nie popadniesz w niechlujne nawyki.
Gdy przeglądarka wyświetla stronę internetową, wstawia pionową białą przestrzeń między akapitami. Takie odstępy są zwykle wygodne, ale może być problem, gdy dodatkowa przestrzeń między wierszami jest niepożądana, na przykład przy adresie. Aby utworzyć podział wiersza bez oficjalnego rozpoczynania nowego akapitu (a tym samym dodając dodatkową spację), użyj znacznika
. To jednostronny znacznik umieszczony w akapicie, na końcu każdej linii, tak:
< p > David Jaffet< br >
317-555-8882 < /p >
Uwaga : W XHTML znacznikiem podziału linii jest < br />. Końcowy ukośnik (i spacja) jest niezbędny do wskazania, że jest to tag samozamykający się. Zwróć uwagę, że ukośnik jest umieszczany za literami, a nie przed, jak w przypadku zamykającego końca dwustronnego znacznika. W XHTML jednostronne znaczniki muszą kończyć się ukośnikiem wskazując, że są samozamykające. Wymagana jest również przestrzeń między tekstem a ostatnim ukośnikiem, aby znacznik został rozpoznany w HTML.
W tym ćwiczeniu dodasz tekst do szablonu pliku HTML, a następnie wyświetlisz podgląd w przeglądarce Microsoft Internet Explorer.
KONFIGURACJA : Użyj tego pliku HTML5.htm z poprzedniego ćwiczenia Otwórz plik HTML5 w Notatniku.
1. Zapisz plik HTML5 w swoim folderze jako index.htm.
Uwaga: Zwyczajowo nazywa się stronę początkową strony internetowej index.htm, index.html, default.htm lub default.html. Gdy użytkownicy wpisują adres URL w swoich przeglądarkach internetowych, ale pomijają nazwę pliku (na przykład wpisując www.microsoft.com zamiast www.microsoft.com/filename.htm), większość serwerów automatycznie odpowie indeksem lub domyślną stroną, jeśli istnieje.
2. Otwórz plik indeksu w Internet Explorerze i ustaw okna Notatnika i Internet Explorera tak, aby oba były widoczne. Plik indeksu wyświetlany w przeglądarce Internet Explorer jest obecnie pusty.
3. W oknie Notatnika wpisz następujące znaczniki między znacznikami < body > i < /body >:
< p > Witamy w Ogrodach Świata! Mamy nadzieję, że okaże się, że nasza strona jest przydatnym źródłem informacji, aby stać się lepszym ogrodnikiem. < p >
< p > Nasz główny sklep znajduje się pod adresem: < br >
ul. Murarska 5< br >
10-100 Koziegłowy< /p >
< p > Zatrzymaj się i przejrzyj naszą obszerną listę zasobów reklamowych od poniedziałku do soboty w godzinach od 7:00 do 20:00 < /p >
4. Zapisz swoją pracę, a następnie naciśnij klawisz F5 lub kliknij przycisk Odśwież po prawej stronie paska adresu, aby odświeżyć ekran w Internet Explorerze i zobaczyć wynik zmian. Pozostaw oba okna otwarte do następnego ćwiczenia.
Powrót
25.05.2020 Powrót
Określanie tytułu strony i metatagi
Być może zauważyłeś w poprzednim ćwiczeniu, że pełna ścieżka do pliku pojawiła się na pasku tytułowym przeglądarki Internet Explorer. Zwykle podczas przeglądania strony internetowej w tym miejscu pojawia się przyjazny, opisowy tytuł. Ten tekst jest określony znacznikiem < title >, który jest umieszczony w sekcji < head > (zwanej także nagłówkiem). Oto przykład:
< head >
< title> Ogrody Świata < / title >
< / head >
Rozwiązywanie problemów : Upewnij się, że umieściłeś tag < title > w sekcji < head >, a nie w sekcji < body >. Kolejnym elementem, który można umieścić w nagłówku, jest znacznik < meta >. Tag < meta > ma kilka celów. Jednym z nich jest identyfikacja słów kluczowych związanych z Twoją stroną. Umieszczenie na stronie odpowiednich słów kluczowych może ułatwić użytkownikom znalezienie Twojej strony podczas wyszukiwania w Internecie za pomocą wyszukiwarki, takiej jak MSN. Kiedy niektóre wyszukiwarki indeksują Twoją stronę, polegają nie tylko na pełnym tekście strony, ale także na dowolnych słowach kluczowych, które znajdują w obszarze znaczników < meta >.
Uwaga : Nie wszystkie wyszukiwarki odnoszą się do tagów < meta >. Google na przykład nie; indeksuje tylko tekst zawarty w obszarze < body >. Ze względu na możliwość nadużywania systemu, na przykład przez programistów stron internetowych pakujących swoje strony niepowiązanymi słowami kluczowymi, obecnie używa ich coraz mniej wyszukiwarek.
Załóżmy na przykład, że strona internetowa The Garden Company byłaby przydatna dla osób, które szukają informacji na temat wszelkiego rodzaju problemów ogrodniczych, takich jak szkodniki, chwasty i grzyby, a także na temat uprawy kwiatów i warzyw. Być może wszystkie te tematy nie są wymienione na stronie głównej, ale chcesz, aby ludzie, którzy szukają tych słów, byli kierowani na stronę główną. Możesz umieścić następujące w sekcji < head >:
meta name = "keywords" content = "szkodniki, chwasty, grzyby, rośliny, kwiaty, warzywa" >
Zauważ, że znacznik < meta > w powyższym kodzie jest jednostronnym znacznikiem, który zawiera dwa atrybuty: nazwę i treść. Wartości każdego z tych argumentów są oznaczone znakiem równości i są zawarte w podwójnych cudzysłowach.
Uwaga: Jeśli piszesz w XHTML, dodajesz spację i ukośnik (/) na końcu znacznika , ponieważ jest to znacznik jednostronny (samozamykający się). W HTML nie jest to konieczne.
Tag < meta > może także służyć do przekierowywania odwiedzających na inną stronę. Załóżmy na przykład, że znasz adres swojej witryny sieci Web, a następnie musisz przenieść go pod inny adres URL. Możesz umieścić stronę "Przeprowadziliśmy się" pod oryginalny adres i użyć tagu < meta >, aby przekierować użytkowników na nowy adres po pięciu sekundach, w ten sposób:
< meta http-equiv = "refresh" content = "5; url = http: //www.contoso.com/newpage.htm" >
Oto jeszcze jedno popularne zastosowanie: tag < meta > może określać schemat kodowania znaków. Nie jest to duży problem, jeśli kodujesz tylko w języku angielskim (lub w języku takim jak angielski, który używa zestawu znaków rzymskich), ale i tak uważa się to za schludną praktykę kodowania. Jeśli chcesz, możesz dodać do sekcji < head > dokumentu, aby jawnie przeliterować, że twoja strona jest w języku angielskim. W tym ćwiczeniu dodasz tytuł strony i niektóre słowa kluczowe do strony index.htm utworzonej w poprzednim ćwiczeniu.
Powrót
26.05.2020 Powrót
Publikowanie pliku na serwerze
Podczas większości ćwiczeń będziesz zapisywać strony na własnym dysku twardym. W ten sposób nie dostaną się w ręce publiczne, zanim nie zostaną ukończone. Jednak po sfinalizowaniu strony konieczne będzie przeniesienie jej na publicznie dostępny serwer sieciowy (czyli opublikowanie), aby inni mogli ją wyświetlić. Istnieje kilka sposobów przesyłania plików na serwer. Firma lub osoba odpowiedzialna za serwer powinna być w stanie doradzić ci w sprawie twoich opcji. Oto niektóre z możliwości, które mogą być dostępne:
• Przesyłanie przez połączenie FTP za pomocą Internet Explorera. Robisz to, wpisując adres serwera FTP (który rozpocznie się ftp: //) w pasku adresu przeglądarki Internet Explorer. W oknie dialogowym pojawi się monit o podanie nazwy użytkownika i hasła do tego serwera. Jeśli wprowadzisz je poprawnie, pojawi się okno zarządzania plikami podobne do Eksploratora Windows, tak jak podczas przeglądania dowolnego folderu na dysku twardym. Następnie możesz przenieść pliki, przeciągając je do tego okna lub kopiując i wklejając do okna FTP.
• Przesyłanie przez połączenie FTP za pomocą oprogramowania FTP. Istnieje wiele aplikacji FTP innych firm, które ułatwiają przesyłanie plików. Te narzędzia mają pewne zalety w stosunku do metody przesyłania Internet Explorera, takie jak możliwość ponownego uruchomienia przesyłania, które zostało przerwane z powodu błędów komunikacji. Niektóre przykłady obejmują FileZilla (www.filezilla-project.org) i BulletProof FTP (www.bpftp.com).
• Zapisywanie bezpośrednio w folderze internetowym. Większość narzędzi programistycznych, takich jak Microsoft Expression Web, pozwala zapisywać bezpośrednio na serwerze sieci Web, wpisując adres URL witryny w oknie dialogowym Zapisz jako. To bardzo wygodne! Niestety nie można tego zrobić w Notatniku.
Ten Spowiednik nie zawiera ćwiczenia transferu plików na serwer, ponieważ szczegóły procesu różnią się w zależności od wielu czynników, w tym witryny, w której zapisujesz, dostępności oprogramowania FTP i używanej wersji systemu Windows. Jeśli masz pytania dotyczące przesyłania plików, poproś o radę administratora sieci lub personel pomocy technicznej.
Powrót
27.05.2020 Powrót
Kluczowe punkty
• Aby określić HTML5 jako typ dokumentu, dodaj < ! DOCTYPE html > na początku pliku.
• Całe kodowanie HTML w dokumencie (oprócz DOCTYPE) jest zawarte w dwustronnym znaczniku < html >.
• Znaczniki < html > i obejmują sekcje < head > i < body >.
• Obszar < head > zawiera tytuł strony (< title >) i wszelkie znaczniki < meta >. Obszar < body > zawiera cały wyświetlany tekst strony.
• Umieść każdy akapit w dwustronnym znaczniku
. Większość przeglądarek dodaje spacje między akapitami podczas wyświetlania strony.
• Aby utworzyć podział wiersza bez rozpoczynania nowego akapitu, użyj jednostronnego znacznika
.
• Podczas kodowania XHTML zakończ jednostronne tagi spacją i ukośnikiem (/). Przestrzeń jest wymagana do rozpoznania w HTML, a ukośnik jest niezbędny do rozpoznania w XHTML.
• Użyj znaczników < meta > w sekcji < head >, aby wskazać słowa kluczowe i język kodowania dokumentu.
• Użyj tagów < title > i < /title >, aby otoczyć tekst, który powinien pojawić się na pasku tytułowym przeglądarki. Umieść je w sekcji
• Aby opublikować strony bezpośrednio na serwerze, możesz użyć narzędzia FTP lub funkcji FTP wbudowanej w system Windows lub (za pomocą niektórych narzędzi) możesz zapisać pliki bezpośrednio na serwerze. Jednak Notatnik nie oferuje tej możliwości
Powrót
28.05.2020 Powrót
Formatowanie tekstu przy użyciu znaczników
Tworzenie stron internetowych nie jest edytowaniem tekstu. Ważne jest, aby o tym pamiętać podczas nauki HTML, ponieważ zamierzam poprosić cię o cierpliwość przez kilka części, gdy uczysz się HTML we właściwy sposób - to znaczy w sposób zgodny ze standardami. Kiedy większość ludzi myśli o formatowaniu tekstu, pierwszą rzeczą, która przychodzi im na myśl, jest wybór czcionki - kroju pisma, rozmiaru i koloru. Łatwo to zrobić w dokumencie edytora tekstu, ale w HTML jest to bardziej skomplikowane. Wczesne wersje HTML używały znacznika < font > do określania określonego kroju, rozmiaru i koloru. Gdyby to było dziesięć lat temu, chętnie nauczyłbym cię tego znacznika, ale znacznik < font > został usunięty z HTML5. Mimo że większość przeglądarek nadal rozpoznaje tag , nie należy go używać: jest przestarzały. Dlatego zamiast uczyć cię złych nawyków za pomocą starych tagów, zamierzam nauczyć cię, jak stosować kroje, rozmiary i kolory do tekstu ze stylami - ale nie w tej części. Chociaż używanie stylów jest doskonałym sposobem na stosowanie czcionek do tekstu, jest nieco bardziej zaawansowane niż na to jesteś gotowy.
W tej części przedstawiono kilka ważnych tagów, które formatują tekst zgodnie z jego przeznaczeniem. Dowiedziałeś się już o znaczniku < p > zwykłych akapitów, ale istnieje wiele innych znaczników, które są używane do nagłówków, kodu programowania, cytatów i innych. Większość znaczników omawianych tutaj to znaczniki semantyczne; opisują one funkcję tekstu, a nie zawierają wskazówek dotyczących formatowania. Na przykład znacznik nagłówka < h1 > określa, że tekst w nim powinien być sformatowany jako główny nagłówek, ale nie określa, jakie powinno być to formatowanie. Specyfika formatowania znaczników semantycznych może pochodzić z różnych źródeł:
• Style: możesz określić rodziny czcionek i rozmiary, które będą używane w całej witrynie. Na przykład możesz wybrać rodzinę czcionek, która będzie sugerowana przeglądarce za każdym razem, gdy zostanie zastosowany określony znacznik.
• Używana przeglądarka internetowa : Każda przeglądarka internetowa ma domyślne ustawienia standardowych tagów HTML. Na przykład w Internet Explorerze (i większości innych przeglądarek) < h1 > jest wyrównany do lewej, 18-punktowy Times New Roman. Większość przeglądarek używa tych samych ustawień domyślnych dla bardzo podstawowych tagów, ale niestandardowe przeglądarki, takie jak te na telefonach, często wyświetlają tekst inaczej.
• Indywidualne dostosowywanie użytkownika : Użytkownik może dostosować swoją przeglądarkę internetową do swoich preferencji. W dalszej części tego rozdziału będziesz grać z tymi ustawieniami w Internet Explorerze, abyś wiedział, co robią potencjalni odbiorcy.
Pamiętaj, ćwicząc używanie tagów, że ich formatowanie nie jest naprawione. Wyniki, które widzisz podczas podglądu stron ćwiczeń w Internet Explorerze, reprezentują domyślne ustawienia twojej wersji Internet Explorera (lub dowolnej przeglądarki, której używasz do podglądu); styl nie jest nieodłączny od samych tagów. Stanie się to ważne później, gdy nauczysz się definiować bardziej szczegółowe formatowanie znaczników.
Powrót
29.05.2020 Powrót
Tworzenie nagłówków
Nagłówki na stronach internetowych działają tak samo jak w drukowanych dokumentach - dzielą tekst na sekcje. Standard HTML określa sześć poziomów nagłówków, od < h1 > do < h6 >, z których każdy stopniowo zmniejsza rozmiar czcionki. Jak wspomniano wcześniej, do znaczników nagłówka nie są przypisane określone rozmiary ani czcionki - ich wygląd może się różnić w zależności od przeglądarki i jej ustawień. Ale poziomy nagłówka oznaczają względne rozmiary; im wyższy numer nagłówka, tym mniejszy rozmiar będzie renderowany na ekranie. Na przykład w programie Internet Explorer 9 użycie ustawień domyślnych sprawi, że sześć poziomów nagłówka będzie wyglądać tak, jak pokazano na poniższej grafice. Być może zauważyłeś, że nagłówki 5 i 6 są w rzeczywistości mniejsze niż tekst podstawowy. Pamiętaj jednak, że są to tylko ustawienia domyślne; możesz ponownie zdefiniować te nagłówki, aby pojawiały się w dowolny sposób. Wiele programów do odczytu ekranu używa kodów nagłówków od < h1 > do < h6 >, aby pomóc użytkownikom niedowidzącym poruszającym się po dokumencie, a niektóre struktury stron opierają się również na nagłówkach. (HTML5 ma nowy sposób opisywania dokumentów, ale wykracza to poza nasz zakresi). Jednak w niektórych przypadkach możesz mieć stos nagłówków, który łącznie powinien zajmować tylko jedno miejsce w konspekcie, na przykład:
< h1 > Dog Agility Club of Indiana < / h1 >
< h2 > Trening dla psich sportowców i ich ludzi < / h2 >
HTML5 wprowadza nowy znacznik radzący sobie z tą sytuacją, o nazwie < hgroup >. Po umieszczeniu stosu nagłówków w obrębie < hgroup >, tylko pierwszy nagłówek na stosie pojawi się w konspekcie; pozostałe zostaną zignorowane przez czytniki ekranu i inne narzędzia konspektu.
< hgroup >
< h1 > Dog Agility Club of Indiana < / h1 >
< h2 > Trening dla psich sportowców i ich ludzi < / h2 >
< / hgroup >
Przeglądarki, które nie obsługują tego znacznika, po prostu go ignorują, więc korzystanie z niego w razie potrzeby nie jest szkodliwe.
Powrót
30.05.2020 Powrót
Stosowanie pogrubienia i kursywy
Stosowanie pogrubionych i kursywnych stylów to dwa sposoby wyróżnienia tekstu i przyciągnięcia uwagi. Zazwyczaj używasz tych stylów w akapitach, a nie w nagłówkach, ale stosowanie ich w dowolnym miejscu jest całkowicie dopuszczalne. W przypadku prostych pogrubionych znaków i kursywy użyj odpowiednio znaczników < b > i < i >. Są to dwustronne znaczniki, które otaczają tekst do sformatowania. Na przykład:
< p > Świetnie się bawiłem < i > na imprezie. < /i >
< p > Odbiór odbędzie się w < b > The Arbor Arch < /b> w Plainfield. < / p>
Jeśli chcesz zastosować pogrubienie i kursywę, możesz zagnieździć jeden znacznik w drugim. Nie mieszaj ich porządku. Podczas zagnieżdżania znaczników reguła jest następująca: pierwszy na począątku, ostatni na końcu. To jest poprawne:
< p > Następna książka, którą przeczytamy, to < b > < i > The Catcher in the Rye < / i > < / b > < / p >
Natomiast poniższy przykład jest nieprawidłowy, ponieważ kolejność znaczników końcowych < / b > i < / i > jest odwrócona:
< p > Następna książka, którą przeczytamy, to < b > < i > The Catcher in the Rye < / b > < / i > < / p >
Mimo że tagi w poprzednim przykładzie są nieprawidłowo zagnieżdżone, większość przeglądarek nadal wyświetla je poprawnie, pod warunkiem, że jako typ dokumentu używasz HTML. Jednak w dokumencie XHTML ten typ odwracania znaczników nie jest akceptowany.
Uwaga : HTML pozwala także na znacznik < strong > jako zamiennik < b >, a znacznik < em > (wyróżnienie) jako zamiennik < i >. Na przykład Expression Web używa < em > i < strong > po zastosowaniu kursywy i pogrubienia z paska narzędzi. Prawdopodobnie nigdy ich nie użyjesz, ale powinieneś wiedzieć, jakie one są, na wypadek, gdybyś je spotkał. Możesz także zdefiniować pogrubioną i kursywą atrybuty dla stylów, jak będziesz się uczyć później. W tym ćwiczeniu tekst zostanie pogrubiony i pochylony.
Powrót
31.05.2020 Powrót
Stosowanie formatowania indeksu górnego i dolnego
Formatowanie w indeksie górnym zmniejsza tekst i podnosi go poza linię bazową. Zazwyczaj używasz indeksu górnego do formatowania wykładników w równaniach matematycznych (na przykład X2 + 1) oraz liczb i symboli przypisów dolnych (jak to*). Możesz również użyć indeksu górnego do sformatowania porządkowego liczby takie jak 1szy, 2gi. i 3ci, aby strona wyglądała bardziej dopracowana. Indeks dolny zmniejsza tekst i obniża go poniżej linii bazowej. Najczęściej stosowanym indeksem dolnym są formuły chemiczne (na przykład H2SO4).
Uwaga: O ile tekst przesuwa się w górę lub w dół i o ile mniejszy jest rozmiar czcionki, zależy od przeglądarki. W tym ćwiczeniu zastosujesz formatowanie indeksu górnego, aby utworzyć przypis dolny i porządkowy.
USTAWIENIA : W przeglądarce Internet Explorer i Notatniku otwórz plik index.htm z poprzedniego ćwiczenia.
1. Na końcu ostatniego wiersza tekstu, między znacznikami < /b > i < /p >, wstaw kod dla 1 w indeksie górnym, jak pokazano poniżej: .
< p > Zatrzymaj się i przejrzyj naszą obszerną listę zasobów reklamowych od < b > < i > od poniedziałku do soboty od 7:00 do 20:00 < /i > < /b > < sup > 1 < /sup > Spowoduje to utworzenie indeksu górnego dla przypisu. .
2. Bezpośrednio przed znacznikiem < /body > wpisz następujące polecenie: .
< p > < sup > 1 < /sup > Zamknąłęte 1. < sup > szą < /sup > sobotę w styczniu < /p >.
To tworzy sam przypis.
3. Zapisz plik, a następnie odśwież stronę w Internet Explorerze, aby wyświetlić wyniki
Powrót