Slušaj robot čitača
Kako napraviti PRVI SAJT?
Internet, kao način na koji su kompjuteri povezani, kreirali su amerikanci u ratne svrhe. Web je nastao u CERN-u 1989-e, u akademske svrhe, kada je Tim Berners Lee, kreirao prvi web sajt. Pošto sajt ima izvanredan istorijski značaj, CERN ga i dan danas održava dostupnim a mi ćemo ga sada re-kreirati, tako da ćete ubuduće moći da kažete da ste vi lično, kreirali prvi web sajt ikada .
Kako iz današnje perspektive ova stranica izgleda vrlo banalno, pogledajte na ovom simulatoru kako je prvi sajt izgledao našim precima iz kamenog doba u davnoj 1989-oj, koji su koristili tekstualni, tzv line-mode browser i tastaturu za navigaciju, te zašto boje i slike nisu ni imale smisla u to vreme.
Da biste pročitali celu stranu, pritisnite Enter.
Svaka stavka koja pored sebe ima broj u [] je link, i da biste otvorili link, ukucajte taj broj, i pritisnite enter.
Da biste se vratili unazad, ukucajte reč Back i pritisnite enter.
Zamisli, ljudi su ovo videli i pomislili "mogućnosti su beskonačne"
K
Da bismo rekreirali ovu stranicu, moraćemo da uvedemo nekoliko novih tagova, ali pre toga, kao što vidite, na tabu u kome je ovaj sajt otvoren, piše: "The World Wide Web project". Već biste trebali da znate kako da upišete ime sajta na tab.
Celokupan tekstualni sadržaj prve strane, prvog sajta je:
World Wide Web
The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.
Everything there is online about W3 is linked directly or indirectly to this document, including an executive summary of the project, Mailing lists , Policy , November's W3 news , Frequently Asked Questions .
What's out there?
Pointers to the world's online information, subjects , W3 servers, etc.
Help
on the browser you are using
Software Products
A list of W3 project components and their current state. (e.g. Line Mode ,X11 Viola , NeXTStep , Servers , Tools , Mail robot , Library )
Technical
Details of protocols, formats, program internals etc
Bibliography
Paper documentation on W3 and references.
People
A list of some people involved in the project.
History
A summary of the history of the project.
How can I help ?
If you would like to support the web..
Getting code
Getting the code by anonymous FTP , etc.
Otvorite svoj tekstualni editor (VS Code ), i kreirajte novi fajl sa ekstenzijom .html. U njega ukucajte ! ↹ na tastaturi. Ovim bi trebalo da se insertuje osnovna struktura HTML stranice u naš dokument. Sada možemo ovaj gore tekstualni sadržaj prve strane prekopirati u svoj .html fajl, između <body> tagova. Sačuvajte ovaj dokument, i otvorite ga u web browser-u.
Primetićete da se sav sadržaj načičkao, jedna rečenica za drugom, bez ikakvog obzira na format. To je zato što HTML ignoriše sva prazna mesta osim onih između dve reči, i sve nove redove, osim ako mu nekim tagom ne kažemo da ih prikazuje. A upravo to ćemo sada uraditi.
Naslovi na web stranici, Headings <h#>
Headings, istorijski zamišljeni da označavaju naslove i podnaslove rubrka na sajtu, predstavljaju 6 različitih tagova:
<h1>Naslov</h1>
<h2>Podnaslov</h2>
<h3>Pod-podnaslov</h3>
<h4>Pod-pod-podnaslov</h4>
<h5>Pod-pod-pod-podnaslov</h5>
<h6>Pod-pod-pod-pod-podnaslov</h6>
Ako ovo prekopirate u novi .html file i otvorite u browser-u, videćete da su svi headings-i formatirani na različite načine:
Naslov
Podnaslov
Pod-podnaslov
Pod-pod-podnaslov
Pod-pod-pod-podnaslov
Pod-pod-pod-pod-podnaslov
Ovo je postignuto nativnim CSS-om u browser-u, tzv user agent CSS-om, koji manje više isto izgleda u svakom browser-u. Taj UA CSS je najnižeg nivoa, i svaki CSS koji mi napišemo, će ga pregaziti.
Za naš projekat ovde, podrazumevani browser-ov CSS ne predstavlja problem, jer naš kolega TimBL nije imao ni CSS, ni ekran u boji, i koristio je <h1> kao indikator naslova.
Naime, u to prvo vreme, TimBL je bio jedina osoba koja je pravila browser-e, i mogao je da radi šta hoće.
<h1> elementi su od izuzetnog značaja na svakoj stranici, danas i mnogo više nego kada je Timbl pravio svoj prvi sajt. Da, oni vizuelno odvajaju naslov od ostatka teksta, ali to je samo deo njihovih super moći. Ako vam se ne sviđa kako h1 element izgleda, nemojte ga zameniti nekim drugim, ili ga sasvim izostaviti. Google koristi headings, a posebno <h1>…</h1> da odredi ključne reči na sajtu kad ga indeksira (SEO).
S tim u vezi, u vašem je interesu da naslove napišete tako da imaju smisla i kao naslovi teksta, a i kao nešto što bi potencijalni korisnik ukucao u google.
Takođe čitači ekrana se u velikoj meri rukovode idejom da određeni tagovi znače unapred definisanu stvar, u ovom slučaju, da je u pitanju glavni naslov na stranici. Iz tog razloga ne treba da preskačete headings-e, npr, ne treba da imate <h1>…</h1>, pa <h3>…</h3>.
U ranijim verzijama HTML-a je važilo da možete imati samo jedan <h1>…</h1> element po stranici. HTML5 je ovo promenio, i sad možete imati po jedan H1 element po sekciji, <section>, gde sekcija može biti više na stranici, ali sekcije ćemo raditi kasnije.
U svom .html fajlu, nađite gde piše "World Wide Web" i oko tog teksta ukucajte <h1> tagove tako da dobijete:
<h1>
World Wide Web
</h1>
Sačuvajte izmene, i potom osvežite stranicu u browser-u. Kao što vidite, već smo na dobrom putu, već počinjemo da ličimo na original.
Paragraf na web stani, <p>
<p>…</p> tag označava paragraf, koji se na ekranu prikazuje kao "blok" teksta, izdvojen proredom od ostalih blokova texta:
Jedna od osobenosti HTML-a je da ignoriše prazna mesta. Iz ovog razloga, ukucati nekoliko praznih redova u kôd, neće imati nikakvog uticaja na izgled stranice.
Ljudi kada tek uče, imaju sklonost da unesu nekoliko praznih <p> elemenata kada god im je potrebno da naprave veći razmak, ali ovo treba izbegavati.
- Ovo loša praksa jer je nemoguće za stilizaciju, jer će se taj element večito ponašati nepredvidivo
- Čitači ekrana za slepe čitaju sve <p> tagove, i time stvaraju konfuziju kad u njima nema teksta
Veći razmak se može postići CSS-om, pomoću margina.
Još jedna osobenost <p> taga je da ako ga ne zatvorite, uglavnom neće poremetiti prikaz stranice.
Uprkos tome, treba ih uvek zatvarati, jer u retkim situacijama kada pravi problem, nećete se lako setiti da niste zatvorili <p> i trebaće vam previše vremena da odgonetnete grešku. Ovo ne važi za sve tagove, u nekim slučajevima nezatvoreni tagovi prave vrlo primetnu promenu na strani, ali onda je lako otkriti u čemu je problem.
Razlog što nezatvoreni "p" element uglavnom ne pravi probleme, jeste u tome što browser-i sami zatvoraju nezatvorene <p> elemente. Ljudi koji se bave standardima su pokušali da uvedu da se svaka greška u html-u mora na neki način pokazati, kako bi ih developeri uklonili, ali proizvođači browser-a odmahuju rukom, jer ako bi sajtovi sad odjednom počeli u chrome-u da se kvare zbog nezatvorenog <p>, ceo svet bi instalirao firefox.
Ovo ponašanje je od značaja jer se u nekim graničnim slučajevima, može desiti da browser pobrka lončiće i zatvori p element gde on misli da treba, ignorišući </p> koje ste vi upisali. To se uglavnom dešava ako u p element stavite nešto što ne ide u p element. Dakle, ako vidite </p> tamo gde ga vi niste stavili, da se ne zbunite.
: Da biste editovali više redova odjednom, selektujte kursorom sve redove, zatim pritsnite Alt+Shift+I. Ovo će insertovati kursor na kraj svakog reda, gde sada možete ukucati </p>. Zatim kliknite na home dugme na tastaturi da se vratite na početak reda i dodajte <p>. Obratite pažnju, pošto VSC sam zatvara tagove to će on zatvoriti <p> čim ga ukucate, pa ćete to morati obrisati.
Da bi ovaj Alt+Shift+I shortcut radio posao, potrebno je da vam se tekst u editoru ne "umotava". Ako vam se tekst "umotava", to možete isključiti iz menija, u VS Code-u, pod View, Toggle word wrap. Teorijski, trebalo bi da možete da uključite / isključite umotavanje pomoću Alt+Z, ali kao i mnoge druge skraćenice, meni ova ne radi. Možda vi budete bolje sreće.
Kad sve završimo, trebalo bi da imamo sledeće:
…</h1>
<p>The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.</p>
<p>Everything there is online about W3 is linked directly or indirectly to this document, including an executive summary of the project, Mailing lists , Policy , November's W3 news , Frequently Asked Questions .</p>
<p>What's out there?</p>
<p>Pointers to the world's online information, subjects , W3 servers, etc.</p>
<p>Help</p>
<p>on the browser you are using</p>
<p>Software Products</p>
<p>A list of W3 project components and their current state. (e.g. Line Mode ,X11 Viola , NeXTStep , Servers , Tools , Mail robot , Library )</p>
<p>Technical</p>
<p>Details of protocols, formats, program internals etc</p>
<p>Bibliography</p>
<p>Paper documentation on W3 and references.</p>
<p>People</p>
<p>A list of some people involved in the project.</p>
<p>History</p>
<p>A summary of the history of the project.</p>
<p>How can I help ?</p>
<p>If you would like to support the web..</p>
<p>Getting code</p>
<p>Getting the code by anonymous FTP , etc.</p>
</body>...
Gospodin TimBL je napravio jako puno grešaka u kucanju. Standardno, tačka i zarez idu odmah iza reči, a prazno mesto ide iza njih, ali ne u ovom fajlu. Mada normalno ne ohrabrujem ovakvu bahatost sa interpunkcijama , ovaj put te greške moramo kopirati, jer na greškama se uči.
Ako ponovo sačuvate svoj .html fajl, i osvežite ga u browser-u, videćete da smo skoro gotovi. Još samo treba linkove da dodamo, i da uvučemo tekst u svakom drugom redu.
Članak prvi put objavljen: 31.5.2021.
Poslednje izmene: 5.2.2022.
Autor: k.