%20 Blog

Flower

Posts Tagged ‘html’

Cursus HTML met CSS les 2 (notepad.exe FTW)

Een website bestaat uit meerdere bestanden. De plaatjes op de website zijn gewone jpg of gif bestanden, je opmaak staat in een css (cascading style sheet) bestand. Eventuele gezellige animaties of widgets staan in js (javascript) bestanden. En een html file knoopt alles aan elkaar, en bevat bovendien alle tekst.

Html code is eigenlijk gewoon Engels. Ieder item dat je in je website bouwt roep je aan door middel van een tag. Iedere tag kent een begin en een eind. Bijvoorbeeld een stukje onderstreepte tekst begin je met <u> waar de u staat voor underline. En eindig je met </u> alles tussen deze twee tags in zal onderstreept worden.

Niet alleen tekst opmaak en zichtbare elementen bouw je op met tags. Ook de basis structuur van je pagina bestaat uit tags. Dit begint al het het aangeven dat het om een html file gaat. Het feit dat je de pagina opslaat als .html bestand heeft hier namelijk geen invloed op. Gedownloade bestanden werken namelijk anders dan bestanden die je van je schijf opent. Technisch verhaal, Google maar ‘mime types’ als je meer wilt weten.

Een html pagina begint met <html> en eindigt met </html>. De body, het zichtbare gedeelte begint met <body> en eindigt met </body>. en het gedeelte waar de verwijzingen naar javascripts, css, en de pagina titel heet head. En begint dus met <head> en eindigt met </head>.

Ik zal hieronder een basis pagina schrijven:

<html>
<head>
<title>Naam van de pagina</title>
</head>
<body>
Hier komt de inhoud van de pagina.
</body>
</html>

Hiermee heb je je eerste pagina voor elkaar. Gewoon door mijn code te copy pasten. Geen kunst dus. Vervolgens gaan we de opmaak vastleggen in een css file. In een css file gebruiken we dezelfde tags, maar dan zonder < en > eromheen.

Van zo’n tag kun je vervolgens vastleggen wat voor font, achtergrondkleur, tekstkleur en bijvoorbeeld tekst afmeting je wilt terugzien in dat item. In de bovenstaande pagina hebben we alleen een body tag in het zichtbare gedeelte. Dus onze css file wordt niet groter dan dit:

Body {
Colour: black;
Font: comic-sans;
}

Zoals je ziet worden alle opmaak items onder elkaar gezet, en ingesloten door { en }. Sla dit bestand op als main.css zodat je weet dat dit je hoofd opmaak is. Je kunt namelijk later voor specifieke pagina’s een extra setje opmaak regels maken. Maar daarover later meer. Dit bestand roep je vervolgens aan met de volgende regel in je head toe te voegen:

 <LINK href=”main.css” rel=”stylesheet” type=”text/css”>

Dan komt de volledige pagina er dus zo uit te zien:

<html>
<head>
<title>Naam van de pagina</title>
<LINK href=”main.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
Hier komt de inhoud van de pagina.
</body>
</html>

Nu heb je een website met een Stylesheet.

Cursus HTML met CSS les 1 (geen computer nodig)

Wegens veel vraag naar hulp bij het maken van een website heb ik besloten een cursus te schrijven. Ik ben niet goed in het maken van websites, maar ik snap wel hoe het werkt, en ik heb zo mijn techniek om tot een acceptabele website te komen.

De eerste stap is het bedenken waarom je een website gaat maken. Wat is de content, en voor wie is het bedoeld. Vaak is je eerste website een persoonlijke pagina, waar je wat wilt schrijven over jezelf, eventueel je gezin. Fotos delen, misschien een mogelijkheid voor mensen om berichtjes achter te laten.

Als je hier een beetje een beeld van hebt, kun je gaan kiezen wat voor soort website je wilt bouwen. Een kleine site, die af en toe geupdate wordt met vakantie fotos en een verjaardagsverhaaltje kun je het beste zelf bouwen. Grotere websites zijn makkelijker om bovenop een content management systeem (cms) te bouwen. Voor nu laten we cms even links liggen, en richten we ons op zelf een website bouwen.

Maar hoe moet deze site er uit zien? Dit heb je waarschijnlijk wel in je hoofd zitten, maar je hebt geen idee hoe je dit naar een website kunt vertalen. Naar mijn idee is het het makkelijks om een vel papier te pakken, en een set stiften of krijtjes. Zo grof mogelijk tekenmateriaal, dat geeft je namelijk meer vrijheid om conceptueel te denken.

Beschouw het papier als een full-screen beeld in je browser. En teken in de beeld je website. Gewoon lekker krabbelen, scheef is alleen maar mooier voor je schets. Laat je ook nooit beperken door dingen waarvan je denkt dat ze niet gemaakt kunnen worden. Dat komt wel in de bouw fase, nu is het belangrijk dat er een ontwerp komt.

Dit is het ontwerp wat we deze cursus gaan gebruiken. Een simpele opzet met titelbalk, menubalk links en groot hoofdvak.

Briljant scriptje

Via @Jarno ontving ik de volgende briljante oplossing voor ronde hoekjes in IE:

Zie hier onder Opposite corners met behulp van een JS file, en een lichte aanpassing aan de manier waarop de border radius wordt aangeroepen.

Niet met:

-moz-border-radius: 10px 10px 0px 0px;

Maar met:

-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;

En dan werkt het cross browser. Vèt.

Single pixel lines en border radius

Ik hou van single pixel lines. En ronde hoekjes. Dus heb ik even gegoogled hoe ik dat voor elkaar ga krijgen.

Op deze site vond ik het volgende comment


Lawrence says:
August 17, 2010 at 2:56 pm

Use this code to make only top coners round

-moz-border-radius: 10px 10px 0px 0px;

-webkit-border-radius: 10px 10px 0px 0px;

behavior:url(border-radius.htc);

De single pixel line heb ik dan weer hier vandaan gestolen.


div.WhiteLine {
height:0px;
border-top: 1px solid #FFFFFF;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
}

I am using this class to create a 1 pixel line between tables like so:
<table>
<tr>
<td></td>
</tr>
</table>

<div />

<table>
<tr>
<td></td>
</tr>
</table>
</code>

En zo jat je je website een beetje bij elkaar.