HomeНаука и техникаRelated VideosMore From: techPunkt

Div und Span in CSS - HTML Tutorial | CSS lernen für Anfänger

382 ratings | 18775 views
Hey, heute gehts um die sogenannten div´s und span´s in CSS (HTML). Ich wünsch euch viel Spaß beim Video! ;D CSS lernen - A bis Z. In diesem Tutorial lernst du CSS vom Anfang bis zum ende. Heute: Div und Span. Viel Spaß! Zur Playlist vom gesamtem Tutorial: https://www.youtube.com/watch?v=yBFE7Kcpb2k&list=PL5jhqWqcHcSLY1L3plznN7cXr4zteVbXL Zum HTML Basic Tutorial: https://www.youtube.com/watch?v=1A1D2bCcBX8&list=PL5jhqWqcHcSJO4by0xswBe-QTPb6fYVpR -- Mein YouTube Equipment -- Meine Kamera: http://amzn.to/29suMeY Das Objektiv: http://amzn.to/29suOmX Mein Mikrofon: http://amzn.to/29rifvV Video-Leuchten: http://amzn.to/29rjs6n Die Amazon-Links hängen mit dem Partnerprogramm von Amazon zusammen. Sie dienen dem potentiellen Käufer als Orientierung und verweisen explizit auf bestimmte Produkte. Sofern diese Links genutzt werden, kann im Falle einer Kaufentscheidung eine Provision ausgeschüttet werden. -- SOCIAL -- Facebook: https://www.google.de/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjE5On3wKjNAhXCMBoKHbQSBywQFggcMAA&url=https%3A%2F%2Fde-de.facebook.com%2Fpublic%2FMarkus-Schachtschneider&usg=AFQjCNFBlM79JFWHxe_kFpAROqrtX7YtrA&sig2=RneOctseK5ZF2guCoG6sjQ SnapChat: markusschats Instagram: mash.mark -- DANKESCHÖN -- Musik: Bensound (http://www.bensound.com/) Andrew Applepie (https://andrewapplepie.bandcamp.com/) Sound Effekte: http://www.freesfx.co.uk/ Flaticon: Icon made by Freepik from www.flaticon.com Icon made by SimpleIcon from www.flaticon.com Icon made by Madebyoliver from www.flaticon.com
Html code for embedding videos on your blog
Text Comments (38)
Laurenz Wagner (1 day ago)
Du hast mein Leben mit diesen Tutorials gerettet haha. Ohne dich würde ich HTML in der Schule niemals verstehen. Mach weiter so.
wie bringe ich meine Seite wo ich grade arbeite und mich selbs als video auf dem Bildschirm so wie du machst.
halllo54321 (24 days ago)
Funktioniert das nur mit png bildern ?
MyNegativeCreep (3 months ago)
Müssen divs immer mit # angesprochen werden im CSS file? Oder Attribute generell?
Pedro LP (3 months ago)
MyNegativeCreep Es werden Ids mit '#' aufgerufen, d.h., wenn ein div als id gekennzeichnet ist, dann muss es mit '#' aufgerufen werden.
Thomas Andre (9 months ago)
Vielen Dank, wirklich gut gemacht und sehr hilfreich!
Racer4308 (10 months ago)
Ich DANKE dir der lherer in der schule hat die ganze zeit style benutzt und uns nicht erklärt was es ist und deshalb hab ich die ganze zeit style anstatt id benutzt LIKE
Bjoern Templ (1 year ago)
mega typ. dank dir hab ich's endlich durchgezogen, html und css zu lernen. weiter so.
y2addict (1 year ago)
Bitte auch mal ein Video erstellen, wie ich in einem Eigenen Text Per HTML eigene wörter "markieren" kann und zu diesen innerhalb des Textes " verlinken" kann. Das wäre toll ! Vielen Dank und weiter so ! Klasse !
Karl Heinz Weiner (1 year ago)
daumen hoch, abo haste schon, freu mich auf das nächste viedeo.
Johannes Rudloff (1 year ago)
ja man! du bist ein super sympathischer Typ! danke, dass du uns dein Wissen zur Verfügung stellst! deine VIdeos sind super gut gemacht! Ich baue mir gerade mein website und möchte auch animationen einbauen! Könntest du mal ne episode zu interaktiven animationen machen und wie man diese in html einbindet und so weiter? muchas gracias!
Schorschel eastcoast (1 year ago)
Super erklärt! :) Ich muss mein HTML und CSS Wissen ein wenig auffrischen. Bis jetzt haben mir deine Videos super weitergeholfen! Ein Javascript (Angular oder Jquery) Tut. wäre vielleiht noch ganz nice. Solltest du aber bestimmt schon in der pipeline haben ;)
Sevket Cagabey (1 year ago)
hallo wie kannst du html und css in gleihe fenster aktivieren und sofort in browser wird angezeigt....
Mia (10 months ago)
Er benutzt den Editor 'Brackets' dort gibt es diese "Live-Vorschau"
Franz Riwi (1 year ago)
Hi, ich würde gerne wissen warum du bei der live-vorschau die Content siehst ? (hellblauer rahmen) ? ist das eine Erweiterung in Brackets ? (wenn ja, welche ?)
Manuela Hettler (1 year ago)
Hallo techPunkt, tolles CSS Tutorial - einfach sehr gut erklärt, ich habe aber ein Problem. ich habe mir von pixabay das Bild geholt zum testen https://pixabay.com/de/png-wasser-kugel-deko-blau-2438719/ aber es ist nicht vollständig sichtbar, denn bei cover schaut es so aus http://prntscr.com/fqf419 der Code stimmt aber habe es genau verglichen. #logo { margin: 20px; float: left; height: 60px; width: 60px; background-color: grey; background: url(png-2438719_640.png); background-size: cover; } html Code: <!DOCTYPE html> <html lang="de"> <head> <title>DIV und SPAN</title> <meta charset="utf-8"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="navigation"> <div id="logo"> </div> </div> </body> </html> Hast du einen Tipp warum es nicht geht - mit "contain" ist es so: das hatte ich auch probiert da kommt die Kugel doppelt http://prntscr.com/fqf509 Danke
Louis Winter (1 year ago)
Immer wieder hilfreich! Danke!
adwarewin32 (1 year ago)
Danke für die super Erklärung, da schreibt sich dann die Informatik Arbeit viel leichter
Alem Kahrovic (1 year ago)
Also ich habe alles genauso eingegeben nur in der Vorschau passiert bei mir absolut gar nichts?? Jemand eine Idee...
SplnSix (1 year ago)
Vielen Dank für diese Video-Reihe. Ich bin im Moment krank und finde das einen tollen Zeitvertreib! Für mich als absoluten Neuling verständlich erklärt! :)
Flapp (1 year ago)
DANKE! <3
NiKET (1 year ago)
Ich hab eine Frage: Ich benutze Notepad ++. Geht das dort nicht oder hab ich was falsch gemacht? Hab alles wie im Video nachgemacht :(
Timo Paetzke (1 year ago)
Niket28 mit notepad ++ gezt das auch. ...vllt hast du das dokument nicht als html dokument gespeichert
Guitartube25 (2 years ago)
Kollege, ich liebe dich für dieses Tutorial! Zum ersten Mal habe ich es von Anfang an sofort begriffen, es war schnell, es war präzise, auf den Punkt genau und auch vom Visuellen sehr übersichtlich aufgearbeitet und aufgestellt. Deine Aussprache ist verständlich und überhaupt habe ich mir sofort Brackets heruntergeladen, im Gegensatz zu Eclipse finde ich deinen Editor sehr viel angenehmer allein vom zuschauen. Dicker, fetter Daumen rauf, ich will mehr davon.
Alois Meier (5 months ago)
+ Guitartube25 ging mir ähnlich, viele Plappern ewig rum oder erklären betont langsam Triviales. -> einfach super wie techPunkt es macht.
techPunkt (2 years ago)
Danke, so ein Feedback macht mich natürlich froh :D. Bin voll motiviert dran.
Juliane (2 years ago)
Der letzte Teil geht bei mir nicht (Span und den Text in die Box einfügen - bei mir ist der Text unter der Box und das mit dem Span funktioniert gar nicht)
sahma tuk (6 months ago)
Das half..:)..Ich hatte das Problem, daß der Text über dem Banner erschien. p: float left -> ist im Banner...
SplnSix (1 year ago)
Und habe die Lösung gefunden: Ich hatte in der style.css Datei unterm Logo vergessen, float:left; anzugeben! Vielleicht hilft dir das ja. :)
SplnSix (1 year ago)
Habe das gleiche Problem. <!DOCTYPE html> <html lang="de"> <head> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="Navigation"> <div id="Logo"></div> <p> <span> Lorem ipsumahföskfskfdsgjdsfgdfgkjdng fgsdfglkjsdfng sgusdfgidsfn dsfgisdfg dfögudsfökg gaugflkjg dfgdfg dfsögusfg afgaföig. </span> </p> </div> </body> </html>
Kevin G. (2 years ago)
Wie immer super. Freue mich schon aufs nächste Video. Und ich hoffe das du uns immer weiter "nervst" ;-)
PS_X_GT (2 years ago)
Also nerven tust du schon mal gar nicht, wir wollen ja was von dir lernen ;) Freue mich auf das nächste Video!
Peter Rauscher (6 months ago)
dis tu ich auch
Butterfly Tricks (2 years ago)
Falls es nicht beabsichtigt war, in Deinem Intro steht statt thanks ^hhanks^
ajdncjwjdjd (2 years ago)
Kommt später auch noch ein Video, das näher auf die Navigation eingeht, also mit a:hover etc.? Tolles Video natürlich ^^
ajdncjwjdjd (2 years ago)
+Mac Jo  Danke :)
Ju Lia (2 years ago)
Wie war die prüfung? Werd ich mir später in ruhe ansehen und am pc nachmachen :) danke
Mohammed Khaîr (2 years ago)
Super tolle Videos!!! Immer wieder cool sich Eins anzuschauen! Danke für das verständliche Erklären und deine Mühe :)

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.