5 html to-do’s voor elke muzikant, blogger en marketeer


In deze blogpost ga ik je uitleggen hoe je met enkele eenvoudige aanpassingen je website of blog naar eigen hand kan zetten. Ook al ken je (nog) niets van html!

Html is een taal bestaande uit een reeks tekens en begrippen die we kennen. Een taal die zegt hoe een website er moet uit zien. Voeg je alle begrippen en tekens op een correcte manier samen dan creëer je een website. Wanneer je naar een website surft worden al deze codes omgezet in tekst, beeld, kleur en layout. Naast html heb je ook css, flash of javascript. Allemaal verschillende talen die elk een specifieke rol spelen in een website.

Je moet gelukkig geen computer goochelaar zijn om je plaats op het internet te veroveren. Handige starterspaketten om te bloggen of een website op te zetten en ook sociale netwerken nemen het saaie werk voor zich zodat wij ons kunnen concentreren op de inhoud en de vorm. Soms wil je echter iets aanpassen, maar weet je misschien niet dat het kan en hoe. Het loont de moeite om volgende basis html codes bij de hand te houden.

Html codes staan altijd tussen tags, ofwel zulke haakjes: < >.  Deze tags duiden aan over welk thema het gaat. Tekst, een link, de achtergrond, een afbeelding, etc.

1. Aantrekkelijke links
Sommige mensen klikken makkelijker op een foto, andere klikken liever op een stuk tekst. Zorg er dus voor dat je niet alleen een stuk tekst hebt met een goede call-to-action, maar ook een relevante en aantrekkelijke foto die naar dezelfde pagina linkt.

De code van een link is <a href=”www.website.be”>tekst</a> de ‘tekst’ is het zichtbare deel.

De code van een afbeelding is <img scr=”www.webstie.be/foto.jpg”>. Letterlijk dus “image source is…”. Deze code vertaalt zich in een afbeelding.

Deze twee kan je natuurlijk combineren om een afbeelding te plaatsen die ergens naar linkt. De code ziet er dan zo uit: <a href=”www.website.be”><img scr=”www.webstie.be/foto.jpg”></a>. Waar voordien de ‘tekst’ zichtbaar was, wordt nu de afbeelding zichtbaar.

2. Te groot!
Misschien is je afbeelding te groot en past hij niet in de layout van je blog of website. Dan kan je deze op voorhand op je computer verkleinen of via html. Voeg achter de bron van de foto, de hoogte en breedte in pixel in. Zorg er voor dat deze in verhouding blijven! De code is als volgt:
<img scr=”www.webstie.be/foto.jpg” height=”540″ width=”650″>

3. Jaag je publiek niet weg
Wil je je publiek wegsturen? Liever niet denk ik. Zorg er dan voor dat wanneer je naar een andere website linkt, de pagina opent in een ander scherm. Doe je dit niet loop je de kans dat je publiek de andere website bekijkt en sluit en je al weer is vergeten. Niet goed. Je kan een link laten openen in een nieuw venster als volgt:
De originele code voor een links is: <a href=”www.website.be”>tekst</a>
De code om een link in een nieuw venster te openen: <a href=”www.website.be” target=”blank”>tekst</a>
De instructie die je computer nu krijgt is iets anders. De link en de tekst of afbeelding die je publiek ziet blijft onveranderd.

4. Teksteffecten
<strong>tekst</strong> maakt het stuk tekst tussen de code vetgedrukt
<br> html is doorlopende tekst, wil je een witlijn invoegen moet je deze code invoegen
<u>tekst</u> onderstreept het stuk tekst tussen de code
<center>tekst of foto</center> dit plaatst de inhoud tussen de tags in het midden van de pagina
<em>tekst</em> maakt het stuk tekst tussen de code italic

5. Sluit je tags
Wanneer je een tag niet sluit zal alle tekst die volgt dezelfde actie volgen. Bijvoorbeeld de rest van je pagina vetgedrukt als je </strong> vergeet in te voegen.
Heb je zo’n probleem? Lees dan even je codes na en voor je het weet heb je het probleem gevonden en opgelost!

Een voorbeeld
Het bovenstaande is waarschijnlijk even zeer veel om in één keer te begrijpen, maar begin zelf eerst eenvoudig. Heb je een blog op bijvoorbeeld WordPress? Wanneer je een blogposts schrijft moet je dan rechtsboven eens op ‘html’ ipv. ‘visual’ klikken en je zal de code achter de layout zien.
Om je direct duidelijk te maken hoe zo’n code er uit kan zien plaats ik hier de code die de eerste twee paragraven van deze post vorm geven:

<img class=”alignnone size-full wp-image-493″ title=”html basics voor muzikant, blogger en marketeer” src=”https://muziekmarketingblog.files.wordpress.com/2012/02/1083340_70894012.jpg&#8221; alt=”” width=”630″ height=”472″ />
In deze blogpost ga ik je uitleggen hoe je met enkele eenvoudige aanpassingen je <strong>website of blog naar eigen hand kan zetten</strong>. Ook al ken je (nog) niets van html!

<a href=”http://nl.wikipedia.org/wiki/HyperText_Markup_Language&#8221; target=”blank”>Html</a> is een taal bestaande uit een reeks tekens en begrippen die we kennen. Een taal die zegt hoe een website er moet uit zien. Voeg je alle begrippen en tekens op een correcte manier samen dan creëer je een website. Wanneer je naar een website surft worden al deze codes omgezet in tekst, beeld, kleur en layout. Naast html heb je ook css, flash of javascript. Allemaal verschillende talen die elk een specifieke rol spelen in een website.

 
Meer codes en tips zijn in veelvoud te vinden op het internet, dus laat je afschrikken van het internet!

Succes!

Advertenties

Over Freddie D
Hiphop muzikant. Freddie D brengt je stevige hiphop met zachte refreintjes. Check alle muziek via www.yeaya.be Yeayä!

5 Responses to 5 html to-do’s voor elke muzikant, blogger en marketeer

  1. Martha says:

    Spijtig genoeg moet ik vaststellen dat ik niet blijf lezen als de teksten te lang zijn. Te veel tekst: ik maak die fout zelf ook wel.

    • onetwod says:

      Ai, niet goed natuurlijk. Echter deze post vind ik net zeer kort samengevat wat html inhoudt en wat je er mee kan aanvangen. Zou hij nog korter even duidelijk zijn denk je? Welke stukken kan ik weglaten?

  2. Amber says:

    Spijtig dat ik dat nu pas lees, deze nuttige tips had ik kunnen gebruiken toen ik mijn blog aanmaakte.

  3. Pingback: Een eigen website is een must! (Deel XI van online promotie tips en tools voor muzikanten) « Muziek Marketing Blog

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s

%d bloggers liken dit: