144 Kezdőlap - Webszerkesztés - Összefoglaló
ujdomainek.hu

Ö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 pontban  éppen egy ilyen össze­foglalá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.

<meta charset='iso-8859-2'> 4. A böngésző címsora <title> A böngésző címsorában megjelenő cím  Oldalfőcím  legyen! <title> Oldalfőcím </title> 5. CSS stílusleíró fájl hivatkozása <link> Helyezzen el hivatkozást a  stilus.css  stíluslapra! <link href='stilus.css' rel='stylesheet' type='text/css'>

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

<link href='bootstrap.css' rel='stylesheet' type='text/css'>
<link href='stilus.css'    rel='stylesheet' type='text/css'>
6. Javascript fájl hivatkozása <script> Helyezzen el hivatkozást a  program.js  állományra! <script src='program.js'></script>

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

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

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

Á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!
<table border=2>
    <tr>
        <td> A </td>
        <td> B </td>
        <td> C </td>
        <td> D </td>
    </tr>
    <tr>
        <td> E </td>
        <td> F </td>
        <td> G </td>
        <td> H </td>
    </tr>
</table>
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!
<table border=2>
    <tr>
        <td rowspan=2> AE  </td>
        <td colspan=3> BCD </td>
    </tr>
    <tr>
        <td> F </td>
        <td> G </td>
        <td> H </td>
    </tr>
</table>
AE BCD
F G H

Tehát:

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:

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.

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 ;
}

Tehát:

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.


előző oldal random oldal következő oldal


2021-05-07 23:59:26 Admin Köszönöm, ha Ön lesz az első, aki megírja ide véleményét, észrevételét, kérdését ezzel a lappal kapcsolatban.




Ú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 tizenhárom + nyolc?
Számjegyekkel írja be!



Ez a robotok beírása elleni védelem miatt szükséges ellenőrzés.


© infojegyzet.hu, 2021. február