Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
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
Hasonló előadás
