Ben je op zoek naar een online academie of converterende website?
Neem contact op
  • Werk met Mij
  • Diensten
  • Blog
  • Over Mij
  • Contact
  • Inloggen
Menu
  • Werk met Mij
  • Diensten
  • Blog
  • Over Mij
  • Contact
  • Inloggen
  • geplaatst onder Uncategorized

Introductie van HTML en Styling

introductiehtml

Wanneer je aan het bloggen bent is het altijd handig om wat kennis van HTML en CSS te hebben. Zeggen deze twee termen je niets, lees dan even verder voor een korte introductie en wat handige tips.

HTML betekent hyper text markup language en is de computertaal (ook wel markup genoemd) waar webpagina’s uit bestaan. Deze taal is nodig zodat je browser begrijpt wat je wilt laten zien.

Door het toevoegen van CSS – Cascading Style Sheets – kan je deze elementen een bepaalde styling geven. Denk hierbij aan een kleur, lettertype, dikgedrukt, schuingedrukt, enzovoort. Iedere webpagina heeft dus een basis aan HTML en CSS nodig om deze te kunnen bekijken.

Doordat tegenwoordig een browser meer kan inlezen en begrijpen dan vroeger, betekent dat de mogelijkheden van HTML en CSS ook steeds geavanceerder worden. Gelukkig is er altijd wel een basis te vinden en die blijft ongeveer hetzelfde, dus daar gaan wij het vandaag over hebben.

De Basis

Door het toevoegen van markup kan een webpagina gelezen worden door een browser en bekeken worden door iemand die aan het surfen is op het internet. Één ding wat altijd terugkomt bij markup is dat wanneer je iets ‘opent’, dit vervolgens ook moet ‘sluiten’. Openen en sluiten doe je door middel van de volgende tekens <...>, dus door middel van een kleiner dan en groter dan teken. Op de drie puntjes voeg je de markup toe. Sluiten door je door een slash teken toe te voegen (/), dit ziet er uit als volgt </...>.

Om het duidelijker te maken zal ik enkele voorbeelden geven.

De basis van een HTML pagina


<!DOCTYPE html> <!-- Laat aan je browser zien dat je HTML5 toepast. -->
<html> <!-- openen html -->
 <head> <!-- openen head -->
  <title>De titel van de webpagina.</title> <!-- openen en sluiten title -->
 </head> <!-- sluiten head -->

 <body> <!-- openen body -->
  <p>Hier komt alles wat je wilt laten zien aan de bezoeker van de webpagina. </p> <!-- openen en sluiten paragraph -->
 </body> <!-- sluiten body -->

</html> <!-- sluiten html -->

Het gedeelte wat onder <body> komt te staan is eigenlijk alles wat je te zien krijgt op een pagina.

Ik wil hier inhoudelijk niet verder op ingaan. Aan het eind vind je een aantal links waar je meer informatie kan vinden.

Handige markup coderingen

Om een paragraph (alinea) aan te duiden gebruik je de volgende code:

<b>Dikgedrukte</b>, <i>schuingedrukte</i> en <u><span style="text-decoration: underline;">onderstreepte</span></u> tekst gebruik je zo.

Soms wil je een tekst laten beginnen op de volgende regel zonder een witte regel ertussen wat vaak bij een paragraph (alinea) te zien is.
Like this is on a new line!
And here’s another new line.

Je gebruikt hiervoor:

</br>

Stel, je ziet een mooie quote en wilt deze graag delen. Dan maak je gebruik van een blockquote.

<blockquote>The best design is the simplest one that works.
 
<cite>Albert Einstein (1879 - 1955)</cite></blockquote>

Headings

Headings, ook wel kopjes genoemd, zijn kopjes die in je tekst voorkomen. Je hebt er in totaal 6, hoe lager het nummer, hoe belangrijker ze zijn.
H1 is het allerbelangrijkst en mag maar één keer gebruikt worden op je website. Het wordt dan ook vaak toegepast voor de titel van je website. H2 komt daarna en duid vaak de slogan aan. Heb je deze niet kan je H2 ook gebruiken voor de titels van je artikelen. H3 kan je bijvoorbeeld gebruiken in het artikel zelf en ga zo maar even door.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Styling

Uitlijning tekst

Soms wil je text accentueren of in plaats van links, rechts plaatsen. Dat kan allemaal!

The fox jumps over the lazy dog.

<p style="text-align:left;"">The fox jumps over the lazy dog. </p>

The fox jumps over the lazy dog.

<p style="text-align:center;"">The fox jumps over the lazy dog. </p>

The fox jumps over the lazy dog.

<p style="text-align:right;"">The fox jumps over the lazy dog. </p>

Tekst Kleur

The fox jumps over the lazy dog.

<p style="color: red;">The fox jumps over the lazy dog. </p>

The fox jumps over the lazy dog.

<p style="color: #998099;">The fox jumps over the lazy dog. </p>

Styling Combinatie

The fox jumps over the lazy dog.

<p style="font-family: Times New Roman; font-size: 19px; font-style: italic; color: #998099">The fox jumps over the lazy dog. </p>

Bovenstaande voorbeelden gebruiken allemaal inline-css. Dit is alleen handig wanneer je een klein stukje anders wilt weergeven. Voor websites of blogs is het raadzaam om een stylesheet toe te passen. Een stylesheet is een document waarin alle styling voor de gehele website staat.

Een stylesheet ziet er ongeveer zo uit:

body { <!-- openen styling voor body -->
background-color: #f9f9f9; 
font-size: 12px; 
font-family: "Times New Roman", serif;
} <!-- sluiten styling voor body -->

h1, h2, h3, h4, h5, h6 { <!-- openen styling voor headings -->
font-family: "Arial", sans-serif;
letter-spacing: 2px;
margin: 15px 0; 
} <!-- sluiten styling voor headings -->

Net zoals bij markup is het ook noodzakelijk om bij CSS alles goed af te sluiten, echter gebruik je bij CSS hiervoor de volgende twee tekens { } zoals je in het voorbeeld kan zien.

Je begrijpt wel dat voor een website of blog er enorm veel CSS kan worden toegepast. En het leuke hiervan is, is dat er bijna dagelijks nieuwe mogelijkheden bij komen doordat browsers steeds meer kunnen ondersteunen. Je bent dus eigenlijk nooit uitgeleerd.

Heb je de smaak te pakken? Wil je meer leren over HTML en CSS? Ik heb een aantal links waar je gigantisch veel informatie kan vinden en ook eentje waar je alles kan testen.

Handige Links

  • W3Schools : De beste online site om alles omtrent coderen te leren (HTML, CSS, PHP, jQuery)
  • Handleiding HTML : Nederlandstalige site met veel informatie.
  • W3C Markup Service : Een online site om je markup te laten controleren op fouten.
  • Meer over DOCTYPE. Je hoeft niet alles te begrijpen maar het is wel belangrijk dat je toevoegt welke markup je gebruikt zodat je browser alles beter inleest.

Mocht je vragen hebben over HTML en CSS, stel deze dan gerust!

IMG_6579

Hi, ik ben Naomi

Ik ben eigenaresse en creatieve geest achter Deliciae Design – een door conversie geleide creatieve studio die gepassioneerd is in het helpen van creatieve bedrijven en het inspireren van ondernemers om hun bedrijf te verheffen door de kracht van branding en strategie.

Met mijn blog wil ik collega-creatieve ondernemers informeren over hoe ze hun bedrijf met doel en intentie kunnen laten groeien. Welkom!

Facebook Instagram Twitter Envelope

Een merkidentiteit die jou onderscheidt van de massa?

Neem vrijblijvend contact op.

Neem contact op

(Virtuele) Koffiedate?

Wil je eerst even kijken of wij een match zijn en of ik jou kan helpen aan een unieke merkidentiteit, website of academie? Neem contact op voor een afspraak.

Resources

Benieuwd naar wat zo’n grafisch webdesigner nu eigenlijk allemaal gebruikt? Bekijk dan mijn resources, misschien zit er iets tussen wat jij ook kan gebruiken voor jouw onderneming.

binnenkort online!

Ik deed mee met de Portfolio Bootcamp van @castawa Ik deed mee met de Portfolio Bootcamp van @castaway.nl en mocht op basis van een briefing een concept maken voor Makanu. Ik koos voor een logo ontwerp. Super leuk om te doen en zorgde dat ik weer uit mijn comfortzone qua ontwerpen getrokken werd. ❤️ Wat vind je er van? 

De brand story die ik kreeg was het volgende:

Vroege ochtend.
Koele lucht.
Frisse blik.
Diepe zucht.

Van geluk.
Over het uitzicht.
Van vlakke wateren.
Met reflecterend licht.

Kano aan de hand.
Peddel in je zij.
Trotseer je het water.
Als een vogel zo vrij.

Langs grotten.
Laaghangende bomen.
Langs kleine strandjes.
Laat jij je meestromen.

Naar de horizon.
En daar voorbij.
Stap in je Makanu.
En keer het tij.

Deze mooie briefing en brandstory is door de meiden van @castaway.nl gemaakt 💛
Afgelopen twee jaar hebben mij een boel nieuwe inz Afgelopen twee jaar hebben mij een boel nieuwe inzichten gegeven. Niet gek ook na alles wat er gebeurd is. Burn-out, borstkanker, chemotherapie, twee operaties... en heel wat onzekerheden en mentale struggles verder. Maar ik ben er nog. En daar valt ook wat voor te zeggen (vind ik 😊) 

Maar alle inzichten een plekje geven is best lastig als je nog midden in je herstel zit. De onzekerheid dat alles zo weer om kan slaan en het daardoor niet aandurven om stappen te nemen. Want "wat als..." 

Die vraag spookt dagelijks door mijn hoofd.

Maar blijkbaar is de drive om verder te gaan toch groter dan de angst voor de onzekere toekomst. 

Het voelt goed om alles op een rijtje te zetten en hieraan een creatieve vorm te geven. Afgelopen weken ben ik daar dan ook volop mee bezig en ik voel de creativiteit, de inspiratie en het enthousiasme weer langzaam door mijn aderen stromen. 

Het kriebelt dan ook om weer volop aan de slag te gaan met mijn bedrijf maar ik weet dat ik in mijn enthousiasme dan weleens te snel ga en mijzelf voorbij loop... Afgelopen jaren hebben mij doen beseffen dat stap voor stap het beste voor mij werkt. Dus we gaan op die manier verder, want met kleine stapjes kom je ook vooruit. 

Ik wilde (voor nu) graag een teken van leven plaatsen. Dat Deliciae Design nog steeds in business is ondanks alles wat het "universum" mijn kant op wilt gooien (#fyou)

In de afbeelding dan ook mijn aangepaste missie. 

Het blijven runnen van mijn bedrijf in de periode dat ik ziek was, was zonder de steun van de mensen om mij heen en een heleboel lieve mede-ondernemers nooit gelukt. Dankjewel voor jullie geduld, support en liefde! You know who you are! ❤️
Sales on auto-pilot! Wat als jij een gratis wegge Sales on auto-pilot!

Wat als jij een gratis weggever hebt, deze deelt via Social Media en dat een heleboel mensen deze vervolgens kunnen aanvragen door hun e-mailadres in te vullen. Opeens heb je dan een lijst met interessante leads!

Je mag ze dan - volledig AVG proof - enkele mailtjes sturen met een aanbod gerelateerd aan jouw weggever. Een aanbod die tijdelijk is en alleen dán voor die speciale lage prijs. Je voegt eventueel nog een timer toe voor extra urgentie.

De link in de e-mail wijst door naar je strategische salespagina waarin je ze overtuigd van jouw geweldige aanbod! 

Nu zijn je leads ineens klanten!

En dat allemaal middels een salesfunnel die je eenmalig inricht en daarna alleen optimaliseert indien nodig. Je verkoopt op de automatische piloot en je hoeft er (bijna) niks meer aan te doen. 

Een goede funnel werkt in 4 fases:

Awareness: promoten van je gratis weggever via organisch verkeer of middels betaalde advertenties. 

Interest: je geeft in ruil voor hun e-mailadres extra veel waarde in de weggever maar ook in de geautomatiseerde funnel waarin ze terecht komen. 

Decision: in je funnel informeer en bereid je de leads tevens voor op het aanbod dat gaat komen.

Action: je hebt een tijdelijk aanbod die de leads niet kunnen weerstaan. 

Dat is waar een salesfunnel om draait en waarmee je succesvol kunt lanceren. Het leuke is dat je dit voor heel veel doeleinden kunt gebruiken.

Nu is het bij een salesfunnel natuurlijk zo dat je wilt dat men overgaat tot aankoop, maar een soortgelijke funnel kan je ook inzetten voor het laten boeken van een gratis call waarin je dán je (eenmalige) aanbod doet. De “salespagina” zal dan feitelijk je agenda zijn om direct een afspraak in te plannen. 

Ik vind dit dus echt super leuk om voor mijn klanten aan de slag te gaan en ze helpen verder te optimaliseren zodat ze resultaten boeken.

Maak jij al gebruik van een salesfunnel?

Swipen naar links voor de templates uit de Marketing Kit! 💕

>> Klinkt dit nu heel interessant en wil je hier meer over weten? Schrijf je in voor mijn gratis website challenge waar ik op dag 3 alles vertel over Online Marketing! Link in bio. ❤️
Ik wilde al een tijdje iets organiseren, iets waar Ik wilde al een tijdje iets organiseren, iets waarbij ik mijn kennis makkelijk kan delen. Iets wat mij uitdaagt op allerlei vlakken maar tevens inspireert. Iets wat ik eigen doodeng vind maar om die groeipijnen te overkomen is het een keer nodig om uit de comfortzone te stappen. Ik ben namelijk heel goed in het maken van plannen waar ik vervolgens niets mee doe. Of nou ja, voor mij uit blijf schuiven vanwege weinig tijd, klant werk, belemmerende overtuigingen, noem het maar op. 

Maar nu spring ik in het diepe en ga ik gelijk 5 dagen aan de bak. Met een challenge waarbij alles samenkomt. Strategie, branding, marketing, techniek en lanceren - 5 onderdelen waar ik altijd mijn klanten mee help.

Ik vind namelijk dat een website veel meer is dan alleen een simpel visitekaartje online en dat wanneer strategie, branding, marketing en techniek samenvloeit, je een ijzersterke website hebt waardoor je veel sneller resultaat boekt. Zet daar een mooie lanceer strategie naast en dan weet ik zeker dat je online gaat rocken 🙌🏻

De challenge is van 12 tot en met 16 oktober. Iedere dag een opdracht met video. Iedere dag een live sessie in de FB groep. Iedere dag beantwoord ik jouw vragen zodat óók jij gaat rocken met je website. 

Doe je met mij mee? Check de link in bio. 💕
Facebook Twitter Instagram

© 2016 – 2021 Deliciae Design | Algemene Voorwaarden | Privacyverklaring

Beheer cookie toestemming
Wij gebruiken cookies om onze website en onze service te optimaliseren.
Functionele cookies Altijd actief
De technische opslag of toegang is strikt noodzakelijk voor het legitieme doel het gebruik mogelijk te maken van een specifieke dienst waarom de abonnee of gebruiker uitdrukkelijk heeft gevraagd, of met als enig doel de uitvoering van de transmissie van een communicatie over een elektronisch communicatienetwerk.
Voorkeuren
De technische opslag of toegang is noodzakelijk voor het legitieme doel voorkeuren op te slaan die niet door de abonnee of gebruiker zijn aangevraagd.
Statistieken
De technische opslag of toegang die uitsluitend voor statistische doeleinden wordt gebruikt. De technische opslag of toegang die uitsluitend wordt gebruikt voor anonieme statistische doeleinden. Zonder dagvaarding, vrijwillige naleving door uw Internet Service Provider, of aanvullende gegevens van een derde partij, kan informatie die alleen voor dit doel wordt opgeslagen of opgehaald gewoonlijk niet worden gebruikt om je te identificeren.
Marketing
De technische opslag of toegang is nodig om gebruikersprofielen op te stellen voor het verzenden van reclame, of om de gebruiker op een website of over verschillende websites te volgen voor soortgelijke marketingdoeleinden.
Beheer opties Beheer diensten Beheer leveranciers Lees meer over deze doeleinden
Bekijk voorkeuren
{title} {title} {title}
  • Werk met Mij
  • Diensten
  • Blog
  • Over Mij
  • Contact
  • Inloggen
Menu
  • Werk met Mij
  • Diensten
  • Blog
  • Over Mij
  • Contact
  • Inloggen