Informatika1-2015/Gyakorlat4
a |
a |
||
5. sor: | 5. sor: | ||
=== 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: | A '''Linux''' terminálból hozzunk létre egy <tt>public_html</tt> 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: | 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: | 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 === | === 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ő. | 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ő. | ||
18. sor: | 18. sor: | ||
=== Szintaktikai alapok === | === 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> | |
− | + | ... tartalom | |
− | + | </tag> | |
Általában nem [https://hu.wikipedia.org/wiki/Kisbet%C5%B1-nagybet%C5%B1_%C3%A9rz%C3%A9kenys%C3%A9g case sensitive], de több szabvány is van. Egy html fájl alapvető felépítése: | Általában nem [https://hu.wikipedia.org/wiki/Kisbet%C5%B1-nagybet%C5%B1_%C3%A9rz%C3%A9kenys%C3%A9g 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: | Egyes tag-eket nem kell bezárni, vagy elég egy kacsacsőrrel írni, például: | ||
<pre> | <pre> | ||
43. sor: | 43. sor: | ||
Egyes tag-ekhez tehetünk ''attribútum''okat: | Egyes tag-ekhez tehetünk ''attribútum''okat: | ||
<pre> | <pre> | ||
− | + | <div align="center"> ... </div> | |
− | + | <img width="100" ... /> | |
</pre> | </pre> | ||
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. | 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. | ||
54. sor: | 54. sor: | ||
</pre> | </pre> | ||
== Segíts magadon == | == Segíts magadon == | ||
− | + | * [http://www.w3schools.com/html/default.asp alap leírás] | |
− | + | * [https://validator.w3.org/ validator], ezzel ugyan elég sokat lehet veszekedni, de azért néha segít is. | |
[[Informatika1-2015/Gyakorlat3|Előző gyakorlat]] - [[Informatika1-2015#Gyakorlatok|Fel]] - [[Informatika1-2015/Gyakorlat5|Következő gyakorlat]] | [[Informatika1-2015/Gyakorlat3|Előző gyakorlat]] - [[Informatika1-2015#Gyakorlatok|Fel]] - [[Informatika1-2015/Gyakorlat5|Következő gyakorlat]] |
A lap 2015. szeptember 28., 20:12-kori változata
Előző gyakorlat - Fel - Következő gyakorlat
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>
Segíts magadon
- alap leírás
- validator, ezzel ugyan elég sokat lehet veszekedni, de azért néha segít is.