A fenti képet a következő markuppal jeleníthetjük meg:
<img border="0" height="200" width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz6Q1deSGsIZLrkh3y6Jv85X4La4O-L9w23sAHDp2_KblplrjcmS1-8GnJkmi_qUmKt0X0SI1blNlfCatk3cqCAlKlgC2fxn5Bhdb8PpiXbVxy63iqTWynMA3pk-z63yMhvjd_HoRDM4GS/s200/flower.png" />
Az utána álló bekezdést (p mint paragraph) pedig ezzel:
<p>A fenti képet a következő markuppal jeleníthetjük meg:</p>
- img
- image; a kép beszúrására alkalmazható elem
- border
- a kép keretének vastagsága, elhagyható
- src attribútum
- source; a kép címe (URI-ja). Itt alapvetően két lehetőségünk van.
- Az egyik, hogy az interneten keresünk egy képet, jobbklikk, cím másolásával megszerezzük a címét, és azt illesztjük be ide. (Ennek egyik hátránya az, hogy ha később az eredeti helyen már nem lesz elérhető a kép, mert pl. megszűnik az oldal, akkor a mi lapunk sem tudja azt megjeleníteni.
- A másik lehetőség az, hogy lementjük a képfájlt a html dokumentumunk mellé, és az src-ben csak a fájlnévvel hivatkozunk rá.
- alt
- ha a kép valamiért nem jeleníthető meg, ezt az alternatív szöveget láthatjuk a helyén. Fontos megadni az esélyegyenlőség érdekében, mert a gyengénlátók által használt felolvasószoftver is ezt használja.
- title
- buborékban (tooltip) jelenik meg, ha az egérmutatót (kurzor) föléhúzzuk.
- width
- a kép szélessége, elhagyható
- height
- a kép magassága, elhagyható. Ha csak a width-et adjuk meg, akkor a height-ot arányosan hozzáméretezi.
Hivatkozások (linkek)
Egy másik fájlra mutatnak, lehet az egy kép, egy weblap, egy pdf doksi vagy bármi más.
ez egy link, ami a következő markuppal lett leírva:
<a href="http://facebook.com" target="_blank">ez egy link</a>
- a
- cím (address) valamilyen erőforrásra történő civatkozás
- target
- cél. megadja, hogy a jelenlegi vagy egy új ablakban jelenjen meg a kattintásra megnyíló oldal. Lehetséges értékek:
- _blank: új üres (=blank) oldalt nyit meg, és oda tölti be a link címét lévő lapot
- _self: a linet tartalmazó oldal helyére tölti be az újat (saját=self)
- _parent: a szülő (=parent) lapra töltődik be (egymásba ágyazva is lehetnek oldalak)
- _top: a legfelső szintű oldalkeretben nyitja meg (többszörösen egymásba ágyazott oldalak esetén van jelentősége)
Az előző kettőt, az img-t és az a-t kombinálhatjuk is, ha egy nagy képnek a részleteire kattintva más-más oldalra szeretnénk átugrani. Erre szolgál a map element. Példaként álljon itt egy kép, amelynek három része az index, az origo és a times oldalára visz. A bal oldali egy téglalap, a többi egy-egy kör:
És itt a markup, ami előhozta:
<img alt="Map" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz6Q1deSGsIZLrkh3y6Jv85X4La4O-L9w23sAHDp2_KblplrjcmS1-8GnJkmi_qUmKt0X0SI1blNlfCatk3cqCAlKlgC2fxn5Bhdb8PpiXbVxy63iqTWynMA3pk-z63yMhvjd_HoRDM4GS/s1600/flower.png" usemap="#planetmap" width="170" /> <map name="planetmap"> <area alt="index" coords="0,0,82,126" href="http://index.hu" shape="rect"></area> <area alt="origo" coords="90,58,3" href="http://origo.hu" shape="circle"></area> <area alt="times" coords="124,58,8" href="http://times.com" shape="circle"></area> </map>
Többféle alakzatra is szabdalhatjuk a képeket, csak a képzelet szab határt.
| img usemap="#mapNeve" | #-tel kezdve a map-nek a name attribútumával teremti meg a kapcsolatot |
| map name="mapNeve" | egy kép darabolását leíró térkép elem |
| area | a térkép egy területe |
| shape="alakzat" | kör (circle), téglalap (rect) vagy sokszög (poly) |
| href="hivatkozás" | a hivatkozás, amire a kattintás navigál |
Ha egy email címre akarunk hivatkozni, mailto linket hozhatunk létre, amelyre kattintva az alapértelmezett levelezőprogram az új levél írása ablakot megnyitja, és kitölti a link href-jében megadott adatokkal:
<a href="mailto:email@address.com?subject=test&body=ez%20lesz0Aa%20szöveg">írj levelet</a>
| "mailto:" kezdés | ez jelzi, hogy email-link fog következni |
| subject | tárgy (URL-kódolással) |
| body | szöveg (URL-kódolással) |
Alapvető formázásra nagyvonalakban ezek a lehetőségek vannak:
| b | <b>félkövér</b> | bold, félköver |
| i | <i>dőlt</b> | italic, dőlt |
| u | <u>aláhúzott</u> | underlined, aláhúzott |
| sub | <sub>alsó index</sub> | subscript, alsó index |
| sup | <sup>felső index</sup> | superscript, felső index |
| del | <del>áthúzott</del> | deleted, |
Ezek egyelőre elegendőek, de további formázási lehetőségeket találhatsz a tutorialspoint oldalán.
De nem kell, hogy a szövegeid színtelenek maradjanak! A
De nem kell, hogy a szövegeid színtelenek maradjanak! A
style attribútummal sok egyéb között a háttérszínt (background-color) és a szöveg színét (color) is megadhatod.| style | <span style="stílus: érték; stílus2: érték2;">szöveg</span> | közvetlenül (inline) megadott stílusok |
| background-color | <span style="background-color: yellow;">szöveg</span> | szöveg |
| color | <span style="color: red;">szöveg</span> | szöveg |
A színek megadhatók #rrggbb formátumban, ahol a red, green, blue, azaz piros, zöld és kek komponenseket tizenhatos számrendszerbeli (hexadecimális) számokkal kell megadni, vagy pedig a nevével. Segítségül lásd ezt a web színes oldalt. Példák:
| rgb hexadecimális | <span style="background-color: #ffff00;">szöveg</span> | 3 db 16-os számrendszerbeli számmal van sorban megadva a piros (red), zöld (green) és blue (kék) komponens. 00: semennyi, FF: maximum (=255) |
| rgb rövid hexadecimális | <span style="background-color: #ff0;">szöveg</span> | ugyanaz, mint az előző, itt minden karakter duplán értendő, ez csak egy rövidítés |
| rgb decimális | <span style="background-color: rgb(255,255,0); color: #fff;">szöveg</span> | ugyanaz, mint az előző, csak tízes számrendszerbeli számokkal |
| rgb decimális | <span style="background-color: yellow;">szöveg</span> | ugyanaz, mint az előző, csak a szín nevével |
A stílusok témeköre egy teljes külön tanfolyam, bővebben olvashatsz róla ezen a wikipédia oldalon.
Most már tudsz készíteni egyszerű, statikus, színes oldalakat, hát nem nagyszerű?
A tanfolyam következő napján további attribútumokkal ismerkedhetsz meg, tördelni és igazítani fogjuk az elementeket, és benézünk a motorháztető alá is.
A tanfolyam következő napján további attribútumokkal ismerkedhetsz meg, tördelni és igazítani fogjuk az elementeket, és benézünk a motorháztető alá is.
