26
VYTVÁŘENÍ WWW PREZENTACÍ
| Date post: | 25-Jan-2015 |
| Category: |
Education |
| Upload: | guest67fc62 |
| View: | 624 times |
| Download: | 0 times |
VYTVÁŘENÍ WWW
PREZENTACÍ
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ě.
• <p>, </p> vymezení odstavce. Možná vůbec nejpoužívanější tag. Po jeho
konci prohlížeč automaticky zalomí řádek a udělá vertikálnímezeru.
• <b>, </b> text mezi těmito tagy bude tučný.
• <i>, </i> kurzíva
• <span>, </span> dvojice tagů vymezující nějak odlišný text.
• <br> 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é </br> neexistuje! Ale lze použít a používá se <br/>
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 < br> je špatně.
Dvě mezery po sobě (nebo víc) mají stejný význam jako jednamezera.
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 posloupnostznaků &něco; například © , pevná mezera je
Poznámka se do zdroje vkládá mezi značky <!-- a --> <!-- Toto je poznámka, která se nezobrazí. -->
OBECNÁ SYNTAXE HTML TAGU
<xxx atribut1=“hodnota” atribut2=“hodnota”….. > text nebo jiný tag </xxx>
Nepárový tag <br/>
Začíná a ukončuje se jednou začkou
TAGY UPRAVUJÍCÍ TEXT
<b> tučně
<i> kurzíva
<u> podtržení
<sub> dolní index
<sup> horní index
<s> přeškrtnuto
<font color=“red“ size=“3” face=“arial”>
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
<p align=“left| right | center”></p>
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
