1. Inline-Styles
Inline-Styles werden direkt in HTML-Tags eingebaut, um ein einzelnes Element zu formatieren. Hier ist ein Beispiel:
Dieser Text hat einen Inline-Style für den Hintergrund und das Padding.
2. Style-Tags im Head
Mit Style-Tags im Kopfbereich der HTML-Datei kann man die gesamte Seite oder bestimmte Bereiche formatieren. Hier ist ein Beispiel:
Im Beispiel oben werden die Schriftfarbe und der Hintergrund für alle Elemente definiert.
3. Externe CSS-Datei
Eine weitere Möglichkeit besteht darin, eine externe CSS-Datei zu verwenden. Diese wird jedoch hier nicht gezeigt, aber sie ist eine weit verbreitete Methode zur Trennung von Inhalt und Design.
Grundlagen der Web-Gestaltung
HTML
HTML benötigt man für Inhalt und Struktur einer Webseite.
CSS
CSS benötigt man für Layout und Formatierung einer Webseite.
CSS-Sprücher
CSS-Code besteht aus Regeln. Eine Regel besteht aus einem Selektor und einem Deklarationsblock. Ein Deklarationsblock besteht aus Deklarationen und ist durch geschwungene Klammern eingeschlossen. Eine Deklaration besteht aus Eigenschaft und Wert, die durch einen Doppelpunkt voneinander getrennt werden und von einem Strichpunkt abgeschlossen werden.
Hyperlinks
Hier geht es zu Website des ORF
Bilder
Sprungziele
Inhalt
Kapitel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lorem tellus, malesuada vitae faucibus vel, blandit at nibh. Cras bibendum ligula vel faucibus blandit. Aenean tempus odio dui, in faucibus urna rhoncus nec. Quisque eu velit libero. Quisque cursus ornare suscipit. Nulla facilisi. Vivamus mattis sit amet nibh eget ornare. Sed egestas turpis ut semper vestibulum. Sed est erat, suscipit at neque varius, iaculis ultrices justo. Integer faucibus sollicitudin nisl sit amet convallis. Aenean sed dapibus nisi. Etiam sed cursus velit, sed ornare sem. In in pulvinar neque. Donec accumsan condimentum cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem massa, sagittis id orci semper, aliquam vehicula est. Praesent pharetra vehicula mauris eu ultrices. Vestibulum ac dignissim mauris, eu placerat odio. Sed a orci purus. Sed sit amet dictum eros. Sed vestibulum ex ut sem fermentum auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ligula metus, tincidunt eu aliquet non, mattis eu massa. Duis suscipit malesuada ultrices. Proin quis accumsan enim. Maecenas in volutpat ligula. Morbi nisi justo, pulvinar ut viverra eu, ultrices a odio. Fusce eu leo vestibulum nibh eleifend pellentesque at id nisl. Sed et aliquet metus, non finibus ex. Vestibulum mattis aliquet dui et porttitor. Nullam id lectus ac elit sollicitudin placerat vitae sit amet lorem. Sed interdum pretium nunc eu imperdiet. Suspendisse maximus placerat efficitur. Aliquam fringilla cursus enim at lobortis. Ut tincidunt ex nec lectus sagittis viverra. Donec ut erat commodo, aliquet lacus vel, commodo arcu. Vestibulum dolor mi, malesuada non mauris in, congue cursus nulla. Phasellus malesuada, ligula a volutpat lobortis, elit orci tincidunt urna, iaculis sollicitudin tortor tellus in nisi. In hac habitasse platea dictumst. Sed augue justo, cursus vitae aliquet nec, vestibulum quis erat. Nam ultricies consectetur ligula, vel dictum erat condimentum ut. Nullam convallis diam lacinia, pellentesque mi vel, ornare ex. Nulla sed pellentesque turpis, quis fermentum dolor. Donec gravida vehicula mauris, in vestibulum libero sagittis eu. Etiam in neque sit amet risus elementum elementum. Aliquam pellentesque velit at facilisis hendrerit. Proin vel est eu justo rhoncus pulvinar. Suspendisse ac dapibus tortor. Integer ex purus, tristique ac mattis id, iaculis in arcu. Cras ac enim et sem tristique pulvinar blandit sit amet eros. Mauris blandit at orci vel gravida. In pretium velit sit amet viverra posuere. In massa libero, ullamcorper vitae porta vitae, luctus eget leo. Suspendisse malesuada dapibus dolor eget pharetra. Quisque porttitor, nisi non egestas pellentesque, metus mauris lobortis mauris, sit amet venenatis odio metus vitae leo. Maecenas blandit tincidunt mauris, ac tincidunt justo vehicula at. Integer consequat interdum arcu ac tincidunt. Vivamus nec orci et purus commodo viverra nec quis velit. Pellentesque posuere sapien quam, sed pulvinar leo accumsan nec. Nulla quis elit at massa tempus blandit. Vivamus pellentesque volutpat egestas. Ut efficitur molestie risus, et viverra nisl. Donec in auctor dolor, in egestas nisl. Pellentesque gravida lacus at erat volutpat aliquet. Nullam auctor mauris quis vehicula venenatis. Nullam convallis mauris sit amet velit placerat, in cursus est sagittis. Aliquam luctus eu diam at.
TOPKapitel 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lorem tellus, malesuada vitae faucibus vel, blandit at nibh. Cras bibendum ligula vel faucibus blandit. Aenean tempus odio dui, in faucibus urna rhoncus nec. Quisque eu velit libero. Quisque cursus ornare suscipit. Nulla facilisi. Vivamus mattis sit amet nibh eget ornare. Sed egestas turpis ut semper vestibulum. Sed est erat, suscipit at neque varius, iaculis ultrices justo. Integer faucibus sollicitudin nisl sit amet convallis. Aenean sed dapibus nisi. Etiam sed cursus velit, sed ornare sem. In in pulvinar neque. Donec accumsan condimentum cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem massa, sagittis id orci semper, aliquam vehicula est. Praesent pharetra vehicula mauris eu ultrices. Vestibulum ac dignissim mauris, eu placerat odio. Sed a orci purus. Sed sit amet dictum eros. Sed vestibulum ex ut sem fermentum auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ligula metus, tincidunt eu aliquet non, mattis eu massa. Duis suscipit malesuada ultrices. Proin quis accumsan enim. Maecenas in volutpat ligula. Morbi nisi justo, pulvinar ut viverra eu, ultrices a odio. Fusce eu leo vestibulum nibh eleifend pellentesque at id nisl. Sed et aliquet metus, non finibus ex. Vestibulum mattis aliquet dui et porttitor. Nullam id lectus ac elit sollicitudin placerat vitae sit amet lorem. Sed interdum pretium nunc eu imperdiet. Suspendisse maximus placerat efficitur. Aliquam fringilla cursus enim at lobortis. Ut tincidunt ex nec lectus sagittis viverra. Donec ut erat commodo, aliquet lacus vel, commodo arcu. Vestibulum dolor mi, malesuada non mauris in, congue cursus nulla. Phasellus malesuada, ligula a volutpat lobortis, elit orci tincidunt urna, iaculis sollicitudin tortor tellus in nisi. In hac habitasse platea dictumst. Sed augue justo, cursus vitae aliquet nec, vestibulum quis erat. Nam ultricies consectetur ligula, vel dictum erat condimentum ut. Nullam convallis diam lacinia, pellentesque mi vel, ornare ex. Nulla sed pellentesque turpis, quis fermentum dolor. Donec gravida vehicula mauris, in vestibulum libero sagittis eu. Etiam in neque sit amet risus elementum elementum. Aliquam pellentesque velit at facilisis hendrerit. Proin vel est eu justo rhoncus pulvinar. Suspendisse ac dapibus tortor. Integer ex purus, tristique ac mattis id, iaculis in arcu. Cras ac enim et sem tristique pulvinar blandit sit amet eros. Mauris blandit at orci vel gravida. In pretium velit sit amet viverra posuere. In massa libero, ullamcorper vitae porta vitae, luctus eget leo. Suspendisse malesuada dapibus dolor eget pharetra. Quisque porttitor, nisi non egestas pellentesque, metus mauris lobortis mauris, sit amet venenatis odio metus vitae leo. Maecenas blandit tincidunt mauris, ac tincidunt justo vehicula at. Integer consequat interdum arcu ac tincidunt. Vivamus nec orci et purus commodo viverra nec quis velit. Pellentesque posuere sapien quam, sed pulvinar leo accumsan nec. Nulla quis elit at massa tempus blandit. Vivamus pellentesque volutpat egestas. Ut efficitur molestie risus, et viverra nisl. Donec in auctor dolor, in egestas nisl. Pellentesque gravida lacus at erat volutpat aliquet. Nullam auctor mauris quis vehicula venenatis. Nullam convallis mauris sit amet velit placerat, in cursus est sagittis. Aliquam luctus eu diam at.
Kapitel 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lorem tellus, malesuada vitae faucibus vel, blandit at nibh. Cras bibendum ligula vel faucibus blandit. Aenean tempus odio dui, in faucibus urna rhoncus nec. Quisque eu velit libero. Quisque cursus ornare suscipit. Nulla facilisi. Vivamus mattis sit amet nibh eget ornare. Sed egestas turpis ut semper vestibulum. Sed est erat, suscipit at neque varius, iaculis ultrices justo. Integer faucibus sollicitudin nisl sit amet convallis. Aenean sed dapibus nisi. Etiam sed cursus velit, sed ornare sem. In in pulvinar neque. Donec accumsan condimentum cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem massa, sagittis id orci semper, aliquam vehicula est. Praesent pharetra vehicula mauris eu ultrices. Vestibulum ac dignissim mauris, eu placerat odio. Sed a orci purus. Sed sit amet dictum eros. Sed vestibulum ex ut sem fermentum auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ligula metus, tincidunt eu aliquet non, mattis eu massa. Duis suscipit malesuada ultrices. Proin quis accumsan enim. Maecenas in volutpat ligula. Morbi nisi justo, pulvinar ut viverra eu, ultrices a odio. Fusce eu leo vestibulum nibh eleifend pellentesque at id nisl. Sed et aliquet metus, non finibus ex. Vestibulum mattis aliquet dui et porttitor. Nullam id lectus ac elit sollicitudin placerat vitae sit amet lorem. Sed interdum pretium nunc eu imperdiet. Suspendisse maximus placerat efficitur. Aliquam fringilla cursus enim at lobortis. Ut tincidunt ex nec lectus sagittis viverra. Donec ut erat commodo, aliquet lacus vel, commodo arcu. Vestibulum dolor mi, malesuada non mauris in, congue cursus nulla. Phasellus malesuada, ligula a volutpat lobortis, elit orci tincidunt urna, iaculis sollicitudin tortor tellus in nisi. In hac habitasse platea dictumst. Sed augue justo, cursus vitae aliquet nec, vestibulum quis erat. Nam ultricies consectetur ligula, vel dictum erat condimentum ut. Nullam convallis diam lacinia, pellentesque mi vel, ornare ex. Nulla sed pellentesque turpis, quis fermentum dolor. Donec gravida vehicula mauris, in vestibulum libero sagittis eu. Etiam in neque sit amet risus elementum elementum. Aliquam pellentesque velit at facilisis hendrerit. Proin vel est eu justo rhoncus pulvinar. Suspendisse ac dapibus tortor. Integer ex purus, tristique ac mattis id, iaculis in arcu. Cras ac enim et sem tristique pulvinar blandit sit amet eros. Mauris blandit at orci vel gravida. In pretium velit sit amet viverra posuere. In massa libero, ullamcorper vitae porta vitae, luctus eget leo. Suspendisse malesuada dapibus dolor eget pharetra. Quisque porttitor, nisi non egestas pellentesque, metus mauris lobortis mauris, sit amet venenatis odio metus vitae leo. Maecenas blandit tincidunt mauris, ac tincidunt justo vehicula at. Integer consequat interdum arcu ac tincidunt. Vivamus nec orci et purus commodo viverra nec quis velit. Pellentesque posuere sapien quam, sed pulvinar leo accumsan nec. Nulla quis elit at massa tempus blandit. Vivamus pellentesque volutpat egestas. Ut efficitur molestie risus, et viverra nisl. Donec in auctor dolor, in egestas nisl. Pellentesque gravida lacus at erat volutpat aliquet. Nullam auctor mauris quis vehicula venenatis. Nullam convallis mauris sit amet velit placerat, in cursus est sagittis. Aliquam luctus eu diam at.
Kapitel 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lorem tellus, malesuada vitae faucibus vel, blandit at nibh. Cras bibendum ligula vel faucibus blandit. Aenean tempus odio dui, in faucibus urna rhoncus nec. Quisque eu velit libero. Quisque cursus ornare suscipit. Nulla facilisi. Vivamus mattis sit amet nibh eget ornare. Sed egestas turpis ut semper vestibulum. Sed est erat, suscipit at neque varius, iaculis ultrices justo. Integer faucibus sollicitudin nisl sit amet convallis. Aenean sed dapibus nisi. Etiam sed cursus velit, sed ornare sem. In in pulvinar neque. Donec accumsan condimentum cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem massa, sagittis id orci semper, aliquam vehicula est. Praesent pharetra vehicula mauris eu ultrices. Vestibulum ac dignissim mauris, eu placerat odio. Sed a orci purus. Sed sit amet dictum eros. Sed vestibulum ex ut sem fermentum auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ligula metus, tincidunt eu aliquet non, mattis eu massa. Duis suscipit malesuada ultrices. Proin quis accumsan enim. Maecenas in volutpat ligula. Morbi nisi justo, pulvinar ut viverra eu, ultrices a odio. Fusce eu leo vestibulum nibh eleifend pellentesque at id nisl. Sed et aliquet metus, non finibus ex. Vestibulum mattis aliquet dui et porttitor. Nullam id lectus ac elit sollicitudin placerat vitae sit amet lorem. Sed interdum pretium nunc eu imperdiet. Suspendisse maximus placerat efficitur. Aliquam fringilla cursus enim at lobortis. Ut tincidunt ex nec lectus sagittis viverra. Donec ut erat commodo, aliquet lacus vel, commodo arcu. Vestibulum dolor mi, malesuada non mauris in, congue cursus nulla. Phasellus malesuada, ligula a volutpat lobortis, elit orci tincidunt urna, iaculis sollicitudin tortor tellus in nisi. In hac habitasse platea dictumst. Sed augue justo, cursus vitae aliquet nec, vestibulum quis erat. Nam ultricies consectetur ligula, vel dictum erat condimentum ut. Nullam convallis diam lacinia, pellentesque mi vel, ornare ex. Nulla sed pellentesque turpis, quis fermentum dolor. Donec gravida vehicula mauris, in vestibulum libero sagittis eu. Etiam in neque sit amet risus elementum elementum. Aliquam pellentesque velit at facilisis hendrerit. Proin vel est eu justo rhoncus pulvinar. Suspendisse ac dapibus tortor. Integer ex purus, tristique ac mattis id, iaculis in arcu. Cras ac enim et sem tristique pulvinar blandit sit amet eros. Mauris blandit at orci vel gravida. In pretium velit sit amet viverra posuere. In massa libero, ullamcorper vitae porta vitae, luctus eget leo. Suspendisse malesuada dapibus dolor eget pharetra. Quisque porttitor, nisi non egestas pellentesque, metus mauris lobortis mauris, sit amet venenatis odio metus vitae leo. Maecenas blandit tincidunt mauris, ac tincidunt justo vehicula at. Integer consequat interdum arcu ac tincidunt. Vivamus nec orci et purus commodo viverra nec quis velit. Pellentesque posuere sapien quam, sed pulvinar leo accumsan nec. Nulla quis elit at massa tempus blandit. Vivamus pellentesque volutpat egestas. Ut efficitur molestie risus, et viverra nisl. Donec in auctor dolor, in egestas nisl. Pellentesque gravida lacus at erat volutpat aliquet. Nullam auctor mauris quis vehicula venenatis. Nullam convallis mauris sit amet velit placerat, in cursus est sagittis. Aliquam luctus eu diam at.
Kapitel 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lorem tellus, malesuada vitae faucibus vel, blandit at nibh. Cras bibendum ligula vel faucibus blandit. Aenean tempus odio dui, in faucibus urna rhoncus nec. Quisque eu velit libero. Quisque cursus ornare suscipit. Nulla facilisi. Vivamus mattis sit amet nibh eget ornare. Sed egestas turpis ut semper vestibulum. Sed est erat, suscipit at neque varius, iaculis ultrices justo. Integer faucibus sollicitudin nisl sit amet convallis. Aenean sed dapibus nisi. Etiam sed cursus velit, sed ornare sem. In in pulvinar neque. Donec accumsan condimentum cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem massa, sagittis id orci semper, aliquam vehicula est. Praesent pharetra vehicula mauris eu ultrices. Vestibulum ac dignissim mauris, eu placerat odio. Sed a orci purus. Sed sit amet dictum eros. Sed vestibulum ex ut sem fermentum auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ligula metus, tincidunt eu aliquet non, mattis eu massa. Duis suscipit malesuada ultrices. Proin quis accumsan enim. Maecenas in volutpat ligula. Morbi nisi justo, pulvinar ut viverra eu, ultrices a odio. Fusce eu leo vestibulum nibh eleifend pellentesque at id nisl. Sed et aliquet metus, non finibus ex. Vestibulum mattis aliquet dui et porttitor. Nullam id lectus ac elit sollicitudin placerat vitae sit amet lorem. Sed interdum pretium nunc eu imperdiet. Suspendisse maximus placerat efficitur. Aliquam fringilla cursus enim at lobortis. Ut tincidunt ex nec lectus sagittis viverra. Donec ut erat commodo, aliquet lacus vel, commodo arcu. Vestibulum dolor mi, malesuada non mauris in, congue cursus nulla. Phasellus malesuada, ligula a volutpat lobortis, elit orci tincidunt urna, iaculis sollicitudin tortor tellus in nisi. In hac habitasse platea dictumst. Sed augue justo, cursus vitae aliquet nec, vestibulum quis erat. Nam ultricies consectetur ligula, vel dictum erat condimentum ut. Nullam convallis diam lacinia, pellentesque mi vel, ornare ex. Nulla sed pellentesque turpis, quis fermentum dolor. Donec gravida vehicula mauris, in vestibulum libero sagittis eu. Etiam in neque sit amet risus elementum elementum. Aliquam pellentesque velit at facilisis hendrerit. Proin vel est eu justo rhoncus pulvinar. Suspendisse ac dapibus tortor. Integer ex purus, tristique ac mattis id, iaculis in arcu. Cras ac enim et sem tristique pulvinar blandit sit amet eros. Mauris blandit at orci vel gravida. In pretium velit sit amet viverra posuere. In massa libero, ullamcorper vitae porta vitae, luctus eget leo. Suspendisse malesuada dapibus dolor eget pharetra. Quisque porttitor, nisi non egestas pellentesque, metus mauris lobortis mauris, sit amet venenatis odio metus vitae leo. Maecenas blandit tincidunt mauris, ac tincidunt justo vehicula at. Integer consequat interdum arcu ac tincidunt. Vivamus nec orci et purus commodo viverra nec quis velit. Pellentesque posuere sapien quam, sed pulvinar leo accumsan nec. Nulla quis elit at massa tempus blandit. Vivamus pellentesque volutpat egestas. Ut efficitur molestie risus, et viverra nisl. Donec in auctor dolor, in egestas nisl. Pellentesque gravida lacus at erat volutpat aliquet. Nullam auctor mauris quis vehicula venenatis. Nullam convallis mauris sit amet velit placerat, in cursus est sagittis. Aliquam luctus eu diam at.
Kapitel 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lorem tellus, malesuada vitae faucibus vel, blandit at nibh. Cras bibendum ligula vel faucibus blandit. Aenean tempus odio dui, in faucibus urna rhoncus nec. Quisque eu velit libero. Quisque cursus ornare suscipit. Nulla facilisi. Vivamus mattis sit amet nibh eget ornare. Sed egestas turpis ut semper vestibulum. Sed est erat, suscipit at neque varius, iaculis ultrices justo. Integer faucibus sollicitudin nisl sit amet convallis. Aenean sed dapibus nisi. Etiam sed cursus velit, sed ornare sem. In in pulvinar neque. Donec accumsan condimentum cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem massa, sagittis id orci semper, aliquam vehicula est. Praesent pharetra vehicula mauris eu ultrices. Vestibulum ac dignissim mauris, eu placerat odio. Sed a orci purus. Sed sit amet dictum eros. Sed vestibulum ex ut sem fermentum auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ligula metus, tincidunt eu aliquet non, mattis eu massa. Duis suscipit malesuada ultrices. Proin quis accumsan enim. Maecenas in volutpat ligula. Morbi nisi justo, pulvinar ut viverra eu, ultrices a odio. Fusce eu leo vestibulum nibh eleifend pellentesque at id nisl. Sed et aliquet metus, non finibus ex. Vestibulum mattis aliquet dui et porttitor. Nullam id lectus ac elit sollicitudin placerat vitae sit amet lorem. Sed interdum pretium nunc eu imperdiet. Suspendisse maximus placerat efficitur. Aliquam fringilla cursus enim at lobortis. Ut tincidunt ex nec lectus sagittis viverra. Donec ut erat commodo, aliquet lacus vel, commodo arcu. Vestibulum dolor mi, malesuada non mauris in, congue cursus nulla. Phasellus malesuada, ligula a volutpat lobortis, elit orci tincidunt urna, iaculis sollicitudin tortor tellus in nisi. In hac habitasse platea dictumst. Sed augue justo, cursus vitae aliquet nec, vestibulum quis erat. Nam ultricies consectetur ligula, vel dictum erat condimentum ut. Nullam convallis diam lacinia, pellentesque mi vel, ornare ex. Nulla sed pellentesque turpis, quis fermentum dolor. Donec gravida vehicula mauris, in vestibulum libero sagittis eu. Etiam in neque sit amet risus elementum elementum. Aliquam pellentesque velit at facilisis hendrerit. Proin vel est eu justo rhoncus pulvinar. Suspendisse ac dapibus tortor. Integer ex purus, tristique ac mattis id, iaculis in arcu. Cras ac enim et sem tristique pulvinar blandit sit amet eros. Mauris blandit at orci vel gravida. In pretium velit sit amet viverra posuere. In massa libero, ullamcorper vitae porta vitae, luctus eget leo. Suspendisse malesuada dapibus dolor eget pharetra. Quisque porttitor, nisi non egestas pellentesque, metus mauris lobortis mauris, sit amet venenatis odio metus vitae leo. Maecenas blandit tincidunt mauris, ac tincidunt justo vehicula at. Integer consequat interdum arcu ac tincidunt. Vivamus nec orci et purus commodo viverra nec quis velit. Pellentesque posuere sapien quam, sed pulvinar leo accumsan nec. Nulla quis elit at massa tempus blandit. Vivamus pellentesque volutpat egestas. Ut efficitur molestie risus, et viverra nisl. Donec in auctor dolor, in egestas nisl. Pellentesque gravida lacus at erat volutpat aliquet. Nullam auctor mauris quis vehicula venenatis. Nullam convallis mauris sit amet velit placerat, in cursus est sagittis. Aliquam luctus eu diam at.