paveikslai tinklalapyjejia.lt/sena/moodle/tp/12kaledos.pdfpaveikslai atsisiųskite failą...
TRANSCRIPT
Paveikslai tinklalapyjePRAKTINIS DARBAS
UžduotisSukurkite kalėdinį tinklalapį įvairiai panaudodami skirtingų tipų paveikslus.
Minimalus tinklalapisĮrašykite į savo aplanką HTML dokumentą kaledos.html
<!doctype html>
<html>
<head>
<title>Kalėdos</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
PaveikslaiAtsisiųskite failą paveikslai.zip ir išpakuokite jį į savo aplanką.
images
kaledos.html
Tinklalapio ikonaPaveikslą holly.png panaudokite tinklalapio ikonai.
Tinklalapio HEAD dalyje įrašykite:
<link rel="icon" type="image/png"
href="images/holly.png">
Tinklalapio fonasTinklalapio fonui naudokite paveikslą dark-blue-bg.jpg
Įterpkite pakopinius stilius HEAD dalyje:
html {
background: url(images/dark-blue-bg.jpg)
no-repeat center center fixed;
background-size: cover;
}
Esminė tinklalapio dalisPriderinkite esminę tinklalapio dalį prie naudojamo fono.
Papildykite pakopinių stilių sąrašą:
body {
color: white;
font-family: tahoma, sans-serif;
width: 50%;
border: 36px solid transparent;
border-image:url(images/border.png) 36 36 round;
}
Tinklalapio viršutinė dalisTinklalapio viršuje įterpkite paveikslą title.png
Po paveikslu užbrėžkite horizontalią liniją.
<header>
<img src="images/title.png"
alt="Kalėdinė svetainė">
<hr>
</header>
Paveikslo centravimasSu pakopiniais stiliais sucentruokite viršutinę tinklalapio dalį:
header {
text-align: center;
}
Horizontali linijaHorizontalią liniją paverskite sucentruotu paveikslu snowflake-row.png:
hr {
background: url(images/snowflake-row.png) 100% no-repeat;
height: 63px;
width: 500px;
border: 0;
margin: 0 auto;
clear: both;
}
Tinklalapio turinysUž HEADER dalies sukurkite dalį SECTION su ARTICLE elementu:
<header>
...
</header>
<section>
<article>
</article>
</section>
Pagrindinis pavadinimasARTICLE dalyje įrašykite pagrindinį pavadinimą:<h1>Kalėdų simboliai</h1>
Suformatuokite pavadinimą su CSS:h1 {
text-align: center;
font-size: 2em;
}
h1::before {
content: url(images/xmas-tree.png);
}
h1::after {
content: url(images/xmas-bells.png);
}
Straipsnio antraštėUžrašykite pirmojo straipsnio pavadinimą:
<h2>Kalėdų senelis</h2>
Pirmo straipsnio iliustracijaĮterpkite paveikslą po straipsnio pavadinimu:
<img src="images/santa-claus-reindeer.jpg" alt="Kalėdų senelis" id="santa">
Įterptam paveikslui pritaikykite pakopinius stilius:
#santa {
border: 3px double white;
float: right;
margin-left: 10px;
}
Straipsnio tekstasSukurkite pastraipą apie Kalėdų senelį:
<p>Kalėdų senelis vilki raudonai baltais
drabužiais, skrieja rogėmis, pakinkytomis 9
elniais. Kalėdų senelis gyvena Šiaurės
Ašigalyje, Laplandijoje. Jis mėgsta
pripildyti kojines smulkių dovanėlių ar
padėti dovanų po eglute gruodžio 24 d.
naktį. Į namus jis patenka pro kaminą arba
orlaidę...</p>
Pastraipų lygiavimasSulygiuokite visas pastraipas pagal abi puses:
p {
text-align: justify;
}
Kitas straipsnisĮterpkite horizontalią liniją.
Įrašykite straipsnio pavadinimą:
<h2>Kalėdinė eglutė</h2>
Kita iliustracijaPo straipsnio pavadinimu įterpkite animuotą paveikslą xmas-tree.gif ir vieną pastraipą:
<img src="images/xmas-tree.gif" alt="Kalėdinė
eglutė" id="tree">
<p>Eglutė Kalėdų šventei pasirinkta dėl to, kad
tai visžalis medis, simbolizuojantis gyvybę ir
amžino gyvenimo viltį. Kalėdų eglutės atneša į
namus ne tik kalėdinę nuotaiką, bet ir malonų
miško kvapą. Manoma, kad trikampė eglutės forma
simbolizuoja Šv. Trejybę — Dievo Tėvo,
Dievo Sūnaus ir Dievo Šv. Dvasios.</p>
<hr>
Paveikslo savybėsPaveikslui taikykite pakopinius stilius:
#tree {
border: 1px solid white;
padding: 1px;
float: left;
margin-right: 10px;
}
Tinklalapio peržiūraPeržiūrėkite sukurtą tinklalapį skirtingomis naršyklėmis.
Patikrinkite HTML ir CSS kodo teisingumą.
Suraskite internete svetainių apie Kalėdas, pavyzdžiui:
http://whychristmas.com/