Kezdőlap - Webszerkesztés - Összefoglaló

Összefoglaló

webszerkesztéshez

Jegyzet

A webszerkesztést, és annak keretei között HTML-t, CSS-t, JavaScriptet tanulni nem rövid folyamat. Sok mindent meg kell hozzá nézni, és sok mindent ki kell hozzá póbálni. Ám egy vizsgafelkészülés esetén, mint amilyet pl. az érettségi, vagy az OKJ vizsgák igényelnek, jól jöhet valamiféle összefoglalása mindannak, ami a vizsgán tipikus kérdésnek, pontot érő tudásnak számíthat. Ez az oldal az alábbi 15+1 pontban éppen egy ilyen összefoglalást kíván megvalósítani.

A webszerkesztés vizsgafeladatainak megoldása során nem cél a kreativitás - vagyis jellemzően nem kell azon törni a fejünket, hogy mit hogyan lenne a legcélszerűbb megvalósítani. A feladat kizárólag az, hogy pontról pontra hajtsuk végre az utasításokat - akár logikus, akár nem. Pontszám ugyanis csak arra adható, amit a feladat megkövetel, és csak akkor adható, ha a teljesítés látszik a forráskódban. A folytatásban a leggyakrabban előforduló utasításokhoz található segítség, útmutató.

Fontos!

A vizsgaszabályzat szerint sem az érettségin, sem az OKJ vizsgán nem lehet a feladatok megoldása során internetet használni. A vizsgaszervező intézményeknek a vizsga idejére az internetelérhetőséget ki kell kapcsolniuk. Éppen ezért az alábbi pontok tartalmát a gyakorlás során célszerű minél alaposabban memorizálni.

Kezdeti beállítások

1. A dokumentumtípus beállítása <!DOCTYPE> Helyezzen el HTML5-ös dokumentumtípus definíciót az első sorba! <!DOCTYPE html> 2. A weboldal nyelve lang='hu' A weboldal nyelve magyar legyen! <html lang='hu'> 3. A weboldal karakterkódolása charset='utf-8' A weboldal karakterkódolása utf-8 legyen! <meta charset='utf-8'>

Előfordulhat, hogy az eredeti nyers szöveg nem UTF-8, hanem ANSI kódolású. Ilyenkor a fent beállítással az ékezetes karakterek olvashatatlanul jelennek meg. ANSI kódolás esetén az ISO-8859-2 beállítást szükséges használni a magyar ékezetes magánhangzók helyes megjelenéséhez.

Egy adott .html állomány akár több stílusleíró fájlból is dolgozhat. Ezt így lehetséges elérni:

Kezdeti beállítások áttekintő forráskódja

Foglaljuk össze a fentieket egyetlen forráskódba azért, hogy egyben átláthassuk, mely pontoknak hol is van a helye a kód egészében. Így az alábbi kódhoz juthatunk:

<!DOCTYPE html>
<html lang='hu'>
    <head>
        <meta charset='utf-8'>
        <title> Oldalfőcím </title>	
	<link href='bootstrap.css' rel='stylesheet' type='text/css'>
	<link href='stilus.css'    rel='stylesheet' type='text/css'>
        <script src='program.js'></script>
    </head>

    <body>
	... ... ...
    </body>
</html>

A szövegtörzs (body) elemei

7. Karakterformázás <b> <i> <u> Állítsa félkövérre, dőltre, aláhúzottra ... tegye felső indexbe, alsó indexbe ...

	HTML	CSS
félkövér	<b>...</b>	font-weight: bold ;
dőlt	<i>...</i>	font-style: italic ;
aláhúzott	<u>...</u>	text-decoration: underline ;
link aláhúzásának megszüntetése		text-decoration: none ;
betűszín	nem támogatott megoldás	color: #RRGGBB ;
felső index	<sup>...</sup>	-
alsó index	<sub>...</sub>	-

8. Képek beszúrása, és szövegezése <img src> Szúrja be a exam.jpg képet! A képhez tartozó címkék (ha a kép fölé visszük az egeret, vagy a kép nem tölthető be) Vizsga legyenek! <img src='exam.jpg' title='Vizsga' alt='Vizsga'>

title: ha a kép fölé visszük az egeret (a kép címe)
alt: ha a kép nem tölthető be (alternatív tartalom)

Képek méretezése

width height Állítsa a kép szélességét 150 képpontra / magasságát 200 képpontra!

	HTML	CSS
szélesség	<img ... width=150>	width: 150px ;
magasság	<img ... height=200>	height: 200px ;

Képek balra / jobbra igazítása

float A kép legyen balra / jobbra igazított, és a szöveg vegye körül a képet!

	HTML	CSS
balra	<img ... align='left'>	float: left ;
jobbra	<img ... align='right'>	float: right ;

9. Hivatkozás kialakítása <a href> Alakítson ki hivatkozást, a hivatkozás új ablakban nyíljon meg! <a href='url.cim' target='_blank'> ... </a>

Fontos a _blank szó elején az aláhúzásjel.

10. Felsorolás: számozatlan lista, számozott lista <ul> <ol> <li> Készítsen számozatlan listát...!

<ul>
<li> ... ... </li>
<li> ... ... </li>
<li> ... ... </li>
</ul

... ...
... ...
... ...

Készítsen sorszámozott listát...!

<ol>
<li> ... ... </li>
<li> ... ... </li>
<li> ... ... </li>
</ol

... ...
... ...
... ...

Miről lehet megjegyezni, megkülönböztetni ezeket a tag-eket? A válasz az angol elnevezések kezdőbetűiben keresendő:

<ul>: unordered list - rendezetlen (számozatlan) lista
<ol>: ordered list - rendezett (számozott) lista
<li>: list item - lista elem

Állítsa a felsorolás jelét üres karikára! list-style-type <ul style=' list-style-type: circle; '>

A további lehetséges felsorolásjelek, illetve számformátumok a list-style-type ismertetőjében találhatóak.

11. Táblázatok <table> Szúrjon be táblázatot, melynek 2 sora és 4 oszlopa van!

A	B	C	D
E	F	G	H

Cellák egyesítése

colspan rowspan Vonja össze az A és az E, valamint a B, C és D cellákat!

AE	BCD
	F	G	H

Tehát:

rowspan : több sorból egymás alatti cellák összevonása (row=sor)
colspan : több oszlopból egymás melletti cellák összevonása (column=oszlop)

a számparaméter pedig az összevonni kívánt cellák darabszáma.

A HTML és a CSS kapcsolata

12. Keretek (és bármilyen egyéb elemek) formázása id Hozzon létre keretet (div) és rendelje hozzá a leiras azonosítókijelölőt! <div id='leiras'>
... ... ...
</div>

Az azonosítókijelölőt gyakran nevezik elemazonosítónak, vagy egyszerűen csak azonosítónak, illetve a CSS fájlokban szelektornak, néha elemszelektornak.

class Hozzon létre keretet (div) és formázza meg az alábbi osztálykijelölőkkel: hatter1 , oszlopok és belsoszoveg ! <div class='hatter1 oszlopok belsoszoveg'>
... ... ...
</div>

Ha egy keret (div) formázásakor több osztálykijelölőt is szükséges alkalmazni, akkor azok neveit szóközzel elválasztva kell felsorolni az idézőjelen, vagy aposztrófon belül.

Az osztálykijelölő további lehetséges elnevezései: osztályazonosító, osztálybesorolás, szelektor, osztályszelektor - ezek mind ugyanazt jelentik.

13. A CSS fájl szelektorai #elem .osztály Hozzon létre új szelektort ... !

	HTML	CSS
elem	<div id='leiras'> ... ... ... </div>	#leiras { ... ... ... }
osztály	<div class='menu'> ... ... ... </div>	.menu { ... ... ... }

Vegyük észre a különbséget:

Az elemazonosítót
- HTML-ben az id paraméterrel jelöljük;
- CSS-ben a kialakításkor a # jellel hozzuk létre;
- akkor használjuk, amikor csak 1 elemet szeretnénk formázni.
Az osztályazonosítót
- HTML-ben a class paraméterrel jelöljük;
- CSS-ben a kialakításkor a . (tehát a pont) jellel hozzuk létre;
- akkor használjuk, amikor egyszerre több elemet is szeretnénk formázni.

Tudta?

Ahhoz, hogy a CSS fájl tartalma is frissüljön a böngészőben, nem elegendő F5-öt nyomni, mert az csak a HTML tartalmat frissíti, minden mást a gyorsítótárból használ. A gyorsítótár tartalmának frissítéséhez a Ctrl+F5 billentyűkombinációt kell használni.

Kíváncsi további trükkös forróbillentyű kombinációkra? Kattintson a gombra!

További formázások a CSS részben

14. Külső margó, belső margó margin padding ... legyen az elem külső margója körbe 8 képpont, a belső margója pedig fent és lent 4-4, a bal oldalon 12, a jobb oldalon 20 képpont! ... ... ...
{
margin : 8px ;
padding : 4px 20px 4px 12px ;
}

fent jobb lent bal - az óramutató járásának megfelelően

Tehát:

margin : külső margó
padding : belső margó

az oldalak sorrendje pedig: fent jobb lent bal - az óramutató járásának megfelelően.

15. Háttérkép beállítása background Állítsa be a doboz elemnek háttérképként a bg.png képet, mely a jobb oldalon (függőlegesen lefelé) ismétlődjön, a mérete az eredeti kép méretének fele legyen! A doboz háttérszíne egyébként #FDA legyen! #doboz
{
background-color    : #FDA    ;
background-image    : url('bg.png');
background-repeat : repeat-y    ;
background-position : right ;
background-size : 50% 50% ;
}

A background-image tulajdonság után az url( ) kifejezés nem nélkülözhető a kép helyes betöltéséhez. Az aposztrófok között szükség esetén mappa, illetve elérési útvonal is megadható a kép neve előtt.

JavaScript függvény megvalósítása

+1. Függvény hívása, függvénytörzs kialakítása function Készítsen függvényt, mely egy űrlap bemeneti mezőiből kiszámolja és kiírja az eredményeket! function kiszamol()
{
... ... ...
}

Ajánlott kidolgozott mintapéldák:

előző oldal

random oldal

következő oldal

Eddig 2 hozzászólás van a témához:

2022-03-01 09:33 Zoltán Tetszetős, jó összefoglaló.
Köszönjük!

2023-05-22 12:33 wh0opty Ennél a résznél lehet használni jegyzetet,ugye?

Új hozzászólás:
E-mail cím:	Erre a címre küldjük ki a hozzászólás jóvá- hagyásához szükséges linket. Az e-mail címet sehol nem tesszük közzé.
Név:	Ez a név fog megjelenni az Ön hozzászólásai mellett.
Mennyi tizennégy + kilenc? Számjegyekkel írja be!	Ez a robotok beírása elleni védelem miatt szükséges ellenőrzés.