link: (video) http://www.youtube.com/watch?v=UYic4A1C-wY&feature=plcp (sajá

link: (video) http://www.youtube.com/watch?v=UYic4A1C-wY&feature=plcp (saját)

KÉP

Elöször is kell egy program amit inenn tudsz le tölteni

letöltés innen katt

 

meg nyitót a notpad++ ot és "fájl,fájl mentés másként,csinálsz asztalra egy mappát és mappán belül egy fájlt mentesz el index.html néven meg a fájl tipust válaszd ki hypere és mensd el. újra fájl,megnyitod amit elmentetél és irod a kezdö kódokat ha ezeket amit le irtam be irtad a notepad++ ba akor fájl mentésre katt nyisd meg a firexot vagy amid van és fájl, fájl megnyitása és amit elmentetél elöször arra katt meg nyitás és szöveg fog meg jeleni!!! a többit meg elolvasod :DDD

JÓ SZERKEZTÉST!!!!

Forrás kód megjelenítése

Minden oldal egy lemezen vagy egy szerveren el van mentve forrás kód formában. Ez a kód HTML nyelvel van írva.

Ha meg akartok tekinteni forrás kódot vagy módosítani rajta, lépjetek be a böngésző menüben: Nézet > Forrás kód (vagy View > Source, de lehet más neve is). Kinyílik egy program és lesz benne forrás kód. Ez a program leggyakoribb esetben jegyzettömb (Notepad), de lehet az teljesen más program. Próbáljatok megnézni a forrás kódot, mondjuk most rögtön.

kettő nézet egy fáljra

Ahogy látjátok, egy fáljt két külömböző típusú programal lehet megtekinteni.

  • böngészőben - ez megjelenítés
  • editorban - ez szerkesztés

Gyakorlatban a dolog úgy nézz ki, hogy az oldalt kinyitom két programban - böngészőben és szerkesztő editorban.

Átírással módosul az oldal.

Ha kód forrás kinyílt a jegyzettömbben, átírással módosíthattok az oldalt. Természetesen az oldalnak lemezen kell lennie.

Ha nem tudjátok, hogy milyen módon létrehozni lemezen oldalt, olvassátok meg Haladás kezdőknek

HTML nulladik példa

Darab HTML kód:

<b>Fett szöveg</b>, <i>szöveg kurzívval</i>. Szép, nemde?

Megjelenik böngészőben így:

Fett szöveg, szöveg kurzívval. Szép, nemde?

Jelek hegyes zárójelekben "tag"-nak hívunk és dokumentum jelentését vagy kinézetét szabályoznak.

Tip: hegyes zárójeleket a magyar billentyűzeten jobb ALT + < (í gomb) és > (y gomb) írunk.

Tagok = jelek

A HTML fájl egy szokásos szöveg borított HTML tagokkal.

  • Tagok megállapítják, hogyan fog szöveg kinézni, azaz milyen lesz a formája.
  • Minden tagot hegyes zárójelek zárják el.

Ami nincs hegyes zárójelekkel jelölve, az szöveg, amelyik megjelenik. Szimbolikusan leírva:

<tag> szöveg </tag>, <tag> és megint szöveg és <tag> és megint szöveg

Az első példa - HTML szerkezet

<html>
  <head>
    <title>Az első weboldalam </title>
  </head>

  <body>
    Az első HTML oldalam.
    És valamilyen további szöveg.
  </body>
</html>

Ezt a példát megjelenítheted a böngészőben. A színek csak jobb megértéshez vannak ott, nem fontosak. A tagok jelentése:

<html>
a dokumentum kezdete

</html>
a dokumentum befejezése

<head> és </head>
elkezdi és befejezi a fejet, amely nem jelenik meg, de tartalmazza néhány fontos paramétert, például

<title> és </title>
megadja dokumentum nevet (eltérhet a fájl névtől).

<body>
Ami <body> és a </body> között van, meg fog jelenni böngészőben. <body> egy tag, melyel kezdődik a dokumentum saját törzse (angol. body = törzs).

Ezzel a példával leírtam dokumentum alap szerkezetét. Fent említett tagoknak minden HTML dokumentumban van helye.

Ha játszani szeretnétek HTML oldallal, jó ötlet átmásolni fent megadott kódot valamilyen fájlba saját lemezre (hardiszk) és kisérletezni vele.

Páros tagok

Példából nem nehéz bekövetkezni, hogy a tagok párban szoktak lenni <valami> és </valami>.

  • A <head> fej kezdete és </head> a befejezése
  • A <body> oldal törzse kezdete és a </body> az oldal törzs befejezése
  • A <b> fett szöveg kezdete és </b> a fett szöveg befejezése

És így tovább.

Páros tagok mellet még vannak nem páros tagok, melyeknek nincsenek záró befejező tagok. De ezekből nincs olyan sok. Példák nem páros tagokról:

 

  • <img> egy kép tag és olyan mint </img> HTML-ben nem létezik.
  • <br> egy sortörés tag, de </br> nem létezik.

Némi leírás nem páros tagokról lejjebb van.

Második példa - megjelenése változtatása

<html>
<head>
  <title>A második weboldalom</title>
</head>
<body>
  <h1>Cím</h1>
  <p>Bekezdés <b>fett szöveggel </b>, s <i>kurzív</i>.
  <span style="color: red;">Piros szöveg.</span></p>
  <h2>Másodrangú cím</h2>
  <p>Bekezdés <i><b>fett kurzív szöveggel. </b></i><br>
  A szöveg sortörés után is ugyan abba a bekezdésbe tartozik.</p>
</body>
</html>

Ezt a példát is lehet megjeleníteni böngészőben. Ez itt már egy kicsit bonyolultabb de ehez agyatok van.

<h1></h1>
Elsődleges cím meghatározása.

<h2></h2>
Második szintű cím (fejezet cím, közcím). Lehet használni hat cím szintet (<h6>-ig). Megjeleníti különböző méretekben fontosság szerint.

<p></p>
Bekezdés meghatározása. Talán leghasználtabb tag. Vége mögé böngésző csinál egy törést és kihagy vertikálisan helyet.

<b></b>
Fett szöveg lesz tagok közt.

<i></i>
Kurzív.

<span></span>
Tag pár amely meghatározza különböző szöveget.

<span style="color: red;"> , </span>
Ebben az esetben a becsomagolt szövegnek a színe piros lesz. Ez az első tag, amelynek van úgynevezett attribútuma. Attribútum egy "style" és az értéke "color: red" (angol. szín: piros). Ezzel az attribútum segítségével style= lehet meghatározni szöveg megjelenítését, becsomagolt bármilyen taggal. Gyakorlatban legtöbb tagnak van valamilyen attribútuma, eddig próbáltam kímélni ezeket.

<br>
Sor törés, úgynevezett puha enter. Ez a tag után szöveg mindig következő sorban fog kezdődni, de ez nem bekezdés. Figyelem, ez a tag nem páros, ez azt jelenti, hogy nem létezik semmilyen </br>.

Most már ismeritek minden szükséges taggot szöveg szerkesztéshez.

Harmadik példa - hátterek és hivatkozások

Ebben a példában próbálom leírni két össze nem függő dolgot, már egy kicsit nehezebb.

<html>
<head>
<title>Harmadik példa, háttérszín és a hivatkozások</title>
</head>


<body style="background-color: green; color: yellow;">
<h1>Háttér és hivatkozások</h1>
<p>Egyszerű szöveg.</p>
<p>Hivatkozás a <a href="http://www.google.hu">Google-re</a>. </p>
<p><a href="pelda2.php">Hivatkozás a 2, példára.</a></p>
</body>
</html>

Jelenítsetek meg a példát böngészőben és próbáljátok ki a hivatkozás működését. Van itt nekünk egy új tag <a> és egy pár új attribútum.

<a href="cím"> </a>
Ezek a taggok közt szöveg (vagy kép) meg fog jelenni mint hivatkozásnak a szövege ("a" mint angol Anchor = hivatkozás).

href
Az "a" tag attribútum egyenlő úttal hivatkozott fájlhoz. Itt használják vagy relatív vagy abszolút címet.

abszolút cím
http://www.satöbbi.hu formában használunk. Példában Google címét használtam.

relatív cím
ha hivatkozni akarok saját fájlomra, felesleges odaírni azt a http:// és az egész utat. Legjobb az, hogyha fájl ugyanabban a könyvtárban van mint az aktuális weboldal. Ilyenkor relatívan lehet hivatkozni rá. Elég beírni csak fájl nevét és a böngésző ezt megérti (Példában ilyen módon van hivatkozva a másik fájlra pelda.php). Amennyiben a célzott fájl egy másik közeli könyvtárban tartózkodik, elég beírni href="könyvtár/fajl.html". Ha a könyvtár egyel magasabb van aktuális könyvtártól, használunk szokásszerűen két pontot.

<body style="background-color: green; color: yellow;">
egy módszer, hogyan megadni színeket a dokumentum egész törzsének.

style
<body> tag attribútuma, mely meghatározza az egész dokumentum kinézetét. Ebben az esetbe beállítja az oldal hátterét (background-color) zöld színre és a szöveg színét (color) sárga színre. Style attribútumot már az előző példában használtam fel. Lényegében már a kaszkád stílusról van szó (CSS). Kaszkád stílusok alap eszköz az oldal kinézetének a megváltoztatásához. Style attribútummal lehet megváltozni a kinézetet.

HTML általános Szintaktika

HTML nyelvnek van egy pár alapelve, melyet jó megemlíteni:

  • Betűk mérete nem lényeges, <body> ugyanaz mint a <BODY>
  • Címekben és fájlnevekben lényeges a betű mérete, nem lehet itt se betűköz se magyar ékezetek
  • Tagokat, melyeket böngésző nem ismeri fel, mintha nem léteznének
  • Tag elején nem lehet betűköz, például <br> rosszul van.
  • két betűköz egymás után (vagy több) ugyanolyan mintha csak egy lenne
  • sor vége a kódba úgy értelmezhető mint egy betűközt
  • Az attribútum neveket mindig jó idéző jelekbe rakni, de nem teljesen szükséges, ha belűl nincs betűköz
  • © típusú szimbólumokat forráskódba &valami; szólánccal írunk
  • Megjegyzés a forráskódba <!-- és --> jelek közt beillesztjük <!-- Ez itt egy megjegyzés, mely nem fog megjelenni. -->

 

Weblap látogatottság számláló:

Mai: 5
Tegnapi: 3
Heti: 20
Havi: 92
Össz.: 47 273

Látogatottság növelés
Oldal: Honlap szerkeztés
link: (video) http://www.youtube.com/watch?v=UYic4A1C-wY&feature=plcp (sajá - © 2008 - 2024 - xxxicedragonxxx.hupont.hu

A HuPont.hu ingyen adja a tárhelyet, és minden szolgáltatása a jövőben is ingyen ...

ÁSZF | Adatvédelmi Nyilatkozat

X

A honlap készítés ára 78 500 helyett MOST 0 (nulla) Ft! Tovább »