Een website zonder code is als een fruitschaal zonder fruit, een kopje koffie zonder koffie. Kortom: dat kan niet. Maar de manier waarop het fruit in de fruitschaal zit, de koffie in het kopje zit of hoe de code is geschreven is ook erg belangrijk voor wat het eindresultaat is.
Hoe duidelijker de code geschreven is, hoe makkelijker het is voor andere om eraan mee te helpen. Dit kan op verschillende manieren van pas komen. Zo kunnen andere makkelijk zien hoe je de website sneller kan maken of hoe je nou net dat leuke element toe kan voegen aan de website waardoor er 20 keer zoveel bezoekers op af komen.
Kortom: een website zonder code is niks. Je kan er niks mee. Besteed er tijd aan en kies voor ovoWeb. Wij nemen alle technische moeilijkheden uit handen en doen al het werk voor jou!
Posts tonen met het label code. Alle posts tonen
Posts tonen met het label code. Alle posts tonen
woensdag 27 maart 2013
zaterdag 23 maart 2013
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!
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!
vrijdag 22 maart 2013
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.
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.
Abonneren op:
Posts (Atom)