Web, weblapok készítése

Tartalom:

World Wide Web (WWW)

Keresés a web-en

Weboldalak készítése (HTML nyelv)

A HTML nyelven írott forráskód olyan szöveg, melyben sajátos, tag-nek nevezett jelölőelemek – találhatók, ezek adnak utasításokat a böngészőnek arra, hogy a dokumentum egyes részeit milyen formában jelenítsük meg (hova tegyük, milyen legyen a formázása stb.).

A HTML forráskódot egyszerű szöveges fájlokba mentjük .html kiterjesztéssel (szerkeszthetjük pl. Notepad-del vagy olyan szerkesztővel, ami felismeri a tag-eket, pl. Notepad++).

Egy egyszerű html oldal szerkezete:

Megjegyzések:

    <név attribútum1="érték1" attribútum2="érték2" ... > tartalom </név>

Hasznos weboldalak:

https://www.w3schools.com/html/ - HTML tutorial a W3Schools-tól

https://developer.mozilla.org/en-US/docs/Web/HTML - Mozilla Developer Network – a tutorial mellet részletes dokumentáció („reference”) az elemekről és stílusattribútumokról (milyenek léteznek egyáltalán, melyik mit csinál, milyen böngészők támogatják)

A webböngészők gyakran a rosszul formázott, illetve csak félig-meddig helyes HTML kódot is megpróbálják a lehető legjobban értelmezni, ez nagyrészt a böngészőháborúk következménye (tehát szeretnék elérni, hogy a nem teljesen helyesen elkészített weblapok is jól jelenjenek meg, kedvében járva ezzel a fejlesztőknek és felhasználóknak).

Weblap HTML kódjának megtekintése:

A desktop böngészőktől általában le lehet kérni azt a HTML forráskódot, amiből egy-egy weblapot kirajzolt. A megfelelő menüopciót „View page source” néven érdemes keresni.

Másik módja a kód böngészésének ha egyenesen valamilyen elemre a jobb egérgombbal klikkelünk és kiválasztjuk az „Inspect” vagy „Inspect element” nevű opciót. Ez megnyit egy panelt, ahol látjuk annak az elemnek a kódját és más fejlesztői eszközöket (Developer Tools, általában a hozzá rendelt gyorsbillentyű az F12).

Szöveg formázására szolgáló TAG-ek:

Példa:

    <span style="color: red; font-size: 16pt;">Nagy <u>piros</u> szöveg.</span>

Így jelenik majd meg:

Nagy piros szöveg.

Példa

    <p style="background-color: #AAFFAA; text-align: center;">
        Bekezdés középen.
    </p>

Így jelenik majd meg:

Bekezdés középen.

Színek megadása HTML-ben:

Több lehetőség van rá:

Példa:

    <span style="color: #f18b0e;">színes szöveg</span>, 
    <span style="color: rgb(241,139,14);">ugyanaz a szín</span>

Megjelenése: színes szöveg, ugyanaz a szín

Color picker: olyan alkalmazás(-rész), ami segít grafikus ablakban kiválasztani egy színt, majd mutatja annak színkódját. Például van ilyen Paint-ben vagy számos weboldalon (https://colorspicker.net/en-us/, https://kolorpicker.com/).

Megjegyzések a kódban (comments):

Nincsenek hatással a megjelenítésre, csak emberi olvasónak íródnak (mint más programozási nyelvekben).

    <!-- ez egy megjegyzés -->
    <!-- 
        ez egy másik, ami 
        több
        sorra
        kiterjed
    -->

A <p> elem (paragrafus):

Példák:

<p>
    Balra igazított bekezdés, amiben a szöveg többsoros. Lorem ipsum 
    dolor sit amet consectetur adipiscing elit. Quisque faucibus ex 
    sapien vitae pellentesque sem placerat. In id cursus mi pretium 
    tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. 
    Pulvinar vivamus fringilla lacus nec metus bibendum egestas.
</p>

<p style="text-align: right; background-color: #eeeeaa;">
    Jobbra igazított bekezdés, <br>erőltetett sortörésekkel és háttérszínnel.
</p>

<p style="text-align: center; border: 1px solid black;">
    Középre igazított bekeretezett bekezdés.
</p>

Megjelenítve:

Balra igazított bekezdés, amiben a szöveg többsoros. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas.

Jobbra igazított bekezdés,
erőltetett sortörésekkel és háttérszínnel.

Középre igazított bekeretezett bekezdés.

A <div> elem:

Példák:

    <div style="width: 300px; height: 100px; background-color: red; margin-left: auto; margin-right: auto;">
        Középre igazított div.
    </div>
    <div style="background-color: yellow; width: 50%;">
        <div style="background-color: blue; width: 50px; height: 50px; margin: 10px; display: inline-block;"></div>
        <div style="background-color: gray; width: 50px; height: 50px; margin: 10px; display: inline-block;"></div>
        <div style="background-color: green; width: 50px; height: 50px; margin: 10px; display: inline-block;"></div>
    </div>

Megjelenítve:

Középre igazított div.

Képek:

    <img src="..." alt="..." width="..." height="..." />

Példák:

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras 
        tristique vulputate leo vel viverra. Nam egestas ante risus, in 
        maximus arcu tristique ac. 
    </p>
    <img src="https://arnoldbeiland.ro/files/projects/extended-chebyshev/surface.png" 
        width="200px" style="margin: 0 auto; display: block;"/>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras 
        tristique vulputate leo vel viverra. Nam egestas ante risus, in 
        maximus arcu tristique ac. 
    </p>

    <hr/>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras 
        tristique vulputate leo vel viverra. Nam egestas ante risus, in 
        maximus arcu tristique ac. 
    </p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png"
        width="150px" style="margin: 10px; float: right;" />
    <p>
        Duis pulvinar est et libero fringilla consequat. Pellentesque a 
        nibh a nisi bibendum dignissim. Suspendisse leo nisi, sollicitudin 
        id nisi quis, blandit iaculis arcu. Vestibulum sollicitudin, 
        ipsum eget vehicula elementum, mauris ante mattis odio, auctor 
        blandit urna augue sit amet quam. Cras sollicitudin risus ipsum, at 
        vestibulum mauris volutpat eget. Duis rhoncus aliquam nunc id laoreet. 
        Cras consectetur arcu ac turpis scelerisque ornare. Suspendisse molestie 
        tempor facilisis. Vivamus vel tristique leo, a facilisis odio. Donec nibh 
        quam, pellentesque in imperdiet malesuada, vehicula a dui. 
        Aliquam erat volutpat. 
    </p>

Megjelenítve:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique vulputate leo vel viverra. Nam egestas ante risus, in maximus arcu tristique ac.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique vulputate leo vel viverra. Nam egestas ante risus, in maximus arcu tristique ac.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique vulputate leo vel viverra. Nam egestas ante risus, in maximus arcu tristique ac.

Duis pulvinar est et libero fringilla consequat. Pellentesque a nibh a nisi bibendum dignissim. Suspendisse leo nisi, sollicitudin id nisi quis, blandit iaculis arcu. Vestibulum sollicitudin, ipsum eget vehicula elementum, mauris ante mattis odio, auctor blandit urna augue sit amet quam. Cras sollicitudin risus ipsum, at vestibulum mauris volutpat eget. Duis rhoncus aliquam nunc id laoreet. Cras consectetur arcu ac turpis scelerisque ornare. Suspendisse molestie tempor facilisis. Vivamus vel tristique leo, a facilisis odio. Donec nibh quam, pellentesque in imperdiet malesuada, vehicula a dui. Aliquam erat volutpat.

    <a href="...URL...">kattints ide</a>

Példák:

    <p><a href="https://liceulteoreticcarei.ro">Líceum weboldala</a></p>
    <p><a href="#tartalom">Ugrás a tartalomjegyzékhez</a> ugyanezen az oldalon.</p>
    <p>
        <a href="https://hu.wikipedia.org/wiki/Zsir%C3%A1f"><img style="width: 150px"
        src="https://upload.wikimedia.org/wikipedia/commons/0/02/Giraffe_Ithala_KZN_South_Africa_Luca_Galuzzi_2004.JPG" /></a> 
        a képből készítettünk linket.
    </p>

Megjelenítve:

Líceum weboldala

Ugrás a tartalomjegyzékhez ugyanezen az oldalon.

a képből készítettünk linket.

Listák:

Pélák:

    <p>Számozott (ordered) lista:</p>
    <ol>
        <li>alma</li>
        <li>körte</li>
        <li>barack</li>
    </ol>
    <p>Ugyanaz betűkkel:<p>
    <ol type="a">
        <li>alma</li>
        <li>körte</li>
        <li>barack</li>
    </ol>
    <p>Számozatlan (unordered) lista:</p>
    <ul>
        <li>alma</li>
        <li>körte</li>
        <li>barack</li>
    </ul>

Megjelenítve:

Számozott (ordered) lista:

  1. alma
  2. körte
  3. barack

Ugyanaz betűkkel:

  1. alma
  2. körte
  3. barack

Számozatlan (unordered) lista:

Táblázatok:

Példa:

<table>
    <thead>
        <tr>
            <th>Név</th>
            <th>Jegy</th>
            <th>Ítélet</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jozsi</td>
            <td>4.4</td>
            <td style="text-align: center;">mai incearcă</td>
        </tr>
        <tr>
            <td>Mária</td>
            <td>4.6</td>
            <td style="text-align: center;">admis(ă)</td>
        </tr>
        <tr>
            <td>Pali</td>
            <td>9.9</td>
            <td style="text-align: center;">hagyhattál volna másnak is</td>
        </tr>
    </tbody>
</table>

Megjelenítve:

NévJegyÍtélet
Jozsi4.4mai incearcă
Mária4.6admis(ă)
Pali9.9hagyhattál volna másnak is

Megjegyzés: a keretek nem fognak alapból megjelenni, itt csak azért jelentek meg, mert öröklődtek a weboldalam CSS stílusszabályai erre a példára is. Például:

1
2
3
4
5
6
7
8

    table {
        border-collapse: collapse;
    }

    td,th {
        border: 1px solid black;
        padding: 5px;
    }

Vissza a tartalomjegyzékhez