Informatika1-2018/Gyakorlat4
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 és állítsuk be a jogosultságát 775-re:
$ cd ~ $ mkdir public_html $ chmod -R 755 public_html $ cd public_html
Majd töltsük le a következő tartalmat:
~/public_html$ wget http://sandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/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ő.
Linux jogosultságok
- csoportok
- superuser (su), sys admins
- owner, a fájl/könyvtár tulajdonosa, pl someone
- group, felhasználók egy részhalmaza, pl. student
- others, azok akik nincsenek az előbbi csoportban, nem bizalmas felhasználók.
- A jogok típusai:
- w: Write, módosíthat
- r: Read, olvashat
- x: eXecute, futtathat, könyvtár esetében listázhatja tartalmát.
- -: semmi
Ezeket foglalja össze az alábbi 10 karakteres jelölés:
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| type | owner | group | others | ||||||
| read | write | execute | read | write | execute | read | write | execute | |
$ ls -l ~ drwxr-xr-x 8 borbely student 4096 Aug 30 23:24 Desktop drwxr-xr-x 2 borbely student 4096 Mar 27 2012 Downloads drwxr-xr-x 2 borbely student 4096 Oct 20 2009 Drives drwx------ 2 borbely student 4096 Apr 20 10:42 mail drwxr-xr-x 7 borbely student 4096 Sep 6 13:01 public_html $ _
A public_html mappa tulajdonosa ebben az esetben borbely, csoportja student, jogai: drwxr-xr-x
- típus: directory
- saját jogok: rwx mindent csinálhat.
- más hallgatók: r-x, láthatják, de nem módosíthatják
- ezen csoporton kívüliek: r-x, ők is láthatják, de nem írhatják
Erre van egy három számjegyes jelölés is. A számjegyek balról jobbra: owner, group, others. A számok 4: read, 2: write, 1: execute, melyek összeadhatók.
Példa: /home/student/borbely/public_html jogai: 755
- owner (borbely) 7=4+2+1: read, write, execute
- group (student) 5=4+1: read, execute
- other 5=4+1: read, execute
chmod
A jogokat a chmod paranccsal állíthatjuk, Példák:
- chmod 700 ~/info_hazi: csak magamnak adok bármi jogot (persze a superuser csinálhat mindent).
- chmod 750 ~/important_work: Ebbe a mappában a csoportom tagjai beleláthatnak, de más nem. Saját magam módosíthatom is.
- chmod 754 -R ~/public_html: Az -R kapcsoló rekurzívan alkalmazza a jogokat az almappákra és a bennük lévő fájlokra.
Manual
- man chmod
- manual
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őrizzetek 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.
