HTML102 - Képek, linkek, formázás

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.

1. 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.
2. 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)

href: header reference, fejléc referencia. Itt adhatjuk meg az erőforrás címét (URI-ját)

Tartalom: a nyitó és záró tag kózé a link szövegét tehetjük, de akár egy képet is 

w3c

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, áthúzott

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 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.

HTML101 - Kezdjünk hozzá!

Szeretnéd tudni, hogyan készülnek a weblapok?

Egyszerű, csak szánj rá 11 napon egy-egy órát, és az alapokat már tudni is fogod!

HTML - a hiperszöveg-leíró nyelv vagyis HyperText Markup Languange rövidítése, ami egy W3C Konzorcium által fejlesztett szabvány a weboldalak tartalmának leírására.

Mire lesz szükséged?

• Először is keress egy jó, de egyszerű kódszerkesztőt, ajánlom a Notepad++ programot, amit erről a linkről letölthetsz. Az oldalon kattints a Notepad++ Installer hivatkozásra.
• Egy bármilyen böngésző, akár az, amiben most nézed ezt az oldalt. Ajánlom a Google Chrome-ot, mert nagyszerű fejlesztői eszközöket tartalmaz.

Ennyi! Nincs is többre szükség. Most indítsd el a kódszerkesztőt, és illeszd be a legegyszerűbb weblap kódját:

<!DOCTYPE html>
<html>
  <head>
     <title>Oldalam</title>
     <meta http-equiv="Content-type" value="text/html; charset=utf-8" >
  </head>
  <body>
    <h2>Szervusz, világ!</h2>
  </body>
</html>

Ha a Notepad++-ot használod, az Encoding (Kódolás) menüben válaszd ki a Konvertálás UTF-8-ra lehetőséget, ha még nem UTF-8 kódolás lenne kiválasztva. Erre azért van szükség, hogy az ékezetes magyar karakterek is helyesen tárolhatók legyenek.

Ezután csak mentsd a fájlt .html kiterjesztéssel, pl. html101.html:

A lementett fájlt nyisd meg a böngészőben vagy duplakattintással. A következő oldalt fogod látni:

Lássuk, mi is ez az egész!

!DOCTYPE

dokumentumtípus-deklaráció. mindig ugyanez, az első sorban kell lennie, jelzi a böngészőnek, hogy html5 szabványnak megfelelő oldalra számíthat

html

a nyitó (<html>) és záró (</html>) tag (ejtsd: teg), azaz címke között van a dokumentum tartalma. A dokumentum a fejrészből (<head>) és a testből (<body>) áll

head

az oldal fejrésze. többnyire közvetlenül nem megjelenő elemeket tartalmaz.

title

az oldal címe, ez jelenik meg a böngészőben a fülön és a tálcán is

meta

a meta tag ezekkel az attribútumokkal az oldal karakterkódolását jelzi, ezt azért szükséges megadni, hogy a magyar ékezetes karakterek a világ összes böngészőjén helyesen jelenjenek meg

body

az oldal tényleges tartalma van ezen a tagen belül

h2

2-es méretű cím. Van ennél nagyobb is: h1, és kisebb is, egészen h6-ig. Próbáld ki a Szervusz, világ! melletti Edit in JSFiddle linkre kattintva, ahol már csak a body elemen belüli részt látod!

Tag-ek, elemek. Mik ezek?

tag

<html>, </html>, <br/> - ezek mind tag-ek

elem (element)

Pl. a <html> és a </html> a köztük lévő tartalommal (content) együtt egy elem