Programování webu

Programovaní webu


Základy

Základem pro tvorbu webových stránek je jazyk HTML5, který slouží pro jejich sestaveni a CSS3 ktere zase slouží pro jejich vzhledovou a i funkční upravu a je nezbýtný protože současné webové stránky sou na něm přímo závisle protože u nich odpadá možnost rozvržení stránek pomoci rámcu misto toho se použije HTML5 layout a snim CSS3,proto je nezbytné znát jak základy HTML5 a CSS3 které nyní budu probírat aby se dala vytvořit stránka jako mám ja



Na začátku je třeba vědět že webová stranka s HTML5 a CSS3 sou jen obyčejné textové soubory ktere se vytvářejí a upravuji v libovolném textovem editoru ale u HTML5 dokumentu jako soubory s příponou .html,htm a CSS3 s příponou .css


Každa wébova stránka je uložena právě v souboru s připonou .htm,.html ve kterém je vždy kod jazyka HTML5 ale ne vždy většinou je vněm vložen i další kod a často CSS co je v současnosti CSS3 co doplnuji,dále v něm může byt i kod skriptovacích jazyku a to nejčastějí JAVASCRIPT a PHP co sou programovací jazyky ktere nejsou překladané do strojově urovně (binární - spustitelný soubor) pro daný operační system ale přímo prováděné jako obsah bežného textového souboru,pro JAVASCRIPT platí že je vykonnán na straně prohlížeče pro php je třeba lokalni(mistí počítač) nebo vzdalený počítač (server) s webovou službou


Nas bude zajimat jen kod jazyka HTML5 a CSS3 prozatím



Tělo každé wébové stránky

Nyní si popíšeme jak vypadá vždy tělo každé wébové stránky v jazyku HTML5,první řádek <!DOCTYPE html> určuje že se jedná o dokument HTML5 další řádek zahajuje dokument html5 <html> nebo s atributem lang="cs-cz" či jen lang="cs" co určuje jazyk wébové stránky cs je pro čestinu pro angličtinu en atd.
další řádek <head> zahajuje hlavičku stránky je vní titulek stránky <title> nazev_titulku </title> a meta infrormace,vlozene css styly php,javascript a dalši jazyky a za tím je </head> co ukončuje hlavičku stránky
další řádek <body> zahajuje tělo stránky je vní obsah webvých stránek i css styly tím myslím CSS3 co jsou kaskádové styly třetí verze a vložené skripty php javascript a další,další řádek </body> ukončuje tělo stránky
poslední řádek </html> ukončuje wébovou stránku,html5 document 

	
	<!DOCTYPE html>
	<html lang="cs-cz">

	<head>
		<title>Titulek stranky</title>
	</head>

	<body>
	
	</body>

	</html>

Běžný obsah hlavičky každé wébové stránky

Následně proberu obsah hlavičky HTML5 dokumentu ve kterém jsou už zmíněné metainformace a css styl přibyla zde ikona v titulku stránky na prvním řádku jsou informace o popisu webové stránky name="description" s content=" " který určuje popis stránky na druhém řáku jsou informace o o obsahu wébových stránek jako klíčových slov name="keyword" s content=" " co jsou klíčová slova na třetím řádku jsou informace o autorovi webových stránek meta name="author" s content=" " kde je nazev autora na čtvrtém řádku jsou informace o kodování tzn.zobrazování znaků kterými je wébová stránka napsaná charset=" " na pátém řádku jsou informace o použítí kaskádových stylu CSS jako externi soubor,je možné css styl vložit bez type="text/css",href=" " určuje nazev externího kaskádového stylu,na šestém řádku je ikona v hlavičce s stránky kde href=" " určuje název obrázku ikony měl by to být malý obrázek jak ikona s příponou ico tak do 64 pixelu co je počet bodu na obrazovce na sedmém řádku je už probíraný titulek stránky dále uvedu že 1 až 3 řádek jsou metinformace které umožní internetovým vyhledávačům vyhledat wébové stránky,a měli by souviset s obsahem každe stránky wébu
nakonec ještě uvedu že probírané termíny jako head,title,body,href se nazývají tagy html5 jazyka a sou často párové tzn ze takto vždy vypadají <nazev_tagu>obsah</nazev_tagu> 

	
        <head>
      		  <meta name="description" content="Osobni portfolio počítačového nadšence.">
	          <meta name="keyword" content="portfolio,počítače,programování,operační systémy">
                  <meta name="author" content="David Tomek">
	          <meta charset="utf-8" />
	          <link rel="stylesheet" href="16.css" type="text/css">
	          <link rel="shortcut icon" href="ikona-pocitac.ico">
	          <title>Kontakt</title>
        </head>


HTML5 Layout - Rozvržení Obsahu Stránky

Ted proberu základ k tomu aby mohla nák webová stránka lépe vypadat než při rozvržení stránky zastaralou metodou rámců o které sem se na začátku zminoval ale ne upně to pozdějí a bude to stačit jako další bod k vytvoření webové stránky,celé rozvržení stránky a obsah je v body za ním je hlavička layoutu header vni je blokový element pro seskupení blokových elementu,tagů div ten může sloužit k seskupení a a označení kratšího nebo delšího obsahu styly zde je použit k společnému označeni loga atributem id které určuje id které je upraveno css styly a nadpisem h1 které mohou být od urovně 1 až 6 kde h1 ma největší význam pro internetové vyhledáváče a je největší a označuje hlavní část textu,nadpisy se zapisují se takto <h1>obsah nadpisu</h1> až <h6>obsah nadpisu</h6> je zde nav který označuje část navigace stránky,vněm je vytvořen neuspořádaný seznam který začíná a končí tagy ul a položky seznamu li,vnich je odkaz na další stránku <a href="stranka.html>nazev_odkazu</a> kde a href=" obsahuje nazev stránky a nazev_odkazu je název odkazu a zatím je ukončena polozka seznamu,po celkem 5 položkách seznamu je ukončen neuspořádaný seznam jak párový tag,navigace a hlavička </ul>,</nav>,</header>

po té je zde záhájení článku který je párový tag article vněm je hlavička s nadpisem header,h1 a část section co určuje sekci obsahu stránky v ni je obrázek začínajícím <img který vloží obrázek do časti obsahu atributem src="obrázek" co určuje název a cestu k obrázku obrázek,alt="popisek je text ktery se zobrazí pokud se stránka nemůže načíst class=" " přířadí obrázku třidu pod kterou sou použity css styly na danou tridu a pro obrázek který třídu využívá width=" ",height=" " nastavý velikost a šířku obrázku,style="" vkládá řádkový CSS styl do elementu-tagu,margin-left:20px" je css styl pro odsazeni 20px od leva stoho class a style je nepoviný při vkládání obrázku na stránkupak je zde nadpis h4 s margin-left:20px" a margin-top:210px co je je css styl pro odsazeni 20px od leva a 210px odshora a zaním odkaz který obsahuje mailto: který ho učuje jako kontaktni informací a ukončení sekce </section> a blokový element div který zde obsahuje třídu čistič ktera používá externí css soubor se stylem pro ukončení obtékání textu proberu pozdějí v popisu CSS stylu a ukončení člaánku </article>

následuje patička footer jako párový tag vní jsou informace o autorovi,datu vytvoření stránky a apodobné 

	

	<body>

	<header>
	<div id="logo"><h1>Tomek</h1></div>
	 <nav> 
                <ul> 
                <li><a href="index.html">Domu</a></li> 
                <li><a href="ome.html">O mne</a></li> 
                <li><a href="dovednosti.html">Dovednosti</a></li> 
                <li><a href="reference.html">Reference</a></li>
                <li> class="aktivni"><a href="kontakt.html">Kontakt</a></li> 
                </ul> 
        </nav> 

        </header>

	<article>
		<header>
		<h1>Kontakt</h1>
		</header>

		<section>
	
		<img src="email2.png" alt="email" class="vlevo" width="200" height="200"
		 style="margin-left:20px;" />
		<h4 style="margin-left:20px;margin-top:210px;">
		 Pokud mi něco chcete zdělit napište mi na email 
		<a href="mailto:emailova_adresa">emailova_adresa</a>
		</h4>
	
		</section>
		<div class="cistic"></div>
	</article>

	<footer>
	Nazev autora,rok vytvoreni atd...
	</footer>
	</body>


Zpět