Procvičování k MZ

Obdobné příklady v podobné náročnosti budou součástí praktické MZ.

C1 – webová prezentace firmy Ekologica

Vytvořte jednostránkovou prezentaci firmy Ekologica.

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 + horní menu

Barva pozadí #1a2f27. Výška hlavičky bude 150px., šířka 100 procent stránky.

Vlevo bude umístěno logo firmy Ekologica s proklikem na index.html.
Grafické podklady níže.

Vpravo bude umístěno horní menu s následujícími položkami:

Home: odkaz na index.html
O nás: odkaz na index.html
Certifikace: odkaz na index.html
Kontakt: odkaz na index.html

Jednotlivé položky budou řazeny vedle sebe – použijte seznam, který vhodně nastylujete pomocí CSS vlastnosti float. Jednotlivé odkazy menu budou mít bílou barvu, uppercase, bez podtržení.

2. OBSAHOVÁ ČÁST

Bude umístěna pod hlavičkou, šířka 100 procent stránky, pozadí bílá barva.

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í.

Součástí textu bude obrázek, zarovnaný doleva, odsazení 25px od okolního textu, proklik na index.html, bez orámování. Obrázek je k dispozici ve velkém rozlišení, upravte jej podle potřeby na výsledné rozměry cca 400x267px.

Grafické podklady níže.

Firma Ekologica
Ekologie a šetrnost v souladu s budoucím pokrokem a růstem. 
Naším posláním je podporovat a zvyšovat povědomí veřejnosti o ekologicky šetrných obchodních postupech prostřednictvím oceňování společností, které jsou lídry v oblasti „zelených“ obchodních modelů 
a dávají příklad ekologičtější společnosti.

Prostřednictvím certifikace ekologických podniků poskytujeme společnostem, které chtějí využít rostoucího zájmu veřejnosti o ekologické postupy, způsob, jak propagovat své vlastní ekologické úsilí a prokázat svůj zájem o blaho naší planety.

Ekologie (z řeckého: οἶκος „obydlí“ A -λογία, „nauka“) je věda, jež se zabývá popisem, analýzou a studiem vztahů mezi organismy a jejich prostředím. Jedná se o interdisciplinární obor, který využívá poznatků mnoha vědních disciplín. 

Ekologie
Zahrnuje studium interakcí organismů, které mají jak mezi sebou navzájem, tak těch, jež mají mezi jinými organismy i těmi, které mají s abiotickými složkami jejich prostředí. Ekologie bývá definována různě, mezi nejznámější patří Krebsova definice: „Ekologie je vědecké studium procesů regulujících distribuci a abundanci organismů a jejich vzájemné vztahy, a studium toho, jak tyto organismy naopak zprostředkovávají transport a transformaci energie a hmoty v biosféře (především studium struktury a funkce ekosystémů).“ „Výzkum toho, kde se organismy nacházejí, kolik se jich tam vyskytuje a proč.

3. PATIČKA

Bude umístěna pod obsahovou částí, barva na pozadí #00141c, výška 50px, šířka 100 procent stránky. Vložte copyright a zarovnejte na střed.

Možná inspirace:

GRAFICKÉ PODKLADY

C2 – webová prezentace firmy Ecofriendly

Vytvořte jednostránkovou prezentaci firmy Ecofriendly

1. HLAVIČKA + horní menu

Barva pozadí green. Výška hlavičky bude 100px., šířka 100 procent stránky.

Vlevo bude umístěno logo firmy Novatorium s proklikem na index.html.
Grafické podklady níže.

Vpravo bude umístěno horní menu s následujícími položkami:

Home: odkaz na index.html
Nabízíme: odkaz na index.html
Nákupní podmínky: odkaz na index.html
Kontakt: odkaz na index.html

2. Slideshow

Pro vytvoření slideshow využijte níže uvedený kód, který vložíte na správnou pozici do html souboru:

<!-- -------------------------------------------------------slideshow -->
 <div class="slideshow-container">
    <div class="mySlides fade"><img src="img/slideshow1.jpg"></div>
    <div class="mySlides fade"><img src="img/slideshow2.jpg"></div>
    <div class="mySlides fade"><img src="img/slideshow3.jpg"></div>
    <a class="prev" onclick="plusSlides(-1)"><</a>
    <a class="next" onclick="plusSlides(1)">></a>
 </div>
<br>
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>
<!-- -------------------------------------------------------slideshow -->

<!-- -------------------------------------------------------SKRIPT pro slideshow -->
<script>
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>

Do CSS pak vložte následující kód:

/* ----------------------------------------- SlideShow ----------------------------- */
.mySlides {display: none}
.mySlides img {width: 100%;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

3. OBSAHOVÁ ČÁST

Bude umístěna pod hlavičkou, šířka 100 procent stránky, pozadí bílá barva.

Firma Ecofriendly
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt id aliquet risus feugiat in ante metus. Suscipit tellus mauris a diam maecenas sed. Etiam erat velit scelerisque in dictum non consectetur a erat. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. Gravida dictum fusce ut placerat. Risus sed vulputate odio ut. Nulla at volutpat diam ut venenatis tellus in. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Sed nisi lacus sed viverra tellus in. Vel turpis nunc eget lorem dolor sed viverra. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Aliquet risus feugiat in ante. Nibh mauris cursus mattis molestie a.

Purus sit amet luctus venenatis lectus magna fringilla. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Tellus cras adipiscing enim eu turpis egestas pretium aenean. Tortor consequat id porta nibh venenatis cras sed felis eget. Faucibus in ornare quam viverra. Elementum tempus egestas sed sed risus pretium. Nam libero justo laoreet sit amet cursus sit amet. Mattis molestie a iaculis at erat. In ornare quam viverra orci sagittis. Faucibus purus in massa tempor nec. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. Ut porttitor leo a diam sollicitudin. Sit amet justo donec enim diam vulputate ut pharetra. Magna eget est lorem ipsum dolor sit amet consectetur. Habitant morbi tristique senectus et netus et.

3. PATIČKA

Bude umístěna pod obsahovou částí, barva na pozadí #717171, výška 75px, šířka 100 procent stránky. Vložte copyright a zarovnejte na střed.

Možná inspirace:

GRAFICKÉ PODKLADY

C3 – webová prezentace firmy Novator

Vytvořte jednostránkovou prezentaci firmy Novator

1. Hlavička

Vlevo bude umístěno logo firmy Novator 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 200px. Barva pozadí: #49898d. 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

Zdroj bude jako odkaz, barva odkazu: #49898d, tučné písmo.

Firma Novator
se zabývá umělou inteligencí a jejím využitím v praxi.

Umělá inteligence (artificial intelligence, AI) je obor informatiky zabývající se tvorbou systémů řešících komplexní úlohy jako je rozpoznávání či klasifikace, např. v oblastech zpracování obrazu (ve formě pixelů) či zpracování psaného textu či mluveného jazyka (ve formě počítačového kódu), nebo plánování či řízení na základě zpracování velkých objemů dat.[1]

Úzká umělá inteligence (Narrow Artificial Intelligence (NAI)) či „slabá AI“ odkazuje na systémy zaměřené na řešení jediné úzce vymezené úlohy. Mezi příklady NAI patří internetoví boti nebo virtuální asistent Apple nazvaný Siri.
Obecná umělá inteligence (Artificial General Intelligence (AGI)) či „silná AI“ odkazuje na systémy řešící úlohy stejně dobře nebo dokonce lépe než člověk a řeší je bez nutnosti předchozího učení jednotlivých úzce vymezených úloh. AGI spojující „lidské“ flexibilní myšlení a uvažování se super rychlým zpracováním dat by se mohla stát realitou podmíněnou úspěšným vývojem kvantových počítačů.

Zdroje: https://cs.wikipedia.org/wiki/Um%C4%9Bl%C3%A1_inteligence

3. Patička

Bude umístěna pod obsahovou částí, barva na pozadí #052e2f, výška 100px, šířka 100 procent stránky. Vložte copyright a zarovnejte na střed.

Možná inspirace:

Grafické podklady

C4 – webová prezentace firmy Gumotex

Vytvořte jednostránkovou prezentaci firmy Gumotex

1. Slideshow

V horní části stránky bude umístěno slideshow spolu s logem firmy Gumotex, které bude umístěno v levém horním rohu s proklikem na domovskou stránku index.html. Pro umístění loga v kombinaci se slideshow použijte CSS vlastnosti: position: absolute; z-index: 100;

Pro vytvoření slideshow využijte níže uvedený kód, který vložíte na správnou pozici do html souboru:

<!-- -------------------------------------------------------slideshow -->
 <div class="slideshow-container">
    <div class="mySlides fade"><img src="img/slideshow1.jpg"></div>
    <div class="mySlides fade"><img src="img/slideshow2.jpg"></div>
    <div class="mySlides fade"><img src="img/slideshow3.jpg"></div>
    <a class="prev" onclick="plusSlides(-1)"><</a>
    <a class="next" onclick="plusSlides(1)">></a>
 </div>
<!-- -------------------------------------------------------slideshow -->

<!-- -------------------------------------------------------SKRIPT pro slideshow -->
<script>
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>

Do CSS pak vložte následující kód:

/* ----------------------------------------- SlideShow ----------------------------- */
.mySlides {display: none}
.mySlides img {width: 100%;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

2. OBSAHOVÁ ČÁST

2.1. Boční menu

umístěno vlevo,
s pevnou šírkou 250px. Barva pozadí: #9a000d. 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
- Produkty: odkaz na index.html
- Eshop – čluny: 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

Jsme pevní v našich hodnotách.
Respekt jednoho k druhému i externím partnerům nás vede při každodenní práci a rozhodování.
Vzájemná komunikace a spolupráce jednotlivců i týmů je klíčem našeho úspěchu.
Vyvíjíme maximální úsilí, abychom byli kvalitním a spolehlivým producentem, obchodním partnerem a zaměstnavatelem.
Vnímáme odpovědnost vůči lidem, společnosti a přírodě. Děláme správné věci. Myslíme na budoucnost.
Inovace jsou klíčem našeho rozvoje. Stavíme na zkušenostech, jsme otevřeni změnám, příležitostem i novým poznatkům.
Usilujeme o dokonalost a provozní excelenci. Chceme se neustále zlepšovat, být nejlepší v tom, co děláme.

3. Patička

Bude umístěna pod obsahovou částí, barva na pozadí #3e4361, výška 100px, šířka 100 procent stránky. Vložte copyright a zarovnejte na střed.

Možná inspirace: