Vytváření Www Prezentací

ROMAN VALINA
roman.valina@centrum.cz

CO NÁS ČEKÁ
 Pondělí
 Základy fungování internetu
 Co je třeba udělat abych
měl své stránky
 Jazyk HTML
 Úterý
 CSS – pokročilé formátování stránek
 Spojení HTML a CSS

CO NÁS ČEKÁ
 Středa
 Formáty obrázků
 Editování obrázků, vhodně
pro web
 Pár konkrétních fíglů jak
na CSS a HTML
 Základy javasriptu (možná)
 Webové služby pro vytváření stránek
 Dynamické generování HTML
 SEO a Webová reklama
 Čtvrtek
 Samostatná práce na vašich stránkách s mou pomocí

DOMÁCÍ ÚKOL ;)
 Rozmyslete si a nejlépe sepište, co byste chtěli
mít na svých profesních stránkách, které budete
tvořit ve čtvrtek.
 Rozmyslete si jakou by vaše stránky měli mýt
grafickou podobu. Nakreslete, najděte na
internetu, či nafoťte a doneste obrázky fotky ze
kterých budete grafickou podobu tvořit.
 Fotky v (digitální podobě)

JAK FUNGUJE INTERNET
 Napíšu-li do prohlížeče adresu
 Pomocí DNS se nalezen správný server, který
zpracovává http request)
 Server odpoví http responce ve formě html
 Můj prohlížeč HTML přeloží do odpovídající user
friendly formy

CO MUSÍM UDĚLAT, ABYCH MĚL SVÉ
VLASTÍ STRÁNKY
 Doména
• Zaregistrovat u nějakého registrátora (např: ignum.cz)‫‏‬

 WebHosting
• pronájem prostoru pro webové stránky na cizím serveru.
Pronajímatel serveru bývá označován jako poskytovatel
webhostingu (webového prostoru).
• Díky webhostingu si můžete své webové stránky umístit na
internet, aniž byste museli mít vlastní server. Ceny za
webhosting se pohybují od pár Kč až po několik tisíc Kč za
měsíc. Existuje i bezplatná varianta, tzv. freehosting.
• Za určitou formu hostingu se dá počítat i guide-web

 Html stránky

CO JE POTŘEBA
 Budete potřebovat počítač, na kterém běží alespoň
nějaký jednoduchý textový editor (ve Windows
Notepad - Poznámkový blok).
 Potřebujete webový prohlížeč. Na novějších strojích je
vždycky -- Internet Explorer (modré éčko), případně
Mozilla (dráček), Firefox (červená panda) nebo Opera
(červené Óčko), vše to je zdarma.
 Musíte mít o čem psát.
 Nepouštějte se do toho, pokud neumíte kopírovat
soubory nebo nevíte, co je adresář (složka).

CO NENÍ POTŘEBA
 V první řadě není třeba mít
připojení na Internet.
 Obejdete se i bez drahých
nebo složitých programů.
 Nemusíte umět
programovat.
 Pro základní pokusy
nemusíte nic platit (platí
se, až když chcete vlastní
doménu)

HTML – KRÁTCE Z HISTORIE
 Hyper Text Markup Language
 Původní jazyk HTML vymyslel Tim Berners-Lee
v roce 1990 spolu s koncepcí www, tedy World
Wide Webu. Tehdy to byl prostě jazyk HTML a
neměl žádné číslo verze, ačkoli by se dal označit
jako jednička.
 Má mnoho verzí (HTML, XHTML)

 Různé prohlížeče ho implementují různě, proto
bývá občas problém se zobrazením – částečně řeší
CSS

POJMY
 Html editor
 Program usnadňující psaní
html kódu
 Tag = element
 Uzavírá se do <xxx></xxx>
 „/“ slouží jako ukončení
elementu
 Atribut
 Dopnňuje a upřesňuje funkci
elementu

PRVNÍ STRÁNKA
<html>
<head>
<title>Moje první</title>
</head>
<body>
Ahoj světe!!!
</body>
</html>

JAK PSÁT NĚKTERÉ ZNAKY NA ČESKÉ
KLÁVESNICI
Znak Zkratka
< altGr + ,
> altGr + .
; Nalevo od jedničky
# altGr + X
{ altGr + B
} altGr + N
& altGr + C
@ altGr + V

TAGY
• <html>
 začíná dokument
• </html>
 končí dokument
• <head> a </head>
 začíná a končí hlavičku, která se sice nezobrazuje, ale obsahuje
některé důležité údaje, například
• <title> a </title>,
 vymezující název dokumentu (může se lišit od jména souboru)‫‏‬
• <body>
 Co je mezi <body> a </body>, se bude zobrazovat. <body> je tag,
kterým začíná vlastní tělo dokumentu (angl. body = tělo).

SEZNAM ZÁKLADNÍCH TAGŮ
• <h1>, </h1>
 vymezení nadpisu první úrovně.
 Definováno až do 6. úrovně.
• , 
 vymezení odstavce. Možná vůbec nejpoužívanější tag. Po jeho
konci prohlížeč automaticky zalomí řádek a udělá vertikální
mezeru.
• , 
 text mezi těmito tagy bude tučný.
• , 
 kurzíva
• , 
 dvojice tagů vymezující nějak odlišný text.
• 
 zalomení řádky, takzvaný měkký enter. Text po tomto tagu bude
vždy začínat na novém řádku, ale není to nový odstavec. Pozor,
tento tag je nepárový, to znamená, že žádné neexistuje! Ale
lze použít a používá se

OBECNÁ SYNTAXE HTML
 HTML má několik málo zásad, které je dobré zmínit.
 Nezáleží na velikosti písem, <body> je totéž co <BODY>
 V adresách a jménech souborů záleží na velikosti písmen, nesmějí
tam být mezery a čeština.
 Tagy, které prohlížeč nezná, jako by nebyly.
 Na začátku tagu nesmí být mezera, třeba je špatně.
 Dvě mezery po sobě (nebo víc) mají stejný význam jako jedna
mezera.
 Konec řádku ve zdroji se chápe jako mezera.
 Jména atributů je dobré dávat vždy do uvozovek, ale není to
úplně nutné, pokud uvnitř nejsou mezery. Je to ale „slušnost“.
 Speciální znaky typu © se do zdroje zadávají jako posloupnost
znaků &něco; například © , pevná mezera je  
 Poznámka se do zdroje vkládá mezi značky

OBECNÁ SYNTAXE HTML TAGU
 <xxx atribut1=“hodnota” atribut2=“hodnota”
….. > text nebo jiný tag </xxx>

 Nepárový tag 
 Začíná a ukončuje se jednou začkou

TAGY UPRAVUJÍCÍ TEXT
 tučně
 kurzíva
 podtržení
 dolní index
 horní index
 <s> přeškrtnuto
 
 size udává tzv. stupeň písma
 Barva lze udávat i v jiných formátech povíme si zítra

TAGY UPRAVUJÍCÍ TOK TEXTU
 
 Odstavec
 <hr>
 Vodorovná čára

ODKAZ
 <a href=“pokus2.html”>odkaz na pokus 2</a>

 Absolutní adresa
 Relativní adresa
 Požívanější cesta k souboru myšlená od adresáře v
němž se zobrazovaná stránka nachází

OBRÁZKY <IMG>
 src= adresa obrázku
 alt = altalternativní popis

 Width = šířka v bodech nebo procento

 Height = výška v bodech nebo procento

 Align = obtékání textu a pozice obrázku (left | right |
top | middle)‫‏‬

TAGY UPRAVUJÍCÍ SEZNAMY
 <ol>
 definice očíslovaného seznamu seznamu
 <ul>
 definice orážkového seznamu
 <li>
 Položka seznamu

TABULKY
 <table> deklarace tabulky
 <tr> řádek tabulky
 <td> sloupec tabulky

 Atributy
 Align, border collor, width,height

HLAVIČKA <HEAD>
 <title> titulek stránky
<meta>
 author = jméno autora či firmy
 description = popis stránky
 keywords = klíčová slova (pomůže vyhledávači)‫‏‬

ZÁVĚREM
 Tagů existuje víc
 Jak zobrazit zdrojový textsránky?

ZDROJE
 Všechny html elementy se dají najít atributy k nim
apod. Jsou velmi přehledně a srozumitelně na
www.jakpsatweb.cz

Vytváření Www Prezentací

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Vytváření Www Prezentací

Ähnlich wie Vytváření Www Prezentací (20)

Vytváření Www Prezentací