Tuba Honlap Tipp

Honlapkészítés tippek, trükkök tanácsok...

Reklám

Linkblog

Alap HTML

2007.07.20. 14:00 tuby smith

Először is, mi a html? Hiper Text Markup Language, vagyis hivatkozásokat leíró nyelv. Nem kell megijedni, nem kínai, bár arra is van lehetőség UTF-8-al. Úgynevezett "tag"-ek írják le a spéci dolgait, ezeket < és > közé írjuk. Az új szabvány kétfélét különböztet meg, az önálló, és amit le kell zárni. Később lesz példa.

Nézzük alapozásnak miből áll egy html fálj. Csak a lényeg: Két részből áll, fej és törzs. (füle nincs, mint a vödörnek). A fejbe az egész dokumentumra (lapra) vonatkozó dolgokat lehet leírni, a törzsben van a tartalom. indítsunk el egy wysiwyg szerkesztőt és mentsünk egy üres lapot. Íme az üres váz forrása:
<html>
<head>

</head>
<body>

</body>
</html>
Megjegyzés: aki komolyan akar foglalkozni a témával az inkább hagyja el az ilyen progikat, szerintem. Ha tényleg érteni akarod mi miért van, akkor le kell ásni az alapokig. S az ilyen szerkesztők egy csomó plusz dolgot tesznek a kódba. Aki MS Wordben mentett html-ként és a forrását nézi, az kilóméter hosszú kódot lát. Ez szerintem jó egy intranetes (belső hálós) export formátumnak, de nem wilághálóra waló warázslat, megint csak szerintem.

Mi lehet a tartalomban:
  • sima szöveg
  • speciális karakterek
Alap HTML tagok:
  • formázás
  • címsorok
  • paragrafusok
  • sortörés
  • megjegyzés
Ami miatt hiper:
  • hivatkozások
egyebek:
  • keretek
  • táblázatok
  • listák
  • formok
  • képek
  • háttér meghatározás
  • színek
Sima szöveg amit simán gépelünk, és nincs benne a < és > jel (s még egypár), ezek helyett &lt; és &gt; speciális jeleket kell használni. Ja ezt még nem írtam le, a & jel és ; között spéci karaktereket lehet írni. például a kódlapon nem szereplő betűket (áéíóöőúüű és társai)
A html formázások a teljesség igénye nékül csak a legfontosabbak:
<b>Bold=Félkövér</b> <i>Italic/nem olasz, hanem dölt betűs</i>
<u>UnderLine=Aláhúzott</u> <font color=szin>Szines betű, amiket már a CSS formázások korában már nem javaslom használni</font>

Címsorok: aki már wordben állított címsor x stílust, annak nem sokat kell magyarázni, mi ezeknek az előnye, pl lehet tartalkomjegyzéket készíteni. Nos html-ben más előnye van, amire később kitérek. A html-ben a <h1>Címsor 1</h1> -tól ... a <h6>Címsor 6</h6> lehetőségig használhatunk. Mindegyiknek van egy alapértelmezett formázása, melyet stílislapokkal meg lehet módosítani.

Paragrafusokat a <p> </p> tagokkal lehet létrehozni.

Ha egy szöveget új sorban akarunk kezdeni nem az enter billentyű a jó megoldás, mert aztnem veszi figyelembe a megjelenítésnél, hanem a <br /> tag.  Itt láthatunk egy furcsa dolgot, mégpedig a > előtti / jelet. Ez az új szabvány szerint azt jelzi, hogy a tagnak nincs lezáró tagja, egymagában álló.

Megjegyzésbe tehetünk szövegrészeket, melyek nem jelennek meg:
<!-- Ez itt megjegyzés -->

A fő kérdés: hogyan helyezzünk el linkeket?
Az alap eset: <a href="http://honlapcime">Link szövege</a>
Lehetőség van még linket elhelyezni az oldalon belül.

A keretek, vagy frame-k régebben nagy divatnak örvendtek. Mára már a használatát senki sem javasolja. Az ingyenes tárhelyszolgáltatók a felső reklámokat szokták keretbe rakni.


A táblázatok: Itt egy minta:
   
   
   

<table> <!-- táblázat -->
<tr>  <!-- sor eleje -->
<td></td> <!-- első cella-->
<td></td> <!-- második cella-->
</tr> <!-- sor vége -->
....
</table> <!-- táblázat vége -->

Régebben táblázatban oldottak meg design-elemeket, pl hasábok elrendezése, ami mára kezd kimenni a divatból.

Listák: számozatlan vagy számozott:

<ul>
    <li>lista eleme</li>
    <li>lista eleme</li>
</ul>

<ol>
    <li>számozott elem</li>
    <li>számozott elem</li>
</ol>

Formok: mindenféle bekérő mezők, ezeknek a kezelése szerintem túlmegy az alapokon.

Képek: <img src="kép elérési címe" alt="alternatív szöveg" /> Túl sok magyarázatra ez sem szorul (?). Az alternatív szöveghez egy kis magyarázat azért: Amíg a kép be nem töltődött, vagy nem tud betöltődni - pl le van tiltva, le lett törölve, karakteres a böngészőnk - addig ez a szöveg jelenik meg helyette. Valamint a keresők csak ez alapján tudják mi van a képen.

Kép mint háttér: Régen a weblap háttér megadással kimerült a háttér megadás lehetősége. A CSS formázással szinte mindennek lehet hátteret állítani, ami lehet átlátszótól, a szülő objektumtól örökölt háttéren át színes, vagy képes is. Bővebben majd a CSS részben...

Színek: A formázásoknál említettem, hogy lehet színezni is, akárcsak azt, hogy stíluslapokkal formázva szinezzünk inkább. Előljáróban annyit, hogy ez miért jó?
Ha nem tetszik a szinválasztás, könnyebb módosítani egy formázást leíró állományban, mint végignézni minden oldalt és egyenként javítani. A keresés/mindent cserél funkció nem jó, mert olyat is cserélhet amit nem szeretnénk.
Színeket hogyan adhatunk meg?
Az angol elnevezésükkel, vagy az RGB kódjukkal. Rengeteg van, úgyhogy csak néhány példa:
Red #FF0000
Green #008000
Blue #0000FF
Orange #FFA500

Hamarosan következik a CSS rejtelmei...

5 komment

Címkék: html webfejlesztés honlap fejlesztés alapismeret

A bejegyzés trackback címe:

http://tuba-honlap.blog.hu/api/trackback/id/tr87122701

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben.

Papp Máté 2007.07.26. 14:30:58

Nagyon jó kis tutorial :) Gartulálok!

Nátor János · http://kigyosihirado.fw.hu 2007.12.13. 09:00:58

Üdv!

Szeretnék tanácsot kérni arra, hogy hogyan tudnák én is megjelentetni olyan kis képet, ami a címmezőben megjelenik, mint itt a fekete kocka és benne a sárga betűk.

Üdv. Nátor János

tuby smith · http://tuba-honlap.blog.hu/ 2007.12.13. 22:53:15

Helló

A fenti BLOG ikon a
<head > részben
<link rel="icon" href=" elérési_út_a_szerveren/fájl.kit">
<link rel="shortcut icon" href=" elérési_út_a_szerveren/fájl.kit">
taggal érhető el.
A böngészők elég sok formátumot tudnak, előnyös a PNG, GIF és ICO fájlok közül használni valamit.

FreeWeb-es (és egyébb frame-s megoldású tárhelyen azonban csak a fő frame ikonja (a szolgáltatóé :-( ) jelenik meg :-(
Javaslom igényeljetek egy fizetős tárhelyet, domain névvel pl:

www.kigyosi-hirado.hu
www.kigyosihirado.hu
www.kigyos.hu

ahová át lehet költöztetni az egész lapot, vagy akár lehetőség van a megújításra :-).
Látom, statikus lapok, lehet akár tartalomkezelő rendszert is telepíteni, melynek lehet több karbantartója is.
pl. Google keresés "bv szakszervezet" -> első találat (keresőoptimalizált) , ezt a lapot tartom karban a friss hírekkel.

Remélem segítettem.
Tisztelettel
Tuba Kovács Béla

tuby smith · http://tuba-honlap.blog.hu/ 2007.12.13. 22:56:48

Nátor János írta, 2007.12.13.:

Tisztelettel köszönöm a segítséget.
Feltettem a kigyos.hu címre ez egy egyházi lap, ahol megjelenik a kép.
A következő kérdés:
Hogy lehet megoldani azt is, hogy egy beírással az összes lapon megjelenjen?
Gondolom alapba úgy, hogy mindegyikre beírom.
Üdvözlettel: Nátor János


A statikus lapoknak ez az egyik hibája, hogy igen, mindegyikbe bele kell írni.
Én is hasonló okok miatt váltottam az előbb említett lapomom E107 CMS-re.
A másik általam készített lapon egy saját fejlesztésű vázrendszer adja az alapot, ahol minden
funkcionális egység külön fájlban van (fejléc, menü, scriptek, ... lábléc) , és php kód fűzi egybe.
Ezen a weblapon időnként módosítani kellett a menüt minden fájlban, akkor mondtam azt, hogy ezt nem játszuk el minden héten, és készítettem a TNCode vázrendszert...
a tuby.extra.hu oldalon lehet róla olvasni.

Tisztelettel

Tuba Kovács Béla