Honlap készítés Érdekességek
Tudod-e? Mit jelent a „www”? Wild Windows Wave World Wide Web Wide World Web
Tudod-e? Ki találta fel a webet? Tim-Berners Lee Brad Pitt Bill Gates
Tudod-e? Mikor került ki az internetre az első weboldal? 1975 1983 1991
Tudod-e? Mi írja le a weboldalak felépítését és tartalmát? FBI HTML CSI
HTML A Kezdet…
általános HTML: Hiper-Text Markup Language Kiterjesztés: htm, html Kezdőoldal: index.html
Speciális jelek < < > > & & „ " ó ó < < > > & & „ " ó ó Ó Ó ö ô ő õ szóköz © ©
Entitások
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
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>
Akkor, lássuk! <HTML> <BODY> Hello Világ! Ez Makk Marci honlapja! </BODY> </HTML>
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>
Ha van teste, legyen feje is karakterkészlet <META http-equiv=content-type content=text/html;charset=iso-8859-1> 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>
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>
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>
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
És ebből mi lesz? <u><font color=green size=8 face=„Tahoma”> Egy kis rejtvény </font> </u>
Háttérszín, szövegszín <BODY bgcolor=blue> Alapértelmezett szövegszín <BODY text=yellow>
Színek megadása Névvel Kóddal Pl.: bgcolor=red Minden névhez tartozik egy kód Pl.: bgcolor= #7af428
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: 0-255-ig 16-os számrendszerbeli kóddal: 00-FF-ig Pl.: Fehér: #FFFFFF Fekete:#000000 Piros:#FF0000
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
Színek és háttérképek Színkódok: Háttérképek lelőhelyei: http://tanjelolt.apaczai.elte.hu/radesz/ Háttérképek lelőhelyei: http://www.grsites.com/textures/ http://www.backgroundcity.com/ http://www.boogiejack.com/free_graphics.html
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>
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
Linkek, hivatkozások Pl.: <a href=„http://www.apaczai.elte.hu”> <a href=„melyik oldalra"> mire kattintsak </a> Pl.: <a href=„http://www.apaczai.elte.hu”> Ugrás az Apáczai honlapjára! </a>
Linkek hivatkozások Zenék letöltése <a href=„zene.mp3”> Töltsd le a kedvenc számom! </a>
Linkek, hivatkozások E-mail cím <a href="mailto:raeszke@gmail.com"> Küldj nekem e-mailt! </a>
Linkek hivatkozások Kép legyen a hivatkozás <a href=„http://www.apaczai.elte.hu”> <IMG SRC=„kep.jpg"> </a>
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
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
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>
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>
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!
A feladatok 1. A honlap címe: Az Oscar-díj Megoldás: <head> <title> Az Oscar-díj </title> </head>
A feladatok 2. A háttérszín: palegoldenrod 3. Az alapértelmezett betűszín: navy Megoldás: <BODY bgcolor=palegoldenrod text=navy>
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>
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>
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>
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>
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ú.
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>
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>
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>
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>
A feladatok 12. Szúrj be egy linket, ami a http://www.oscar.com honlapra mutat és Az Oscar-díj hivatalos honlapja szövegre kelljen kattintani! Megoldás: <a href="http://www.oscar.com"> Az Oscar-díj hivatalos honlapja </a>
Vége