Veebilehe töötuba

Kuidas mall välja näeb? https://taltech-coding.github.io/html-workshop/

Tegu on repoga, mida kasutatakse TalTechi veebilehe tegemise töötoas.

Selles töötoas saad teha endale ilusa veebilehe! Kujundame CSS-i kasutades ühe stiilse HTML veebilehe. Eelnev kogemus ei ole oluline.

Variant 1 (IDE on olemas)

Loo endale GitHubi kasutaja.
vali "Fork"
Saad ise lisada repository'le nime ning vajuta create fork
Peale natukest laadimist peaks ette tulema sinu uus repo.

Variant 2 (IDE ei ole)

Lae alla repository.
Ava allalaetud ZIP-fail ning extracti ehk paki see lahti sobivasse asukohta oma arvutis.
Ava HCODX veebirakendus https://hcodx.com.
Sealt valida.
Vajuta "Select Folder" ja otsida üles asukoht kuhu töötoa fail sai salvestatud.
Nüüd on kõik failid õiges kohas! Joontega ümbritsetud "play" nuppu vajutades avaneb uus vaade kus ongi teie VEEBILEHT! Kõik vajalikud failid, mis teil vaja on "html-workshop-main" kaustas vasakul.

Repos on:

index.html - veebilehe HTML mall
style.css - veeblehe CSS-i mall
images kaust, kus on pildid, mida index.html-is kasutatakse
README.md koos seal kasutatavate piltidega (tutorial_img_1.png ja tutorial_img_2.png)
given_template.jpg, kus on kirjas, mida on vaja teha.

Materjalid ja lingid

Iseseisev lahendamine

Töötoa eesmärgiks on koostada veebileht millegi/kellegi kohta.
Veebileht peaks olema sarnane ette toodud veebilehega (given_template.jpg)
Sinu ülesandeks on antud malli (index.html, style.css) vastavalt soovidele muuta

Sisu lisamine (HTML)

Töötame failis `index.html`

1. Veebilehe visuaalsel kujul vaatamine

Enne kui hakkad sisu muutma, vaata, kuidas veebileht praegu välja näeb. Selleks ava mall ja vaata seda veebilehitsejas, mitte ainult koodina failides.

💡 Vihje 1

Ava projektis fail index.html

💡 Vihje 2

Üleval paremas nurgas (PyCharm puhul) on kolm väikest ikooni. Klõpsa neist sobival (nt brauseri ikoonil), et avada leht oma arvuti veebilehitsejas. Nüüd peaksid nägema malli veebilehe kujul.

2. Veebilehe pealkirja muutmine

Kui avad veebilehe, näed, et brauseri vahelehel (tab'il) on kirjas "Minu veebileht". Muuda see sobivaks enda lehe sisule.

💡 Vihje

Otsi failist üles element <title>...</title> ning muuda see enda valitud pealkirjaks.

🛠️ Lahendus

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>MUUDA SEE ÄRA</title>
</head>

3. Pealkirja muutmine veebilehe peal

Praegu on sinu üheks veebilehe pealkirjaks lihtsalt "Nimetus". Muuda kõik sellised pealkirjad sobivaks.

💡 Vihje

Otsi failist üles element <h1>...</h1> ning muuda nende vahel olevat teksti.

h1 tähistab kõige suuremat pealkirja

🛠️ Lahendus

<div class="container" style="padding: 1em">
    <div id="textBox">
        <h1>MUUDA SEE ÄRA</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Curabitur eget lectus mi. Donec lorem magna,
            elementum ac dui in, posuere pharetra odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Curabitur eget lectus mi. Donec lorem magna, elementum ac dui in, posuere pharetra odio.</p>
    </div>
    <img id="photo" src="images/img.png">
</div>

4. Teksti muutmine

Hetkel on meil seal palju ladinakeelset teksti, kuid soovime sinna midagi sisukamat - sinu veebilehele sobivamat. Muuda tekst igal pool, kus malli järgi (given_template.png) on palutud.

💡 Vihje

Otsi failist üles element <p>...</p> ning muuda nende vahel olevat teksti.

p tähistab veebilehel olevat kõige "tavalisemat" teksti.

🛠️ Lahendus

<div class="container" style="padding: 1em">
    <div id="textBox">
        <h1>Nimetus</h1>
        <p>MUUDA SEE ÄRA</p>
    </div>
    <img id="photo" src="images/img.png">
</div>

5. Pildi lisamine ja muutmine

Leia endale meelepärased pildid ning lisa need oma veebilehele.

💡 Vihje 1

Pildi lisamine projekti käib järgnevalt:

Otsi internetist mõni tore pilt ning lae see arvutisse alla.
Lisa see fail ka siia projekti (pilte hoiame images kaustas)
Mine faili index.html ning asenda vana pilt uuega

💡 Vihje 2

Lisa väljas img asuvale src alale uue pildi asukoht.

Kui tegid soovitatult siis peaks selle asukoht olema images/sinu_faili_nimi.png
Pildi asukohta saad leida ka kui teed parema klõpsu pildifailil ning sealt "Copy path/reference...".

🛠️ Lahendus

<div class="container" style="padding: 1em">
    <div id="textBox">
        <h1>Nimetus</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Curabitur eget lectus mi. Donec lorem magna,
            elementum ac dui in, posuere pharetra odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Curabitur eget lectus mi. Donec lorem magna, elementum ac dui in, posuere pharetra odio.</p>
    </div>
    <img id="photo" src="images/SIIA_SINU_PILT.png">
</div>

7. Lõbusad faktid

💡 Vihje 1

Sul on juba üks "lõbusad faktid" kastike valmis kirjutatud. Muuda selle sisu:

pilt
p

Lisa ülejäänud kaks faktikasti analoogselt näitele.

🛠️ Lahendus

<div class="container">
    <div class="card">
        <img class="icon" src="images/pane_siia_oma_pilt.png"/>
        <h1>Kas teadsid, et </h1>
        <p>MUUDA SEE TEKST.</p>
    </div>
    <div class="card">
        <img class="icon" src="images/pane_siia_oma_pilt.png"/>
        <h1>Kas teadsid, et </h1>
        <p>MUUDA SEE TEKST.</p>
    </div>
    <div class="card">
        <img class="icon" src="images/pane_siia_oma_pilt.png"/>
        <h1>Kas teadsid, et </h1>
        <p>MUUDA SEE TEKST.</p>
    </div>
</div>

6. Video lisamine

Leia endale youtube'st mõni teemakohane video, mida lehel näidata.

💡 Vihje

Sulle on antud väljas iframe asuval alal src link kujul: src="https://www.youtube.com/embed/WLT7TDGzXGU?si=z5_UTSHfVFkCDm6X"
Leia endale Youtube'st sobiv video
Võta oma Youtube video url-ist peale "=" olev osa ning asenda see etteantud lingi viimase osaga
Ehk kui sinu url on https://www.youtube.com/watch?v=bnmAi53H520 siis sa kasutad sellest "bnmAi53H520" osa

🛠️ Lahendus

<div class="container" style="flex-flow: column">
    <iframe id="video" src="https://www.youtube.com/embed/MUUDA_SEE_SIIN" title="YouTube video player"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowfullscreen></iframe>
    <p style="max-width: 55em">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a odio vel lorem congue
        facilisis. Praesent consequat leo arcu, in gravida erat fringilla in. Pellentesque dictum accumsan leo, in
        consectetur eros malesuada quis. Ut congue turpis eget interdum egestas. </p>
</div>

7. Lisainfo lisamine

Vaadates malli given_template.jpg märkad, et seal on "lisainfo" ala. Sinna peaksime tekitama 3 linki, mis viivad mõnele teisele veebilehele.

💡 Vihje 1

Seda saab teha failis index.html lisainfo pealkirja juures.

💡 Vihje 2

Linki saab lisada nii: <a href="">...</a>

Jutumärkide vahele läheb link teisele veebilehele.
"..." Kohale saad kirjutada teksti, millena link kuvatakse.

Kui tahad, et veebileht avaneks uuel vahelehel kirjuta nii: <a href="" target="_blank">...</a>

🛠️ Lahendus

    <div class="container">
        <a href="https://esimene.com">Esimene</a>
        <a href="https://teine.org">Teine</a>
        <a href="https://kolmas.net">Kolmas</a>
    </div>

Kujunduse lisamine ja muutmine (CSS)

Töötame failis `style.css`

Tähelepanelikult vaadates märkad failis index.html esinenud väljasid ka style.css failis

<body>..</body> -> body
id=photo -> #photo
class="container" -> .container

CSS-i kasutataksegi veebilehe elementide "stiliseerimiseks" - siin saab muuta elementide suurust, värvi vms.

1. Muuda veebilehe taustavärvi

Värve saad esitada:

Sõnadena: lightblue, gray
HEX koodidena: #f4f4f4
RGB-na: rgb(255, 255, 255)

💡 Vihje

Lisa body juurde väli background-color.

🛠️ Lahendus

body {
    display: flex;
    padding: 1em;
    flex-direction: column;
    gap: 3em;
    align-items: center;
    background-color:lightcoral;
}

2. Muuda `h1` font-i ja värvi

💡 Vihje

Selleks pead tegema uue välja h1 jaoks.

🛠️ Lahendus

h1 {
  font-family: 'Georgia', serif;
    color: chartreuse;
}

Tegelikult saab CSS-iga veel palju rohkem teha ning selleks on materjale internetis lõputult. Viimistle oma veebileht täpselt selliseks, nagu sa teda soovid. (:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

Veebilehe töötuba

Variant 1 (IDE on olemas)

Variant 2 (IDE ei ole)

Repos on:

Materjalid ja lingid

Iseseisev lahendamine

Sisu lisamine (HTML)

Töötame failis `index.html`

1. Veebilehe visuaalsel kujul vaatamine

2. Veebilehe pealkirja muutmine

3. Pealkirja muutmine veebilehe peal

4. Teksti muutmine

5. Pildi lisamine ja muutmine

7. Lõbusad faktid

6. Video lisamine

7. Lisainfo lisamine

Kujunduse lisamine ja muutmine (CSS)

Töötame failis `style.css`

1. Muuda veebilehe taustavärvi

2. Muuda `h1` font-i ja värvi

About

Uh oh!

Releases

Packages

Contributors 3

Uh oh!

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 15 Commits
images		images
tutorial_images		tutorial_images
README.md		README.md
index.html		index.html
style.css		style.css

taltech-coding/html-workshop

Folders and files

Latest commit

History

Repository files navigation

Veebilehe töötuba

Variant 1 (IDE on olemas)

Variant 2 (IDE ei ole)

Repos on:

Materjalid ja lingid

Iseseisev lahendamine

Sisu lisamine (HTML)

Töötame failis index.html

1. Veebilehe visuaalsel kujul vaatamine

2. Veebilehe pealkirja muutmine

3. Pealkirja muutmine veebilehe peal

4. Teksti muutmine

5. Pildi lisamine ja muutmine

7. Lõbusad faktid

6. Video lisamine

7. Lisainfo lisamine

Kujunduse lisamine ja muutmine (CSS)

Töötame failis style.css

1. Muuda veebilehe taustavärvi

2. Muuda h1 font-i ja värvi

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 3

Uh oh!

Languages

Töötame failis `index.html`

Töötame failis `style.css`

2. Muuda `h1` font-i ja värvi

Packages