Bevezetés a webprogramozásba - 4. CSS csoportosítás

 A weboldal egy logikailag összetartozó részének kijelölése és egyedi beállítások delegálása


Forráskód:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title> Mátyás király mese </title>

</head>

<body>

<p>

S a két király fél országát tette igazának. Abban egyezkedtek, hogy a huszár megy el a Burkus királyhoz a nagy próbára.<br/> Volt egy nagy hiba. Burkus nem tudott magyarul, a huszár meg burkusul. A király ugyancsak törte az eszét, amivel tőrbe csalja a huszárt.<br/>

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Andrea_Mantegna_-_King_Matthias_Corvinus_of_Hungary.jpg/375px-Andrea_Mantegna_-_King_Matthias_Corvinus_of_Hungary.jpg" />

</p>

<div style="background-color:red; width:200px;">

<p>

Megérkezik a huszár Burkus dísztermébe.<br/> Keményen megáll és várja a következendőket.<br/> A király jelekkel értekezik a huszárral. Jobb kezét felemeli és hüvelykujjával egyet mutat. A huszár ugyancsak válaszol, és kettőt mutat. Erre a király kitárja két karját. A huszár válaszol: felemeli ökölbe szorított kezét. A király felemel egy nagy törvénykönyvet az asztalról, a huszár erre hüvelyéből kivonja a kardját, és négyfelé vág a levegőbe véle.

</p>

</div>

<p>

Ezzel megfelelt a király kitűzött három jelére, s győzött a huszár. Tarisznyáját mindjárt arannyal tömték meg és hazabocsátották egy levéllel, amit Mátyásnak küldte

</p>

<img src="kep/cimer.jpg" />

</body>

</html>


Videó: