Informatika1-2016/Gyakorlat4
(→Szintaktikai alapok) |
(→Feladatok) |
||
(egy szerkesztő 5 közbeeső változata nincs mutatva) | |||
51. sor: | 51. sor: | ||
</body> | </body> | ||
</pre> | </pre> | ||
− | |||
− | |||
− | |||
− | + | == Feladatok == | |
+ | |||
+ | A feladatok elõtt nevezzétek vissza az '''index.html'''-t '''minta.html'''-re és tiszta lappal induljatok egy új '''index.html'''-el, ezzel a html kóddal: | ||
+ | |||
+ | <!DOCTYPE html> | ||
+ | <html lang="hu"> | ||
+ | <head> | ||
+ | <meta charset="utf-8"> | ||
+ | <title> | ||
+ | Oldal neve | ||
+ | </title> | ||
+ | </head> | ||
+ | <body> | ||
+ | Weboldal. | ||
+ | </body> | ||
+ | </html> | ||
+ | |||
+ | # Érjétek el, hogy az oldalatok címe megfelelõ legyen pl. XY weboldala (a title tag tartalmát kell átírni). | ||
+ | # Írjatok a weboldalon valami köszöntõ címet, pl. XY weboldala (használjátok a h1, h2, stb tag-ek egyikét). | ||
+ | # Írjatok egy minimális önéletrajzot az oldalra, szépen formázva. Használjatok p-t, div-eket, esetleg span-t, table-t, listákat. | ||
+ | # Írjatok valamilyen linkeket listába (ol, ul, vagy dl), linkek közt lehetnek hasznos linkek, mások oldalára hivatkozó linkek, stb. | ||
+ | # Rakjatok ki egy képet az oldalatokra, lehetőleg magatokról, de a gyakorlat erejéig lehet valami más kép. | ||
+ | # Készítsetek egy másik oldalt, ezen egy táblázatba írjátok meg a jelenlegi órarendeteket. Rakjatok egy linket a fõoldalra ami erre az oldalra vezet és egy linket az órarend oldalra ami visszavezet a fõoldalra. | ||
+ | # Ellenõrizzétek az oldalatokat a [http://validator.w3.org/ validátorral], ha zöld akkor minden rendben, ha piros akkor javítsátok a hibákat. | ||
+ | # Egészítsétek még ki és ''szépítgessétek'' az oldalt ahogy gondoljátok. | ||
+ | |||
+ | == Hasznos linkek == | ||
+ | |||
+ | * [http://validator.w3.org/ validátor] | ||
+ | * [https://docs.google.com/open?id=0Bwk5mjaCfPlVaEVLZ0swU0xCU2M HTML5 Cheat Sheet] | ||
+ | * [http://www.w3schools.com/ http://www.w3schools.com/] |
A lap jelenlegi, 2016. szeptember 27., 03:03-kori változata
Tartalomjegyzék |
Html
Ezen a gyakorlaton megcsináljuk a honlapunkat!
A honlapunk létrehozása
A Linux terminálból hozzunk létre egy public_html nevű könyvtárat a home könyvtárunkban:
$ cd ~ $ mkdir public_html $ cd public_html
Majd töltsük le a következő tartalmat:
~/public_html$ wget math.bme.hu/~borbely/minta.html ~/public_html$ mv minta.html index.html
Most nézzük meg böngészőből a honlapunkat: math.bme.hu/~<username>. Nézzük meg hogy mi van az index.html-ben:
~/public_html$ gedit index.html
Fontos
Minden böngészőben van Forrás megtekintése vagy Oldal forrásának megtekintése funkció. Ezzel a nyers html oldalt láthatjuk, ez az információ töltődik le a gépünkre az oldal megtekintésekor, és ezt jeleníti meg a böngésző.
Szintaktikai alapok
A HTML az XML jelölőnyelv egy fajtája, ú.n. tag-ekből áll:
<tag> ... tartalom </tag>
Általában nem case sensitive, de több szabvány is van. Egy html fájl alapvető felépítése:
<!DOCTYPE ...> <html> <head> ... fejléc, tartalom leírók, meta-adatok </head> <body> ... maga a honlap </body> </html>
Egyes tag-eket nem kell bezárni, vagy elég egy kacsacsőrrel írni, például:
<img ...> <br/>
Nem pedig:
<img ...>XYZ</img> <br> ... </br>
Egyes tag-ekhez tehetünk attribútumokat:
<div align="center"> ... </div> <img width="100" ... />
A forráskódba tehetünk komment-eket, ezek nem jelennek meg a böngészőben, de a forrás megtekintésével láthatóak.
<body> szép szöveg <!-- kevésbé szép szöveg --> </body>
Feladatok
A feladatok elõtt nevezzétek vissza az index.html-t minta.html-re és tiszta lappal induljatok egy új index.html-el, ezzel a html kóddal:
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="utf-8"> <title> Oldal neve </title> </head> <body> Weboldal. </body> </html>
- Érjétek el, hogy az oldalatok címe megfelelõ legyen pl. XY weboldala (a title tag tartalmát kell átírni).
- Írjatok a weboldalon valami köszöntõ címet, pl. XY weboldala (használjátok a h1, h2, stb tag-ek egyikét).
- Írjatok egy minimális önéletrajzot az oldalra, szépen formázva. Használjatok p-t, div-eket, esetleg span-t, table-t, listákat.
- Írjatok valamilyen linkeket listába (ol, ul, vagy dl), linkek közt lehetnek hasznos linkek, mások oldalára hivatkozó linkek, stb.
- Rakjatok ki egy képet az oldalatokra, lehetőleg magatokról, de a gyakorlat erejéig lehet valami más kép.
- Készítsetek egy másik oldalt, ezen egy táblázatba írjátok meg a jelenlegi órarendeteket. Rakjatok egy linket a fõoldalra ami erre az oldalra vezet és egy linket az órarend oldalra ami visszavezet a fõoldalra.
- Ellenõrizzétek az oldalatokat a validátorral, ha zöld akkor minden rendben, ha piros akkor javítsátok a hibákat.
- Egészítsétek még ki és szépítgessétek az oldalt ahogy gondoljátok.