Jump to content

Actie Black Friday: PIA VPN voor slechts €1,94 per maand & 3 maanden gratis

  • Hoog gebruiksgemak en snelle VPN
  • Goede kwaliteit voor de scherpste prijs
  • Torrents, Usenet en Netflix mogelijk!
  • Plus 3 maanden gratis en 30 dagen niet goed geld terug

En de handleiding: Private Internet Access :goed:

  • Sign Up


Search the Community

Showing results for tags 'css'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Algemeen
    • Algemeen
    • Nieuwe leden
    • Internet, Netwerken, VPN en Privacy
    • (Anti)Virus - Firewalls - Spyware
    • Hardware - Telefonie - Navigatie - TV
    • De huiskamer
  • Downloaden en uitpakken
    • Downloaden via Nieuwsgroepen & Spotnet
    • Downloaden via Torrents & Popcorn time
    • Downloaden via alle overige methoden
    • Repareren, uitpakken, branden en overige problemen
  • Games en Consoles
    • Alles over Games en Consoles
  • Films, series, video's, audio en e-books
    • Afspelen van Films en Series
    • Films kopiëren, Rippen en Branden
    • Alles over Films, Series, TV en E-books
    • Audio en muziek
  • Programma's & Software
    • Software algemeen
    • Besturingssystemen
    • Apple Software, Hardware en Besturingssystemen
  • Duken.nl
    • Bugreport, Feedback, Request & Mededelingen
    • F.A.Q. en Handleidingen
    • De Bazaar
  • Maak een eigen gratis forum / club's Discussies
  • The Homebrew Channel's Homebrew Forum

Categories

  • Downloaden
  • Na het downloaden
  • Handige tips

Categories

  • Software reviews
    • Welke VPN provider is het beste?
    • Reeder 5 voor macOS
    • Infuse Pro 5 Apple TV Review
    • Alfred 4 voor macOS Review
    • Bartender 3 voor macOS review
  • Hardware reviews
    • Xiaomi Redmi Note 7 Review
    • ALLDOCUBE M5X 4G Tablet Review
    • Alfawise V8S Robot Stofzuiger Review
    • NOKIA X6 (6.1) Review
    • Xiaomi Mi TV Box Review
    • Jison case en portemonnee Review
    • Alfawise JD T8610 WiFi camera Review
    • ELE MGCOOL Band 5 Review
    • Teclast tablet P80 Pro review
    • Alfawise T1 Mini PC Review
    • Lenovo Cardio Plus HX03W Review
    • 8Bitdo SF30 Pro draadloze controller review
    • Alfawise X 3200 beamer met Android Review
    • Teclast F7 Review
    • Xiaomi Mi A1 Review
    • Xiaomi Mi Robot Stofzuiger Review
    • Xiaomi Mi Band 2 Smartband
    • Lenovo Xiaoxin TB - 8804F Review
    • T95Z Plus Android tv box Review
    • RC Off-road auto WLtoys No. 12428 Review
    • Elephone S8 Review
    • OUKITEL K6000 Plus Review

Categories

  • Movie torrent, NZB and download info
  • Serie torrent NZB download and info

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Facebook


Instagram


Twitter


Skype


WhatsApp


Awards


Geslacht


Extra


Download met


Browser


Provider


Locatie


Favoriete Films


Luistert graag naar


Sport


Helden


Tv programma's / Series


Overige Intresses

Found 2 results

  1. HTML, Structuur & CSS In dit deel gaan we echt een begin maken aan de HTML. We gaan een logische structuur opbouwen zodat het in de toekomst makkelijk is om onze code te begrijpen en daarop verder te bouwen. De HTML dient als skelet voor je website, bijna alles bouwen we daar omheen. De Code HTML5 kent een paar handige functies die helpen bij het logisch opstellen van je code. Deze gaan we tussen de body tags plaatsen om een grove structuur aan te leggen. Het is handig om je design er bij te pakken, zo weet je zeker dat je niets vergeet. We delen de pagina in 3 delen op. De header (niet verwarren met head), de wrapper en de footer. De header en footer zijn altijd hetzelfde, de wrapper kun je zien als content die vaak aangepast wordt. <!DOCTYPE html> <html> <head> <title>Downloadsite</title> </head> <body> <header> </header> <div id="wrapper"> </div> <footer> </footer> </body> </html> Zoals je kunt zien staan onze nieuwe tags (header, div, footer) een stukje verder dan de andere tags. Dit doen we om duidelijk te maken waaronder deze tags vallen. Zo zie je duidelijk dat header onder body valt. De div tag met daarin een id dat wrapper heet kun je zien als een apart aangewezen gebied gereserveerd voor alle content die daarin komt. Elke tag kunnen we een id meegeven op deze manier, je kunt zelf de naam kiezen voor de id. Wij kiezen wrapper omdat dit de meest gebruikte naam is voor je content. Met een id kun je een individuele tag een naam geven, dit is later handig omdat we individuele tags gaan opmaken met css. Later hier meer over. De header invullen Zoals in het design te zien is hebben we een ontzettend mooi geschreven logo genaamd "Downloadsite" en een soort slogan daaronder. Onder de slogan hebben we een navigatie. Wat willen we hiermee doen? Nou, meestal kom je terug naar de index pagina (homepage) van de website als je op het logo klikt. Dit kunnen we al regelen met HTML! Met de <a> tag kunnen we van de <h1> tag een klikbare link maken die ons doorverwijst naar de homepage. Het is misschien een beetje gek om te doen, aangezien we al op de homepage zitten, maar het is nog gekker om het weg te halen. Om erachter te komen wat deze tags nu precies betekenen kun je kijken op w3schools (google maar ). Wat je ook kunt doen is de onderstaande code overtypen (niet kopiëren) naar je codeer programma en kijken wat het precies doet. De navigatie gaan we lekker simpel houden, met de <ul> tags geven we aan wat voor lijst we willen gaan maken. Wij gebruiken een unordered list. De <li> staat voor list, je kunt het vergelijk met een takenlijstje. Daar staat alles netjes onder elkaar vaak met een witte regel er tussen. koffie appelsap melk Omdat de list tags tussen de <ul> tags staan, schuiven we ook deze een tab (4 spaties) naar voren om een duidelijk onderscheid te maken. <a href="index.php"><h1>Downloadsite</h1></a> <p>Download hier de leukste muziek </p> <ul> <li><a href="about.php">over downloadsite</a></li> <li><a href="upload.php">uploaden</a></li> <li><a href="policy.php">policy</a></li> </ul> Deze code gaat dus tussen de <header> tags. De footer In de footer plaatsen we een klein stukje tekst. Hiervoor gebruiken we de <p> tags dat staat voor paragraph. Het plaatje werkt net iets anders. In onze mappenstructuur hebben we een mapje dat images heet. Hier zetten wij ons plaatje neer dat wij in onze footer willen laten zien. Met de / geef je aan hoe diep je in de map zit (hetzelfde als in windows). Net als bij de <a> tag geven we in de tag zelf aan wat we willen gaan doen. src="" staat voor "source is" De alt tag is optioneel, hier geven we een alternatieve naam mee voor het plaatje. De <img> tag kun je niet afsluiten met </img>, dit omdat je er simpelweg niks in kan zetten. <p>Copyright by Kees Padhaas</p> <img src="images/plaatje.png" alt="padhaas"> Zet deze code tussen je<footer> tags. De wrapper hoeven we nog niet in te vullen. Die wordt pas ingevuld door de gebruikers van de website wanneer zij een liedje uploaden. Dit komt pas terug in een veel later stadium van deze handleiding. De CSS CSS is de tweede taal die we gaan leren. Met CSS kun je de HTML opmaken en praktiseren voor de gebruiker. Om een CSS bestand aan te maken pakken we ons codeer programma erbij en openen we een nieuw bestand. We slaan dit bestand op als style.css in de map css van onze mappen-structuur. De HTML en CSS zitten nu gescheiden in de folders en zijn dus nog niet verbonden met elkaar. Dit gaan we in ons index.php bestand doen. Zoals ik in de vorige handleiding uitgelegd heb stoppen we het grootste deel van de code die de gebruiker niet ziet tussen de <head> tags. Het is voor een beginner onbelangrijk om deze code te onthouden en te begrijpen, maar je moet wel weten dat het bestaat. <link href="css/style.css" type="text/css" rel="stylesheet"> Voeg deze code tussen de <head> tags. Niet te verwarren met <header> De cake is gebakken, nu gaan we het versieren. Open je style.css. We gaan ons logo een mooi kleurtje meegeven. In CSS selecteren we het stukje HTML dat we gaan versieren. Dit kunnen we doen door alle tags een id mee te geven, en te selecteren met css. Dit gaan we niet doen, omdat het dan een rommeltje wordt in index.php en style.css. We selecteren de header, vervolgens selecteren we h1. CSS selecteert nu alle <h1> tags in de <header> tag. In ons geval is dat ons prachtige logo. Na het selecteren van de html gebruiken we { om aan te geven dat we hier code voor gaan toepassen en } om aan te geven dat we klaar zijn met code toepassen. Tussen de accolades zetten we de code. header h1{ color:red; } Zet deze code in het CSS bestand. De kop is er af! Het begin van onze website is af. Als het goed is zie je alle tekst die we willen laten zien, en is ons logo rood. Wanneer je code afwijkt, of je hebt het gevoel dat iets niet klopt kun je altijd in de comments naar hulp vragen. Ook kun je jezelf helpen met firebug (zie handleiding 1) om de fout op te sporen. Tips voor de volgende handleiding Raak bekend met css: http://www.w3schools.com/css/ Ga rommelen met code, probeer andere tags te gebruiken in HTML of werk alvast verder aan je CSS. Het zou ook leuk zijn als leden komen met een alternatieve HTML opbouw, het kan namelijk nog slimmer! Succes!
  2. Hallo allemaal, Ik moet voor school een moeie website bouwen alleen het probleem is dat ik er niet zo goed in ben. Ik ken wel een beetje die basis codes enzo maar ik heb een hekel aan posities en dat soort dingen dus zou iemand mij kunnen helpen met het maken van de layout? Zo zou ik het een beetje willen hebben: Een titelbar met alleen rechts een logo daaronder navigatiebalk Dan gaan we naar het gedeelte waar de tekst moet komen gewoon een groot stuk en dan rechts nog een soort van navigatiebalk of eigenlijk meer popup balk of hoe je het ook wilt noemen en helemaal onderin nog een klein balkje met copyright en dergelijke. Zou iemand een klein CSS scriptje voor me kunenn schrijven? Mvg DisasterZany
×
×
  • Create New...