wtorek, 14 lutego 2023

Jak kiedyś tworzyło się strony internetowe. HTML 4 i CSS 2 - grafika, ramy itd.

 Postanowiłem napisać temat o tym, jak kiedyś tworzyło się strony internetowe. Co prawda i tu zaznaczę, że wszystkiego i tak nie napiszę, więc, jeżeli czegoś zabraknie, to nie będzie oznaczać, że nie wiedziałem. Zapraszam.

Od wielu lat mamy HTML5 i CSS3. Dziś tworzenie stron w nowej wersji HTML i CSS, bardzo ułatwia nam pracę oraz pojawiło się wiele atrybutów, które nawet poprawiają nie tylko wygląd strony, ale też dają niesamowite efekty wizualne. Ale wróćmy wstecz o ponad dekadę, przypomnę jak kiedyś tworzyło się strony internetowe.

HTML4 i xml - wersje kodowania

W HTML 4 nie było możliwości dodania krótkiej linijki kodu DOCTYPE, jak ma to teraz. Kiedyś trzeba było określić xml version="...." tak było w przypadku XHTML, a jeżeli chodzi o sam HTML 4, były takie linie kodu, które były wykorzystywane w zależności, jak ma strona wyglądać. Poniżej daję trzy linie kodu DOCTYPE:

Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Każda z tych linijek kodu, która zaczynała szkielet strony, dawała swoje właściwości. Jeżeli chodzi o tworzenie stron z tzw. pływającymi ramkami, to można było we wszystkich kodowaniach DOCTYPE HMTL 4 tworzyć, ale były różne efekty.

Dobrze linie kodu wersji HTML4 mamy za sobą, ale jak tworzyło się strony? Jak zaczynało się, już napisałem, ale jak tworzyło się strony?

Strony z pływającymi ramkami

Takie strony różnie wyglądały i sam tworzyłem. Niby fajnie to wyglądało, ale miało jedną wadę. Nie można było w każdej ramce umieścić zbyt dużo tekstu. Przykładowo. Chcemy stronę z menu po lewej stronie, a po prawej tekst strony. Czyli w ramce <iframe strona 1> musi być strona w menu z ustaloną wcześniej szerokością. Natomiast, w ramce drugiej <iframe strona 2> tekst strony. Dodam, że do każdego atrybutu iframe dodawało się ścieżkę stron, czyli <iframe src="strona.html"> itd. Dodatkowo, pojawiały się suwaki, co nie każdy chciał, ale jak było długie menu, to musiał być suwak przewijania.

Strony oparte na tabelach niż na blokach div

Sam tworzyłem strony oparte na tabelach niż na div. Lecz w HTML 4 i CSS2 też tworzyło się strony na blokach div a nie na samych tabelach, ale tworzyło się. Dziś, na tabelach nie tworzy się stron, ponieważ tabele służą do prezentowania danych z baz danych. Są strony zwane CMS, które są oparte na tabelach. Takim CMS-em jest dobrze znany PHP-Fusion. Sam korzystałem, ale później mi się znudził.

Strony we flash'u

Każdy widział stronę i to nie jedną zrobioną we flashu. Animacje, wysuwane menu a do tego jeszcze był wykorzystywany (inaczej by strony nie działały), język ActionScript 2.0, później 3.0. I takim programem dość popularnym był Macromedia Flash. Były jeszcze reklamy tworzone w tym języku, co wymagało od użytkownika instalacji flash player. Nie każda przeglądarka wymagała instalacji flash playera, Opera miała już wbudowany taki player. Można dziś sobie używać flash  playera, ale jest odradzany! To zależy od użytkownika, czy chce to mieć.

Grafika - zaokrąglone narożniki

Kiedyś tworząc stronę, cięło się grafikę w photoshop na małe części. A cięło się po to, aby strona szybciej ładowała się niż cała duża grafika. Dziś (nie jestem pewny), pewnie stosuje się, ale mając na uwadze nową wersję HTML5 i CSS3, i możliwości, strony lepiej wyglądają niż kiedyś. Poza cięciem grafiki, był problem z zaokrągleniem narożników. Aby zaokrąglić rogi, trzeba było ponownie pociąć grafikę i napisać tak styl w CSS, aby wszystko dobrze pasowało. Kiedy pojawił się CSS3, to aby zaokrąglić narożniki, nie trzeba ciąć grafiki, wystarczy wpisać w dany blok div, p, header itd., linijkę border-radius: i tu ustalamy wartość w pikselach. To dało duże ułatwienie. 

Dodatkowo, przy tworzeniu stron, każdy program bez względu, czy to płatny, czy darmowy, miał szablon wersji, czyli Strict, Transitional, iframe. I jaki wybrało się, taki kod wygenerował ze znacznikami  meta.

I tym samym kończę podróż, właściwie krótką podróż po tworzeniu stron przed rokiem 2010.