HOE

Hoe naar huis

Menu's

Pictogrambalk Menupictogram Accordeon Tabbladen Verticale tabbladen Tabkoppen Tabbladen op volledige pagina Beweeg tabbladen Bovenste navigatie Responsieve Topnav Navigatiebalk met pictogrammen Zoekmenu Zoekbalk Vaste zijbalk Paginanavigatie Responsieve zijbalk Navigatie op volledig scherm Off-Canvas-menu Beweeg de Sidenav-knoppen Zijbalk met pictogrammen Horizontaal scrollmenu Verticaal menu Bodemnavigatie Responsieve bodemnavigatie Onderste rand navigatielinks Rechts uitgelijnde menulinks Gecentreerde menulink Menukoppelingen met gelijke breedte Vast menu Schuif de balk omlaag bij scrollen Verberg navigatiebalk op scrollen Navbar verkleinen bij scrollen Sticky Navbar Navigatiebalk op afbeelding Vervolgkeuzemenu's voor zweven Klik op vervolgkeuzelijsten Trapsgewijze vervolgkeuzelijst Vervolgkeuzelijst in Topnav Dropdown in Sidenav Vervolgkeuzelijst Resp Navbar Subnavigatiemenu Drop-up Mega-menu Mobiel menu Gordijnmenu Samengevouwen zijbalk Samengevouwen zijpaneel Paginering Paneermeel Knop groep Verticale knopgroep Sticky Social Bar Pil navigatie Responsieve koptekst

Afbeeldingen

Diavoorstelling Galerij met diavoorstelling Modale afbeeldingen Lichtbak Responsief afbeeldingsraster Afbeeldingsraster Tabblad Galerij Afbeeldingsoverlay vervagen Dia overlay afbeelding Afbeelding Overlay Zoom Titel afbeelding overlay Afbeeldingsoverlay-pictogram Afbeeldingseffecten Zwart-wit afbeelding Afbeeldingstekst Afbeeldingstekstblokken Transparante afbeeldingstekst Afbeelding op volledige pagina Formulier op afbeelding Heldenafbeelding Achtergrondafbeelding vervagen Wijzig Bg bij scrollen Afbeeldingen naast elkaar Afgeronde afbeeldingen Avatar-afbeeldingen Responsieve afbeeldingen Afbeeldingen centreren Miniaturen Rand rond afbeelding Ontmoet het team Kleverige afbeelding Een afbeelding spiegelen Schud een afbeelding Portfolio Galerij Portfolio met filtering Afbeelding zoomen Afbeelding vergrootglas Schuifregelaar voor beeldvergelijking favicon

Toetsen

Waarschuwingsknoppen Overzichtsknoppen Split-knoppen Geanimeerde knoppen Vervagende knoppen Knop op afbeelding Knoppen voor sociale media Lees meer Lees minder Knoppen laden Downloadknoppen Pil Knoppen Meldingsknop Pictogramknoppen Volgende/vorige knoppen Meer Knop in Nav Blokkeerknoppen Tekstknoppen Ronde Knoppen Scroll naar boven-knop

Formulieren

login formulier Aanmeldingsformulier Afrekenformulier Contact Formulier Sociaal inlogformulier Inschrijfformulier Formulier met pictogrammen Nieuwsbrief Gestapelde vorm Responsieve vorm Pop-upformulier Inline formulier Invoerveld wissen Nummerpijlen verbergen Tekst kopiëren naar klembord Geanimeerd zoeken Zoekknop Zoeken op volledig scherm Invoerveld in Navbar Inlogformulier in Navbar Aangepast selectievakje/radio Aangepaste selectie Tuimelschakelaar Vink selectievakje aan Caps Lock detecteren Triggerknop op Enter Wachtwoordvalidatie Toggle Zichtbaarheid wachtwoord Formulier met meerdere stappen Automatisch aanvullen Automatisch aanvullen uitschakelen Spellingcontrole uitschakelen Knop voor het uploaden van bestanden Lege invoervalidatie

Filters

Filterlijst Filtertabel Filterelementen Filter Dropdown Sorteer lijst Spell-tabel

Tafels

Zebra gestreepte tafel Middelste tafels Tafel over de volledige breedte Side-by-side tafels Responsieve tabellen Vergelijkingstabel

Meer

Video op volledig scherm Modale dozen Modaal verwijderen Tijdlijn Scroll-indicator: Voortgangsbalken Vaardigheidsbalk Bereikschuifregelaars Knopinfo Weergave-element zweven Pop-ups Opvouwbaar Kalender HTML bevat Te doen lijst Laders Sterrenclassificatie Gebruikersbeoordeling Overlay-effect Contactchips Kaarten Kaart omdraaien Profielkaart Productkaart Waarschuwingen Uitroepen Opmerkingen: Etiketten Cirkels Stijl HR Coupon Lijst groep Lijst zonder opsommingstekens Responsieve tekst Uitgesneden tekst Gloeiende tekst Vaste voettekst Kleverig element gelijke hoogte Clearfix Responsieve floats Snack bar Venster op volledig scherm Roltekening Vloeiend scrollen Verloop Bg Scroll Sticky Header Koptekst bij scrollen verkleinen Prijstabel Parallax Beeldverhouding Responsieve Iframes Wisselen van leuk/niet leuk Toggle Verbergen/Tonen Schakel donkere modus in Tekst wisselen Klasse wisselen Klasse toevoegen Klasse verwijderen Actieve klasse Boom zicht Eigenschap verwijderen Offline detectie Zoek verborgen element Webpagina omleiden Zoom zweven Flip Box Verticaal centreren Middelste knop in DIV Overgang bij zweven Pijlen vormen Download link Element op volledige hoogte Browservenster Aangepaste schuifbalk Verberg schuifbalk Schuifbalk tonen/dwingen Apparaat uiterlijk Bewerkbare rand Tijdelijke aanduiding kleur Tekst selectie kleur Kogelkleur Verticale lijn Verdelers Animeren van pictogrammen Afteltimer Schrijfmachine Binnenkort pagina Chatberichten Pop-up chatvenster Gesplitst scherm Getuigenissen Sectieteller Citaten Diavoorstelling Afsluitbare lijstitems Typische apparaatonderbrekingen Versleepbaar HTML-element JS-mediaquery's Syntaxis markeerstift JS Animaties JS-snaarlengte JS Machtsverheffen JS-standaardparameters Huidige URL ophalen Huidige schermgrootte ophalen Iframe-elementen ophalen

Website

Maak een gratis website Maak een website Een statische website maken Maak een website (W3.CSS) Een website maken (BS3) Maak een website (BS4) Maak een website (BS5) Een website maken en bekijken Een linkboom-website maken Maak een portfolio Maak een CV Maak een restaurantwebsite Maak een zakelijke website Maak een WebBook Center-website Contact Sectie Over pagina Grote kop Voorbeeldwebsite

Rooster

2-kolomsindeling 3-kolomsindeling 4-kolomsindeling Uitbreidend raster Lijstrasterweergave Gemengde kolomindeling Kolomkaarten Zig Zag-indeling Bloglay-out

Google

Google-kaarten Google-lettertypen Koppelingen van Google-lettertypen Google Analytics instellen

Converters

Gewicht omrekenen Temperatuur converteren Lengte converteren Converteer snelheid

Blog

Een baan als ontwikkelaar krijgen Word een front-end ontwikkelaar.

Hoe maak je een linkboom website?

Met een linkboomwebsite kunt u al uw links op één site delen.

Het is een bestemmingspagina waar u de links naar uw sociale netwerken, blogposts, bedrijven, projecten en meer kunt weergeven.

Maak gratis een linktree-website »

Waarom een ​​linkboom-website maken?

De links-website is geweldig om uw online aanwezigheid te laten groeien.

Het maakt het gemakkelijk om links te delen voor de plaatsen waar u inhoud heeft.

Bovendien helpt de website met links mensen om op meer dan één plek met u in contact te komen.

Door de linkswebsite zelf te maken, heeft u er volledige controle over.

Hoe de site eruitziet, weerspiegelt uw merk. Ontwerp het zoals u eruit wilt zien.


Wat moet ik weten om mijn linktree-website te maken?

HTML, CSS en JavaScript zijn de basistalen om een ​​website te maken.

Het is alles wat je nodig hebt om je links-site te maken.

  1. Maak de structuur met HTML. Het eerste dat u moet leren, is HTML, de standaard opmaaktaal voor het maken van webpagina's.
  2. HTML leren
  3. Stijl met CSS. De volgende stap is om CSS te leren, om de lay-out van uw webpagina in te stellen met prachtige kleuren, lettertypen en nog veel meer.
  4. Leer CSS ❯
  5. Maak het interactief met JavaScript. Na het bestuderen van HTML en CSS, moet u JavaScript leren om dynamische en interactieve webpagina's voor uw gebruikers te maken.
  6. Leer JavaScript ❯

Hoe begin ik?

Er zijn twee manieren om te beginnen met het bouwen van een linkboomwebsite.

Helemaal opnieuw bouwen of een sjabloon gebruiken.

Bouwen met W3Schools Spaces

In Spaces kunt u uw linkboomwebsite bouwen en ermee experimenteren.

Hier kun je statische sites maken met HTML, CSS en JavaScript.

Alles wat je nodig hebt, direct in de browser.

Leer meer ❯

Een webpagina met een linkstructuur helemaal opnieuw bouwen

Het eerste dat u hoeft te doen, is een lay-out maken en vervolgens inhoud toevoegen.

Ga naar ons artikel over het maken van een website om een ​​websitelay-out te maken: Een website maken

Nadat u de lay-out hebt gemaakt. Maak de twee hoofdsecties die hieronder worden vermeld:

1. Biologische sectie.

De bio-sectie is het eerste wat mensen zien wanneer ze uw linkboom-website bezoeken.

Het wordt weergegeven bovenaan de linkboom-website.

Houd het kort en krachtig.

Het bio-gedeelte kan uw afbeelding, naam en uw beroep bevatten.

Mensen voelen zich meer op hun gemak als ze weten hoe je heet en hoe je eruitziet.

afbeeldingssectie

2. Links sectie.

Het gedeelte met links bevat alle links die u wilt delen.

Het wordt weergegeven onder het bio-gedeelte.

Zorg ervoor dat de links goed gestructureerd zijn.

links sectie

Bouwen met een sjabloon

Beginnen met sjablonen is een uitstekende manier om inspiratie op te doen en te leren.

De link tree templates kunnen direct in Spaces geladen worden. Ga met een paar klikken aan de slag.

Kopieer de code en plak deze in de Spaces-editor of sla deze op in Spaces vanuit de TryIt-editor.

Begin "

* geen kredietkaart nodig

Personaliseer de sjabloon

Hier is een benadering in vier stappen om de sjabloon uw eigen te maken.


Stap één: de achtergrond wijzigen

Zoek de eigenschap background of background-image in de code en wijzig de URL.

Lees hier hoe u een achtergrondafbeelding kunt wijzigen: Achtergrondafbeelding wijzigen


Stap twee: voeg je foto toe

Zoek de tag <img> en wijzig deze in de URL naar uw afbeelding.

Lees hier hoe u een afbeelding kunt wijzigen: Een afbeelding wijzigen


Stap drie: schrijf je bio

Zoek de alinea-tags bovenaan de code en verander de tekst tussen de tags <p> en </p>.

Lees hier voor meer informatie over paragrafen: Over HTML-paragrafen


Stap vier: voeg uw links toe

Zoek de ankertags en verander de tekst tussen de <a>- en </a>-tags.

Lees hier voor meer informatie over ankertags: Over HTML-ankertags


Blader en kies een sjabloon

We hebben kant-en-klare sjablonen die u kunt gebruiken. Hier zijn enkele voorbeelden:

Sociale links 1

Sociale links 2

Sociale links 3


W3Schools-ruimten

W3Schools-ruimten

Bouw uw statische website met W3Schools Spaces.

Ga gratis aan de slag