HTML-ben képet beilleszteni - Laptörténet

Hogyankell, 2020. szeptember 10., 17:06-n

2020-09-10T17:06:04Z

Hogyankell: Visszaállítottam a lap korábbi változatát: 31.46.249.88 (vita) szerkesztéséről Hogyankell szerkesztésére

2020-09-10T17:05:49Z

Visszaállítottam a lap korábbi változatát: 31.46.249.88 (vita) szerkesztéséről Hogyankell szerkesztésére

31.46.249.88: /* Kapcsolódó források, hivatkozások */

2020-09-10T09:24:21Z

‎Kapcsolódó források, hivatkozások

Hogyankell: Visszaállítottam a lap korábbi változatát: 176.241.20.181 (vita) szerkesztéséről Bianka szerkesztésére

2017-06-13T15:32:57Z

Visszaállítottam a lap korábbi változatát: 176.241.20.181 (vita) szerkesztéséről Bianka szerkesztésére

176.241.20.181: /* Lépések */

2017-06-11T09:17:43Z

‎Lépések

Bianka: /* Lépések */

2013-09-19T12:58:04Z

‎Lépések

Bianka: /* Lépések */

2013-09-19T12:46:54Z

‎Lépések

Bianka: /* Hogyan kell {{PAGENAME}}? */

2013-09-19T12:43:57Z

‎Hogyan kell {{PAGENAME}}?

Bianka: /* Hogyan kell {{PAGENAME}}? */

2013-09-19T12:37:34Z

‎Hogyan kell {{PAGENAME}}?

Bianka: Új oldal, tartalma: „== Hogyan kell {{PAGENAME}}? == Számos megoldás létezik arra, hogy képet illesszünk be weboldalunkra. Az alábbiakban bemutatjuk, milyen kódrészletet kell beillesz…”

2013-09-19T12:33:14Z

Új oldal, tartalma: „== Hogyan kell {{PAGENAME}}? == Számos megoldás létezik arra, hogy képet illesszünk be weboldalunkra. Az alábbiakban bemutatjuk, milyen kódrészletet kell beillesz…”

Új lap

== Hogyan kell {{PAGENAME}}? ==

Számos megoldás létezik arra, hogy képet illesszünk be weboldalunkra. Az alábbiakban bemutatjuk, milyen kódrészletet kell beilleszteni ahhoz, hogy képet jelenítsünk meg a honlapon.

== Lépések ==
# Döntsük el, hogy hogyan szeretnénk beilleszteni a képet!
## Egy link jelenjen meg az oldalon, és ha rákattintunk, nyíljon meg a kép.
## A kép önmagában jelenjen meg az oldalon.
## Egy kiskép jelenjen meg az oldalon, amire, ha rákattintunk, a nagy kép jelenik meg.
# A kép a háttérben jelenjen meg.
# Ha azt szeretnénk, hogy egy link jelenjen meg az oldalon, és ha rákattintunk, nyíljon meg a kép, a következő kódrészletet kell beillesztenünk: <a href=”Susan.jpg”>Susan</a>. Ebben az esetben a képnek fent kell lenni a szerveren Susan.jpg névvel ellátva. Ha ezt illesztjük be, akkor a Susan név fog megjelenni a szövegben linkesítve, amit, ha lekattintunk, megnyílik a Susan.jpg kép.
# Amennyiben csak a képet szeretnénk önmagában megjeleníteni az oldalon, a következő kód részlettel tudjuk megtenni. <img src=”Susan.jpg” height=”680” width=”500” alt=”Susan B.”/> Ebben az esetben ugyanúgy a Susan.jpg kép fog megjelenni az oldalon, melynek ugyanazon a szerveren kell lennie, amelyen a weboldal is található. A height=’680” és a width=”500” pedig azt határozza meg, hogy 500 pixel széles és 680 pixel magas lesz a kép mérete az oldalon. Az alt= után írt szöveg pedig az lesz, ami abban az esetben olvasható, amennyiben a kép nem tud megjelenni valami oknál fogva.
# Ha szeretnénk, hogy egy kiskép jelenjen meg, amire, ha rákattintunk, megnyílik a nagy kép is, akkor a következő kódrészlet beszúrására lesz szükségünk. <a href=”Anna.jpg><img src=Anna_kicsi.jpg height=”80” width=”80” alt=”Anna”/> </a> Ebben az esetben az első Anna.jpg kép a nagy változat, ami akkor jelenik meg, ha a kicsire rákattintunk. Az Anna_kicsi.jpg pedig az a kép, ami alapból megjelenik az oldalon. A magassági és szélességi paraméterek, illetve a felirat, ami akkor jelenik meg, ha nem töltődik be a kép, a kis képhez tartozik. Természetesen ebben az esetben is mindkét képnek a szerveren kell lennie.
# Ha azt választjuk, hogy egy kép legyen a háttere a weboldalunknak, akkor azt a következőképpen adhatjuk meg: body{background-image:”part.jpg”;} a formázást tartalmazó kódrészletben. Ez esetben a part.jpg című kép lesz a forráskód body részében található szöveg háttere.

== Tippek ==
* A kép vízszintes és függőleges elhelyezését az align paranccsal lehet módosítani.
* Hogyan ellenőrizhetjük, hogy helyes –e a megadott kód? A HTML Validator segítségével többféle módon is ellenőrizhetjük egy HTML kód helyességét.
** Bemásoljuk a weboldal URL-jét, és az megmutatja a kódban lévő hibákat.
** Ha még nincs kész az oldal, fájlként is feltölthetjük a kódot, a validator így is leellenőrzi.
** Vagy egyszerűen csak másold be a kódrészletet, amit ellenőrizni szeretnél pl. egy felsorolást!

== Amire szükséged lehet ==
* számítógép
* alap HTML ismeretek

== Figyelmeztetések ==
* Minden parancsot tiszta kisbetűvel kell megadni.
* Minden taget be kell zárni, nem lehet befejezetlen tag a HTML kódban.
* Nem lehetnek átfedések a tagekben: pl. <head> <title> </head> </title> - ha egy taget egy másikon belül nyitottunk meg, akkor be kell zárnunk, még mielőtt az először megkezdettet bezárnánk.

== Kapcsolódó források, hivatkozások ==
* [http://www.sakkom.hu/blog A SAKKOM Interaktív online marketing + pr ügynökség blogja]

[[Kategória:Internet]]

@@ 10. sor: / 10. sor: @@
 ## A kép a háttérben jelenjen meg.
 # '''Ha azt szeretnénk, hogy egy link jelenjen meg az oldalon, és ha rákattintunk, nyíljon meg a kép, a következő kódrészletet kell beillesztenünk:''' <a href=”Susan.jpg”>Susan</a>. Ebben az esetben a képnek fent kell lenni a szerveren Susan.jpg névvel ellátva. Ha ezt illesztjük be, akkor a Susan név fog megjelenni a szövegben linkesítve, amit, ha lekattintunk, megnyílik a Susan.jpg kép.
-# '''Amennyiben csak a képet szeretnénk önmagában megjeleníteni az oldalon, a következő kód részlettel tudjuk megtenni.'''  <img src=”Susan.jpg” height=”680” width=”500” alt=”Susan B.”/> Ebben az esetben ugyanúgy a Susan.jpg  kép fog megjelenni az oldalon, melynek ugyanazon a szerveren kell lennie, amelyen a weboldal is található. A height=’680” és a width=”500” pedig azt határozza meg, hogy 500 pixel széles és 680 pixel magas lesz a kép mérete az oldalon. Az alt= után írt szöveg pedig az lesz, ami abban az esetben olvasható, amennyiben a kép nem tud megjelenni valami oknál fogva.
+# '''Amennyiben csak a képet szeretnénk önmagában megjeleníteni az oldalon, a következő kódrészlettel tudjuk megtenni.'''  <img src=”Susan.jpg” height=”680” width=”500” alt=”Susan B.”/> Ebben az esetben ugyanúgy a Susan.jpg  kép fog megjelenni az oldalon, melynek ugyanazon a szerveren kell lennie, amelyen a weboldal is található. A height=’680” és a width=”500” pedig azt határozza meg, hogy 500 pixel széles és 680 pixel magas lesz a kép mérete az oldalon. Az alt= után írt szöveg pedig az lesz, ami abban az esetben olvasható, amennyiben a kép nem tud megjelenni valami oknál fogva.
 # '''Ha szeretnénk, hogy egy kis kép jelenjen meg, amire, ha rákattintunk, megnyílik a nagy kép is, akkor a következő kódrészlet beszúrására lesz szükségünk.''' <a href=”Anna.jpg><img src=Anna_kicsi.jpg height=”80”  width=”80” alt=”Anna”/> </a> Ebben az esetben az első Anna.jpg kép a nagy változat, ami akkor jelenik meg, ha a kicsire rákattintunk. Az Anna_kicsi.jpg pedig az a kép, ami alapból megjelenik az oldalon. A magassági és szélességi paraméterek, illetve a felirat, ami akkor jelenik meg, ha nem töltődik be a kép, a kis képhez tartozik. Természetesen ebben az esetben is mindkét képnek a szerveren kell lennie.
 # '''Ha azt választjuk, hogy egy kép legyen a háttere a weboldalunknak, akkor azt a következőképpen adhatjuk meg:'''  body{background-image:”part.jpg”;} a formázást tartalmazó kódrészletben. Ez esetben a part.jpg című kép lesz a forráskód body részében található szöveg háttere.

@@ 1. sor: / 1. sor: @@
 == Hogyan kell {{PAGENAME}}? ==
-[[Fájl:HTML_kep.jpg]]Számos megoldás létezik arra, hogy képet illesszünk be weboldalunkra. Az alábbiakban bemutatjuk, milyen kódrészletet kell beilleszteni ahhoz, hogy képet jelenítsünk meg a honlapon.
+[[Fájl:HTML_kep.jpg|right]]Számos megoldás létezik arra, hogy képet illesszünk be weboldalunkra. Az alábbiakban bemutatjuk, milyen kódrészletet kell beilleszteni ahhoz, hogy képet jelenítsünk meg a honlapon.
 == Lépések ==

@@ 31. sor: / 31. sor: @@
 == Kapcsolódó források, hivatkozások ==
-* [http://www.sakkom.hu/blog A SAKKOM Interaktív online marketing + pr ügynökség blogja]
+* [https://sakkom.hu/szolgaltatasok/webfejlesztes SAKKOM Interaktív webfejlesztés]
 [[Kategória:Internet]]

@@ 3. sor: / 3. sor: @@
 [[Fájl:HTML_kep.jpg|right]]Számos megoldás létezik arra, hogy képet illesszünk be weboldalunkra. Az alábbiakban bemutatjuk, milyen kódrészletet kell beilleszteni ahhoz, hogy képet jelenítsünk meg a honlapon.
-== Lépések an szeretnénk beilleszteni a képet!'''
+== Lépések ==
 ## Egy link jelenjen meg az oldalon, és ha rákattintunk, nyíljon meg a kép.
 ## A kép önmagában jelenjen meg az oldalon.