Hogyan tanuljam meg a HTML nyelvet?

[pcmester]

Aha, kléni, akkor nem url (file:///e:/hh/3/moorhuhn-1.gif) hanem /moorhuhn-l.gif"/? Majd kipróbálom, és jelentkezek...

[kléni]

Nem ezt írtam.

[payskin]

Megpróbálom elmagyarázni.

 

Ezt:

 

file:///E:/hh/3/moorhuhn-l.gif

 

úgy hívják, hogy abszolút fájlhivatkozás. Na ilyet nem használunk weboldalakban, file://-t meg partíciók betűjelét főleg nem. Ezeknek egyszerűen nincs értelme egy szerveren.

 

Weboldalakban általában relatív hivatkozást használunk, ami a .html állományhoz képest határozza meg, mondjuk, egy kép helyét. Tegyük fel, van egy index.html oldal, üldögél valahol a szerveren, van mellette valahol egy kepek mappa, és abban a moorhuhn-l.gif. A képre mutató relatív hivatkozás így néz ki:

 

<img alt="Flying Moorhuhn" src="kepek/moorhuhn-l.gif">

 

Ezzel azt mondja az index.html a szervernek, hogy helló, itt vagyok én, hozzám képest a képet úgy találod meg, hogy itt van mellettem egy kepek mappa és abban van a kép.

 

Abszolút hivatkozással is meg lehet adni, ilyenkor a weboldal címéből indulunk ki:

 

<img alt="Flying Moorhuhn" src="http://www.weboldalamcime.hu/kepek/moorhuhn-l.gif">

 

Így érthető?

 

Tehát először is meg kell határoznod, hogy hol van a HTML fájl, aminek a (csodálatos) forrását bemásoltad, majd ahhoz képest kell a képhivatkozásokat beírnod.

 

file:///E:/hh/3/moorhuhn-l.gif

 

Ha, tehát, a html a hh mappában van, akkor a kép hivatkozása:

 

3/moorhuhn-l.gif

 

...és pont ezt írta kléni is.

[pcmester]

Kléni, az nem jó, amit írtál, mert ez a sor csak így lehet (ha figyeltél volna, akkor ez egy jobbról balra csúszó kép!):

<marquee behavior="scroll" direction="left"><img alt="Flying Moorhuhn" src="moorhuhn-l.gif"></marquee>

Spányik Balázs, most látom csak, hogy ugyanazt mondod, mint kléni, csak bonyolultabban...

 

Meg van! A helyes megoldás ez:

<html>

<head>

<title>text box</title>

</head>

<body style="background-color:black;">

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<marquee behavior="scroll" direction="left"><img alt="Flying Moorhuhn" src="moorhuhn-l.gif"></marquee>

<div style="text-align: center;">

<form>

<p><textarea style="background-image:url(textbox_image.png);width:402px;height:151px;"></textarea></p>

<p><button type="reset">szöveg törlése</button></p>

</form>

<p style="text-align: center;"><button onclick="Javascript:alert('Text box oldal. Készítette: Zsombor. (Csak formázatlan szöveget írhatsz a szövegmezőbe!)')" style=""background-color:white"">Info</button></p>

</div>

</body>

</html>

(Ha a textarea és a reset gomb nincs form-ban, akkor a reset gomb nincs hatással a textarea-ra! És: az az Info gomb az egy Javascript alert, ami egy felugró ablakban megjeleníti az üzenetet!)

[payskin]

Azért hagyta ki, mert

 

nincs a HTML-ben!

 

Az, hogy ennek hatására megjelenik bármi is a böngésződben, egy 94-es baromság 21 évvel későbbi maradványa. Ne használd, felejtsd el.

 

A helyes megoldás pedig már csak azért sem lehet az, amit bemásoltál, mert a helyes weboldal DOCTYPE deklarációval kezdődik, ami a tiédből hiányzik.

[pcmester]

Spányik Balázs, a valóság bizonyítja, hogy ha nincs <marqee>, akkor nem fog működni...!

[payskin]

Igazad van. Persze, hogy van a HTML-ben, használd egészséggel.

 

---

 

Mindenki másnak mondom, aki véletlenül erre téved: NINCS a HTML5 szabványban, sosem is volt, ne használjátok! Attól, hogy ma, 2015. október 8-án megjelenik ennek hatására bármi is egy böngészőben, egyáltalán nem biztos, hogy a jövőben is meg fog. Mivel ez egy nem szabványos tag, a támogatását egy kézmozdulattal bármikor kidobhatják bármelyik böngészőből. Ne építs weboldalt nem szabványos technológiákra!

 

Másrészt kevesebb zavaró/idióta dolgot hozott össze az Internet kezdeti időszaka, mint a tag. A weboldalad látogatóira tekintettel se használj soha olyan dolgot az oldaladon, ami magától mozog, animál, villog vagy hangot ad ki. Ezeket a funkciókat mindig úgy kell beépíteni (ha egyáltalán be kell), hogy mindig a látogató kezdeményezhesse a megtekintését vagy meghallgatását, ha érdekli.

[pcmester]

[kléni]

Nem véletlenül hagytam ki rengeteg dolgot. Amit mutattál, az ocsmány, ősrégi, a HTML tageket nem arra használod, amire kell, a JS és a CSS használata nem megfelelő. Amit én írtam, teljesen helyes, és csak és kizárólag az a helyes. Bármit is másolsz vissza bele a régi kódodból, attól, mert működik, még helytelen lesz. Persze a kijavított kód nem tartalmaz semmi olyat, amit nem a HTML-nek kell tartalmaznia, mert a JS feladatait a JS-ben hajtjuk végre. A style attribútum még elmegy, de további formázás a CSS-ből.

Szóval, tanuljunk egy kis HTML-t:

- Mint ahogy Balázs is írta, mindig, minden esetben DOCTYPE a legelső lépés. Nem számít, milyen kicsi az oldal, hogy magadnak készíted-e, ennek ott kell lennie.

- Természetesen utánanéztem, hogy mi a marquee tag volt jelentése. Életemben először láttam ezt a nevet. Ha te is utánanéztél volna, tudnád, hogy már két évtizede nemhasználatosnak lett nyilvánítva a tag, ami annyit jelent, hogy tilos egy napjainkban készített oldalban ezt a tagot felhasználni. Kérlek, ne próbáld meg megmagyarázni, hogy te jobban tudod, és bízz bennünk annyira, hogy ha már hozzánk fordultál segítségért, akkor nem félrebeszélünk, hanem a tapasztalatunkkal neked akarunk jobbat. Csak mert éppen neked megjelent úgy, ahogy akartad, az közel sem jelenti azt, hogy helyes, ha használod. Az animációkra a Javascript való (vagy a css). A HTML semmilyen esetben sem. Ne használd. Tanuld meg a JS-t, és írj egy scriptet, ami mozgatja a kép pozícióját. Több munka ugyan, de ha lusta vagy, egyáltalán minek írsz ide, a tanuljunk HTML-t témába?

- <p>& nbsp;</p> Ezt felejtsd el. Térköz létrehozására nem a HTML, főleg nem teljesen üres tagek valók. Erre CSS-t használj, margin/paddig-ot.

- A form-ot nem véletlenül vettem ki. A kódodban nincs lehetőség elküldeni az űrlapot, ami azt jelenti, hogy nem használod, tehát felesleges. Arról már nem is beszélve, hogy se method, se action attribútumot nem adtál neki, már másodszorra sem. Olvass utána, hogy kell használni a form-ot.

- Egy div-en belüli p, amikor mindkettőnek van text-align:center tulajdonsága, semmit sem fog csinálni, mivel már a szülő elem is rendelkezik a kívánt stílussal. Nem véletlenül használtam én sem csak egyszer.

- onclick, és bármilyen más, a JS event-eket befolyásolni kívánó attribútumokat nem használunk a HTML-ben. 20 éve ez is menő volt, de ma már csak arról tanúskodik, hogy vagy lusta vagy, vagy nem értesz hozzá, vagy szintén lusta vagy utánanézni, miért nem használjuk őket. A JS parancsokra a JS fájl való. Ha akarsz egy szöveget kiírni a gombra kattintva, azt tedd úgy, hogy a taget a HTML-ben megadod, majd hozzárendelsz a JS-ből egy evenet-et.

- A button tag type attribútumát használd. Bár tegnap nem tudtam egyértelműen kideríteni, mikor kell, általánosan elfogadott szabály, hogy minden esetben megadjuk a típust, mert a böngészőkben más lehet az alapértelmezettként megadott érték. Szerencsédre nem a form-on belülre raktad a button-t, de ha úgy tettél volna, az már elküldte volna az űrlapot.

- Feltételezem észre se vetted, de a textarea rows és cols attribútumát is kiszedtem. Egyrészt, ha raksz rá CSS formázást, amivel beállítod a méretét, ennek a kettőnek semmi haszna, másrészt a rows és cols eltérő méretet jelent egyik-másik böngészőben, ami miatt nem használjuk, hanem CSS-ben, pixelben adjuk meg a méretet, ami garantáltan ugyan annyi lesz mindenhol.

 

A képekhez meg, amit te írtál kódot legutóbb, az teljesen más, mint amit legelsőre írtál. Ha az működik, az azt jelenti, hogy más mappába raktad a képeket. Nem várhatod el, hogy ezt előre tudjuk. Ha a HTML fájl az E:/hh mappában van, a moorhuhn-l.gif fájl az E:/hh/3 mappában, a textbox_image.png pedig az E:/hh/ mappában, akkor tökéletesen ment volna. Ha ezen változtatsz, persze hogy nem fog menni, de akkor meg át kell írnod a szerint, amit Balázs magyarázott.

 

@Balázs: egyébként tényleg benne van még a HTML5 w3c doksijában is a tag.

[TheSaurida]

A weboldalad látogatóira tekintettel se használj soha olyan dolgot az oldaladon, ami magától mozog, animál, villog vagy hangot ad ki. Ezeket a funkciókat mindig úgy kell beépíteni (ha egyáltalán be kell), hogy mindig a látogató kezdeményezhesse a megtekintését vagy meghallgatását, ha érdekli.

 

Amikor 2005-ben elkezdtünk budapesti lakást keresni, vidékről, betárcsázós internettel, akkor élte fénykorát a flash az ingatlanos cégeknél. Nagy örömünkre betöltötte a több megás flash animációt, aztán a <Skip intro> lehetőséget... Jóval olcsóbb lett volna az a lakás, ha ez fordítva jön be...

[payskin]

10 évvel később, Media Markt, mert nem hülyék:

 

 

Pár hetes a kép.

 

Tanuld meg a JS-t, és írj egy scriptet, ami mozgatja a kép pozícióját.

 

Itt egy modern, szép CSS3-only megvalósítás. (Már amennyiben marquee lehet szép.) A jQuery abszolút nem kell hozzá, az csak az alatta levő gomb megnyomására formázza a szöveget.

[kléni]

A 3. példára nem hiszem, hogy a CSS képes lenne. Persze nem néztem meg, az általa írt attribútumokkal hogyan mozogna a kép.

[payskin]

Ilyet is tudott? Szentatyaúristen.

[[OP]Destroy-man]

@Kléni: Mivel CSS-be lehet írni matematikai képleteket is, így elméletileg az is megoldható, viszont itt tényleg egyszerűbb a JS.

 

Szerk.: és meg lehet írni: http://www.sitepoint...to-do-with-css/

[kléni]

Na igen, vigyázni kell az olyan kijelentésekkel, hogy valami CSS-vel nem megoldható.

[pcmester]

Tud valaki olyan kódot, amivel automatikusan megjelenne a garfield.com főoldaláról a legfrissebb képregény (az oldal közepén)? Én ezt próbáltam:

<div id="comic-hero" style="margin-bottom: 40px; margin-top: 20px;">

<h3 class="row" style="padding: 10px 0 0px; margin-top: 0;">

<div class="col-sm-7">

<h1 style="margin: 0; font-size: 20px;">November 10, 2015</h1>

</div>

<div class="col-sm-5 text-right hidden-xs">

<div class="btn-group">

<a href="http://garfield.com/comic" class="btn btn-go">Read More »</a>

</div>

</div>

</h3>

 

<a id="home_comic" style="position: relative;" href="http://garfield.com/comic" class="img-polaroid">

<img class="img-responsive center-block" style="margin: 0 auto;" src="http://garfield.com/...2015-11-10.jpg">

</a></div>

A probléma csupán annyi, hogy a képregény fájlneve mindig az aktuális dátum (pl.: 2015-11-10.jpg).

[kléni]

Ehhez kell JS vagy szerver oldali program, HTML-ben nem lesz megoldható (hacsak a garfield.com-ra feltöltve nincs egy olyan kép, ami naponta változik, de ez kétséges). Ha megvan a mai dátum, létrehozod a címet, majd beszúrod a képet.

[pcmester]

kléni, úgy tűnik, hogy nem igazán érted! Szóval, a főoldalba mindig be van szúrva egy kép (ami a friss képregény), aminek a fájlneve mindig az aznapi dátum (pl.: 2015-11-10.jpg), amit itt tárolnak: http://garfield.com/uploads/strips/, és innen kellene kóddal megjeleníteni a legfrissebb képet. Most már érthető?

[TheSaurida]

Te nem érted.

A kolléga arra gondolt, hogy a főoldalnak megnyitáskor le kell futtatnia egy kis (JS vagy más nyelvű) scriptet (programocskát), ami kinyeri a gép bugyraiból a rendszerdátumot (pl. 2015.11.10), ezt megfelelő formátumra hozza (pl.: 2015-11-10), a végére zuttyant egy ".jpg"-t, majd a kapott karakterláncot (pl.: 2015-11-10.jpg) visszaadja a főoldalnak, hogy ezt a képet emelje le a megadott weblapról.

[payskin]

Az nem jó megoldás, hogy minden reggel kézzel átírod a HTML-kódban a kép címét?

[pcmester]

Ahaa..., TheSaurida, szóval, ezeket találtam az oldalban:

• 1007.js
  
• 1009.js
  
• 1010.js
  
• aeyJhZmZpZCI6OTA5MCwic3ViYWZmaWQiOjMwMDAsInJldmVudWVzX2FmZmlk.js
  
• bloomfilter.js
  
• bloomfilter_002.js
  
• bootstrap.js
  
• ga.js
  
• gpt.js
  
• gteamqc.js
  
• gteamrs.js
  
• gtinimgtest.js
  
• itn.js
  
• jquery.js
  
• jquery_002.js
  
• jquery_003.js
  
• jquery_004.js
  
• jquery_005.js
  
• jquery_006.js
  
• json3.js
  
• json3_002.js
  
• l.js
  
• l_002.js
  
• layer.js
  
• main.js
  
• NWPLegacy_v2.js
  
• NWPLegacy_v2_002.js
  
• plugins.js
  
• preload.js
  
• SharedApp.js
  
• SharedApp_002.js
  
• z7b85.js
  

Ezek közül melyik olvassa ki a rendszerdátumot?

[payskin]

Ezek közül egyik sem. Ezek megírt JS fájlok. Egyáltalán, melyik oldalban találtad őket?

 

Itt nem az a feladat, hogy meglévő JS fájlokba írjál bármit is. Neked kell írni egy JS fájlt, amit beraksz a saját oldaladba, ami megtalálja azt az taget az oldaban, mondjuk id alapján, és az src attribútumát a napi dátumra állítja + ".jpg".

 

var today = new Date().toJSON().slice(0,10);
document.getElementById("kep-id-je").setAttribute("src", "garfield-url" + today + ".jpg");

 

Egészségedre.

---

Vazz, gyanús lett ez a fenti bemásolt kód. Megnéztem, igen, ez a Garfield.com HTML kódja 1:1-ben a napi képregény környékéről. ÁÁÁ.

 

Még egy: ez, amit csinálni akarsz, erősen sérti a netikettet: X weboldalról képet linkelni Y weboldalba, főleg copyrightos képet nagyon nem illik és nem is szabad.

[pcmester]

Köszike. :-) Azt a kódot közvetlenül az oldalam kódjába, vagy egy js fájlba tegyem?

[payskin]

Berakhatod az oldalad kódjába is, de a

[pcmester]

Köszike.