wejścieNarzędzie programowe rozpoznające deskryptory języka html. Podstawowe deskryptory i ich składnia HTML
HTML- język znaczników hipertekstowych dokumentu. Dzięki niemu możesz pisać teksty z linkami do innych stron, tworzyć tabele, listy, dołączać obrazy i wiele więcej. Ten język jest używany do pisania stron internetowych.
»Html dla początkujących
»Html dla początkujących
Podstawowe tagi (deskryptory) języka html
Zgodnie z tradycją wszystkich klasycznych samouczków HTML, dostarczamy najprostszy dokument hipertekstowy.
Oto nagłówek pierwszego poziomu
Witamy w Internecie!
Pierwszy i ostatni akapit.
W tym przykładzie użyliśmy następujących terminów hipertekstowych (nazywanych tagami):
Nazwa dokumentu
To nie jest reguła, ani nawet prawo, to fakt:
Każdy dokument HTML ma tytuł.
Po nazwie dokumentu HTML inne przeglądarki mogą znaleźć informacje. Miejsce na tytuł jest zawsze określone - znajduje się na górze ekranu i jest oddzielone od treści dokumentu. Maksymalna długość nazwy to 40 znaków.
Formatowanie
Formatowanie może być bezpośrednie lub autorytatywne. Jeśli używasz tagu
Następujące tagi są nieodłącznie związane z formatowaniem bezpośrednim:
Ustęp.
- linia pozioma.
Przerwanie linii.
Nagłówki i podtytuły
HTML umożliwia pracę z sześcioma poziomami nagłówków. Najważniejszy jest pierwszy nagłówek. Zwrócono na to szczególną uwagę. Pozostałe nagłówki można sformatować, na przykład pogrubionymi lub wielkimi literami.
W HTML pierwszy nagłówek jest oznaczony jako
:
N odnosi się do poziomu nagłówka, czyli liczby 1, 2, 3, 4, 5 lub 6.
W HTML pierwszy nagłówek może być taki sam jak tytuł dokumentu.
Listy są podzielone na nienumerowane:
ponumerowane:
z opisami:
i zagnieżdżone:
Wybór tekstu
Tekst w dokumencie HTML można wyróżnić na jeden z następujących sposobów:
- cytat
- definicja
- akcent logiczny
- wejście klawiatury
- wiadomości komputerowe
- mocny akcent
- zmienne
Jeden duży akapit
W HTML podziały wierszy nie są ważne. Oznacza to, że możesz podzielić wiersze dokumentu w dowolnym miejscu. Wynika to z faktu, że w dokumencie hipertekstowym kolejne spacje zamieniają się w jedną. Ale! Jeśli spacja jest tworzona po tagu
Następnie jest brany pod uwagę. Jeśli jakikolwiek tag
HTML umożliwia łączenie tekstu lub obrazów z innymi dokumentami hipertekstowymi. Tekst jest zwykle podświetlony lub podkreślony.
Aby to zrobić, użyj tagu ... Pamiętaj, że po literze A musi być spacja.
¦ typ ¦ wpisz HREF = ”nazwa pliku”> ¦ wpisz tag Tutaj słowo Bob odnosi się do dokumentu BobAnapa.html, tworząc łącze hipertekstowe. Jeśli chcesz określić w pełni kwalifikowaną nazwę pliku, musisz użyć składni UNIX. protokół: // port hosta / ścieżka Wstępne formatowanie tekstu Etykietka Tworzy tekst o stałej szerokości.
Użyj tego tagu, aby nadać styl listom programów.
Rozszerzone cytaty
Etykietka
pozwala na włączenie cytatu do pojedynczego obiektu.Etykietka
umożliwia generowanie informacji o autorze dokumentu HTML.Wymuś wysunięcie wiersza
Etykietka
tłumaczy tylko jedną linię, to znaczy bez dodatkowej spacji.Przegrody poziome
Etykietka
tworzy poziomą linię na całej szerokości okna.Osadzone obrazy
Możesz osadzać obrazy w swoim dokumencie. Składnia obrazu wbudowanego jest następująca:
Tutaj image_URL jest wskaźnikiem do pliku obrazu, którego składnia jest taka sama jak składnia łącza HTML.
Ogólnie rzecz biorąc, deskryptory to niektóre atrybuty obiektów, dla których zdefiniowano odpowiednie zachowanie. Gdy uzyskujesz do nich dostęp, otrzymujesz, ustawiasz lub usuwasz określone atrybuty ze słownika. W uproszczeniu są to specjalne słowa kluczowe, które określają zachowanie obiektu, jego właściwości lub strukturę. W artykule rozważymy kilka opcji deskryptorów. To pozwoli ci dokładniej zrozumieć ich istotę i cel.
HTML
W hipertekstowym języku znaczników, używanym do tworzenia statycznych stron internetowych, deskryptory to nic innego jak znaczniki. W tym środowisku pełnią rolę etykiet, dzięki czemu umieszczony między nimi tekst jest wyświetlany w określony sposób. W ten sposób powstaje projekt i rozmieszczenie elementów na stronie.
Z reguły specyfika języka decyduje o obecności deskryptora otwierającego i zamykającego. Wszystko pomiędzy może ulec zmianie.
Deskryptor może mieć atrybuty, czyli pewne właściwości. Ich składnia wygląda następująco: nazwa atrybutu = jego wartość.
Zgodnie ze wspólną logiką, deskryptory w HTML są etykietami identyfikacyjnymi obiektów. Za ich pomocą możesz kontrolować wygląd, wchodzić w interakcję ze stroną i przypisywać jej specjalne wartości.
Architektura X86
W procesorach deskryptory są specjalną strukturą, za pomocą której tworzone są różne gałęzie. Jego struktura wygląda tak:
- Stronniczość. Może zmienić procedurę kodu.
- Selektor. Odzwierciedla rodzaj etykiety, na której powinna iść procedura.
- Liczba parametrów.
- Prawa dostępu.
Jawa
Java EE ma koncepcję deskryptora wdrażania. Określa, w jaki sposób serwlet zostanie wdrożony. Zasadniczo jest to plik konfiguracyjny zawierający ustawienia, właściwości i wymagania sprzętowe.
W aplikacjach webowych taki plik, zgodnie z zasadami, powinien mieć nazwę web.xml i znajdować się w określonym folderze.
Deskryptory plików
W systemach operacyjnych, aby pracować z plikami, musisz najpierw uzyskać do nich dostęp. Można to zrobić za pomocą deskryptora pliku. W tym przykładzie działa jako rodzaj etykiety oznaczającej proces, który utworzył strumień I/O.
System operacyjny Windows umożliwia dostęp do uchwytu za pomocą funkcji CreateFile. Może być dalej używany podczas pracy z wymaganym plikiem.
W systemach Unix deskryptor pliku jest numerowany. 0 to standardowe wejście procesu terminala, 1 to jego wyjście, 2 to strumień diagnostyczny. Oprócz reprezentacji liczbowych można stosować stałe symboliczne zdefiniowane w specyfikacji.
Klamka okienna
Po utworzeniu dowolnego okna w systemie przypisywana jest do niego konkretna klamka. Używane w nim typy danych to HWND. Programista, tworząc aplikację, musi używać ich poprawnie, aby odwoływać się do
Program może uzyskać uchwyt, wywołując funkcję FindWindow. Może go znaleźć po nazwie klasy lub obiektu okna i zwrócić wartość deskryptora.
Aby sprawdzić, czy identyfikacja była prawidłowa, warto skorzystać z funkcji IsWindow.
Numer błędu 1400
Ten problem jest powszechny w rodzinie systemów operacyjnych Windows. Jeśli pojawi się wraz z nim, może być krótki opis - nieprawidłowy uchwyt okna. I może być też takie sformułowanie - "Error_invalid_window_handle" lub 0x578.
Jak sobie z tym poradzić i co oznacza nieprawidłowy deskryptor? W zależności od kontekstu obiektu należy podjąć różne działania.
W każdym razie powinieneś natychmiast przejść przez standardowe środki podjęte w przypadku wszystkich problemów z systemem:
błędy uruchamiania i skanowania za pomocą narzędzia do sprawdzania integralności plików systemowych; sprawdź komputer pod kątem wirusów. Jeśli podstawowe kroki nie zadziałały, być może warto odinstalować i ponownie zainstalować aplikację, która powoduje awarię.
Innym niezawodnym sposobem szybkiego przywrócenia wydajności systemu jest przywrócenie go przy użyciu standardowych narzędzi. Po użyciu funkcji „Przywracanie systemu” powróci do ostatniej prawidłowej kopii zapasowej, pod warunkiem, że została ona wcześniej utworzona.
Kiedy może wystąpić błąd
W większości przypadków błąd nieprawidłowego deskryptora jest spowodowany wadą zainstalowanego oprogramowania. Dlatego warto zwrócić baczną uwagę na to, co pojawia się na komputerze z oprogramowania. Konieczna jest również okresowa aktualizacja całego dostępnego oprogramowania oraz monitorowanie jego stanu. Jednocześnie warto uzbroić się w dobre oprogramowanie antywirusowe.
Wniosek
W artykule przedstawiono ogólne zasady działania deskryptorów w różnych językach programowania i systemach operacyjnych, ich funkcje, właściwości i typy. Zazwyczaj termin ten jest używany głównie przez programistów i programistów do identyfikowania obiektów i elementów w celu późniejszego odniesienia i zarządzania.
Stało się również jasne, że jest to nieprawidłowy deskryptor. Jak się okazało, jest to powszechny problem w środowisku Windows, w większości przypadków można go rozwiązać za pomocą prostych manipulacji.
8 klasa
Wprowadzenie do HTML
Wykład nr 1: Wprowadzenie do HTML (12 godzin)Temat 1: Wprowadzenie do HTML (1 godzina)
Plan
1. Zrozumienie HTML
2. Pojęcie hipertekstu
3. Koncepcja pliku html
4. Pojęcie tagów języka html
5. Tagi strukturalne
6. Stworzenie szablonu dokumentu HTML i pierwszej strony internetowej
1. Zrozumienie HTMLHTML oznacza HyperText Markup Language lub Hypertext Markup Language.
Ważne jest, aby zrozumieć, że HTML nie jest językiem programowania — jest to język znaczników tekstowych. Pozwala zdefiniować wygląd dokumentu. Podczas gdy do pisania programów (algorytmów) przeznaczonych do wykonywania określonych zadań używa się konwencjonalnych języków programowania, o tyle język znaczników HTML służy do reprezentowania dokumentu w określony sposób.
^ 2. Pojęcie hipertekstu
Hipertekst (hipertekst) To specjalny tekst zawierający łącze do innej strony internetowej lub dokumentu. W tym przypadku prefiks hiper znaczy więcej niż lub w nadmiarze ponieważ widzisz przed sobą coś więcej niż tylko tekst. W większości przeglądarek hipertekst (lub hiperłącza) są zwykle podkreślone i wyróżnione innym kolorem niż reszta tekstu. Jeśli klikniesz na hipertekst, zmieni się jego kolor. Kliknięcie hiperłącza powoduje, że przeglądarka internetowa zażąda dokumentu, do którego prowadzi łącze, a następnie załaduje go do okna przeglądarki. Dzięki hipertekstowi strona internetowa nabiera więc właściwości interaktywności.
Hipertekst nie ma początku ani końca. Większość nośników druku jest zaprojektowana tak, aby można je było czytać od pierwszej do ostatniej strony. W tym sensie mają strukturę liniową. A hipertekst jest bardziej jak pajęczyna z nieokreślonym środkiem. Sztuka tworzenia dobrych stron internetowych polega przede wszystkim na inteligentnym organizowaniu informacji. Użytkownik musi mieć przed oczami strukturę strony lub jej podsumowanie, aby wybrać to, co go interesuje.
^ 3. Koncepcja pliku html
Do tworzenia plików html potrzebujesz tylko edytora tekstu. Pamiętaj, że chociaż strony html są plikami .htm lub .html, w rzeczywistości są to zwykłe pliki tekstowe ASCII. Aby utworzyć stronę html, musisz użyć polecenia Plik — Zapisz jako i zapisz plik w formacie tekstowym i dodaj rozszerzenie .htm lub .html do jego nazwy, w zależności od używanego systemu operacyjnego.
Najlepszym sposobem na uporządkowanie plików html jest utworzenie na dysku twardym specjalnego katalogu (lub folderu) do przechowywania stron internetowych. Jest to szczególnie ważne, jeśli zamierzamy stworzyć kilka połączonych ze sobą stron. Najpierw musisz określić strukturę lokalizacji plików na dysku twardym. Aby utworzyć prosty serwer WWW, zwykle potrzebujesz kilku plików tekstowych i graficznych oraz ewentualnie kilku plików multimedialnych. Tworząc serwer sieciowy ze stosunkowo niewielką liczbą stron i obrazów, możesz przechowywać wszystkie swoje pliki w jednym katalogu. Jeśli plików jest dużo, powinieneś umieścić je w kilku folderach.
^ 4. Pojęcie tagów języka html
Jak już powiedzieliśmy, język znaczników pozwala określić wygląd dokumentu. W tym celu umieszcza się w nim specjalne kody lub tagi. Co więcej, można to zrobić za pomocą Notatnika lub innego edytora tekstu. Ogólnie rzecz biorąc, podczas tworzenia stron internetowych będziesz musiał wykonać wiele czynności, do których przywykłeś w edytorze tekstu, na przykład pogrubić tekst lub przekonwertować poszczególne frazy na nagłówki.
Czym więc jest deskryptor? Deskryptor Jest głównym elementem kodującym w standardzie HTML. W HTML prawie wszystko zależy od deskryptorów. Służą do zwrócenia uwagi na określone słowa w dokumencie, dzięki czemu przeglądarka wie, co wyróżnić, gdzie wyświetlić grafikę i gdzie znajdują się hiperłącza.
Deskryptory są ujęte w nawiasy ostre (< >). Na przykład deskryptor akapitu to
, a deskryptor linii poziomej to <НР> ... Deskryptory można pisać zarówno wielkimi, jak i małymi literami. Jednak pisanie deskryptorów wielkimi literami znacznie ułatwia wizualną percepcję tekstu.
Istnieją dwa rodzaje deskryptorów: kontenery i deskryptory pojedyncze. Kontener to para deskryptorów składająca się z deskryptora początkowego (lub otwierającego) i końcowego (lub zamykającego). Początkowy deskryptor to
, ale finał . Kontenery są przeznaczone do przechowywania niektórych informacji, takich jak tekst lub inne deskryptory. Dlatego zawartość kontenera jest zawarta między deskryptorami początkowym i końcowym. Na przykład element reprezentujący nagłówek pierwszego poziomu jest zawarty między deskryptoramioraz :
Mój pierwszy dokument HTML!
Pusty deskryptor różni się od kontenera tym, że nie zawiera żadnych informacji. Ma tylko deskryptor początkowy. Zwykle robi to pusty deskryptor samodzielne zadanie niepowiązane z konkretnym tekstem. Na przykład deskryptor
tworzy linię poziomą i nic nie robi na tekście, w przeciwieństwie do uchwytów początkowych i końcowych kontenera.Początkowe i końcowe deskryptory kontenera wraz z treścią umieszczoną między nimi to: element Dokument HTML. Elementem może być obraz, fragment tekstu, formularz, tabela, lista, łącze, pole tekstowe, przycisk, a nawet tytuł dokumentu lub jego główna treść (treść). Zauważ jednak, że element to nie tylko deskryptory, ale to, co znajduje się między nimi.
^ 5. Tagi strukturalne
Przyjrzyjmy się podstawowym deskryptorom, które definiują strukturę strony internetowej.
Deskryptory element HTML ( ) są najbardziej zewnętrzne, tj. zawierać wszystkie inne teksty i inne deskryptory. Rozpocznij deskryptor, , to pierwsza rzecz, którą należy wpisać. I ostateczny deskryptor, , oznacza koniec dokumentu. Większość przeglądarek nie akceptuje tekstu spoza tych dwóch deskryptorów.
Dokument HTML ma nagłówek (tytuł) i treść (treść).
W każdym dokumencie HTML, element HEAD poprzedza treść (lub treść) strony internetowej. Zawartość elementu HEAD jest zawarta między deskryptorami oraz ... Ten tekst jest informacje ogólne o pliku i nie jest wyświetlany w samym dokumencie. Szereg innych elementów można znaleźć w deskryptorze HEAD. Interesuje nas przede wszystkim deskryptor
</b> który określa tytuł dokumentu. Tekst zawarty między deskryptorami <b><TITLE> </b> oraz <b> , jest wyświetlany w górnej części okna programu (pasek tytułu).I wreszcie, najważniejszą częścią dokumentu HTML jest element BODY, który jest zawarty między parą deskryptorów oraz ... Ten element jest najważniejszy, ponieważ zawiera lub łączy do całego tekstu, obrazów i multimediów wyświetlanych na stronie. Opis elementu BODY następuje bezpośrednio po opisie elementu HEAD.
^ 6. Stworzenie szablonu dokumentu HTML i pierwszej strony internetowej
Otwórz Notatnik i wprowadź następujący tekst:
Tytuł strony internetowej Zawartość strony internetowej: test, grafika, linki itp.
Zapisz plik w swoim folderze jako template.html.Teraz utwórz nowy dokument i załaduj do niego utworzony przez nas szablon. Następnie użyj polecenia ^ Zapisz jako aby nazwać nową stronę.
Zamień tekst między deskryptorami
oraz do „Moja pierwsza strona internetowa!” Teraz zamień tekst między deskryptorami oraz do następnego:
To moja pierwsza strona internetowa!
Ostateczna wersja Twojego pliku powinna wyglądać tak:
Moja pierwsza strona internetowa!
To moja pierwsza strona internetowa!
Zapisz plik w swoim folderze i nazwij go first.html.Temat 2: Główna treść strony internetowej (1 godzina)
Plan
1. Korzystanie z nagłówków
2. Znaki końca akapitu i końca wiersza. Wyrównaj akapity i nagłówki
3. Korzystanie z deskryptora
4. Formatowanie tekstu za pomocą stylów
5. Dodawanie linii i komentarzy
Większość wszystkich stron internetowych jest definiowana za pomocą elementu BODY, którego deskryptory początku i końca wskazują początek i koniec informacji. Kontener BODY nie jest używany tylko w jednym przypadku - w dokumencie frameset, gdzie zastępuje go kontener FRAMESET.^ 1. Korzystanie z nagłówków
Zazwyczaj programiści HTML zaczynają od tworzenia nagłówków. Istnieje sześć poziomów nagłówków, a każdy ma inny rozmiar czcionki. Używając nagłówków na różnych poziomach, możesz stworzyć przejrzystą strukturę hierarchiczną swojego dokumentu. Wykorzystuje tę samą zasadę, co w wydawaniu książek, gdzie nagłówki rozdziałów są drukowane dużym drukiem, nagłówki sekcji są mniejsze, nagłówki podrozdziałów są jeszcze mniejsze itp.
Standard HTML obsługuje sześć poziomów nagłówków, które są definiowane za pomocą kontenerów: 1, Н2, ..., Н6... Dla każdego poziomu ustawionych nagłówków standardowe rozmiary czcionki.
^ 2. Znaki łamania akapitu i łamania wiersza
Deskryptory
oraz
umożliwiają dodawanie spacji do dokumentu, aby oddzielić jeden blok tekstu od drugiego.Deskryptor
służy do wstawiania znaku końca akapitu. Wstawianie podany deskryptor instruujemy przeglądarkę, aby zakończyła bieżący akapit i wstawiła pustą linię przed następnym akapitem.
Deskryptor
służy do wstawiania znaku końca wiersza. Wstawiając ten deskryptor, nakazujemy przeglądarce zakończenie bieżącego wiersza i przejście do następnego.^ Wyrównaj akapity i nagłówki
Tekst akapitu lub nagłówka można wyrównać do lewej ( Standardowa instalacja), wyrównane do prawej lub wyśrodkowane w oknie przeglądarki.
Składnia deskryptora nagłówka to:
gdzie n jest poziomem nagłówka;
Wyrównanie to parametr, który może przyjąć jedną z następujących wartości: LEFT, RIGHT, CENTER.
Składnia deskryptora akapitu to:
<Р ALIGN=выравнивание>
^ 3. Korzystanie z deskryptora
Jeśli chcesz umieścić na stronie internetowej informacje, które są już zawarte w jakimś dokumencie (ale nie w kodzie HTML), nie musisz tracić czasu na przepisywanie całego dokumentu. Zamiast tego możesz użyć kontenera tekstu sformatowanego
^ Formatowanie cytatów
Deskryptor
jest przeznaczony do długich cudzysłowów i umożliwia wcięcie wiersza.Do pojemnika
możesz dołączyć inne deskryptory, takie jak style tekstu lub podziały wierszy.Deskryptor
przeznaczony do wyświetlania krótkich cytatów. Jeśli używasz deskryptoraoddzielny fragment jest tworzony w bloku tekstu, a następnie przy użyciu deskryptoracytat jest kontynuowany w tym samym wierszu, co poprzedni tekst, tj. blok tekstu nie jest rozdarty.^ 4. Formatowanie tekstu za pomocą stylów
HTML udostępnia kilka sposobów formatowania tekstu. Jest to formatowanie jawne (lub bezwzględne) z style fizyczne i niejawne (lub względne) formatowanie za pomocą style logiczne i wreszcie zmiana rozmiaru czcionki.
Deskryptory stylu fizycznego są bezwzględne, co oznacza, że tekst wyróżniony stylem fizycznym wygląda tak samo we wszystkich przeglądarkach. A style logiczne, w przeciwieństwie do fizycznych, można nazwać względnymi. Oznacza to, że są one wyświetlane różnie w różnych przeglądarkach.
^ Tabela — Fizyczne deskryptory stylu
Deskryptor
Styl
Pogrubiona czcionka
Kursywa
Czcionka o stałej szerokości, jak maszyna do pisania
Podkreślać
Tekst indeksu dolnego
Tekst w indeksie górnym
Przekreślenie^ Zmiana rozmiaru czcionki
Element FONT pozwala zdefiniować rozmiar i kolor czcionki. Atrybut SIZE pozwala określić bezwzględny rozmiar czcionki (może przyjmować wartości od 1 do 7) lub względny, w stosunku do rozmiaru czcionki użytej w treści strony (może przyjmować wartości od -4 do +4). Używa następującej składni:
Element BASEFONT służy do zmiany rozmiaru głównej czcionki dokumentu. Rozmiar czcionki głównej może przyjmować wartości od 1 do 7, a standardowy rozmiar czcionki dla przeglądarki to 3.
Atrybut COLOR służy do zmiany koloru czcionki przy użyciu następującej składni:
.
^ 5. Dodawanie linii i komentarzy
Aby podzielić tekst strony na części, możesz użyć poziomych linii, które tworzysz za pomocą uchwytu
. Wygląd linii można zmienić za pomocą atrybutów.^ Tabela — atrybuty deskryptora
ROZMIAR jest mierzony w pikselach.
Wartość WIDTH może być mierzona zarówno w procentach, jak i w pikselach, dlatego dla atrybutu WIDTH używane są dwie składnie:
.Atrybut ALIGN może mieć wartość LEFT, RIGHT lub CENTER. Musi być używany w połączeniu z atrybutem WIDTH, w przeciwnym razie linia będzie rozciągać się na cały ekran:
.Składnia atrybutu NOSHADE to:
.Dodawanie komentarzy
Możesz dodawać komentarze do kodu źródłowego strony sieci Web, które nie będą widoczne dla odwiedzających Twój serwer. Zostały zaprojektowane tak, aby w razie potrzeby można było łatwo wymyślić własny kod.
Składnia używana do komentarzy to:
.
Zadanie praktyczne
Otwórz pierwszy plik.html i zapisz go jako drugi.html.
Zmodyfikuj go zgodnie z poniższą listą:
To moja pierwsza strona internetowa!
uczę się HTML
Zmień rozmiar i kolor czcionki
Ten akapit zostanie wyrównany do środka, w przeciwieństwie do głównych akapitów dokumentu, które są wyrównane do lewej.
Zapisz dokument i otwórz go w oknie przeglądarki.Temat 3: Tworzenie tabel (1 godzina)
Plan
1. Początkowy etap tworzenia kodu tabeli
2. Tworzenie wierszy i kolumn tabeli
3. Wybór typu stołu
4. Wyrównywanie danych w komórkach tabeli w poziomie i w pionie
5. Kolorowanie stołów i ramek
^ 1. Początkowy etap tworzenia kodu tabeliWyobraź sobie tabelę zawierającą nazwy produktów i ceny. to standardowy sposób za pomocą tabel. Dodajmy teraz obrazy do tabeli, które są hiperłączami do plików HTML zawierających większe obrazy, a także szczegółowe informacje o odpowiednich produktach. Filmy i nagrania dźwiękowe również mogą być wpisami w tabeli. Dzięki temu użytkownik może nie tylko dużo zobaczyć, ale także dużo usłyszeć.
HTML użyty do tworzenia tabel nie jest zbyt skomplikowany; raczej jest to bardzo uciążliwe. Budowanie tabel nie jest tak trudnym zadaniem, jeśli zostanie wykonane poprawnie.
Zanim zaczniesz tworzyć tabele, musisz zrozumieć strukturę kodu, który jest do tego używany. Kod tabeli HTML jest zawarty w kontenerze TABLE. Przed wygenerowaniem kodu HTML dla tabeli musisz określić maksymalną liczbę wierszy i kolumn, które zawiera. Następnie, podczas pisania kodu, będziesz definiował komórki jedna po drugiej. Komórki są definiowane od lewej do prawej, wiersz po wierszu i od góry do dołu.
Wiersze, kolumny i komórki to standardowe terminy używane do opisywania tabel.
^ 2. Tworzenie wierszy i kolumn tabeli
Aby opisać tabelę, musisz określić liczbę wierszy i kolumn oraz ich lokalizację.
Para deskryptorów służy do zdefiniowania jednego wiersza tabeli
oraz . Mówią one przeglądarce, że komórki zdefiniowane między tymi deskryptorami należą do tego samego wiersza tabeli.Deskryptory
oraz zdefiniuj nagłówki tabeli.Deskryptory
oraz określić zawartość komórki.Korzystanie z atrybutu COLSPAN zawartego w deskryptorze
lub , możesz sprawić, by odpowiadająca komórka obejmowała wiele kolumn. Aby to zrobić, ustaw atrybut COLSPAN na liczbę kolumn, które powinna zajmować komórka. Atrybut ROWSPAN wykonuje tę samą funkcję tylko dla ciągów. ^ 3. Wybór typu stołu
Przed przystąpieniem do opisu komórek konieczne jest zdefiniowanie kilku ogólnych cech tabeli. Obejmują one szerokość tabeli, odstępy między komórkami, odstępy między komórkami itp.
Jedną z tych wspólnych cech jest ramka, czyli obramowanie oddzielające tabelę od reszty dokumentu. Aby to zrobić, użyj atrybutu BORDER = n, gdzie n jest szerokością obramowania w pikselach. Atrybut BORDER jest umieszczony w deskryptorze
... Jeśli wybierzesz 0 lub całkowicie pomiń dany atrybut, zostanie utworzona tabela bez obramowań.
Do określenia szerokości tabeli używany jest atrybut WIDTH, również umieszczony w deskryptorze
... Szerokość jest określana w procentach lub pikselach i jest ujęta w cudzysłów.
Z atrybutem COLS umieszczonym w deskryptorze
, możesz określić liczbę kolumn w tabeli:
.
Wreszcie atrybuty CELLSPACING i CELLPADDING w deskryptorze służą do definiowania odstępów w tabeli.
. Atrybut CELLSPACING określa odległość między komórkami w pikselach ( wartość standardowa równa się 2).
Atrybut CELLPADDING określa odległość w pikselach między zawartością komórki a jej granicami (domyślna odległość to 1).
^ 4. Wyrównywanie danych w komórkach tabeli w poziomie i w pionie
Atrybut ALIGN umożliwia wyrównanie zawartości komórek i może być CENTRUM, JUSTIFY, CHAR, RIGHT, LEFT.
Jeśli ustawisz atrybut ALIGN na JUSTIFY, zawartość tekstowa komórki zostanie wyrównana do szerokości.
Jeśli ustawisz atrybut ALIGN na CHAR, zawartość komórki zostanie wyrównana względem znaku określonego za pomocą atrybutu CHAR. Na przykład rekord ALIGN = "char" CHAR = "," może służyć do wyrównania liczb naturalnych przez separator dziesiętny.
^ Wyrównywanie danych w komórkach tabeli w pionie
Atrybut VALIGN może być użyty w kontenerze
, , ... Może służyć do wyrównania tekstu do góry lub dołu komórki, a także do wyśrodkowania go w pionie. Atrybut VALIGN może przyjmować następujące wartości: TOP, MIDDLE, BOTTOM. Dodawanie etykiet do tabel
Korzystanie z kontenera
możesz dodawać podpisy do tabel. Tak więc za pomocą etykiet można bardziej szczegółowo opisać tabelę, na przykład dodając informacje o jednostkach miary użytych w tabeli. Domyślnie etykiety znajdują się nad tabelą, ale można je umieścić w innym miejscu. Na przykład poniższy kod służy do umieszczania podpisów pod tabelą:
To jest podpis Oprócz atrybutu BOTTOM w kontenerze CAPTION można używać atrybutów TOP, LEFT, RIGHT.
^ 5. Kolorowanie stołów i ramek
Do tabeli można dodać tło w innym kolorze niż reszta strony sieci Web. Możesz także pokolorować wiersze lub pojedyncze komórki, aby wyróżniały się z reszty tabeli.
Służy do tego atrybut BGCOLOR deskryptora.
.
Wartość atrybutu BGCOLOR może być szesnastkowa (w formacie #rrggbb) lub tekstowa.
Korzystanie z deskryptora
oraz atrybuty BORDERCOLOR i BORDERLIGHT umożliwiają zmianę koloru obramowania tabeli. Atrybut BORDER musi być umieszczony w deskryptorze
... Aby zmienić kolor obramowania wewnątrz tabeli, musisz użyć atrybutów BORDERCOLOR i BORDERLIGHT w deskryptorze
lub . Wartość atrybutu BORDERCOLOR wpływa na górną część ramki tabeli 3D, a wartość BORDERLIGHT wpływa na dolną część (tj. cień). Atrybutów tych można używać do modyfikowania standardowych atrybutów prezentacji ramek tabeli 3D.
^ Zadanie praktyczne
Wygeneruj kod HTML poniższej tabeli
Nazwisko
dni tygodnia
poniedziałek
Wtorek
Środa
czwartek
piątek
Iwanow
6
0
0
0
0
Pietrow
0
6
0
0
0
Sidorowa
0
0
6
0
0
Siergiejew
0
0
0
6
0
Wasiliew
0
0
0
0
6
Tworzenie tabeli
Nazwisko
dni tygodnia
poniedziałek
Wtorek
Środa
czwartek
piątek
Iwanow
6
0
0
0
0
Pietrow
0
6
0
0
0
Sidorowa
0
0
6
0
0
Siergiejew
0
0
0
6
0
Wasiliew
0
0
0
0
6 Temat 4: Listy Budowlane (1 godzina)
Plan
1. Listy jako narzędzie do strukturyzacji. Typy list
2. Listy numerowane
3. Listy punktowane
4. Wykazy definicji
5. Zagnieżdżanie i łączenie list
^ 1. Listy jako narzędzie do strukturyzacji. Typy listListy to bardzo skuteczny sposób na uporządkowanie dokumentu. Z ich pomocą możesz zapewnić jasną i przejrzystą prezentację materiału. HTML zapewnia możliwość tworzenia atrakcyjnych, ale funkcjonalnych list.
HTML zapewnia możliwość tworzenia różnych typów list. Co więcej, każdy z nich może być używany zarówno samodzielnie, jak i w połączeniu z innymi rodzajami list.
^ Tabela — typy list HTML i odpowiadające im deskryptory
^ 2. Listy numerowane
Listy uporządkowane i ponumerowane to to samo. Terminy te są używane zamiennie. Lista numerowana jest tworzona przy użyciu kontenera. Każdy element listy jest zdefiniowany w tym kontenerze za pomocą deskryptora
(co oznacza element listy). Domyślnie elementy listy są numerowane zwykłymi cyframi arabskimi. Ale możesz zrobić to tak, aby do numeracji używane były litery alfabetu (małe lub wielkie) lub cyfry rzymskie. Styl formatowania listy jest zdefiniowany przy użyciu następującej składni:
Parametr typu może przyjmować wartości podane w tabeli
^ Tabela - Typy numeracji uporządkowanych list w HTML
Sposób numeracji można również zmienić na środku listy. W tym celu odpowiedni element listy musi być zdefiniowany w następujący sposób:
Numerację listy można rozpocząć od cyfr lub liter z dowolną cyfrą lub literą. W tym celu użyj atrybutu START Aby rozpocząć numerację określoną literą lub cyfrą rzymską, użyj atrybutów TYPE i START. Składnia tej procedury jest następująca:
Wartość parametru jest liczbą.
Aby zmienić schemat numerowania na liście, użyj atrybutu VALUE deskryptora
. ^ 3. Listy punktowane
Najpopularniejszym typem listy jest lista nieuporządkowana lub wypunktowana. Na takich listach obok każdej pozycji na liście nieuporządkowanej znajduje się punktor, który może wyglądać jak duże czarne kółko lub kwadrat.
Deskryptory są używane podczas tworzenia list punktowanych
oraz ... Podobnie jak w przypadku list numerowanych, wszystkie pozycje na listach punktowanych są definiowane za pomocą deskryptora
. Aby zmienić typ znacznika dla całej listy, użyj składni
, a dla jednego elementu listy -
, gdzie parametr type jest jedną z wartości podanych w tabeli ^ Tabela — typy znaczników pocisków
^ 4. Wykazy definicji
Listy definicji przypominają nieco słowniki, ponieważ każdy termin ma wcięty akapit definicji. To narzędzie jest niezbędne, jeśli chcesz stworzyć listę pozycji wraz z ich szczegółowym opisem (na przykład w przypadku katalogów towarów handlowych lub nieruchomości).
Lista definicji znajduje się w kontenerze
. Pozycje listy definicji są tworzone przy użyciu deskryptorów
oraz , za pomocą których są oznaczone semestr i jego definicja odpowiednio. ^ 5. Zagnieżdżanie i łączenie list
W razie potrzeby możesz połączyć Różne rodzaje list, a także zagnieżdżać je w sobie, niezależnie od tego, czy do jednej, czy do różne rodzaje Oni są spóźnieni.
Poniższa lista przedstawia przykład użycia zagnieżdżania lista punktowana na ponumerowane.
Zagnieżdżanie list
Listy zagnieżdżone
Jak przygotować eliksir młodości
Weź równe części następujących elementów:
Krokodyle łzy
Z martwych uszu osła
Otwór pączka
Wszystko wymieszaj i zmiażdż na proszek
Zalej proszek alkoholem
Otrzymany płyn wlać do butelki
Zakop butelkę w ogrodzie
Wykop po dokładnie 1 roku
Wrzuć butelkę do morza i nie oszukuj się! abstrakcyjny
1. Krótka historia WWW
2. Język HTML - budowanie dokumentów internetowych:
a) Szablon dokumentu internetowego
b) formatowanie tekstu
c) formatowanie akapitów
d) praca z obrazami graficznymi:
I. obrazy tła
II. obrazy statyczne i dynamiczne
f) ramki:
I. Ramki pionowe
II. Rama pozioma
III. Zagnieżdżone ramki
Alternatywne sposoby przygotowania dokumentów
1. Krótka historia sieci WWW
Nie od dziś wiadomo, że Internet jest w szczególności ogromnym repozytorium wszelkiego rodzaju informacji. Przed nadejściem World Wide Web (WWW) nawigacja w Internecie w celu znalezienia potrzebnych informacji nie była łatwa. Aby pobrać plik z serwera FTP, trzeba było osobno pobrać aplikację kliencką. Jednocześnie trzeba było zapamiętać hasło, trzeba było nawigować po wielu katalogach w poszukiwaniu żądanego pliku, nie zapominając o ustawieniu prawidłowego trybu przesyłania przed jego otrzymaniem; znać liczne polecenia do pracy z serwerami FTP itp. Jeśli chciałeś zobaczyć konferencję, musiałeś uruchomić inną aplikację, która miała własny zestaw poleceń do czytania, przesyłania, zapisywania wiadomości z konferencji. To wszystko było niewygodne.
Około pięć lat temu podjęto próbę zorganizowania kolejność informacji v Sieci internetowe... Dało to początek usłudze World Wide Web, która narodziła się w Europejskim Centrum Badań Jądrowych w Szwecji. Idea WWW opiera się na tzw hipermedia dokumenty lub dokumenty sieci Web, zwane również stronami sieci Web, mają na celu pomóc w organizacji i pobieraniu danych. Dokumenty te mogą zawierać zarówno tekst, jak i nietekst informacje tekstowe(np. obrazy, dźwięk) oraz linki. Linki to wskaźniki, za pomocą których można swobodnie przemieszczać się z jednego miejsca w dokumencie do innego miejsca, a nawet link do osobnego dokumentu, który może znajdować się po drugiej stronie świata. Chociaż dokumenty internetowe mogą zawierać wiele różnych informacji, nie tylko tekst, prawie zawsze są one nazywane hipertekstem ( hipertekst) dokumenty, co na ogół nie jest do końca prawdą.
Na ekranie typowy dokument sieciowy wygląda jak zestaw tekstu z łączami; mogą być obecne różne ilustracje. Możesz przeglądać dokument, przeglądać zawartość, szybko poruszać się po nim lub innych dokumentach za pomocą łączy.
Wraz z nadejściem WWW w Internecie zaczął pojawiać się tekst i grafika, za pomocą myszy można było podróżować po świecie i łatwo znajdować potrzebne informacje za pomocą prostego wskaż i kliknij. Pobieranie plików i czytanie konferencji stało się łatwe. Właśnie dlatego usługa WWW zyskała światową popularność i szerokie zastosowanie. Każdego dnia w Internecie pojawiają się w duże ilości Publikowane są serwery internetowe i tysiące nowych dokumentów.
Do budowy dokumentów internetowych w sieci WWW używany jest specjalny język HTML, czyli HyperText Markup Language - hipertekstowy język znaczników, język formatowania danych. W oparciu o Standard Generalized Markup Language (SGML), HTML definiuje formatowanie i organizację danych w dokumentach internetowych. Nie określa, jak dokładnie tekst zostanie umieszczony na ekranie, określa strukturę danych. Dokument sieciowy może zawierać więcej niż tylko informacje tekstowe i dlatego bardziej poprawne byłoby nazywanie HTML językiem HyperMedia Markup Language, ale w literaturze prawie zawsze używa się skrótu HTML. Dokument HTML to zwykły plik ASCII. Opiera się na specjalnych deskryptorach (znacznikach), które określają formatowanie danych w dowolnym dokumencie sieciowym. Oczywiście, aby przeglądać dokumenty HTML w sieci WWW, potrzebujesz specjalnego oprogramowanie... Takie programy nazywane są przeglądarkami (z angielskiego. Przeglądaj- przeglądaj, przeglądaj). Z ich pomocą można pobierać i przeglądać strony WWW, nawigować po WWW itp. V obecnie istnieje całkiem sporo przeglądarek, z których najpopularniejsze to przeglądarki Microsoft Internet Explorer, Netscape Navigator i NCSA Mosaic. Przeglądarka po odczytaniu pliku HTML interpretuje dane zawarte w dokumencie za pomocą deskryptorów i odpowiednio wyświetla je na ekranie komputera. 1 przedstawia przykład dokumentu internetowego:
Rys. 1 Przykładowy dokument internetowy
HTML szybko się rozwija. W trakcie swojego rozwoju zyskał nowe możliwości i stracił te mało używane i przestarzałe. W tej chwili aktualna oficjalna wersja języka HTML to wersja 3.2, w której opracowano narzędzia do tworzenia dokumentów internetowych. W porównaniu z HTML 2.0, nowa wersja oferuje nowe funkcje, takie jak tabele, „zawijanie” obrazów tekstem, osadzanie apletów Java i inne.
Na dziś oprócz oficjalna wersja język, istnieją również wersje HTML od Microsoft i Netscape, które również obsługują i dodatkowe funkcje nie opisane w specyfikacji oficjalnej wersji HTML. Aby rozwiązać problem kompatybilności przeglądarek podczas wyświetlania dokumentów skomponowanych z elementów nieoficjalnych wersji języka HTML, wspomniane firmy uwzględniają w swoich produktach wsparcie dla alternatywnej wersji języka. Jest już wersja 4.0 tego języka, zwana Dynamicznym HTML, która obiecuje ulepszone stare i ekscytujące nowe sposoby projektowania dokumentów internetowych. Konsorcjum W3C (World Wide Web Consortium) już proponuje tę wersję języka jako standard. Są opcje Nowa wersja języki Microsoft i Netscape, które jednak nie są jeszcze ze sobą kompatybilne. Praca ta ujawnia główne sposoby konstruowania dokumentów z języka Wersje HTML 3.2 z Netscape Communications.
2. Język HTML. Tworzenie dokumentów internetowych
Jak wspomniano powyżej, formatowanie dokumentu HTML jest określone przez specjalne deskryptory. Deskryptor to polecenie formatowania danych, a to polecenie jest ujęte w nawiasy ostre „<» и «>”. Istnieją deskryptory otwierające i zamykające, pomiędzy którymi umieszczany jest tekst do sformatowania. Deskryptory otwarcia ustawiają metodę formatowania, drugie ją zastępują. Różnica między tymi deskryptorami polega na tym, że przed nazwą w deskryptorze zamykającym znajduje się ukośnik. Na przykład deskryptory. Istnieją również deskryptory, które nie wymagają wariantu załączającego.
W HTML nie jest rozróżniana wielkość liter, więc wszystkie deskryptory mogą być określone zarówno wielkimi, jak i małymi literami. Przeglądarka zinterpretuje je jednoznacznie w dowolnej pisowni.
Jeśli spojrzysz na kod źródłowy typowej strony internetowej, zobaczysz następującą zawartość:
tytuł dokumentu
tekst
tekst
tekst
tekst
Między deskryptorami oraz cały dokument znajduje się bezpośrednio. Deskryptory
oraz określić zakres ustawienia tytułu dokumentu. Między parąoraz umieszczany jest tytuł dokumentu. Jego zawartość widoczna jest w tytule okna przeglądarki. Informacje nagłówkowe są używane przez niektóre roboty sieciowe do indeksowania danych podczas skanowania zasobów WWW. W tym obszarze możesz wpisać np. informacje o autorze, krótki opis dokumentu. Między deskryptorami oraz zawiera dane, które będą wyświetlane przez przeglądarkę na ekranie. Deskryptory oraz zawierać informacje o autorze, które zostaną wyświetlone na ekranie, np. imię i nazwisko autora, jego adres e-mail, datę utworzenia i modyfikacji dokumentu itp.Ściśle mówiąc, żaden z powyższych deskryptorów nie jest wymagany przy tworzeniu dokumentów, ale pomagają one w organizacji dokumentów, a ich definicja jest oznaką dobrego stylu przy komponowaniu stron internetowych.
Formatowanie tekstu
Formatowanie tekstu oznacza wyświetlanie tekstu w określonej czcionce lub z określonymi atrybutami.
Aby sformatować tekst, musisz umieścić ciąg lub wiersze tekstu między parą deskryptorów. Poniżej znajduje się lista głównych deskryptorów i wyniki formatowania tekstu:
Na przykład, jeśli chcesz wyświetlić pewną linię na ekranie kursywą, to w treści dokumentu internetowego należy wpisać:
Ten tekst jest napisany kursywą
W rezultacie przeglądarka wyświetli:
Ten tekst jest napisany kursywą
Deskryptory można łączyć ze sobą w dowolnej kolejności, na przykład kombinacja
Ten tekst jest pogrubiony kursywą
wygeneruje następujący wynik:
Ten tekst jest pogrubiony kursywą
W niektórych dokumentach internetowych możesz zobaczyć migające wiersze tekstu, aby przyciągnąć uwagę użytkownika. Do tych celów używany jest deskryptor
Jednak to rozszerzenie języka Netscape jest rzadko używane i dlatego może wkrótce stać się przestarzałe.
Czcionki o różnych rozmiarach są często używane w projektowaniu stron internetowych. Możesz wyświetlić ciąg z czcionką o rozmiarze innym niż zwykły, używając deskryptorów tekst , gdzie liczba n jest liczbą od 1 do 7, która określa rozmiar czcionki w stosunku do normalnego. Tak więc następujący tekst w treści dokumentu
Ten tekst cztery rozmiary większe niż zwykle
ekran będzie wyglądał tak:
Ten tekst jest o cztery rozmiary większy niż normalnie.
Należy zauważyć, że pary deskryptorów oraz, oraz oraz są elementami języka HTML Netscape i dlatego mogą nie być obsługiwane przez inne przeglądarki.
Formatowanie akapitów
Informacje tekstowe publikowane na stronach internetowych są zorganizowane w akapity. Akapit zaczyna się od deskryptora<Р>i kończy się rączką zamykającą
jednak to ostatnie jest opcjonalne. Przykładowy kod HTML:Pierwszy paragraf
Akapit drugi
W rezultacie na ekranie pojawi się następujący wynik:
Pierwszy paragraf
Akapit drugi
Tworząc dokument, należy pamiętać, że podczas formatowania tekstu przeglądarka ignoruje spacje między słowami i podziały wierszy, więc za akapit traktuje tylko tekst, który znajduje się między deskryptorami. Uchwyt ustawia wymuszone złamanie linii
który nie ma opcji zamknięcia. Przykładowy kod:Pierwsza linia
Druga linia
W rezultacie przeglądarka wyświetli:
Pierwsza linia
Druga linia
Jeśli chcesz wyświetlić tekst z wymaganą liczbą spacji i podziałów wierszy, musisz umieścić go w deskryptorach
ORAZ... Jest to powszechnie używane do wyświetlania wykazów źródeł programu. W takim przypadku tekst zostanie wyświetlony czcionką o stałej szerokości.Tworzenie nagłówków
Nagłówki różnych poziomów określa się za pomocą deskryptorów
oraz , gdzie n jest liczbą od 1 do 6. Największy nagłówek jest określony przez deskryptor, najmniejszy jest deskryptorem
... Na przykład:
To jest nagłówek poziomu 1
To jest nagłówek poziomu 3
To jest nagłówek poziomu 6
W rezultacie na ekranie pojawi się:
To jest nagłówek poziomu 1
To jest nagłówek poziomu 3
To jest nagłówek poziomu 6
Nagłówki są jednym z najczęściej używanych elementów formatowania dokumentów w sieci WWW.
Utwórz listy
W HTML można zdefiniować trzy typy list: listy numerowane, listy nienumerowane i listy definicji. Początek i koniec listy są ustawiane specjalnymi deskryptorami, a przed każdym elementem listy ustawiany jest deskryptor
który nie ma opcji zamknięcia. Lista numerowana:
Element listy Element listy Element listy Wynik:
Lista nieuporządkowana:
Element listy Element listy Element listy Wynik:
* Element listy
* Element listy
* Element listy
Listy definicji to grupy tekstu, każdy po dwa elementy, przy czym drugi element jest przesunięty na prawo od pierwszego. Zazwyczaj takie listy służą do wyjaśniania różnych pojęć. Przykład:
Pierwsza zdefiniowana koncepcja Wyjaśnienie pierwszej koncepcji Druga zdefiniowana koncepcja Wyjaśnienie drugiej koncepcji Wynik:
Pierwsza koncepcja do zdefiniowania.
Wyjaśnienie pierwszej koncepcji.
Druga definiowalna koncepcja.
Wyjaśnienie drugiej koncepcji.
Spinki do mankietów
Linki to jeden z podstawowych elementów języka HTML. Łącza zapewniają użytkownikowi szybki i wygodny sposób nawigowania do tego czy innego miejsca w dokumencie, a nawet do innego dokumentu. Na przykład, zamiast przeglądać długi dokument internetowy w poszukiwaniu żądanego fragmentu, możesz natychmiast przeskoczyć do żądanego miejsca jednym kliknięciem myszy (jeśli oczywiście jest do tego odpowiedni link). Jeśli są dwa różne dokumenty, to aby zapewnić dostęp z jednego dokumentu do drugiego, nie trzeba ich łączyć, wystarczy zrobić link do drugiego w jednym dokumencie i wszystko sprowadzi się do prostego kliknięcia myszką .
Na ekranie łącza są wyświetlane jako linia lub linie tekstu, wyróżnione innym kolorem i podkreślone cienką linią. Jeśli przesuniesz kursor myszy do tej części tekstu, zmieni się on w obraz palca wskazującego, a po kliknięciu w to miejsce zostaniesz śledzony przez ten link.
Atrybut HREF wskazuje na nazwę etykiety w bieżącym dokumencie.
Oczywiście w tym przypadku konieczne jest wyznaczenie etykiety w dokumencie, dla której zostanie ustawiony link. Używa się do tego deskryptora z atrybutem
: Na ekranie etykieta, w przeciwieństwie do linków, nie odstaje od reszty tekstu.
Jeśli zajdzie konieczność nawigowania do etykiety znajdującej się w innym dokumencie, to powyższy przykład nieznacznie się zmieni:
Adres URL może być względny lub bezwzględny. Ponadto link może wskazywać nie tylko dokument, ale także obrazy, pliki binarne, pliki dźwiękowe itp. Zachowanie przeglądarki po kliknięciu w konkretny link zależy od jego konkretnych ustawień. Tak więc, jeśli łącze wskazuje na dokument, zostanie on załadowany, ale jeśli jest to plik audio lub wideo, zostanie odtworzony. Jeśli jest to plik binarny, przeglądarka zaproponuje nadpisanie go na dysku lokalnym.
Osadzanie obrazu
Wykorzystanie obrazów pozwala na kolorowe projektowanie dokumentów internetowych, połączenie tekstu i grafiki nadaje każdej stronie przyjemny wygląd i przejrzystość.
Aby wstawić ilustracje do dokumentu, użyj deskryptora
:
Atrybut określa nazwę pliku obrazu. Nazwa pliku może wskazywać na plik lokalny lub plik zdalny, dla którego należy podać odpowiedni adres URL. Plik może być statycznym obrazem w formacie graficznym zrozumiałym dla przeglądarki lub dynamicznym obrazem w formacie GIF89A. W tym drugim przypadku plik zostanie wyświetlony jako animacja w oknie przeglądarki.
Atrybut ALT wskazuje tekst, który będzie wyświetlany w oknie przeglądarki zamiast obrazu, jeśli np. przeglądarka użytkownika nie obsługuje grafiki lub opcja ładowania obrazów jest wyłączona. Ten atrybut jest opcjonalny, ale uważa się, że dobrą praktyką jest używanie go podczas pisania dokumentów WWW.
Często, przygotowując strony z grafiką, zdarza się, że żądany rozmiar obrazu nie odpowiada rzeczywistemu. Na przykład musisz umieścić obraz na określonym obszarze o określonym rozmiarze. Aby to zrobić, musisz użyć atrybutów WIDTH i HEIGHT, które ustawiają wymagane wymiary obrazu odpowiednio w szerokości i wysokości. Na przykład, jeśli chcesz umieścić duży obraz na obszarze o wysokości 100 pikseli i szerokości 200 pikseli, musisz wpisać następujące elementy w treści dokumentu:
Kolejność tych atrybutów może być dowolna.
Obfitość grafiki w dokumencie z jednej strony ją poprawia ogólna forma z drugiej strony znacznie wydłuża czas ładowania. Aby znaleźć kompromis między szybkością ładowania dokumentu a jego widocznością, projektanci stron internetowych często uciekają się do tej techniki: obraz jest umieszczany na stronie w mniejszym formacie i sprawia, że jest on linkiem do samej siebie. Jeśli klikniesz na taki obraz, przeglądarka go załaduje i wyświetli w oryginalnym rozmiarze. Obraz referencyjny jest opisany w dokumencie w następujący sposób:
Ciekawą okazją jest „opakowanie” obrazu tekstem. Jest to bardzo popularny sposób projektowania stron internetowych. W takim przypadku obraz na ekranie jest otoczony tekstem, na przykład po lewej i poniżej. „Zawijanie” tekstu uzyskuje się za pomocą atrybutu ALIGN, który posiada parametry takie jak:
LEWO – tekst zakryje obraz od lewej do dołu.
PRAWY - tekst zawija obraz od prawego dolnego
GÓRA - obraz jest otoczony tekstem w prawym górnym rogu
DOLNY - obrazek jest otoczony tekstem od prawego dolnego rogu
ŚRODEK - obraz jest otoczony tekstem w środku po prawej
Na przykład podczas kompilowania strony internetowej pokazanej na ryc. 1, w treści dokumentu użyto następującego wpisu, opisującego obraz:
Obrazy mogą być również używane jako tło dokumentu. Cały tekst i wszystkie ilustracje w dokumencie zostaną wyświetlone przez przeglądarkę na obrazie tła. Obrazy tła można ustawić w prosty sposób w następujący sposób:
Jeśli rozmiar obrazu nie jest wystarczająco duży, aby wypełnić całe okno przeglądarki, ta druga po prostu pomnoży obraz, aż okno zostanie całkowicie wypełnione.
Ramki
Jedną z najnowszych innowacji w oficjalnej wersji języka HTML są tzw. ramki. Podczas korzystania z ramek, okno przeglądarki podzielone jest na kilka podokien, w każdym z nich można wyświetlać dowolne dokumenty sieciowe, przewijać je niezależnie od innych okien. Przemyślana konstrukcja ramek może znacznie ułatwić nawigację po dokumentach i poprawić postrzeganie informacji. Przykładem jest elektroniczna wersja książki lub czasopisma, gdzie w jednym oknie można wybrać działy - linki do treści, a w kolejnym oknie można przeglądać informacje bezpośrednio związane z konkretnym działem z treści.
Istnieją dwa rodzaje dokumentów ramowych: dokumenty zawierające ramki i dokumenty proste. Dokumenty zawierające ramki definiują strukturę samego dokumentu ramowego, tj. ustawić dane dotyczące podziału okna przeglądarki na podokna. Takie dokumenty zawierają linki do innych dokumentów. Dokumenty zwykłe to te, które nie zawierają danych definiujących ramy.
Struktura dokumentu zawierającego ramki wygląda ogólnie tak:
nagłówek
Tekst
Obszar definicji ramki
Jak widać na przykładzie, struktura takiego dokumentu różni się nieco od struktury zwykłego dokumentu. Obecność deskryptorów
zamiast oraz to właśnie odróżnia dokument w ramkach od zwykłego. Korzystanie z deskryptoróworaz to kolejny znak dobrego stylu. Między nimi ustaw tekst, który będzie wyświetlany w oknie przeglądarki, które nie obsługuje ramek.Poniżej znajduje się przykład dokumentu ramowego:
Deskryptor
