Hoe maak je een pagina voor een website?

Slides:



Advertisements
Verwante presentaties
Bouw zelf een digitaal visitekaartje
Advertisements

Een afdelingswebsite bouwen met Google Sites
Maak hier het ontwerp voor de gemeenschappelijke rand boven (later opslaan als Gif, PNG of JPEG) A3 Webontwerp PowerPointbestand voor achtergrond en gemeenschappelijke.
Les 2 Vandaag •Vragen over voorgaande stof •Plaatjes •Tabellen •Links •Huiswerk.
Thema’s. Thema’s   Thema’s toepassen  Vooringestelde thema’s  Snel en efficiënte  Je maakt een nieuw document  Pagina-indeling - Thema‘s of.
29/03/2013. jQuery is  een JavaScript-bibliotheek die je kan integreren in je HTML-pagina.  Om animaties te maken, die SEO-vriendelijk(er) zijn  Door.
(c) Marc de Graauw Presentatie XML Marc de Graauw 2 maart 2000.
Wat is het AnySurfer label? Een Belgisch kwaliteitslabel voor toegankelijke websites Bestaat uit een Basislabel en een Pluslabel Basislabel garandeert.
Hoofdstuk 2 Communicatie
WELKOM! Les 1 Vandaag 1.Voorstellen 2.Inhoud en doel cursus 3.Inleiding website 4.Benodigde software 5.Inleiding HTML 6.Huiswerk 7.Afwas ☺
Het oog wil oog wat. Kijk ook op
Webdesign.
HTML Les 1: Introductie HTML
CSS & HTML Les 2 Navigatie. De tag voor het maken van verwijzingen naar pagina’s of delen van een webpagina. Contact Het element wordt gebruikt om de.
Online Marketing voor het MBO “SEO, dat kun je zelf!”
WordPress les 3.
Crashcursus HTML en CSS 2013
Website Usability.
HTML elements en CSS Commando's Lenonardo Lyceum centrum voor deeltijds onderwijs Hoboken Schooljaar
Webpagina ’ s maken ITV 10 maart Onderwerpen Ontwerp en inhoud Navigatie HTML: de basis Webpagina’s in Word.
Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - -
Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - -
WEBSITES ONTWIKKELINGEN Trends en standaarden op het gebied van webdesign HTML, DHTML, XHTML, FLASH, CSS Henk Zegwaard december 2003.
Webmaster Training: CSS CSS2 & XHTML By Frederik Van Outryve.
Nieuw in LIPS VLUG 2 26 juni 2006 Kristof Brams. Overzicht Vernieuwde editor Printervriendelijke pagina Statistieken Variabele fontgrootte Grootte van.
Deze presentatie mag noch geheel, noch gedeeltelijk worden gebruikt of gekopieerd zonder de schriftelijke toestemming van Seniornet Vlaanderen VZW Mijn.
Mijn eerste Website bouwen
WEBBUILDING 07/03/2005 Saartje De Geyter.
Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 10: XML basics.
Windows Applicaties Bouwen met Visual Studio.NET Sijmen Koffeman Development Consultant Microsoft.
Les 3 Vandaag 1.Bekijken thuisopdrachten 2.Vragen over voorgaande stof 3.Links 4.FTP 5.Huiswerk.
Starten met PHP Dynamischer bouwen. PHP is een een scripttaal waarmee de server pagina’s in elkaar kunt laten zetten. Het verschil met HTML: Een php pagina.
Bezoekersgerichte teksten
Starten met PHP Dynamischer bouwen.
HTML De basis-elementen.
Advanced Business Information Solutions Software voor webdesign.
De basis-elementen Deel 2
Webbrowsers Inhoudsopgave  Webbrowser  Geschiedenis  Verschillende webbrowsers Bekende webbrowsers Minder bekende webbrowsers  Vergelijking.
HTML. Wat is HTML Je kunt er sites mee bouwen Hypertext Markup Language Afspraken voor opmaak: tags.
Training Webrichtlijnen Maar moet je je als webredacteur aan houden?
Webpagina's maken met (X)HTML en CSS Lang leve het Kladblok!!! Verboden voor editors.
Eindbeoordeling websites Seminarie Webdesign. Technische puntenverdeling Niet online en losse bestanden
Verbeterpunt 1 Tekst heeft slecht contrast met de achtergrond. Tekst omlijnen, maar liefst een logo maken.
DIV Architecture Seminarie Webdesign. CSS-bestand oproepen Voeg tussen en de volgende lijn code toe om een CSS-file te laten werken: Zorg ervoor dat je.
CSS Cascading Style Sheets. CSS code HTML – Welke elementen op een pagina – Stuk code zegt iets over één element CSS – Hoe zien de elementen er precies.
Hoe een website realiseren ? Horen, zien en ontsluiten Gooik, 27 januari 2006 Johnny Van Bavegem Heemkundige Kring van Gooik.
Klazine Verdonschot 7 november 2013 Masterclass 9: Blackboard optimaal inzetten.
Gebruik alleen kleine letters en kies voor Opslaan als. Sla daarna bijvoorbeeld op als frans.html.
ARNHEM NAAM DATUM TITEL Voeg afbeelding in, klik rechts en kies Naar achtergrond, pas dan de tekst aan.
HTML Hypertext Markup Language. HTML code Elementen van een webpagina Eigenschappen van elementen Structuur van elementen.
HTML5 Taste4U.
Surfen op het internet Basisbegrippen
Hoofdstuk 2 Communicatie
Sjabloonsite Koen Van Cauwenberge.
Ict begrippen Van tim hendriks.
<naam van werkgroep>
Templates in MailChimp (2)
Direct Realisatie Les 3 HTML en CSS in s Direct Realisatie Les 3.
Programmeren is Makkelijk
Programmeren in de Klas
Digi(bord)boek project <titel project>
Inhoud: Terugkomdag Wie heeft wat gemaakt? Tips?
Aan de slag met Moodle Les 1. Kennismaking Schermonderdelen en navigatie Voorkeuren aanpassen: profiel, wachtwoord Cursusbeheer: cursusinstellingen en.
OGH APEX dag 2012 Toeters en bellen met APEX
CSS: cascading stylesheets
Welkom :-).
CSS: cascading stylesheets
HTML5 introductie.
Speedy’s go digital – basecamp base
DRIE pilaren van Een gebruikersgerichte website
Transcript van de presentatie:

Hoe maak je een pagina voor een website? HTML Hoe maak je een pagina voor een website?

programma Html wat en waarom? Belangrijkste Tags Schrijven de eersrte html code kruiswoordpuzzel afronding Opdracht Vragenlijst (feedback)

HTML Don’t believe it. Hypertext Markup Language Basis van webontwerp  iedereen een website kan bouwen zonder enige kennis van HTML. Don’t believe it.

borncode van een webpagina …

Eerste regel van Google borncode: <!doctype html>

Wat nodig om met html kunnen te werken Wat nodig om met html kunnen te werken? Editor Om HTML code in te voeren Notepad ++ Laat code in kleuren zien Hierdoor minder fouten Andere editors Notepad. Sublime tekst Atom en etc

Browser Om webpagina’s te tonen (testen) Internet Explorer van Microsoft Andere browsers: Mozilla/Firefox, Opera, Google Chrome

Structuur van html Tag HTML-tag herkenen < en > . begintag <html> eindtag</html> Element <begintag> inhoud </eindtag>

Belangrijkste tags <!DOCTYPE html> standaard als html voor alle browsers.

<html> bevat alle andere elementen </html>

<!doctype html> <html> <head> </head> <body> </body> </html>

Informatie over deze pagina Niet zichtbaar op de pagina <head> Informatie over deze pagina Niet zichtbaar op de pagina Lezen door browsers </head> Tussen <head> en </head> kun je eventueleinformatie over het document kwijt. Deze informatie is alleen te lezen door de browser en is dus niet zichtbaar op je homepage.

Toelichting <title> naam van pagina </title> niet zichtbaar op je pagina wel herkenbaar voor de browser.

Belangrijkste tags <body> Inhoud van de pagina Zichtbaar in de browser </body>

Handige tags <P> wordt gebruikt voor een paragraaf <H1> <H2> <H3> <H4> <H5> en <H6> H1 is de grootste, H6 de kleinste font size <b> bold(vet) stijl

Bijzondere elementen Tags zonder eindtag Bv. <img> en <br> <img src=“plaatje.jpg” />

voorbeeld <!doctype html> <html> <head> <title> mijnpagina</title> </head> <body> <b> Welkom op mijn Homepage </b> </body> </html>

Kruiswoordpuzzel Welke tag?

HTML LINK Naar een andere document of pagina Tag <a> ….</a> <a href="url">link text</a> herf definieert het bestemmingsadres

voorbeeld <a href="https://www.helenparkhurst.nl">Visit our school’s website</a> Target attribute Bestemmingsadres op een nieuw tabblad openen <a href=https://www.elenparkhurst.nl  target="_blank">Visit our school’s website</a>

Afbeelding als link <a href=”bestemmingurl">   <img src=”afbeelding adres"   style="width:10px;height:10px;border:10;"> </a>

Menu Wat heb je nodig? division tag )div) scheiden het menu gedeelte van de pagina

Breedte van menu Stijl van menu

Lijst als menu unordered list (ul): <ul>……</ul> Maakt een lijst item in a list (il) <il>……….</il>

maak een lijst Menuartikel toevoegen

Geen Marg of Rand Geen overloop Links Vlot (CSS-kenmerk)

opdracht Voeg een links of boven menu toe index.html