Kódovanie textu článku webovej stránky krok za krokom
Výber typu písma
Každý text nielen na webových stránkach je písaný nejakým typom písma. Typ písma (alebo aj font, druh písma) je to prvé, čo budeme riešiť. Vybrať vhodný font môže byť možno pre niekoho, kto nemá typografické vzdelanie určitý problém, ale dnes je možné na internete nájsť tisícky fontov a vybrať si ten vyhovujúci. Niektoré fonty nájdené na internete môžete bezplatne použiť na svojich webových stránkach, za iné si musíte zaplatiť.
Máte však aj inú voľbu. Môžete v najhoršom prípade použiť taký typ písma, ktorý máte nainštalovaný na svojom počítači. Riskujete však, že niektorí návštevníci vašej stránky nebudú mať taký font nainštalovaný na svojom počítači a stránka sa im zobrazí iným fontom.
V našom príklade nájdeme vhodný font na webovom sídle Google Fonts.
Adresa webového sídla: https://fonts.google.com
Vyberieme font Roboto (klikneme naň)
Vyberieme štýl Regular 300 a klikneme vpravo na + Select this style
Zo stránky v pravom panely s názvom Selected family skopírujeme tento kód:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
a vložíme ho do HTML dokumentu pod zápis: <link href="css/styly.css" rel="stylesheet">.
Potom zo stránky v pravom panely s názvom Selected family skopírujeme tento kód:
font-family: 'Roboto', sans-serif;
a vložíme ho do CSS dokumentu pod zápis: background-color: #0099ff;
Výber alebo napísanie textu článku
Keďže ide zatiaľ len o výuku, tak nebudeme písať vlastný článok, ale vyberieme už hotový napríklad nejaké časti textu z tejto stránky: tvorba-webovych-stranok.html.
Do HTML dokumentu medzi párovú značku <div id="obal"></div> vložíme párovú značku <article></ article> a medzi párovú značku <article></ article> vložíme párovú značku <h1></h1>. Do nej napíšeme tento nadpis článku: Čo je webový prehliadač a čo je webové sídlo.
Kód bude vyzerať nasledovne:
Stránku uložíme a zobrazíme ju v prehliadači. Pozadie stránky je zobrazené zatiaľ modrou farbou. Teraz túto farbu vymažeme, aby sa pozadie zobrazovalo prednastavenou bielou farbou. Treba zmazať zápis background-color: #0099ff; zo súboru štýlov. Zostal nám len žltý obdĺžnik a nenaformátovaný nadpis.
Teraz pridáme do dokumentu HTML nadpis druhej úrovne:
<h2>Čo je webový prehliadač?</h2> (tento kód zapíšeme pod značku <h1></h1>)
Poznámka:
Zápis v hlave dokumentu HTML sa už nebude meniť, preto klikneme na znak mínus pred značkou <head>, aby sme zbalili kód hlavy dokumentu HTML, aby nám nezavadzal.
Teraz pridáme prvý odsek textu pod zápis <h2></h2>:
<p>Webový prehliadač (Web browser) je softvér, ktorý umožňuje prehliadanie (prezeranie) webových stránok užívateľmi. Webové prehliadače sú napríklad Chrome, Firefox, Opera, Safari, Edge a ďalšie. Pre webový prehliadač sa používajú aj ekvivalentné výrazy ako internetový prehliadač alebo prehliadač webových stránok. V súčasnosti dokážu zobraziť webové prehliadače aj dokumenty vo formáte pdf, takže by sme mohli upresniť definíciu na webový prehliadač a prehliadač pdf dokumentov. Uvidíme aký bude ďalší vývoj prehliadačov.</p>
Kód bude vyzerať nasledovne:
Rovnakým spôsobom pridáme ďalší podnadpis <h2></h2> a ďalšie štyri odseky <p></p>:
Kód bude potom vyzerať takto:
Teraz vložíme do článku tento obrázok o rozmerov 640x480px:
Uložte si ho do adresára img vášho webového sídla (kliknite na obrázok pravým tlačidlom myši a vyberte príkaz Uložiť obrázok ako...)
Teraz napíšte tento kód (nad druhý podnadpis):
<p><img src="img/640x480px.jpg" alt="Popis obrázka"></p>
Vysvetlenie kódu:
<img> – nepárová značka slúžiaca na vloženie obrázka do stránky (nachádza sa v párovej značke pre odsek >p>>/p>)
src – atribút značky img, ktorý definuje adresu súboru obrázka
img/obrazok_640x480px.jpg – hodnota atribútu src, ktorá udáva adresu k súboru obrazok_640x480px.jpg
alt – atribút značky img používaný pre alternatívny popis obrázka
Popis obrázka – hodnota atribútu alt (treba popísať, čo je na obrázku)
Kód bude vyzerať takto:
A máme článok hotový. Avšak iba v dokumente HTML. Teraz si ho zobrazte v prehliadači a vidíte zatiaľ nenaformátovaný článok aj s obrázkom. Všimnite si, že text „pretiekol“ cez spodnú stranu žltého obdĺžnika. Preto teraz v súbore CSS vymažte zápis pre výšku obdĺžnika height: 800px; a výška žltého obdĺžnika sa prispôsobí výške textu.
Článok ešte nenaformátovaný zatiaľ nevyzerá dobre. Poďme teda na jeho úpravu pomocou štýlov – poďme ho naštýlovať (naformátovať).
Teraz si v súbore CSS naformátujeme značku <article></article>
article {
max-width: 640px;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
padding-bottom: 10px;
}
Vysvetlenie kódu:
prvé tri pravidlá boli už vysvetlené v div#obal
padding-top: 5px; – odsadenie zhora o 5 pixlov
padding-bottom: 10px; – odsadenie zdola o 10 pixlov
Teraz naformátujeme samotný text, čiže nadpis, podnadpisy a odseky:
h1 {
font-size: 30px;
margin-top: 10px;
}
h2 {
font-size: 26px;
}
p {
font-size: 18px;
}
Vysvetlenie kódu:
font-size: 30px; – vlastnosť veľkosť písma, hodnota 30 pixlov
margin-top: 10px; – vlastnosť horný okraj, hodnota 10 pixlov
font-size: 26px; – vlastnosť veľkosť písma, hodnota 26 pixlov
font-size: 18px; – vlastnosť veľkosť písma, hodnota 18 pixlov
Teraz vymažeme pravidlo background-color: #ffff99; vzťahujúce sa na selektor div#obal, aby sme sa zbavili žltej farby pozadia tohto obdĺžnika a pridáme sem ďalšie pravidlo:
border: 1px solid #cccccc;
Vysvetlenie zápisu:
border – táto vlastnosť definuje rámček
1px solid #cccccc – sú hodnoty vlastnosti rámček
1px – táto hodnota udáva šírku rámčeka v pixloch
solid – táto hodnota udáva štýl rámčeka (v tomto prípade bude rámček zobrazený plnou čiarou)
#cccccc – táto hodnota udáva farbu rámčeka
Celý kód dokumentu CSS bude vyzerať nasledovne:
...a máme článok na svojej prvej stránke hotový!!!