Vytváření Www Prezentací

850 views

Published on

This si basic html lection.

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
850
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vytváření Www Prezentací

  1. 1. VYTVÁŘENÍ WWW PREZENTACÍ
  2. 2. ROMAN VALINA roman.valina@centrum.cz
  3. 3. 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
  4. 4. 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í
  5. 5. 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ě)
  6. 6. 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
  7. 7. 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
  8. 8. 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).
  9. 9. 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)
  10. 10. 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
  11. 11. 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
  12. 12. PRVNÍ STRÁNKA <html> <head> <title>Moje první</title> </head> <body> Ahoj světe!!! </body> </html>
  13. 13. 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
  14. 14. 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).
  15. 15. 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/>
  16. 16. 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 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 &copy; , pevná mezera je &nbsp;  Poznámka se do zdroje vkládá mezi značky <!-- a --> <!-- Toto je poznámka, která se nezobrazí. -->
  17. 17. 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
  18. 18. 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
  19. 19. TAGY UPRAVUJÍCÍ TOK TEXTU  <p align=“left| right | center”></p>  Odstavec  <hr>  Vodorovná čára
  20. 20. 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í
  21. 21. 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)‫‏‬
  22. 22. TAGY UPRAVUJÍCÍ SEZNAMY  <ol>  definice očíslovaného seznamu seznamu  <ul>  definice orážkového seznamu  <li>  Položka seznamu
  23. 23. TABULKY  <table> deklarace tabulky  <tr> řádek tabulky  <td> sloupec tabulky  Atributy  Align, border collor, width,height
  24. 24. 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)‫‏‬
  25. 25. ZÁVĚREM  Tagů existuje víc  Jak zobrazit zdrojový textsránky?
  26. 26. ZDROJE  Všechny html elementy se dají najít atributy k nim apod. Jsou velmi přehledně a srozumitelně na www.jakpsatweb.cz

×