ja mal zeit willkommen bereich und wir starten im bereich im mittel box modell und zwar mit dem ersten teil des box modells so gesehen die königsklasse dessen was wir hier in sachen html oder css machen denn jetzt geht es darum das layout von webseiten zu beschreiben ist das was wir bislang gemacht haben bezog sich auf die typographie und die farbgebung und mit layout ist gemeint dass verschiedene elemente auf der webseite verschiedenen anordnen können und ich habe hier im hintergrund mal eine webseite aufgerufen okay das ist die mit der wir gleich arbeiten aber ich meine hier die webseite des spiegels dass er nur beispiel sein gibt verschiedene anderen webseiten das ist sicherlich genau wie ich und worauf ich hinaus will das werdet ihr auch auf anderen webseiten finden und zwar wenn man sich diese webseite des spiegels hier mal ein bisschen anguckt dann sieht man dort verschiedenen content und content ist der inhalt gemeint werden wir verschiedene überschriften texte werden bilder wir haben so ziemlich alles das was wir html-seite ich auch in eine webseite einbauen können was allerdings anders ist zu allen webseiten die wir bislang gestaltet haben ist die anordnung der einzelnen elemente das was wir bislang gemacht haben war zum beispiel hier so ein text wer meine überschrift mit einem h1 element darunter ein textblock den wir gegebenenfalls und packen und dann haben wir noch ein image um und ich spreche jetzt nur wenn diese bereiche oben und diese optik das heißt die anordnung dieser einzelnen elemente zu verwirklichen müssten wir dem wissen welches wäre jetzt angehäuft haben mit einer tabelle arbeiten und es kann nicht sinn der übung sein dass man das komplette layout einer website nur über irgendwelche tabelle realisiert das wird insbesondere dann schwierig wenn man sich und das ist schon ein bisschen tiefere materie mit respawn sie webdesign auseinandersetzt so wie konstruiere ich eigentlich eine webseite die auf dem bildschirm also auf dem computerbildschirm und ich habe hier jetzt eine relativ große monitor gut aussieht und dann parallel auch noch zum beispiel auf dem smartphone oder auf dem tablett denn ich kann diese webseite hier oben spiegel.de thema und so weiter kann ich genauso gut auf dem tablet oder handy aufrufen die optik sie dann ein bisschen anders aus aber das ist dann eine optik die nicht irgendwie zurecht gewusst wurde weil der bildschirm kleiner ist sondern die durchaus festgelegt wurde und das box modell bezieht sich darauf wie schaffe ich es ohne eben ihr welche tabellen strukturen zu benutzen verschiedene html elemente nebeneinander übereinander untereinander gegebenenfalls auch ineinander verschachtelt anzuordnen und das ganze heißt box modell weil die eben diese box modell alles systematisch zugrunde liegt die jedes einzelne html element für sich als eine box darstellt das ist die grundidee warum das überhaupt so heißt wir schauen wir einmal kurz script wird es gemerkt haben ich bin jetzt nicht auf den tablet denn diese videosequenz zum thema box modell werde ich mit ausnahme der berechnung von größen von boxen längen und höhen werde ich das nur am rechner machen weil das durchaus eine sehr praxisorientierte geschichte ist ich habe einführen in dem script anderes beispiel genannt dass wir zum beispiel jede webseite des landkreis cloppenburg haben und diese webseite des landkreis cloppenburg habe ich dann auf der nächsten seite so ein bisschen aus differenziert dargestellt wir haben also verschiedene elemente auf der webseite für uns entdeckt zum beispiel jeder einzelne link oder halt auch dieser content block in der mitte wir haben hier eine navigationsleiste wir haben hier oben hat banner welches liegen der genaue beschreibt und das box modell verlässt eben diese ebene des inhalts der eigentlichen webseite das heißt wir sehen im grunde nicht mehr die website des landkreis cloppenburg sondern das einzige was wir säen oder auch das was der browser 7 weil der browser fängt nicht an den inhalt zu interpretieren interpretieren ist dass die webseite aus verschiedenen boxen besteht und haben zum beispiel alle verlinkungen sind einzelne boxen bislang haben wir diese einzelnen box und dann immer eben html tag genannt also wenn wir uns jetzt über verlinkungen unterhalten dann wissen wir dass dahinter eine a tec steht zwar mit dem attribut hyper referenz auf irgend eine andere webseite wenn wir jetzt über das box modell sprechen dann bezeichnen wir das als box im grunde aber vorkommen wo ist was man dazu sagt wir wollen dass in diesem fall als box bezeichnen weil das box modell erweitert unsere palette von stil eigenschaften um jene eigenschaften die eben die anordnung von boxen festlegen können und einige davon haben wir auf unserem sicherheit etwas steinigen weg im sinne der webentwicklung schon mal gesehen und auch schon angewendet ich habe das in aufgabe von euch verlangt bitte nutzt hier eben die und die stil anweisung die kommt schon aus dem box modell und jetzt wird das ganze eben inhaltlich so ein bisschen mit leben gefüllt damit ihr dann am ende auch wisst was ihr dort eigentlich tut ist doch mal ein wenig nach unten und danach schafften wir da noch schon in den visual studio code editor denn dieses bild hier ist besonders wichtig das ist quasi so die ausgangsbasis für das box modell im sinne der webentwicklung ja was bedeutet das jetzt beziehungsweise wie es das zu lesen wir haben wenn wir irgendwas auf der webseite an text zum beispiel lesen wollen und da bezeichnet was als content oder als inhalt eines html element wir erinnern uns wir können zum beispiel dann öffnen den weg dahin schreiben und innerhalb des px haben wir dann im text ja ich arbeite gleichauf mit platz alter text also wenn man sich die gegebenenfalls nur gedanken über layout von irgend welchen elementen auf der webseite macht dann kann man auch erstmal noch eine klasse alter text arbeiten und später fügt man seinen eigentlichen content ein gut das was ihr auf der webseite sehen ist der eigentliche inhalt des html element das heißt dazu was ich dann tatsächlich als text irgendwie zwischen den öffnenden und schließenden tag hinein schreiben und ich kann diesen inhalt also wenn es jetzt texte zu erinnern uns immer kommt so ein automatischer umbruch und das ist dann meist an dem punkt passiert wenn der bildschirm zu ende ist bzw das browserfenster wenn man es vielleicht ein bisschen minimiert da kommt ein automatischer umbruch ich kann mit diesen beiden abgebrühten das ist einmal die breite und einmal hier die höhe kann ich es bis die festlegen wie breit der inhalt dargestellt werden soll wenn ich also zum beispiel die breite und ich glaube ich durch mein haus oder wenn ich das zum beispiel im 500 pixeln festlege dann kommt der umbruch in dem text nach 500 pixeln und danach haben wir dann eine umbruch das gleiche kann ich auch für die höhe festlegen ich kann also sagen dieses element soll auch wenn der text vielleicht gar nicht so lange ist 500 pixel hoch sein das ist das was wir schon mal gesehen haben als für tabellen bisschen breiter dargestellt haben oder auch ein bisschen höher gestellt haben diese beiden eigenschaften sind ebenso die grundlegenden eigenschaften des box modells damit lege ich eigentlich fest wie breit und wie hoch ist der inhalt meines html element jetzt kommt noch drei weitere sachen wovon wir ein schon kennen wir gehen aber mal von innen nach außen hin und schon setzen blauen bereich an der blaue bereich erweitert unsere palette an stil eigenschaften um die css 1 schafft petting und paging gibt däninnen abstand zwischen inhalt und rahmen an ich habe also hier in dem graubereich vielleicht jetzt text und dann kann ich festlegen zu dem eigentlichen rahmen meines html elements lasse mir bitte zu jeder richtung 5 pixelabstand dann könnte ich angeben per den top-5 pixel petting right 5px bottom fünf pixel oder denkt läuft zum pixel je nachdem welche richtung nicht angebe schrumpft der inhalt oder entfernt sich der inhalt vom eigentlichen rahmen des ganzen html demenz also erzähl das jetzt alles ganz kurz wäre das gleiche aber noch ein stück weit wieder aufholen wenn ich das einmal der praxis zeige dann wird das noch mal deutlicher was hat es eigentlich mit diesen einzelnen delegationen aus sich gut alle hörer und das ist jetzt hier der schwarze bereich das haben wir schon mal gesehen auch hier haben das beim tabellen gewesen um zum beispiel festgelegt dass die boarder an der tabellenspitze das aussehen kommt wir können den rahmen für im grunde also ganz grundsätzlich jedes x-beliebige html e mails können wir einen rahmen geben das ist quasi die sichtbarmachung der eigentlichen grenze eines html element zum nächsten html legen ich könnte also schmiss hatte mitte märz ein rahmen um lehnen und sehe dann optisch meine box auch hier kann ich festlegen also ich kann alle rahmen richtungen unterschiedlich festlegen kann zum beispiel sagen dass der obere rahmenteile wie gepunktet ist und rot der untere hingegen der durchgezogene linien des blau ich muss dann eben jeweils dieses gen abweisung angeben soll dann haben wir noch den weißen bereich und der weiße bereichs dafür da dass wir den außen abstand festlegen und zwar den abstand zum browser fenster oder aber den abstand zum nächsten oder zum nächstgelegenen html element und auch hier das werdet ihr mit sicherheit schon jetzt begriffen haben kann man den abstand nach festlegen nach rechts nach unten und nach ging es gut wenn ihr noch mal die wir gucken wollen wie man das genau anwendet habe ich eben für jede box eigenschaft hier eine kleine tabelle angelegt dort beispiele und vor allen dingen und da verweise ich jetzt mal nur drauf gibt es zu jeder box ein schafft eine kurze notation das heißt hier gibt es eben die normale schrift weise mit top breit botnet was gerade erklärt habe das ganze kann man aber auch in einer kurzen rotation festhalten wir wechseln jetzt einmal zum editor und dort zeige ich eben noch mal die verhaltensweisen der einzelnen box eigenschaften ihr werdet dann auf jeden fall schon mal sehen dass das ganze keine atomphysik ist muss es nur wie ein bisschen hinterkopf behalten oder aber wissen wo es steht stichwort self html gut für schauen wir einmal kurz herein und ich erläutere mal ganz kurz was ich hier veranstaltet habe ich habe hier eine kleine webseite konstruiert ich möchte mal putzen bisschen kleiner wir haben hier oben den klassischen heckbereich mit den metadaten für die webseite ich habe jetzt hier einst teilbereich definiert innerhalb dieses teilbereichs werde ich gleich einmal das box modell kurz zeigen was ist damit auf sich hat dann beginnt und jetzt sehe ich gerade dass ich einen großen fehler gemacht habe dann beginnt der boni bereich den muss ich natürlich ein flügel sind die dateien stelle ich euch natürlich wieder zur verfügung bully bereich und der ganze bereiche drin den rot noch mal ein nach innen ich habe also mein herr ein model bereich so und innerhalb des bulli bereichs habe ich dann semantisch getrennt einmal ein heller ich habe hier eine section mit drei verschiedenen divisionen konzern anderen den habe ich hier was die klasse box zugewiesen die klassen selbst existieren noch nicht die lege ich gleich an und haben auch eine fußzeile und dann endete der body bereich wie sieht das ganze aus das ganze sieht so aus relativ schlicht das mal so sagen da das sind eben meine drei dem container 23 und die fußzeile die ist schon direkt darunter geklatscht da muss man schon ein bisschen mit argusaugen hingucken gut wir wollen jetzt einmal die verschiedenen eigenschaften des box modells auf diese speziellen div container anwenden und wir fahren einfach mal an und stylen erst mal unseren händlern und dem fortschritt den wir gleich mal mit dazu häufig weiß wie ein ähnliches bild auf und wir machen für beide mal schnell an hintergrundfarbe die optisch erstmal ein bisschen abgrenzen kann das nehmen wir mal blaue blume und speichern das 1 x ich mach das vor allen dingen deshalb weil ich kurz gucken ob das alles so funktioniert wie sehenswert mit sich um die fußzeile und buben haben wir nie überschritten wir fangen jetzt an mit der ersten box eigenschaft und zwar wollen wir einmal die höhe und die breite festigt sei also für die für den händler und den kuka wollen wir die breite festlegen bremer die ersten buchstaben eingibt schlägt visual studio code eben das entsprechende oder die entsprechende stil eigenschaft schon vor ich kann da drauf klicken wir haben hier eine übersicht über die verschiedenen möglichen einheiten ich empfehle zunächst einmal auf pixel zurückzugreifen bei prozenten ist es ein bisschen schwierig im sinne der verehrung strukturen weil sich eben die prozente relativ zum eltern element verhalten deswegen zu beginn des box modells einfach auf pixel zurückgreifen wir können zum beispiel sagen dass die breite des kaders und des futters schon von der pixel betragen soll da können wir uns gegen effekt direkt ansehen das ganze ist hier jetzt abgeschnitten gut was möchten wir noch wir möchten jetzt zusätzlich um den header und im futter einen rahmen drum haben und hier verweise ich habe mal aus die kurzen notation die es im skript genauer beschrieben wer dort einmal nachschauen möchte müsste sie das jetzt einmal tun weil ich wende die direkt an ich nutze eigentlich stil eines schaffen lege fest dass der rahmen zwei pixel dick sein soll und das ganze soll durchgezogen oder ein damals zunächst verschiedene inside outside des kabels und und und und ich muss natürlich auch noch fest in welcher farbe der rahmen da sein sollten wir weiter sagt blug ausprobiert oder den cornflakes ich speicher das ganze und schauen was passiert und wir sehen wir haben jetzt einen rahmen wir sehen jetzt gerade das das ding hier oben größer geworden ist das liegt daran und das ist immer ein bisschen problematisch bei den box motor etwas vergisst man nicht das liegt daran dass ich innerhalb des headers 1 h 1 tag ab und a1 hat von sich aus schon eine spezielle vor formatierte eigenschaft die den abstand zum vorjährigen element und auch zum unteren elementen wie feststellt heißt also der abstand zum header beginn und der abstand zum heller ende erinnert sich natürlich wenn ich eben die größe der box gut wir haben also schon mal die ersten beiden stena weisungen kennengelernt jetzt wollen wir einen inneren abstand festlegen wir haben gesagt das funktioniert mit petting und auch hier schlägt uns visual studio direkt vor welche verschiedenen eigenschaften es gibt im skript geschrieben wird den laptop bottom und breit damit gebe ich die richtung an welcher in abstand zu welcher richtung an vorherrschen soll das erste was wir steht ohne weiterführende notation das ist die kurze notation auch hier ein grip nachkommen das noch unklar ist ich lege hier keinen inneren abstand von pixeln fest und schreiben sie in kronau dahin das ist eben die kurzen rotation dafür dass zu allen vier seiten der innen ab standen fünf pixel beträgt so häufig speichern das und jetzt muss man vielleicht hier einmal genau gucken was passiert ich refresh das ganze und wir sehen das jetzt hier fünf pixelabstand sind auch oben sowieso beim h1 hatte ich das gesagt aber wenn man sich die fußzeile und einmal etwas genauer anguckt fünf pixel nach oben fünf pixel nach links von pixel nach unten nach rechts sehen wir die fünf pixel nicht liegt daran weil der abstand von hier nach hier natürlich mehr als fünf pixel beträgt sowohl dabei sind können wir sicherlich den text auch noch mal ein mittig ausrichten text-align center wenn man das noch richtig schreiben nur dann wäre alles easy und jack bruce lage dann sieht er schon mal ein bisschen angenehm aus so als allerletzte boxstil anweisungen gibt es noch den außen abstand also den abstand zum rand des browserfensters oder aber zum nächsten element wir machen jeden margin von einmal ein bisschen mehr am 21 pixel auch hier habe ich die kurzen rotation gewählt heißt also 20 pixel als einzeln angabe führt dazu dass oben links rechts und unten jeweils 20 pixel außen abstand zum nächsten element festgelegt werden ich speicher und refresh das ganze und jetzt sehen wir dass diese bahn hier in der mitte gerückt sind der abstand beträgt natürlich auch 20 kriegs und auch unten zu den anderen elementen ich ja das ganze noch mal ein bisschen aggressiver machen kann 100 pixel nehmen dann fällt es vielleicht nochmal etwas deutlicher auf jetzt haben nämlich hierhin 100 pixel wir haben 100 pixel nach oben und auch unser pixel zu beginnen eben dieses elements das gleiche gilt für unten das nur zum teil ich würde gerne aber wo ich gerade dabei man ein trick sein wofür dieses margin häufig angewendet wird das heißt auch hier bitte einmal in die kurzen rotation schauen wenn ich ihr hinter otto angeben konnte euch vielleicht denken das auto für einen automatisch generierten wert steht dann heißt das dass er die abstände nach außen hin gleichmäßig verteilt ich habe also in dieser kurzen rotation zwei angaben die erste angabe steht dann für den abstand nach oben und nach unten die zweite angabe steht dann für nach links und nach rechts wenn ich jetzt speicher dann könnt ihr euch mal anschauen was jetzt passiert und deswegen also das ist der grund warum das so unglaublich nützlich ist natürlich auch nischen drücke dann sehen wir dass es ganze zentriert ausgerichtet ist wir haben also nach oben und auch unten die abstände von 50 pixel und genau anschauen nach oben 50 pixel nach unten 50 pixel und nach links und nach rechts haben wir auto und auto heißt eben dass sie nach links und nach rechts im gleichen abstand erhält heißt dieses gesamte element bleibt zentriert und das passiert auch dann wenn ich hier zum beispiel dieses fenster verkleinern ihr seht das ganze ding bleibt in der mitte na weil ich das jetzt noch weiter verkleinern dann ist das immer zentriert es wird quasi zur laufzeit automatisch generiert wo eben die box stehen muss etwas problematischer wird dann in der abstand gezeigt hätten wie jetzt dann ist logisch kann der eben nicht mehr ausgerichtet das waren legt noch nach rechts ziehen können ja auch noch mal beobachten wie sich das ganze mit dem umbruch verhält was ich vorhin schon mal angekündigt hatte wir wollen jetzt noch mal ein bisschen rum spielen mit der css eigenschaften und ich ganz lange dauern und zwar wollen jetzt diese drei boxen analyse ein bisschen unabhängig voneinander kurz sinne des box modells ausrichten und dazu gesagt habe ich noch nicht gemacht mussten die drei klassen konstruieren ich habe also alle box 1 und ich habe eine box 2 und wo wir dabei sind habe ich an die box 3 und 1 3 boxen kann es verschiedene die anweisung machen erstmal speichern und ich empfehle vielleicht am anfang michael hintergrundfarbe kurz zu definieren und den rand also die boarder festzulegen weil das sind genau die stirn anweisung mit denen ich die ränder der box sehen kann das heißt dieses unsichtbare was ich jetzt hab ich weiß okay das ganze hier ist eine box aber wenn ich da das markieren möchte markiert er mir nur den text das heißt ich sehe die grenzen dieser box im wohn und es hilft immer war mit dem box modell arbeitet dass man sich diese eigenschaften eben sichtbar macht ich mach das mal eben für alle drei verbände allerdings unterschiedliche farben doppelpunkt und dabei hier schön dass simon logisch romantische farbpalette und hirn wir fuchs ja nicht so hingehauen und zu der zeit hatte ich gesagt haben festlegen dann immer mal einen einfachen indem er wieder zwei pixel solid und bleckmann es keine große kunst art von machen da kann ich mit dieses thema weiter aufregen die fiktion oder kopieren speichern und was habe ich jetzt erreicht ich kenne jetzt also eben genau sehen wie groß in walle boxen aber wenn die sonne box anleger html technisch dann ist die immer über die komplette breite mit ausnahme des browser technisch voreingestellten außen abstand den kumpel für unsere zwecke allerdings berücksichtigt lassen wenn man das nicht möchte müsse man über eine universal select oder eben alle ja außen abstände auf null setzen aber das brauchen wir fangen wir an mit der box nummer eins und wollen wir mal festlege festlegen ein bisschen style dazu legen immer fest dass das ganze ding eine höhe bekommt nämlich willows eine hülle eine breite stundung von 400 pixel das ganze ding soll ring bekommen von 320 pixeln nach oben und nach unten und drei pixel für pixel nach links und nach rechts und nach unten hin soll das ganze einen außen abstand haben von 20 das heißt hier habe ich jetzt drei mit dem border viel verschiedenes team nutzt die eben die box als solche ist beeinflussen ich glaube angucken was ich da fabriziert hat aktualisieren und siehe da das ganze ding ist jetzt nicht mehr ganz so breit die höhe wird automatisch angepasst wir haben hier in gewinn innerhalb dieser box das ist jetzt nicht sonderlich viel da wir haben ein petting von ein paar pixeln nach oben hin und nach unten sind es mehr bitte hier wieder darüber nachdenken daran denken dass hier hinter 1 h 1 tag steht deswegen ist der abstand hier oben ein bisschen größer das was wir auch sehen dass der außen abstand nach unten das 20 pixel habe ich glaube ich gleich festgelegt genau das sehen wir eben hier als differenz zwischen den gelben und den oder die neuronen und den oben so den lachsfarbenen april den moment malen bisher an das formatieren zunächst einmal wollen wir das ganze zentriert ist nehmen wir hier schon pixel nach oben unten und sein auto der trick den nicht mal angewendet hatte und wir wollen dort ein petting haben und zwar nach links stoppt wofür man an zu schreiben da wollen wir 20 pixel haben die andere seite soll uns mal egal sein und die breite der ganzen box die legen wir fest mit ja auch wie legen wir die dem buffet ist nimmt wir mal 600 pixel so passen ein bisschen fummeln und wir sehen das ganze zentrieren ausgerichtet der abstand nach unten hin sind zwei pixel genau fünf pixel nach oben und nach unten in diesem fall sieht man die eben hier hier oben ist es ein abstand von 20 pixel warum das so ist klären wir wenn wir das video uns ansehen über die berechnungen von box größen und was wir hier drin noch sehen dass ihnen der pending nach links auf der rechten seite haben wir kein berlin so und die letzte box man dann eben definieren dort nehmen wagen nach links diesmal wesentlich weiter nach rechts ausrichten dann warm 1.050 pixel dazu wollen wir die breite soll da wir ans erben vom übergeordneten elementen wir ändern uns in herat war die erzwungene vererbung von box eigenschaften beim petting wo man bisher auf die kacke hauen und sagen wir mal 40 pixel zu allen seiten speichern und schauen uns das elend an und siehe da wir haben jetzt hier einen wesentlich größer und abschlagen das ist margin left und wir haben eben dann zu 1 sein den abstand ja und so kriegt man es dann irgendwie hin seine elemente mit diesem box eigenschaften ein bisschen zu positionieren ich sage bewusst so ein bisschen weil das was vielleicht jetzt schon aufgefallen ist wir sind noch nicht so weit dass wir sagen dass wir zum beispiel diese rosa elemente des lacks element neben das element partner das sind dann spezielle sachen die man bei der positionierung beachten muss und zur positionierung kommen wir auch erst im nächsten skript teil hier solle es erst mal nur darum gehen sich ein bisschen vertraut zu machen mit außen abstand innen abstand boarder und breite des eigentlichen inhalt neben eben der anwendung genau dieser stil anweisung ist vor allen dingen wichtig dass wir dieses bild hier versteht das heißt man auch genau weiß was bedeutet denn netz die breite und diese breite bedeutet eben zumindest im klassischen box modell nicht irgendwie bis zum äußeren border rand sondern tatsächlich nur des konkreten inhalts eine kurze sache noch das ganze hat sich gezeigt haben wird firmiert unter dem klassischen box modell es gibt ein neueres box modell dort werden einige stil anweisungen etwas einfacher dargestellt das neuere box wo er kann genau das gleiche das klassische dort entfällt allerdings ein wenig die anbrechende rein das und viel mehr gibt dass einer den vers im nächsten video bis hierhin bleibt man dazu sagen baut euch eine kurze webseite probiert es aus und verschiebt irgendwie so ein paar boxen quer durch die gegend dann wenn wir hier auf jeden fall schon mal einen großen schritt weiter