Jump to content
GSForum - Segélyvonal

Hogyan tanuljam meg a HTML nyelvet?


Gigah3rtz

Recommended Posts

kléni

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.

Ja, feltételezem ott virít az ÁSZF-ben, hogy tilos másolni, vagy csak közvetlen engedéllyel. De hát ha ő még bűnözik is, attól mi még megoldhatjuk a kód részével kapcsolatos feladványokat. :D

Link to comment
Share on other sites

payskin

Kicsit másképp fogalmaztam meg magamban (volt benne életkor, IQ, meg látógatószám), de a lényeg kb. ugyanez. De ha véletlenül nagyobb forgalmat bonyolítana az a weboldal (amit erősen kétlek),a garfield.com majd kitiltja a szerverről a francba, és akkor az is egy tanulság lesz.

Link to comment
Share on other sites

pcmester

Az normális, hogy Win10 alatt nem akar működni, de XP-n igen?

Link to comment
Share on other sites

payskin

Nem értem a kérdést. Mi van "Win10 alatt" vagy "XP-n"?

 

A weboldal egy webszerveren legyen, a webszerver lehetőleg ne legyen se Windows 10, se XP, hanem Linux. Szóval, mi nem működik?

Link to comment
Share on other sites

TheSaurida

Hacsaknem... a W10 böngészője vs. az XP alatt használt Ff vagy Chrome vagy Opera. De majd mindjárt megtudjuk a tutit.

Link to comment
Share on other sites

pcmester

Mindkét gépen Firefox van!

Link to comment
Share on other sites

payskin

Tehát, ha jól értem, van egy darab html formátumú weboldalunk (egy fájl), és azt megnézzük egy böngészőben, ami esetünkben a Firefox, és a kép nem jelenik meg Win10 alatt, míg megjelenik XP alatt?

 

Ok, nos, látatlanban nem fogom tudni megmondani, mi nem jó, muszáj lesz megmutatnod a csoda HTML-t. ;)

Link to comment
Share on other sites

pcmester

A problem az, hogy XP alatt szépen kiolvasta a dátumot és váltotta a képet, de Win10 alatt még mindig a tegnapit mutatja. Vajon mi nem akar működni?

Link to comment
Share on other sites

payskin

Megírtam a saját változatomat, és működik Windows 10 alatt.

 

<!DOCTYPE html>
<head lang="hu">
   <meta charset="utf-8">
   <title>Garfield</title>
   <style>
       html, body { height: 100%; margin: 0; padding: 0; }
       table { border-collapse: collapse; border-spacing: 0; height: 100%; margin: 0; width: 100%; }
       td { text-align: center; vertical-align: middle; }
       img { width: 900px; height: 300px; }
   </style>
</head>
<body>
   <table>
       <tr>
           <td><img id="garfield-img" src="http://garfield.com/uploads/strips/15-01-01.jpg" alt="Garfield"></td>
       </tr>
   </table>
   <script>
       var today = new Date().toJSON().slice(0,10);
       document.getElementById("garfield-img").setAttribute("src", "http://garfield.com/uploads/strips/" + today + ".jpg");
   </script>
</body>
</html>

Link to comment
Share on other sites

pcmester

Köszike. :szia:

Link to comment
Share on other sites

arpsoft

 <table>
<tr>
<td><img id="garfield-img" src="http://garfield.com/uploads/strips/15-01-01.jpg" alt="Garfield"></td>
</tr>
</table>

 

 

:oké:

Hogy mennyit mondogattuk annak idején, hogy csak ott használunk table tag-et, ahol tényleg táblázatos adatot akarunk megjeleníteni. Hát szép idők voltak, boldog idők...

Link to comment
Share on other sites

payskin

Úgy tudtam, hogy valaki bele fog kötni. Igen, jogos, nyilván production kódban nem csinálok ilyet.

 

De tessék, mutass jobbat! Szintidő: 5 perc, kb. ennyi idő alatt raktam össze, hogy leszálljon rólunk.

 

Ja, és legyen cross-browser, ha már. A flexbox még nem annyira az (most kezdtem el ismerkedni vele céges belső oldalakon, ahol előírhatom, hogy kizárólag Chrome-ot lehet használni).

 

A kép méretét végül is tudjuk, úgyhogy csinálhattam volna így is.

 

<!DOCTYPE html>
<head lang="hu">
       <meta charset="utf-8">
       <title>Garfield</title>
       <style>
               html, body { height: 100%; margin: 0; padding: 0; }
               body { position: relative; }
               img { position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -450px; width: 900px; height: 300px; }
       </style>
</head>
<body>
   <img id="garfield-img" src="http://garfield.com/uploads/strips/15-01-01.jpg" alt="Garfield">
   <script>
           var today = new Date().toJSON().slice(0,10);
           document.getElementById("garfield-img").setAttribute("src", "http://garfield.com/uploads/strips/" + today + ".jpg");
   </script>
</body>
</html>

 

De nekem ezzel is vannak fenntartásaim, arról nem is beszélve, hogy csak ebben a nagyon speciális esetben működik.

 

És akkor van még a display: table, display: table-cell, amit viszont Móka Mikinek tartok.

 

:hmm:

Link to comment
Share on other sites

arpsoft

Nem volt komoly, tudom, hogy siettél! :)

Link to comment
Share on other sites

  • 1 year later...
pcmester

Van egy form, amibe kellene a textbox alá kettő gomb:

  1. betölti a process.txt nevű fájlt a textboxba
  2. elmenti a tetbox tartalmát a process.txt fájlba

Tulajdonképpen csak egy névvel ellátott textbox és kettő gomb kellene, amiért hálás lennék, ha megmutatnátok, hogy hogyan kell... :upsz:

Link to comment
Share on other sites

kléni

Egyik művelet se a HTML-hez tartozik. A mentéshez szerveroldali program kell, így a megoldás attól függ, mit használhatsz.

 

Ha konkrétan csak a megjelenítendő elemek felépítésére vagy kíváncsi, az elég triviális:

<form action="feldolgozó" method="post">
   <texarea id="text" name="text"></teaxtarea>
   <button type="button" id="load">Betöltés</button>
   <input type="submit" name="save" id="save" value="Mentés" />
</form>

Link to comment
Share on other sites

pcmester

Ez már olyasmi, amit akarnék, de a process.txt betöltése kellene a textbox nevű tetboxba; másik gombbal pedig textbox tartalmának kiírása process.txt-be ami csak simán egy mappában van a htm oldallal.

Link to comment
Share on other sites

kléni

Én értem mit akarsz, de erre nem tudunk megoldást mondani. :) Attól függ, milyen szerveroldali programot tudsz használni. Mondjuk PHP?

Link to comment
Share on other sites

pcmester

Hát, offline html oldal van csak... :hááát:

Link to comment
Share on other sites

pcmester
Ezt találtam (Javascript alapú), kipróbáltam, de semmi se történik (Explorerben próbáltam). Tulajdonképpen kellene alá egy szerkeszthető textbox, ahol megjelenik a kiválasztott fájl és két gomb: az egyik frissíti a kijelölt fájlt a textbox tartalmával (tulajdonképpen a textbox tartalmát kimenti a fönt kijelölt fájlba); a másik pedig törli a textbox tartalmát... Remélem, érthető...
Link to comment
Share on other sites

pcmester

Firefox, de az is jó, ha Explorerben is működne...

Továbbá próbálkoztam

<button type="text" id="fileinput">txt betöltése</button>

de ez csak kiegészíti az elérési út végét ?textbox= résszel és így újratölti az oldalt.

Link to comment
Share on other sites

kléni

textbox nevű HTML tag nem létezik, valahogy másként hivatkozz rá.

 

A <button> tag type attribútuma nem lehet text. Az egy gomb, így vagy button, vagy submit lehet az értéke. Találomra ne irkálj be dolgokat, annak semmi értelme.

 

A HTML csak az oldal megjelenését írja le. Néhány műveletet tudsz Javascripttel végezni, de nem mindent. A fájl mentése épp egy olyan művelet, amit statikus oldal nem képes elvégezni. Még jó hogy, az én gépemre csak ne mentsen semmiféle fájlt egyik oldal se a háttérben. Az oldal a saját tárhelyére menthet amit akar, de ahhoz kommunikálni kell vele, és szükséges egy program, ami kezeli a párbeszédet, illetve a fájl írását. Ha te csak a saját gépeden, háttérben futó program nélkül akarnál egy fájlt lementeni, akkor a válasz: ez nem lehetséges. Ha ilyet akarsz csinálni, kell egy program, ami a kiszolgálónál fut, legyen az a saját géped vagy egy külső szerver. Erre való többek között a PHP, JavaEE, mostanában node.js, de igazából bármilyen más programnyelvben is készíthető kiszolgáló program. Ezek futtathatóak a saját gépeden is, ha megfelelően feltelepíted a keretrendszereket, eszközöket.

 

Fájlok betöltésére van mód. Azt hiszem, az AJAX is képes fájlokat beolvasni, talán a jQuery .load() függvénye épp erre van kitalálva. Amit arpsoft mutatott, az nem egy konkrét fájl tartalmát olvassa ki, hanem amit kiválaszt a felhasználó minden alkalommal. Ez nem ugyan az, mint amit fentebb írtál. :) Ennek is biztonsági okai vannak, egy ismeretlen oldal ne olvashasson ki akármit a felhasználó gépéről.

Link to comment
Share on other sites

pcmester
textbox nevű HTML tag nem létezik, valahogy másként hivatkozz rá.

:hátpersze: közben rájöttem, hogy az valójában textarea, csak én neveztem úgy...

Közben pedig már működik, amit linkeltem, a hibás én voltam, ugyanis test.js fájlnévvel hoztam létre, az oldal pedig text.js fájlt keresett...

Szóval, azt a kódot kellene úgy módosítani, hogy a megjelenítés helye egy textarea legyen, vagyis a betöltött fájl tartalma belekerüljön egy textarea elembe, amit lehet szerkeszteni...

Link to comment
Share on other sites

kléni

fileDisplayArea.innerText részt cseréld le fileDisplayArea.value -ra, mivel form elemről van szó. Az ID-ket is írd át, ahol szükséges.

Link to comment
Share on other sites

pcmester

Melyikben? .js (Java) vagy .htm?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...