Informatika1-2015/Gyakorlat4

A MathWikiből
(Változatok közti eltérés)
(Szintaktikai alapok)
 
(egy szerkesztő 8 közbeeső változata nincs mutatva)
1. sor: 1. sor:
 +
[[Informatika1-2015/Gyakorlat3|Előző gyakorlat]] - [[Informatika1-2015#Gyakorlatok|Fel]] - [[Informatika1-2015/Gyakorlat5|Következő gyakorlat]]
 +
 
== 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:
 
A '''Linux''' terminálból hozzunk létre egy <tt>public_html</tt> nevű könyvtárat a home könyvtárunkban:
  $ cd ~
+
$ cd ~
  $ mkdir public_html
+
$ mkdir public_html
  $ 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 math.bme.hu/~borbely/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:
+
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:
  math.bme.hu/~<username>
+
~/public_html$ gedit index.html
Nézzük meg hogy mi van az index.html-ben:
+
=== Fontos ===
  ~/public_html$ gedit index.html
+
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ő.
=== A ===
+
 
 +
=== 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:
 +
<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:
 +
<!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:
 +
<pre>
 +
<img ...>
 +
<br/>
 +
</pre>
 +
Nem pedig:
 +
<pre>
 +
<img ...>XYZ</img>
 +
<br> ... </br>
 +
</pre>
 +
Egyes tag-ekhez tehetünk ''attribútum''okat:
 +
<pre>
 +
<div align="center"> ... </div>
 +
<img width="100" ... />
 +
</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.
 +
<pre>
 +
<body>
 +
  szép szöveg
 +
  <!-- kevésbé szép szöveg -->
 +
</body>
 +
</pre>
 +
 
 +
== 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]]

A lap jelenlegi, 2015. október 6., 10:25-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

Előző gyakorlat - Fel - Következő gyakorlat

Személyes eszközök