Samenvatting Web Software PDF

Samenvatting Web Software Tim Berners-Lee - Uitvinder WWW en eerste versie HTML - HTML  hyper tekst markup language - Creëerde eerste webbrowser en webserver - Eerste website 6 augustus 1991 - Nu HTML5 HTML - Standaardtaal maken van webpagina - Beschrijft stru...

Samenvatting Web Software Tim Berners-Lee - Uitvinder WWW en eerste versie HTML - HTML  hyper tekst markup language - Creëerde eerste webbrowser en webserver - Eerste website 6 augustus 1991 - Nu HTML5 HTML - Standaardtaal maken van webpagina - Beschrijft structuur via tags - Zorgt voor opbouw van content - Bepaald wat op webpagina staat CSS - Cascading style sheets - Stijltaal die bepaald hoe HTML-elementen weergegeven worden op de pagina - Kleur, lettertypes, afstanden en lay-out - Website visueel aantrekkelijk maken - Scheidt inhoud van opmaak - Maak pagina responsive Javascript - Programmeertaal waarmee je interactiviteit aan webpagina kan toevoegen - Maakt pagina dynamisch en gebruiksvriendelijk - Websites interactief en levendig - Één van meest populaire talen De HTML-structuur - Beschrijft structuur van een webpagina via tags (=markup) - Bijna elk element openings- en afsluittag - / belangrijk! iets - Start met basisstructuur o  Vertelt de browser dat het om een HTML5-document gaat. o  Het startpunt van de HTML-code.  Root-element  Slechts één per document o  Bevat informatie voor de browser, zoals de titel en links naar stijlen of scripts.   Versie van character encoding   Verplicht  Vanboven bij webpagina o  Hier staat alle zichtbare inhoud van de webpagina, zoals tekst, afbeeldingen en links HTML basiselementen Koppen - 6 niveaus van kopteksten - tot Paragraaf - - Blokken tekst weergeven - Elke paragraaf start op een nieuwe regel me beetje witruimte  Block elementen o Nemen volledige breedte in van oudercontainer o Beginnen altijd op nieuwe regel - Belangrijkste elementen o … : headings (titels) o : paragrafen o : block container element (divisie of een sectie)  Geen semantische waarde toevoegen  Gebruik voor lay-outdoeleinden o : ordered list (geordende lijst)  : Default (1, 2, 3, 4…) ◦  : Kleine letters (a, b, c, d, …) ◦  : Hoofdletters (A, B, C, D, …) ◦  : Kleine Romeinse cijfers (i, ii, iii, iv, …) ◦  : Hoofdletters Romeinse cijfers (I, II, III, IV, …)  start bij vijfde nummer o : unordered list (ongeordende lijst) o  Titel  Navigatie menu  Zoekbalk of logo o  Hoofdinhoud  Teksten, video’s of afbeeldingen o  Contactinformatie  Navigatie menu  Sociale media links o  Definiëren van navigatieblok  Bevat links naar andere delen van website of externe pagina’s Inline elementen - Nemen enkel ruimte in die inhoud nodig heeft - Belangrijkste inline elementen: o : images (afbeeldingen)  Zelfsluitend  Src  Pad naar afbeelding  URL of bestandsnaam  Alt  Beschrijft afbeelding  Toegankelijkheid  Breedte en hoogte aanpasbaar via HTML  Width en height  Titel attribuut toevoegen die verschijnt op afbeelding als je er over beweegt o : anchor element (hyperlink)  Href attribuut belangrijkste van element  Specificeren waarnaar hyperlink moet verwijzen  Externe links  Volledig zijn met https:/ of http://  url openen in nieuw tabblad o target=”_blank”  Interne links  Binnen zelfde website o Pagina in zelfde map  Href=”voorbeeld.html” o Pagina in andere map  Href=”naammap/voorbeeld.html” o Pagina naar hogere map  Href=”../voorbeeld.html”  Binnen zelfde pagina o Gebruik ankerpunten o Href=”#contact” o o : inline container element  Container om inhoud te groeperen  Inline container  Geen semantische waarde  o : emphasized (italic)  Schuin of italic weergaven o : bold (vetgedrukt)  Of  Tekst vet zetten o : break (regeleinde)  Maakt een enter in de tekst CSS Ontstaan - Hakon Wium Lie introduceerde css in 1994 - Diende om opmaak los van inhoud te koppelen - Sinds 1996 CSS of www - Verschillende evoluties o Animatie en trasities mogelijk Inline CSS - Direct toegevoegd aan HTML-element via o Dit is blauwe tekst. - Toevoegen aan elk individueel element - Bij elke regel opnieuw CSS laden  prestatie verslechteren Externe CSS - Apart CSS-bestand gekoppeld aan HTML-pagina o o o - Kan gekoppeld worden aan meerdere HTML-pagina’s - Browsers cachen externe CSS-bestanden o Stylesheet maar één keer laden  sneller - Netter en overzichtelijkere code Reset CSS - HTML standaard opmaak via browser - Volledige controle door reset style sheet toe te voegen - Zet alles op 0 o   o CSS schrijven - Herkenbaar patroon van openen { en sluiten } - Selector geeft aan op welk HTML-element stijlregels van toepassing zijn - Elke regel afsluiten met ; Html-selector - Meest algemen manier elementen selecteren - Selecteert op basis van HTML - p{ } / h1{ } ID-selector - Unieke identificator aan één HTML-element - In HTML o ID= “” - In CSS o #ID-naam Class-selector - Gebruikt om meerdere elementen dezelfde stijl te geven - In HTML o Class= “” - In CSS o.ID-naam Comments - In HTML o - In CSS o *comment*  Comment niet zichtbaar in browser Box model - Bepaald hoe elementen op webpagina worden weergegeven en hoeveel ruimte ze innemen - Elk element gezien als rechthoekige doos uit verschillende lagen - Lagen box model o Content o Padding  Vaak bij gebruik van border of achtergrondkleur  Geeft ademruimte  Toevoegen aan block en inline elementen o Border  Lijn rond content element  3 componenten  Width  Style  Color  Radius voor afgeronde hoeken in % o Margin  Optionele hoeveelheid ruimte die je kan toevoegen langs buitenzijden van border  Afstand tussen elementen onderling  Auto handig om te centreren - Box-sizing o Padding en borders vergroten totale grootte van element o Automatisch toegevoegd door CSS o Box-sizing: border-box  Padding en border meegerekend in breedte en hoogte van element  Totale breedte/hoogte conistent  Minder rekening houden met extra ruimte CSS library - Color: stelt de tekstkleur van een element in. - Background-color: bepaalt de achtergrondkleur van een element. - Font-size: bepaalt de grootte van de tekst. - Font-family: bepaalt het lettertype van de tekst. - Font-weight: stelt de dikte van het lettertype in (bijv. Normaal, vet). - Text-align: bepaalt de uitlijning van de tekst - Text-decoration: bepaalt de tekstversieringen zoals onderstrepen - Margin: stelt de buitenruimte rond een element in (ref. Box model) - Padding: bepaalt de binnenruimte tussen de inhoud van een element en de rand ervan (ref. Box model) - Border: voegt een rand toe rond een element. - Border-radius: rond de hoeken af van een element. - Width: bepaalt de breedte van een element. - Height: stelt de hoogte van een element in. CSS meeteenheden - Absoluut Verandert niet px, pt, mm, cm Pixels  Voor exacte controle over grootte van een element Punten  Vooral voor printtoepassing  Één punt = 1/72 inch - Relatief Past aan schermgrootte aan rem, vw/vh, %, em REM  Gebaseerd op font-size van root element  Ideaal voor consistente en schaalbare ontwerpen  Alle afmetingen aanpassen als root lettergrootte verandert Vw & vh  Viewport heigt en width  Vw = 1% van breedte  Vh = 1% van hoogte  Elementen aanpassen aan breedte en hoogte van scherm Percentage  Relatief aan grootte van bovenliggende element  Hadig voor flexibele maten die kunnen schalen met container Display - Disply: block; Vaste maat die niet verandert ongeacht context - Display :inline; Element weergegeven op zelfde regel als ander element Neemt enkel nodige ruimte in - Display: inline-block; Inline eigenschappen maar met width en height - Display: none; Laat element helemaal verdwijnen uit DOM Neemt geen plaats meer in Visibility:hidden; = zelfde Shadows - Box shadow - Waarden Horizontal o set Vertical o set Blur distance - Meerdere schaduwen mogelijk per element met komma Grid - Krachtige lay-out methode die complexe webpagina-indelingen kan maken - 2d raster systeem - Voordelen Flexibiliteit E iciëntie Responsiviteit - In HTML container met element rond item - In CSS eigen display Grid op container-element Grid container met grid items - Display:grid; Kolommen - Grid-template-colums definieert aantal kolommen en breedte - Meerdere kolombreedtes opgeven door te scheiden met spatie - Ook flexibele eenheden Rijen - Grid-template-rows rijen instellen - Als CSS grid geen rijen definieert, automatisch gegenereerd - Hoogte standaard ingesteld op auto Repeat () - Maakt eenvoudiger om aantal kolommen of rijen met specifieke breedte te definëren - Repeat (aantal, breedte) Gap - Ruimte tussen grid items - Row-gap en column-gap Complexere lay-outs - Met slash-notatie aangeven waar grid item moet beginnen en eindigen - Op grid-item! - Grid-column: start/end en grid-row:start/end Grid-area - Andere optie items positioneren - Eenvoudiger - Toekennen van name naan grid items met grid-area eigenschap - Letters gebruiken om naam te vertegenwoordigen - Grid-template-areas toevoegen aan grid container -. om cellen in grid aan te geven Flexbox & mediaqueries Flex - 1 dimensie (rijen of kollomen) - Dynamisch aanpassen van volgorde van de inhoud - Dynamisch aanpassen van volgorde van de inhoud - Vorm losgekoppeld van inhoud CSS flex structuur - Twee niveau’s om eigenschappen te bepalen Via container en items die er in zitten CSS flex container properties -.container { display:flex; } - Flex-direction Bepaald hoofd-as row, row-reverse, column, column-revers Links naar rechts of boven naar onder en omgekeerd - Flex-wrap Bepaalt inhoud op één lijn gepresenteerd of verdeeld over verschillende lijne nowrap, wrap, wrap-reverse - Justify-content Bepaald opvulling van container met items Flex-start, flex-end, center, space-between, space-around, space-evenly - Align-content Lijnt de lijnen met items in container uit Enkel bij multi-line containers Flex-start, flex-end, center, space-between, space-around, space-evenly - Align-items Lijnt items uit op kruis-as Flex-start, flex-end, center, stretch, baseline, auto - Gap, row-gap, column-gap Bepaald tuimte tussen items van container Specifiek aanpassen  Row-gap en column gap  Samen gewoon gap met spatie tussen eenheden - Overflow Bepalen wat gebeurt als items buiten container vallen Visible, hidden, scroll, auto CSS flex item properties - Flex-grow Bepaald hoe item meegroeit om extra beschikbare ruimte op te vullen Elk element met flex-grow groter dan 0 zal extra ruimte krijgen Verdubbeld - Flex-shrink Zelfde concept maar met kleiner worden - Flex-basis Basis-grootte van item voordat beschikbare ruimte werd verdeeld Flex-direction: row  bepaald basis-breedte Flex-direction:column bepaald basis-hoogte Prioriteit op width en height - Align-self Plaatsing bepalen van item waarmee bepaling van align-items in de container afwijkt Auto, flex-start, flex-end, center, baseline, stretch - Order Volgorde bepalen van item zonder html te verandere Kan verwarrend zijn - Flex Snel drie properties definiëren Flex: 1 0 150px; Flex advanced - Veel opties zoals overlappen door negatieve marges Flex of grid? Flex - Inhoud centraal - Één dimensie nodig - Enkel horizontaal of verticaal uitlijnen - Kleinschalige layouts Grid - Horizontaal en verticaal uitlijnen - Vaste breedte meegeven - Heel precies werken en alles exacte definiëren - Grootschalige lay-outs Gebruik beiden CSS mediaqueries - Lay-out aanpassen op basis van schermgroote en karakteristieken van het toestel - Webpagina’s responsief maken - Betere gebruikservaring en toegankelijker - Verschillende mogelijkheden Per type schermgrootte/media Delen van webpagina weglaten Inhoud toevoegen Syntax - @media (media-feature) { CSS regels } Media features - Orientation: landscape of portrait - Max-height: pas een stijl toe als de viewport maximum een bepaalde hoogte heeft - Min-height: pas een stijl toe als de viewport minimum een bepaalde hoogte heeft - Max-width: pas een stijl toe als de viewport maximum een bepaalde breedte heeft - Min-width: pas een stijl toe als de viewport minimum een bepaalde breedte heeft - Width: exacte (!) Breedte of the viewport (incl scrollbar) - Height: exacte (!) Hoogte van de viewport (incl scrollbar) Logische operators - And - , : or - Not Best practices - Mobile first approach  meest uitgepuurde ontwerp - Daarna desktop - Gebruik relatieve units