Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

Érdekességek. Tudod-e? Mit jelent a „www”? A) Wild Windows Wave B) World Wide Web C) Wide World Web.

Hasonló előadás


Az előadások a következő témára: "Érdekességek. Tudod-e? Mit jelent a „www”? A) Wild Windows Wave B) World Wide Web C) Wide World Web."— Előadás másolata:

1 Érdekességek

2 Tudod-e? Mit jelent a „www”? A) Wild Windows Wave B) World Wide Web C) Wide World Web

3 Tudod-e? Ki találta fel a webet? A) Tim-Berners Lee B) Brad Pitt C) Bill Gates

4 Tudod-e? Mikor került ki az internetre az első weboldal? A) 1975 B) 1983 C) 1991

5 Tudod-e? Mi írja le a weboldalak felépítését és tartalmát? A) FBI B) HTML C) CSI

6 A Kezdet…

7 általános HTML: Hiper-Text Markup Language Kiterjesztés: htm, html Kezdőoldal: index.html

8 Speciális jelek < < > > & & „" ó ó Ó Ó ö ô ő õ szóköz ©©

9 Entitások

10 A honlap felépítése TAG (ejtsd: teg) = címke „kacsacsőr” közé írjuk őket: nyitó: záró a weboldalra szánt szöveg formázáshoz használjuk őket

11 A TAG-ek Ide kerül minden, ami a weblaphoz tartozik Ide kerül minden, amit a weblapon látni szeretnénk

12 Akkor, lássuk! Hello Világ! Ez Makk Marci honlapja!

13 Ha van teste, legyen feje is Egy újabb fontos TAG, nem jelenik meg Ide kerül az oldal címe mezőnév pl. alkotó, létrehozó, tartalom, keresőszavak, stb.

14 Ha van teste, legyen feje is karakterkészlet alkotó kulcsszavak a keresőmotoroknak szkriptek (java, php, vb, …)

15 Egyéb TAG-ek Sortörés: (olyan, mint az enter) Vízszintes vonal: Betűk stílusai: Félkövér Dőlt Aláhúzott Címsorok (pl. címekhez) 1-es címsor 6-os címsor

16 Formázás Betűméret 4-es betűméret Betűtípus Arial betűtípus Betűszín Kék betűk

17 Mixeljünk Ezeket a formázásokat egyszerre is lehet alkalmazni Pl.: Félkövér 6-os méretű piros Verdana típusú Amelyik belül van, azt kell először lezárni Mint a matekban a zárójelek: [(4+3)*2]+7

18 És ebből mi lesz? Egy kis rejtvény

19 Háttérszín, szövegszín Háttérszín Alapértelmezett szövegszín

20 Színek megadása Névvel Pl.: bgcolor=red Kóddal Minden névhez tartozik egy kód Pl.: bgcolor= #7af428

21 Színek kikeverése Alapszínek R: red G: green B: blue Erősségük állítása: ig 16-os számrendszerbeli kóddal: 00-FF-ig Pl.: Fehér: #FFFFFF Fekete:# Piros:#FF0000

22 Háttérkép beállítása A képet az index.html mellé (ugyanabba a mappába) kell menteni

23 Színek és háttérképek Színkódok: Háttérképek lelőhelyei:

24 Igazítások Bekezdések, hosszabb szövegek igazítása balra igazított középre igazított jobbra igazított

25 Képek beszúrása Paraméterei Width, Height: szélesség, magasság Border: a kép körül lévő szegély vastagsága Title: akkor jelenik meg, ha a kép fölé visszük az egeret

26 Linkek, hivatkozások mire kattintsak Pl.: Ugrás az Apáczai honlapjára!

27 Linkek hivatkozások Zenék letöltése Töltsd le a kedvenc számom!

28 Linkek, hivatkozások cím Küldj nekem t!

29 Linkek hivatkozások Kép legyen a hivatkozás

30 Felsorolás, sorszámozás felsorolás kezdete szövegelső sor szövegmásodik sor felsorolás vége sorszámozás kezdete szövegelső sorszám szövegmásodik sorszám sorszámozás vége

31 Táblázat beszúrása 1. sor 1. cella 1. sor 2. cella 2. sor 1. cella 2. sor 2. cella 1. sor 1. cella1. sor 2. cella 2. sor 1. cella2. sor 2. cella

32 Táblázat paraméterei Width: szélesség Align: igazítás (left, center, right) Border: a szegély vastagsága Táblázat címe Pl.: Névsor …

33 Cella paraméterei Width: a cella szélessége Height: a cella magassága Align: a cellán belüli igazítás Pl.: …

34 Készítsd el az alábbi honlapot! tanjelolt.apaczai.elte.hu/radesz/oscar.html Első lépésként mentsd le a képet bradpitt.jpg néven a public_html mappába. Másodszor hozz létre egy oscar.html nevű fájlt. (jegyzettömb) Tipp: Figyelj a sortörésekre! A szöveget másolhatod a honlapról, így nem kell gépelni!

35 A feladatok 1. A honlap címe: Az Oscar-díj Megoldás: Az Oscar-díj

36 A feladatok 2. A háttérszín: palegoldenrod 3. Az alapértelmezett betűszín: navy Megoldás:

37 A feladatok 4. Az Oscar-díj: h1-es címsor és középre igazított 5. Vízszintes vonal Megoldás: Az Oscar-díj

38 A feladatok 6. A díjról: Comis Sans MS betűtípus, 5-ös méret, darkgreen színű és középre igazított Megoldás:

39 A feladatok 7. A szöveg: Tahoma betűtípus, 3-as méret és középre igazított Megoldás: Az Oscar-díj az Egyesült Államok legrangosabb filmművészeti díja, amelyet…

40 A feladatok 8. Az Oscar-díj 2009.: h2-es címsor és középre igazított Megoldás: Oscar-díj 2009.

41 A feladatok 9. Szúrj be egy táblázatot, amelynek 3 sora és 2 oszlopa van! A táblázat középre igazított és 350 képpont szélességű a szegélye 3-as vastagságú.

42 A feladatok 9. Megoldás: A legjobb film Gettó milliomos

43 A feladatok 9. Megoldás (folyt.): A legjobb férfi főszereplő Sean Penn A legjobb női főszereplő Kate Winslet

44 A feladatok 10. Neki még mindig nincs aranyszobra: Arial betűtípus, 4-es méret, #FF0000 színű, középre igazított Megoldás: Neki még mindig nincs aranyszobra :(

45 A feladatok 11. Szúrd be a bradpitt.jpg nevű képet! A szélessége 150 képpont, a magassága 200 képpont legyen és középre igazítva jelenjen meg. Megoldás:

46 A feladatok 12. Szúrj be egy linket, ami a honlapra mutat és Az Oscar-díj hivatalos honlapja szövegre kelljen kattintani! Megoldás: Az Oscar-díj hivatalos honlapja

47 Vége


Letölteni ppt "Érdekességek. Tudod-e? Mit jelent a „www”? A) Wild Windows Wave B) World Wide Web C) Wide World Web."
Google Hirdetések