Programavimas yra viena iš sričių, kuri per pastaruosius dešimtmečius tapo ypač aktuali, o tinklalapių kūrimas – vienas iš populiariausių programavimo taikymo būdų. Jei esate susidomėjęs tinklalapių kūrimu, būtina susipažinti su HTML ir CSS – dviem pagrindinėmis technologijomis, skirtomis internetinių svetainių kūrimui.
1. Kas yra HTML?
HTML (HyperText Markup Language) yra žymėjimo kalba, skirta internetinių svetainių struktūros kūrimui. HTML dokumentas susideda iš įvairių žymių (vadinamų „tags” anglų kalba), kurios nurodo, kaip turinys turi būti rodomas naršyklėje.
<!DOCTYPE html>
<html>
<head>
<title>Mano svetainė</title>
</head>
<body>
<h1>Sveiki atvykę į mano svetainę!</h1>
<p>Čia yra mano pirmasis tinklalapis.</p>
</body>
</html>Štai keletas pagrindinių HTML žymių (angl. tags) su paaiškinimais:
<!DOCTYPE html>- Ši žymė nurodo dokumento tipą ir HTML versiją. Ji visada yra pirmoje vietoje HTML dokumente.
<html>- Visas HTML kodas rašomas tarp šios žymės ir jos uždarymo žymės
</html>. Ji nurodo pradžią ir pabaigą visam HTML dokumentui.
- Visas HTML kodas rašomas tarp šios žymės ir jos uždarymo žymės
<head>- Šioje dalyje aprašoma informacija apie puslapį, kuri nėra rodoma naršyklės lange. Čia dažnai patalpinamos meta informacijos žymės, stiliai, skriptai ir kt.
<title>- Šioje žymėje aprašomas puslapio pavadinimas, kuris rodomas naršyklės kortelėje.
<body>- Pagrindinė puslapio dalis. Čia yra visa informacija, kuri yra rodoma naršyklės lange.
<h1>,<h2>, …<h6>- Šios žymės skirtos antraštėms.
<h1>yra pagrindinė antraštė, o<h6>– mažiausias antraštinis lygmuo.
- Šios žymės skirtos antraštėms.
<p>- Paragrafo žymė. Naudojama tekstui struktūrizuoti į paragrafus.
<a href="URL">- Nuorodos žymė. Naudojama sukurti nuorodą į kitą puslapį ar dokumentą.
hrefyra atributas, kuriame nurodomas nuorodos adresas.
- Nuorodos žymė. Naudojama sukurti nuorodą į kitą puslapį ar dokumentą.
<img src="URL" alt="Aprašymas">- Paveikslėlio žymė.
srcnurodo paveikslėlio šaltinį, oaltaprašo paveikslėlio turinį (naudinga, jei paveikslėlis neįkeliamas arba naudojantis skaitytuvais).
- Paveikslėlio žymė.
<ul>,<ol>,<li>
- Šios žymės naudojamos sąrašams kurti.
<ul>skirta nesurikiuotiems sąrašams,<ol>– surikiuotiems, o<li>nurodo atskirą sąrašo elementą.
<br>
- Pertraukos žymė. Naudojama įterpti eilutės pertrauką.
<div>
- Bendrosios paskirties konteinerio žymė. Dažnai naudojama su CSS stiliais arba JavaScript, siekiant grupuoti elementus.
<span>
- Panaši į
<div>, bet skirta grupuoti trumpesnius teksto fragmentus.
2. Kas yra CSS?
CSS (Cascading Style Sheets) yra stilių aprašymo kalba, naudojama nurodyti, kaip HTML elementai turėtų atrodyti naršyklėje. Su CSS galite keisti spalvas, šriftus, dydžius, išdėstymą ir kitus dizaino aspektus.
h1 {
color: blue;
font-family: Arial, sans-serif;
}
Štai keletas pagrindinių CSS savybių (angl. properties) su paaiškinimais:
color- Nustato teksto spalvą.
- Pavyzdys:
color: red;
background-color- Nustato elemento fono spalvą.
- Pavyzdys:
background-color: #FF5733;
font-family- Nustato šrifto šeimą.
- Pavyzdys:
font-family: Arial, sans-serif;
font-size- Nustato teksto dydį.
- Pavyzdys:
font-size: 16px;
font-weight- Nustato teksto storį (pvz., bold).
- Pavyzdys:
font-weight: bold;
text-align- Nustato teksto lygiavimą.
- Pavyzdys:
text-align: center;
border- Nustato rėmelio stilių, storį ir spalvą.
- Pavyzdys:
border: 2px solid black;
padding- Nustato tarpą tarp elemento turinio ir jo rėmelio.
- Pavyzdys:
padding: 10px;
margin- Nustato tarpą tarp elemento rėmelio ir kitų elementų arba tarp elemento ir naršyklės lango kraštų.
- Pavyzdys:
margin: 20px;
widthirheight
- Nustato elemento plotį ir aukštį.
- Pavyzdys:
width: 100px; height: 50px;
display
- Nustato, kaip elementas turėtų būti rodomas.
- Pavyzdys:
display: block;arbadisplay: inline;
position
- Nustato elemento pozicionavimo būdą.
- Pavyzdys:
position: relative;arbaposition: absolute;
z-index
- Nustato, kuriame sluoksnyje elementas turėtų būti rodomas, jei yra keli sluoksniai.
- Pavyzdys:
z-index: 1;
flex
- Savybė, naudojama „Flexible Box Layout” (lanksčiojo dėžutės išdėstymo) modelyje, kuris leidžia kurti lanksčias svetainių struktūras be naudojant float ar position savybes.
3. Kaip pradėti?
Žingsnis 1: Susikurkite darbinę aplinką. Jums reikės teksto redaktoriaus, skirta kurti ir redaguoti HTML ir CSS failus. Yra daug nemokamų variantų, tokių kaip „Visual Studio Code”, „Atom” ar „Notepad++”.
Žingsnis 2: Pradėkite nuo HTML. Mokykitės pagrindines HTML žymes: <head>, <body>, <h1>, <p>, <a> ir t.t. Eksperimentuokite su jomis, kurdamas paprastą svetainę.
Žingsnis 3: Įtraukite CSS. Kai jau turite bazinį supratimą apie HTML, pradėkite stilių kūrimą naudodami CSS. Mokykitės, kaip keisti spalvas, šriftus ir išdėstymą.
4. Pamokos ir šaltiniai mokymuisi
Yra daugybė nemokamų išteklių, kurie padės jums mokytis HTML ir CSS:
- W3Schools (w3schools.com): Tai yra vienas iš populiariausių pradžiamokslinių išteklių, kuris pateikia pavyzdžius, paaiškinimus ir pratimus.
- Mozilla Developer Network (MDN) (developer.mozilla.org): Šis šaltinis yra šiek tiek pažengusiems, tačiau labai išsamus. Jame rasite informaciją ne tik apie HTML ir CSS, bet ir apie JavaScript, kitą esminę svetainių kūrimo kalbą.
- Codecademy (codecademy.com): Tai yra interaktyvi mokymosi platforma, kurioje galite dalyvauti praktinėse užduotyse ir mokytis tiesiogiai naršyklėje.
Išvada
HTML ir CSS yra du esminiai tinklalapių kūrimo komponentai. Jie leidžia sukurti struktūrizuotą ir vizualiai patrauklią svetainę. Nors iš pradžių tai gali atrodyti sudėtinga, su tinkamais ištekliais ir praktika jūs galite greitai išmokti ir pradėti kurti savo svetaines!
