Metody układu HTML

  1. Bezpośredni układ
  2. Układ tabeli
  3. Układ bloku
  4. Układ ramki

Układ to proces przekształcania układu graficznego obrazu (zwykle z formatu psd) w stronę internetową zgodnie z określonymi zasadami. Innymi słowy - przekształcenie obrazu w specjalny kod (kod html), obserwacja projektu, rozdzielczości ekranu i wymagań przeglądarek.

Obecnie istnieją 4 sposoby projektowania stron internetowych:

  1. Bezpośredni układ
  2. Układ ramki
  3. Układ tabeli
  4. Układ bloku

Bezpośredni układ

Po raz pierwszy swojego istnienia Internet był zwykłym zestawem dokumentów, reprezentujących najprostszy zestaw elementów nagłówka, tekstu, obrazów i tabel. Takie dokumenty nie były prezentowalne, a wraz ze wzrostem popularności WWW pojawiło się zadanie zarządzania wyglądem strony. Zamiast elementów nagłówków, programiści zaczęli używać pogrubionych czcionek do tworzenia pożądanych efektów wizualnych na stronie.

Układ tabeli

Bezpośredni układ został zastąpiony układem tabelarycznym, który jest nadal używany do dziś. W układzie bezpośrednim tabele były używane zgodnie z ich przeznaczeniem - do wyświetlania danych tabelarycznych (tabele podsumowujące, wyniki meczów, cenniki, listy towarów). W przypadku układu tabeli, stół zmienił swoje bezpośrednie znaczenie - stał się fundamentem projektu - elementy projektu: logo, obrazy tła, przyciski, logo, tekst główny, menu i inne elementy strony, zostały umieszczone w komórkach tabeli, tworząc zewnętrznie wykończoną strukturę.

Przykład:

1 - pokazuje zwykły stół z komórkami

2 to widok strukturalny układu opartego na tabeli.

3 - za pomocą struktury 2 utworzono stronę witryny (granice tabeli są niewidoczne, co pozwala na użycie tabeli jako podstawy strony)

Zazwyczaj w gotowym dokumencie HTML z jedną tabelą wszystko się nie kończy. Aby stworzyć złożone struktury, konieczne jest tłumienie w pewien sposób innych tabel w komórkach istniejących tabel, co prowadzi do złożoności czytelności kodu, trudności z edycją, a ponadto objętość takich stron wzrasta, a następnie trudno jest zaprogramować taką stronę.

Aby ułatwić kontrolę wyglądu dokumentu (pogrubienie słów, podkreślenie, kursywa, wyrównanie), opracowano edytory wizualne - narzędzia WYSISYG ( Czego szukasz Co otrzymujesz, „to, co widzisz, jest tym, co otrzymujesz”). Niestety, zamiast upraszczać sytuację, redaktorzy wizualni, wręcz przeciwnie, sprawili, że stało się to bardziej skomplikowane - w dokumencie pojawiła się ogromna ilość zbędnego kodu, co stało się jeszcze trudniejsze do zrozumienia. A strona internetowa stała się tak skomplikowana, ponieważ zrozumienie, że jej edytowanie stało się prawie niemożliwe, aby nie zniszczyć kodu WYSISYG. Sytuację uratowała wyłoniona technologia css (Cascading Style Sheets - kaskadowe arkusze stylów), w której cały projekt wizualny (grubość i kolor czcionki itp.) Znajduje się teraz w zewnętrznym pliku i jest połączony ze stroną html, tj. struktura (fundament) strony jest w jednym pliku html, a projekt graficzny w drugim jest plikiem css. Wraz z pojawieniem się css pojawiła się nowa metoda blokowania układu html.

Układ bloku

W tym układzie układy graficzne składają się z prostokątnych bloków (div). Takie bloki na stronie można umieścić w dowolny sposób. Ten typ układu jest wolny od wszelkich wad podejścia tabelarycznego. Ilość kodu jest zmniejszana o kilka razy w porównaniu z metodą tabelaryczną.

Dzięki podejściu tabelarycznemu blok tekstu jest opisany jako:

Dzięki podejściu tabelarycznemu blok tekstu jest opisany jako:

Z układem bloków ten sam blok jest opisany jako:

Kod strony jest łatwy do odczytania i wyczyszczenia (+ użycie css pozwala umieścić cały projekt w zewnętrznym pliku, co prowadzi do zmniejszenia i łatwego zrozumienia samego kodu HTML).

Programiści pracujący z takim kodem są bardzo mili.

Metodę blokowania można łączyć z metodą tabeli - tabele mogą być ponownie używane zgodnie z ich przeznaczeniem, co pozwala na wyświetlanie informacji w wygodny sposób.

Zatem teraźniejszość i najbliższa przyszłość dla układu bloków.

Ponadto obecnie używany jest w pełni język znaczników HTML5, który proponuje użycie nowych znaczników do oznaczania elementów blokowych i śródliniowych. Z listą nowych tagów i atrybutów, które proponowane znaczniki stron za pomocą html5 można znaleźć w to artykuł. A jak wybrać jeden lub inny tag i nie popełniać błędów opisano w to artykuł.

Układ ramki

Ramka (z angielskiej ramki - ramka) jest oddzielnym, kompletnym dokumentem HTML, który wraz z innymi dokumentami HTML może być wyświetlany w oknie przeglądarki.

Ramki przypominają komórki tabeli. W każdej takiej komórce można wyświetlić oddzielny dokument html i są one niezależne od siebie. Ramki mogą być wyświetlane w różny sposób w różnych przeglądarkach, tj. jest chwila niezgodności. Korzystanie z ramek w nowoczesnej sieci jest możliwe, ale nie zalecane. Niektóre wyszukiwarki i katalogi odmawiają rejestracji takich witryn, które używają ramek.

Podsumowanie :

- Bezpośredni układ - używany na początku początku.

- Układ tabelaryczny jest uciążliwy i niewygodny, ale łatwy do wdrożenia.

- Układ bloku jest prosty pod względem struktury kodu, ale wymaga pewnych zasad wykonania, wymaga pewnych umiejętności i jest najnowocześniejszym sposobem na układ stron internetowych.

- Układ ramy nie jest zalecany do użycia.

oferty proverstka.local usługi dotyczące układu strony . Jesteśmy w stanie wykonać dowolny z powyższych układów, ale wolimy pracować tylko z blokiem.