Informatics1-2017/Practice4
(Új oldal, tartalma: „== Html == We will make our own homepage today! === Creating your homepage === Using the '''Linux''' konsole create a directory named <tt>public_html</tt> in your hom…”) |
|||
| 13. sor: | 13. sor: | ||
Now we can check out our hompage at: '''math.bme.hu/~<username>'''. Check out the contents of index.html: | Now we can check out our hompage at: '''math.bme.hu/~<username>'''. Check out the contents of index.html: | ||
~/public_html$ gedit index.html | ~/public_html$ gedit index.html | ||
| − | === | + | |
| + | === Important === | ||
Every browser has a ''View source'' function. This is the raw HTML data of the site, when you open a webpage this is the first thing that gets downloaded to show you the site. | Every browser has a ''View source'' function. This is the raw HTML data of the site, when you open a webpage this is the first thing that gets downloaded to show you the site. | ||
A lap 2017. szeptember 24., 18:50-kori változata
Tartalomjegyzék |
Html
We will make our own homepage today!
Creating your homepage
Using the Linux konsole create a directory named public_html in your home directory:
$ cd ~ $ mkdir public_html $ cd public_html
~/public_html$ wget math.bme.hu/~kkovacs/sample.html ~/public_html$ mv sample.html index.html
Now we can check out our hompage at: math.bme.hu/~<username>. Check out the contents of index.html:
~/public_html$ gedit index.html
Important
Every browser has a View source function. This is the raw HTML data of the site, when you open a webpage this is the first thing that gets downloaded to show you the site.
Syntax
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.
