gleich kennst du das ja du bist gerade ganz am anfang und war es gar nicht so richtig wie du jetzt loslegen sollst du weißt nicht mit welcher sprache du am besten anfangen sollte es zu kunden und du weißt auch nicht was für software du auf deinem computer installieren soll es aber du hättest lust kunden zu lernen wenn ja dann ist dieses video hier genau für dich in diesem video bringe ich dir in wenigen minuten bei wie du mit ein paar zeilen html-code deine eigene internetseite bauen kann ist übrigens 94,6 prozent aller internetseiten da draußen verwenden html wir gehen gemeinsam den ersten schritt und lernen zusammen html dieses tutorial wird vermutlich das leichteste tutorial auf diesen kanal hier und richtet sich wirklich an komplette anfänger nach diesem tutorial bist du dann in der lage seine ersten leichten internetseiten mit html zu bauen und du verstehst wie internetseiten grundlegend aufgebaut sind lasst uns vorher noch einmal kurz darüber reden was html eigentlich ist html ist eine markup language das bedeutet dass es eine sprache ist mit denen informationen dargestellt werden es ist noch keine programmiersprache aber trotzdem ist es wenn du programmieren lernen möchte ist der ideale einstieg denn du kannst genau mit dieser sprache sagen was für informationen sich auf deiner seite befinden sollen wie beispielsweise eine überschrift ein absatz mit text oder ein bild wenn wir jetzt eine applikation bauen egal ob das auch dein handy auf deinem computer oder im webbrowser sein soll dann müssen wir natürlich erst einmal immer sagen was für informationen in dieser applikation dargestellt werden sollen und das machen wir mit html css kann man dann sagen wie das ganze aussehen soll das heißt da können wir abstände zwischen den elementen definieren da können wir farben zu weisen größen und so weiter und so fort und die logik die macht man damit javascript das heißt wir haben immer drei verschiedene baustelle html für die informationen css für das aussehen und javascript für die logik auch zu diesen themen existieren auf diesen kanal hier schon tutorials das heißt wenn du html beherrscht kannst du danach weitermachen mit css und danach mit javascript ich würde sagen wir legen direkt los und schreiben jetzt unsere erste internetseite alleine die erste sache wird sich wahrscheinlich schon sehr erstaunt und zwar brauchen wir um zu starten auf unserem computer keinerlei software wir können direkt mit den tools die wir bereits an bord haben loslegen wenn du ein windows computer hast dann kannst du einfach auf dieses startmenü links unten drücken und dann den editor öffnen der editor ist ein simples programm wo wir ein fachtext reinschreiben können die größe kannst du übrigens ändern indem du auch format gehst und dann auch schriftart hier kannst du das ganze zum beispiel auf 22 24 und so weiter ändern wenn du mac-nutzer bis dann solltest du das condor dazu verwenden und zwar textedit textedit kannst du einfach über die spotlight-suche bei einem mac suchen anschließend muss du hier noch ein paar kleine änderungen vornehmen du musst obenauf format drücken und dann die option make plain text auswählen und in diesem text editor da können wir jetzt bereits unsere erste html seite schreiben das heißt wir können hier einfach irgendeinen text reinschreiben zum beispiel meine erste webseite und können das ganze jetzt auf unserem computer speichern dafür drücke ich einfach steuerung und es ich werde jetzt hier an der seite meinen desktop aus du kannst das ganze natürlich speichern wo du willst am besten legst du einen ordner für deine internetseite an und nennt ihn zum beispiel meine erste webseite in diesem ordner können wir jetzt die datei speichern dafür willst du hier nicht textdateien aus sondern alle dateien und nennt diese seite jetzt indexpunkt html wir können hier also die endung von unserer datei verändern bei mac funktioniert das ganze genauso auch hier drückst du einfach auf kommentar und hier ist es wichtig dass dubai plaintext encoding unbedingt tf acht auswählt wenn du das ganze speichert dann würde automatisch gefragt ob du punkt html verwenden möchtest und nicht doch lieber punkt txt hier verwendest du natürlich punkt html anschließend haben wir auch unseren desktop jetzt den ordner mit unserer ersten webseite und wenn ich diesen ordner mit einem doppelklick öffnen sehe ich hier eine html-datei diese kann ich mit meinem webbrowser öffnen dafür mache ich einfach einen doppelklick drauf und anschließend öffnet sich hier mein webbrowser und in diesem webbrowser habe ich jetzt meine allererste internetseite das heißt das war's schon du hast jetzt bereits seine erste kleine internetseite geschaffen mit einem text der web browser geöffnet wird das ist alles wir können jetzt unsere seite hier weiter bearbeiten ich mache das ganze mal etwas größer und wir können jetzt hier auf der linken seite unsere internetseite weiter bearbeiten das heißt ich kann hier jetzt weiteren text hinzufügen zb mein name ist yunus wenn ich das es auf der linken seite speichere indem ich steuerung es drücke und die rechte seite anklicke und hierauf aktualisieren drücke sehen wir dass das ganze hier aktualisiert ist wenn ich die seite etwas kleiner machen sehen wir allerdings dass der ganze text hier in einer einzigen zeile ist obwohl ich hier ein enter verwendet habe inter hat den html keinerlei effekt wir müssen hier einen speziellen html code verwenden der erste html-code den du jetzt kennen lernt ist also der für eine neue zeile html code schreiben wir immer mit diesen spitzen klammern die findest du links unten auf der tastatur wenn wir hier wer zwischen diesen spitzen klammern eingeben dann steht das für ein break wenn ich jetzt auf enter drücken sehen wir das hier automatisch eine neue zeile eingefügt wurde das heißt wenn ich jetzt weiteren text einfügen möchte und vielleicht auch mehrere zeilen abstand dazwischen haben möchte dann kann ich das immer mit diesem br machen das heißt damit schaffst du es jetzt schon mal eine allererste internetseite zu bauen wir nennen unsere erste datei immer index.html wir können uns aber auch eine zweite datei anlegen und können auf diese datei verlinken ein link kannst du einfügen mit diesem tag das heißt ich schreibe 1 a schließe es wieder und schreibe hier zwischen den text zum beispiel über mich wenn ich jetzt aktualisiere sehen wir dass das ganze hier immer noch genauso aussieht aber dieses über milch das wurde von einem link hier umgeben dieser link hat eine besonderheit und zwar fängt er an und er hört irgendwo auf wenn er aufhört dann müssen wir hier noch immer so einen querstrich einfügen bei einem link kann man jetzt noch ein sogenanntes attribut hinzufügen das geht so hier kann ich jetzt zum beispiel http doppelpunkt / / google.de einfügen oder so etwas wenn ich jetzt aktualisieren sehen wir dass durch das hinzufügen von diesem attribut hier dieser link anklickbar geworden ist wenn ich jetzt hier draufklicken dann geht dieser link zu dieser url die wir hier bei age wave hinterlegt haben das ah da steht übrigens für enke also anker wir haben hier ein anker der uns zu einer anderen seite bringt das age wave steht für hyper referenz also eine referenz auf eine andere seite wenn ich jetzt auf über mich drücke dann werde ich zu google weitergeleitet das coole ist dass ich ihn nicht nur zu anderen seiten von fremden leuten weiterleiten kann sondern auch zu mir ich kann beispielsweise eine zweite seite namens gebaut punkt html erstellen dafür öffne ich jetzt in explorer oder textedit erneut und schreibe hier eine neue seite über mich und speichere auch diese wieder in dem ordner meiner internetseite ich wähle also als dateityp die da alle dateien aus und nenne diese jetzt so wie ich hier zwischen diesen aid heft geschrieben habe also baut punkt html wenn ich das ganze jetzt speichere habe ich eine zweite datei angelegt und wenn ich jetzt auf über mich drücke werde ich zu dieser 200 hier weitergeleitet das heißt ich klicke mal drauf und wir sehen dass ich jetzt bei über mich gelandet bin wichtig ist wenn du auf der linken seite hier irgendetwas aktualisiert dann musst du es auf der rechten seite auch immer aktualisieren das heißt ich drücke immer links erstmal auch speichern das heißt ich hier zum beispiel ein ausrufezeichen hinzu drücke auf speichern hier auf die rechte seite aktualisieren die seite und erst dann sehe ich meine änderung das heißt wenn die eine seite noch zu google geführt hat dann musste sie erst einmal aktualisieren wir haben jetzt also schon zwei verschiedene html tags kennengelernt einmal unser br was eine neue zeile macht und einmal diesen link der schon etwas komplexer ist aber der uns dafür einen link zu einer anderen seite einfügt der nächste tag den ich dir zeige ist eine überschrift eine überschrift macht man immer mit diesen h1 das heißt wenn ich hier dieses h1 so drumherum packe und jetzt das ganze aktualisiere sehe ich dass der text automatisch größer geworden ist wenn ich jetzt hier unten anderen text schreibe zum beispiel mein name ist yunus dann sehen wir dass dieser text wieder kleiner ist eine überschrift hat automatisch immer so ein bisschen abstand zum nächsten text und ist ein bisschen größer hier starten wir die überschrift hier beenden wir die überschrift mit diesem strich am ende wenn deine überschrift jetzt noch weitergeht dann hast du vermutlich diesen strich hier vergessen es gibt nicht nur eine überschrift sondern es gibt sehr sehr viele du kannst zum beispiel mit einem hart zwei hier eine kleinere machen das heißt hier kann sie jetzt noch einmal schreiben persönliches oder so etwas und ich bin 30 jahre alt wenn ich das ist aktualisiere sehen wir dass diese zweite überschrift kleiner ist als die erste 1 h 1 ist immer größer als ein haar 2 das heißt ich kann hier zum beispiel h1 h2 auch was ganz kleines bh 5 oder sowas reinschreiben und wenn ich das mache dann habe ich hier eine sehr sehr kleine überschrift so können wir unsere informationen schon mal besser strukturieren das heißt wir haben normalerweise immer eine haupt überschrift und haben dann so wie bei einem buch beispielsweise auch verschiedene kapitel diese verschiedenen kapitel oder sektionen könnten damit einem harz zwei strukturiert sein wenn du mehrere unterkapitel haben dann nutzen wir hier noch ein h3 und wenn wir noch eine unter kategorisierung haben dann vielleicht noch ein h4 natürlich wird eine internetseite nur dann richtig persönlich wenn wir auch fotos auf einer internetseite haben und deswegen kannst du auch sehr einfach fotos hinzufügen ich habe jetzt mal ein bild von mir herunter geladen und dieses habe ich hier auf dem desktop jetzt mal platziert diese bilder kannst du sehr leicht in deiner internetseite einbinden dass ich immer mache ist dass sich diese bilder umbenennen damit ich sie ein bisschen leichter finden kann vom namen her dafür mache ich einfach einen rechtsklick hier drauf und gehe auf umbenennen und nennen das zum beispiel yunus wichtig die endung die muss bleiben falls sie diese endung hier übrigens nicht sehen kannst zeige ich dir gleich wie du sie ein blende ist erst mal verschieben wir die datei in den ordner unserer internetseite ich mache den ordner mal kurz groß und wenn du diese endung hier nicht siehst dann kannst du einfach auf ansicht klicken und hier den haken bei datei erweiterungen rein tragen so sehen wir es nämlich erst einmal nicht und sobald wir hier dateinamen erweiterung reinpacken sehen wir das ganze jetzt kann ich mir den ganzen namen meiner datei kopieren und kann diese auf meiner internetseite einbinden dafür lernen wir ein neues unser viertes html tag kennen wenn wir diese überschriften zusammenzählen und zwar bmg mit ihrem können wir ein bild auf unserer internetseite einfügen mit diesem src attribut können wir jetzt genau sagen welche datei wir aus unserem ordner einbinden wollen das heißt in diesem fall die datei minuspunkt jpg wichtig die datei muss sich im gleichen ordner befinden und du musst sowohl den anfang der datei als auch hier diese endung genauso schreiben groß und kleinschreibung ist hier sehr wichtig wenn ich jetzt meine seite aktualisieren dann sehe ich das bild auf meiner seite aber wir haben ja noch ein problem wie man ganz klar sieht und zwar ist dieses bild einfach gigantisch und das wird ja auch häufiger passieren das ist viel zu klein oder viel zu groß ist aus diesem grund müssen wir dieses bild natürlich skalieren das gute ist dass man solch einem html tag immer mehrere attribute hinzufügen kann ein attribut ist ja dieses source was uns sagt welche datei hier geladen werden soll ein weiteres attribut heißt wird also breite hier kann ich jetzt zum beispiel sagen 200 pixel und kann das ganze aktualisieren und jetzt sehen wir dass das ganze hier nur noch 200 pixel breit ist und hier kann ich mich jetzt so ein bisschen austoben kann zum beispiel sagen 400 kann hier zum beispiel noch ein br einfügen um eine neue zeile zu machen und jetzt sieht das ganze so aus also sagen sagen wird die seite hier schon etwas persönlicher das ist jetzt natürlich noch nicht die krasseste seite die du jemals gesehen hast aber dafür haben wir hier mit vier bis fünf verschiedenen html tags das ganze gebaut wir haben eine startseite die so aussieht ich kann auf über mich klicken und werde dann zu dieser seite weitergeleitet wo ich beispielsweise hier ein bisschen text habe was persönliches eine info- und ein bild und mit diesen informationen alleine kannst du jetzt schon deine allererste kleine internetseite bauen du kannst mehrere dateien erstellen die duh untereinander mit einem hyperlink also mit diesen dingen hier verlinken kannst du kannst überschriften hinzufügen mit diesem h1 tag kleinere überschriften mit h 2 du kannst mit diesem img ding hier ein bild einbinden und kannst ansonsten jede menge text zu deiner seite hinzufügen für den anfang ist das hier schon ziemlich gut html ist natürlich noch viel viel mehr es gibt es für nahezu alles und man kann das ganze natürlich auch noch die seinen dafür ist css verantwortlich und später auch noch logik zu unserem programm hinzufügen um daraus beispielsweise eine app zu machen html es etwas was unglaublich verbreitet da draußen ist wenn du html tags für etwas herausfinden möchtest kannst du einfach auf google gehen und ein beliebiges html tag suchen das heißt zum beispiel kannst du video html tag einfach mal bei google eingeben und dann siehst du sofort das ist auch solch ein video tag gibt das sehen wir hier und wie das ganze verwendet wird hier ganz oben siehst du auch noch ein beispiel und du kannst hier zum beispiel verschiedene videodateien einbinden und auch hier hast du wieder dieses attribut um die breite anzugeben und auch noch das attribut um die höhe von dem video anzugeben auf der seite www swissport com findest du außerdem eine übersicht über alle möglichen html tags dies noch so gibt mit einer genauen beschreibung warst du damit machen kannst hier ist beispielsweise das element was wir schon hatten du kannst diese text ja alle mal durchlesen und einfach mal schauen was du da so für deine internetseite gebrauchen kannst und kannst dich hier noch so ein bisschen umschauen du wirst hier einiges spannendes finden wie beispielsweise eine form womit du ein formular machen kannst oder ein input womit ein eingabefeld für text machen kannst oder das table tag womit du eine tabelle erstellen kannst schau dich hier einfach mal rum experimentier ein bisschen und wenn du sagst okay jetzt bin ich mit html einigermaßen gut ich habe ja schon so ein paar kleine internetseiten gebaut die es natürlich noch kein design haben dann würde ich langsam weitermachen mit dem css tutorial auf diesem kanal da lernst du dann genau wie du diese element ist ein kannst so dass sie gut aussehen den link den ich gerade geöffnet habe und auch den gesamten kurs den ich in diesem video hier geschrieben habe findest du natürlich unter dem video hier verlinkt außerdem ist es noch so dass es ganz normales wenn am anfang etwas vielleicht nicht perfekt funktioniert dann ist es häufig so dass so ein kleiner gemacht hast und dich fertig hast wenn du mit html anfängst und ich ein bisschen mehr informiert wirst du auch sehen dass jede html-seite noch zwei essentielle tags braucht damit das ganze auch richtig formal korrektes html ist und das ist einmal dieses html tag was immer am anfang von jeder seite hier stehen muss und am ende jeder seite geschlossen werden muss das heißt hier muss so ein / davor das nächste ist das so genannte body attack dieses badetag muss auch immer ganz am anfang von unserem körper unserer internet seite stehen und am ende geschlossen werden damit wir das ganze ein bisschen besser überblicken können rücken wir außerdem den gesamten inhalt ein das geht jetzt hier nicht so gut mit einer tab taste aber du könntest hier einfach so sagt zack zack das ganze eindrücken das heißt wenn wir das so schreiben dann sieht unsere seite genau so aus ich kann sie noch mal aufmachen aber der große vorteil ist dass wir jetzt formal richtiges html haben und hier kannst du es beispielsweise noch coole sache machen wie hier oben einen head bereich hinzufügen zack dieser head bereich der beinhaltet alle informationen die unsere seite hat die allerdings nicht auf unserer seite direkt zu sehen sind wird sich jetzt kompliziert an ich zeige dir ein ganz leichtes beispiel und zwar das attribut der titel ist der titel von unserer internetseite hier kann ich beispielsweise schreiben meine erste internetseite aktualisiere das ganze und siehe jetzt dass sich der inhalt meiner seite der badi nicht verändert hat allerdings sehe ich hier oben das nun im titel steht meine erste internetseite das heißt mit diesen dingen hier was ich in meinen head bereich hinzugefügt habe habe ich jetzt hier oben die möglichkeit den titel zu verändern von meinem tipp oder von der internetseite ob wir hier übrigens leerzeilen haben oder keine leerzeichen haben das ist komplett egal die werden von unserem web browser ignoriert also egal wie ich das hier darstellen ob ich viele oder wenige leerzeichen habe das macht keinen unterschied jetzt würde ich sagen dass du dran versucht dieses wissen umzusetzen bau dir deine eigene seite wo du dich vielleicht vorstellt wo du vielleicht ein lebenslauf zu dem mars oder deine hobbys oder sowas vorstellst ein paar fotos hochlädt und so weiter und so fort es gibt auf diesem kanal hier videos wie du das ganze auch ins internet stellen kannst es gibt tutorials wie du css als nächstes ernst und danach javascript also schau dich hier einfach mal um ich würde mich freuen dich noch in ein paar weiteren videos hier zu sehen und gerne auf abonnieren und ansonsten hören wir uns vielleicht weit im nächsten video also was gut deine news