Bio link oldal készítő

Így készítsd el a bio link oldaladat

1. A Profil alatt írd be a Név vagy márka és a Rövid bemutatkozás mezőbe a szöveget. A bemutatkozás sortörései megmaradnak.
2. Ha szeretnél, adj hozzá Profilkép (nem kötelező) elemet: húzz egy képet a mezőre, vagy kattints rá egy fájl kiválasztásához. A képet a böngésződ olvassa be, és beágyazza az oldalba; soha nem kerül feltöltésre.
3. A Linkek alatt töltsd ki minden gomb Link szövege és Cím (URL) mezőjét. További linkekhez kattints a Link hozzáadása gombra, a sorrendet a ↑ és ↓ gombokkal módosíthatod, az × pedig eltávolít egyet.
4. A Megjelenés alatt válassz Témat (Világos, Sötét, Óceán, Naplemente, Erdő), vagy állítsd be magad a négy színt, majd válaszd ki a Gomb alakja és a Betűtípus értékét.
5. Nézd meg az Előnézetet, majd kattints Az index.html letöltése gombra. A HTML másolása ugyanezt a kódot másolja, ha inkább egy meglévő oldalba illesztenéd.

A Példa betöltése egy mintaprofillal tölti ki az űrlapot, hogy lásd, hogyan néz ki az oldal, a Törlés pedig elölről kezdi.

Az eszköz a böngésződben fut. Semmit, amit beírsz, nem küld el a szervernek.

Mit kapsz

Az eredmény egyetlen HTML-fájl, amelyben minden benne van: a stílusok egy <style> blokkban, a fotó data URI-ként beágyazva, és nincs JavaScript, követőszkript, webes betűtípus vagy külső kérés. Ettől az oldal nagyon gyors (általában néhány kilobájt plusz a fotó), a látogatóid számára privát, és évekig megőrizhető: nincs olyan szolgáltatás, amely leállhat, árat változtathat vagy saját márkajelzést tehet rá.

Az oldal reszponzív: a gombok kitöltik a telefon szélességét, asztali gépen pedig kényelmes szélességűek maradnak. Tartalmaz lang attribútumot, viewport címkét, címet (a neved) és meta leírást (a bemutatkozásod), így jól mutat a keresési találatok és linkelőnézetek között. A weboldalakra mutató linkek rel="noopener" attribútummal nyílnak, az e-mail-címekből pedig automatikusan mailto: link lesz.

Az ellenőrzések

Az Ellenőrzések lista jelzi azokat a linkeket, amelyek címe nem érvényes web-, mailto: vagy tel: cím. Az ilyen linkeket a rendszer kihagyja ahelyett, hogy elromolva publikálná, a javascript: jellegűeket pedig mindig elutasítja. Figyelmeztet akkor is, ha a gombok vagy az oldal szövegkontrasztja 4,5:1 alatt van (ez a WCAG szintje a normál szövegre), és ha a fotó nehéz. Egy 300 × 300 pixeles fotó bőven elég egy 104 pixeles kerek avatarhoz, nagy sűrűségű képernyőn is.

Hogyan tedd fel az oldalt az internetre

A fájlnak webcímre van szüksége, mielőtt beillesztheted az Instagram-, TikTok- vagy YouTube-bemutatkozásodba. Három gyakori lehetőség:

• GitHub Pages (ingyenes): hozz létre egy nyilvános tárolót, töltsd fel az index.html fájlt, majd a Settings → Pages menüben válaszd a telepítést a main ágról. Az oldal a https://felhasznalonev.github.io/tarolo-neve/ címen jelenik meg.
• Netlify Drop (ingyenes): tedd az index.html fájlt egy mappába, és húzd a mappát a Netlify Drop oldalra. Azonnal kapsz egy véletlen címet; hozz létre ingyenes fiókot az oldal megtartásához, szebb név választásához vagy saját domain csatlakoztatásához.
• Saját tárhely: töltsd fel a fájlt a tárhelyszolgáltatód fájlkezelőjével vagy FTP-n, például egy links mappába, így a https://te-domained.hu/links/ címet kapod.

Az oldal későbbi frissítéséhez módosítsd az űrlapot, töltsd le újra a fájlt, és cseréld le a régit.