Cvičení
C1 – vlastnosti písma, textu, barvy, pozadí
S využitím HTML a CSS vytvořte následující stránku, výsledek by měl co nejvíce odpovídat obrázku:
Podklady
Text:
Velikonoce
2. 4. 2023
Koledník 1
Velikonoce jsou nejvýznamnějším křesťanským svátkem, oslavou zmrtvýchvstání Ježíše Krista. Vedle toho jsou Velikonoce obdobím lidových tradic spojených s vítáním jara, které s náboženským svátkem souvisejí jen volně.
Velikonoce jsou pohyblivý svátek, datum se rok od roku mění, viz Výpočet data Velikonoc. V západní křesťanské tradici neděle Zmrtvýchvstání připadá na první neděli po prvním jarním úplňku po rovnodennosti, tedy na měsíc březen či duben.
Velikonoce kromě svého křesťanského obsahu zahrnují také lidové zvyky spojené s jarním novoročím, obnovou přírodních sil a zahájením zemědělských prací. Objevují se tak různé obyčeje a magické praktiky, které mají zajistit ochranu a plodnost. V českém prostředí je typické především obřadní umývání a polévání vodou.
Kristovo ukřižování se událo kolem roku 30 či 33 v blízkosti významného židovského svátku pesach, který je památkou vysvobození Izraelitů Mojžíšem z egyptského otroctví. Tak jako Letnice jsou tedy původně (i podle latinského názvu) svátkem židovským a do roku 325 se slavily ve stejný den jako svátek židovský.
Specifikace HTML:
Použijte standardní kodování utf-8, nadpis stránky, napojte externí css soubor default.css. Html soubor pojmenujte index.html a vložte jej podle pokynu na obvyklé místo do adresáře CSS-C1, který vytvoříte. Dbejte na vytvoření obvyklé struktury, tzn. adresář img pro adresář s obrázky apod. Dbejte na korektní kodování a validní kód.
- Pro horní část se zeleným pruhem použijte blokový element div s následující třídou:
<div class="zeleny-pruh">
...
</div>
- Pro druhou část s šedým pozadím použijte blokový element s následující třídou:
<div class="clanek"><p class="datum">...</p><div class="autor"><img src="cesta-k-img/polevani-vodou.jpg" ...><p>...</p></div><p class="pismo01">...</p><p class="pismo02">...</p><p class="pismo03">...</p><p class="pismo04">...</p></div>
Specifikace CSS:
Definujte externí stylopis default.css podle následujících pravidel, podle potřeby upravte i html soubor, aby vše odpovídalo.
body {
barva pozadí: #f4f4f4;
font písma: 'Segoe UI', Tahoma, Verdana;
}
.zeleny-pruh { /* třída zeleny-pruh */
šířka elementu: 100%;
display: flex; /* způsob zobrazení prvku, flex - zvětšování a zmenšování v rámci flexboxového layoutu */
flex-direction: column; /* způsob vyskládání položek, do sloupce */
justify-content: center; /* nastavení prostoru mezi položkami obsahu podél hlavní osy kontejneru layoutu */
align-items: center; /* definuje na kontejneru layoutu zarovnání položek na příčné ose */
výška elementu: 105px;
vnitřní horní okraj: 20px;
vnitřní spodní okraj: 30px;
barva pozadí: #08A045;
barva písma: #ffffff;
}
.zeleny-pruh h1 { /* třída zeleny-pruh, selektor h1 */
velikost písma: 40px;
tloušťka písma: bold;
vnější levý okraj: 5px;
}
.zeleny-pruh p { /* třída zeleny-pruh, selektor p */
velikost písma: 22px;
vnější horní okraj: 2px;
vnější levý okraj: 10px;
}
.telo { /* třída telo */
display: flex; /* způsob zobrazení prvku, flex - vnořené prvky budou dobře využívat volné místo */
justify-content: center; /* nastavení prostoru mezi položkami obsahu podél hlavní osy kontejneru layoutu */
}
.clanek { /* třída clanek */
vnější okraj: 10px;
vnitřní okraj: 25px;
zarovnání textu: do bloku
barva pozadí: bílá;
velikost pozadí: 100% 100%;
border-radius: 10px; /* zaoblení rohů */
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); /* stínování */
obrázek na pozadí: cesta k img: pozadi.jpg;
}
.clanek h1 { /* třída clanek, selektor h1 */
velikost písma: 24px;
barva písma: #08A045;
}
.clanek p { /* třída clanek, selektor p */
vnější horní okraj: 5px;
}
.datum { /* třída datum */
velikost písma: 12px;
barva písma: gray;
}
.autor { /* třída autor */
display: block; /* způsob zobrazení prvku, block - prvek se zobrazí jako blok, tzn. s řádkovým zlomem na konci */
width: 100%; /* šířka elementu */
velikost písma: 18px;
barva písma: #08A045;
}
.autor img { /* třída autor, selektor img */
šířka elementu: 50px;
výška elementu: 50px;
float: left; /* zarovnání elementu, vlevo */
border-radius: 50%; /* zaoblení rohů, lze dosáhnout až kruhového tvaru */
vnější pravý okraj: 10px;
}
.autor p { /* třída autor, selektor */
vnitřní horní okraj: 10px;
}
.pismo01 { /* třída pismo01 */
font písma: Times;
styl písma: kurziva;
varianta písma: kapitálky;
velikost písma: 13pt;
tloušťka písma: bold;
}
.pismo02 { /* třída pismo02 */
font písma: Arial, Verdana, Times;
styl písma: normální;
varianta písma: normální;
velikost písma: 80%;
tloušťka písma: lighter;
}
.pismo03 { /* vlastnosti pro třídu pismo03 */
font: kurzíva kapitálky tučně velikost písma / výška řádku font
/* vlastnosti musí být uvedeny v tomto pořadí: font-style font-variant font-weight font-size / line-height font-family */
}
.pismo04 { /* vlastnosti pro třídu pismo04 */
font písma: Times;
styl písma: normální;
varianta písma: normální;
velikost písma: 100%;
tloušťka písma: normální;
výška řádku: 22px;
} Obrázky:
C2 – kuchařka
Vytvoř webovou stránku s tvým oblíbeným receptem. Nastylujte a graficky ji upravte podle svého uvážení.
Recept by měl obsahovat tabulku se seznamem surovin, popis jídla a seznam nebo odstavce s jednotlivými kroky postupu. Pokud použiješ recept z Internetu, nezapomeň uvést odkaz na původní zdroj.
Pro stylování použij CSS styly, jednoduché selektory a barvy, které už znáš. Zkus použít i barvy/obrázky na pozadí + barvu na pozadí pro div, ve kterém bude např. postup receptu apod.
Vlož ilustrační obrázky – např. ze zdroje:
- https://unsplash.com/
- icons | Freepik
- Vector icons – SVG, PSD, PNG, EPS & Icon Font – Thousands of free icons (flaticon.com)
Možný vzhled pro inspiraci:
C3 – layout webu pomocí float
Layout webu, tedy jeho základní kostru často autoři specifikovali pomocí tabulky. Nyní si však ukážeme že to jde i bez nich a jaké nám to přináší výhody.
Dejme tomu, že chceme pro naše webové sídlo použít typické dvousloupcové rozložení se záhlavím a zápatím. Levý sloupec bude navigační menu, pravý bude obsahovat text stránky.
Specifikace v HTML
<body>
<div id="header">Moje webová stránka</div>
<div id="menu">Navigační menu</div>
<div id="content">Vítejte na mých stránkách</div>
<div id="footer">© 2005</div>
</body>
Specifikace v CSS
#header {
width: 560px;
height: 20px;
padding: 10px;
border: 1px solid black;
background-color: #ffffcc;
font-size: 120%;
font-weight: bold;
margin-bottom: 5px;
}
#menu {
width: 150px;
height: 300px;
border: 1px solid black;
background-color: #ccffcc;
padding: 5px;
margin: 0 5px 5px 0;
float: left;
}
#content {
height: 300px;
float: left;
width: 403px;
padding: 5px;
border: 1px solid black;
}
#footer {
width: 580px;
height: 20px;
text-align: center;
clear: both;
border: 1px solid black;
background-color: #ccccff;
}
C4 – Autoopravna
Vytvořte vlastní layout v logickém rozdělení jako v příkladě C3 pro Autoopravnu NováLepší.
1. Hlavička
V horní části, barva na pozadí dle svého uvážení. Vlevo zde bude umístěn název firmy NováLepší, vpravo bude umístěno menu s následujícími položkami:
- Home
- Naše služby
- Reference
- Kontakty
Pro menu použijte seznam ul s nastylováním jednotlivých položek pomocí float, tak aby byly umístěny vedle sebe.
2. Ilustrační obrázek
Bude umístěn pod hlavičku, využijte některých z výše odkazovaných zdrojů pro free obrázky a vyberte dle svého uvážení, případně upravte podle potřeby v některém grafickém editoru.
3. Obsahová část
Bude umístěna pod ilustračním obrázkem, bude obsahovat ilustrační text – stáhněte dle svého uvážení. Nutné naformátovat – nadpisy, odstavce, případně odrážkové seznamy a nastylovat.
4. Patička
Bude umístěna pod obsahovou částí, barva na pozadí dle svého uvážení. Vložte copyright a zarovnejte na střed.
Možná inspirace:
C5 – layout webu pomocí flexbox
Vyjdeme z rozložení ze cvičení C3, kdy jsme využili pro tvorbu layoutu vlastnost float. Ukážeme si způsob pomocí flexboxu.
Specifikace v HTML
<body>
<div id="header">Moje webová stránka</div>
<div id="kontejner">
<div id="menu">Navigační menu</div>
<div id="content">Vítejte na mých stránkách</div>
</div>
<div id="footer">© 2005</div>
</body>
Specifikace v CSS
#header {
width: 100%;
height: 20px;
border: 1px solid black;
background-color: #ffffcc;
}
#kontejner {
display: flex;
gap: 1rem;
}
#menu {
flex: none;
width: 250px;
border: 1px solid black;
background-color: #ccffcc;
}
#content {
border: 1px solid black;
flex: 1;
}
#footer {
width: 100%;
height: 20px;
text-align: center;
border: 1px solid black;
background-color: #ccccff;
}
C6 – Vrťapka
Vytvořte jednostránkovou prezentaci firmy Vrťapka.
HTML soubor musí obsahovat povinné tagy jako <title>, správné kodování stránky, je vhodné použít komentáře pro okomentování složitější části kódu apod. Pro potřebné obrázky vytvořte vlastní adresář img a dávejte pozor na relativní odkazování mezi jednotlivými soubory. Pro CSS použijte jeden externí soubor odkazovaný z hlavičky html souboru.
1. Hlavička
Vlevo bude umístěno logo firmy Vrťapka s proklikem na index.html. Na pozadí bude umístěn ilustrační obrázek. Výška hlavičky bude 300px., šířka 100 procent stránky. Grafické podklady níže.
2. Obsahová část
2.1. Boční menu
- umístěno vlevo,
- s pevnou šírkou 250px. Barva pozadí: #055d70. Bude obsahovat jednotlivé položky měnu. Použijte seznam, který vhodně nastylujete pomocí CSS vlastností. Jednotlivé položky budou obsahovat odkazy:
- Home: odkaz na index.html
- Služby: odkaz na index.html
- Reference: odkaz na index.html
- Kontakty: odkaz na index.html
2.2. Obsahová část
- umístěna vedle bočního menu,
- s pružnou šířkou, bude zabírat zbytek stránky
Vložte následující text a formátujte jej dle typografických pravidel. Využijte alespoň jeden tag pro nadpis úrovně 1, pro úroveň 2, pro odstavce, důležité informace zdůrazněte pomocí odpovídajícího tagu, využijte seznam s klasickými odrážkami. Jednotlivé HTML tagy nastylujte pomocí CSS dle svého uvážení.
Firma Vrťapka
Vážení zákazníci,
Představujeme Vám nový katalog čalouněných výrobků značky Böhm, které pro Vás v Jihlavě vytváříme s radostí již od roku 1993.
Při výrobě našich produktů klademe důraz na dokonalou funkčnost, pohodlné sezení a špičkový design. Vysoká kvalita a precizní řemeslné provedení každého detailu je pro nás samozřejmostí.
K výrobě používáme výhradně kvalitní, ekologicky a zdravotně nezávadné materiály. Široká kolekce našich produktů plně uspokojí jak zájemce o funkční a praktický čalouněný nábytek, tak i zákazníky, kteří preferují individuální provedení nebo nápaditý design, nesoucí prvky luxusu. Naše výroba má zakázkový charakter a ke každé zakázce volíme osobní přístup.
Výrobky z naší kolekce:
- upravujeme podle individuálních požadavků zákazníků,
- umožňujeme volný výběr potahových materiálů,
- vyrábíme také atypický čalouněný nábytek určený do soukromých i veřejných prostor.
Naše firma se může pyšnit řadou prestižních ocenění a spoluprací na velkých projektech, spojených se jmény významných architektů a designérů.3. Patička
Bude umístěna pod obsahovou částí, barva na pozadí #00141c, výška 100px, šířka 100 procent stránky. Vložte copyright a zarovnejte na střed.
Možná inspirace:
Grafické podklady
Více příkladů: