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

Honlap készítés Érdekességek.

Hasonló előadás


Az előadások a következő témára: "Honlap készítés Érdekességek."— Előadás másolata:

1 Honlap készítés Érdekességek

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

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

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

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

6 HTML 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ó: <blablabla> záró</blablabla> a weboldalra szánt szöveg formázáshoz használjuk őket

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

12 Akkor, lássuk! <HTML> <BODY>
Hello Világ! Ez Makk Marci honlapja! </BODY> </HTML>

13 Ha van teste, legyen feje is
Egy újabb fontos TAG, nem jelenik meg <HEAD> <TITLE> Ide kerül az oldal címe <META name="mezőnév” content="érték"> mezőnév pl. alkotó, létrehozó, tartalom, keresőszavak, stb. </TITLE> </HEAD>

14 Ha van teste, legyen feje is
karakterkészlet <META http-equiv=content-type content=text/html;charset=iso > alkotó <META content=„Gipsz Jakab" name=author> kulcsszavak a keresőmotoroknak <META content=„címszó1, címszó2" name=keywords> szkriptek (java, php, vb, …) <SCRIPT> </SCRIPT>

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

16 Formázás Betűméret Betűtípus Betűszín
<font size=4> 4-es betűméret </font> Betűtípus <font face=„Arial” > Arial betűtípus </font> Betűszín <font color=blue> Kék betűk </font>

17 Mixeljünk Ezeket a formázásokat egyszerre is lehet alkalmazni Pl.:
<b><font size=6 color=red face=„Verdana”> Félkövér 6-os méretű piros Verdana típusú </font></b> 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? <u><font color=green size=8 face=„Tahoma”> Egy kis rejtvény </font> </u>

19 Háttérszín, szövegszín
<BODY bgcolor=blue> Alapértelmezett szövegszín <BODY text=yellow>

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

21 Színek kikeverése Alapszínek Erősségük állítása: 0-255-ig
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:#000000 Piros:#FF0000

22 Háttérkép beállítása <BODY background= „hatter.jpg”>
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:
Háttérképek lelőhelyei:

24 Igazítások Bekezdések, hosszabb szövegek igazítása
<p align=left> balra igazított </p> <p align=center> középre igazított </p> <p align=right> jobbra igazított </p>

25 Képek beszúrása <IMG SRC=„kep.jpg„ width=100 height=100
border=5 title=„Kép”> 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 Pl.: <a href=„http://www.apaczai.elte.hu”>
<a href=„melyik oldalra"> mire kattintsak </a> Pl.: <a href=„ Ugrás az Apáczai honlapjára! </a>

27 Linkek hivatkozások Zenék letöltése <a href=„zene.mp3”>
Töltsd le a kedvenc számom! </a>

28 Linkek, hivatkozások E-mail cím
<a Küldj nekem t! </a>

29 Linkek hivatkozások Kép legyen a hivatkozás
<a href=„ <IMG SRC=„kep.jpg"> </a>

30 Felsorolás, sorszámozás
<ul> felsorolás kezdete <li>szöveg első sor <li>szöveg második sor </ul> felsorolás vége <ol> sorszámozás kezdete <li>szöveg első sorszám <li>szöveg második sorszám </ol> sorszámozás vége

31 Táblázat beszúrása <TABLE> <TR> </TR> </TABLE>
<TD> 1. sor 1. cella </TD> <TD> 1. sor 2. cella </TD> </TR> <TD> 2. sor 1. cella </TD> <TD> 2. sor 2. cella </TD> </TABLE> 1. sor 1. cella 1. sor 2. cella 2. sor 1. cella 2. 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 <CAPTION>Táblázat címe</CAPTION> Pl.: <table width=400 align=center border=5> <CAPTION>Névsor</CAPTION> … </table>

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.: <td width=100 height=20 align=center> </td>

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: <head>
<title> Az Oscar-díj </title> </head>

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

37 A feladatok 4. Az Oscar-díj: h1-es címsor és középre igazított
5. Vízszintes vonal Megoldás: <h1><p align=center>Az Oscar-díj</p></h1> <hr>

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: <p align=center> <font face="Comic Sans MS„ size=5 color=darkgreen> A díjról </font> </p>

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

40 A feladatok 8. Az Oscar-díj 2009.: h2-es címsor és középre igazított
Megoldás: <h2><p align=center>Oscar-díj 2009.</p></h2>

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: <table align=center width=400 border=3>
<tr> <td>A legjobb film</td> <td align=center>Gettó milliomos</td> </tr>

43 A feladatok 9. Megoldás (folyt.): <tr>
<td>A legjobb férfi főszereplő</td> <td align=center>Sean Penn</td> </tr> <td>A legjobb női főszereplő</td> <td align=center>Kate Winslet</td> </table>

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: <p align=center> <font face="Arial" size=4 color=#FF0000> Neki még mindig nincs aranyszobra :( </font> </p>

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: <p align=center> <img src="bradpitt.jpg„ width=150 height=200 > </p>

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: <a href=" Az Oscar-díj hivatalos honlapja </a>

47 Vége


Letölteni ppt "Honlap készítés Érdekességek."

Hasonló előadás


Google Hirdetések