Informatika1-2016/Gyakorlat4

A MathWikiből
(Változatok közti eltérés)
(Új oldal, tartalma: „== Html == Ezen a gyakorlaton megcsináljuk a honlapunkat! === A honlapunk létrehozása === A '''Linux''' terminálból hozzunk létre egy <tt>public_html</tt> nevű k…”)
 
(Feladatok)
 
(2 szerkesztő 6 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., 02: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>
  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õrizzétek 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

Személyes eszközök