In detail: introductie HTML en CSS (deel 2)

In de voorgaande cursus hebben we geleerd hoe we een HTML pagina aan kunnen maken en deze konden bekijken. In deel 2 leren we hoe we de opmaak (de style, CSS, Cascading Style Sheet) van de pagina aan kunnen passen en zullen we de tekstkleur en achtergrondkleur veranderen.
Voor deze cursus gaan we de volgende code gebruiken. Zet deze code in het bestand dat je gebruikt voor de webpagina.
Als je dit script opent in je browser, zie je dat de achtergrondkleur rood is geworden en de tekstkleur wit is. Je ziet in de code dat we style tags aan de head hebben toegevoegd. Deze geven de opmaak aan voor de pagina. Dit is CSS code. De selector body (het gedeelte voor de {), geeft aan dat we de opmaak van de body gaan aanpassen. De body is het gehele document. Alle zichtbare onderdelen van de webpagina staan hier in opgeslagen. Elke regel wordt gescheiden door puntkomma's. Eerst geef je een eigenschap aan die je wilt wijzigen (bijvoorbeeld color) en dan geef je, na de dubbele punt de waarde aan van deze eigenschap. Als je van de body de achtergrondkleur wilt wijzigen, gebruik je de background-color eigenschap. In het voorbeeld is deze op de waarde red (rood) gezet voor de body. De color (tekstkleur) staat op white (wit) en is dus precies hetgeen wat je te zien krijgt.

Nu heb je het een en andere geleerd over CSS. CSS staat altijd tussen style tags en kan zowel in de head als in de body worden aangeduid. Veel plezier met het maken van nieuwe webpagina's en wie weet maakt u wel de volgende Facebook!

In detail: introductie HTML en CSS (deel 1)

Wat is het internet zonder HTML? Helemaal niks! Zonder HTML zou geen een webpagina bestaan (en dus ook niet die van u). HTML staat voor HyperText Markup Language en is een taal voor documenten op het web. In deze cursus krijgt u basiskennis voor het bouwen van webpagina's. Laten we meteen maar aan de slag gaan! Maar voor dat we kunnen beginnen krijgt u eerst wat termen van ons geleerd. Een tag is wat tekst die tussen haken staat. Dus tussen < en >. Een voorbeeld hiervan is <html>. Dit wordt ook wel een HTML tag genoemd. Alle tags moeten worden afgesloten, dus als u begint met een HTML tag (<html>), moet er ook een einde zijn. Dit duiden we aan met </html> (met een extra slash). Zo wordt de titel van de pagina als volgt aangegeven: <title>Titel van mijn pagina</title>. <title> geeft het begin aan en </title> het eind. Sommige tags worden meteen afgesloten, maar dit is een uitzondering op de regel. Als u een plaatje in wilt voegen, gebruikt u hiervoor de <img> tag (img staat hier voor image). Deze kan "inline" worden afgesloten, dus nog in de regel zelf: <img /> (in plaats van <img></img> wat overigens ook zou kunnen maar veel omslachtiger is).

Voordat we aan de slag kunnen met HTML moeten we eerst een bestand aanmaken. Open hiervoor Notepad (Kladblok) of een andere tekstverwerker naar keuze. Zet hier wat tekst in, deze zullen we later gaan vervangen door HTML code en sla het op als webpage.html. Let er wel op dat u tijdens het opslaan kiest voor alle typen in plaats van opslaan als tekstbestand. Nadat het bestand is opgeslagen kunt u het openen. Deze wordt waarschijnlijk geopend in uw favoriete browser (Chrome, Internet Explorer, Firefox, etcetera).

Nu gaan we onze eerste HTML pagina maken! Zorg ervoor dat u webpage.html geopend heeft in uw tekstverwerker en schrik niet van de code die nu gaat komen! We gaan het stap voor stap doornemen.
Je ziet verschillende tags (die ook weer worden afgesloten). De HTML tag (<html>, afgesloten door </html> op het eind) geeft aan dat het om een HTML bestand gaat. De head-tag geeft de head aan. Hierin staat informatie die je niet ziet, die zich "in je hoofd (head)" bevindt. Wat je wel ziet is de body (je lichaam). Hier staat nu de tekst "Hallo internet!" in. In de head (tussen <head> en </head>) zie je een title tag (<title>) waarin de titel van de webpagina staat vermeld. Als je de webpagina in de browser hebt geopend, zie je de tekst "Mijn paginatitel" bovenaan verschijnen! Deze titel wordt ook gebruikt door zoekmachines, dus maak een goede keuze voor je titel!

Dit was een eerste kennismaking met HTML. De volgende keer gaan we wat extra tags leren en wellicht een begin maken aan CSS, een taal die gebruikt wordt voor de opmaak van HTML bestanden.

In-field reportage: app ontwikkelen (Pananda)

Bij ovoWeb houden we ons met van alles bezig. Wat ons afgelopen tijd erg bezig houd is Pananda. Dit is een nieuwe app waar gebruikers fotowedstrijden kunnen doen.
Er komt veel bij kijken. Social media is tegenwoordig een belangrijk aspect van PR van een app of website. Hier heeft veel tijd in gezeten om Pananda enigszins bekend te krijgen bij het grote publiek. Daarnaast investeren we nu ook tijd in Android en iOS development zodat Pananda straks ook op uw smartphone of tablet werkt. Echter zijn we nog te klein om dit alleen te kunnen doen en daarom zijn we op zoek naar een investeerder. We hebben al enkele gesprekken gehad, maar nog geen partij is bereid om mee te werken.
Het is leuk om je app te zien groeien. In het begin konden we nog niks, maar nu zien we dat alles langzaam gaat werken zoals we bedacht hebben.
De voortgang is te zien op pananda.net en we zullen alle gebruikers op de hoogte houden van de voortgang. Wordt ongetwijfeld vervolgd!