BIRDZ Magazín

Ako urobiť prvú www stránku (úplné základy HTML)

Ako dať na internet www stránku

Úplný začiatok

Sedíš za kompom a chceš začať robiť weby. Super. A čo ďalej? Ako vlastne začať na úplnom začiatku? Treba googliť alebo napísať do nejakého fóra? Alebo čo? Potrebujem nejakú knižku na začiatky toho "programovania" či ako sa to volá? Možno ti pomôže tento článok. Predpokladám, že nevieš úplne nič alebo máš fakt minimálne základy. Veď prečo by si inak čítal tento článok?



Pár hodín času Čo na to budeš potrebovať?

1ks počítač

1ks program na písanie textu (stačí Notepad vo Windowse)



A to je všetko.



O čom urobiť prvú stránku?

Väčšina ľudí urobí prvú stránku o sebe, to je vlastne dosť ľahké, lebo nemusíš zháňať informácie ani fotky na stránku. Veď pár riadkov o sebe dokážeš napísať a nejaké svoje fotky snáď v kompe máš. Ak však nechceš robiť stránku o sebe, môžeš urobiť stránku o svojom obľúbenom televíznom seriáli či hercovi alebo športovcovi.

V tomto článku budeme robiť osobnú stránku, ale pokojne môžeš robiť stránku o niečom inom.





Začíname...

Zatvor dvere, nech ťa nikto neotravuje, vypni telku, pusti si pohodovú hudbu, nech sa cítiš príjemne a nech ti nič nechýba
Zapni textový alebo html editor. Čiže žiaden Word! Vo Windowse je to Notepad. Alebo si stiahni PSPad pre Windows či napr. Coda ak máš MacBook od Apple
Urob si adresár v kompe pre tvoju stránku. A vytvor v ňom súbor s názvom index.html a skopíruj do neho text z z tejto linky.


Editor program na editovanie textu alebo html editor, čiže napríklad Notepad, PSPad alebo Coda. V ďalšom texte to budem volať pre zjednodušenie "editor".



Internetový prehliadač je program na pozeranie webov, je to program v ktorom surfuješ - napríklad Firefox, Internet Explorer, Google Chrome, Safari alebo Opera, čiže program, v ktorom chodíš na BIRDZ a na všetky ďalšie internetové stránky. V ďalšom texte to budem volať pre zjednodušenie iba "prehliadač".


Takže...



Text skopírovaný z tej linky máš vložený v súbore, ktorý sa volá index.html.



Vložil si ho tam cez textový alebo html editor (ktorý si otvoril v kroku č. 2) a tvoja stránka vyzerá v editore asi takto:



HTML kód stránky



Keď si tento istý súbor index.html otvoríš cez prehliadač, tak uvidíš bielu stránku s čiernymi písmenkami Ahoj svet, to som ja! a to je tvoja prvá stránka.



Ako vidíš väčšina html kódu tam nie je vidieť, vidíš len to, čo sa nachádzalo medzi dvoma tagmi "body". Počkať čo je to tag? Tag (alebo tiež html tag) je veľmi zjednodušene povedané príkaz, ktorý povie internetovému prehliadaču, čo má robiť so všetkým, čo sa nachádza medzi začiatkom a koncom tagu.



HTML tagy

Existujú dva typy tagov - párové tagy a nepárové tagy.



Párový tag:

Párový tag niekde začína (začiatok tagu) a niekde končí (koniec tagu) a všetko, čo je medzi, je ovplyvnené (nastavené) tým tagom.

HTML tag



Takto funguje napríklad hrubé písmo. V editore si dopíš pred slovo "svet" tag b pre hrubé písmo, za slovom "svet" hrubé písmo zakonči:



Bold tag



Ulož a pozri v prehliadači - svet je hrubý. Až na to hnusné písmo :), ale to nastavíme neskôr...



Nepárový tag:

Okrem párových tagov existujú aj nepárové tagy. To sú také, ktoré neoznačujú nejakú časť stránky, ale sú samé o sebe časťou stránky. Dobrým príkladom je obrázok, ktorý má nepárový tag img.



HTML obrázok



Toto, keby sme vložili v editore do kódu, tak by sa nám tam zobrazil obrázok, ale neviem aký. Tag síce hovorí, že tu ide obrázok, ale treba povedať aký obrázok, treba "nalinkovať" zdroj obrázku. Na to sú atribúty - to je nejaké nastavenie, ktoré napíšeme do tagu medzi jeho zobáčikmi. Za názvom tagu dáme medzeru a názov atribútu rovná sa hodnota (číslo, farba, typ...)



HTML tag



Napríklad pre obrázok je atribútom src (z anglického slova source) a hodnotou je názov súboru obrázku (v tom istom adresári, kde máš index.html) alebo nejaká cesta k obrázku napr. z internetu (vtedy začína na http://www.... lebo to je celá linka k obrázku)

HTML obrázok

Skús do svojho súboru skopírovať ten druhý riadok s obrázkom z BIRDZu a vlož ho do svojho html kódu niekde medzi začiatočný tag body a koncový tag body.



Ulož a otvor v prehliadači a uvidíš tam tento krásny obrázok:







Základné tagy

Poďme si vysvetliť základné tagy, ktoré by si sa mal naučiť, lebo ich proste musíš vedieť. Toto sú úplne najzákladnejšie tagy, ktoré by si (ako učiteľka slovenčiny o básni Mor ho! hovorí) "mal vedieť aj o polnoci"...



Základné HTML tagy



Tagov je samozrejme oveľa viac, veľmi dobrou stránkou je stránka W3Schools (v angličtine) a ich HTML Tutoriál. Napríklad vysvetlenie fungovania obrázkového tagu img či napr. ako fungujú tabuľky.





Štruktúra stránky

To, čo píšeš medzi tagy head, je nastavenie stránky a nezobrazí sa to v stránke a to, čo píšeš medzi tagy body, je samotná stránka a zobrazí sa na webe.



Štruktúra www stránky





Chápeš či nechápeš?

Tip:



Prečo index.html, lebo tak sa väčšinou volá úvodná stránka, pokojne si to môžeš nazvať aj inak, ako napríklad o-mne.html alebo tomasova-stranka.html. Ak si spravíš viac html stránok môžeš cez tag a si robiť linky medzi sebou. Do atribútu miesto http://www.nieco.sk/... napíšeš len názov druhej stránky, na ktorú chceš linkovať, napr. na o-mne.html, a tak si môžeš prelinkovať jednotlivé tvoje stránky.


Skús si urobiť jednoduchú stránku, o sebe...



Čo tam dať? V nadpise bude tvoje meno. Ďalej urobíš odstavec, kde napíšeš niečo o sebe, čo rád robíš, prípadne linky na svoje obľúbené stránky, profil na BIRDZi, Facebooku či Pokeci.



Skús si pridať do stránky niekoľko obrázkov (buď z netu) alebo si ich daj do toho istého adresára, kde máš stránku.





To je všetko?

To je úplny základ. Stránku treba ešte nadizajnovať. Nabudúce si povieme, čo je to CSS dizajn, nech vieš ako nastaviť farby textu, odstavcov, nadpisov, obrázok na pozadí.



Stránku treba dať na internet, treba si zohnať doménu a webhosting, minule som napísal, čo je to doména a webhosting, k podobnej téme sa ešte vrátime.



Ďalej si popíšeme niečo o tom, ako programovať zložitejšie stránky, ako a kde hľadať inšpiráciu, ako propagovať stránku, keď nemáš peniaze na bannery, čo je to SEO a ďalšie zaujímavé skratky...



Prečítaj si aj článok ako nájsť nápad na stránku, a začni vymýšľať nejaký projekt, ktorý urobíš a prihlásiš do súťaže na BIRDZ, aby si mohol vyhrať iPad a slávu a publicitu :D

autor: Tomáš Abaffy, 6. máj 2011 12:00
Zdieľaj článok na facebooku

Komenty k článku

  1. 1
    Erapo

    31 ročný muž
    bratislava tam sa rodi slava

    Nie že by som chcel rýpať, pretože považujem takýto tutorial za dobrú vec a boli roky, kedy pre mňa boli takéto tutorialy ako biblia, ale pre tých menej znalých, resp. tých čo nemajú skúsenosti by bolo vhodné začať nejakou teóriou, ktorá im bude zo začiatku síce nepotrebná, ale s ďalšími článkami sa budú môcť k nej vrátiť a povedať si, prečo je to tak... mám na mysli nejaké porovnanie HTML a XHTML, opísať nejaké štandardy a dať nejaké grify, aby už od začiatku sa držali nejakého coding stylu, aj keď nebudú vedieť čo to je a prečo to tak majú robiť... osobne som sa to učil cez notepad voľakedy, a priznám sa, že som mal obrovské problémy sa naučiť a zachovávať nejaký coding style. To viedlo k množstvu zbytočného redesignovania, ktorého som sa mohol ušetriť. Dúfam, že ma kvôli tomuto názoru nezavrhnete, ale budete to brať ako konštruktívnu kritiku.
  2. 2
    Tomas

    týpek, čo založil BIRDZ
    Bratislava

    @erapo teórie sú v knižkach, čím viac teórie bude, tým skôr odradím ľudí, nikto nebude robiť dokonalé stránky po pár článkoch, podstatné je, aby tí "čo chcú začať" začali, a aby sa toho nezľakli hneď prvý deň... preto nevadí, ak niečo na začiatku nebude dokonalé, pre úplný začiatok stačí, že človek pochopí, že veci, čo chce vidieť na stránke píše do body, že sú nejaké tagy, ktoré nejak takto fungujú, že dizajn sa spraví v cssku (nabudúce)...<br />
    porovnanie HTML a XHTML, resp. aj HTML5 v tejto fáze nemá zmysel, človek musí dokázať urobiť, čo najrýchlejšie nejakú stránku, aby sa potešil, že jeeej, funguje ho to, a to ho samého bude motivovať k ďalšiemu objavovaniu, moje články budú len v prvej fáze o nejakej teórií, neskôr sa chcem venovať viac konkrétnym radám o riadení webu, webovom biznise, spoluprácach... a nie konkrétnemu písaniu kódu...
  3. 3
    Robo0000100

    26 ročný muž

    @tomas A čo tak na úplné začiatky odporúčať program NVU? :) Sice ti to v kóde porobí chaos lebo nepoužíva ale rovno slová celé a štýly ale tak
  4. 4
    Tomas

    týpek, čo založil BIRDZ
    Bratislava

    @robo000100 nepoznám NVU, ale ono to je relatívne jedno v akom programe človek začne..
  5. 5
    Corvuscorax

    37 ročná teta
    ۩mimo času a priestoru۩

    zaujímavé
  6. 6
    Anzu

    31 ročná žena
    Paštikáreň

    Zaujímalo by ma, ako ďaleko pôjdeme? Začíname úplne od začiatku a skončíme kde? Pri spravení si prvej vlastnej stránky? Pri začiatočnej teórii, ktorá nás má inšpirovať k tomu, aby sme si hľadali ďalej, čo chceme? Alebo to potom skončí aj vo viac profesionálnej rovine? <br />
    <br />
    A ak môžem napísať malý nápad, ak sa niekedy dostaneš k designu (nie teraz v zmysel kódenia, ale kreslenia), niektoré stránky zostavujú pre inšpiráciu rebríčky najkrajších layoutov (všeobecne alebo v nejakej kategórii), na to by sa možno radi pozreli aj začiatočníci alebo aj takí, ktorí sami stránky robiť neplánujú, nie? A bolo by to dobré pre ujasnenie takých pojmov ako clean design, grunge design, vintage design,....
  7. 7
    Tomas

    týpek, čo založil BIRDZ
    Bratislava

    @anzu skvelý námet! určite bude fajn vysvetliť (a ukázať na nejakých príkladoch) čo je napríklad vintage, čo je grunge atď... Pokojne mi píšte do TSiek ďalšie námety... <br />
    <br />
    A kam pôjdeme? No predsa po "úšpešný predaj portálu" :D<br />
  8. 8
    Ikuto

    tvári sa, že má 4 roky
    tam, kde neexistuje čas

    @anzu tie linky o ktorych vravis chcem:) posles mi ich ?
  9. 9
    Anzu

    31 ročná žena
    Paštikáreň

    @ikuto hm, nemám to niekde poukladané, musela by som hľadať... väčšinou, keď si hodíš do googlu hocičo s webdesign, photoshop, layout, inspiration a/alebo tutorial, hneď na niečo natrafíš. teraz som si napríklad googlila "webdesign inspiration" a našlo mi to celé kolekcie na flickri a podobne. <br />
    <br />
    ale len tak z hlavy:<br />
    abduzeedo.com (uverejňujú prácu umelcov a grafikov, tutorialy, typografiu a tiež linky na voľné textúry a fonty)<br />
    smashingmagazine.com (vydali aj nejaké knihy, mne sa páčili.. zvyknú zostavovať rebríčky ako 40 najlepších grunge tutorialov a podobne)<br />
    <br />
    píšem to sem, keby to náhodou ešte niekoho zaujímalo :)<br />
  10. 10
    Ardonaiel

    tvári sa, že má 4 roky
    ~ dvojkrídla forma života ~

    keď som začínal, tak mi veľmi pomohli tieto stránky: http://www.jakpsatweb.cz/ a ich diskusie :-) PSPad odporúčam aj ja, uľahčí veľmi prácu. <br />
    NVU? heh, čistá divočina, zbytočne veľa vygenerovaného kódu, vhodné možno len ako pomôcka, keď niečo neviem vytvoriť tak si to nechám vygenerovať cez NVU a potom doladím a osekám :-) Je dobré sa zo začiatku učiť syntax a príkazy (Tagy), namiesto aby to program sám generoval.
  11. 11
    D2s

    28 ročný muž
    Prešov

    Naco pisat o niecom, co je uz napisane (myslim html, css, php) o tom uz sk/cz kvalitne serialy existuju? nasmeruj citatela ze tam to najde, a radsej je lepsie nieco pisat co na cz/sk pomery neexistuje alebo je to v shit kvalite. Inak viem, ake to je tazke pisat clanok.
  12. 12
    Fxx

    28 ročný muž

    ja len že je preklep kde sa píše o "src",hrubým je tam zvýraznené scr .
  13. 13
    Tomas

    týpek, čo založil BIRDZ
    Bratislava

    @d2s neboj toto sú trochu úvodné diely, nechcem rozoberať základy HTML, toto bol taký úvodný diel...
  14. 14
    Tomas

    týpek, čo založil BIRDZ
    Bratislava

    @fxx ďakujem za všímavosť, preklep bol opravený.
  15. 15
    Kosmiklove

    34 ročný ujo
    andromeda

    @tomas nudis sa? mohol by si ma naucit programovat php lebo akosi stale tomu nechapem :D
  16. 16
    Dawnisuponus

    30 ročný muž
    Spod Zobora

    Pekny tutorial pre uplnych zaciatocnikov, len treba poznamenat ze uz ani tvorba webovych stranok nie je to co byvala. Kedysi stacil notepad a ie6, dnes pri nastupe Web2.0 uz to take jednoduche nie je. Toto co je tu vysvetlene(a predpokladam ze aj dalej bude rozsirene) bude maximalne pre designer-ov a grafikov, pretoze tvorit momentalne cisto v Html a css je utrpenie a hroza, ked su dostupne frameworky ako ASP.NET MVC a WCF, alebo JSF, GWT. Ked profesionalne, tak urcite zvolit framework a toho sa drzat, na oddychovu tvorbu staci aj toto
  17. 17
    Matheusko

    33 ročný muž

    Urcite sa oplati pozriet aj na ... http://w3.jumep.com/index.php
  18. 18
    Tomas

    týpek, čo založil BIRDZ
    Bratislava

    @dawnisuponus neboj budem sa venovať aj frameworkom, ajaxu... cháp toto, ako úplný začiatok, je jasné, že začínajúci človek musí vedieť najprv trochu html, a potom môže riešiť čo ja viem Zend :D
  19. 19
    Matus123

    21 ročný chalan
    Vráble

    tazka matika =D obdivujem ludi co to pochopia =D komplikovane je to aj ked je to naozaj dobre vysvetlene :)
  20. 20
    Wewo

    27 ročný muž

    jéééj. môžem do tejto rubriky tiež prispievať? :)
  21. 21
    Midnight

    31 ročný muž
    čo to zase píše?!

    @dawnisuponus - captain obvious is obvious?<br />
    aj keď neviem ako ťa akýkoľvek framework uchráni od html a css, ale... keď myslíš...
  22. 22
    Mulpogu

    35 ročná teta
    Prešov

    sakra nenajde sa niekto kto by ma doucil z html, xhtml, css, javascript, python, postgreSQL (postGIS), AJAX a pod. veci??:))....html, css ako tak ovladam....aspon 2 veci ztoho co som vymenoval samozrejme za money:))....
  23. 23
    Filip1508

    22 ročný chalan
    Spišská Belá

    mozno by som ti niekoho dohodil kebyze chces:) kamosov z fb :)
  24. 24
    Nwmsivihonit

    26 ročný muž
    Dudince

    chalani ja som robil pre microsoft 8 rokov a viem urobiť hociaký program hru a webstránku tomáš je môj dobrý kamoš a vážim si ho ako kamoša a inak treba sa naučiť HTML a potom ked budete vedieť programovať v HTML tak sa naučiť aj CSS štýly na youtube a na www.jakpsatweb.cz je toho dosť tak potom je dobré keby ste si kúpili knižku v resp. encyklopédiu o PHP,PHP5 alebo tak ale najskôr PHP a MySQL tak už budete môcť vedieť urobiť chat na webe aj eshop a mnhoho iného taktiež aj aplikácie .............. trošku som vám chcel povedať všimnite si pár kokotov čo robia test iq alebo matematické olympiády v HTM a jebnú to na skurvenú tabulu žiakom no tak dopadnete vy ak sa nenaučíte toto čo ja a tomáš vám píšeme sem no potom ked budete vedieť toto tak sa špecialyzujte aj na PC programy ale nato už treba vedieť programovať v PC programovacích jazykoch "tie robili Tomikovi" problémy ako je C/C++, JAVA, Visual Bysic, Pascal, Python atd..... tak sa majte a učte sa neskôr sa stretneme všetci a nakopeme riť Markovy Cukerbergovy
  25. 25
    Matrocker

    36 ročný ujo

    prepáčte, som laik a len tak som to skúšal podľa tohto návodu. všetko to šlo ok len mám otázku prečo sa tam nezobrazuje ten obrázok čo som tam nalinkoval ale len "obrázok", či k tomu dojdeme neskor?
  26. 26
    Nokia06

    37 ročný ujo

    ako v lastne sa da zarobit na internetovom bazari ako napriklad www.bazos.sk,ked sa tam pridavaju inzeraty zdarma okrem ponuky prace a sluzieb,a treba na taku stranku zivnost?
  27. 27
    Hajzelodkosti

    33 ročný muž

    @nokia06 bazos zaraba na spoplatnenych inzeratoch. Vid. rozhovor: http://www.zajtra.sk/rozhovory/332/radim-smicka-bazos-vznikol-z-bazarovej-sekcie-mojho-byvaleho-webu
  28. 28
    Nokia06

    37 ročný ujo

    kolko stoji spoplatneny inzerat na bazosi a akou formou sa uhradza?
  29. 29
    Donatela201

    26 ročná žena
    Tam kde stale snivam svoje sn

    vyborny napadik! :) ocenujem taketo nieco pre zaciatocnikov! :) presla som si to tak zhruba a napisal si to vyborne :)
  30. 30
    Camper

    33 ročný muž
    trnava,michalovce

    Jeden platený videokurz v slovencine, ale silno kvalitny :D http://megatron.sk/ako-robit-webove-stranky-videokurz/
  31. 31
    Methamphetamine

    24 ročný chalan

    uplne pre zaciatocnikov https://www.youtube.com/watch?v=ltZzSyYr_hE
  32. 32
    Riskozvychodu

    24 ročný chalan
    Košice / Bratislava

    chcelo by to návod pre koderov birdzu, ako to tu urobiť plne funkčné
  33. 33
    Victory.jack

    21 ročné dievča

    Potrebovala by pomoc s domácou úlohou, ak vie niekto dobre programovať HTML cez psad a vedel by mi urobiť jednoduchú stránku nech sa mi ozve na email: jackovaviki@gmail.com (samozrejme to nechcem zadarmo) ďakujem