Transcript for:
HTML Einsteigerkurs

sehr dass christie willkommen zu einem html einsteigerkurs dieser kurs ist speziell entwickelt für anfänger und anfängerinnen die noch nie mit html gearbeitet haben wir nehmen uns wirklich zeit für die basics den ige sehr ins detail und erkläre die ausführlich wie und warum html funktioniert in den ersten videos rede ich deshalb etwas langsamer damit jeder gut mitkommt und falls ich dir zu langsam bildet dann kannst du gerne die video geschwindigkeit etwas erhöhen auf youtube kannst du die video geschwindigkeit hier einstellen indem du auf das zahnrad kriegst und dann hier auf wiedergabe geschwindigkeit wenn ich dir dann also beim erklären von html zu langsam rede dann probier doch einfach mal die 1,5 fache oder sogar die zweifache video geschwindigkeit aus ich persönlich schaue tutorials oft mit der zweifachen geschwindigkeit weil es mir hilft nicht besser zu konzentrieren es ist ähnlich wie mit dem auto fahren wenn ich mit dem auto im dichten stadtverkehr nur im schritttempo voran komme bin ich bei weitem nicht so konzentriert wie wenn ich auf der autobahn mit 200 km h über den asphalt gehören ähnliche effekte kann auch die video geschwindigkeit haben probiert es einfach aus der kurs der ist aufgeteilt in mehrere kapitel in der video beschreibung hier habe ich dir die einzelnen kapitel aufgelistet mit den jeweiligen zeit stempeln dazu außerdem findest du in der video beschreibung auch andere interessante sachen zum beispiel auch die links um die verwendeten dateien downloaden eine wichtige info noch zum schluss dieser vier stunden html kurs ist ein teil von meinem zehn stunden html und css einsteigerkurs den man sich auf die emi kaufen kann falls sie also dieser vier stunden html kurs gefällt dann kannst du gerne meinen vollständigen einsteigerkurs kaufen wo danach cssb hantiert wenn du aber in css nicht interessiert bist sondern vorerst nur html lernen möchtest dann ist dieser vier stunden kurs für dich völlig ausreichend genug geredet jetzt starten wir mit html jo fangen wir an was ist eigentlich html html steht für hypertext markup language wunderbar jetzt wissen wir also passt die abkürzung html bedeutet was bringt uns das nichts gar nichts denn viel wichtiger ist ja dass man weiß wofür html verwendet wird und wie es funktioniert und genau das schauen wir uns in diesem kurs an eine allgemeine info für alle die noch keinen plan haben was hatte mails um 8 mit html baut man webseiten alle webseiten die ihr kennt sind mit html gebaut auch youporn ja auch yukon und in diesem kurs lernen wir die wir uns eigene kleine webseite kreieren können hey wir brauchen jetzt zwei dinge erstens brauchen wir einen webbrowser und zweitens brauchen wir einen texteditor als webbrowser empfehle ich google chrome ihr könnt auch gerne mozilla firefox microsoft edge safari oder einen anderen web browser verwenden aber wenn er die exakt selben ergebnisse wie ich haben wollt dann verwendet google chrome als zeit das brauchen wir noch einen texteditor wenn ihr windows habt dann könnt ihr hier einfach in die suche editor hingeben editor und dann wird uns hier schon der standorte vorgeschlagen da können wir jetzt drauf klicken und schon öffnet sich der standorte die tor von windows falls ihr auf einem mac unterwegs seid dann hat der pech gehabt nach spaß falls ihr auf einem mac unterwegs seid dann könnt ihr glaube ich textedit verwenden das ist glaube ich der standard editor für mac aber wenn er auf einem mac unterwegs seid dann stresst euch jetzt nicht ihr müsst hier am anfang noch nicht unbedingt mitmachen wichtig ist nur dass wir hier die ersten videos aufmerksam anschaut nach den ersten paar videos laden wir uns dann einen richtigen modernen kohle die darunter der für windows und mac genau gleich funktioniert der grund warum ich jetzt mit einem standard text editor von windows sparte ist damit ihr seht dass das ganze kein hexenwerk ist weil viele glauben immer so ein moderner kohle die tour verspricht irgendeine art schwarze magie und nur deshalb funktioniert das ganze aber nein so ist das natürlich nicht ein einfacher text editor recht theoretisch auch aus wir schauen uns jetzt deshalb ganz kurz die html basics hier mit dem einfachen texteditor an und dann wechseln wir zu einem der modernsten und meistgenutzten kohle die dann um gemeinsam durchzustarten also fangen wir an wir eröffnen jetzt mal unseren text editor das heißt ich gehe hier hin schreiben die tor hinein hier wird schon vorgeschlagen da krieg ich drauf und chuck haben wir schon den editor wunderbar hier schreiben jetzt irgendein beispiel text hinein irgendwas zum beispiel eine kinderlose besteht aus spaßvögel punkt nun klicken wir auf datei speichern und jetzt will unser dieter noch wissen wohin wir die datei speichern wollen hier können wir uns einen beliebigen speicherort aussuchen wir speichern das jetzt mal auf den desto als dateinamen schreibt man hier den schmerz den stern weg und schreibend beispiel eins der dateiname hier der ist komplett egal den können wir frei wählen da können wir reinschreiben was wir wollen wir nennen es jetzt einfach mal beispiel eins aber jetzt gut aufpassen denn statt den punkt tx die hier schreiben wir punkt html und das ist wichtig dass muss genauso geschrieben sein html das heißt das hier ist egal den namen können wir frei wählen das scheißegal aber das hier punkt html das muss genauso dastehen hier klicken jetzt auf speichern dann schließen wir mal den editor und wie man sehen sehen wir hier die datei an desktop als hintergrund ist hier schon aus chrom logo zu sehen warum ist das so na ja wir haben die datei mit punkt hatte mehr gespeichert der computer der weiß automatisch dass eine punkt html datei für einen webbrowser gemacht ist da ich als standard browser chrome eingestellt habe ist hier das chrom logo hätte ich zb als standard browser firefox dann wäre das sein erfolgsbuch so weit so gut aber was passiert wenn ich hier draufklicken na ja probieren es aus ich mache ein doppelklick hh die datei öffnen sich also in google chrome eventuell werde die ihr von eurem computer beim ersten mal gefragt wie ihr die datei öffnen wollt klickt dann einfach auf den internet browser wahl und los geht's ja hier oben hier wo normalerweise die ul steht hand jetzt in der tat stehen wo die datei gespeichert ist und hier da steht jetzt der text den wir immer dieter geschrieben haben ich werde mir jetzt mal das browserfenster dann mache ich hier einen rechtsklick auf unsere datei gehe auf eröffnen mit und schaut hier ob mir hier der täter vorgeschlagen wird bei mir wieder hier schon vorgeschlagen falls ihr euch hier noch nicht aufscheint dann klickt auf antrieb auswählen dann schau dir den editor findet hier steht bei mir schon falls ich eben noch nicht zu sehen ist klickt hier auf weitere apps und hier sollte dann irgendwo zu sehen sein wie gesagt bei mir steht ja schon hier wird auf dann auf ok und jetzt öffnet sich die datei wieder im editor das bedeutet wir haben jetzt die datei einmal im browser geöffnet und einmal im editor jetzt passe ich den browser so an dass sie nebeneinander sind dann mache ich das hier kleiner genau das mache ich auch etwas kleiner wunderbar jetzt haben wir hier den editor hier den browser nebeneinander da können wir dann besser arbeiten und nächsten video starten wir mit html hey jetzt kommt html ins spiel html steht ja nicht für how to meet ladies sondern für hypertext markup language aber der name ist uns eigentlich scheißegal auf deutsch heißt das einfach nur html ist eine auszeichnungssprache ich sage den browser also wie etwas auszeichnen soll vereinfacht gesagt ich sage den browser wieder etwas darstellen soll und es funktioniert folgendermaßen ich gehe dann editor hierher und da mache ich jetzt ein kleiner zeichen dann schreibe ich strang und dann mache ich ein größerer zeichen also ich habe jetzt hier ein kleiner zeichen gemacht dann in der mitte strong geschrieben und dann ein größer zeichen wenn ich jetzt hier auf datei und dann auf speichern klicken kann ich jetzt hier in den browser hinein klicken hier auf aktualisieren klicken und jetzt ist der komplette text wird der strom tag sagt den browser nämlich dass er den text fett machen soll der sonntag ist eben dass das ist das sonntag also ein tag in html ist immer das was zwischen einem kleiner und einem größer zeichen steht das ist eben ein tag mit solchen text kann ich mit dem browser kommunizieren denn wenn hier zwischen dem kleiner und großer zeichen frank steht dann weiß der browser das alles was nach diesem tag hier kommt fed geschrieben sein soll der tag selbst ja also das strong mit dem größeren kleiner zeichen wird im browser nicht angezeigt wir sehen hier nur diesen text der hier nach dem stratec hier steht so was ist jetzt wenn wir wollen dass nur die drei wörter hier eine kinderlose ehe das nur diese drei wörter hier fed sein sollen besteht aus spaßvögel sollen nicht mehr fett sein wie macht man das da müssen wir den browser ja irgendwie mitteilen wie weit dieser strandtag hier gehen soll und das machen wir mit einem schließenden sonntag dafür gehen wir jetzt hier in weil wir wollen ja dass diese drei wörter sollen fed sein das soll nicht mehr fett sein das heißt wir gehen jetzt hier hin mache ein kleiner zeichen dann mach meinen schrägstrich der es wichtig der schrägstrich dann schreiben dass franck und da machen ein großer zeichen das ist jetzt ein schließen dass sonntag wir speichern das mal das heißt speichern dann aktuell ist hier mal hier und jetzt ist nur mehr sind nur mit diese drei wörter hier festgeschrieben diese drei wörter nicht mehr weil nur diese drei wörter hier zwischen den frontex sind schauen wir noch mal her das ist ein öffnender sonntag das hier und das ist ein schließen dass sonntag das heißt ein öffentliches kontakte mit zugeschrieben und beim schließen strong tag da muss man auch den schrägstrich hier in machen dadurch wird es einen schließen dass sonntag der öffnende tag sagt den browser neu starten soll und der schließen sagt der browser war aufhören soll mit der jeweiligen formatierung wenn ich jetzt den öffneten stratec jetzt aus schneide und dann zum beispiel hier nach vorne gebe also hier vor dass eine von dieses wort hier und hier einfügen was wird jetzt passieren wenn man speichern dietmar walter der speichern dann gehen wir hier her schauen wir jetzt hier her ich aktuell ist hier jetzt sind nur diese zwei wörter ihr fett warum nur weil nur diese zwei wörter hier zwischen dem öffnenden und schließenden strand exit das wort eine hier das hier ist ja nicht mehr zwischen dem öffnen und schließen deswegen ist das jetzt nicht mehr fett ich denke ihr versteht schon wie das funktioniert ich kann dieser tag sogar mitten in einem wort hineinschreiben das macht natürlich keinen sinn aber nur damit ein gefühl dafür bekommt zeige ich euch dass wir das funktioniert ich schneide sie den soundtrack aus und dann gehe ich hier irgendwo zu sagen wir zweifeln dieses wort nein zum beispiel nach dem n hier und da füge ich das jetzt ein einfügen und wenn man das speichern hier datei speichern wir aktualisieren dann sind jetzt die ersten drei buchstaben von dem wort nicht mehr fährt weil sie ja nicht mehr zwischen dem öffnen und schließen und sonntag sind jetzt ist nur mehr dieser teil hier festgeschrieben ja easy peasy es gibt neben den strandtag natürlich auch noch weitere text anstatt strom kann ich hier zum beispiel auch gm schreiben und ganz wichtig nicht nur hier muss ich das dann schreiben was ich hier öffneten tag sondern auch jedem schließen muss ich das dann umändern zu einem gm der schrägstrich bleibt weil das ist ja anschließender tag steht nicht für europa meisterschaft sondern das ist wieder so eine kurze abkürzung für englisch für es das heißt dazu was sie betonen oder sowas ja und wenn man das als datei speichern und dann hier aktualisieren dann ist der text der jetzt zwischen den takes ist kursiv und ich musste ihm schreiben also ich kann jetzt nicht so ein entscheidender aspekt der browser nicht ja also wenn ich jetzt das so hinein schreiben würde und dass dann speichern würde und aktualisieren dann würde das nicht funktionieren weil das kind applaus nicht der browser kennt nur das em ja das em kinder und der weiße hm das heißt dass hier muss jetzt kursiv sein damit man das ganze besser sehen schneide ich das jetzt ausschneiden und dann füge ich hier ein einfügen so dass man das jetzt wieder speichern würden natürlich und hier aktualisieren dann ist jetzt sind diese drei wörter wieder kursiv geschrieben statt dem em kann ich natürlich auch noch andere sachen hineinschreiben ich kann auch eine hier hinein schreiben dann muss ich natürlich hier auch im schließenden zeigt dass gut dass du ihn ein schreiben jetzt haben wir hier also eine öffnenden attack und hier einen schließtag und was wir da passieren problemlos aus dem speicher nicht aktualisieren wieder jetzt ist der text zwischen den takes unterstrich der browser was also wenn hier ein öffnender und hier entschließen urteil ist dann soll der texte zwischen unterstrichen sein wenn hier statt dem uhr ein em stehen würde und die auch da soll der text dazwischen kursiv sein und wenn hier statt dem einst rang stehen würde und hier auch dann soll der text inzwischen fed sein so funktioniert das ganze das sind vordefinierte html text das heißt der browser kennt dieser text und weiß genau was er da zu machen hat und das ist html so kann ich mit dem browser kommunizieren ich kann auch mehrere tags kombinieren und wie das geht sehen wir uns im nächsten video an bevor wir mit html weitermachen noch eine kurze info im letzten video habe ich ja immer gespeichert in dem ich hier auf datei und dann hier auf speichern geklickt haben aber das ganze geht noch schneller und zwar mit der tastenkombination steuerung es die sehen wir hier das ist die tastenkombination für diesen befehl das heißt wenn ich steuerung es drücke dann speichert der editor auch ich kann hier in irgendetwas schreiben wenn ich jetzt steuerung gestrige und dann hier in den browser gehe und aktuell ist hier dann sehen wir die änderungen das heißt sobald ich hier im editor steuerung es drücke speichert er die änderungen machen wir das noch mal ich drücke steuerung es jetzt hatte die änderungen gespeichert ich die hierhin ich aktualisiert und wir sehen wieder der text hat sich wieder verändert ja schon dass sie daraus drückt man steuerung ist aktualisierung nochmal jetzt passt wieder das geht also wesentlich schneller und in zukunft wenn ich sage ich speicher dann klicke ich nicht mehr meter auf datei speichern sondern ich drücke einfach die tastenkombination steuerung ist hey wir kennen ja jetzt bereits den strandtag den tag und den em tag das sind alles html tags und mit denen kann ich ja mit dem browser kommunizieren ich kann auch mehrere tags kombinieren zum beispiel kann ich hier vor dem u tag hier kann ich jetzt auch den öffneten stromberg hinschreiben und hier nach dem schließen tag hierher da mache ich jetzt anschließenden strandtag ihr erinnert euch ein öffnender tag sieht so aus das heißt ich habe ein kleiner zeichen ein großer zeichen und dazwischen den decknamen und anschließender tag der sieht so aus das heißt ich habe wieder ein kleiner zeichen ein größer zeichen den decknamen dazwischen und hier halt noch den schrägstrich das macht das ganze zu einem schließen tag ich spreche dass mit der tastenkombination strg es dann klicke ich hier in dem browser und aktualisiert und jetzt sind beide text kombiniert der text der ist jetzt also fett und unterstrichen achtung wenn nun mehrere tags miteinander kombiniert ist es ganz wichtig dass die schließenden tags in umgekehrter reihenfolge zu den öffnenden tag sind das ist ganz wichtig ich habe hier als öffnende tags zuerst ein strandtag und dann den tag und bei den schließenden text habe ich die umgekehrte reihenfolge also zuerst den tag und dann den schließens sonntag merkt euch das die schließenden text müssen immer in umgekehrter reihenfolge zu den öffnenden tag sein hätte ich hier jetzt zuerst den tag also hätte ich jetzt nicht als erstes von texas tech und hier dann den sonntag das würde auch gehen also die reihenfolge hier ist jetzt im prinzip egal aber da muss sich die reihenfolge hier anpassen das heißt die reihenfolge von den öffnen tags hier dies im prinzip egal ob ich jetzt in dem fall zuerst ein strandtag und an den mut habe oder zuerst den tag und an den strong tag das ist egal aber die schließen text müssen halt dann passend zu den öffnenden text wenn ich jetzt hier als erstes den tag und dann nimmst rangnick habe dann geht das nicht dass ich hier auch als erstes den tag und dann ist radek habe das passt nicht ich muss die reihenfolge hier tauscht das heißt in dem fall müsste ich jetzt hier den soundtrack machen und jährige schließen jetzt passt wieder weil die zwar als öffnete text zuerst den öffnenden mutig und dann den öffnens sonntag und bei den schließenden text haben wir die umgekehrte reihenfolge zuerst entschließen und stratec und dann den schließen gut weg wenn ich das wieder speicher mit steuerung ist und jagt goldes hier ändert sich nichts das funktioniert genau gleich wichtig ist nur die schließenden tags müssen in umgekehrter reihenfolge zu den öffnenden tags seien jetzt sagen wir ich will auch noch dass der text kursiv ist wir machen das richtig mit einem ehrentag wo man hin in dem fall ist es jetzt egal ob ich denn hier hin mache hier hin oder hierhin mache ich sage mal ich mach den öffnenden jeden tag hier ganz am anfang hin gm so jetzt haben wir hier den öffnenden gm tag wo muss ich jetzt entschließen eakin machen überlegt kurz richtig den schließen tag muss sich hierhin machen das heißt hier macht den schließen em tag hin nun haben wir wieder bei den geschlossenen text bei den anschließenden tags handel jetzt die umgekehrte reihenfolge zu öffnenden tags das heißt hier bei den öffneten habe ich zuerst den em tag dann habe ich den tag und dann den strandtag und bei den schließen tags habe ich es genau umgekehrt zuerst in stratec dann den tag und erst dann den schließen em tag wenn ich den spaß wieder speicher und hier aktualisiert dann sind jetzt alle drei takes kombiniert der text ist fett kursiv und unterstrichen hätte ich den öffneten die ämter jetzt nicht hier sondern ich schneide ihn jetzt aus mit steuerung ist kann ich den ausschneiden und dann füge ich ihnen hier zur steuerung vn jetzt haben wir den öffneten hier wo muss jetzt der- schließen die amtex sein weil jetzt passt ja dieser reihenfolge nicht mehr überlegt kurz wo muss das schließen der em tag in richtig der schließen deren täglich schnell wieder aus mit störung xg hierher zurück besteuerung vor zum einfügen der schließen jeden tag muss jetzt hier seit jetzt passt die reihenfolge wieder hier als erstes der eröffnenden tag dann der öffentlichen tag dann der öffnende emc und dann in umgekehrter reihenfolge zuerst der schließen der em tag dann der schließen des sonntag und dann der schließende attack ich kann das wieder speichern und hier aktualisieren natürlich nichts das funktioniert genau gleich denn in dem fall ist die reihenfolge hier von den öffnenden tags scheiß egal wichtig ist nur dass die schließen tags dann in umgekehrter reihenfolge dastehen warum man das hier zu machen dass man hier die schließen tags in umgekehrter reihenfolge zu den öffnenden text hinschreiben muss das müsst ihr jetzt noch nicht verstehen vertraut mir im laufe des kurses versteht ihr das dann sowieso immer besser warum man das so macht für jetzt ist es aber nur wichtig dass ihr euch merkt dass man das so macht die schließenden tags müssen immer in umgekehrter reihenfolge zu den öffnenden 6 1 wir sehen uns im nächsten video halli hallo in diesem video gibt's jetzt eine kleine challenge für euch ich will dass der text im browser so aussieht als ich will dass eine kinderlose ehe fett und kursiv ist und das wörtchen er soll zusätzlich noch unterstrichen sein und bei spaßvögeln dann möchte ich das spaß fett unterstrichen ist und vögeln soll auch noch unterstrichen sein aber nicht mehr fett probiert das aus obst das selber so ihn bekommt und im nächsten video schauen wir uns dann gemeinsam die lösung an ok dann schauen wir uns jetzt mal die lösung ich habe hier ist im editor wieder den text einfach so ohne hat weltec stehen und er schaut den browser jetzt so aus wir wollen jetzt dass eine kinderlose ehe fett und kursiv ist also machen wir hier am anfang einen öffneten das sonntag und einen öffneten die emtec und dann machen wir hier nach dem wort er den schließenden em-tag und den schließenden strandtag achtet auf die umgekehrte reihenfolge der schließenden tags also hier haben wir zuerst ins sonntag und dann den öffnenden ehrentag und hier in umgekehrter reihenfolge den schließen ihren tag und anschließendes sonntag falls ihr hier bei eur lösung zuerst in jedem tag verwendet habt und dann den strong tag ist das natürlich auch okay aber dann müsste hier die reihenfolge umkehren dann müsste hierzu erstens sonntag schließen und dann den em tag wenn man das jetzt speichern und hier aktualisieren dann schaut das schon mal gut aus der ist jetzt der texte selbst und kursiv und nun wollen wir erreichen dass das wörtchen er zusätzlich noch unterstrichen ist das machen wir mit dem ich schreibe also hier vor das wörtchen ihr den öffnenden tag und wo mache ich jetzt anschließenden tag in überlegt kurz dann mache ich einfach hierhin so ist das hier ist jetzt haben wir den schließen und jetzt passt es auch wieder von der reihenfolge denn wir haben jetzt hier als erstes den öffnenden em-tag dann den öffneten sonntag dann kommt diese zwei wörter hier und dann haben wir den öffnenden mutig und die schließenden text in der umgekehrten reihenfolge denn wir haben als erstes den anschließenden tag dann den schließen und sonntag und dann den schließen em-tag wenn wir das wieder speichern und hier aktualisieren jetzt ist das wörtchen er zusätzlich noch unterstrichen und nun kommen wir zu dem wort spaßvögel ja wir wollen ja dass spaß fett und unterstrichen ist und vögeln soll dann nicht mehr fett aber immer noch unterstrichen sein ich schreibe also hier am anfang mache ich den tag dann mach ich dann öffneten trolltech dann mache ich hier nach dem wörtchen spaß den schließen uns von tag und hier ganz zum schluss nachdem nach dem punkt mache ich den schließenden wir kontrollieren jetzt auch mal kurz die reihenfolge bei dem öffneten text haben wir als erstes den öffnenden tag daran den öffnenden stratec und bei den anschließenden text habe in umgekehrter reihenfolge zuerst den schließungen sonntag und dann den schließen wenn wir das speichern und hier aktualisieren dann passt das jetzt auch wunderbar das ganze funktioniert so der browser sieht hier den öffneten am sonntag und weiß okay alles was jetzt kommt ist fett und kursiv in dem fall eben diese zwei wörter dann sieht er öffnet also weiter das alles ist jetzt kommt kursiv fett und unterstrichen ist in dem fall ist dass nur das setting her das schreibt einfach so hin dann sieht er schon den schließenden tag den schließungen strandtag und den anschließenden em tag und weiß somit dass diese drei formatierungen hier aufhören dann kommt diese zwei wörter die schreibt einfach wieder so in ohne formatierung schreibt einfach hin und dann wieder wieder den öffnete mutig und eröffnet am sonntag und weiß alles was jetzt kommt ist also wieder fett und unterstrichen in dem fall es wird viel spaß beschreibt er die vier buchstaben dann einfach hin dann sieht er den schließt traumtag und da ist okay die fed formulierung hört hier auf aber die ufer mit ihrem also das mit dem unterstreichen das ziel schon noch darum ist das wörtchen vögeln hier immer noch unterstrichen und erst hier endet dann der schließende also erst hier endete ende der route durch den schließen ich glaube hier versteht schon ein bisschen wie das funktioniert und das war es mit dem video wir sehen uns im nächsten jahr etwas größer bei fast allen tags benötigt man einen öffnenden und schließenden html tags also ich habe hier jetzt den öffneten sonntag stehen dann habe ich hier den text hier stehen und am schluss noch den schließenden sonntag und wenn man das eben speichern und dann aktualisieren dann schaut das ebenso aus der ganze text ist fett wenn ich im editor hier den schießen stratec entfernen und das wieder speicher und dann hier aktualisiert dann sieht man dass sich nichts ändert es funktioniert also immer noch auch ohne den schließenden sonntag hier augenscheinlich passt das also aber das ist bett practice das ist für das machen wir nicht bei dem strong tag nehmen wir immer einen öffnenden und einen schließenden tag auch wenn wir hier gar nicht benötigen würden wir schreiben hier den schließenden strong tag hin und das ist eben nicht nur beim sex das ist auch bei der em bei demut und bei ganz vielen weiteren text die wir noch nicht kennen gelernt habe man nimmt bei fast allen text immer einen öffnenden und einen schließenden tag es gibt nur ganz ganz wenige spezielle ausnahme tags wo man keinen schließenden tag benötigt und darauf werden wir dann im nächsten video etwas näher eingehen bis dann hey ich habe hier wieder unseren satz stehen ohne html text was passiert jetzt eigentlich wenn wir hier im editor in die nächste zeile hüpfen und schreiben ihre sind menschlich punkt ich speicher das mal dann gehe ich hier her und aktualisierter browser und jetzt ziehen wir hier im etat stehen die zwei sätze und trainer aber im browser stehen sie nebeneinander warum weil der browser leerzeilen ignoriert egal wie viele ich mache ich kann hier sogar vor dem spaßvögeln ein paar lehrzeit machen und dann zwischen dem spaßvögeln und dem ihres ist menschlich danach brauche noch ein paar leerzeilen speicher das wieder mit störung es ich klicke hier auf aktualisieren und nichts ändert sich ich hab's aber wirklich gespeichert hier datei speichern aktuell ist es passiert nichts warum weil der browser leerzeilen ignoriert löschen wir die leerzeilen wieder aus so wenn ich will dass der browser eine leerzeile macht dann muss ich ihn das mit einem tag mitteilen und zwar mit dem br tech ich gehe hier nach dem spaßvögeln hier da gehe ich jetzt hin und mach ein kleiner zeichen schreiben br das ist englisch für break die abkürzung und dann eine größe zeichen ich muss aber beschreibt nicht break schreibt ich muss beschreiben das musst du da stehen genauso und wenn ich das speicher- und jetzt aktualisieren dann hüpfte text hier in die nächste zeile denn der tag sorgt für einen zeilenumbruch und zwar immer genau da wo der bär tec ist würde ich den werte geht es auch schneiden mit störung ist und hier vor dem spaß für ihn geben und das wieder speichern und aktualisieren dann hüpfte text hier nach dem aus also ja nach dem aus hier in die nächste zeile weil hier kommt er noch das aus der leher schritt dann kommt der tag und dann kommt der spaß für ihn dass das spaß für ihn steht hier schon in der nächsten zeile und ihre sind menschlich ist in derselben zelle wie spaßvögeln weil wir hier ja keinen wert mehr haben würde ich dem weg zum beispiel nachdem es hier hingeben das macht natürlich keinen sinn aber nur das wm feeling dafür bekommt ich speichere das wider was glaubt es passiert ich aktualisiert jetzt ist dass es hier noch in dieser zeile hier aber nachdem es hüpfte bronze und dann gibt er diesen text hier aus das bedeutet immer da wo der bär tec steht macht der browser einen zeilenumbruch ich gebe jetzt den br tag wahrscheinlich wieder ausgeben hier am schluss wieder hin und dann füge ich den wert hier noch einmal zweimal dreimal ein und wir werden jetzt sehen wenn ich jetzt speicher und ein aktualisiert dann wird der browser für jeden brt keinen eigenen zeilenumbruch machen also speicher ich aktuell ist hier und jetzt haben wir hier etwas mehr abstand weil für jeden bewertet hier ein eigener zählung buch erfolgt ist so funktioniert das also übrigens der browser ignoriert nicht nur leerzeilen er ignoriert auch leer schritte wenn es mehr als einer ist also wenn ich jetzt hier nachdem aus hierhin gehe ja nach dem wort aus und hier ein paar schritte ein tiger und das speicher dann können wir ja schon nicht aktualisiert da ändert sich nichts denn der browser erkennt immer nur den ersten schritt und den restlichen räder also wenn ich jetzt hier bei dem ja hier ein paar schritte machte und das jetzt speicher und schauen wir jetzt hier her auf das aus da schauen wir ja wenn ich jetzt aktualisieren dann haben jetzt hier nur eine lehr schritt und den rest der hier eigentlich noch steht den ignoriert da der browser erkennt bei den schnitten immer nur einen und falls danach noch weitere kommen ignorierte den rest das ist einfach nur gut wenn man das weiß aber jetzt zurück zum br tag also wir löschen die lehrer schritt aus weil die schon scheiße aus dass le soir auch aus damit sie das so ausschaut wie vorher passt und jetzt kommen wieder zurück zur pr text die können jetzt auch löschen schauen wir uns den hier an das ist ja ein öffnender beate es gibt ja aber keinen schließen und berta warum ist das so im letzten video habe ich ja gesagt dass man immer einen öffnenden und einen schließenden tag benötigt es gibt aber spezielle ausnahme tags wo man keinen schließenden tag benötigt der wert ist zu einer ausnahme tag denn er macht immer nur einen zeilenumbruch und es gibt nichts was sich dazwischen reinschreiben könnte deshalb gibt es nur den einen tag ihr könnt euch merken wenn ich einen bereich für ein styling festlegen muss dann brauche ich einen schließen und einen öffnenden beispielsweise beim strong tag da muss ich den browser ja sagen vom bubis wo der text sein soll deshalb habe ich beim strandtag einen öffneten und einen schließenden tag bei mutig wäre es genau dasselbe ich muss den browser ja sagen von wo bis wo der text unterstrichen sein soll deshalb auch bei mutec ein öffnender und anschließendem tag aber beim br tag da muss ich den browser ja nicht sagen vom wo bis wo der zeilenumbruch geht das kann ich den browser auch gar nichts sagen denn der browser macht automatisch immer nur einen zeilenumbruch da wo der br tec steht deshalb gibt es beim br tag keinen schließenden tag das mit dem video wir sehen uns im nächsten etwas größer ich im letzten video haben wir den beehrte kennengelernt beim br tag gibt es ja keinen schließenden tag ein weiterer tag der so ähnlich funktioniert ist der hr tag also ich mach stadt dpa ein haar hin und wenn ich das jetzt speicher also das ist jetzt der hörtech wenn ich das jetzt speicher und hier aktualisiert dann sind wir jetzt hier so eine durchgezogene linie der hr tag macht nämlich eine linie die automatisch in einer neuen zeile beginnt hier brauche ich dann auch keinen schließenden tag weil der browser beim hr tag immer diese linie aus die in einer neuen zeile egal wo ich den hightech hinschreiben nur für das verständnis ich könnte den hairtech jetzt zwei brauch ausschneiden und hier einfügen und wenn ich das speicher- und jetzt aktualisiert dann sehen wir dass wir normal ausgegeben dann kommt ihr hier der hörtech der beginnt als eine neue zelle gibt diese linie heraus und das was dann nach dem hr tag steht kommt dann in der nächsten zeile so funktioniert der hrt den hr tag nimmt man zum beispiel wenn man eine trennlinie haben möchte und das war es mit diesem video wir sehen uns im nächsten sehr was wir bereits gesehen haben zählungen brüche und mehrere leerzeichen sind den browser scheißegal ich schreibe jetzt mal einen öffneten strong tag dann schreibe ich eine alte bauernregel sagt doppelpunkt dann mache ich den br tag dann noch einen öffneten blitzt und donnert es mit schauern kriegt dass sie ins bett zum bauer jetzt mache ich den schließen und den schließenden strong tag wenn ich das es speicher und hier aktualisiert dann schaut das jetzt im browser so aus dass hier mit dieter kann ich eben alles in einer wurst schreiben und im browser wird zunehmen so angezeigt wie es mit dem html text vorgegeben habe wie wir bereits gelernt haben sind leerzeilen und leer schritte scheißegal ich kann also hier überall ein paar ein paar leerzeilen fügen und ein paar schritte noch einfügen hier noch ein paar zahlen hier noch ein paar leerzeilen hier noch ein paar leerzeilen dann kann man das so noch machen so noch und nochmal hier noch ein paar leer schritt machen wir auch noch ein paar schritte unter machen wir das so und wenn man das jetzt speicher und hier aktualisieren was wir passieren nix erinnert sich nichts weil er schritte und leerzeilen sind im browser scheißegal und deshalb weil er schritte und leerzeilen dem browser scheißegal sind formatiert man das hier mit dieter idealerweise so dass man es selbst gut lesen kann den satz hier den würde ich zum beispiel so hinschreiben so finde ich das nämlich an übersichtlichen ist natürlich ein bisschen geschmackssache wie man das hier formatieren möchte ich finde es halt jetzt so am besten wenn wir das jetzt wieder speichern und hier aktualisieren ändert sich natürlich auch nichts funktioniert genau gleich wie vorher nur hier im editor ist es jetzt eben für mich leserlicher wir merken uns also wir formatieren dass im editor hier so dass wir selbst gut lesen können griaß eich das ganze was er bis jetzt gelernt haben funktioniert weil wir die datei mit der endung punkt html gespeichert haben dadurch weiß der browser wasser zu machen hat wenn wir die datei nicht mit der änderung punkt html gespeichert hätten würde es nicht funktionieren als beispiel öffne ich jetzt noch mal den editor unterscheide ich jetzt den öffnen am sonntag ich bin ein text und den schließen stronk jetzt spreche ich das und zwar auf dem desktop und als namen wähle ich jetzt beispiel 2 und das punkt tipps die das lasse ich jetzt so stehen das heißt das ist jetzt keine html datei sondern eine punkt ist jeder der speicher das dann können wir das zu machen und hier haben wir schon die beispielsweise im gegensatz zur beispiel 1 datei hat sie jetzt kein browser logo als hintergrund denn eine punkt txt datei ist nicht für den browser gemacht wenn ich die datei öffnet dann wird sie standardmäßig im editor geöffnet was passiert wenn ich die datei trotzdem im browser öffnen möchte also dann mache ich jetzt einen rechtsklick dann gehe ich auf eröffnen mit und dann suche ich mir wenn ihr hier den browser schon vorgeschlagen hat könnte hier draufklicken ich muss hier noch auf antrieb aus wählen gehen dann gehe ich auf weitere apps hier habe ich ihn auch noch nicht hier hätte ich den internet explorer so hier will man chrome aus jetzt öffnet sich diese bei google chrome und wie wir sehen sehen wir dass hier die strong tags gar nicht als solche wahrgenommen werden denn der browser hat keine ahnung was er mit einer punkt ist die datei machen soll also wenn ihr wollt dass der browser html versteht also dass der check dass das ein öffnender und das entschließen dass rangnick ist und dass der text zwischen fett sein soll wenn ihr wollt dass er das versteht dann müsst ihr die datei mit punkt html speichern da muss es einen punkt hatte meldete er seine punkte xdd da können sich der browser nicht aus wir merken uns also wenn wir mit dem browser mit hat mail kommunizieren wollen müssen wir unsere datei mit einer punkt html endung abspeichern sonst geht's nicht also fassen wir nochmal das bisher gelernte zusammen wie wir gesehen haben der browser kennt sich mit html dateien aus eine html-datei ist einfach eine datei die mit punkt html endet für das lesen einer punkt hatte meldete benötigt der browser kein internet der browser ist einfach nur ein programm welches punkt hatte meldeten lesen kann so wird zum beispiel ein programm ist welches punkt docx dateien lesen kann html ist im prinzip immer das was zwischen einem kleiner und einem größer zeichen steht es gibt fixe vordefinierte begriffe die man zwischen die kleinen größer zeichen schreiben kann zb strong em oder u man nennt diese dann html tags diese text kennt der browser und er weiß dabei automatisch wasser machen muss somit kann man über diese tags mit dem browser kommunizieren bei den meisten tags muss man einen öffnenden und einen anschließenden tag angeben damit der browser theis vom wo bis wo die formatierung gehen soll es gibt aber spezielle ausnahme tags wo man nur einen tag angeben muss also zum beispiel der br tag oder auch der hrt auch bei diesen text weiß der browser genau was zu machen hat und wie gerade gesagt benötigte browser zu lesen von html dateien kein internet das kann er einfach so wenn wir jetzt bei unserer beispiel 12 hier schauen dann sehen wir hier oben wo normalerweise die url steht hier oben das ist jetzt der datei part wo die datei gespeichert ist das heißt das ist der der tat wo die datei auf meinem computer liegt und das hat noch nichts mit dem internet zu tun aber wie funktioniert das jetzt mit dem internet mit dem internet kann ich ganz ganz ganz ganz ganz vereinfacht gesagt mit meinem browser auf andere html dateien auf anderen computern zu greifen allerdings nur wenn diese html dateien mit dem internet verbunden sind nein er hatte meldete hier ist nicht mit dem internet verboten mein computer ist zwar mit dem internet verbunden aber nicht diese hatte meldete das bedeutet nur ich kann auf diese datei hier zugreifen wenn ihr den datei pathologen genau den hier bei euch im browser eingibt dann werdet ihr nicht finden auch sie hat zufällig eure datei und exakt demselben datei abgespeichert aber dann würdet ihr eure datei finden und nicht meine denn meine ist nicht mit dem internet verbunden wie man eine html-datei mit dem internet verbindet können wir in diesem crash kurs nicht durchmachen denn das würde den rahmen sprengen aber damit ihr euch das kurz vorstellen könnt wie das mit den urls und so weiter funktioniert hier ein erklärungsversuch wenn ihr hier oben in eurem browser eine datei parteien gibt dann schaut der browser nur auf eurem computer über die datei findet hierfür braucht er kein internet wenn er die datei findet dann zeigt dass ihr euch an wenn er sich aber nicht findet also wenn ich hier zum beispiel irgendwo ein tippfehler drinnen habe und sie dabei wieder suche dann teilte mir mit dass er die dateien nicht finden konnte wenn ich jetzt hier oben aber eine url an gibt also zweifel amazon.de dann war es der browser das ins internet muss um nach dieser datei zu suchen er schaut über eine internetverbindung hat wenn er keine internetverbindung hat dann sagt der browser dass er nicht suchen kann weil er eben keine internetverbindung hat wenn er eine internetverbindung hat dann kann er sozusagen mit seinem ansprechpartner sprechen der ansprechpartner ist sehr einfach gesagt euer internetanbieter der browser fragt diese nun über die url amazon.de kennt der internet anbieter antwortet im besten fall mit einem ja und dann sagt er den browser auch gleich wohin diese url führt diese url führt in diesem fall zu einem anderen computer der die entsprechende html datei für dieser seite gespeichert hat der andere computer weiß dass er für die url amazon.de eine bestimmte html-datei ausspucken muss ja hier in der us-stadt punkt.de und nicht punkt html aber diese url ist nicht der dateiname sondern das ist einfach nur die adresse unter der eben die entsprechende hatte männer teil für diese seite hier zu finden ist so ganz ganz ganz ganz ganz vereinfacht gesagt funktioniert das ganze [Musik] hey genug von dem langweiligen texteditor es wird zeit für etwas neues zeit für etwas besseres zeit für einen richtigen code editor öffnen wir mal unsere internet browser und dann geht mir hier in die suche wie studio studio code ein astrid die enter-taste dann klicke ich hier auf diese suchergebnis und da sind wir schon oft offiziellen seite von visual studio code visual studio code ist ein moderner sehr häufig genutzter kostenloser editor den es sowohl für windows als auch für mac gibt wenn wir hier auf dem feld schicken können wir zum beispiel den für mac auswählen den brauche ich jetzt aber nicht ich habe hier ja einen windows pc also klicke hier auf download vor windows und da geht's auch schon los der visual studio code editor wird heruntergeladen nach einer kurzen wartezeit ist auch schon fertig danke loaded und ich kann die datei einfach öffnen indem ich auf klicke jetzt wird sie geöffnet das ist also das installation setup als erstes müssen wir uns jetzt natürlich die lizenzvereinbarungen durchlesen weil wir werden nicht um sein und irgendetwas abfackeln was du nicht durchgelesen haben also diese lizenz gilt für das produkt visual studio klar der quellcode für visual studio code weil ihre stadt oder land den ausschluss oder die beschränkung von zufälligen schäden folgeschäden oder sonstigen schäden nicht gestattet alles klar das hört sich gut an ich akzeptiere die vereinbarungen dann klicke ich hier auch weiter dann kann ich mir noch den speicherort aussuchen denn las ich gleich so wie er ist da kriege ich wieder auf weiter da krieg ich auch auf weiter und hier klicke ich jetzt noch auf das häkchen hierbei desktop symbole stellen und bei diesem 2 da aktiviere ich auch das häkchen und dann klicke ich hier auf weiter jetzt sehen wir hier schon den schönen button wo das installieren hier steht und da klicken wir drauf und die magie beginnt büschel studiert wird installiert wunderbar visual studio des fertig installiert wir können jetzt hier fertig stellen klicken und zack schon öffentlich der kohle dieter fantastisch und ab jetzt fangen wir dann so richtig an mit html und css egal im letzten video habe ich versprochen dass wir so richtig mit html starten aber bevor wir das tun richten wir uns auch noch ganz kurz uns ein kohle detail so wie wir ihn brauchen ich hoffe mal unseren code editor hier und da wir den politikern und zum ersten mal gestartet haben werden uns hier noch ein paar darstellung sachen angezeigt vielleicht sieht das bei euch auch ein bisschen anders aus ist im prinzip egal weil wir brauchen das nicht wir lassen das mal alles auf standard deshalb klicke ich hier auf das ixs hier kann ich auch noch auf das ixs klicken gut und nun können wir im prinzip auch schon durchstarten mit neuen editor ich minimieren hier aber zuerst noch unter stelle mir hier auf dem desktop einen neuen ordner also ich mache hier einen rechtsklick dann auf neu und dann auf ordner und wir nennen ihn jetzt projekt dort na also projektpartner gut der name von dem von dem ordner ist vollkommen egal wir könnten theoretisch auch mario barth nennen diesen ordner ja also für die funktion ist der name natürlich egal wir nennen ihnen jetzt einfach projekt dort na weil es in orten in denen dann projekte drinnen sind gehört jetzt wieder zurück in unseren twitter und wir klicken jetzt da oben auf weil dann auf open folder und dann suchen wir uns dem projekt dort nach in meinem fall ist er ja auf den desktop also gehe ich hier auf der desktop jesus schon hier klicke ich einmal drauf auf dem direkt ordner und dann auf ordner auswählen wir klicken da oben hier wieder auf das iks und hier unten anklicken auch noch auf der cigs und jetzt schauen wir uns noch gut zu haben wie der editha so funktioniert oder was ist damit muss ein bisschen besser auskennen also hier links werden uns die dateien angezeigt und die ordner also hier steht ja schon projekt ordner und hätten wir da drinnen schon dateien dann würden die uns hier eben angezeigt werden und hier rechts steht dann der code den wir schreiben ich kann jetzt hier in diesem bereich mit der rechten maustaste klicken und dann klicke ich hier auf new viel und jetzt kann ich hier einen dateinamen eingeben ich nenne die neue datei beispiel drei punkt html ich kann jetzt auf enter drücken und jetzt kommen wir schon hier in das rechte fenster hier und hier können wir dann den code ihn entscheiden fangen wir doch wieder an mit einem strong tag dann kennen wir schon also keiner zeichnen haha ich habe ja noch nicht mal dass frauen ausgeschrieben da wird es mir schon vorgeschlagen ich kann jetzt hier draufklicken oder auch auf enter drücken cool und jetzt mache ich noch das größte zeichen hin zu a ha und jetzt fügt mehr wie studier code eben den schließen sonntag gleich noch dazu ein fabelhaft ich zeige euch jetzt sogar noch einen trick also lassen wir das wieder raus und jetzt schreibt wir nur den anfang von strong also wieder zweifel str und hier wird es mir schon wieder vorgeschlagen ich kann jetzt wieder hier draufklicken oder ich drücke auf enter und urlaub öffnen und schließen dass sonntag sind da also wenn ich gleich den namen des tags hinschreiben ohne kleiner zeichen dann checke der kohle dieter das und sobald ich dann auf enter gedrückt habe fügt da die kleiner und größe zeichens wie öffnenden und schließenden zweck ein das spart zeit und das ist geil ich bin jetzt hier auch schon in der mitte zwischen den zwei frontex und hier kann ich auch gleich los werden beschreibt mahnschreiben es trinkt der mensch es läuft das pferd in bayern ist das umgekehrt wunderbar was wir jetzt aber noch nicht gefällt ist dass hier das fenster zu klein wird für den ganzen satz natürlich könnte ich jetzt ein kredit einfach vergrößern aber vielleicht will ich den so klein beibehalten und ich will trotzdem dass wir hier alles angezeigt wird also am besten wäre es wenn wir jetzt hier nach links gehen am besten wäre es wenn der satz hier irgendwo in die nächste zeile hüpfen würde wenn ich hier keinen platz mehr hat und genau das werden wir jetzt gemeinsam einstellen wir klicken hier unten auf das zahnrad dann hier auf settings und dann hier hier oben in der suche da geben wir wird ein sowie rd da kommt jetzt auch schon word rap aber das ist das falsche dann da steht daneben die fitter und das ist nicht das was wir suchen das scrollen weiter runter hier wo neben dem word web editor steht das ist das was wir suchen und da klicken jetzt darauf und wählen aus wir brauchen jetzt nicht speichern die änderungen in den einstellungen werden automatisch gespeichert deshalb schließen wir es gleich die settings wieder und bern hier haben wir wieder die beispiel drei datei und wir sehen der text hüpft in die nächste zeile wenn er keinen platz mehr hat ich kann denn hier auch ein bisschen größer machen oder kleiner ihr seht der text passt sich jetzt immer an dem kohle die da perfekt wie geht's weiter ich würde sagen wir speichern mal diese beispiel drei da das machen wir indem wir hier feiern gehen und dann hier auf save und achtung shots da steht wieder steuerung es also beziehungsweise steht dr das ist englisch für für uns im deutschen für steuerung und daneben dass es das heißt dass ich für die tastenkombination wenn ihr eine make up steht hier eine andere tastenkombination mit der tastenkombination die hier steht könnte eben die datei hier in visual studio code speichern das heißt in zukunft werde ich wie auch beim texte die dort erwarb steuerung ist in zukunft werde ich die dateien wieder mit steuerung es speichern ich klicke jetzt hier drauf weil ich schon hier bin dieser sei es also jetzt gespeichert und jetzt öffnen wir unsere beispiel drei datei mit dem browser also ich meine mir hier kurz und dann geht hier in dem projekt ordner und da sehen wir schon die gerade erstellte und gespeicherte beispiel 300 wir machen jetzt ein doppelklick und dürfen sich die datei schon im browser wir sehen es funktioniert also wie vorher mit der beispiel eins unter beispiel zwei datei die wir mit dem einfachen texteditor gemacht haben hier oben wird es wieder der speicherort angezeigt und hier der text den wir geschrieben haben schon fett markiert durch diesen text als nächstes passen wir jetzt den preis und den code editor wieder so an das ineinander sind macht denn hier ein bisschen kleiner das passiert bei mir schon das damen- und minimieren und den edita mache ich nur auf den chips hier bisher nach links und mache ich hier ein bisschen kleiner so dass es schön hintereinander ist dass man gut arbeiten können der neue code editor funktioniert also genau gleich wie der text editor nur dass es eben etwas schön angezeigt wird hier und der code editor mir sachen selbst vervollständigen kann so macht das ganze gleich noch viel mehr spaß und zwei wichtige infos noch mit steuerung - kann ich im editor herauszoomen und mit steuerung muss ihn ein zungen also wenn ich jetzt sterbe - drücke dann wird das kleiner nochmal steuerung - und wenn ich jetzt steuerung plus drücke da hinein hier steuerung plus steuerung plus steuern + steuere - steuern plus steuern - - ich glaube ihr versteht wie das funktioniert ich drücke jetzt nochmal steuern + damit es auch ein bisschen größer wird perfekt auch gut zu wissen ist dass ich diese leiste hier mit den dateien ausblenden kann wenn ich will also ich kann hier auf view gehen dann auf perenz und dann klicke ich hier auf show seit back jetzt ist die leiste weg wenn ich sie wieder anzeigen wirklich wieder auf die videoweb ihren und wieder auf schuss und sie ist wieder da und natürlich gibt es auch für dieses für diesen befehl eine tastenkombination und zwar die kann ich mir jetzt noch mal anschauen was steht hier ich gehe wieder auf das scheinbar hier steht ctrl das steht ja für steuerung und hier das b das heißt für die steuerung b drücke dann muss das auch gehen und wenn ihr auf dem mac wieder unterwegs seid steht hier eben eine andere tastenkombination diese werde dann aus wenn die auf einem mac seit ich bin ja auf einem windows also eben steht hier steuerung b das heißt wenn ich jetzt störung wie drücker ist die erste weg wenn ich nie der steuerung b druck ist sie wieder hier stehen bcs weg wieder steuerung wie sie ist wieder da das ist auch ganz praktisch zu wissen denn wenn ich mehr platz haben will steuerung b jetzt habe ich hier mehr platz und sobald ich dann eine der verbraucher drückte störung b und kann hier die datei wieder auswählen wer was chris wir haben unseren freshen kohle dieter und wir haben schon die ersten basic sind html gelehrt und jetzt lernen wir dass html grundgerüst kennen denn auf einer echten website wird das ganze noch etwas strukturierter gemacht was ist das html grundgerüst das html grundgerüst ist quasi das standard an html tags das so gut wie jede website hat wie sieht dieses grundgerüst aus also als erstes lösche ich mal hier den satz daraus weil dann brauchen wir jetzt nicht mehr und jetzt speicher mal kurz und aktuelle firma damit der browser auch lea ist wunderbar ja das hatte mir grundgerüst grundsätzlich haben wir einen head und einen bodycheck schreibe dir einfach mal hin also center und dann in die nächste zeile macht man auch den body attack also body enter gut jetzt haben wir halt und politik in den politik da kommt alles alles was man hier auf der website sehen kann dieser bereich das was hier steht kommt alles in dem politik zum beispiel wenn ich jetzt hier den strandtag mache und dann schreibe ich dazwischen hinein halli hallo auch ne website rufzeichen wenn ich das jetzt speicher und aktualisiert dann steht das hier gut aber was kommt dann in den hattrick hinein ich bin froh dass sie fragt in den haag kommen unter anderem wichtige zusatzinformationen für den browser was könnten solche wichtigen zusatzinformationen seien nun zum beispiel der titel der website da gibt es nämlich einen eigenen tag und der nennt sich ganz passend titel schreiben wir hier zwischen den hashtags also ich mach ja eine neue zeilen ist es übersichtlicher und ich schreibe jetzt titel und jetzt drücke ich wieder auf enter und dann haben wir schon schließen und öffnen oder heute öffneten und schließen hier schreibt jetzt einfach hinein unsere erste website rufzeichen wenn ich dich als speicher und aktualisiert das ziehen wir dann hier hier oben shots behoben da haben wir jetzt den titel unserer website stehen fabelhaft was kommt jetzt in den hattrick noch hinein zb das favicon was ist das fazit das war wie con ist das was da oben angezeigt wird hier das icon hier also das ist jetzt gerade noch so eine weltkugel weil das das standard iconist aber ich kann das natürlich auch ändern und zwar ein hattrick denn das favicon wird auch im heck festgelegt die machen wir das als erstes braucht man mal ein bild machen wir mal einen neuen tab auf gehen wir auf google und geben ein kicker der kokosnuss iwc schon vorgeschlagen weil ich es machen natürlich schon gesucht habe und jetzt kriegt man hier auf bilder dann wählen wir hier das logo hier aus gehen wir bis nach rechtsklick ich drauf mit der rechten maustaste und gehe auf bild speichern unter jetzt suchen wir uns nach unserem projektpartner ich habe ihn ja auf den desktop hier hier gehe ich rein und hier spreche ich das dann jetzt schreibe ich noch ein dateinamen der es komplett egal den können wir wieder aussuchen wurscht wie ich das nenne ich nenne es kicker der kokosnuss bindestrich logo das speichern wir nun machen und den papier wieder zu und jetzt wird kurz etwas kompliziert aber das ist egal wir müssen das erst noch nicht verstehen macht es mir einfach nach wir gehen jetzt hier in den head tag hinein es ist jetzt egal ob ich hier unter dem tattag bin oder ob ich darüber bin hauptsache ich bin zwischen den takes hier und ja hier schreibe ich jetzt link doppelpunkt und dann werden wir schon ein paar sachen vorgeschlagen wir werden das jetzt aus wo hier link doppelpunkt zwar die kann steht hier klicke ich drauf bauen da steht jetzt irgendwas kompliziertes aber wie gesagt das müssen wir jetzt noch nicht verstehen wir klicken da jetzt einfach hier hinein wo das favicon stetig markieren wir das kurz und das lösche ich jetzt raus denn da müssen wir jetzt nämlich in der tat angeben wo unser bild ist diesmal als freak on haben wollen das bild was man haben wollen haben wir in unserem projekt ordner gespeichert da links da wird uns angezeigt hier sehen wir die dateien die im projekt ordner drinnen sieht wir schreiben jetzt hier schreiben hier hinein einen punkt und dann einen schrägstrich und dann werden uns die dort ein hier vorgeschlagen keine angst ich erkläre euch schon noch warum man da punkt schrägstrich schreibt aber erst später wir wählen jetzt jedenfalls kicker der kokosnuss minute strich logos da krieg ich drauf jetzt wird das hier hinein geschrieben ich speicher wieder und aktualisiert und jetzt haben wir hier das favicon also unser logo solche sachen kommen also in den herbst hinein es kommen noch viele weitere sachen hätte hinein zb wichtige informationen für suchmaschinen und so weiter aber das würde hier den rahmen sprengen das müsste ja noch nicht genau verstehen am anfang und deshalb lassen wir das jetzt das erste mal wir machen jetzt auch weiter mit dem grundgerüst das ist nämlich noch nicht fertig denn der head und der politik werden nämlich normalerweise noch von einem html tag umschlossen also ich gehe jetzt hier über den hashtag und jetzt schreibe ich mal html tritt wieder die enter taste und jetzt habe ich den öffnenden und schließenden html tag ich mag ihre mir jetzt den schließenden html tag schneide ihn mit streiks aus und fügen hier unten nachdem schließenden politik mit steuerungs v wieder ein und nur zur erinnerung man könnte diese tags hier auch alle in einer wurst also das würde genauso funktioniert aber das sieht hat dann fakten unübersichtlich aus und deshalb schreiben wir die tags wieder untereinander so wie ich gerade schon hatte nämlich so schaut einfach besser aus und wenn ein tag in einem anderen tag drinnen ist oder wenn mehrere tags in einem anderen tag drinnen sind sowie zur apple body & hedges tag die sind ja im html tech drinnen dann werden dieser text die da drinnen sind normal etwas nach rechts gerückt um es übersichtlicher zu machen jetzt habe ich das hier ja schon markiert und wenn ich jetzt sind tabulator drücken dann wird das etwas eingerückt nach rechts wenn ich shift und tabulator drücker chuck dann rücke ich es wieder nach links aber ich will es ja eh nach rechts ein rücken damit ist übersichtlicher wird also drücke ich nur auf den tabulator der sonntag hier da ist sie 1 politik und da ist eben hier noch etwas weiter nach rechts eingerückt genauso wie hier oben einfach damit das übersichtlich ist es würde auch funktionieren wenn ich den soundtrack hier ganz links habe das ist wurst für die funktion aber es schaut wieder fucking unhandlich aus deshalb gehen wir mit den tabulator zweimal nach rechts damit dass hier schön eingerückt ist und erinnert sich noch an unsere regeln vor wenn ich mehrere tags ineinander habe dann müssen ja die schließenden text immer in umgekehrter reihenfolge zu den öffneten sex sein das haben wir hier ja immer brav gemacht denn zuerst wird hier der html tag geöffnet dann der hashtag dann kommt hier der link tag der hat keinen schließenden tag somit ist es egal dann kommt der titel tag hier werde geöffnet hier wird der titel tag geschlossen dann wird der hattrick geschlossen dann wird der polytec geöffnet und im politik wird dann der sonntag geöffnet und dann wird eben in umgekehrter reihenfolge zuerst das traumtag geschlossen und dann erst der politik und erst ganz am schluss wird der html tag geschlossen und jetzt zeige ich euch noch etwas in den öffneten html tag hier oben haben wir nämlich die möglichkeit dass ich die sprache der website einstelle und zwar klicke hier direkt in den öffneten tag hier nachher einen lehr schritt und schreibe lang dies gleich anführungszeichen de das lang steht für language und de für deutsch somit weiß der browser das dieser seite führt deutschsprachiges publikum gemacht ist jetzt schreiben wir hier in die songtexte im halli hallo text schreiben wir ein love you i love you wir speichern wir aktualisieren und jetzt wird der text angezeigt sonst passiert noch nicht denn ich habe in meinem browser deutsch als standardsprache eingestellt und auf dieser website sage ich den browser dass dieser website wird deutschsprachiges publikum gemacht ist das mache ich durch das lang ist gleich de somit denkt sich der browser alles klar da muss ich jetzt nichts übersetzen da schaut der bronx auch gar nicht wert ist übersetzen könnte der eigentliche content der seite ist im browser scheißegal also das hier ist zwar auf englisch ein ohr für aber darauf schaut der bronze gar nicht er schaut nur auf das lang ist gleich de und dann denkt er sich super meine standardsprache wie es auf deutsch eingestellt die website ist auch auf deutsch da muss ich also nichts tun aber wenn ich jetzt zum beispiel hier statt dem de bienne schreibe gm steht natürlich für englisch wenn ich das jetzt hier hinein schreibe jetzt sprecher und dann aktualisiert da werde ich jetzt auf einmal gefragt vom browser oder den inhalt der website übersetzen soll denn da denkt sich der browser halt diese website ist anscheinend für englischsprachiges publikum gemacht aber ich bin ein browser der auf deutsch benutzt wird ich frage den benutzer besser mal ob ich die seite übersetzen soll und wenn ich jetzt auf deutsch clique dann über sagte mir dass ein love you ich liebe dich und dies eben nur wegen dem lang ist gleich en ok weiter geht es auch mit der grundstruktur denn eine wichtige sache viel noch schreiben wir hier ganz oben über dem html tag schreiben wir den doc taking ich mache ein kleiner zeichen ein rufzeichen dann schreibe ich dr und dann schreibe ich noch html und ein großer zeichen scheiße kompliziert aus wir müssen aber nicht mehr wissen was der macht der ist komplett egal dieser tag steht normal immer ganz am anfang von jedem html dokument und das muss uns erstmal reichen das erklärung er hat keinen schließen tag und uns ist wirklich egal warum dieser tag hier steht wir merken uns einfach nur der steht am anfang von jedem html dokument gut und das ist jetzt quasi die grundstruktur von einer html-seite zuerst ihm dieser komische cocktail party dann der html tag und zwischen öffnenden und schließenden html tag befinden sich dann eben der head und der politik in den hätte kommen zusatzinformationen für suchmaschinen für den browser und so weiter und in der politik kommt der eigentliche inhalt der website ich lerne jetzt schnell den inhalt aus dem body attack und auch den inhalt aus dem hashtag also hier dann noch der inhalt aus dem heck denn danach aus dass le schmerz auch noch kurz so dies ist jetzt nämlich das nackte html grundgerüst was ich dann hier zwischen die hörtech schreibe oder hier zwischen dem body text das kann von seite zu seite ein bisschen variieren aber ich habe bei jeder seite den komischen doktor html tag hier dann den html zwischen den html tag habe ich dann den head und der politik wir haben soeben das html grundgerüst kennengelernt und das gute ist dass wir uns dieses grundgerüst nicht einmal auswendig merken müssen denn es gibt in visual studio code als in unserem chor editor hier natürlich einen shortcut mit dem wir dieses grundgerüst ganz schnell erstellen können ich habe hier alles ausgelöscht und jetzt schreibe ich hier einfach nur ein rufzeichen und drücke auf die enter taste kabul jetzt steht das gesamte hatte begrüßt da hier um wieder der komische drk-team alltag dann der harte alltag und im html tag befinden sich eben wieder der held und der body attack soweit also nichts neues allerdings stehen hier jetzt drei sachen die wir noch nicht kennen und zwar ihm diese drei meta tags hier ich komme gleich darauf zu sprechen was diese drei meta-tags machen schauen wir hier aber zuerst noch weiter hier steht ja wieder der tag da steht jetzt als standard textdokument drinnen das kann ich natürlich ganz schnell ändern ich möchte das hier aus und schreibt jetzt irgendeinen titel hin zum beispiel nenne mass test website komplett egal und was wir jetzt noch nicht 10 ist hier der fahrweg von links warum sehen wir hier keinen konflikt nun ganz einfach die hersteller von diesem code editor hier also von visual studio code die haben sich gedacht dass der fahrweg von link nicht wichtig genug ist um ihn in das standard gerüst hier zu packen wenn wir wollen können wir natürlich den farbig und link hier in den hattrick irgendwohin zu fühlen ganz egal wo hauptsache er steht zwischen öffnenden und schließenden hattrick ich schreibe jetzt wieder über den titel text gefühlt ja eine leerzeile ein und dann scheide ich jetzt wieder link doppelpunkt und velemir hier wieder das farbig on dienstag und jetzt löschen mal hier wieder dass fabi konnte hier raus und geben da wieder den punkt schrägstrich ein und dann können wir hier wieder unsere datei auswählen keine angst ich habe ich gesagt ich erkläre ich das mit dem punkt recht schon noch das mache ich noch aber erst später jetzt wenn wir hier ebenfalls das logo aus und da wir jetzt hier schon wieder hier hineingeschrieben perfekt ich spreche jetzt mal und dann aktualisiere ich hier jetzt werde ich wieder gefragt ob die seite übersetzt werden soll warum werde ich das gefragt weil hier ja noch entsteht das ist standardmäßig so wenn ich das hier von visual studio gruppen ausgeben lassen dass ich es auf englisch eingestellt ich ende das jetzt einfach auf die eu für deutsch speicher wieder und aktualisiert jetzt werde ich nicht mehr gefragt ob die seite übersetzt werden soll weil jetzt die sprache passt mit dem de weil er mein boss auf deutschland gestellt ist und servicon logo sowie titel der website werden hier korrekt angezeigt so wie es sein soll na wunderbar aber was machen jetzt diese drei meta tags hier ich zeige es euch ihr braucht jetzt nicht mitmachen nur mit schauen es reicht vollkommen aus wenn ihr mir jetzt einfach nur zusehen ich möchte jetzt hier den ersten meter tag mal raus schwuppdiwupps weg gesagt so und jetzt schreibe ich in den body attack was hinein zb schreibe ich das ist ein test hier ist ein und hier ein und hier sind ein paar chinesische schriftzeichen doppelpunkt so wo kriege ich es chinesische schriftzeichen her fragt ihr euch naja ich habe mir hier am browser kurz eine datei vorbereitet wo ein pasok chinesische schriftzeichen trainiert sind keine ahnung was das bedeutet ist mir auch egal es geht ums vorzeigen dann braucht ihr hier jetzt auch nicht mitmachen so ich habe mir jetzt kopiert und fügt sich hier ein und jetzt spreche ich mal und aktualisieren die seite okay der browser tag mir alles korrekt an sowohl den normalen text hier als auch die umlaute also das und das und auch die chinesischen schriftzeichen das zeigt er mir alles korrekt an denn google chrome ist ein sehr moderner guter webbrowser der gewisse sachen schon automatisch check aber jetzt öffne ich die datei mal mit einem wahrhaftigen scheiß browser nämlich mit dem internet explorer wollen wir den internet explorer hat den öffentlich mal und jetzt kopiere ich mir den datev hat hier der hier in google chrome ist jetzt mit google chrome damit mir das da besser sind im internet explorer hier füge ich jetzt in der tat ein und lade die datei mal jetzt zu so gesehen also durch dieses öffnen wir jetzt die datei im internet explorer und was sehen wir hier jetzt der internet explorer kann wieder die umlaute hier würde ja ein buch stehen und hier in er kann wieder die umlaute noch die chinesischen schriftzeichen korrekt anzeigen jetzt gehe ich hier wieder in unser bett drei datei und fügt den meta tag wenn ich hier vorher ausgelöscht wieder ein die speicher wieder und ich aktualisiere hier und ich sehe jetzt kann der internet explorer plötzlich die umlaute hier also dass ihm dass er wie auch die chinesischen schriftzeichen hier korrekt anzeigen das heißt dieser meta tag hier wo das ut f8 hier drin entsteht der sorgt dafür dass auch ältere browser sämtliche zeichen korrekt anzeigen können gut was macht dann dieser meta tag hier der hat auch etwas mit dem internet explorer zu tun das ist uns aber jetzt egal der steht einfach da er hat für uns keine relevanz und der meta tag noten der mit dem portier der spielt eine wichtige rolle wenn es darum geht die website auch auf dem handy korrekt anzuzeigen mehr müssen wir hierzu aber noch nicht wissen das reicht uns einmal für dieses video in hd mail gibt es spezielle text überschrieben fangen wir mal an mit der haupt überschrift diese wird immerhin 1 h 1 tag geschrieben ich mach mal hier einst also h1 drücke enter taste und jetzt haben wir schon öffnenden und schließenden h1 tag da steht natürlich für henning ist englisch und 17 für die nummer eins das ist die wichtigste überschrift jetzt wirklich noch kurz steuerung wie damit wir hier der platz haben wunderbar und jetzt schreiben wir hier hinein ich bin überschrift 1 wenn wir das jetzt speichern und aktualisieren das ist also die standardformulierung für die überschrift 1 in html dh die hat eine bestimmte größe und sie jedoch gleich fett geschrieben natürlich gibt es möglichkeiten diese formatierungen dann zu ändern aber wie wir das machen können das lernen wie erst später das ist jetzt halt mal die standard formatierung für h1 überschriften und jetzt zeige ich euch noch etwas interessantes schreiben wir hier schreiben apfel und nachdem schließenden tag banane also einfach nur irgendein text ja ist egal was man dort schreiben nur zum beispiel wenn ich das jetzt speicher und aktualisiert hier sehen wir im editor wird es in einer zeile angezeigt und hier aber untereinander obwohl wir hier im editor ja gar kein br tag gemacht haben und hier haben ja auch kein fertig warum wird das dann untereinander angezeigt das ist so weil der browser bei dem h1 tag automatisch eine neue zeile beginnt und den content der danach kommt auch automatisch in eine neue zeile packt also das funktioniert so der browser sieht hier den text in dem fall apfel unterschreibt er hier auch gleich apfel und dann sieht er den öffneten h1 tag und weiß okay jetzt muss ich eine neue zeile beginnen also beginnt eine neue zeile ist hier runter dann weiß er muss den text mit der h1 formatierung ausgeben der hier dazwischen steht das heißt ich bin überschrift 1 dem muss jetzt mit dieser größe und dieser schrift fette hin schreiben und erst dann wenn dann der schließende heinz zak kommt dann weiß okay jetzt muss ich wieder eine neue zeile machen und dann kommt der content der nach dem schließenden heinz kommt in dem fall jetzt banane das heißt egal was vor und nach einem h1 tag kommt ein paar 1 tag sagt immer dafür dass der text der im h1 der grünen ist in einer eigenen zelle steht das macht ja auch sinn denn eine überschrift sollte ja immer in einer eigenen seite stehen so und genau so wie es jetzt einen h1 tag gibt gibt es auch ein harter tag einen h3 tag einen h4 tag einen 50 und einen hat sechs tage lassen wir jetzt den text hier wieder raus und hier auch wir wissen jetzt wie das funktioniert und dann gehen wir in die nächste zeit wahrscheinlich erst h2 und drücke wieder die enter taste und wieder habe ich den öffneten hat zwei tech und den schließen h2 tag ich gehe noch mal in die nächste zeile mache dasselbe mit a3 drücke die hinter taste nächste zeile dasselbe a4 nächste zeile 5 und nochmal in die nächste zeile sechs wunderbar jetzt kopiere ich mir den text von der h1 hier mit steuerung zu fügen mit strg v hier ein ändert den einzel jetzt noch zum 2 dann gehe ich hier in die h3 fügt den text nochmal ein änderten einsetzung drei um dann gehe ich in die k 44 echten einsatz zu viel rum dann gehe ich in die 54 werde ich ihn zum 5 nennen genau und in der a6 was mache ich hier hier endlich den einsatz um sex und wunderbar so jetzt sprechen wir das ganze entsprechen wir den spaß warum hier sehen wir die sechs überschriften typen alle in einer eigenen zeile denn die h1 funktionierte gesagt gleich wieder 2 wie die hna 3a a4 a5 und a6 die funktionieren alle gleich das einzige was sich ändert ist die schriftgröße also ein h2 tag hat natürlich eine kleinere schrift größer als 1 h 1 1 hat drei tag hat eine kleinere schrift größer als ein hartz weiter und so weiter aber ansonsten funktioniert dieser text genau gleich einen harten tag gibt es nicht also einen halben tag dann gibt es nicht es gibt nur eins bis sechs die müssen aber auch reichen wie wir diese am besten verwenden schauen wir uns in den nächsten videos genauer hey hey überschriften hat ja gerade kennengelernt jetzt geht zum normalen text machen wir hier mal einen neuen tatort und dann suchen wir versuchen wir letztens gekauft wikipedia also wikipedia und nick gekauft natürlich aber schottisches hochlandrind schottisches hochlandrind gar der suche und setzt man klickt man auf das erste ergebnis jetzt mache ich den browser große etwas besser sehen wunderbar soll das also dass hier schottisches hochlandrind das ist in einem h1 trennen das kann man jetzt hier nicht gesehen aber vertraut mir das ist in einem h 16 ja ich weiß hier links daneben ist noch was das heißt obwohl das hier in einem heinz thek drinnen ist das ist ja nicht in einer eigenen zeile wie funktioniert das bleibt ja das ist für fortgeschrittene das müssen wir jetzt auch nicht wissen das ist jetzt egal das ist für uns irrelevant das hier ist jedenfalls in einem a1 tech trainer wenn wir jetzt noch weiter nach unten scrollen hier literatur das ist in einem h2 tag in web links ist auch in einem hat zweite können einzelnachweise ist auch in einem harten aber wie das mit den überschriften funktioniert das schauen wir uns erst später noch besser jetzt geht ja auch nicht um die überschriften sondern um normalen text also um sowas hier wie machen wir so einen text mit so einzelnen abständen dazwischen also wie machen wir so text absätze naja ganz einfach ich kopiere mir das mal mit rechte maustaste kopieren und jetzt zeige ich euch zuerst die schlechte variante dass wir fügen das einfach hier ein mit steuerung ford im code editor ich rücke das jetzt noch ein bisschen nach recht sein best short das war der falsche so nochmal markieren tabulator wird trotzdem übersichtlich aus jetzt machen wir den browser etwas kleiner gehen wieder in unsere website hinein denn dieter spethmann auch das aktuelle firma sprung steht jetzt alles in einer wurscht weil wir haben ja nirgends einen br tag eingefügt das können wir aber natürlich machen wir fügen jetzt den vertrag ein grund dort fühlt man nochmal ein damit mir zwei werte examen ist mehr abstand hier schreiben auch noch ein bärtchen und hier noch mal so wenn ich das jetzt speicher und hier aktuell ist hier ja dann haben wir hier einen text dann den absatz noch ein text dann der absatz und wider der text so könnten wir das machen und wenn ich jetzt übrigens im browser kleiner oder größer mache dann passt sich der text automatisch an die branche größe an das hat nichts mit dem br tags hier zu tun oder mit sonst irgendwas das macht der browser ganz automatisch bei jedem text nur damit ihr das ist so und jetzt machen wir hier aber noch weiter denn das hier ist noch keine ideale lösung um so einen text mit so abständen jeder zwischenahn zurzeit ja es funktioniert zwar aber es gibt wesentlich bessere variante und das zeige ich euch erzählen denn für so einen normalen text nimmt man normalerweise den peter krettek ich schreibe hier mal ein p und jetzt wirklich auf enter und jetzt fügt mir visual studio code schon den öffnenden und schließenden ptp steht für paragraf so englisch natürlich und ja der ist dazu gedacht dass man dazwischen text rein schreibt und ich zeige euch jetzt eben kurz was dieser tag macht wir schreiben jetzt einen satz in hainstadt mal auch im osten westen wunderbar dass sprecher mal kurz und aktualisieren und wir sehen hier steht der satz der mp tec drinnen ist optisch sieht er ja genau gleich aus wie dieser text hier der nicht in einem pack können steht aber der pattex sorgt dafür dass hier davor und danach eine leerzeile eingefügt wird ich zeige euch das noch schaut mal hier vorher was die dup die oder irgend sowas wie zum beispiel sex und da schreibt man glaubt club danach wenn wir das jetzt speichern und aktualisieren das ducati steht jetzt hier noch hinten dran natürlich weil das ist ja den browser egal ob wir eine leerzeile ist oder nicht dann kommt der tag da weiß der browser jetzt muss eine neue leerzeile machen dann kommt der text den tag auch im osten und westen dann kommt der schließen der peter weiss der browser geht okay er muss wieder eine leerzeile machen und dann kommt noch das blues dh der politik funktioniert genau gleich wie die überschriften als er macht jetzt den text nicht fett und auch nicht irgendwie größer aber er sorgt dafür dass davor und danach eine leerzeile eingefügt wird so und jetzt lüftet er ist wieder back weckt damit die b r tec station auch wieder raus den / mediatex auch aus wir speichern kurz und aktualisieren wieder so zu schaut jetzt wieder ohne die br texas und jetzt zeige ich euch wie man diesen text wie man die drei absätze hier mit dem pacs macht das ist ganz einfach ich gehe dahin scheibe wieder dass paypal geentert an beste browser dann weiß der kunde die da dass wir hier öffnenden und schließenden petek einfügen soll das schneide ich mir ist raus dann gehe ich daher fügte anschließenden peter klein dann rückt man noch einen damit besser ausschaut dann brauchen wir hier wieder ein tag den damen die nächste zeile genau fühlten wir uns hier ein hier damit die leerzeile auch wieder weg damit sie besser ausschaut wie gesagt die leerzeilen sind dann brauchst du egal wir könnten auch lassen aber ich schätze jetzt machen wir hier noch den pc und den schreib uns wieder aus und fügen ihn hier und da noch ein das rückt mal wieder ein damit besser ausschaut die leerzeilen damals wunderbar und resource den textdruck jetzt eben auch noch um 1 1 immer genau so wie hier und wie hier dann schaut es einfach besser wunderbar wenn man jetzt speichern und aktualisieren dann habe hier wo die drei absätze jeweils mit abstand dazwischen das macht der tag dh wenn ich einen einzelnen absatz habe der kann aus einem satz bestehende kann aus einem wort bestehen der kann aus mehreren wörtern aus mehreren sätzen bestehen dann schreibe ich die alle in einem pc und wenn man das jetzt hier auf dieser seite anschauen das heißt heute das erzeuge top drauf geklickt sorgt das heißt das hier ist in einem eigenen peter und ich weiß hier links und rechts steht wieder was und anscheinend apatech da macht er immer eine neue zeile warum steht wissen ja dass es für fortgeschrittene das brauchen wir auch nicht wissen ist uns jetzt egal ja das heißt das ist in einem pack hier drinnen das ist in einem pack drinnen und dass es auch in einem eigenen peter erinnern dass es in einem eigenen peter können das ist in einem eigenen pc können das ist in einem eigenen brunnen und das ist in einem eigenen tab drinnen und so geht das immer weiter das heißt so einzelne text absätze da nehme ich für jeden einzelnen absatz einen eigenen weg ja so funktioniert dass wir sie erst einmal das reicht uns jetzt und wir sehen uns im nächsten video servus leute in diesem video lernen wie eine äußerst praktische funktion von visual studio kennen und zwar geht es um beispiel text ein beispiel texte kann sehr hilfreich sein wenn man eine website baut und noch keine fertigen texte hat denn oft ist es so dass man das design vorliegen hat mit den bildern und das layout und alles aber die texte da weiß der kunde noch nicht was gespart dann wirklich hin geschrieben wird aber man weiß ungefähr wie lange ein text an einer bestimmten stelle sein soll und deshalb fügt man dann am anfang auch zu einem platzhalter text ein die haben gezeigt wie die seite dann mit dem text ungefähr aussehen wird wenn sie fertig ist und wenn ich jetzt so ein beispiel text haben will dann kann ich hier auf google gehen also macht man nur end up und dann sucht man mal nach lorem ipsum und wenn ich jetzt etwas zu drücken dann klicke hier auf der suchergebnis hier und da bin ich schon auf der richtigen seite ich kann jetzt hier in das kästchen kann ich zum beispiel eines also irgendeine zahl angeben zb die zahl 5 und wenn ich jetzt hier auf anpassen drücke dann habe ich jetzt fünf beispiel wörter wenn ich jetzt zum beispiel 100 1 gb und hierauf passend geben habe ich 100 die wörter das kann ich mir jetzt kopieren entweder indem ich hier auf dicke oder rechte maustaste kopieren dann kann ich in den editor gehen und das hier einfügen jetzt machen aber davor noch welchem tag wir haben jetzt machen überlegt kurz richtig wir machen den tag denn der tag ist zur normalen text gedacht und wir möchten jetzt einen normalen text machen keine überschrift also nehmen wir den tag ich drücke die enter-taste jetzt haben wir schon den tag hier stehen und hier kann ich jetzt dazwischen einfach mit strg v den text einfügen wunderbar wenn ich das jetzt speicher und hier aktualisiert dann steht das hier cool aber wenn ich das jetzt jedes mal wenn ich ein beispiel text haben will wenn ich da als jedes mal auf dieser seite hier gehen muss hier eine zahl angeben muss und wir das kopieren muss und hier einfügen muss dann ist das ein bisschen mühsam und da gibt es natürlich eine bessere variante denn wie schule studiert hat hier eine ganz nette funktion und die es in diesem video geht also los mal dies mal raus und dann können wir jetzt einfach schreiben loren und dann einfach eine zahl zum beispiel 20 und wenn ich jetzt die enter taste drücke bush dann haben wir hier wie durch zauberei 20 beispiel wörter von visual studio code editor ausgespuckt bekommen und das kann ich das gar nicht variieren ich kann jetzt natürlich auch eine andere zahl schreiben löschmeister wieder raus und schreibe mir jetzt lore weiß nicht 6 jetzt wenn ich die enter taste drücken um dann haben wir sechs beispiel wenn ich jetzt zum beispiel sage loren 1039 und jetzt die enter taste drücke was jetzt passieren naja dann haben wir 1039 beispiel wörter und wenn ich das jetzt wieder speicher und aktualisieren dann habe ich hier jetzt 1039 wird auf dieser web seite stehen wunderbar so kann ich mir schnell ein beispiel text editor stellen und das ist oft sehr hilfreich hey jetzt geht es darum wie wir die einzelnen überschriften in html verwenden also wie wir die h1 h2 hat drei vier fünf und sechs richtig einsetzen ihr müsst jetzt hier nicht mitmachen sondern nur mit schauen hier mit mir auf meinem bildschirm hier ja ich befinde mich hier auf einer website wo man sich testberichte und empfehlungen für hühnerställe durchlesen kann ihr werdet euch jetzt vielleicht fragen hey kevin warum sollte ich einen hühnerstall kaufen ich habe ja schon ein aber das macht nichts es geht jetzt nicht darum dass wir tatsächlich noch eine weitere hühnerstall kaufen wollen sondern es geht darum jetzt zu verstehen wie man die hna tags also die überschriften text richtig einsetzt ja gut dann starb mann los würde ich sagen und zwar das hier das ist ja eins überschrift denn das ist offensichtlich die haupt überschrift für diese seite hier deswegen ist dass die heinz über schickt wunderbar wenn wir jetzt weiter nach unten scrollen das hier das ist in einem tag drinnen das ist auch in einem eigenen peter können das ist in einem eigenen pc können das hier das ist jetzt eine art zwei überschrift ja das ist eine die erste unter überschrift hier quasi in der ordnung er hat unter der haupt überschrift und das ist jetzt eben die überschrift das ist was anderes keine p tags das macht man anders das zeige ich euch dann eben den nächsten videos dass hier was ist das für eine überschrift das ist auch eine h2 überschrift wie diese hier denn auch dieser überschrift ist quasi eine unterschrift und der überschrift von der von der ordnung her zur h1 überschrift hier ja dass die hand ist die haupt überschrift die h2 das sind dann so einzelne kapitel quasi das wichtig seien kürzer das ist so das erste kapitel das ist die h2 das ist das nächste kapitel dass es deshalb auch eine h2 überschrift das ist wieder mit was anderem aufzählungszeichen da kommt man auch dazu dass hier man sieht auch an der größe das ist wieder ein bisschen ein bisschen kleiner und das gehört jetzt thematisch zu dieser unter überschrift hier ja das heißt das ist schon eine unter einer überschrift von der haupt überschrift deswegen ist das in einem hat zwei täterinnen und das ist jetzt eine unter überschrift von dieser überschrift ja und deswegen ist das in einem h3 tag drinnen ja das ist quasi hier steht ja favoriten der redaktion der beste vielfältige hühnerstall das ist jetzt dieser hier kann man wahrscheinlich nur empfehlen und der gehört jetzt eben zu den favoriten der redaktion das ist also thematisch gehört dass hier dazu dass es eine herr trägt dann ist das immer eine harte so dass das ist wieder in einem pack drinnen hier das gehört auch noch hier dazu denn das ist auch ein favorit der redaktion offensichtlich das ist auch eine h3 überschrift so das ist wieder ein pack das ist also das ist in einem pack das toben ist wieder was anderes aber das ist in einer peta können das ist in einem peter können das ist wieder was anderes das hier das ist jetzt wieder so eine überschrift von der größe her kann man es auch gut sehen wie diese hier und wie diese hier ja und das ist eben dann auch eine h2 überschrift die leitet quasi das nächste kapitel ein ratgeber fragen mit denen blaue planen so sei das ist eine unterschriebene das ist eine und ja das ist eine unterschrift von dieser überschrift hier und das ist eben eine h3 dass ein herr 2 ist dann ist das eine a3 sowie die wieder ein tag ein tag und so weiter das ist ein bild da kommen auch noch dazu wieder ein tag das neue das ist alltag so das ist wieder eine hat drei überschrift denn das ist wie das hier auch eine unterschrift von dieser hier da haben wir wieder so oft heilungs zeichen wieder ein peter ich glaube dass mit dem pacs habt jetzt schon halbwegs draußen das ist auch eine art drei überschrift das ist eine h3 überschrift das ist eine hat drei überschrift und dass das ist wieder eine art zwei überschrift und hier drunter ist jetzt dass wieder eine h3 überschrift und angenommen hier wäre eine überschrift die noch etwas kleiner ist und thematisch eben sich dieser überschrift unterordnet ja quasi ein unterkapitel von dieser überschrift hier dann wäre das dann eine h4 überschrift weil das eine hat drei überschrift ist und dann wäre die nächste überschrift die sich dieser überschrift hier unterordnet eine h4 überschrift und wenn sich dann der h4 überschrift noch eine überschrift dauerten quasi ich hoffe wir kommen so ein bisschen mit jetzt dann ist diese nächste überschrift dann eine h5 überschrift und so weiter aber haben wir hier nicht dass das eine hat drei überschrift das dauert das da ist es nirgends eine überschrift das dauert nicht sich jetzt kein neues thema noch hier drunter und das ist schon wieder ein neues thema das von der wichtigkeit ja anscheinend genau wie ich gleich wichtig ist dass das heißt das hat auch dieselbe größe das hat sie sehr begrüßt wie das da oben dass es eine h3 überschrift dann ist auch das eine hat die überschrift so das ist wieder eine h2 überschrift hat drei überschrift und ich glaube ihr versteht langsam wie das funktioniert ist jetzt kein hexenwerk um ehrlich zu sein hier haben wir wieder eine h2 überschrift hat drei überschrift so ein video hier dann haben wir wieder eine h3 überschrift und so geht das weiter und ja die soll dann eben hier unten sind dass es das ist eben wieder eine art zwei überschrift das dann auch eine h3 überschrift brauche nun einen hahn brauchen keinen hang interessant hühner legen und natürlich auch erwähnt kein hand vorhanden lemmer und hier musst du darauf achten dass du profan 600 ufer der havel oder erklärt haben vermittelt ordnung in der hühner der macht lassen und es verändert sagt na ja alles klar also ich glaub ihr versteht es mittlerweile wie das mit den überschriften funktioniert ja und so war für das video merken wir uns einfach eine eins überschrift ist immer die haupt überschrift hat zwei überschriften sind dann zb die einzelnen kapitel beziehungsweise die bereiche der seite ja hat drei überschriften sind dann die unter überschriften für die hat zwei überschriften das heißt das wären so unterkapitel für die über kapitel sozusagen und half ihr überschriften werden dann die unter überschriften für h3 überschriften und so weiter und so fort willkommen im nächsten video wir schauen uns jetzt an wie man solche aufzeichnungs listen ihr macht natürlich gibt es dafür spezielle text in html und diese schauen wir uns jetzt an gehen wir hier in den editor hinein und da schreiben hier jetzt mal wie ul und da drücken wir die enter taste so jetzt spuckt mir visual studio code hier den öffnenden und schließenden ul tag aus wilstedt für an ordert liest was das bedeutet dass wir dann wirklich noch erfahren jetzt hoffe ich hier mal in die nächste zeile aus übersichtlichkeit gründen und schreibe 11 das steht für liszt ja also ich drücke der taste jetzt ist das dhl alltag das steht für liszt und hier kann ich jetzt was ihn entscheiden zum beispiel peter und wenn ich diese speicher und hier aktualisieren dann sehen wir den ausstellungs punkt und dann peter wunderbar jetzt kann ich hier noch mehr machen ich mache noch mal einen leipzig unterscheide ich jetzt in einem sushi und in die nächste zeile mache ich noch einen leitantrag hinein legolas so kann man das wieder speichern und aktualisieren so sieht es aus das ist eine anordnung ist was ist denn dann eine ordert ist ja da können wir hier hinein gehen und machen statt dem uno im offenen tür lich auch im schließenden url tag machen wir einen url tag anschließenden eltec daraus ja also sagen wir statt dem ul ein ul hier im eröffneten umschließen wenn wir das jetzt speichern und aktualisieren haha da sie ja die ausstellungs punkte wurden durch so nummerierte zahlen ersetzt das ist jetzt eine fordert ist ja eine sortierte liste so zu sagen wir können auch listen innerhalb von listen machen ich zeige euch schnell ich gehe jetzt hier da zum bieter vor den schließenden alltag hier hüpfen die nächste zeile und schreibe manuell und drückt die enter-taste also ich mache ein ul tag dann noch mal in die nächste zeile jetzt mache ich eine leiter und da schreibe ich hier und was hinein zum beispiel punkt mag banane das war nah nennen dann hüpfen die nächste zeile machen noch eine leiter und schreiben zum beispiel noch und spielt gerne fußball ja wenn man das jetzt schwächer mit störungen und dann hier aktualisieren dann sehen wir jetzt haben wir hier ist eine liste die hier und dann peter noch untergeordnet ist ja wir können auch eine ordert liest hier und dort das geht auch das zeige ich euch jetzt bei der susi hier wieder vor dem schließen sich in den nächsten zeilen einfach auf übersichtlichkeit kunden und schreibe ul drücke die enter-taste jetzt haben wir den ul tag hier nochmal in die nächste zeile jetzt mache ich wieder ein alltag dann schreibe ich wieder was hinein zb punkt mag traktoren und dann hab ich noch in die nächste zeile auch noch eine leiter und schreibt noch etwas hinein zum beispiel und ist gern kinder pinguin so dass später einmal wieder und aktualisieren jetzt haben wir hier eine ordert ist die dieser liste hier untergeordnet ist und ich kann auch bei der ordert liest hier also bei der übergeordneten fordert liest da kann ich auch eine ul ist wieder machen also an eine anordnung ist und das funktioniert immer noch genau gleich das ist komplett egal ich speichert wieder und aktualisieren jetzt sind halt die nummerierten aufstellungs punkte hier wieder durch so das war komisch jetzt sind die nummeriert also die zahlen wieder durch die punkte ersetzt ja genau das heißt so funktioniert ist und nur kurz zum verständnis ich kann das auch alles wieder in einer wurst schreiben also so so wird ihr das auch funktionieren wenn ich das jetzt speicher also ihr könnt ja nicht sehen wer nicht störung erst rückkehr zum beweis drücke ich jetzt mal hier drauf jetzt ist das gespeichert und hier aktualisiere ich das sind immer noch genau gleich aus weil für die funktion ist es ja wie gesagt kommt egal wie wir das hier hinein schreiben nur für uns ist es also ziemlich unleserlich hier im editor und deswegen schreiben wir das so hin ja denn das schaut viel besser aus und ist viel leserlicher ihr fragt euch jetzt vielleicht noch warum diese punkte hier rund und schwarz sind denn auf der hühner seite da sind sie ja eckig und grün ja wie macht man das das macht man mit css das zeige ich euch später noch für dieses video reicht das jetzt mal wir wissen nun wie man so aufzählungszeichen erstellt und das passt alles klar jetzt schauen wir uns mal an wie man externe links in html erstellt mit externen links meine ich links die auf eine andere seite weiterleiten schauen wir uns einfach an also ich bin hier zwischen den ball tags und wenn ich jetzt ein artikel und dann auf die enter taste drücke dann spuckt mehr visual studio code schon den etios also eh nur english attack super mit dem mache ich links und keine sorge er schaut komplizierter aus als es ist ich zeige euch einfach schnell wie er funktioniert sagen wir sagen wir ich will jetzt einen link haben zu der wikipedia seite vom schottischen hochlandrind da wo wir vorher waren dann mache ich hier nur ein tab aufgebot auf die wikipedia-seite hier wunderbar und jetzt kopiere ich mir hier oben diesen klingt diese url hier weil da will ich hin also ich gucke mir das und die flüge ich jetzt hier ein zwischen dem etf attribut das ist dass hier hier zwischen die anführungszeichen da drücke ich jetzt steuerung vor jetzt ist das hier zwischen den anführungszeichen drinnen und dann kann ich hier zwischen den takes weil hier das ist ja der öffnende attack das ist der schließen der etech und jeder zwischen kann ich ja was hinein schreiben ja und da schreibe ich jetzt zum beispiel wikipedia schottisches hochlandrind wenn ich das jetzt speicher dann gehe ich wieder auf unsere seite hier und aktuell ist hier mal dann sehen wir den text hier das heißt der text der hier zwischen öffnenden und schließenden ethik steht der wird auf der seite angezeigt das was hier drinnen steht wird nicht auf der seite angezeigt dass es dann einfach der link wo wir hin wollen und wie wir schon sehen dass hat eine deshalb so eine eigene formatierung also es hat seine eigene farbe es ist unterstrichen und so weiter und das ist eben die standardformulierung für links diese können wir natürlich auch ändern das lernen wir aber erst in späteren videos und wenn ich jetzt hier überfahren mit der maus dann sehen wir dass sich der mauszeiger sozusagen eine hand verändert das macht der browser automatisch wenn man einen ethikrat ganz automatisch ja und wenn ich hier draufklicken dann komme ich natürlich auf die seite vom schottischen hochlandrind und nur zum verständnis wenn wir das jetzt hier auslöschen zb und wenn ich jetzt speicher mit steuerung es und organisiert dann sehen wir gar nichts denn das was hier dazwischen drinnen steht das wird nicht ein es wird nur das angezeigt was hier dazwischen ist und hier kann ich hinein schreiben was ich will das muss mit dem link gar nichts zu tun haben ich ganz weit ausschreiben hat sein auto treffen schaden bist du falsch im plattenladen und wenn ich das wieder speicher und aktuell ist hier dann sehe ich jetzt den text hier der hat nichts zu tun mit dem link aber es ist auch egal für die für die funktion von dem link ist es scheißegal was ihr dazwischen drinnen steht ja wenn ich da als draufklicken schwupps bin ich wieder auf der seite vom schottischen hochlandrind ich kann sogar hier einen anderen linken ein schreiben dass wir auch egal für die funktion also ich kann zum beispiel schreiben http doppelpunkt die zwei striche www.youtube.com das speicher malst und dann aktualisiere hier so jetzt steht hier der link ja weil den haben wir jetzt hier hinein geschrieben was passiert jetzt wenn ich hier draufklicken probieren es aus ich komme natürlich auf die seite vom schottischen hochlandrind denn hier ist ja der linken hochlandrind hinterlegt das was hier drinnen steht ist scheißegal und wenn ich jetzt das hier wenn ich das jetzt aus schneider und dann hier einfügen und dann speicher jetzt muss ich hier wieder zurückgehen dazu mit sie schon aktualisiert da sehen wir jetzt endlich was passiert wenn ich jetzt hier draufklicken nichts denn jetzt ist image attribut kein link hinterlegt jetzt kann ich hier so oft draufklicken wie ich will nix passiert denn das was hier steht ist scheißegal wunderbar jetzt sind wir ja schon fast profis mit den externen links dann können wir das in den nächsten videos weiter verschärfen bis dann [Musik] wer was chris externe links kennen wir ja bereits also wir wissen wie man von unserer seite auf andere webseiten verlinkt aber was ist jetzt wenn ich nicht auf irgendeine url verlinkt möchte sondern auf eine andere hat im änderte auf meinem computer geht das überhaupt natürlich geht das und wie das geht das zeige ich euch jetzt als erstes brauchen wir eine zweite html datei auf die wir verlinken können also klicke hier mit der rechten maustaste dann auf ein juwel und jetzt müssen wir hier wieder einen dateinamen eingeben für unsere html-datei der dateiname ist wieder scheißegal da kann ich schreien schreiben was ich will ja und deshalb schreibe ich jetzt einfach brach katzav html das ist österreichisch und bedeutet soviel wie echt kätzchen 12 aber wie gesagt ist egal es ist ja nur zum vorzeigen ich drücke die enter taste und bin schon in unser ort katze stotterte hier oben da kann ich jetzt wechseln hier ist die beispiel drei datei hier unsere datei ja und auch hier links hier ist die beispiel trällerte und hier kann ich auf die ortschaft datei klicken so kann ich da im editor hin und her wechseln wunderbar was kommt als nächstes naja jetzt wollen wir wieder unser grundgerüst hier haben wir müssen uns das jetzt aber hier nicht mühsam kopieren und dann hier einfügen sondern wir können ja wie wir gelernt haben im visual studio code editor einfach rufzeichen und dann die älter taste drücken und jetzt haben wir wieder unser grundgerüst hier wunderbar das ändern wir zu der jung weil die website ja dann für deutschsprachiges publikum gemacht ist und den titel der nennt am ohr zu ohr katzen und im politik da machen eine h1 unterschreibt mit hinein ich bin die gebracht katzelsdorf datei speichern mal wieder wunderbar und jetzt wollen wir von der beispiel drei datei also von dieser datei hier auf die orca zellstoff datei verlinken wie machen wir das beginnen die beispiel trader.de und wir verliebten jetzt wieder mit einem e tec das heißt ich drücke twitter also attack englisch noch wissen wir schon für a-tec auf deutsch aber er hat sich schwester und um sagen wir ich drück die enter-taste hier haben jetzt hier stehen wunderbar und wissen ja schon hier in dem treff attribut müssen wir den link einfügen in dem fall haben wir jetzt aber keinen link sondern es ist sein der tat und den können wir auch hier hinein schreiben jetzt braucht man zudem dabei part von der ortschaft punkt hatte meldete wie kriegen wir den am besten naja geben wir unser projekt dort nach hier haben jetzt schon die orks wolf datei und wenn wir jetzt hier draufklicken doppelklick dann öffnet sich die dtm im browser das tano minimieren so und hier habe ich jetzt hier oben ja den parteirat dann kann ich mir jetzt kopieren und dann gehe ich hier in das attribut und drücke steuerung vor damit der tat hier eingefügt wird ist also wieder link nur dass es jetzt an der zeit ist das geht auch so wenn wir das jetzt speichern dann gehen wir hier auf unsere testseite und aktualisieren dann sehen wir nichts warum sie immer nichts ja wir haben ja hier zwischen den takes noch nichts hinein geschrieben denn erinnern wir uns das was hier im etf attribut steht das wird ja nicht angezeigt das ist ja der link oder in dem fall der tat ein pfad aber der wird nicht auf der seite gezeigt es wird ja nur das gezeigt dass hier zwischen dem öffnenden und schließenden etech drinnen ist und da schreibe ich jetzt hinein ich bringe die ich zur bordkarte zahl datei speichern denn aktuell ist wunderbar jetzt haben wir schon den link hier und da ist wieder eben unterstrichen in so einer etwas anderen farbe also nicht schwarz und lila oder was das sein soll ja und wenn man dort drauf klicken dann kommen wir schon zur ich bin die orks datei im selben tag ja wenn wir jetzt wollen gehen wir hier wieder zurück jetzt sagen weil wir wollen dass die datei wieder in einem neuen tab geöffnet wird wenn ich jetzt auf blicke was mache ich dann das schreiben wir jetzt hier schreibt nach target ist gleich und dann unterstrich blenk und nur zur info wobei ich das target ist gleich blenk jetzt hier schreibe nach dem treff attribut oder ob ich es davor hin schreibe ich kann es jetzt auch in störung iks ausschneiden und dann gehe ich hier davor hin vor das attribut trickett strg v und 15 jetzt ist die reihenfolge umgekehrt ist steht zuerst das target ist gleich blank und dann der das attribut die reihenfolge ist eben egal hauptsache es ist in dem öffnen also hauptsache es ist hier drinnen ja und wenn ich das jetzt wieder speicher und dann ja aktuell ist hier dann kann ich hier draufklicken schwuppdiwupps öffnen sich die wada in einem neuen tab und der alte ist eben hier auch noch da wunderbar das heißt von diesem video merkten wir uns jetzt in das attribut da können wir nicht nur einen link sondern auch einen parteitag entscheiden und mit dieser information sind wir fit für das nächste video im letzten video hat er gelernt dass wir in das attribut hier nicht nur links sondern auch der teig vater hinein schreiben können so weit so gut aber was passiert jetzt eigentlich wenn ich den ordner also dem projekt ordner plötzlich waren das hinein gibt ich schließe mal unseren editor hier und das war mit kleiner jetzt gehe ich hier hier mit dem projektpartner da gehe ich hier auf den desktop und da stellen wir einen neuen ordner den nenne ich jetzt ordner 2,2 und unserem projekt dort noch den schneide ich jetzt aus mit störung ickx und fügen hier mit strg v wieder an jetzt ist unser projekt dort na also im ordner zwei drinnen und jetzt öffentlich wieder wie schön studio code visual studio co zeigt mir nach dem öffnen normalerweise immer die letzte dateien gespeichert habe aber die datei hat jetzt einen anderen pfad und wie stellst du dir codecheck das nicht automatisch und deshalb findet dass die datei beziehungsweise eben denn projekt dort nicht somit sehe ich hier auch nix ja und jetzt muss ich also den ordner wieder neu eröffnen ich gehe also hier oben auf weil dann auf open folder und jetzt muss ich mir wieder dem projekt ordner suchen ich weiß es noch auf dem desktop aber jetzt im ordner zwei drinnen deshalb denke ich da drauf dann wähle ich hier den projekt orten aus und klick auf ordner auswählen und jetzt haben wir wieder die dateien hier gut im browser wenn ich den jetzt wieder öffne hier wird es mir noch immer angezeigt ja mit dem alten pfad weil hier haben wir jetzt nichts nur geöffnet wenn ich das jetzt aktualisiert dann findet ihr natürlich die datei nicht denn hier ist ja noch der alte datei pfarrer angegeben also direkt auf dem desktop ist dann ja hier der projekt ordner und dann die beispiel 33 da stimmt jetzt aber nicht mehr denn der projektpartner ist ja noch im ordner zwei drin also war es nun ja ich könnte entweder nacht sind desktop hier könnte ich jetzt schreiben ordner 2 und dann noch ein schrägstrich jetzt wird der tat wieder stimmen wenn ich jetzt hier wieder aktualisieren dann findet er wieder die datei das wäre ja zu gehen oder ich schließe den browser und gehe jetzt hier nochmal in der nordsee in dem projekt ordner und öffnet von hier aus jetzt wieder die beispiel drei datei dann geht es auch denn dann hat er wieder die aktuelle den aktuellen der tat ja was passiert jetzt sieben wenn ich jetzt auf den link hier klicken ja ich klicke mal drauf und ich bekomme natürlich wieder eine fehlermeldung warum denn der link hier im editor den hc hard gerät also das ist ein absoluter link absolut beziehungsweise hart gekocht heißt eben dass hier der komplette der deb hat drinnen ist ja von anfang an von vom ziel laufwerk users kevin desktop und so weiter das ist hart gekocht das ist der ganze der tat und der ist jetzt natürlich falsch denn der projektpartner befindet sich ja nicht mehr direkt auf den desktop sondern im ordner zeit dass auch hier müsste ich jetzt ordner zwei schreiben dann ein schrägstrich und jetzt würde es wieder funktionieren wenn ich das jetzt speicher muss ich jetzt hier wieder auf unser also das können wir schließen jetzt bin ich hier wieder auf unser test hat der ich aktualisiere mal und wenn ich jetzt drauf gucke dann funktioniert wieder denn jetzt stimmt ja der link hier wieder über 1 aber es gibt hier bessere möglichkeiten um so etwas zu machen denn besser ist es nämlich wenn man relativ parteikader nimmt was sind relative drei paare na ja das werden wir jetzt gleich sehen wir löschen jetzt hier alles vor dem mord soll sport hieraus schwupps und jetzt machen wir vor dem schrägstrich hier noch einen punkt das bedeutet jetzt der punkt schrägstrich sagt im browser die achtung der datei pfad den du hier siehst also dass hier der dort erfahrt hier der beginnt eben in diesen ordner wurde gerade die aktuelle datei hier geöffnet hast die aktuelle datei ist eben die beispiel drei datei denn der etech hier der ist in der beispiel drei da drinnen deshalb ist die beispiel drei datei die aktuelle datei und da wo diese da drinnen liegt da beginnt der browser dann nach dem pfad der hier nach dem punkt schrägstrich steht zu suchen so und wenn die dateien den ordner liegt dann mache ich einfach nur den punkt schrägstrich und dann den dateinamen hier hinten dran auch wunderbar jetzt sprechen wir wieder und wir aktualisieren mal also das mache ich jetzt tue das aktualisieren ich klicke wieder auf den link drauf und es funktioniert immer noch wir sehen hier ist wieder der komplette datei katja der wir dem dann hier automatisch eingefügt und hier dann die radsport punkt hatte meldete obwohl wir hier nur punkt schrägstrich ort kartal schwerpunkt html stehen haben kommt hier der ganze datei platin das macht der browser dann automatisch jetzt schließt moderne titel wieder und wir gehen jetzt auf den desktop und erstellen uns noch einen neuen ordner der name ist wieder komplett egal drum nenne ich jetzt den orten einfach gemischtes hug und jetzt gehen wir unseren projekten hat er hier im ordner zuerst im schneide ich jetzt aus und dann füge ich jetzt hier im ordner gemischtes hat einfach ein das heißt der projektpartner ist jetzt nicht mehr im ordner zwei drinnen sondern im ordner gemischt sagt jetzt öffentlich weder den editor und nun muss ich ihn wieder sagen wo die aktuelle drei drinnen ist denn jaschek der das nicht dass wir jetzt gerade in der tat von dem ordner geändert haben deshalb gehen wir vl auf open folder dann wieder auf den desktop und hier wähle ich jetzt gemisch das hack aus denn da ist jetzt der projektor nach drinnen da klicke ich auf den projektpartner auf ordner auswählen und jetzt haben wir wieder die dateien hier meter im browser mache ich jetzt den tab hierzu und hier aktualisiere ich jetzt mal und wieder findet er die datei nicht warum findet er die datei nicht naja hier im browser die url ist ja noch immer die alte da steht jetzt ordner 2 und nicht gemischtes hack der projekt orten ist aber ich eben erst im ordner gemischtes hat trainer wir könnten das jetzt hier einfach umschreiben oder wir schließen hier dann brauchst einfach wieder minimiere ich darf noch kurz gehen ein gemischtes hatte ein projekt ordner und öffnen von hier aus die beispiel drei datei dann funktioniert wieder dann haben wir jetzt wieder die aktuelle url hier drinnen dann hole ich mir jetzt auch den code editor hier wieder daneben was passiert wenn wir auf den link klicken wir haben jetzt ein projekt dort nicht nur im ordner zwei drinnen sondern ein gemischtes hackordnung hier haben wir aber nichts verändert im treff attribut ja das ist noch immer gleich geblieben was ist wenn ich hier draufklicken es funkt warum funktioniert das schau mal hier da wo vorher ordnet 2 gestanden ist versteht jetzt eben gemischtes hat das hat der browser also automatisch gemacht und das ist eben so weil ich mit dem punkt schrägstrich hier sage dass der browser immer in dem gerade geöffneten ordner nach eben dieser datei hier suchen soll also wenn möglich nutzen wir relative der taipan das ist jedem ein relativer type hat wenn ich auf eine website verlinkt möchte wie zum beispiel amazon.de oder facebook.com oder irgend sowas dann geht das nicht denn dann muss ich ja den ganzen link hineinschreiben aber wenn ich jetzt eben einen datei parteien gewählt dann sollte ich immer relative der täter nehmen ich zeige euch jetzt schon verständnis noch etwas hier im editor der klick mit der rechten maustaste auf new folder und dann geben jetzt einen namen für unseren neuen ordner ein mann herbert brückmann die enter-taste hier haben jetzt schon den neuen ordner und da kann ich jetzt noch mal mit der rechten maustaste gehe ich direkt auf den erwarteten drauf dann gehe ich auf ein juwel und jetzt schreibe ich zum beispiel sushi punkt html das ist jetzt unsere neue html datei wieder enter da haben wir jetzt zu sie hatte meldete offen jetzt erstellen wir uns wieder unserer grundgerüst das heißt rufzeichen enter-taste das ende ich zu dem dokument hier den titel den ende recht suzuki um und in politik da schreibe ich jetzt wieder eine h1 und schreibt ich bin die susi html datei zu speichern gut wenn wir jetzt in unserem projekt ordner schauen also hier in unserem projekt ordner dann ziehen wir hier schon den gerade erstellten neuen ordner herbert und hier drinnen ist dann die datei zu sehen das heißt wir können mit visual studio code ganz einfach neue ordner und dateien erstellen wir sehen zu sie ist jetzt eben hier beim herbert in diesen ordner drinnen darum ist das auch so etwas eingerückt beispiel drei datei ist er hier ganz links die gehört also zum projekt ordner und ich kann das auch hier so auf und zuklappen wunderbar und die arbeit ist eben hier in dem projekt dort nach drinnen traum ist jetzt das kleiner und auch so ein bisschen eingerückt hier drinnen so viel nur dazu weiter geht's jetzt sagen wir mal wir wollen ein link zu der susi punkt hatte meldete haben also von unserer beispiel drei dabei wollen wir jetzt auch du unsere susi punkt html-datei verlinken da gehe ich jetzt hier drunter machen br tag für eine neue zeile nochmal hier her mache einen weiteren tag und jetzt im etf attribut das schreibe ich jetzt wieder ein punkt dann ein schrecklich dass der browser soll also wieder im aktuellen ordner suchen und im aktuellen ordner wo ihm diese beispiel drei datei gerade drinnen ist da soll er dann nach einem weiteren ordner suchen nämlich nachdem herbert und schreibe ich jetzt herbert hin und dann schreibe ich nachdem er wird noch ein schräg stich und dann den dateinamen hier werde mir schon vorgeschlagen schreibt html und daneben schreibe ich jetzt noch target ist gleich unterstrich blenk lenkt damit die datei dann in einem neuen tab geöffnet wird zwischen den takes also zwischen dem öffnen und schließen ich schreibe ich noch ich bin der link zur susi das speichern und das kam jetzt zu machen hier im browser jetzt aktualisieren wir unsere website jetzt haben wir bei der links und wenn ich jetzt eben auf den zweiten linke blicke dann komme ich auf die susi html-seite hier oben haben wir dann wieder den gesamten partei katja obwohl hier eben nur punkt schrägstrich herbert susi punkte mail steht das bedeutet der browser sucht in diesem aktuellen ordner wo die beispiel 300r drinnen ist nach einem ordner der herbert heißt und in diesen ordner er wer dann nach einer datei diesen punkt hatte mail heißt und wenn es sie findet dann gibt er mir eben die datei aus in dem fall findet er sie und deswegen steht da ich bin die susi html-datei weil wir das ja hier hineingeschrieben haben sehr gut ich schließe jetzt mal den browser und edita beides geschlossen wunderbar und jetzt gehe ich hier noch mal rein neben dem projekt ordner schneide ihn aus und jetzt füge ich ihn irgendwo irgendwo hier dazwischen wo ein sagen wir der musik ordner damit er mal ganz woanders drinnen ist damit ihr seht dass das auch funktioniert macht natürlich keinen sinn hier unter der musik ordner zu speichern aber es ist ja nur für feeling für das verständnis hier fügen wir das jetzt ein so jetzt ist der projekt dort eine alte musik ordner drinnen und dem projekt dort nur zum zeigen dass der nach denke ich auch egal ist den nennen wir jetzt noch stefan hat genau das heißt in unserem partner stefan raab ist jetzt daher der ordner herbe drinnen die beispiel drei datei und das ganze zeugs hier wunderbar ja jetzt öffentlich unseren editor wieder und natürlich muss ich dir jetzt wieder sagen wo unsere dateien liegen also voll da dann gehe ich jetzt nicht dort den desktop denn da liegt ja nichts drinnen sondern ich gehe jetzt eben hier auf dieser pc dann suche ich mir musik hier raus musik doppelklick hier ist der stefan raab ordner die in wenig aus da krieg ich ordner auswählen und jetzt haben wir schon wieder hier unsere dateien perfekt jetzt öffnen wir die beispiel drei dateien und wasser jetzt gehe ich also hier bin ich jetzt schon im musikgarten hat an dem stefan raab ordner hier ist die beispiel 3data klick auf jetzt öffnet sich die wieder im browser mit dem aktuellen der deb hat den ordner damen noch minimieren und jetzt klicken wir hier mal auf den ersten link der funktioniert wir können auch hier auf den zweiten link klicken der funktioniert auch denn wir haben hier im editor ja nur den relativen tat von beiden dateien eingegeben und der editor schaut ist also im aktuellen ordner wo die beispiel drei da drinnen liegt im jetzigen fall ist das eben der stefan raab ordner das heißt der name von dem aktuell orten ist scheißegal ja er schaut einfach der browser statt einfach nur nach der beispiel drei datei wo liegt diese gerade drinnen die ist gerade im stefan raab ordner drinnen und von diesen ordner aussucht es dann hier nach der tat soll sport punkt hatte meldete die findet es darum funktioniert das mit der orca teil hier und beim zweiten ethik hier da sucht im ordner wo die beispiel drei da drinnen ist das ist eben der stefan raab ordner in diesen ordner sucht nach einem ordner der jammert heißt empfindet der browser wieder und im ordner herbert suchte danach einer sauce punkte meldete und jetzt noch eine frage was passiert wenn ich jetzt die beispiel drei datei in den herbert ortner hinein gewehr so ich stehe es nochmal den editor dann gehen wir in den stefan raab ordner und jetzt nehmen wir die beispiel trader.de hier ich schnell sie aus mit störung ist gehen denn herbert ortner und fügt sie mit strg v hier ein was passiert jetzt ich muss die datei wieder neu öffnen denn der browser wz nicht finden die beispiel drei dateien der pfad dh ich gehe noch mal in den herbert ortner hier tickets auf beispiel 3 der browser öffnet jetzt die datei mit dem aktuellen der tat hier wunderbar und was passiert wenn ich auf den link klicke ich klick drauf auf den ersten funktioniert nicht warum funktioniert das nicht naja die beispiel drei datei liegt jetzt im herbert ortner drinnen und sucht in diesen ordner nach der orca zoll schwerpunkt html-datei aber die anzahl schwerpunkt html datei ist ja im stefan raab ordner direkt drinnen nicht im herbert ortner und deshalb findet der browser die orca zeitpunkt hatte meldete hier eben nicht wir können jetzt auch auf unser test hatte noch auf den zweiten link klicken zack auch diesen findet er nicht denn der browser schaut jetzt wieder im aktuellen ordner der beispiel drei datei dieser befindet sich hier als dem herbert ortner drinnen in diesen ordner sucht der bronx nach einem weiteren ordner der herbert heißt und dann nach der suse punkt html-datei aber im herbert ortner gibt es ja keine weiteren ort mit der herbert heißt grund findet der browser hier auch nichts und zeigt am wieder hand zugriff auf die datei nicht möglich jetzt eröffnen wir unseren visual studio code editor wieder ich muslim wieder da findet er zeigt jetzt der dieter kuhnert open to turn on arrival resource das ausschließen jetzt aber er hat hier schon automatisch aktualisiert das heißt ich kann jetzt hier in den herbert ortner hineingehen hier habe ich jetzt zum beispiel drei datei da krieg ich drauf und wenn ich jetzt hier zum beispiel den herbert hieraus lösche bei der süße punkt html datei und das jetzt speicher dann aktuell ist hier immer das und wenn ich jetzt auf den link hier draufklicken dann findet er die datei denn jetzt schaut er nur nach der süße punkt html datei im aktuellen ordner der aktuelle ordner von der beispiel drei dabei ist eben jetzt der herbert ortner und hier direkt rindern ist ja diese punkte meldete bei der ort soll schwerpunkt html-datei wenn ich die jetzt zum beispiel hier jetzt auch schneide und ingenieurbau dort nachhinein gebe dann funktioniert auch wieder dann wenn ich das jetzt aktuell ist hier und hier draufklicken dann findet die dort auch denn er suchte jetzt wieder nur nach diesen dateinamen im aktuellen ordner der aktuelle orten system der herbert ortner und da drinnen ist auch die orte treffpunkt hatte meldete deswegen funktionieren jetzt hier wieder bei der links so funktionieren also relativ pfarrerin html und wir sehen uns im nächsten video sehr was leute in diesem video zeigt was sprungmarken sind ja was den sprung machen ich zeige euch das hier anhand dieser seite hier das ist feuerwehrfahrzeug in österreich ist so eine wikipedia seite und hier zeige ich euch das was sprungmarken sind und dann schauen wir uns an wie wir diese machen also hier habe ich ein inhaltsverzeichnis und wenn ich jetzt hier drauf geht das sind holzwarth links na wenn ich hier drauf geklebt sondern für die fw löschfahrzeuge chuck dann springt mir der browser hierzu den punkt löschfahrzeuge auf der gleichen seite das heißt wenn ich jetzt hier nach oben komme bin ich wieder hier das ist auf der gleichen seite wenn ich jetzt hier zum ablauf stützpunkt fahrzeuge kicker dann springt mir der browser hier zum punkt stützpunkt fahrzeuge auf der gleichen seite das heißt sprungmarken sind dazu da dass man hier im text also es kann auch hier im text zu sein oder hier in einem inhaltsverzeichnis so eine art link hinterlegt und wenn man dann hier worauf tickt dann wird man zu dem jeweiligen punkt dann auf der gleichen seite weitergeleitet zum beispiel ihrer fahrzeuge der berufsfeuerwehr wiencek springt mir hierzu fahrzeuge der berufsfeuerwehr wien ich denke er sollte mal klar sein was jetzt sprungmarken sind und jetzt schauen wir uns an wie wir diese mache ich mach mal den browser kleiner jetzt im desktop stelle ich zu übungszwecken einen neuen ordner daniel jetzt website so jetzt öffne ich wieder wie schon ihr kot und da muss ich natürlich wieder mit teilen des ordner liegt denn wir zahlen wollen wir wollen jetzt im web site ortner hier haben da gehe ich auf hohem folder und dann auf den desktop hier fordern ausfällen das kennen wir alles schon ja das kann ich schließen und jetzt stelle ich mir hier ein neues seil und wir nennen das der name ist wieder komplett egal nennen dass unsere tml wunderbar dann erstellen wir uns wieder das grundgerüst das ende hatte die um den titel einer website wunderbar ja dann haben wir das schon einmal hier das speichern als kurz jetzt öffnen wir das ganze den spaß noch in unserem browser jetzt haben wir das hier nebeneinander wieder und dann können wir schon anfangen wir haben ja gesagt oder ich habe ja gesagt sprungmarken macht mit dem ethik das heißt ich mache mal der tag ja wunderbar dann schreibt man hier noch hinein nach unten und da machen jetzt runter noch den tag und dafür jetzt ein paar beispiel wird ein weil wir brauchen ja dann was wo man runter scrollen kann ja wo der browser dann nach unten springen kann ich schreibe jetzt 2000 hinein also lemm 2000 die enter taste und wir haben hier jetzt 2000 beispiel weiter dann machen wir hier noch einen tag entfetten unterschreiben jetzt hinein auch ein sonnen und hat seine schattenseiten der speicher man mal kurz und schauen uns das an so haben wir jetzt einen tag also wenn texte da drin ist im ethik dann die 2000 beispiel wörter bis vier ganz nach unten und hier haben wir derzeit mp tec und wir wollen jetzt das wollen wir jetzt wir wollen jetzt wenn wir hier draufklicken dann soll uns der browser bis hierhin springen ja ja wir machen wir das jetzt wir machen das mit einem sogenannten id attribut wir müssen nämlich hier den browser images attribut müssen wir sagen woher wohin er hin springen soll also normalerweise geben wir hier ein link 1 oder in der tat in dem fall machen wir das aber ein bisschen anders ich zeige euch dass wir gehen jetzt hier zudem petek hier soll er ihn springen zu diesem tag hier und hier die mp-tec dem vergeben jetzt die das attribut das heißt die scheibe id ist gleich anführungszeichen und da kann ich mir jetzt irgendeinen namen aussuchen ganz egal wie schreibe jetzt zeiten ende jetzt gehen wir hier im editor wieder ganz nach oben und dann müssen wir hier im treff attribut da müssen wir jetzt dann ein hashtag machen der es wichtig und dann schreiben nach seitenende der browser weiß jetzt durch den hashtag ihr dass das eine sprung marke ist und dass er eben zu der die mit diesen namen springen muss das weiße durch den hashtag ihr ja und er sucht dem dann der durchsucht alle text nach dieser id und der tag der so einer die hat zu diesem tag springt dahin in dem fall ist es eben der petacchi und wenn ich jetzt hier speicher und jagt dann ist hier und gehe ich jetzt hier ganz nach oben wenn ich jetzt draufgepackt dann springt der browser hier ja zu auch ein sonnenbad und hat seine schattenseiten und warum warum sehe ich das jetzt nicht hier ganz oben wie es hier bei wikipedia war bei wikipedia wenn ich jetzt drauf klicken dann wird mir das ja hier oben angezeigt naja das ist einfach so weil wir hier drunter keinen weiteren content haben hier haben also hier ist er fahrzeuge der berufsfeuerwehr innsbruck darf ich ja gerade oben drauf geklickt und hier gibt es ja noch ganz viel content danach deswegen wird das hier ganz oben angezeigt das haben wir aber nicht deswegen springt der browser hier nur bis hier unten er kann nicht weiter nach unten springen hätte ich jetzt hier noch einen weiteren tag und hier machen wir sagen ja 1000 beispiel data und wenn ich das jetzt speicher und dann hier aktualisiert dann kann ich jetzt aufgehen und wenn ich jetzt hier draufklicken chuck dann sehe ich das hier ganz oben ja weil dann hat ja hier noch genügend platz zum weiter nach unten scrollen das kommt natürlich nicht ganz nach unten denn er scrollt ja nur obwohl hier nach unten steht dass es ja egal es gold nur soweit bis dann der pi tag kommt mit der id seitenende ob der standort seitenende ist oder nicht ist das scheißegal es ist ja nur ein name den wir vergeben haben also ich sage es nochmal ich klicke hier drauf jack und dann steht hier auch ein sonnenbrand hat seine schattenseiten ja ja und wenn ich eben hier keine 1000 wörter habe sondern zum beispiel damals sowieso löschen wartet kurz genau brauchen einfach noch mal am tag und das sagt mir jetzt lorenz 400 wenn man das jetzt speichern und dann hier aktualisieren dann werden wir sehen dann können wir es hier draufklicken chuck und jetzt springt der browser eben nur bis hierher weil weiter nach unten kann nicht scrollen weil hier kein hier danach kommt dann kein konto mehr darum sehen wir das jetzt hier das nur für das verständnis jetzt macht nur zum vorzeigen schreibt man hier wieder die 1000 wörter hinein also wieder das ganze gold so hatte es kurz lauren 1000 wunderbar sprechen wir noch mal und aktualisieren so wenn ich jetzt drauf klickt dann springt er wieder bis hierher weil er noch genügend platz zum scrollen hat und jetzt noch fast alle die hier die muss genauso geschrieben sein wie oben im etf attribut ja das muss genau das gleiche sein weil wenn ich jetzt zum beispiel in der ein tippfehler drinnen habe oder zum beispiel dass hier am anfang groß schreibe wenn ich das jetzt speicher und dann aktualisieren was passiert danach schauen wir kurz nix passiert es geht nicht mehr warum nicht weil dieser die hier anders ist als wir die hier eingegebenen treffert geburt wir müssen jetzt hier auch ein großes es machen wenn wir jetzt speichern und dann aktualisieren dank geht aber wenn ich jetzt auf tigerdame funktioniert wieder einwandfrei ich könnte hier auch irgendeine buchstabenkombination hineinschreiben solange ich die gleiche buchstabenkombinationen der ich mir jetzt kopiert so lange ich die buchstabenkombination auch immer die attribut drinnen habe bei dem jeweiligen tag wohin will also jetzt hier wenn ich dir jetzt mit strg v einfügen und wenn ich das jetzt sprecher und hier wieder aktualisieren dann kann ich hier wieder rauf gehen drauf und das funktioniert immer noch das heißt was ich hier rein schreibe ist scheißegal es muss nur das gleiche sein was ich dann im treff attribut nachdem herr staeck scheibe es ist auch egal ob das ein tätig ist oder ein hat zwei oder drei tag oder ein strandtag egal ich kann jedem dieser text energie gehen ich kann hier zum ablauf machen einen hat zwei hinter matthias anschließenden tag natürlich auch noch zu einem hat zwei tag um und wenn wir das jetzt speichern dann können wir hier wieder aktualisieren natürlich hat das jetzt die formatierung von der firma zwei tag wenn wir jetzt hier ganz nach oben gehen ich klicke drauf es funktioniert immer noch genau gleich es ist also egal was das hier für ein tag ist wichtig ist dass dir die mit der metro attribut hier übereinstimmt und dass sie im betreff attribut eben den hashtag davor haben sonst geht es auch nicht wie könnt ihr auch hier irgendwo im text sogar machen wir hier irgendwo ein song taek zb nur dass das jetzt das geht auch unterschreibe ich bin der text im store und dem müssen wir natürlich auch ein handy geben da schreiben wir jetzt die ist gleich und die für jeden scheiß egal warum schreibe ich jetzt einfach scheißegal und wenn ich jetzt hier auf gehe dann muss ich hier natürlich auch hineinschreiben scheißegal wenn wir das jetzt speichern und dann aktualisieren dann können wir hier auf gehen und wenn ich jetzt hier draufklicken chuck dann springt er mir hierher ich bin der text im strandtag so funktioniert das ganze also und jetzt zeige ich euch noch etwas jetzt machen wir hier noch einen zweiten tag und dann schreibe ich hier hinein hashtag und dann schreibe ich wirklich ganz nach unten ich bring dich wirklich ganz nach unten speicher mal zurück kurz störung b damit wir mehr platz haben genau schon besser aus so wenn wir das jetzt aktualisieren und haben wir das hier das steht jetzt in der gleichen zeile weil die tags fangen kann der neue zeile an ich mache hier noch den bfs bisschen übersichtlich aus so jetzt ist es in einer in einer neuen teile wenn ich jetzt hier draufklicken passiert nix weil wir hier zwar eine ag vergeben haben aber hier im text noch nirgends eine id in irgendeinem tag hinein geschrieben haben die genauso heißt wirklich ganz nach unten ja und wir gehen jetzt natürlich noch ganz nach unten erstellen uns hier einen weiteren effekt dann zeige ich euch das so dass ich dem auch eine art die geben kann und zwar schreiben wir jetzt hier noch eine hinein es ist egal ob dir die vor oder nach dem treff attribut steht wichtig ist nur dass ihm eröffneten tag ist normalerweise haben ja gar keine jeff attribut aber im etat können wir auch einer die vergeben wie in jedem anderen tag und da ist es egal ob der die hier davor steht oder nach dem treff attribut ja also ich könnte sie auch hier hin entstanden so aber egal ich schreibe jetzt hier die agi und da mehr geschrieben wirklich ganz nach unten so das muss genau gleich geschrieben sein schauen wir noch mal wenn es hier ganz auch umgehen ja ist richtig und wenn wir das jetzt speichern und sie aktualisieren und wenn ich jetzt hier draufklicken dann springt mir der browser wieder bis hier ganz nach unten warum sehen wir noch nichts weil wir im ethik noch keinen text hineingeschrieben haben schreibe ich bin der text nochmals nochmal aktualisieren und wenn ich jetzt aufgebe dann sehen wir dass ich bin der text das heißt das funktioniert auch ich kann auch in einem etat keine idee vergeben und ich kann jetzt auch in diesen etf attribut noch eine die also hinein schreiben dass irgendwo hin springen soll zum beispiel schreibe ich hier scheiß egal was passiert dann wir aktualisieren wieder und jetzt wenn ich hier nach unten auf das nach unten clique dann springen wir zum ich textron tag wenn ich jetzt hier wieder rauf gehen und dann hier draufklicken auf ich bring dich wirklich ganz oben dann springen wir hier bis zum tag ich bin der text und wenn ich jetzt hier draufklicken chuck dann springen wir wieder zum ich bin der text im sonntag weil der browser dann hier zu dieser id hier schmeckt so funktionieren also sprungmarken ich kann also mit sprungmarken sowohl nach unten springen als auch nach oben und das war es auch schon wieder für dieses video wir sehen uns im nächsten jahr etwas größer ich habe jetzt hier eine kleine aber dafür hässliche challenge ich möchte nämlich dass mir dieser seite hier stellt ich weiß ich weiß sicher ziemlich scheiße aus aber wir sind ja noch ganz am anfang und da ist das also mit der zeit können wir dann umfangreiche website machen aber für jetzt ist das gut genug ich mache den browser mal etwas kleiner das heißt so schaut sie aus einem wenn der browser das kleine ist immer noch scheiße aber das ist ja egal ja wir haben hier in pfäffikon und titel als vater kann hier könnte natürlich auch ein anderes bild wählen wichtig ist eben hier nur dass er ein bild als freak on selbständig einfügen könnt einfach zum üben ja und dann haben wir hier so überschrift natürlich dazu ein inhaltsverzeichnis hier dann so eine unter überschrift mit einem beispiel text sein zurück nach oben link hier wieder eine unterschrift mit beispiel text nochmal ein zurück nach oben link noch einmal eine unterschrift mit seinem beispiel text und wieder ein zurück nach oben links ja kleine überraschung natürlich was passiert wenn ich auf zurück nach oben klicken er springt mir nach oben bei allen drei links her egal wo ich oft springt er mehr zurück nach oben und im inhaltsverzeichnis da habe ich natürlich hier zur sprungmarken hinterlegt das heißt ja nicht ihr fahrzeuge klick klack dann springt er mir zu den fahrzeugen wenn ich auf geräte clique tag springt damit hier zu den geräten und wenn ich wieder zurück nach oben gehe zurück nach oben und wenn ich auf mannschaft clique er dann springt damit zu der mannschaft jedoch zurück nach oben wunderbar probiert dass die seite selber nach kohle in den kursmaterialien habe ich den fertigen html-code gespeichert dann könnt ihr euch dann downloaden da könnte somit dann die fertige seite in eurem browser auf euren computer öffnen so wie ich hier und dann könnte anhand dieser seite versuchen den dazu passenden html code zu schreiben das heißt am besten öffnen zeigt dieses hier so recht er am computer und links dann den den visual studio editor und da schätze dann den code hinein wo es hier glaubt dass das der richtige ist und diese seite hier zu kreieren es ist wie gesagt ein ganz einfaches beispiel es ist ja hässliche seite aber irgendwo müssen wir anfangen und falls ihr das nicht just dieser seite zu kurden dann dann schaut euch nur dann im nächsten video schreibt man den html code für diese seite hier gemeinsam das heißt probiert es zuerst selbst und erst dann schaut euch das nächste video an um zu sehen wie ich das gemacht habe servus ich zeige euch jetzt so schnell wo er die dateien für diese challenge findet und zwar findet ihr die dateien in der video beschreibung jetzt sollen hier runter klicken auf mir ansehen und dann haben wir hier die links zu den materialien wir haben ja drei links einmal diesen hier einmal diesen hier und einmal diesen hier für diese challenge hier da brauchen wir jetzt diesen link ja da sind dann die dateien für diese challenge hinterlegt schauen wir uns gleich an und dann gibt es ja noch diesen link der erst am für die section wo wir bilder in html kennenlernen das eigentlich dann wieder ihr könnte link den link zu den bildern in der video beschreibung sehen das ist dann dieser link und dieser linke erst dann für das abschlussprojekt das heißt das eigentlich dann ihr könnt euch die fertige website in der video beschreibung wieder runterladen über den link und da ist dann dieser link hier gemeint und es funktioniert immer genau gleich wir wollen jetzt diese challenge ihr also ihr sollte es diese website nachbauen und dann kriegen wir jetzt eben hier auf den ersten link klickt man darauf dann kommen auf diese seite hier das ist gibt habe und da können wir jetzt hier auf den grünen button hier klicken chuck und dann hier auf download tipp ja dann wird das schon darum gelodert das geht ganz schnell dann gehen wir hier auf unseren download ordner geben wir auf downloads hier haben wir schon heruntergeladen das ist jetzt eine zip-datei die müssen jetzt auch ein packender klicke ich jetzt mit der rechten faust auf und dann gehe ich auf alle extrahieren das lassen wir gleich da blieb mir jetzt auf extrahieren und schon ist es fertig jetzt haben wir hier den ordner der ist jetzt sozusagen da geht mir jetzt drauf und dann haben wir hier das bild für das farbig und das schaut so aus und hier haben wir die fertige html-seite die shuttles und jetzt könnte das ganze natürlich wieder hier auf die rechte seite von eurem bildschirm geben und auf die linke seite da schaut er dann dass ihr den code editor hingibt und dann versucht ihr einfach diese seite hier nachzubauen und im nächsten video machen was dann gemeinsam viel spaß leute dann starb normal mit unserer feuerwehr seite also wir stellen uns natürlich einen neuen ordner hier neu ordner bin feuerwehr seite dagegen hält hinein unterstellen uns auch ein bilder ordner da drinnen das heißt noch einen ordner der nennen wir bilder und jetzt brauchen wir noch das bild für das favicon also ich habe hier habe ich schon unsere fertige seite wir sehen ja hier oben ist ein farbig 100 rindern und das ist eben die seite die wir im frühling wieder schon gesehen haben und die machen wir jetzt und wie gesagt hier wollt so oder so ein paar decken haben und das bild für das farbig und das holen wir uns jetzt von pixel spex es ist ja so eine zu einer website wo wir grad bilder bekommen pack los da gehe ich jetzt hier hier hin da geht jetzt einfach weiter witte schon vorgeschlagen untersuchen wir uns jetzt ein bild aus dieses bild das ist nämlich schaut aus register blicke ich jetzt drauf dann gehe ich auf kostenloser download und ich nehme mir die kleinste größe dann führt das farbig und braucht man nichts größeres das soll man auch eine kleine größe nehmen denn sonst leidet das dann zu lange also eine kleine größe für das farbige kostenloser download und jetzt schauen wir dass wir das bild das wir gerade gedownloadet aden hier in den bilder ordner bekommen das heißt wir gehen auf download dazu mir schon gespeichert und das schneide ich jetzt aus dann gehe ich wieder in unserer feuerwehr seit der ordner das heißt hier hinein da gehe ich in den bilder ordner und hierfür bis jetzt ein störung vor ein wunderbar dass hier drinnen und dann können wir das ganze auch schon mit visual studio geöffnet das heißt ich öffne visual studio code da gehe ich jetzt dann wieder auf seil dann auf open folder und jetzt hole ich mir die feuerwehr seite die legte auf den desktop das sind wir schon richtig ordner auswählen das kennen wir alles bereit sie das funktioniert ja hier haben wir jetzt den ordner da stelle ich mir gleich die neue html datei die nennen wir zb die feuerwehr html dann können wir schon mit dem grundgerüst starten dh das rufzeichen das enn dem atrium dokumente teil hier in der währung feuerwehr feuerwehr dann machen wir jetzt noch das favicon wie machen wir das haben wir schon gelernt überlegt kurz probiert sie selbst wie machen wir das farbig ertragreich wir gehen hier hin schreibt natürlich link dann werden wir das favicon aus und wir wissen ja hier bei dem etf attribut dann müssen wir das auslöschen und jetzt dem der bergfahrt angeben wo unser bild liegt dass wir für das freecom verwenden wollen überlegt kurz ich mache jetzt einen punkt und ein scheck stich und was müssen wir jetzt für untertreibt angeben probiert es gut selber ja genau richtig ich schreibe jetzt bilder denn wir wollen den bilderordner noch hinein dann noch ein schrägstrich und dann wird meedia.de schon vorgeschlagen das ist nämlich der dateiname da krieg ich darauf wunderbar wenn ich das jetzt speicher und dann die seite mal öffnen in unserem browser das heißt du bist mir jetzt die feuerwehr seite hier den ordner machen auch da geht mir drauf jetzt öffnet sich die datei schon das könnte wieder minimieren fekters braucht man auch nicht mehr und wir sehen dass farbe kommt passt schon mal natürlich hier fehlt noch alles weil hier haben wir noch nicht sein gegeben zwischen den ball tags das kommt eben jetzt aber das farbig und der titel die passen schon mal so und dann fangen wir haben mit dem html code zwischen dem body attack schaue mir hier noch mal auf unsere fertig seite da fangen wir natürlich an mit einer h1 denn das ist natürlich die haupt überschrift die konnte in 1 h1 10 1 also schreibe ich vereins unterschreibe ich hinein die vorher wäre dann gehe ich gleich in die nächste zeile unter stell mir das hier das hier das ist in einem pack drinnen da mache ich mir ein pack und treppen ein inhaltsverzeichnis dann gehen wir in die nächste zeile und jetzt machen uns dieser liste was nehmen wir für einen tag den url oder den url tag erinnern uns ja ul war für ordert liest und ul für an ordert liest wir sehen hier 123 als erstens zweitens drittens das heißt das ist keine anordnung ist sondern eine ordert ist das heißt wir nehmen den alltag hat das jetzt habe ich hier drauf gedrückt das brauchen nicht also das ist eine whitelist und deswegen nehmen wir den alltag wo ich drücke der enter-taste wunderbar und jetzt fangen wir an mit den ex hier das sind ja ein bisschen speziell dann wenn ich hier draufklicken dann springt mir ja der da nach unten ja das heißt da braucht man dann auch noch die etex dazwischen und das schauen wir uns jetzt an wie man das machen zuerst macht man den electric die enter taste und jetzt zwischen dem öffnenden und schließenden elatec da bin ich jetzt schon drinnen danach mit einen ethik also ich schreibe das checkt visual studio kurt und schlagt mir das wieder vor ich drück die enter taste und jetzt haben wir hier zwischen dem öffnenden und schließenden eltec haben wir jetzt den e tec trennen also haben jetzt öffnenden und schließenden etec ja und da kann ich jetzt wieder was hineinschreiben ich schreibe jetzt fahrzeuge weil da steht der fahrzeuge fahrzeuge und jetzt muss ich dann natürlich im treff attribut auch noch etwas einen wert hin entscheiden und zwar die die wir dann nachher vergeben wollen und weil es sinn macht denn ich die ja die dann fahrzeuge das heißt die schreib hashtag fahrzeuge und ich drücke kurz die steuerung b taste damit wir mehr platz haben schon besser aus und jetzt gehen wir in die nächste zeile erstellen uns wieder eine leiter genau und auch hier stelle ich mir einen hektischen alltags und da schreibe ich jetzt zwischen den text schreibe ich geräte hinein ja und das ist erst der zweite punkt und image attribut da schreibe ich wieder ein hashtag und jetzt schreibe ich aber nicht geräte weil umlaute markt der browser bei den allerdings nicht da schreibe ich die räte weil unseren scheiß das brauchen wir bei denen dies nicht dann macht man ja oder ein nein keine kernöl candy und so weiter so geräte dann gehen wir in die nächste zeile da machen wir wieder eine leiter und da machen wir jetzt das mit der mannschaft hier das heißt wir machen wieder in attack und da schreiben jetzt hinein mannschaft zwischen dem öffnete nun schließen und im treff attribut da könnten wir jetzt mannschaft schreiben aber ich will euch zeigen dass das metall ja egal ist zur erinnerung das schreibe ich jetzt hoch wichtig ist nur dass wir nach hat dann die ja die ho ho ho vergeben aber schauen wir uns gleich an so was kommt als nächstes als nächstes kommt diese linie hier diese horizontale linie wie machen wir die überlegt kurz wieder wir machen die mit ein paar ärzte ja wir können es kurz mal speichern dann aktualisieren wir hier ja schon mal nicht so schlecht aus ja gut wie geht's weiter jetzt kommt dass hier was ist das das ist eine h2 überschrift bevor die kommt mache ich aber noch zwei pr text gehen wenn die nächste zeile auch nur noch ein br tag damit man einfach hier ein bisschen platz haben und jetzt macht man den hat seit 2 unterschreibe ich schon ein fahrzeuge etwas fahrzeuge und natürlich müssen wir jetzt in diesem hat zwei tag auch energie vergeben dann wenn ich da nicht drauf kicker will ich ja dass der browser hierher speckt dh bis gleich und was scheint mir da jetzt hinein ich muss jetzt natürlich dass hinein schreiben was ich hier nach dem hashtag geschrieben hat sondern funktioniert nicht dh ich schreibe hier fahrzeuge wunderbar und dann gehen wir gleich runter und dann machen jetzt das hier den text hier wie macht man ihn richtig mit einem pad das heißt ich schreib und das jetzt nur ein beispiel text er da stellen wir uns jetzt vor da wer irgend ein text der die fahrzeuge beschreibt unterscheiden ist lauwarm und dann sagen wir das sind weiß nicht vielleicht 200 wörter locker 200 super und da drunter machen jetzt diesen zurück nach oben links das heißt wenn ich hier draufklicken also wenn ich hier ein bisschen nach unten scrollen und dann krieg ich ja drauf dann springt der browser nach oben wie machen wir das ja ja das machen wir mit einem g tec unterschreiben wir jetzt hinein zurück nach zeichen und jetzt im etf attribut reicht's mir einfach nur ein hashtag hineinschreiben denn wenn der browser nur den hashtag sieht ohne irgendetwas danach ja wenn er nur denn nur den hashtags sieht dann weiß okay wenn ich hier draufklicken dann da muss einfach nur nach oben zurückspringen besprechen das gehen in die nächste zeile was machen wir jetzt wir machen wieder zwei pr text mit ein bisschen mehr platz ist wir könnten auch drei oder vier beatrix machen ganz egal ist nicht so genau ich mache zwei brt ich finde das passt dann machen wir wieder eine herr 2 denn da kommt jetzt diese überschrift hier hinein das schreiben ist geräte der vergeben auch wenn er die idee ist gleich bereit da haben wir das geschrieben dann gehen in die nächste zeile machen den tag und da haben jetzt offensichtlich ein paar weniger beispiel dass wir schreiben jetzt zum beispiel waren 150 das kommt wahrscheinlich circa hin dann gehen wir noch mal in die nächste zeile erstellen uns wieder den effekt der nach oben führt wir haben ja schon gelernt recht einfach der hashtag und schreiben da wird sich schon vorgeschlagen von dieter so zurück nach oben machen wir wieder ein rufzeichen hier dann gehen wir auch mal in die nächste zeile wieder ein bär tag nochmal ein biotech und dann kommt jetzt die dritte hat sei also wir haben jetzt drei hat zwei überschriften das ist ein jahr zwei das ist ein jahr zeit dafür seine hat sei das heißt wir wieder hart unterscheide ich jetzt mannschaft hinein und was muss ich jetzt machen bei der die überlegt kurz wir haben ja hier oben jetzt herrscht eco geschrieben da muss ich natürlich auch die ja die ho ho ho hier vergeben sonst also hier sonst geht es natürlich nicht das heißt ich schreibe hier wo hinein dann machen wir drunter wieder kritik und wir sehen da das sind jetzt ein paar mehr beispiel gehört da drinnen ich schätze das jetzt mal auf 300 lorbeeren 300 wunderbar dann könne man auch einmal in die nächste zeile gehen machen noch mal der tag wieder mit dem hashtag weil das sollte wieder zurück nach oben gehen und wir schreiben zurück nach oben auch noch das rufzeichen und wir speichern jetzt mal und dann gehen wir hier auf unsere jetzt erstellt der seite aktualisieren warum dann haben wir die ganze seite hier wir können das kurz vergleichen schaut das ungefähr gleich aus mit der originalseite das schaut ungefähr gleich aus wunderbar das ist jetzt die seite die wir gerade erstellt haben und wir probieren jetzt links ob sie funktionieren ich klicke auf fahrzeuge springt er mir zu fahrzeuge ich klick auf zurück nach oben springen danach zurück nach oben wenn ich auf geräte clique geht dazu den geräten hier der zurück nach oben link funktioniert auch ich klicke auf mannschaft natürlich rolle jetzt nicht weiter nach unter warum nicht weil wir hier keinen content wir haben deswegen scrollt nur bis hierher weil es ja hier nicht weiter geht und wenn ich hier draufklicken zurück nach oben das funktioniert auch wunderbar dann haben wir jetzt schon unsere erste kleine beispiel seite erstellt und ich hoffe ja selber probiert und hatte erfolg damit wenn nicht dann ja dann wird nicht na dann sehen wir uns sowieso im nächsten video wieder jetzt schauen wir uns spezielle links sein was meine ich mit speziellen links ja schauen was uns an also ich mal hier zwischen dem politics den ethik- und image attribut wahrscheinlich jetzt stell doppelpunkt und dann eine telefonnummer zb 06.09.11 der 30 mal keine ahnung ob es die nummer gibt ist es irgendeine nummer ich kann übrigens auch statt dem 0 hier könnte ich auch eine länder vor bald schreiben zum beispiel bloß rentiert sich jetzt die länder vor wald für österreich und jetzt schreibt man zwischen den öffnenden und schließenden es auch hinein irgendeine nummer und wenn wir das speichern und aktualisieren dann zimmer das jetzt hier und wenn ich jetzt hier draufklicken was passiert dann probiert was ich drauf und jetzt fragt mich der browser ob ich eine app habe zum telefonieren das fragt mich der browser jetzt nur weil ich vor der nummer hier ein teil doppelpunkt ihn geschrieben habe hätte ich jetzt eine app zum telefonieren dann würde der browser dieser nummer hier nach dem teller doppelpunkt anrufen der text hier der zwischen dem öffnenden schießen weg steht das ist natürlich wieder scheißegal für die funktion wichtig ist dieses teil doppelt punkt und dann eben die telefonnummer die man hier ein gibt so weit so klar wenn ich jetzt statt dem tell doppelpunkt mittelpunkt doppelpunkt und jetzt statt der nummer hier eine e-mailadresse so zu erkennen neugebauer e mail gmail gmail.com wenn man jetzt das so hin schreiben dann spreche ich wieder dann aktualisiere ich hier ändert sich natürlich nichts um nicht nur weil wir hier ja immer noch irgendeine nummer drinstehen haben als text deswegen wird das jahr angezeigt aber wenn ich jetzt hier draufklicken was passiert dann zack dann möchte der browser mensch standard mail programm öffnen ich habe jetzt hier noch kleines ausgewählt aber hätte ich eine stadt oder das öffnen und als empfänger würde gleich die e mail auswählen die man nach dem mail to doppelpunkt ihn geschrieben hat also diese e mail in diesem fall die würde dann als empfänger auswählen und das macht der browser immer nur weil hier das bild tu doppelpunkt sieht wir merken uns also wenn wir schreiben doppelpunkt und dann eine telefonnummer weiß der browser dass er daneben die telefonnummer die nach dem doppelpunkt steht anrufen soll sobald man auf den link klickt wenn eben einen doppelpunkt da steht dann weiß der browser das als das standard e mail programm öffnen soll sobald man dem dann auf den link drauf klickt unterhaltsempfänger gibt eben dann diese e mail adresse hier ein die nach dem medi tut doppelpunkt steht denn es stattdessen hier steht versteckt ist der beste browser dass es sich hier um energie handelt wo eben hinüber sollte man auf den link klickt und wenn ihr zur letzten fahrt drin stehen würde oder eine url dann da ist der browser automatisch das eben zu dieser tat gehen sollte bald mal auf den link klickt oder eben zu dieser url sobald man auf den link klickt so funktioniert das ganze mit dann links in html jo leute zwischen den öffnenden und schließenden tag da kann ich viel mehr hinein schreiben als bloß einfachen text ich kann zum beispiel auch einen heinz thek oder so ihn ein treffen also machen wir es erstmal einen tag älter und das schreiben jetzt im etf attribut das schreibe ich jetzt einfach https doppelpunkt dann zu zwei schrägstrich www.zigbee.org noch mal einen schreck schicht das heißt das ist jetzt einfach der link ja das kennen wir schon images attribut und da schreibe ich jetzt noch target ist gleich unterstrich blenk damit dann in einem neuen tab geöffnet wird und jetzt zwischen dem öffnenden und schließenden etech da hab ich ja gesagt da können wir jetzt nicht nur normalen text hinein schreiben sondern auch alle möglichen sachen zweifel auch einen anderen text apple einen h1 tag geschaut mal heinz die enter-taste jetzt für visual studio code ja schon automatisch den öffnenden und schließenden heißt eck ein und hier kann ich jetzt eben bescheiden zweifel als wir noch jünger waren standen wir uns wenn wir das speichern und dann aktualisieren dann ziehen wir jetzt der text hat die formatierung vom h1 tag und noch zusätzlich die formatierung von dem tag also die farbe und die unterstreichung kommen vom je tag die größe und die dicke von der schrift hier die kommt dann vom feinsten es ist also beides kombiniert und natürlich wenn ich jetzt hier draufklicken dann werde ich nicht auf die wikipedia seite weitergeleitet weil ich hier natürlich ein tippfehler habe ich muss ein wie hier löschen das ist zu viel ja da sprechen wir noch mal das heißt wir aktualisieren hier wieder wenn ich jetzt drauf klicken schwupps dann funktioniert jetzt werde ich auf wikipedia weitergeleitet das heißt es ist jetzt die gesamte überschrift anklickbar als link denn alles was zwischen dem öffnenden und schließenden ethik ist in dem fall ist dass eben jetzt der einst hier alles was hier zwischen öffnenden und schließenden tätig ist ist als link anklickt natürlich macht das jetzt keinen sinn also eine h1 überschrift mit einem link zu versehen dass sie immer vermutlich niemals machen aber das war ja auch nur ein beispiel zu veranschaulichen genauso wie das nächste ich kann zum beispiel auch eine ganze liste hier zwischen öffnenden und schließenden ethik geben so zum beispiel also schickt euch jetzt nicht ich habe einfach zwischen dem öffneten und dem schließenden etat kein ul tag gemacht und in dem ul tag dann noch drei tech szene und wenn ich das jetzt speicher und dann aktualisiert und ist immer das hier und jetzt ist eben die gesamte liste anklickbar als linker weil er alles zwischen dem öffneten und dem schließenden ethik ist das heißt ich kann hier draufklicken kommt zu wikipedia ich kann hier draufklicken kommt zu wikipedia ich kann hier draufklicken ich komme immer ist zu diesem link den ich hier hinein geschrieben habe ich könnte hier natürlich auch eine id eingeben oder was auch immer ja ein teil doppelpunkt ein milito doppelpunkt oder eine datei tat das ist egal ja das funktioniert genauso wie das jetzt immer gelernt haben und halt zwischen öffnenden und schließenden ethik kann ich auch andere text noch hineinschreiben und sonstiges und so funktioniert das ganze das zeige ich euch im video nur zum verständnis damit ihr ein gefühl dafür bekommt ein feeling dafür bekommt was mit html alles anstellen kann und wie es funktioniert ich sage ich noch etwas nur damit wirklich klar wird zum verständnis ich mache hier noch ein pack zum beispiel und schreibe slam 300 firmen 300 tag und wenn ich das speicher und dann hier aktuell ist hier dann haben wir hier noch den tag und der ist ja auch noch hier sehen wir ja der ist ja zwischen dem schließenden und dem öffnenden ethik hier das heißt hier haben wir jetzt den alltag mit den drei takes und auch der pi tag mit den 300 beispiel wörtern der befindet sich ebenfalls auch zwischen den öffnenden und schließenden ethik deswegen ist auch dieser text hier im pack anklickbares link das heißt ich kann es hier zum beispiel hier draufklicken und kommen zu wikipedia ich kann hier draufklicken kann sowie gibt jeder ich kann immer noch hier draufklicken kommen auch wieder zu wikipedia so funktioniert das ganze halli hallo ihr habt euch sicher schon gefragt wie man in html bilder anzeigen kann und genau das klären wir in diesem video für bilder gibt es natürlich auch einen speziellen html tag und zwar den image heckmann schreibt aber nicht image also man schreibt nicht image sondern man schreibt img strikt enter taste und da spuckt mir visual studio coach schon den imagetrac aus und wir sehen dass dieser keinen schließenden tag hat und da stehen zwei dinge die wir noch nie zuvor gesehen haben nämlich dass sowas attribut und das alter tribut das source attribut das sagt dem browser wo das image liegt also hier kommt dann der datei kathrein wo das image ist ähnlich wie beim treff attribut beim link der alltag hingegen der ist für suchmaschinen relevant damit diese wissen was auf dem bild zu sehen sein soll außerdem ist der alltag hilfreich für screenreader [Musik] [Musik] alles klar wir wissen jetzt also für das source attribut brauchen und für was das alter tribut da ist dann machen wir gleich mal ein beispiel ich gehe wieder auf wechsels und hole mir ein paar bilder zum ausprobieren also ich mache einen neuen tab geben die google-suche pixel sein und dann gehe ich gleich wieder hier auf die seite da bekommen wir gratis bilder und falls ja jetzt nicht exakt die gleichen bilder findet wie ich dann schreckt euch nicht ihr habt zwei möglichkeiten entweder ihr nehmt einfach ähnliche bilder wie ich oder ihr schaut zu den kursmaterialien da findet hier die bilder die ich jetzt auswähle such mal nach zb wald ja und jetzt machen und das kurz größter damit etwas besser sehen klicken wir gleich auf dieses bild hier da klicke ich jetzt wieder auf kostenloser download und wir wählen jetzt die kleine größe hier aus ich klicke auf kostenloser download schwupps da wird schon runter geladen ich mache das zu ich klicke nochmal hier drauf und klicke jetzt hier auf die größte größer als in dem fall auf original auf die größte größe wieder kostenloser download auch das wird runtergeladen das heißt wir haben jetzt das gleiche bild einmal in einer kleinen größe einmal in einer großen größe und jetzt suchen wir noch ein drittes bild als ein anderes bild mauch nur dass dazu welches nehme man auch schaut gut aus da kriegt man auch wieder auf kostenlose download und wir wählen auch klein aus ja kostenloser download jetzt haben wir die drei bilder dann gelodert wunderbar jetzt brauche ich den browser wieder kleiner und dann gehen wir mal in unserem download ordner downloads hier habe ich die drei bilder und jetzt gebe ich den bildern allen noch einen anderen dateinamen damit ich mich dann besser auskenne der dateiname ist für die funktion natürlich vollkommen egal ich könnte die dateinamen auch so lassen hier das ist wirklich egal es geht nur darum dass ich mich dann besser auskenne wenn ich die bilder auswählen und deshalb gebe ich denen jetzt einen anwender teilnahm das große bild dass sie hier in der datei größe das ist also dieses hier da gehe ich jetzt auf umbenennen und das nenne ich jetzt einfach ganz spektakulär das gros große waldbild das kleine bild sah mit dem wald das nenne ich das kleine wald wild und dass da das war ja das andere bild und ja das nenne ich einfach das andere bild sehr gehört jetzt markiere ich mir die drei schweizer mix aus gehe in unseren website ordner hier stelle ich mir noch einen neuen ordner damit es etwas übersichtlicher ist möchte ich die bilder nehmen nicht in einen eigenen ordner geben als er nämlich den ordner bilder hier gehe ich hin eindrücke steuerung vor jetzt habe ich die treppe hier drinnen dann öffnen wir den code editor wieder und dem browser jacksons körper zu machen und dann können wir schon starten jetzt können wir hier in suez attribut reingehen und da mache ich einen punkt und einen schrägstrich also ein relativer datei pfad und hier wird es schon vorgeschlagen geordnet bilder und da will ich jetzt aus dass kleine wald bild das hier und jetzt schreibe ich hier in den alltag das schreibe ich noch in einen wald mit bäumen und wenn ich das jetzt speicher und dann aktualisieren wir hier mal hakt dann wird mir das bild schon im browser angezeigt was passiert jetzt eigentlich wenn hier der tat falsch ist also wenn ich hier zum beispiel sagen ich hab mich noch verliebt und habe jeden noch ein buchstaben dann findet der browser das bild nicht speichern nochmal und aktualisieren aha jetzt wird uns hier der text angezeigt der hier im alter tribut drinnen steht der alt text hilft also nicht nur suchmaschinen und screen reader sondern er wird auch angezeigt falls das bild nicht geladen werden kann ja ändern wir den namen der datei wieder so damit richtig ist jetzt findet der brost die datei wieder super und jetzt können wir uns noch anschauen was passiert wenn ich den alltag leer lassen also ich löschte es hier raus es ist alltag leer speicher nochmal und aktuell ist hier immer nichts passiert es hat sich nichts verändert das heißt wenn man aus faulheit gründen den alltag nicht ausfüllt dann passiert nichts ich kann sogar das attribut hier auch auslöschen ich lösche das raus speicher mal aktualisiert es passiert nichts das bild wird immer noch ganz normal angezeigt es funktioniert also auch ohne den alttag nur suchmaschinen und screenreader haben dann halt ein problem wenn ich also auf suchmaschinen und screenreader scheiße dann brauche ich keinen alltag aber wir sind gute webentwickler wir scheißen weder auf suchmaschinen noch als screenreader und deshalb schreiben wir bei den bildern immer einen text ins alter tribut also gehe ich wieder hin schreibe alt ist gleich anführungszeichen wald mit bäumen speicher noch mal praktisch hier aber es ändert sich eh nix aber das bild hat jetzt einen alt text wunderbar so und jetzt machen wir noch diesem image tech hier machen ja eine leerzeile und mache einen weiteren image source attribut da jeder punkt schrägstrich die in den bilder ordner und wähle jetzt das andere bild aus und im alter tribut da schreiben wir jetzt hinein ein schöner wald dann gehen wir noch in die nächste zeile machen noch ein image tag und ich gehe wieder hier in dem viele ordner und da wähle ich jetzt das große wandbild aus und der ist alter tribut hier schreibe ich wieder wald mit bäumen ein sprecher mal und aktualisieren den browser und jetzt können wir hier nach unten scrollen und sogar hier auf die seite ja denn die bilder passen sich nicht an die größe des browsers an sie werden standardmäßig in ihrer originalgröße angezeigt und hier sind sie jetzt im untereinander aber wenn wir jetzt im browser hier größer machen dann schaut das ganz schön komisch es denn jetzt sind diese zwei bilder hier nebeneinander und das hier ist noch immer darunter das ist so weil bilder nicht automatisch in einer neuen zeile anfangen erinnert euch die überschriften tax und die checks werden ja standardmäßig in einer eigenen zelle angezeigt bilder aber nicht bilder werden nebeneinander angezeigt wenn sie genügend platz haben das große bild hier unten steht nur hier unten weil es da rechts nicht mehr genügend platz hat um angezeigt zu werden außerdem ziehen wir eben dass die bilder in originalgröße angezeigt werden also das ist ja das gleiche bild wie das da aber das ist viel größer als taster und das ist eben so weil hier das das bild was wir hier gespeichert haben das hat ja viel mehr pixel als dieses bild da oben deswegen wird dieses hier auch größer angezeigt das heißt also wenn zum beispiel das bild 400 x 400 pixel groß ist dann wird es im browser auch mit 400 x 400 pixel dargestellt wenn es zum beispiel ich sage jetzt irgendwas also wenn es zum beispiel 2000 3000 800 pixel groß ist dann wird es im browser mit 2.000 x 3.000 800 pixel angezeigt aber natürlich gibt es möglichkeiten den browser zu sagen wie groß er das bild anzeigen soll und im nächsten video da schauen wir uns an wie man das macht wie kann man die größe von einem bild ändern gute frage ich habe hier jetzt nur mehr einen image tech und da habe ich eben noch das andere bild drinnen also das sehen wir ja hier und da zeige ich euch jetzt eben wie man die größe ändern kann für die größe bei bildern da gibt es das wie und das hält attribut also ich kann es eigentlich nicola sprechen aber wie viel englisch für weiter und hält eigentlich für höhe ja wir gehen jetzt hier in den emails tag hinein es ist egal wo wir ihn eingehen wir könnten hier hinein gehen und dann schreibt man das müssen natürlich richtig schreiben anführungszeichen wieder unterschreiben wir ziehen 100 pixel sprechen wir das neue da man hier aktualisieren jetzt ist das bild also ganz klein es ist nämlich jetzt 100 pixel weit und hier ja hier kann ich jede beliebige zahl hineinschreiben ich könnte zum beispiel auch schreiben weil sie zum beispiel 7342 pixar und wenn man diese speichern und dann aktualisieren dann ist das bild komplett großer das hat jetzt eine weite von 7342 pixel machen einen browser größer es ist aber hier ist jetzt komplett verschoben ich kann hier noch nach rechts scrollen ist es eben dann das ganze bild es ist jetzt eben 7300 240 pixel groß aber natürlich ist es wie gesagt komplett verschoben weil die auflösung des original bis sie ist ja nicht so hoch deswegen kannst der brasilianer der kann eine zahl waren der browser deswegen gehören das nicht in einer besseren auflösung anzeigen ja das heißt hier können wir zwar auch eine größere anzahl an pixel hineinschreiben als das bild eigentlich hat ja das funktioniert aber es ist ja dann verschwommen logisch und schaut ihm ziemlich schlau sondern so verschwommen ist so umschreiben bedeutet schreibt man 300 hinein da man auch noch aktualisieren als bass wieder das bild ist jetzt genau 300 pixel weit und die höhe die wir leben hier automatisch passend dazu gerechnet wenn ich jetzt also wenn ich hier nichts hinein schreibe das ist speicher und aktualisiert dann ist das eben das ist die originalgröße und jetzt eben in der originalgröße angezeigt wenn ich jetzt hier einen wert hineinschreiben zum beispiel 300 pixel das speicher- und aktualisiert dann heißt es jetzt 300 pixel weiter und die höhe wird immer automatisch passend dazu gerechnet wenn ich jetzt die höhe auch noch festlegen will dann kann ich hier zweifellos schreiben hält ist gleich ist gleich und da sagen wir was sagen wir sagen 950 pixel speichert aus wieder und aktualisiert jetzt ist es 300 pixel weit und 150 pixel hoch aber es ist auch etwas verzerrt denn das originalbild hat die andere maße beziehungsweise das originalbild hat ein anderes verhältnis zwischen höhe und weiter und um es deutlicher zu zeigen schreibt man bei head schreibt schreiben auf 500 hinein 500 dann noch nur speichern js komplett verzerrt das ist ebenso weil die original masse des bildes beziehungsweise eben das verhältnis von höhe und weiter nicht mehr mit den hier fix eingegebenen werden hier wein steht wenn ich jetzt zum beispiel die will frösche und dann nochmal speichern und aktualisieren dann wird es die wird automatisch dazu gerechnet das heißt jetzt hat das bild eine höhe von 500 pixel ja und die wird wird automatisch dazu gerechnet das heißt das ist jetzt 500 pixel hoch und die weiter wird automatisch dazu gerechnet weil wir die weiter hier nicht extra angegeben haben wenn ich jetzt wieder liev schreiber ist gleich 100 pixel das pixel hier ist übrigens auch wichtig also ich kann hier nicht schreiben pixel oder sowas muss hessen das ist eben für pixel wenn ich das jetzt aktualisiert passiert nichts darum weil ich das hier falsch geschrieben habe so wenn man sie ist jetzt speicher aktualisieren jetzt ziehen war es ist wieder komplett verzerrt es ist 100 pixel weit 500 pixel hoch das ist natürlich komplett verzerrt übrigens die reihenfolge der a-tec punkte hier also dass hedwig source und alt das sind ja alles attribute ja und die reihenfolge ist natürlich komplett egal ja ich könnte das als attribut ja das schneide ich jetzt das könnte ich auch hier am anfang ein schreiben das attribut ihr könnt ich zum beispiel auch hier am schluss hin schreiben wenn ich wieder speicher und aktualisiert funktioniert immer noch genau gleich wichtig ist nur dass hier nach dem decknamen ja und vor dem größer zeichen sind ja also irgendwo hier dazwischen müssen die attribute eben stehen und falls ihr euch jetzt fragt wo ich bei den bildern hier immer einen eigenen bilder ordner machen muss nein natürlich nicht ich könnte die bilder hier ich könnte die bilder hier auch hier direkt in den ordner hineingeben es würde natürlich auch funktionieren nur wenn ich eben mehrere bilder habe dann ist es übersichtlicher wenn ich die alle in einen eigenen ordner geber wie eben hier bilder ordner und dann könnte ich auch anders nennen ich könnte noch als patienten nennen das ist für die funktion wirklich egal ihr werdet euch jetzt denken ja okay wenn das weiß ich ja aber es gibt immer wirklich tun sie doch vielleicht ein mittelschweres und zeigt ist einfach es palatschinken so wenn wir das jetzt hier aktualisieren dann geht es natürlich nicht warum geht es nicht weil wir hier noch den bild ordnern gegeben haben das müssen wir als umändern zu sos palatschinken mit mir schon vorgeschlagen und dann muss ich noch neu ist dass bilder auswählen so wenn ich dieses schwächer und wieder aktualisiert am funktioniert wieder es steht er wieder der ordner name über ein ausgezeichnet nun wissen wir also wie man bilder in html anzeigen kann und sind somit fit für die kommenden challenges ich zeige euch jetzt den button tag in html und zwar geht er ganz einfach ich schreibe hier einfach button drückt die enter taste und schon spuckt mir visual studio code den button tag hier und jetzt kann ich hier dazwischen irgend etwas hineinschreiben zum beispiel klick mich wenn ich das speicher- und dann aktuell ist hier dann haben wir hier schon den button stehen das ist also die standard formatierung für buttons in html wenn ich jetzt drauf klicken naja dann passiert nichts ich sehe er ändert etwas die farbe sobald ich mit der maus darüber fahre aber es passiert nichts wenn ich drauf klicken was wenn ich jetzt will dass der user beim klick auf den button auf irgendeiner seite weitergeleitet wird ja dann kann ich den text innerhalb des buttons jahr mit einem link versehen also mit einem i tech das heißt ich lösche das raus schreiben drückte die enter-taste jetzt habe ich den ethik- hier jetzt müssen wir für das attribut natürlich hier noch ein link haben wo der button an hinführen soll gehen wir sagen wir gehen auf schalke 04 sucht man noch was retten ja genau dass man ihr berlin wunderbar da gehen wir hinein holen uns die url die habe ich jetzt kopiert und die fügt man hier im etf attribut 1 und jetzt schaut mal hier noch target ist gleich unterstrich lenkt damit es dann in einem neuen tab geöffnet wird und hier schreibt man zwischen den text schrieb man hier klicken kurzzeichen das speichern und das aktualisieren und jetzt ziehen wir schon der text ist wieder unterstrichen weil das ist ja die standard formatierung für links er hat auch die farbe die für links eben standardmäßig hinterlegt ist und wenn wir es da draufklicken schwupps dann kommen wir zur seite von tasmania berlin aber schaut wenn ich jetzt hier draufklicken am rand da tut sich nix nur wenn ich hier draufklicken auf den text aber wenn ich hier irgendwo am rand drauf klickt dann passiert nichts warum ist das so na ja das ist so weil nur der text hier klicken zwischen den beiden er tags hier steht der button tag hier der steht ja nicht zwischen den beiden etex und zählt somit auch nicht zum link dazu das heißt nur der text hier klicken befindet sich in den beiden etex aber das was hier rundherum ist dann nicht mehr zum text das ist vom button und der ist nicht in den etex darum geht hier der link nicht so einfach ist das wenn ich jetzt 12 heute warten euro chefs wollten wenn ich jetzt zum beispiel will dass der gesamte button verlinkt ist dann schreibe ich den button ebenfalls zwischen die etex also jetzt ist der ethik hier ganz außen also öffnende und schließende etech dazwischen befindet sich dann der öffnete und schließen debatten tag und dazwischen eben dann hier klicken und wenn wir das speichern und aktualisieren dann sehen wir dass jetzt der text nicht mehr unterstrichen ist warum ist ja nicht mehr unterstrichen ja weil jetzt die button formatierung wichtiger ist als die e tec formatierung denn der text steht direkt im button zeigt drinnen das heißt der button tag hier ist im text hier näher als der etech deshalb zählt die button formatierung jetzt mehr als die ethik formation im ethik ist der text standardmäßig unterstrichen und hat so eine lila farbe im button tag ist da aber standardmäßig nicht unterstrichen und hat die farbe schwarz und da der button tag eben dem text näher ist zählt primär die standard formatierung des button tax und die überschreibt quasi jetzt die formatierung von etec deshalb ist der text hier nicht mehr unterstrichen und hat die farbe schwarz der link geht dabei immer noch das heißt wenn wir jetzt hier draufklicken dann werde ich auf die seite von tasmania berlin weitergeleitet und ich kann auch hier jetzt am rand draufklicken egal wo ich hier draufklicken ich werde jetzt immer auf die seite weitergeleitet die ich hier im etf attribut drinnen habe in diesem video müsste jetzt nicht mitmachen ich zeige euch nur schnell etwas bezüglich des button tags und bezüglich des image text denn sowohl der button tag als auch der im idg sangen keine neue zeile hier stehen sie jetzt untereinander also hier das ist ja der button mit dem krieg mit text und das hier ist das image und die stehen jetzt eben untereinander aber eben nur weil sich hier keinen platz nebeneinander haben wenn ich jetzt den browser hier größer machen und sie nun genügend platz nebeneinander haben trotz dann stehen sie hier in der gleichen zeile die zeile ist jetzt halt ziemlich hoch wegen dem image aber grundsätzlich stehen sie nebeneinander und nur zum vorzeigen ich kann jetzt hier vor den button kann ich auch noch zum beispiel schreiben blablabla so irgendein beispiel text dann schreibt man nach den button stellt malla und nach dem image tag schreibt man auch hahaha so wenn wir das speichern und dann hier aktualisieren dann steht das jetzt alles in einer wurst es ist eine ziemlich hohe wurscht wegen dem match ja aber grundsätzlich steht alles in einer zeile wenn eben genügend platz da ist wenn jetzt nicht genügend platz da ist das wenn ich den browser zum beispiel etwas kleiner mache dann schaut es so aus das heißt was nebeneinander platz hat steht noch immer in der gleichen zeile und das nächste übt dann eben in die nächste zeile wenn es da kein platz mehr hat in dem fall ist es eben das image und das hh hat hier noch platz daneben bei mir darum steht es hier noch hinten dran würde ich jetzt wollen das hier dann eine leerzeile steht dann muss ich hier ist hineingehen macht den br tag zum beispiel wenn ich das sprechen und aktualisiert dann hilft mir das hh in die nächste zeile ja warum das du wirst das eben der button tag unter image tech und auch ein paar weitere text eben keine neue zeile beginnen das klären wir in einem späteren video das ist jetzt noch nicht wichtig und das würde euch auch verlieren glaubt mir fürs erste ist es nun mal wichtig dass wir uns einfach nur merken dass der button tag unter image tag eine neue zeile beginnen wie eben auch ein paar andere tags die wir noch kennenlernen oder eben auch schon kennengelernt haben denn der etech zum beispiel beginnt ja auch keine neue zähne ja aber wie gesagt für uns reicht das mal wir müssen das noch nicht verstehen das klären wir später mal wir sehen uns im nächsten video tja was größer wir machen jetzt unser nächstes projekt und zwar werden wir diese seite hier erstellen es geht hier um einen kleinen möbelhersteller da eben jetzt eine eigene website haben will und ich weiß ich weiß sicher auch noch recht schätze aus aber zuschauer zumindest nicht mehr ganz so schätze aus wie die seite die wir ganz am anfang gemacht haben denn jetzt haben wir zumindest schon bilde dabei das heißt zu arbeiten wir uns eben sukzessive weiter so lange bis wir dann seiten darstellen können die zumindest halbwegs genau ausschauen ja und wir gehen jetzt mal die seite gemeinsam durch und dann möchte ich dass er seit er selbst nach kohle ihr habt in den kursmaterialien die möglichkeit dass er den fertigen ordner für die seite herunterladen und da sind dann die bilder drinnen die ich verwendet habe und außerdem hatte dort auch den gesamten html code für die einzelnen seiten hier drinnen am besten ist es also wenn ihr euch den gesamten ort nach unter ladet dann öffnet ihr die fertige seite damit sie hier so wie bei mir auf der rechten hälfte des bildschirms erscheint und links öffnet ihr dann der code editor sowie ich hier mit einem neuen ordner den könnte nennen wie ihr wollt ich habe eines firmenseite genannt da stellt ihr euch eine neue datei zum beispiel in der seestadt html und in diese datei schreibt er den html-code ein wo er glaubt dass das der richtige für diese seite hier ist also ihr versucht hier dann die seite hier rechts nachzubauen und natürlich könnt ihr euch diese datei dann hier in einem neuen tab öffnen und dann könnte die dateien vergleichen sie gleich aussehen und falls ihr etwas nicht schafft dann schafft euch nicht daran weil im nächsten video machen wir das ganze dann gemeinsam aber ich möchte eben dass sie zuerst probiert die seite selbst zu boden ja aber genug gelabert schauen wir uns die seite mal an also wir haben hier oben natürlich entwickeln und den titel und dann haben wir hier eine überschrift dann unser firmenlogo und eine navigation und darunter haben wir dann die vorstellung unseres teams aus eine überschrift wider dann so ein beispiel text dann kommen wir hier zu den einzelnen mitarbeiter erinnern also wir haben ja immer eine überschrift mit dem namen dann die funktion der mitarbeiterin und dann ein foto davon dass da das ist übrigens kennt das ist einfach nur ein text der unterstrichen ist ja aber kein link gut die susanne ist als regierungschefin der rüdiger als unser technischer leiter dann haben wir noch mitarbeiter als umberto und co das ist und werth und co das sind die mitarbeiter dann haben auch menschen betreuerin ein lehrlingsausbildner und wir haben zwei lehrlinge die nina unter jürgen und hier unten haben wir so einen kontakt button und wenn man hier draufklicken dann kommen wir zur kontaktseite die sollte natürlich auch erstellen also macht hier im code editor noch eine weitere datei und dienen zb kontaktpunkt html könnte auch anders nennen ich sage zum beispiel kontaktpunkt html und da versucht ihr dann eben dieser seite hier nachzubauen und diese seite die hat eben ein etwas angepassten titel hier oben also ist ja noch so ein strich und dann steht da kontakt und dann haben wir hier auch noch eine überschrift dann haben wir noch eine überschrift und hier ein foto und wenn wir hier auf das foto beziehungsweise eben auf das bild hier draufklicken dann fragte uns der browser sowie eine eppan zum telefonieren das heißt auf diesem bild hier ist eben eine nummer hinterlegt welche nummer jeder nehmen das natürlich egal weil es ist ja nur ein beispiel ja hier unten haben wir dann noch so ein e mail button und wenn wir hier draufklicken dann wird der browser das e mail programm das heißt auf dem e mail button da ist eine bestimmte e mail hinterlegt und auch diese könnte natürlich frei wählen denn es ist ja eben nur ein beispiel ja und da drunter hier damals noch so ein link und der für uns natürlich zur startseite alles klar dann schauen wir uns jetzt hier die navigation auch etwas genauer an also wir haben hier drei punkte und zwar unsere produkte und zu unternehmen und datenschutzerklärung wenn wir jetzt zum beispiel auf unsere produkte klicken dann kommen wir auf die unsere produkte seite und natürlich sollte auch diese seite hier nach wache also daher stellt ihr hier wieder eine neue datei die nehmen die dann zum beispiel unsere produkte punkt html und dafür suchte dann dieser seite hier nachzubauen schauen wir uns das genau an also die hat wieder natürlich ein etwas angepassten titel da steht jetzt produkte da oben die navigation ist wieder gleich wie auf der startseite und da haben wir hier unten daneben drei produktkategorien also sofas sessel und lampen und ganz unten steht wieder der kontakt ihre uns button wenn wir hier draufklicken kommen wir wieder zur kontaktseite arbeit wieder zurück zur startseite wieder zu unserer produkte so schauen wir uns das noch ein bisschen genauer an denn da gibt es noch etwas wenn ich jetzt hier auf das bild hier zurückblicke dann werde ich auf eine wikipedia seite weitergeleitet in einem neuen tab und auf dieser seite geht es eben um so was das heißt also dieser link hinterlegt wenn ich jetzt auf das bild mit dem sessel hier klicken dann werde ich in einem neuen tab auf eine wikipedia seite weitergeleitet wo es ums essen geht und wenn ich auf dieses bild hier clique mit den lampen dann werde ich natürlich auf eine wikipedia seite weitergeleitet wo es um lampen geht das heißt bei allen drei bildern hier ist ein link hinterlegt der zu einer gewissen seite führt in unserem fall ist es halt eine wikipedia seite ach ja und bevor ich es vergesse wenn wir hier auf das logo hier klicken hier oben dann kommen wir zurück auf die startseite das heißt beim logo ist ein link hinterlegt der zur startseite führt ja und das war auch schon alles was wir zur produktseite wissen müssen wenn wir jetzt in der navigation hier auf unser unternehmen klicken dann kommen wir auf dieser seite hier das ist eben unser unternehmen die zeit ist auch recht einfach hier also der titel oben ist wieder etwas angepasst da steht jetzt unternehmen die navigation ist wieder gleich das heißt wenn wir wieder auf das logo klicken kommen wir wieder zurück zur startseite gehen wir wieder auf die unternehmensseite dann haben wir hier eine überschrift an so ein foto das ist eben unsere firma hier haben ein beispiel text dann haben wir dann noch eine überschrift wieder ein foto und wieder ein text und hier in diesem text da geht es ihm darum dass mitarbeiter innen ihre menschen mitnehmen können in die arbeit also wir können sie kurz lesen unsere mitarbeiter müssen ihre mensch nicht alleine zu hause lassen sie können sie auch gerne in die arbeit mitbringen und sie während der arbeitszeit unserer menschen betreuerin birgit übergeben wo sie professionell besichtigt werden und wie wir hier schon sehen menschen betreuerin birgit das schaut ja aus wie ein link und ich verrate euch was da sie ist auch ein link dann wenn wir hier draufklicken chuck dann springt der browser auf die startseite direkt zur birgit also hier sind wir auf der startseite und er springt der browser zur birgit tanner hierbei der bei unserer unternehmen auf dieser seite hier draufklicken springt auch die startseite direktor bier geht ja noch mal kurz auf die unternehmensseite mehr gibt es nicht zu sagen hier unten haben wir wieder den kontaktieren und button wenn wir darauf bieten können wir natürlich wieder zur kontaktseite so weit sind jetzt also alles durchgegangen dann können wir wieder aufgehen und fehlt jetzt nur noch eine seite nämlich die datenschutzerklärung also wenn sie hier draufklicken kommen wir zur datenschutzerklärung wie auch bei den anderen seiten ist die navigation gleich derzeit lässt etwas angepasst hier oben hier haben wir nur ein bisschen text ziemlich langweilig einfach ein paar überschriften und nur so ein beispiel text ja hier unten haben wir wieder den kontaktieren uns button und wenn ich hier oben auf das logo krieg kehrt dann kann ich wieder zurück zur startseite und jetzt auch eine letzten vor schluss wenn wir den browser größer machen dann ist es natürlich klar dass der text ja immer über die gesamte weitergeht das schaut natürlich nicht immer gut aus aber ist halt jetzt so weil wir haben ja noch nicht gelernt wie wir so einen text begrenzen können von der fund arbeiter hat das lernen wir erst noch das heißt im großen browser fenster schaut einfach auch ein bisschen beschissen aus also im kern browserfenster aber das ist uns erst mal egal wir werden schon noch lernen wie wir die breite des textes begrenzen können aber alles zu seiner zeit ja und ich möchte jetzt eben dass ihr die seite selber nachbarn und dann falls das nicht schafft vertrags nicht im nächsten video machen das gemeinsam hey leute nachdem er alle brav versucht habt die seite selber nachzubauen werden wir jetzt die seite gemeinsam bauen dann legen wir gleich los ich stelle mir hier an desktop einen neuen ordner denn nenne ich jetzt möbelhersteller und in diesem ordner da mache ich noch einen ordner und den nenne ich bilder also partner villa so jetzt gehe ich in den download ordner dass ich jetzt diesen ordner hier drinnen gehen sollte dir bereits heruntergeladen haben ich schnappe mir hier diesen ordner es aus mit steaks und fügen hier auf den desktop mit steuerung vor ort ein es ist ja hier gelandet machen wenn hierhin nun gehe ich hier in den fertigen möbelhersteller ordner hinein da habe ich auch für ein bilderordner hier sind die ganzen fertig dateien die interessieren uns jetzt aber noch nicht da geben wir jetzt eine pille ordner da kopiere ich mir jetzt die ganzen bilder einfach mit steuerung zu gehen wieder in unseren gerade erstellten möbelhersteller ordner da gehe ich in dem bilder ordner den ich gerade gemacht habe und hier der ist jetzt noch lea füge ich jetzt die ganzen bilder ein das heißt jetzt haben wir schon mal die bilder für unsere seite hier drinnen und können dann zum arbeiten anfangen als nächstes brauchen wir jetzt noch visual studio code das öffnen wir mal da gehen wir jetzt dann auf verhält dann auf oben folder und dann hole ich mir dann gerade erstellten möbelhersteller ordner also gehen wir auf den desktop und dann hier auf möbelhersteller nicht auf möbelhersteller fertig weil das sind ja die fertigen dateien die brauchen wir nicht gebrauchen denn möbelhersteller ordner den wir gerade erstellt haben wo ja noch keine dateien außer die bilder drinnen sind also hier auf ordner auswählen nun gehe ich jetzt in den möbelhersteller fertig ordner als in den fertigen möbelhersteller ordner und da eröffne ich jetzt die startseite im browser also ich klicke einfach doppelt drauf jetzt habe ich ja hier die startseite geöffnet mit dem ganzen html-code hier also es wird ja alles schon angezeigt so wie es sein soll und hier in diesen ordner in dem neu erstellten möglicher stelle ordner da beginne ich jetzt damit diese seite hier nachzubauen das heißt wir haben jetzt mal die grundbedingungen geschaffen also wir haben jetzt ihr den code editor mit dem möbelhersteller ordner schon hier haben wir die fertige seite schon geladen und wir können loslegen dann legen wir los ich erstelle mir hier mal eine html-datei und den nenne ich startzeitpunkt html da stellen wir uns jetzt das grundgerüst also ein rufzeichen die enter-taste die ränder mal dass en zu de um in den titel das schreiben erst hinein die möbelfirma rufzeichen dann macht man auch das favicon also link das favicon aus und jetzt hier im etf attribut da schreibt jetzt ein punkt schrägstrich wählen den bildern aus und hier das logo dann machen wir gleich noch die eins das a1 enter-taste unterscheiden jetzt eine möbelfirma zwinker smiley jetzt speichern man das neue und jetzt müssen wir die im browser öffnen das heißt wir gehen in den neuen möbel in der neu erstellten möbelhersteller ordner also nicht hier weil das sind ja die fertigen dateien sondern in denen die wir ja vorhin erstellt haben und jetzt kriegen wir hier auf die startseite jetzt haben wir beide dateien hier nebeneinander also hier die bereits fertiggestellte seite und hier die seite wo wir eben dieser seite nachbarn wollen gut dann öffnen mal hier wieder wie studio code wir sehen jetzt auch schon dass das stadion und der titel wie auch die h1 die passen die können wir hier schon vergleichen stimmt und jetzt machen wir weiter mit der navigation also mit dem hier das heißt wir brauchen hier mal image ich gehe also hierhin in den excelle mache den image scheine ich jetzt rein gehe ich in den ordner dann hole ich mir wieder das logo so dass gleich wie beim pharmacon und in das alt attribute schreibt firmenlogo und da mache ich gleich noch ein tag dann einen alltag unter drinnen einen etat krük mal steuerung b damit ich die leiste nicht mehr sie ein reim und ja da schon ein punkt schrägstrich unterschreiben jetzt unsere produkt punkt html diese datei werden wir gleich erstellen und hier zwischen den beiden etex also zwischen öffnenden und schließenden tag schreiben wir unsere produkte hinein jetzt kopiere ich mir das hier zweimal also ich drücke steuern jetzt schauen wir noch mal stellung vor jetzt muss ich das natürlich ein bisschen anpassen das wäre jetzt um nennen auf unsere auf unser unternehmen hier im schloss lösch mal weg hier schreibt mal unser unternehmen wunderbar und auch hier einmal das unterschreiben wir jetzt datenschutzerklärung mit und da schreibt man ebenfalls datenschutzerklärung datenschutzerklärung mit da ist es wurscht nach dem ul tag macht man auch den hr tag für diese linie hier wunderbar und jetzt speicher mal dann gehen wir hier in die datei die wir ja erstellt haben und 3 mal auf aktualisieren ja das passt schon mal nur das bild ist halt noch zu groß da gehen wir jetzt hier für irgendwo hier in der nemetschek hinein und mache mal sagt margit ist gleich 100 pixel spricht aber nochmal und aktuell ist immer ja jetzt basti navigation das bild ist gleich hoch wie die sda der heinz thek passt und auch die eltex hier passen die stimmen überein ohne war wenn wir jetzt auf unsere produkte klicken oder eben hier auf unser unternehmen zurück oder datenschutzerklärung dann geht das natürlich noch nicht warum geht das noch nicht mehr weil wir diese dateien auf die wir hier verlinken die haben ja noch nicht erstellt deswegen findet der browser hier nichts logisch aber diese dateien erstellen wir im jetzt ich drücke wieder steuerung wie er damit ich die leiste see und dann machen wir nur weil unsere produkte html da macht man noch ein neues weil unser unternehmen punkt hat html und noch ein neues fall datenschutzerklärung mit ai und html jetzt gehe ich wieder zur startseite punkt html-datei da gucke ich mir jetzt den gesamten code das kann ich machen indem ich hier irgendwo in der datei viermal hintereinander reinklicken in einem kurzen abstand also 1234 jetzt kann ich das alles passiert und jetzt kann die steuerung drücken gehe in unsere produkte punkt hatte meldete klick hier rein und drücke steuerung fonds ist der ganze chor hier drinnen tritt wieder steuerung b damit ich die leistung nicht mehr sehen jetzt können wir hier wieder ein bisschen besser arbeiten den titel passiert ist kann also da machen wir eine leerzeile an seinem strich dann schreib mal produkte bei der hand da schreibe mir jetzt hier noch unsere produkte produkte so das kann jetzt speichern und wenn man es hier dann aktualisieren und dann hier draufklicken auf unsere produkte dann werden wir schon auf unsere produkte weiter geleitet das funktioniert also schon mal dann können wir uns jetzt noch um das logo weil wenn ich da drauf klicken dann möchte ich ja zurück zur startseite gelangen die machen das der arena zu recht wir können ja zwischen einem öffneten und einem schließenden etech alles mögliche hineinschreiben was wir wollen zum beispiel auch image text ich gehe also hier unter die h1 so und mache mal einen etf attribute schreibe ich jetzt einfach punkt schrägstrich startseite wird zumindest vollgeschlagen startseite html und jetzt schneide ich den image tag hier aus mit störungen iks die leerzeile machen wir gleich weg rogers jetzt haben wir das ja kopiert jetzt haben wir den image stecke ausgeschnitten und dem fitness hier zwischen dem öffneten und dem schließenden etat kein also jeder zwischen ich drücke essstörung v und jetzt ist der e mails tag dazwischen jetzt können wir das mal speichern mit störung es isch aktualisiere hier mal jetzt wird spannend wenn wir jetzt rüber fahren dann ändert sich der mauszeiger schon mal das ist schon mal gut aus und wenn ich jetzt hier draufklicken chuck dann komme ich zurück auf deine möbelfirma als auf unserer startseite punkt html-datei das funktioniert also schon mal wunderbar jetzt kopieren wir uns den code noch in die andere in html dateien hinein also ich bin ja in unserer produkte punkt html da drücke ich jetzt wieder irgendwo vier mal hinein kann ich zwar auch hier machen 1234 jetzt ist alles markiert ich drücke steuerung sie geht es in unser unternehmen punkt hatte mehr da die steuerung vor das passt dann holen wir uns noch durch die steuerung b damit wir hier die leiste sehen dann gehe ich auf datenschutzerklärung und hier füge ich es auch noch mit steuerung vor ein wunderbar hört man wieder steuern mit weg ist aber mal mehr platz so ich bin jetzt wieder bei uns unternehmen html und da passen wir jetzt den code wieder an als wir hier schreiben anstatt produkte schreiben auch unternehmen und bei der h1 da schreibt man statt unsere produkte schreibt man unser unternehmen das ist falsch geschrieben unternehmen so und jetzt bei der datenschutzerklärung punkt html schreibt mich jetzt hier statt produkte schreiber datenschutz und bei unserer produkte / voraus im heinz thek das schreiben hat datenschutzerklärung davids mir schon vorgeschlagen so wie der speicher marmor und dann aktuell ist hier über die seite probieren wir's kurz aus bast beiprodukte pass auf unser unternehmen aber kommt nichts warum kommt da nix ja weil ich vergessen habe zu speichern wir müssen in visual studio code immer jede datei einzeln speichern also wenn ich hier jetzt bin ich ja hier in der datenschutzerklärung punkt html-datei drin hier habe ich ja gespeichert wird störung es aber wenn ich hier eben auf steuerung es drücke oder auch auf file und dann auf sie blicke dann wird nur datenschutzerklärung punkt html gespeichert alles andere nicht nur diese datei wo ich hier drinnen bin und die seite die haben ja schon gespeichert als wenn wir jetzt hier zurückgehen und wir gehen hier auf datenschutzerklärung dann funktioniert das weil das haben wir da schon gespeichert unter unternehmen haben wir noch nichts gespeichert es funktioniert zwar der link also die datei gibt es offensichtlich sonst würde mehrere browser sagen er kann die dort ein nicht finden aber es ist noch nichts drinnen gespeichert das ist noch leer deshalb muss ich jetzt hier bei unserer produkte punkt hatte meldet da gehe ich jetzt rein und wenn ich jetzt störung es hier drinnen drücker könnte ja auch wie gesagt auf 211 gehen aber störung es ist eben kürzer ja ich drücke steuerung es und wenn ich das jetzt aktualisiert total ich muss natürlich bei unser unternehmen punkt html hineingehen wenn ich hier auf steuerung es drücke und jetzt aktualisiert dann funktioniert weil die sagen wir unser unternehmen punkt html auch noch gespeichert und deswegen wird das jahren gezeigt jetzt können uns hier durch klicken durch die navigation datenschutzerklärung unter dem produkte das funktioniert alles und wenn ich hier drauf gucke dann komme ich auf die startseite auf deine möbelfirma hier nochmal datenschutzerklärung klicke ich wieder hier komme ich zur eine möbelfirma wunderbar somit können wir im nächsten video damit anfangen die komplette startseite fertig zu bauen jo in diesem video bauen wir die startseite fertig die navigation hier die bastille bereits das heißt wir fangen jetzt mit dem bereich hier unter diesem strich jahren also wenn wir jetzt hier schauen auf der fertigen seite jetzt machen wir das alles hier wie ich hier ganz runter und da sind ja hier unter dem strich da ist zuerst seinen abstand und dann fängt erst der text jahren den abstand den habe ja derweil gelernte machen wir mit dem br text etwas anderes können wir da ja noch nicht wir werden da noch bessere methoden lernen aber bisher können wir nur den br tag für den abstand für die zeilenumbrüche also ich mache mein berg ich mach noch ein biotech und jetzt mache ich den h2 ich kurz auf die fertige seite können hier schon okay dass es in einer art zweit weil das ist ja eine h1 das ist an einer überschrift deswegen eine hartz iv so und in diesem jahr zwei da schreibe ich jetzt rein unser team doppelpunkt dann mache ich darunter einem pc und da schreibe ich jetzt ein unser team besteht aus lauter motivierten leuten blablabla dann brauchen wir noch ein beispiel text damit man auch ein bisschen mehr wörter haben sag mal 50 meter taste wunderbar da machen darunter noch ein weiteren br tagt dann einen h3 tag und da schreibe ich jetzt rein susanne und drunter machen einen tag im park machen einen mutig weil es machen wir das hier das ist ja kein links und einfach nur texte unterstrichen ist und hier zwischen dem öffnenden und schließenden tag schreibt mir jetzt chefin hinein dann kommt jetzt als nächstes das bild von der susanne also dass hier das heißt wir gehen hier in die nächste zeile machen denn die medtech im source attribut mache ich einen punkt ein schrägstrich will das wird mir schon vorgeschlagen und dann fehlt mir zufällig auch schon chefin vorgeschlagen das ist das bild von susanne und im alter tribut was schreibt man da hinein da schreibt man zum beispiel unsere chefin susanne speicher man mal kurz und aktualisieren bei unserer seite hier ja die susanne ist mir noch etwas zu groß die machen natürlich kleiner das heißt wir gehen hier in den imagetrac irgendwo hinein kann er hier auch hineingehen zwischen source und alter tribut ist ja egal und er schreibt mir etwas nachgegeben hier eine weitere susanne schreibt ist gleich 150 pixel speicher mama und dann aktuell ist hier immer wieder wie es jetzt schon relativ gleich aus so genau das passt dann machen wir jetzt unter dem image check von susanne mathes 4b ertex warum 4 na ja wir könnten auch drei oder fünf machen ist im prinzip egal aber dass man hier einen abstand haben und ich habe diese seite schon gemacht und ich weiß dass ich der 4b ertex genommen hat deswegen wieder 4b atex aber wenn ihr fünf nehmen wollt oder drei dann nehmt 503 oder so eins zwei drei und vier was kommt jetzt richtig jetzt kommt wieder eine h3 unterschreibt mal rüdiger hinein dann gehen die nächste zeit leider machen wir wieder ein petit wieder ein tag unterschreiben wir technische leiter hinein darunter macht mal wieder ein image tag und in das attribut da schreiben jetzt bilder dann hol den technischen leiter und im alter tribut da schreiben jetzt unser technischer leiter dann macht man auch eine tiefe weiter ist gleich 150 pixel speichern wir das noch mal geben auf die seite hier und aktualisieren das kollmann nach unten war der schock groß er fragt sich jetzt vielleicht noch warum man den tag in einen pietrek hier gibt na ja ich kann den tag auch löschen also los mal den öffnenden und dann hier natürlich auch ganz wichtig denn schließenden peter aber was passiert jetzt wenn ich jetzt speicher und dann hier aktualisiert jetzt steht text und bild nebeneinander warum ja weil weder derutec noch der imagetrac eine neue zelle beginnen und wenn sie jetzt eben nebeneinander platz haben und das haben sie hier ja dann stehen sie nebeneinander natürlich kann ich jetzt nachdem mutig hier noch ein br tag machen wenn ich das speicher- und aktualisiert und passt wieder aber ihr seht dann haben wir hier etwas mehr abstand wie hier denn der br tag macht nur einsendung bruch der fügt noch etwas abstand oben und unten hin zu ja man könnte noch ein br tag machen und noch mehr speicher und aktualisieren dann schaut es halbwegs gleich aus dann haben halt hier das mit einem pack gelöst hiermit zb ertex das heißt das ergebnis ist jetzt hier im prinzip dasselbe ist schaut fast gleich aus hier ist glaube ich darf schon etwas näher aber das wäre jetzt nicht so tragisch hier aber grundsätzlich empfiehlt es sich sowieso text fast immer in einen park zu geben außer natürlich es ist eine überschrift oder so aber grundsätzlich sollte man einen text so gut wie immer in einem pack geben und wenn der text eben noch fett unterstrichen oder kursiv oder so irgendetwas sein soll dann macht man die jeweiligen tags also zwei bluetec oder der sonntag die macht man dann meistens innerhalb eines p tags so wie wir das hier oben haben und deswegen ändern wir das wiederum die zwei per text oder schon raus jetzt machen wir hier noch einen öffnenden peter macht mir visual studio d gleich den schließenden auch dazu dann schneide ich jetzt aus und für ihn hier ein jetzt müsste das wieder passen wir speichern und aktualisieren hat sich jetzt nicht viel verändert weil wir es war vor allem auch mit dem pr text aber wie sieht der abstand ist etwas kleiner wieder geworden genauso wie hier oben jetzt passt es wieder ja und deswegen nehmen wir hier den tag so und um mir jetzt etwas zeit zu sparen markiere ich mir einfach dass ihr die steuerung zieht zum kopieren und fügt den ganzen spaß darunter wieder ein mit steuerung vor jetzt machen wir ja die mitarbeiter hier also dass hier das heißt wir schreiben jetzt hier statt rüdiger schreiben jetzt und vito und co anstatt technische leiter schreiben wir unsere mitarbeiter also unsere mitarbeiter im source attribut das müssen wir auch noch ändern da schreibt man jetzt genau mitarbeiter und dem habe ich das bild gespeichert und im alter tribut schreiben ja unsere mitarbeiter mitarbeiter ganz einfach also den spaß speicher man auch mal und dann aktualisieren wir hier auf unserer seite hier passt auch das hat also funktioniert mit dem kopieren und dann gehen wir jetzt nochmal auf die fertige seite bisher haben als jetzt brauchen wir noch mal ein für die birgit für den mann tritt und für nino und jürgen also dreimal braucht man den spaß noch das heißt ich kopiere mir das noch mal nachsteuern und drücken gm bisschen runter und jetzt drücke ich einmal für die birgit störung vor dann einmal für den manfred und einmal für die lehrlinge jetzt schreiben wir hier hier ist andere haben ja hier nicht rüdiger und bert und co genau hier sammelt dann die haben was ja kopiert so und da schreibt mir jetzt schreiben wir standen birgit hinein birgit wichtig geschrieben wunderbar und dort schreibt hinein unsere menschen betreuerin im source attribut hier glaube ich habe ich es auch unter menschen betreuerin ja genau und da schreibt man im alltag gut schreiben auch unsere menschen betroffen dann kommen wir wieder die 4b ertex hier dann haben wir hier eben das für manfred das heißt wir schreiben hier manfred hinein da schreibt mir jetzt da schreiben einfach nur lehrlingsausbildner lehrlingsausbildner gut dass eine mond zu ich glaube ja unter lernens ausbildung habe ich das bild gespeichert und da können wir jetzt schreiben und lehrlingsausbildner es das ganze ist kein hexenwerk da noch mal wieder die 4b rtx hier dann wieder die h3 und da kommen jetzt die lehrlinge hinein also nina und der jürgen das heißt wir schreiben nina und jürgen machen wir noch unsere lehrlinge und hier habe ich glaube ich dass wir auch unter lehrlinge gespeichert er genau und im alter tribut da schreiben auch unsere lehrlinge speichern wir den spaß wieder und dann aktuell ist hier mehr hier auf unserer seite ja das hat dann scheint alles funktioniert sehr gut so schauen wir noch zurück auf unsere fertige seite was filter noch a diese linie hier und der kontaktierung button ja dann machen wir das gleich also ich mach zuerst hier drunter wieder vier br text dass wir ein bisschen abstand haben dann mache ich den hr tag dann gehe ich noch mal in die nächste zeile mache noch einen drehtag und noch ein drehtag und was kommt jetzt jetzt kommt ein etikett rabatten buch schreibe ich punkt schrägstrich kontaktpunkt html diese datei gibt es noch nicht diese datei werden wir dann erst im nächsten video erstellen ja und zwischen dem öffnenden und schließenden tag da mache ich einen button tag button unterschreibt man ein kontaktiere uns mit dem rufzeichen speicher mal das neue gehen wir auf die seite wieder und aktualisieren wir ja wobei machen wir unter dem a tec unter dem ethik machen aber auch zwei br tags damit man auch ein bisschen damit auch ein bisschen abstand haben hier nach unten speicher noch neu und aktuell ist immer noch entweder tag nochmal ja jetzt bat gut das war also die startseite zuschauer sie aus wir können sie jetzt mit uns bereits fertiggestellten seite hier vergleichen hier das oben habe ich schon angeschaut passt der text hier ändert sich immer ein bisschen weh das ist ja der also hier haben einen anderen beispiel text wie hier weil wennigloh rund 50 eingeben die schönsten wir code dann spuckt er mir einfach 50 wörter aus aber das sind nicht immer die gleichen 50 wörter darum schaut das ein bisschen anders aus aber das ist ja egal das ist jedenfalls die fertige seite und wenn wir die hier vergleichen mit der von uns erstellten seite dann ist das ident genauso wie wir sie haben wollten und im nächsten video geht es eben dann weiter mit der kontaktseite weil wenn wir jetzt hier draufklicken dann kommt er noch nichts weil wir die kontaktseite kontakt hatte meldete haben wir noch nicht erstellt ja also es machen den nächsten video das hier ist das nächste video und hier stellen wir jetzt die kontaktseite also wenn ich hier auf unserer fertigen startseite die wir hier möbelhersteller fertig ordner jetzt drinnen haben wenn ich hier auf den kontaktieren und button klicken dann komme ich ja gleich zur kontaktseite wenn ihr aber jetzt hier auf unserer seite auf unserer startseite tier im möbelhersteller ordner drinnen ist wenn ich hier draufklicken weil die haben wir im letzten video stellt wenn ich hier drauf kontaktieren uns dann kommt er noch die fehlermeldung weil der browser die datei noch nicht findet weil es die datei kontakt von kml in dem möbelhersteller auch nicht gibt das heißt wir müssen die datei erstmal erstellen also gehe ich hier in den editor steuerung b und da mache ich jetzt eine neue datei kontaktpunkt html ich kopiere mir jetzt den code von irgendeiner anderen datei zum beispiel von der datenschutzerklärung ich klicke hier irgendwo vier mal rein also 1234 dann steht und kopieren man kann ich das schon wieder zu machen hier gehe ich wieder in die kontakt hatte meldete und drücke störung vor zum einfügen dann drückt man steuerung b damit die leiste hier wieder weg ist und haben wir ja platz und da können wir schon staaten datenschutz endlich jetzt warum zu kontakt in der h1 da schreibe ich jetzt kontaktiere ihre uns die restlichen sachen ihr die kamera aus löschen weil wenn wir hier auf der fertigen seite schauen wir haben hier offensichtlich keine navigation kein firmenlogo oder dergleichen also kammer des auslöschen weg damit sprecher mal da ist einmal kurz und jetzt kriege ich hier bei unserer seite auf den kontaktieren und button ab jetzt gibt es die datei es kann keine fehlermeldung mehr und ich sehe auch schon die h1 wunderbar wir können jetzt auch die zwei seiten schon miteinander vergleichen die h1 passt schon mal das heißt jetzt macht man das hier da kommt offensichtlich jetzt ein abstand hin die machen wir das den mach mal wieder mit br tags und zwar sind es wieder vier br text dann kommt da hat zwei tag da schreibe ich jetzt einen ruf an doppelpunkt dann in die nächste zeile da brauchen wir jetzt das bild und da soll er eine nummer hinterlegt sein die wir anrufen können wenn wir eine app haben zum teil von ihren wm achter ist na ja das machen wir natürlich mit einem etf attribut schreibt man das schreibt man da rein teil doppelpunkt und dann halt eine nummer vier haben jetzt die firma nicht von der möbelfirma hier normal würden wir natürlich die nummer hier rein also hier reinschreiben die die möbelfirma hat aber die möbelfirma gibt ja nicht deshalb gibt es auch keine nummer jetzt müssen uns halt irgendwann in um ausdenken 24 06 09 19 19 19 19 keine ahnung zwischen den öffnenden und schließenden ethik da mache ich jetzt denn die matchtag da schreibe ich jetzt rennteams wasser tribut bilder und da hole ich mir jetzt aus telefon haben wir das hier irgendwo ich schreib mal telefon ja genau im alter tribut da schreibt marx telefon telefon und ich gebe den ganzen gleich also dem image der keine wird von 300 pixel gespeichert ist normal und dann gehen wir hier auf die seite und aktualisieren okay das schaut schon mal gut ausschaue ob es funktioniert hat ja es hat funktioniert der browser fragen sich jetzt ob ich eine app habe zum telefonieren sobald ich eben auf das bild hier draufklicken dann schon mal wieder auf die fertige seite wir brauchen hier wieder ein bisschen abstand das heißt wir machen hier wieder vier br tags also einmal zweimal dreimal viermal dann macht man in den tag da schreibe ich jetzt hinein oder dann ein leerzeichen dann mache ich den strong tag so weil es kommt ja dass hier und da zwischen dem öffnen und schließen tag schreibe ich natürlich ein schreibt eine e-mail ute a doppelpunkt dann in den excelle so was macht man da da machen wir wieder einen tag da schreiben wir jetzt im xf attribut staat bahrain mail zwei doppelpunkte zwischen uns wieder eine e-mail denken die firma hat also zweifel könnte die heißen kontakt at die möbel hier marty dann dazwischen machen wir jetzt noch ein button und da schreibt man rein e mail rufzeichen da an speichern und jamal ob das funktioniert wir geben wieder daher aktualisieren es steht schon mal da und wenn man jetzt darauf klicken dann öffnete browser das e mail programm so wie es sein soll wunderbar und schauen wir wieder zurück auf die fertige seite wir brauchen noch einmal etwas abstand und dann der link zurück zur startseite das heißt abstand da kommen wieder pr-trick sinn machen wir diesmal 2 so und jetzt machen wir ja wobei machen wir noch zwei pr texte sind so immer wieder vier weil es ist ja hier der gleiche ob schon wie hier und falls ich denke ja da haben sich auch vier br text nochmal warum ist hier mehr abstand die h1 und die h2 die an selber auch wieder peter klepel die fügen oben und unten noch etwas abstand hinzu das addiert sich dann alles zusammen deswegen obwohl wir hier nur viel pr texten ist das etwas mehr abstand als wir hier unten weil einfach die a 14 und a 2 noch zusätzlich für mehr abstand sorgen ja aber hier machen wir jetzt auch noch mal vier br text die haben wir jetzt schon gemacht das heißt jetzt haben wir dann hier und hier den gleichen abstand auf unsere fertigen seite sind jetzt bei dem teile hier unten und da kommt es sehr zurück zur stadt heute lenkt das heißt wir machen wir denn wir machen hier mit einem trick und track strich staatsetat ml und war schreibt man rein zurück zur startseite da nochmal und nochmal zwei pr text damit war hier auch noch ein bisschen abstand haben ja dann speichern wir mal und dann aktualisieren wir hier wohnte bord der link ist auch hier und jetzt probiere man noch wenn ich jetzt auf clique dann komme ich zurück zur startseite danke er hat jedenfalls das was mit diesem video wir haben es die kontaktzeit erstellt das den wir hier draufklicken auf kontaktieren uns dann haben wir hier die kontaktseite und wenn wir hier draufklicken also hier das bild das funktioniert mit dem link hinterlegt ist mit der nummer die e mail funktioniert auch wunderbar und auch der zurück zur startseite button oder dass er kein button der zurück zur startseite linke funktioniert auch wenn wir hier draufklicken dann ist immer wieder auf der startseite ja und im nächsten video machen wir dann mit den anderen seiten weiter bis dann in diesem video werden wir jetzt die produktseite fertig bauen die navigation und das alles haben wir schon gemacht und jetzt kommt der content hier unterm strich also wenn wir hier auf unsere fertige produkt seite schauen die ihr in unserer möbelhersteller fertig ordner drinnen ist dann sehen wir unter dem strich da haben wir jetzt im prinzip drei produkte also drei überschriften sofas sessel und lampen und darunter es sind jeweils auch ein bild und wenn ich auf sein bild drauf geht dann werde ich auf eine entsprechende wikipedia seite weitergeleitet ja und runter haben wir dann natürlich noch den kontaktieren und partner strich ja dann legen wir gleich los also ich mach hier unter dem hrt 2 br text dann einen a2 text so was dann kommt jetzt eben das bild hier mit dem link also zuerst der link der etech also da klicke ich jetzt kurz auf das bild hier drauf jetzt kopiere ich mir die url hier oben kann das wieder zu machen und die url die ich mir gerade kopiert habe füge ich jetzt hier im etf attribut 1 was machen wir noch wir schreiben hier noch target ist gleich unterstricht blenk warum machen wir das damit sich dann der link auf dem wir darauf klicken in einem neuen tab öffnet dann gehen wir hier dazwischen reihen zwischen dem öffnen und schließen ethik und da machen wir den imagetrac da scheint jetzt rennt schrägstrich wieder dann der bilder hat er wirklich schon vorgeschlagen und da brauchen wir jetzt das sofa das habe ich unser sofa abgespeichert das bild logisch und im alter tribut da schreibt marx sofa hinein ich gebe dem ganzen noch eine fixe weite also eine vip von 400 pixel 400 pixel machen wir da und da speichern wir jetzt mal und dann aktualisieren wir hier auf unserer seite die wir da jetzt bauen wollen chuck norris jboss klickt auf das bild wunderbar es öffnet sich in einem neuen tab dieser wikipedia link hier sehr gut und texturen ich kopiere mir hier das also der ganze tag der parteitag und auch die zwei pr text darüber das probiere ich mir jetzt und das füge ich jetzt hier unten ein und noch einmal dann haben wir jetzt das sind dann quasi die drei produkte das haben wir schon gemacht das haben wir jetzt zwei mal kopiert das heißt hier passen jetzt noch die werte hier schreiben cecily nein im alter zu beschreiben auch sessel hinein das bild ändert natürlich auch zum sessel wunderbar und den link endermann auch noch das heißt ich gehe wieder auf die fertige seite liegt hier auf den sessel da gucke ich mir jetzt einen link hier oben mache ich dass wir dazu kann ich wieder auf unsere seite die wir gerade bauen zurückgehen und den link den ich gerade kopiert hatte einfüge ich jetzt hier natürlich ein dann hätte man das hierzulande nun lampen im alter tribut da einmal das auch zu lampen um wunderbar das bild ende auch zu landen und das heißt gelöscht jetzt machen wir den schrägstrich lampen habe ich natürlich unter landen gespeichert und dann brauchen wir auch noch den link das heißt ich klicke wieder drauf kopieren wird die url hier und die kopierte url die füge ich natürlich hier ein exzellent dann speichern wir das wieder und wir aktualisieren es passt jetzt gehen wir noch jetzt brauchen wir noch den kontaktieren und baten wir könnten dann natürlich wieder neue hier unten hin schreiben aber wir haben ja schon zweifel auf der startseite das heißt wir holen uns startseite hier so gehen hier ganz nach unten und da kopieren wir uns jetzt das alles hier ja also die drei unteren wert ex den ganzen tag noch mal die zwei pr text über den high tech und die 4b ertex über dem hightech das kopieren wir uns alle ist einfach und fügen es jetzt hier in unsere produkte punkten dafür dass ein wunderbar dann speichern wir nochmal unter aktualisieren noch mal haben wir schon den kontakt ihrer und button hier ja jetzt erst mal die seite noch aus würde ich sagen ich klicke mich auf das sofa wunderbar das funktioniert ich klicke auf den sessel das funktioniert auch und ich klicke auf die lampen das funktioniert auch und dann kriegt man auch auf kommt der genuss und das funktioniert auch sehr gut wunderbar zurück zur startseite unserer produkte ja genau das immer so soll das sein bei unser unternehmen da haben wir ja doch nichts gemacht außer dass wir da machen wir dann im nächsten video test runter und dann kommt auch die datenschutzerklärung und dann war's das auch schon wieder für dieses projekt ja das heißt wir sehen uns im nächsten video die produktseite ist fertig und jetzt ist die unternehmensseite dran die navigation und das alles haben wir ja bereits allzu viel und so mehr dass unter dem strich also wenn wir hier auf der fertigen seite schauen wir haben ja eine überschrift dann haben ein bild dann auch ein beispiel text dann nochmal eine überschrift wieder ein bild noch mal ein text und wider der kontaktierung button mit dem strich hier drüber los geht's unter dem hr tag mache ich hier' 2 vr tags für den abstand dann mache ich eine art 2 da schreibe ich ein un-gebäude dann mache ich darunter ein image stark dann machen wir einen punkt schrägstrich und bilder ordner und dann immer das headquarter und im alter tribut da schreiben denn was firmen firmengebäude und dann geht man eine vip von 600 pixel die habe ich hier falsch geschrieben so jetzt was sonst wird es ja nicht funktionieren und jetzt machen wir darunter noch ein pc keinen unterschreiben wir jetzt hinein hier könnte ein extrem coole text für die idee scheller beschreibung des unternehmens stirn rufzeichen es endet man auch um ein extrem guter text ich schreibe das unternehmen steht wunderbar dann wieder zwei pr text können wir schauen was da kommt okay vertex dann macht mal wieder eine überschrift noch mal einer zeit menschen decke dann nochmal ein image steckt unter dem server buch schreibe ich punkt stehe ich dann gehe ich in den ordner und menschen ecke habe ich das genanntes bild im alter gut schreiben menschen starben aus handy und dem ganzen geht mal wieder eine vip von 400 400 pixel sagen wir speichern das jetzt mal gehe auf unserer seite die wir hier jetzt wo wir das ganze jetzt ja gekostet haben aktualisiere ich okay da schaut schon mal ganz gut aus jetzt kommt ihr dann noch der text also wenn wir auf der fertigen seite schauen jetzt will ja nur noch das und dann der kontaktierung button das heißt jetzt machen wir den text da das heißt wir machen natürlich 1 petek da kommt jetzt der text hinein unsere mit mit davor mitarbeiter müssen ihre menschen nicht allein zu hause lassen sie können sie auch gerne in die arbeit mitbringen und sie während der arbeitszeit unsere so und jetzt aufpassen jetzt konnte das menschen betreuerin birgit es soll den link sein da mache ich deshalb ein ethik der ist also mitten im pack drinnen der ethik und da schreibe ich jetzt schreibe ich zwischen den öffnenden und schließenden etech das attribut machen gleich wir schreiben jetzt zwischen dem öffnenden und schließenden ethik schreibt einfach den text hinein also wir schreiben menschen betreuerin birgit und danach geht es ja noch weiter das schreiben jetzt übergeben er strich wo sie professionell beaufsichtigt werden punkt ja jetzt wollen wir dass dieser link hier auf die startseite führt und da soll er dann zur birgit springen wie machen wir das ja wir schreiben in sap chef attribut schreiben wir jetzt einmal punkt schrägstrich startseite punkte mehr speicher das mal dann gehe ich auf unserer seite hier wo wir das jetzt wieder gegründet haben aktualisiere mal okay jetzt habe ich hier den text wunderbar und wenn ich jetzt auf den link hier klicken dann komme ich zur startseite das passt also schon mal aber wie schaffe ich es jetzt dass der browser dann automatisch zur birgit runter hüpft das schaffen wir mit einer sprung wagte wisst ihr noch wie wir sprungmarken machen richtig mit einem hashtag und einer id ich gehe also in die startseite und hatte meldete und da gehe ich jetzt zur birgit und da gebe ich der h2 von birgit also es ist eine hat drei ecken ort da gebe ich der h3 von der birgit gebe ich eine idee ist gleich an die anfangszeit und die kann ich ja wieder nennen wie ich will ich nehme sie jetzt einfach zum vorzeigen wieder hakuna matata das heißt ich kann auch bindestrich immer die namen verwenden leer schritte nicht bindestriche sind aber erlaubt der schritte nicht bindestriche schon ja die speicher das mal dann gehe ich jetzt hier wieder rauf gehe auf unser unternehmen und wenn ich jetzt hier draufklicken dann springt mir immer noch hierher auf die startseite ganz nach oben warum ja weil wir in unser unternehmen punkt html da müssen wir hier noch etwas machen hier haben wir nur den link und wir müssen jetzt das mit dem hashtag hier jedoch mache wie machen wir das denn ja es ist ganz einfach direkt nach dem start zeitpunkt html ja da mache ich jetzt ein hashtag also direkt drauf direkt danach unterscheide ich jetzt einfach die in die namen also hakuna matata und das ist es ist keine schwarze magie oder sowas ist einfach da der link von der seite quasi hier von der von dem dateinamen von der seite dann direkt dahinter der hashtag und daneben der id name jetzt speichern wir das noch mal und dann aktualisieren wir hier gehen auf unser unternehmen scrollen darunter und jetzt kriege ich hier drauf lag und er springt mir zur birgit wunderbar und jetzt endet also den namen der idee von aquino matata den internets zur birgit um weil man sollte die ja eigentlich so benennen dass es für einen sinn macht ich wollte euch eben nur wieder dran erinnern dass der name der die für die funktion egal ist deshalb habe ich halt hakuna matata genannt so in unserer unternehmen punkt html dann müssen wir das ist natürlich auch noch um ändern das heißt wir löschen als autonome de weck und schreiben hier bier geht müssen natürlich richtig schreiben wir gespeichert das wieder und dann gehe ich jetzt hier wieder auf unser unternehmen und wenn ich jetzt hier draufklicken okay das hat jetzt nicht funktioniert also browser springt jetzt nicht runter zu birgit er springt jetzt wieder direkt hier auf warum wisst ihr warum es nicht geht ja ich habe die startseite punkt html noch nicht gespeichert das habe ich vergessen das kann man auch hier an den punkt hier sehen bei startet html schatz ist ein punkt und der sagt mir eben das in der datei änderungen sind die wir noch nicht gespeichert haben das heißt wenn ich jetzt hier auf gehe ja hier im editor das sehe ich jetzt bei der bier wo ist denn die birgit erst da ist die birgit das sehe ich jetzt ich habe hier schon all dies gleich birgit das heißt es müsste eigentlich funktionieren aber ich habe es noch nicht gespeichert der branche weiß das hört noch nicht dass ich dir geändert habe wenn ich das jetzt speicher und dann nochmal das probiere ja und jetzt hoffen unternehmen kicker und jetzt hier draufklicken dann funktioniert wieder also vergesst mir nicht das speichern von jeder html-datei weil ich habe das schon ab und zu vergessen und dann minutenlang nach einem fehler gesucht warum der code nicht geht dabei hatte ich einfach vergessen den pumps zu speichern weiter geht's wir kopieren uns jetzt noch den den ganzen pumps hier von der kontaktpunkte mehr das kopieren wir uns alles dann gehen wir hier in unser unternehmen punkt html-datei da gehen wir wieder rein und ganz so ganz unten da führen wir das jetzt ein sprechen wir das noch mal thema auf und zu unternehmen und wenn wir jetzt ganz nach unten scrollen dann ist auch der kontaktieren uns button ich probier dennoch heraus der funktioniert gehen wir zurück zur startseite und so unternehmen wieder nochmal auf menschen betreffe bier geht das funktioniert wunderbar ja das war es mit diesem video wir sehen uns im nächsten es ist die datenschutzerklärung seite fertig zu machen und die geht ganz schnell wenn wir jetzt hier auf der bereits fertigen seite schauen dann brauchen wir hier nur drei überschriften und jeweils einem textblock dazu hier habe ich schon die datei dieter geöffnet und dann mache ich jetzt unter dem hr tag die 2b ertex für den abstand dann mache ich eine art code ist dann druckt 1 petek mit 30 beispiel wird dann sagen wir dann drunter noch eine weitere h2 da schreibe ich rücktrittsrecht nochmal einpackt und da sagen als 100 beispiel wörter als 100 und drunter macht mal noch mal eine herz weiter schreiben jetzt sonstiges noch mal einen tag und da sagen wir jetzt das circa 100 beispiel da ich spreche jetzt neu und dann gehe ich hier hierzu unserer seite wo wir das ja gekostet haben hier aktualisieren ja das passt schon mal jetzt fehlt nur noch der der kontaktierung und button das heißt da gehe ich jetzt wieder in zweifel unser unternehmen html da mag ich mir das hier drücke steuerung zum kopieren gehe hier in die datenschutz erklärung warum tat email drücke steuerung vor einfügen aktualisiere ich das noch mal wunderbar das heißt wir sind fertig wir haben die gesamte seite fertig gestellt jetzt können wir es noch mal durch probieren wenn ich jetzt hier auf das logo clique das haben wir ja ziemlich am anfang wurde die ganze navigation da komme ich jetzt zurück zur startseite hier kann ich alles durchschauen wenn ich hier auf kontaktieren uns liege komme ich zur kontaktiere und seite wenn ich hier drauf gegeben antrag nicht der browser nach einer app zum telefonieren wenn ich auf den e mail button klicken dann öffnet sich das e mail programm wenn ich hier zurück zur startet die komme ich zurück zur stadtseite ja was haben wir noch unsere produkte natürlich wenn ich hier draufklicken dann kann ich jetzt auf wikipedia zur zur landseite in einem neuen tab ja und so funktioniert das ganze ich kann dann noch auf unser unternehmen kann ich auch noch schauen wenn ich jetzt hier zum beispiel auch menschen mit eurer birgit clique dann hilft es mir geht und ja das heißt das ganze das funktioniert von hier aus funktionierte kontaktieren kontaktieren und button zum beispiel auch ja wunderbar ich hoffe jetzt wissen was dazu gelernt aber nicht dann schaut das video wahrscheinlich nicht so lange an und ja wie immer wenn es das video nur wenn es noch ein schatz gerade dann props an euch ja wir sehen uns im nächsten video hallo leute unsere möglicher steller seite die ich es fertig und alles funktioniert jetzt möchte ich euch aber noch eine wichtige informationen mitgeben in diesem beispiel haben wir die datei für unsere stadt seit der startseite punkt html genannt bzw ich habe hier ein tippfehler der sich vielleicht schon aufgefallen aber da ich aber den link die zur startseite führen also wenn ich jetzt hier bei unser unternehmen da haben wir hier immer dass das logo und das führte dann wenn ich drauf gibt's startseite und hier habe ich den fehler übernommen deswegen funktioniert das ja denn für die funktion von html da ist es wirklich egal wie wie die dateien benennen hier images attribut da steht jetzt einfach da so dass hier also das jetzt straßen werden es ist heute ein tippfehler drinnen und das system bros aber egal er schaut teenager vater gut nach diesem dateinamen dann sucht er aufgrund von den punktrichtern einen ordner nach eben diesen dateinamen und findet ihn hier und deswegen funktioniert das ganze und für dieses beispiel da ist es auch in ordnung wenn das ist eben nur eine beispiel seite und diese seite wird niemals online gestellt und hier ging es mir eben nur darum dass ihr die funktion von html versteht und für html ist es tatsächlich komplett egal wie wir die datei für die startseite benennen also wir die jetzt wirklich richtig geschrieben hätten startet am 11 dann hätten wir es hier natürlich auch richtig schreiben müssen oder ob wir die klatsche punkt hatte melden und hier begann schon kund tat email schreiben wir hatten sieben nur wichtig dass bei den links die zur startseite führen sollen neben der richtige dateiname angegeben wird das ist das einzige was für html wichtig ist aber da draußen in der echten welt da arbeitet man ja nicht nur mit html sondern es kommen dann zusätzlich programmiersprache wie zum beispiel php und javascript zum einsatz und ohne jetzt zu sehr ins detail gehen zu wollen es ist da draußen in der echten welt wichtig dass man die datei für die startseite immer indexpunkt html nennt man hat sich darauf festgelegt dass man für startseite nimmer den dateinamen indexpunkt html verwendet wenn wir das nun also komplett richtig machen wollen dann benennen wir diese datei hier um und scheiden indexpunkt html genauso die dateinamen von den anderen seiten hier die sind wirklich komplett egal also auch da draußen in der echten welt da ist es wirklich egal wie diese dateien heißen aber bei der startseite da verwendet man immer den dateinamen indexpunkt html natürlich müssen jetzt dann bei den ganzen links hinterteil haben noch um ändern das ist klar also wenn wir jetzt hier bei der datenschutzerklärung punkt hat meldete schauen da bei dem logo der anreiz das um und schreiben natürlich index.html muss es natürlich richtig schreiben so index.html ich spreche diese sollte dann gehen wir zur kontakt- und html datei da haben wir ja hier den link zur startseite auch das muss ich um besser zu indexpunkten l auch das spreche ich wieder dann hier bei uns unternehmen punkt hatte melden müssen dass bei diesem link hier von dem logo auch noch machen ist ja genau das gleiche das schreiben auch indexpunkten auch diese datei speichern und bei unserer produkte punkt html danach nur noch mal dasselbe da schreibt mich auch indexpunkten speicher auch dieser seite und wenn ich jetzt hier auf aktualisieren klicken dann findet ihr jetzt nicht mehr weil das hier oben da ist ja noch der alte datei pfad mit startseite punkt html bzw hat mit die pfähle wisst ihr was ich meine ja und der browser findet jetzt natürlich nicht mehr was wir müssen jetzt machen ich kann den browser schließen das können jetzt auch kleiner machen nicht die wähle deinen worten hinein und hier klicke ich jetzt eben auf dieser index datei denn das ist jetzt die neue startseite die haben wir umbenannt und wenn ich jetzt hier draufklicken dann öffnet der browser wieder die seite und hier funktioniert alles genau gleich wie vorher nur dass wir eben jetzt die datei für die startseite indexpunkte mel genannt haben und das ist eben komplett richtig so das macht man ihn da draußen in der echten welt auch also merkt euch einfach da draußen in der echten welt da ist der dateiname für die startseite immer index.html alle anderen dateien sind wurscht wie wir die nennen die die nennen wir einfach so wie es für uns sinn macht aber für die startseite verwendet man immer index.html das ist das letzte video von diesem kurs ich hoffe er hat euch gefallen ihr beherrscht die basics in html wenn ich jetzt auch noch wissen wollen wie das mit dem cs es funktioniert dann könnt ihr euch mal einen kompletten html und css einsteigerkurs auf juni kaufen den link dazu findet ihr in der video beschreibung falls ja noch gar kein plan habt was tss ist dann ihren kurzen vorgeschmack tss ist die abkürzung für cascading style sheets aber der name ist uns natürlich scheißegal weil bringen uns ja nichts davon vergessen denn jetzt wieder für wichtig ist zu wissen was es macht mit css ändert man das design vom html-code mit css kann und einfach die schriftfarbe ändern die schriftgröße die schriftart man kann auch formen erstellen man kann erahnen erstellen und so weiter und so fort falls wir jetzt also motiviert bist dann wissen hat er noch weiter zu vertiefen und zusätzlich noch die essentiellen basics in css zu erlernen dann kauft er einen kurs auf juni mich wird's freuen