Das Video kommt von YouTube: erst beim Abspielen verbindet sich die Seite mit YouTube (Google).
HTML (Einführung) | Informatik Lernvideo
Das Wichtigste aus dem Video
Tipp auf eine Zeit – das Video springt genau dorthin.
Transkriptautomatisch erstellt · 204 Zeilen
- das Thema heute ist HTML das die Hypertext Markup Language Markup Language haben sie irgendwo schon mal gehört das ist nämlich XML auch ne eine
- Auszeichnungssprache und HTML ist ein XML Dialekt zur Darstellung von Dokumenten erstmal ganz allgemein was man jetzt in letzter Zeit
- einmer wieder hört ist HTML5 und das ist eine Sammlung von Standards zur Entwicklung von Webseiten also HTML stellt nicht irgendwelche Dokumente da
- sondern HTML stellt eben Dokumente da die als Webseiten ausgetauscht werden das ganze sieht ähnlich aus wie XML deshalb habe ich mal hineschrieben
- Dialekt ja historisch war es so dass es erst allgemeine auszeichungssprachen SGML gab dann hat man HTML entwickelt dann hat man versucht XML als Obermenge
- von HTML zu bestimmen ja und jetzt ist man wieder soweit dass HTML eben nicht mehr eine Untermenge von XML sein soll aber vielleicht ändert sich das ja in
- zwei Jahren wieder also von daher wer da den aktuellen Stand verfolgen möchte dem empfehle ich das mal im Netz nachzuschlagen mal ganz grundsätzlich
- hab es ja gerade schon gesagt HTML beschreibt ein Dokument und dieses Dokument wird uns dann als Webseite in dem Webbrowser aufbereitet
- ausgeliefert als sie sehen es hier hab mal hier so dargestellt also hier das ist mal Browser und da gibt's ja verschiedene Bereiche da steht dann
- irgendwas drin und ganz grundsätzlich diesen grundsätzlichen Aufbau den gibt uns so eine htmlseite an sie sehen das sieht so aus wie XML geht hier los mit
- einem Tag HTML dann gibt's hier so ein headtag das ist der Header da steht dann z.B der Titel der Seite drin das ist das was dann im Browser in dem Tab erscheint
- dann gibt's den Body da kann man dann eben irgendwelche Dinge reinschreiben hier A1 z.B ist eine Überschrift erster Ordnung und ganz normalen Text so das
- ist mal ganz grundsätzlich die HTML Seite dann gibt es eine weitere Technologie dazu das ist das CSS cascading stylesheet und das legt jetzt
- die Erscheinungsformen der einzelnen HTML Dokumente Elemente fest man kann also sprich in diesem CSS sagen was möchte ich hier wie soll es aussehen und
- dann wird es eben W diese Eigenschaften den Elementen in der HTML Seite zugewiesen das ganze funktioniert über sogenannte Selektoren also wie eine HTML
- Seite ist ein CSS auch einfach eine Textdatei und es ist immer so aufgebaut es gibt hier einen Selector und dann in so zwei geschweiften Klammern stehen
- dann die Eigenschaften ne hier ist z.B die Eigenschaft border collapse und die hat den Wert collapse ja hier gibt's die Eigenschaft border und die hat die eigen
- hat den Wert ein Pixel solid also durchgängig und schwarz soll sie sein ja was dann vor der geschweifften Klammer steht das hier das nennen wir Selector
- da gibt's dann verschiedene werden wir nachher verschiedene fest kennenlernen mal ganz grundsätzlich ist das hier einfach nur eine Möglichkeit um
- festzulegen welches Element dann wird genau diese Eigenschaften haben soll hier ist jetzt mal der einfachste selecttor den es geben kann der
- selektiert einfach nur ein Tag also sprich ein Element hier aus was es auch noch gibt haben sie sicher auch schon gehört ist Javascript
- javaScript ist eine richtige Programmiersprache also ich habe jetzt mal hier so kann man also Abläufe festlegen wenn also hier einer klickt
- dann passiert irgendwas und dann wird hier irgendwas rot oder grün oder sonst was oder es wird ein message box angezeigt also
- JavaScript legt das lokale Verhalten der Webseite fest das heißt also hier wenn ich hier mit der Webseite interagiere dann wird quasi diese Interaktion in
- Javascript festgelegt also was dann passieren soll das ganze ist auch wieder eine Textdatei sieht so ein bisschen aus wie Java sie sehen hier hier gibt's
- jetzt so eine Funktion da muss man immer function davor schreiben dann hier der Name dann ähm Parameter und entsprechend hier Klammer auf Klammer zu der Inhalt
- der Funktion sie sehen hier die Parameter haben keine Typen also javaScript ist ein echtes skptsprache die kommt ohne Typen
- aus ansonsten sehr ähnlich zu Java aber eben nicht das Gleiche reine interprenersprache also keine
- Compilersprache so wenn Sie das jetzt nachvollziehen wollen dann machen sie bitteclips auf und erzeugen ein neues Projekt und zwar diesmal finden Sie
- unter other das dynamic web project das nehmen Sie bitte mal und den geben Sie jetzt irgendein
- Namen und dann sieht das ein bisschen anders aus als unsere
- bisherigen Anwendung aber hier gibt's jetzt ein Ordner source den kennen sie schon und hier gibt's ein Ordner Webcontent da kann man jetzt Webcontent
- reintun also wir fangen mal an mit einem HTML fil den nennen Sie am besten Index HTML und sie sehen hier wird dann auch
- gleich so ein Grundgerüst angelegt ma das mal weg also hier oben dieser doct type und dann das was wir eben in der Folie schon gesehen haben
- HTML bis hier runter dann gibt's hier ein head und dann gibt's hier so ein title da geben wir jetzt mal einen anderen Titel ein na machen wir
- mal bere von Brüchen weil das ist das was wir nachher damit machen
- wollen gut jetzt könen wir mal hier irgendwas reinschreiben mein we test und dann speichern wir das ab wenn sie jetzt hier mit der rechten Maustaste
- auf das Index HTML klicken und dann machenchen wir mal openbis Webbrowser dann macht er das mit dem Webbrowser auf der hier im Eclipse integriert ist s
- sehen hier File unsere Index HTML da steht jetzt Test gut machen wir das wieder weg es interessiert uns ja jetzt nicht einfach
- nur ganz normalen Text zu erzeugen wir wollen ja auch ein bisschen Struktur mal da reinbringen also fangen wir mal als erstes mit was ganz einfachem an z.B so
- eine Überschrift erste Ordnung können Sie das hinschreiben H1 Überschrift was man auch machen kann ist z.B ein Bild
- einfügen und der passende Tag dazu heißt Image also IMG ab und der hat mehrere Attribute das erste Attribut W
- die Source da kommt jetzt rein woer das Bild laden soll ein anderes al Attribut ist alt da kommt der alternative Text rein also das was angezeigt
- wird wenn das Bild nicht geladen wird
- ja irgendwie sowas also der Text wird angezeigt wenn der das Bild nicht findet und da das Image ja in sich selbst also s brauchen das Bild hat ja
- keinen weiteren Inhalt so als SCE nehmen Sie sich jetzt irgendein beliebiges Bild ja sie suchen irgendein Bild aus dem Netz so wenn sie jetzt im Netz irgendwo
- ein beliebiges Bild haben wenn Sie mit der rechten Maustaste drauf klicken dann gibt's hier Grafik rresse kopieren ja und die kopieren wir jetzt einfach hier
- in unser source Element hinein sie sehen ja da ganz normal diese die komplette URL von dem Bild abgespeichert und wenn wir jetzt hier mal auf relad klicken
- dann steht hier Überschrift und da drunter ist unser Bild genau so wie wir es hier angegeben haben ne also erst die Überschrift und dann da
- drunter das Bild gut das an sich hilft uns jetzt noch nicht so weit da können wir nicht so viel mitmachen versuchen wir noch ein
- bisschen Struktur da reinzubringen was man also machen kann sind Tabellen anzulegen machen wir das mal also das Tag dafür heißt
- table und in so einer Tabelle sie sehen es immer wenn sie hier diesen Tag aufmachen dann zeigt er Ihnen an was da alles für unterteags erlaubt sind ja so
- eine Tabelle hat ein Kopf und Tabelle hat tabellenkörper na der Unterschied
- ist ein sind halt im Prinzip die Überschriften und das andere ist dann der Inhalt ne wenn z.B so eine Tabelle hTML ist ja Plattform unabhängig
- irgendwie über mehrere Seiten geht nachher dann würde er quasi den Kopf auf jeder Seite neu wiederholen so Köpfe
- und körperfon Tabellen bestehen immer aus rein abgekürzt tr machen wir mal hier eine Reihe rein und die Zelle in so einer Reihe in dem
- Kopf heißt TH also für table head dann nennen wir das mal Spalte
- A und dann ma wir noch eine zweite Spalte die nennen wir Spalte B so im Körper drin braucht wir jetzt auch noch mehrere Reihen
- machen wir mal eine Reihe hier rein ja und wenn jetzt der Kopf zwei Spalten hat dann sollte die Reihe möglichst auch zwei
- Spalten haben nennen wir die mal hier TD A1 und TD
- B1 und damit es dann richtige Tabelle ist wo man was sehen kann machen wir jetzt einfach mal noch eine zweite Reihe in die Tabelle und da
- packen wir jetzt auch einfach zwei Zellen rein die nennen wir jetzt mal A2 und B2 das geht ja nur das Prinzip um mal zu
- verstehen wie das hier funktioniert also schauen wir uns das mal an wie sieht es aus wir haben jetzt hier eine Tabelle Spalte A untereinander stehen Spalte B
- untereinander stehen fertig ne relativ schmucklos aber eine Tabelle gut jetzt wäre es natürlich
- schön wenn man irgendwie das Erscheinungsbild dieser Tabelle steuern könnte das kann man auch indem man nämlich so ein cascading Styles sheet
- dazu definiert und damit der Browser nachher weiß welches cascading Styles shied er laden muss das ist auch wieder nur eine Textdatei muss hier oben in den
- Header ein entsprechender Link rein das Tag heißt Link jetzt will er noch wissen in welche Art von Link das ist also in welcher
- Relation die zueinander stehen D sagen wir jetzt einfach das andere was wir danach laden also das was wir verlinken sei das Stylesheet dann sollte man noch
- ein Typ von dem Stylesheet angeben damit der Browser weiß was ihn erwartet das ist unserem Fall Text schä CSS also ein textfil der CSS Kommandos enthält ja und
- wo liegt das Ding ja wir legen es jetzt am besten gleich mal in denselben Ordner rein und dann können wir eine relative URL nehmen also Main CSS das ganze
- wieder abschließen und dann ist es fertig so jetzt haben wir hier schon einen Link eingebaut auf eine Datei die es noch gar
- nicht gibt es muss soll also jetzt eine Datei geben die Main CSS heißt ja die also unsere Stylesheet Information enthält die machen wir jetzt
- mal hier new und dann drücken Sie auf other und dann wählen Sie CSS aus und dann nehmen wir hier ein CSS fil und der soll ja Main CSS heißen sonst findet ihr
- das ja nachher nicht und sie da da haben wir ihn ja er zeigt hat hier oben schon gleich in der CSS Notation den entsprechenden die entsprechende codier
- angegeben also wir können jetzt hier sofort losprogrammieren so und als erstes würde ich jetzt
- mal die Struktur bzw die Darstellung von den Strukturelementen verändern also wir haben jetzt hier hatten wir gesagt wir haben eine Überschrift erste Ordnung
- dann machen wir jetzt mal noch eine Überschrift zweite Ordnung drunter
- das ist mal die Überschrift 1 dann wäre das die Überschrift 1.1 wir noch mal eine zweite damit man ein bisschen was sieht 2.1 und so weiter
- wenn wir uns das jetzt einfach anschauen sehen wir hier werden mehrere Überschriften ja sie sehen die ist ein bisschen kleiner aber im Prinzip sieht
- jetzt so aus wie der Browser vorgibt wie eine Überschrift aussehen soll so und das können wir jetzt beeinflussen über diese CSS und der Selector also ich
- hab's ja gesagt das ist ja mal so aufgebaut es gibt ein Selector und dann steht hier drin zwischen der geschweiften Klammer die
- Eigenschaft und dahinter der Wert so sieht ja immer aus dann kommt ein Semikolon und dann kann ich die nächste Eigenschaft und ein anderen
- Wert so der Selektor der einfachste Selektor selektiert jetzt einfach die Tags nach ihrem Namen ja schauen wir mal die Tags von den Überschriften heißen H1
- und H2 machen wir das mal einfachsten Selektor H1 geschifte Klammer auf geschweifte Klammer zu und dann weisen wir dem jetzt
- mal eine Schriftart zu das ganze heißt V family weil man jetzt hier mehrere Schriftarten hintereinander angeben kann und der sucht dann auf dem
- Betriebssystem wo er das startet eine Schriftart dies namens wenn er das nicht findet nimmt den nächst und so weiter und es gibt sogenannte
- standardschriftarten s Serif z.B ist eine und die sagt einfach ich hätte gerne eine
- serifenlose Schrift das heißt also wenn er jetzt auf dem Zielsystem kein Areal findet dann würde er irgendwann sagen okay dann nehme ich jetzt einfach die
- für auf diesem System als serifenlose Standardschrift hinterlegte Schrift so wenn wir jetzt reload drücken sehen sie ändert sich hier die Schriftart ja alles
- andere bleibt so wie es ist nur die Schriftart ändert sich wenn ich jetzt sage ich möchte auch dass das bei H2 ist dann kann ich die Selektoren hier durch
- Komma getrennt hintereinander schalten und dann würde er jetzt quasi alle H1 und H2 mit dieser Schriftart
- belegen gut wenn ich jetzt auch noch sag mir gefällt das aber mit der Größe nicht dann bräuchte ich jetzt noch eine Eigenschaft Schriftgröße ne und die
- müsste jetzt bei H1 und bei H2 natürlich verschieden sein also brauche ich zwei Selektoren die H1 soll ein bisschen größer sein als die
- H2 so und jetzt können wir mal hier die Eigenschaft die heißt font size angeben und die darf man angeben in Prozent vom Standardtext wenn wir jetzt
- mal bei den beim H1 200 dann ist die doppelt so groß wie der Standard Text und bei H2 nehmen wir mal
- 170%. dann ist sie immer noch deutlich größer als der Standardtext machen wir hier mal reload sehen Sie hier das der Standardtext dann
- wird die Überschrift ist doppelt so hoch und die Überschrift zweiter Ordnung ist 1,7 mal so hoch und so weiter ne das an sich kann ich jetzt also hier machen
- indem ich sag ich brauche ein Selektor also das was ich mit Eigenschaften belegen will und dann gebe ich hier eben Eigenschaft Doppelpunkt Wert Semikolon
- nächste Eigenschaft Doppelpunkt wert und so weiter an ja dann machen wir doch mal folgendes sagen wir wir wollen vielleicht hier eine richtige Tabelle
- haben also so mit Strichen ja dazu müssten wir eigentlich nur unseren Zellen ein Rahmen verpassen ja die Zellen schauen wir hier nach sind also
- diese THS und diese brauchen wir also einen doppelselektor für THS und TDS TH TD Selector für
- headerzellen und normale Zellen also dataazellen und dann weisen wir dem jetzt mal irgendwie ein borderstyle
- so border Style solid und machen wir die mal auf zwei Pixel breit damit wir jetzt auch was sehen
- machen wir mal reload da sehen sie aha jetzt haben also alle Zellen einen eigenen Rahmen und der ist zwei Pixel breit und ist durchgängig ja
- solid gut also jetzt noch nicht so prickelnd das sieht irgendwie komisch aus also das geschickteste wä ja W die
- hier jetzt zusammen liegen würden damit das ganze aussieht wie eine Tabelle dafür gibt es collapsing und das müssen wir der Tabelle zuweisen der Tag ist
- table so heißt ja hier unsere Tabelle und der weisen wir jetzt mal eine border collapse von collapse zu
- also dass die dass die Abgrenzung quasi aufeinander
- fallen so bis dahin sieht es ganze dann so aus jetzt ist es wirklich eine Tabelle das sind
- Striche dazwischen und so weiter wenn sie jetzt sagen ich will ein bisschen Abstand hier haben zwischen der Tabelle und dem Image dann können Sie hier z.B
- absitz erzwingen indem sie das Paragraph einfügen wenn wir jetzt noch mal auf reload drücken dann macht er uns hier ein kleinen Abstand rein gut also wir
- haben jetzt Tabelle wunderschön me jetzt ist natürlich so ein bisschen der Witz von dem head weg also kann man gar nicht so richtig sehen
- also würde ich jetzt einfach mal sagen wir wollen die jetzt noch ein bisschen hervorheben diese Header und dazu machen wir deren Hintergrund grün so der
- auswahlselektor für diesen Header ist TH das sind ja die Zellen im Tabellen Kopf und die Eigenschaft heißt background color
- und die setzen wir jetzt mal auf green und D sehen wir hier wenn ich jetzt hier auf reload drücke dann wird die grün so und wie Sie diese ganzen Eigenschaften
- finden und auch die Tags da schauen Sie einfach auf der Seite de self html.org
- nach ne das ist die hier und da ist da ist im Prinzip für HTML für die Styles sheets ist komplett erklärt welche Elemente es gibt und welche
- Eigenschaften diese Elemente dann haben die man über die Stylesheets zuweisen kann so jetzt machen wir hier mal
- weiter also so ist hier jetzt noch nicht so viel los also was ich jetzt sehe es gibt ein paar Überschriften und es gibt so eine
- Tabelle m aber da ist ja noch nicht so viel zu sehen so jetzt wollen wir das ganze mal
- zu einer sinnvollen Seite erweitern was uns ja auf jeden Fall noch fehlt sind Eingabemöglichkeiten und dazu braucht man in HTML
- Formulare also ein Formular das Tag heißt Form das kann jetzt verschiedene Inputs enthalten schreiben wir hier mal hin
- Input da gibt's verschiedene Typen wir nehmen jetzt mal einfach den Typ Text also type ist Text so und
- das ganze Ding braucht jetzt noch einen Namen den nennen wir jetzt mal Test 1 eine Größe kann man auch noch
- angeben ja was es auch noch gibt ist Max Leng also die maximale Länge dessen was man eingeben kann ich jetzt auch mal auf
- acht so wenn ich jetzt hier mal schauen sehen sie ist hier jetzt so ein
- Eingabefeld entstanden ne ich kann auch nur acht eingebenenn ich jetzt weiterkilicke dann passiert nichts mehr
- gut also jetzt s uns überlegen der muss ja jetzt wissen wo er das was wir in diesem Formular eingeben hinschicken soll das heißt also wir haben jetzt wir
- schreiben jetzt hier eine Seite und es wird noch eine Seite geben die das Ergebnis oder die Eingabe Verarbeiten des Ergebnis
- ausgibt dazu gibt es das Attribut Action und hier kommt jetzt eine URL hin und da schreiben s jetzt mal bitte kalkjsp rein denn da werden wir später noch eine Java
- serverpage schreiben die das dann für uns macht und da es verschiedene Möglichkeiten gibt wie diese Eingaben jetzt verschickt werden braucht man noch
- eine method und die die wir hier nehmen ist erstmal die mess Post also
- hier steht wo das Ergebnis hingeschickt werden soll hier steht auf welche Art und Weise und alles was hier zwischen ist ist jetzt ganz normal HTML darf aber
- solche Inputs enthalten so damit wir jetzt mal mehr übergeben können W ich sagen wir machen mal das Form hier um diesen
- ganzen diese ganzen Überschriften drum herum das heißt also jetzt dürfen wir von da bis da ich zieh das mal wieder ein bisschen rein dürfen jetzt überall
- Inputs reinschreiben so und damit auf der gegenüberliegenden Seite also auf der Seite wo dieses caljsp ist nachher die Input Felder auseinander gehalten
- werden können brauchen die hier einen Namen so und jetzt fen wir hier mal ein bisschen Inhalt rein da schreiben wir jetzt mal oben hin Berechnung
- verschiedene Operationen mit Brüchen
- so und da ma noch kleine Aufforderung rein bitte geben Sie die eingangsbrüche
- ein Ausrufezeichen ist eine Aufforderung so das sieht jetzt so aus also hier oben unsere Überschrift bitte geben Sie eingangsbrüche ein Ja Grundrechenarten
- sind ja immer zwei Brüche also nehmen wir den einenm erster
- Bruch und den anderen nennen wir zweiter
- Bruch und eigentlich brauche ja so ein Bruch immer zwei input also ein Zähler und einen
- Nenner und die nennen wir dann auch gleich Zähler 1 und Nenner 1 ja das sieht ja ganz gut aus si 8 für
- so ein Zähler ner wird wohl reichen und dann sieht das ganze so aus na das natürlich jetzt nicht schön schöner wäre ja wenn das ganze hier unten wie hier
- mit so einem mit so einer kleinen Tabelle wäre und so machen wir das jetzt auch also wir nehmen jetzt jetzt mal die Tabelle von hier unten wieder vor die
- hier ich kopiere die jetzt mal da oben rein also hier geht die Tabelle los hier hört sie auf hier ist der Header von der
- Tabelle da sind jetzt zwei Spalten drin die benennen wir jetzt mal um in
- was und Eingabe ja und jetzt steht hier war so ein eingab jetzt soll eigentlich hier wo
- A1 steht soll Zähler stehen wo A2 steht schreiben wir Nenner hin und hier sollen jetzt die Eingabefelder rein also nehmen wir also mal den Zähler hier schneiden
- den aus tun den dahin also was sollen wir eingeben den Zähler und was geben wir hier ein den Nenner und hier in diese
- andere hier muss der Nenner ein und hier jeweils in die zweite Spalte also in diese zweite Zelle da soll ja jetzt jeweils dieses Inputfeld rein machen wir
- also hier mal den Zähler rein und
- hier den Zähler 2 ne das heißt also die in diesem Form können wir ganz normal HTML schreiben und können quasi
- in das HTML an die Stellen das reinschreiben was wir haben wollen also hier z.B unsere Eingabefelder für den
- ersten Zähler und den ersten Nenner gut das gleiche brauchen wir jetzt ja noch mal hier unten für den zweiten Bruch da kopieren wir jetzt einfach hier
- noch mal diese Tabelle runter also zweiter Bruch was bleibt alles gleich nur hier machen wir dann das Feld
- nennen wir jetzt um in Zähler 2 und Nenner 2 so
- so jetzt sieht das Ganze also so aus wir haben ein Bruch ein zweiten Bruch und hier unten dann das was wir eben schon hatten nämlich diese zweite Tabelle
- gut da machen wir uns jetzt
- mal so keinen weiteren Kopf drum so was es noch gibt es gibt also eine ganze Reihe von Eingabefeldern jetzt einfach mal exemplarisch wenn man
- jetzt z.B so ein Kommentarfeld haben wollte ja machen wir hier eine Überschrift Kommentar dann würde das Input text area heißen das hat zwei
- Attribute nämlich die Anzahl der Reihen und die Anzahl der Spalten dann schreiben wir jetzt mal rein 40 und
- 10 ja andersrum also 10 Reihen und 40 Spalten das ganze Ding braucht jetzt auch wieder Namen damit man nachher auf der anderen Seite wieder unterscheiden
- kann was der Kommentar ist und was die anderen Sachen sind und dann wollen wir dahinter noch ein Zeilenumbruch der heißt
- BR und dann können wir hier mal noch was eingeben so jetzt schauen wir mal wie das ausschaut das
- schaut so aus also wir haben jetzt den ersten also oben die erste Überschrift dann unseren normalen Text dann ersten Bruch hier mit den beiden e zweiten
- jetzt haben wir hier das Kommentarfeld ja und hier unten geht's dann entsprechend weiter was wir jetzt noch brauchen ist die Möglichkeit das was wir
- da eingegeben haben auf die andere Seite zu schicken dazu brauchen wir ein absendeknopf der absendeknopf ist auch nichts anderes als ein
- Input nur dass der Typ ein anderer ist der heißt nämlich submit und dann können wir noch ein value als value angeben was auf dem
- Knopf drauf stehen soll machen wir das mal so so und das Input hat sonst keinen weiteren Inhalt
- also wird es gleich wieder geschlossen und dann sehen Sie hier erscheint das Abschicken so damit uns jetzt mal die
- untere Tabelle nicht so sehr auf die ü machen wir hier noch mal so ein P rein also so ein Absatz dann ist es weg was es auch noch
- gibt ist weiterer Input der heißt Reset und der sorgt dafür dass alle Eingaben wieder zurückgesetzt werden schreiben
- mal drauf zurücksetzen also schauen wir uns an was passiert wenn ich jetzt also hier eine 5
- eingebe und dann hier auf zurücksetzen klicke dann ist die wieder weg nur das gleiche gilt für den Kommentar ist er wieder weg
- wenn ich abschicken klicke machen wir jetzt nicht dann würde er versuchen das an die kalkjsp zu versenden gut jetzt haben wir eigentlich
- schon ziemlich umfangreiche HTML Seite gebaut jetzt s uns ein bisschen mit der Gestalt beschäftigen also was ganz gut
- ist ist ja dass hier das ganze bisschen anders vom kvertiert ist als das also können wir uns mal vorstellen dass das vielleicht nachher unser Ergebnis
- anzeigt und hier oben sind die Eingaben so jetzt würde ich gerne die Eingaben ein bisschen von den anderen Dingen unterscheiden können
- also das heißt ich möchte hier diese Felder mit einem gelben Hintergrund hinterlegen ohne dass die auch mit dem gelben Hintergrund
- hinterlegt werden ja also der einfachste Fall wäre dass wir jetzt einfach hier sagen okay wir machen uns einen neuen Selector den ganz einfachen Selektor
- nämlich dass wir einfach die die Zellen auswählen und sagen jetzt background color meineswegen yellow damit man immer sieht
- was weiß ich alles wo man was eingeben muss ist gelb hinterlegt ja wenn ich jetzt hier schaue dann stellen sie fest die werden alle gelb wunderbar aber die
- hier auch wenn ich das jetzt nicht möchte dann muss ich jetzt noch eine Möglichkeit finden diese Zellen zu unterscheiden und
- diese Möglichkeit gibt es ich kann nämlich diese Selektoren auch noch auf Klassen und IDs anwenden so dazu müssen wir erstmal in unserem
- HTML die Klasse zuweisen das funktioniert relativ einfach ich kann nämlich jetzt einfach hier in jedem beliebigen Tag und dann
- nehmen wir jetzt einfach mal die Tabelle hier kann ich jetzt sagen es gibt ein Attribut das heißt class und dem kann ich jetzt einen beliebigen Wert zuweisen
- ich nenne den jetzt einfach mal Input so und wenn ich jetzt hier diese Selektoren miteinander
- kombiniere ohne Komma dann wird quasi in jedem gefundenen Element weiter nach dem nächsten Element gesucht und es gibt jetzt eine Möglichkeit nach diesen
- Klassen zu suchen indem ich nämlich einfach vor den Selektoren Punkt mache und dann wäre ja der Selector Input ne sie sehen das hier ist jetzt im Prinzip
- der Name der Klasse wie wir ihn gerade vergeben haben und in dieser Klasse drin alle TDS sollen jetzt die Hintergrundfarbe gelb haben ne das heißt
- also wenn jetzt hier mal im HTML schaue das table hat die Klasse Input in diesem table drin gibt es hier mehrere TDS die müssten jetzt gelb werden schauen mal
- aha also hier in unserem Input das TD ist gelb geworden das TD ist nicht in einer Tabelle Input bleibt weiß und das auch gut um jetzt mal der Logik Genüge
- zu tun müss jetzt die beiden anderen hier auch gelb werden dann machen wir einfach die zweite Tabelle hier auch noch von der
- Klasse Input wenn ich jetzt noch mal reload drücke dann sehen sie sind die beide gelb geworden gut also das war jetzt ein
- einfacher relativ simpler Selektor man kann es noch ein bisschen weiter treiben ich sag ich möchte jetzt aber dass ein ganz bestimmtes Element also sagen wir
- mal z.B diese Zelle hier wo das A1 drin steht dass das Rot wird dann kann ich auch hingehen kann sagen ich will dem jetzt keine Klasse zuweisen die Klasse
- Kön ich mehrfach verwenden ne also haben wir ja oben gesehen beide Tabellen hatten die gleiche Klasse ich s einfach z.B dieses
- TD das hat jetzt eine ID die nenne ich jetzt mal important weil die will ich jetzt hervorheben ich sagen die ist mir ganz
- wichtig dafgebe ich die IT ID important und jetzt gibt es speziellen Selektor neämlich mit dem V vorangestellten Lattenkreuz ja und wenn ich den auswähle
- dann geht er nämlich auf die ID und dann machen wir jetzt mal die background color red ja also das wir das hier
- hervorhebt so also jetzt sind die hier haben immer noch die Klasse von eben und hier dieses eine Element mit der ID wird jetzt genau rot
- gemacht
Zum Nachlesen
Hypertext Markup LanguageDie Hypertext Markup Language (HTML, englisch für Hypertext-Auszeichnungssprache) ist eine textbasierte Auszeichnungssprache zur Strukturierung …
Cascading Style SheetsCSS wurde entworfen, um Darstellungsvorgaben weitgehend von den Inhalten zu trennen. Wenn diese Trennung konsequent vollzogen wird, werden nur noch die …