Lees een paar keer deze pagina over HTML door. We gaan oefenen met HTML en CSS. Lees ook een paar keer deze pagina over CSS. En lees later eventueel de geavanceerde tips.

We gebruiken Dreamweaver als code editor en als FTP-programma. Je mag ook andere code editors gebruiken, zoals Notepad++, SublimeText of online editors zoals CodeAnywhere.

Minimale eisen website

De site moet minstens 3 verschillende pagina’s hebben, met een werkend menu, en gevuld met eigen inhoud, en met een galerie met minstens 9 verschillende eigen plaatjes. De plaatjes moeten klikbaar zijn, met een pop-up (lightbox).

De eerste pagina moet index.html heten, en alles moet in de map code staan, die in je map websites staat.

Deze 16 HTML-elementen moet je kennen en moeten gebruikt zijn:
h1, h3, p, br, title, head, body, img, a, b (of strong), i (of em), ul, li, link, div, span.

Deze 9 attributen moeten in de HTML gebruikt zijn:
alt, src, href, title, width, height, target, id, class

En verder:

1. Een werkende video
2. Speciale tekens
3. Commentaar in de code:     <!-- blabla -->
4. Externe css voor de vormgeving
5. De site moet online staan op ROCstudent.nl/ftp/jenaam/code
6. Op de contactpagina een werkend contactformulier met PHP met aangepaste styling. Kijk voor meer styling hier.
7. Social media buttons, bijvoorbeeld Sharing buttons met behulp van Addthis (wijzig het via tools). Follow buttons mogen ook bij Contact.
8. Google Maps. Doe daar wat leuks met css-filters zoals filter:grayscale(1) opacity(0.5);

Filmpjes

1. HTML website met Teksteditor

Op Windows kan het in Kladblok. Op de Mac in Teksteditor met wat aanpassingen aan de Voorkeuren, zie het filmpje:

2. HTML-site in Dreamweaver

We doen hetzelfde, maar nu met Dreamweaver als HTML editor. Maak daarin een nieuw HTML document. Je krijgt daar allerlei hulp in de code zoals:

3. Vormgeving met CSS in Dreamweaver

Een menu met CSS

Animaties met CSS

Responsive CSS

Zie alle info op deze pagina en het filmpje hieronder:

Beeld voor web

Plaatjes bewaren voor Web

Favicon

Maak een nieuw account op Instagram voor je portfolio

Upload daar minstens negen portfolio-plaatjes van je eigen werk, zoals screenshots van je websites. Zie alles over Screenshots hier.

Instagram vanaf een browser

Je kan ook posten vanaf je laptop. In Chrome: Rechtsklik > Inspecteren. In de code daar ergens linksboven op het telefoon-icoon klikken, en de pagina Refreshen. Nu kan je posten. In Firefox idem. Het telefoon-icoon staat daar op een andere plek.

In Safari op de Mac: Voorkeuren > Geavanceerd > Ontwikkelmenu aanzetten. Nu kan je in het Ontwikkelmenu kiezen voor Gebruikersagent > iPhone.

Instagram widget

Instagram op je HTML-website kan met een met widget. Het is de makkelijkste manier om plaatjes op een HTML-website te zetten, en zo je portfolio bij te houden. Gebruik de Snapwidget hieronder, en plaats de code in de HTML van  jouw portfolio.html

https://snapwidget.com/

Hier een voorbeeldje

Een andere HTML-widget voor een Instagram feed is deze:

https://elfsight.com/instagram-feed-instashow/html/

Uitleg-filmpjes van de lessen

• Les 1 Introductie HTML
• Les 2 HTML in Dreamweaver
• Les 3 meer HTML
• Les 4 Google Maps
• Les 5 CSS: het visuele ontwerp van je website
• Screenshots
• Instagram via de browser:
• Instagram posten vanuit Chrome
• Instagram posten vanuit Safari

Menu en animatie in CSS

Minimale eisen CSS

1. Kleur, achtergrondkleur, links, p, h1 en h2 moeten aangepast zijn
2. Er moet margin, padding, border en shadow gebruikt zijn
3. De links in het menu hebben eigen styling, en de menu div is position:absolute
4. hover moet gebruikt worden bij a
5. Er moeten id en class gebruikt worden, dus met “#” en “.”
6. Commentaar in de CSS-code /* blabla */
7. Een footer div met eigen css

Extra eisen indien vervolgopdracht

1. Een favicon is het mini-plaatje in de url-balk, en het icoon dat je ziet als je er een Favoriet/Bladwijzer van maakt, en het is ook je App-icon op je mobiel.Maak een favicon.png van 250 x 250 pixels in Photoshop (Save for Web: ⌘-Alt-Shift-S en dan Preset PNG-24).
   Upload dat naar de hoofdmap van je website. Zet deze code in de <head> van al je pagina’s, en verander “Naam”:

   <link rel="shortcut icon" href="favicon.png" type="image/png">
   <link rel="apple-touch-icon" href="favicon.png">
   <meta name="apple-mobile-web-app-title" content="Naam">

2. Gebruik twee Google fonts: 1 voor de body en 1 voor de koppen
3. Gebruik CSS animaties in de menu-knoppen en bij de thumbnails in de galerie.
4. Bij de Google map een effect zoals filter:grayscale(1) opacity(0.5);
5. Een Hero-image
6. Gebruik Float ergens, met 2 of 3  kolommen, of in het menu:

   <div class="kolom"> Inhoud van Kolom 1 </div>
   <div class="kolom"> Inhoud van Kolom 2 </div>
   
   En in de CSS plak je dit:
   .kolom {float:left; width:45%; margin-right:5%;}

   Na de kolommen tik je eventueel dit om de float weer op te heffen:

   <br style="clear:both">

   Een horizontaal menu met float:

    nav li {float:left; width:20%; margin-left:5%;}
    De nav (of #menu) zet je dan op width:100%

7. Maak je website Responsive (klik hier voor meer info) met op mobiel een aangepast design.
8. Als je een ontwerp hebt uit de lessen Webdesign: pas dat nu toe op je website
9. Chatbox: tegenwoordig wordt chatten vaak gebruikt voor Help en Klantondersteuning, en is dan superhandig. Zie tawk.to

BONUS-punt als je ikonen gebruikt zoals die van fontawesome.

BONUS-punt voor je Instagram op je website met Lightwidget. Kies evt. met hashtags (#portfolio) welke foto’s je wil laten zien. Of bekijk alternatieven zoals instawidget.net.

Je eigen Twitter op je website kan met Twitter Widgets en je Facebook kan met een Facebook Activity feed.

Bekijk en verwerk eventueel Flexbox voor een superbonus.

BONUS-punt voor een slider (zoals Bootstrap Carousel, of Flexslider, of JSSOR Slider of deze responsive slider)