XHTML + CSS – 9. lekcia – Zotriedený zoznam, Kapitoly

Príklad zotriedeného zoznamu:

Zotriedený zoznam sa používa všade tam kde chceme použiť zoznam položiek roztriedený na základe logického usporiadania. Veľmi často používané je číselné roztriedenie (klasické číslice, rímske znaky) a roztriedenie podľa abecedy (slovenská, grécka). (viac…)

XHTML + CSS – 8. lekcia – Google fonts, tvorba linajkovaného zošitu

Práca s Google Fonts

Implementovanie Google fonts do CSS na stránke a následné aplikovanie tohto fontu do odsekov a tým sa vytvára dojem napríklad písaného písma.

Práca s pozadím v elementoch HTML

Pomocou vybraného tagu <p> je demonštrovaná práca s pozadím aj v inom než <body> tagu. Čiže úprava pozadia je možná nie len pre celú internetovú stránku naraz, ale je možné nastaviť pre rôzne časti stránky rôzne pozadia.

Tvorba linajkovaného zošitu

V jednoduchom príklade je ukázaná práca s pozadím v odseku <p> spolu v kombinácii s Google Fonts sa docieli vzhľad podobný ručne písanému písmu v linajkovanom zošite.

XHTML + CSS – 7. lekcia – Farby, pozadia, gradient pozadia

Videonávod je zameraný na úpravu pozadia na internetovej stránke pomocou CSS kódu. Tutoriál sa člení do niekoľkých hlavných častí a to:

  1. oboznámenie sa s farbami internetu (CSS)
  2. nastavenie jednofarebného pozadia stránky
  3. vytvorenie farebného gradientu pozadia
  4. špeciálna vlastnosť background-position (viac…)

XHTML + CSS – 6. lekcia – práca s obrázkami

Vo videonávode sa dozviete ako pridať na www stránku obrázok a tiež ako kombinovať obrázok a odkaz, čím sa docieli vytvorenie jednoduchého tlačítka. V návode je táto kombinácia vysvetľovaná na príklade jednoduchého loga stránky, ktoré slúži na návrat na domovskú stránku.

Dozviete sa ako používať tag <img />  a jeho atribúty “src”, “alt”, “title” na čo sú spomenuté atribúty dobré, a prečo sa vlastne používajú, respektíve musia používať.

Rovnako je detailne rozoberaná téma ako používať atribút “src” aby sme docielili správne fungovanie obrázku. Je vysvetľované ako lokalizovať obrázky v iných priečinkoch na serveri ako v tých kde sa nachádza index.html.

Obrázky sú veľmi frekventovanou a prakticky neodmysliteľnou súčasťou dnešného internetu. Na obyčajnej internetovej stránke sú desiatky obrázkov. Pozadie stránky, pozadia tlačidiel, logá všelijaké rôzne grafické kreácie súčasných web dizajnérov. Je veľmi vhodné uvedomiť si že obrázky v spolupráci s  odkazmi je extrémne dôležité mať v malíčku.

XHTML + CSS – 5. lekcia -Ako vložiť CSS do XHTML a úprava odkazov

V lekcii sa konečne dozviete ako na stránku vložíte formátovanie pomocou CSS. Akými spôsobmi sa CSS kód dá na stránky pridať, s ich výhodami a nevýhodami.

(viac…)

XHTML + CSS – 4. lekcia – tvorba odkazov a pochopenie ich významu

V tomto videonávode sa dozviete čo sú odkazy, kde sa používajú a kde sa s nimi v každodennom svete stretávate. V návode sa naučíte ich používať a aplikovať do vlastných projektov. Jedná sa o vytváranie odkazov na externé webové adresy, taktiež o vytváranie odkazov v rámci Vašej internetovej stránky. Rovnako aj bolo demonštrované použitie odkazov v rámci jedného XHTML dokumentu na jednoduchom a praktickom príklade.

Odkazy sú jednou z najpoužívanejších elementov v súčasnom internete. Čím viac si želáte aby bola Vaša stránka interaktívnejšia tým viac odkazov na stránkach musíte vytvoriť. Prakticky každá jedna vec na ktorú na stránke môžete kliknúť je odkaz. Áno znie to divne, odkaz, tak sme si to nazvali my slováci, ešte čudnejšie si túto značku pomenovali Angličania oni používajú pomenovanie anchor, čiže kotva, alebo upevniť, zakotviť. Na internetových stránkach je možné sa odkazovať na veľa rôznych vecí, kedysi v začiatkoch internetu tieto značky slúžili prevažne na odkazovanie sa ku zdrojom, autorom rôznych vedeckých textov a podobne. Neskôr si odkazy našli iné uplatnenie, používali, používajú sa prevažne v menu (ponukách) a slúžili, aj slúžia na navigovanie vrámci www stránky, do rôznych sekcií, najčastejšie asi domov, kontakt, o firme, naša ponuka a podobne. V súčasnom svete internetu to nie inak ako to bolo v minulosti, ale odkazy si našli a nové uplatnenia a to v smere zvýšiť interaktívnosť internetových stránok. Ved si len pozrite na čo všetko sa dá kliknúť v takom internetovom obchode, alebo facebooku, pribúdajú vyvolania udalostí čo sa má udiať po kliknutí na odkaz, čo sa má udiať keď nad odkaz prídete kurzorom myši, veľký fenomén je zmena farby pozadia, zväčšenie obrázku, otvorenie nového objeku a potvrdzovanie rôznych formulárov, správ v chatoch, zobrazovanie mini profilov a podobne a podobne a podobne…

XHTML + CSS – 3. lekcia – Formátovanie textu

3. lekcia je zameraná na formátovanie textu, ako požiť tučné písmo, kurzíva. Základné rozdiely medzi <strong>,<em> a <b>,<i> tagmi. Rovnako je v nej spomenuté ako logicky členiť text. Ako uspôsobiť stránku aby vyhľadávacie algoritmy (google, bing …) dobre chápali obsah na nej zverejňovaný.

Ako správne písať rôzne texty, časti programového kódu alebo matematické formulácie. V HTML je veľmi dôležité oddeľovať rôzne časti textu to správnych HTML značiek. Jedná sa hlavne o informácie o adresách, ako vyznačiť na stránke útržky počítačového programu, tučné písmo, kurzíva a podobne. Pre človek tento text veľmi často pochopí z kontextu, ale vyhľadávače, napríklad ako Google, Yahoo, Seznam a iné vedeli pochopiť čo sa na Vašich stránkach vlastne píše potrebujú tieto špecifické texty oddeľovať html značkami.

Spomeniem len jednoduchý príklad, človek pochopí, že sa jedná o ukážkový príklad zvýrazneného slova, ale keby slová neboli zvýraznené špeciálnymi značkami tak by tento text bol pre prehliadače iba ďalšia obyčajná veta.

Moderné vyhľadávače fungujú takmer ako ľudia, človek vidí slová “príklad” a “zvýraznené slovo” inou farbou a vyvodzujú k nim logický vzťah z kontextu vety, presne takýmto spôsobom pristupujú k zberu informácií aj prehliadače. Vo vetách nájdu takzvané kľúčové slová, z veľkej časti sú to zvýraznené slová v tagoch ako <h>, <strong>, <b> atď., tie tvoria gro ich pochopenia textu a následne si priradia povedzme pár najfrekventovanejších slov v texte. Potom keď ľudia vyhľadávajú na internete niektoré z týchto zapamätaných slov, vyhľadávač ich odkáže na Vašu stránku.

Uzavrieme to už len pár slovami, čím presnejšie označkujete Vašu stránky, tým budete ľahšie vyhľadateľný, tým budete mať väčšiu návštevnosť.

XHTML + CSS – 2. lekcia – Štruktúrovanie textu

Lekcia je venovaná titulným nadpisom <hX> (X-je číslo od 1 – 6) a ich funkciám pri tvorbe internetových stránok. Ďalej je spomenuté správanie sa tlačidla “enter” v XHTML kóde a čo jeho funkciu nahrádza.  Nájdeš v ňom aj vytvorenie jednoduchých odsekov textu a dôvody prečo sa používajú.

Úvod do XHTML

html pre itnavody.skČo je HTML?

HTML predstavuje vytvorenú skratku z anglických slov “HyperText Markup Language” čo vo voľnom preklade do slovenčiny znamená Hypertextový značkovací jazyk. Samotné slovo hypertextový znamená nelineárne (nesekvenčné) usporiadanie textu, v ktorom sú jednotlivé časti navzájom prepojené hypertextovými väzbami reprezentujúcimi najčastejšie krížové odkazy. Polopatisticky povedané je to text ktorý obsahuje špeciálne, vopred definované, značky. (viac…)

Úvod do XHTML a CSS

css code

 

css codeČo je CSS?

Možno si už niekedy počul skratku CSS v nejakom kontexte už dávnejšie, ale bez konkrétnej predstavy čo skratka CSS vlastne znamená. V tomto úvodnom návode sa Ti pokúsim vysvetliť čo tieto tri písmenka v skutočnosti predstavujú.

CSS je skratka z anglického slovného spojenia „Cascading Style Sheets“, čo má v slovenčine voľný preklad „Kaskádové štýly“. (viac…)