Informatika1-2018/Gyakorlat4

A MathWikiből
(Változatok közti eltérés)
(Új oldal, tartalma: „Előző - Fel - Következő == Html == Ezen a gyakorlaton megcsiná…”)
 
a
 
(egy szerkesztő egy közbeeső változata nincs mutatva)
1. sor: 1. sor:
 
[[Informatika1-2018/Gyakorlat3|Előző]] - [[Informatika1-2018#Gyakorlatok|Fel]] - [[Informatika1-2018/Gyakorlat5|Következő]]
 
[[Informatika1-2018/Gyakorlat3|Előző]] - [[Informatika1-2018#Gyakorlatok|Fel]] - [[Informatika1-2018/Gyakorlat5|Következő]]
  
== Html ==
+
= Html =
 
Ezen a gyakorlaton megcsináljuk a honlapunkat!
 
Ezen a gyakorlaton megcsináljuk a honlapunkat!
=== A honlapunk létrehozása ===
+
== A honlapunk létrehozása ==
 
A '''Linux''' terminálból hozzunk létre egy <tt>public_html</tt> nevű könyvtárat a home könyvtárunkban és állítsuk be a jogosultságát '''775'''-re:
 
A '''Linux''' terminálból hozzunk létre egy <tt>public_html</tt> nevű könyvtárat a home könyvtárunkban és állítsuk be a jogosultságát '''775'''-re:
 
  $ cd ~
 
  $ cd ~
10. sor: 10. sor:
 
  $ cd public_html
 
  $ cd public_html
 
Majd töltsük le a következő tartalmat:
 
Majd töltsük le a következő tartalmat:
  ~/public_html$ wget math.bme.hu/~borbely/minta.html
+
  ~/public_html$ wget http://sandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/minta.html
 
  ~/public_html$ mv minta.html index.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:
 
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
 
  ~/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 ===
 
=== Linux jogosultságok ===
70. sor: 73. sor:
 
* [https://linux.die.net/Linux-CLI/file-permissions.html manual]
 
* [https://linux.die.net/Linux-CLI/file-permissions.html manual]
  
=== Fontos ===
+
== Szintaktikai alapok ==
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 [https://hu.wikipedia.org/wiki/HTML HTML] az [https://hu.wikipedia.org/wiki/XML XML] jelölőnyelv egy fajtája, ú.n. ''tag''-ekből áll:
 
A [https://hu.wikipedia.org/wiki/HTML HTML] az [https://hu.wikipedia.org/wiki/XML XML] jelölőnyelv egy fajtája, ú.n. ''tag''-ekből áll:
 
  <tag>
 
  <tag>

A lap jelenlegi, 2018. október 2., 10:07-kori változata

Előző - Fel - Következő

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

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>
  1. Érjétek el, hogy az oldalatok címe megfelelő legyen pl. XY weboldala (a title tag tartalmát kell átírni).
  2. Írjatok a weboldalon valami köszöntő címet, pl. XY weboldala (használjátok a h1, h2, stb tag-ek egyikét).
  3. Í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.
  4. Írjatok valamilyen linkeket listába (ol, ul, vagy dl), linkek közt lehetnek hasznos linkek, mások oldalára hivatkozó linkek, stb.
  5. Rakjatok ki egy képet az oldalatokra, lehetőleg magatokról, de a gyakorlat erejéig lehet valami más kép.
  6. 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.
  7. Ellenőrizzetek az oldalatokat a validátorral, ha zöld akkor minden rendben, ha piros akkor javítsátok a hibákat.
  8. Egészítsétek még ki és szépítgessétek az oldalt ahogy gondoljátok.

Hasznos linkek

Előző - Fel - Következő

Személyes eszközök