Einführung in die Webentwicklung
Werbung
Einführung in die Webentwicklung Mit HTML5 und CSS3 auf dem Weg zur eigenen Website Kerstin Blumenstein EXPOSEE Dieses Script beinhaltet alle in dem Kurs durchgenommenen Code-­‐Teile mit Erklärungen von Tag 1. Ort ditact, Salzburg Zeitraum 25.08.2014 09:00 bis 12:15 -­‐ Einführung, Lektion 1, 2, 3, 5, 6 14:00 bis 16:30 -­‐ Challenge 2 (Lektion 8), Lektion 7, 9, 10, Challenge 3 (Lektion 11) 26.08.2014 09:00 bis 12:15 -­‐ Bauen einer einfachen responsive Website mit Verlinkungen von eigenen Seiten untereinander, Zeichenkodierung, Mobile First 14:00 bis 16:30 – Fortsetzung Bauen einer einfachen Website, Testen in verschiedenen Browser Kurs-­‐Inhalte1 •
•
•
•
•
•
•
•
Das WWW, was ist das? HTML(5) – Syntax, die wichtigsten Elemente und Informationen CSS(3) – Syntax, die wichtigsten Eigenschaften und Informationen Umsetzung eines einfachen Prototypen Zeichenkodierung & Browserkompatibilität Validieren von HTML & CSS Tipps und Tricks zur Selbsthilfe Bauen einer einfachen Responsive Website (Mobile First) Verwendete Software Coding Plattform: http://kblumenstein.students.fhstp.ac.at/ditact/ à Login mit Usernamen-­‐Kürzel aus 1. Buchstabe des Vornamens + Nachname (z.B. Kerstin Blumenstein = kblumenstein), Passwort ist der Username mit den Buchstaben pw davor (pwkblumenstein) Texteditor: Sublime (http://www.sublimetext.com) 1 Für theoretische Inhalte siehe Folien. 2 Code Lektion 1 – Mit HTML starten <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- sichtbarer Seiteninhalt -->
</body>
</html>
Erklärung: • Doctype à Angabe zur verwendeten HTML-­‐Version (http://www.w3schools.com/tags/tag_doctype.asp) • Kommentare (<!-­‐-­‐ -­‐-­‐>) • HTML-­‐Elemente werden geschrieben • Ein Element wird Tag genannt • Start Tag <html> à umschlossen von ‚kleiner als’ & ‚größer als’ • End Tag </html> à zusätzlich Slash nach ‚kleiner als’ • Das Set <html></html> sagt Browser, wo HTML anfängt und endet • Jedes HTML-­‐File muss anfangen und enden mit html-­‐Tags <head> & <body> • zwei Hauptteile eines HTML-­‐Dokumentes • <head>: Informationen über das Dokument, die nicht sichtbar sind o wichtiges Element im <head> ist <title> o <title> darf nicht leer sein • <body>: alles andere, das im Browserfenster sichtbar sein soll Wichtig: • <html>-­‐Elemente müssen verschachtelt sein • wenn ein Tag geöffnet wurde, kann kein anderer vorheriger Tag geschlossen werden, bis der letzte Tag, der geöffnet wurde, geschlossen wurde ToDo 1. Text schreiben (im <body>) <p>Hallo Welt</p>
Erklärung: Der p-­‐Tag • steht für Paragraph / Textabsatz • dienen der optischen Gliederung eines Textes • Start Tag <p>: leitet einen Textabsatz ein • End Tag </p>: beendet eine Textabsatz 3 2. mind. zwei weitere p-­‐Tags einbauen à Was schreiben? Blindtextgeneratoren findet man über Google z.B. http://www.blindtextgenerator.de 3. Check, ob Code validierbar http://validator.w3.org/#validate_by_input à Hilfsmittel zum Kontrollieren des geschriebenen Codes * Browser verzeiht viel (aber nicht jeder), der Validator verzeiht nichts, was nicht im Standard vorgesehen ist 4 Lektion 2 – Überschriften, Links & Bilder <html>
<head>
<title></title>
</head>
<body>
am wichtigsten
sehr wichtig
wichtig
weniger wichtig
noch weniger wichtig
am wenigsten wichtig
</body>
</html>
ToDo Überschrift & Links 1. Die Worte „am wichtigsten“ durch eine Überschrift 1. Ordnung als wichtig hervorheben Erklärung: Überschriften • Können genutzt werden, um Inhalten unterschiedlich zu gewichten • Dafür werden heading-­‐Tags genutzt • Geht von h1 bis h6 2. sehr wichtig als Überschrift 2. Ordnung auszeichnen, wichtig mit Überschrift 3. Ordnung usw. bis 6. Ordnung 3. Link-­‐Tag einfügen (Start-­‐ & End-­‐Tag) – Text, der im Browser sichtbar (und damit auch klickbar sein soll) zwischen Start & End-­‐Tag schreiben <a>http://www.ditact.ac.at</a>
Erklärung: Hyperlinks • ist Text (besser ein Element), der/das klickbar ist • wenn draufklicken, dann in der Regel auf andere Seite • a = anchor / Anker • können auch genutzt werden, um innerhalb eines Dokumentes zu springen • um nutzbar zu machen, werden Attribute benötigt o Attribute = zusätzliche Information, die sich im Start Tag befindet o href => hyper reference o Als Wert für href = „Verweisziel in Anführungszeichen“ o Weiteres Attribute für a-­‐Tag: z.B. title, um den Link zu beschreiben à erscheint als Tooltip, wenn man mind. 2 sec. Maus über den Link hält 4. Link nutzbar machen <a href=“http://www.ditact.ac.at“>zur Ditact-Website</a>
5. zweiten Link schreiben zu einer beliebigen Seite mit title-­‐Attribute -­‐ selbstständig 5 <a href=“http://www.ditact.ac.at“ title=“Der Link geht zur
Website der Ditact“>zur Ditact-Website</a>
à Check, ob Code validierbar ToDo Bilder Erklärung: • img-­‐Tag à gehört in den Body-­‐Tag (wie alles, was im Browser-­‐Fenster sichtbar sein soll • wird kein End-­‐Tag benötigt, weil kein Text zwischen Start-­‐ & End-­‐Tag steht, der angezeigt werden soll, innerhalb eines img-­‐Tags kann nichts verschachtelt sein • in XHTML (Vorgänger von HTML5) musste Tag geschlossen werden durch Slash vor größer als) – in HTML5 nicht mehr nötig • src-­‐Attribut = Source / Quelle • width, height = Breite und Höhe des angezeigten Bildes bestimmen // für später: besserer Weg ist über CSS diese Werte bestimmen (kommt später) • wird nur width oder height angegeben, berechnet der Browser die jeweils andere Dimension, Bild bleibt proportional 5. img-­‐Tag hinzufügen <img>
6. src-­‐Attribute hinzufügen à Quelle aus Internet z.b. ditact-­‐Logo Wichtig: Rechtslage!!! Nicht einfach Bild von einer fremden Website auf meiner eigenen veröffentlichen, wenn dann Genehmigung des Rechteinhabers einholen <img src=“http://ditact.ac.at/wpcontent/themes/velocity/images/logos/ditact_cropped.png“>
7. mit Breite und Höhe des Bildes spielen <img src=“http://ditact.ac.at/wpcontent/themes/velocity/images/logos/ditact_cropped.png“
width=“176“ height=“54“ />
à Check, ob Code validierbar 8. alt-­‐Tag hinzufügen • Pflichtangabe für eine img-­‐Einbindung • Alternativtext für den Fall, das Bild nicht angezeigt werden kann • Bei Schmuckgrafiken, die keinen Inhalt besitzen: alt=““, keine unsinnigen Inhalte wie z.b. Dateinamen reinschreiben <img alt=“Logo der ditact“ src=“http://ditact.ac.at/wpcontent/themes/velocity/images/logos/ditact_cropped.png“
width=“176“ height=“54“ />
9. Bild mit Link versehen <a href=http://www.ditact.ac.at>
6 <img src=“http://ditact.ac.at/wpcontent/themes/velocity/images/logos/ditact_cropped.png“
width=“176“ height=“54“ />
</a>
à Check, ob Code validierbar Lektion 3 – Listen <!DOCTYPE html>
<html>
<head></head>
<body>
Was ich mir wünsche:
iPhone5
schönes Wetter
und noch viel mehr
Was ich mir nicht wünsche:
Nokia 1100
Regen
und sonst nichts
</body>
</html>
• Unterscheidung in ordered (geordnete) und unordered (ungeordnete) Listen • Gesamte Liste wird durch <ol> bzw. <ul> umklammert • Einzelne Punkte der Listen mit <li> ausgezeichnet • <ol>: ordered – Liste ist nummeriert • <ul>: unordered – Liste hat standardmäßig Punkte vorweg (mit CSS einstellbar) • Menüs werden mit ungeordneten Listen erstellt 1. Unordered Liste aus den ersten Punkten machen (Was ich mir wünsche) <h1>Was ich mir wünsche:</h1>
<ul>
<li>iPhone6</li>
<li>schönes Wetter</li>
<li>und noch viel mehr</li>
</ul>
2. Selbständig aus den zweiten Punkten (was ich mir nicht wünsche) eine ordered Liste machen: Hinweis <ol>! <h1>Was ich mir nicht wünsche:</h1>
<ol>
<li>Nokia 1100</li>
<li>Regen</li>
<li>und sonst nichts</li>
</ol>
7 à Check, ob Code validierbar 3. Verschachtelung von Listen <li>
und sonst nichts außer
<ol>
<li>Spinat</li>
<li>sauber machen</li>
</ol>
</li>
à Verschachtelung wird für Navigationen benötigt, die aus mehreren Ebenen bestehen CSS Einführung à siehe Folien 8 Lektion 5 -­‐ Inline-­‐Styling mit CSS <!DOCTYPE html>
<html>
<head>
<title>Inline-Styling mit CSS</title>
</head>
<body>
<p style="color:blue;">Ich will grün sein!</p>
<p style="color:#00FFFF;">Ich will rot als RGB-Wert
sein!</p>
<p>
Überall dieselbe alte Leier.<br/>
Das Layout ist fertig, der Text lässt auf sich
warten.
</p>
<p>
Damit das Layout nun nicht nackt im Raume steht
und sich klein und leer vorkommt,<br/>
springe ich ein: der Blindtext.
</p>
</body>
</html>
1. Erfülle den ersten beiden Textabsätzen ihre Wünsche. (selbständig) <p style=“color:green;“>Ich will grün sein!</p>
<p style=“color:#FF0000;“>Ich will rot als RGB-Wert sein!</p>
2. Die beiden nächsten Textabsätze sollen rechtsbündig ausgerichtet werden – mit Inline CSS. <p style=“text-align: right;“>TEXT</p>
9 Lektion 6 – Styling mit Internal Style Sheet <!DOCTYPE html>
<html>
<head>
<title>Styling mit Internal Style Sheet</title>
<style type="text/css">
h1{
font-size: 12px;
}
</style>
</head>
<body>
<h1>Gib mir die Schriftgröße 20px.</h1>
<p>Überall dieselbe alte Leier. Das Layout ist fertig,
der Text lässt auf sich warten.</p>
<p>Damit das Layout nun nicht nackt im Raume steht und
sich klein und leer vorkommt, springe ich ein: der
Blindtext.</p>
<p>Genau zu diesem Zwecke erschaffen, immer im
Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich
jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est
percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon
die Güte haben, mich ein paar weitere Sätze lang zu begleiten,
möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als
Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das</p>
</body>
</html>
1. Weise der Überschrift 1. Ordnung die Schriftgröße 20px zu. h1{
font-size: 20px;
}
2. Richte alle Textabsätze zentriert aus. p{
text-align: center;
}
10 3. Es soll nur das Wort Layout die Hintergrundfarbe gelb erhalten. à Layout mit span-­‐Tag umschließen <span>Layout</span>
à Styling setzen span{
background-color: yellow;
}
4. Das Wort Leier soll die Hintergrundfarbe grün bekommen. <span>Leier</span>
Nutzung von ID / CSS Selektor für eine ID = Raute + ID = #+ID: <span id=“green“>Leier</span>
#green{
background-color: green;
}
5. Das Wort Zwecke soll ebenfalls als Hintergrundfarbe grün bekommen. (ID lassen und im Validator Fehlermeldung zeigen) à Id kann nicht nochmal verwendet werden, um kein doppeltes CSS zu schreiben, ist hier das class-­‐Attribut besser <span class=“green“>Zwecke</span>
<span class=“green“>Leier</span>
.green{
background-color: green;
}
Arbeiten mit den HTML-­‐Attributen id und class ID à eine ID darf nur einmal in einem Dokument / Datei verwendet werden, um valides HTML zu schreiben Class à kann mehrmals in einem Dokument / Datei verwendet werden 6. Für das gesamte Dokument die Schriftart – Arial bestimmen. *{
font-family: Arial, sans-serif;
}
* = Universalselektor -­‐> alle Elemente im Dokument werden angesprochen, besser ist allerdings html zu verwenden, auf Grund der Vererbung im CSS werden die Eigenschaften, die auf html definiert sind an Kind-­‐Elemente weitergegeben Man kann mehrere Schriftarten bestimmen: • Browser wird von vorn beginnen und prüfen, ob Schriftart zur Verfügung steht (am Gerät installiert ist) • Sinnvoll ist als letzte eine generische Schriftart zu wählen: sans-­‐serif, serif, monospace oder fantasy und cursive) • Tipp: nicht zu viele verschiedene Schriftarten (vom PrintDesign à 2 verschiedene Familien) Wesentlich mehr möglich, Einrückungen, Buchstabenabstand, Zeilenhöhe, Dicke und Stil der Schriftart 11 7. Zeilenhöhe bestimmen für alle Textabschnitte. p {
line-height: 25 px;
}
Pseudoklassen: • Werden von CSS zur Verfügung gestellt • z.B. genutzt, um bestimmte Zustände von Links zu stylen 8. Die Überschrift h1 soll ein Link werden, aber dennoch auch als Überschrift ausgezeichnet bleiben. <h1><a href=“http://www.fhstp.ac.at“ target=“_blank“>FHSeite</a></h1>
9. Nun folgt das Styling mit Pseudo-­‐Klassen im Internal Style Sheet. Link soll erstmal die Farbe rot bekommen, Schriftstil bold und nicht unterstrichen. a:link {
color: red;
font-weight: bold;
text-decoration: none;
}
Pseudoklassen für Links sind: :link (unbesuchter Link – auch über Tag-­‐Selektor a abrufbar), :visited (besuchter Link), :active (aktiver Link), :hover (wenn Maus drüber ist) à gibt auch :focus (Element erhält Focus z.B. durch Tab) a:visited{
color: green;
}
a:hover{
text-decoration: underline;
}
a:active{
color: lime;
}
Wichtig: hover muss nach link und visited stehen 10. :focus, :hover und :active gelten auch für andere Elemente – so geht z.B. auch Folgendes: p:hover{
color: violet;
}
12 Lektion 8 – Challenge 2 <!DOCTYPE html>
<html>
<head>
</head>
<body>
Wer tastet
Wer tastet sich nachts die Finger klamm?<br>
Es ist der Programmierer mit seinem Programm!<br>
Er tastet und tastet, er tastet schnell,<br>
im Osten wird schon der Himmel hell.<br>
Sein Haar ist ergraut, seine Hände zittern,<br>
vom unablässigen Kernspeicher füttern.
Das Geflüster
Da - aus dem Kernspeicher ertönt ein Geflüster:<br>
"Wer popelt in meinem Basisregister?"<br>
Nur ruhig, nur ruhig ihr lieben Bits,<br>
es ist doch nur ein kleiner Witz.<br>
Mein Meister, mein Meister, sieh mal dort,<br>
da schleicht sich ein Vorzeichen fort!<br>
Bleib ruhig, bleib ruhig, mein liebes Kind,<br>
ich hol es wieder - ganz bestimmt.<br>
Mein Meister, mein Meister, hörst du das Grollen?<br>
Die wilden Bits durch den Kernspeicher tollen.<br>
Nur ruhig, nur ruhig, das haben wir gleich,<br>
die sperren wir in den Pufferbereich.
Der Anfang vom Ende
Er tastet und tastet wie besessen,<br>
Scheiße! - jetzt hat er zu SAVEn vergessen.<br>
Der Programmierer schreit auf in höchster Qual,<br>
da zuckt durch das Fenster ein Sonnenstrahl.<br>
Der Bildschirm flimmert im Morgenrot,<br>
das Programm ist gestorben, der Programmierer - tot.
Autor unbekannt
</body>
</html> 13 1. „Wer tastet“ soll als Überschrift 1. Ordnung ausgezeichnet werden. <h1>Wer tastet</h1>
2. „Das Geflüster“ und „Der Anfang vom Ende“ sollen als Überschrift 2. Ordnung ausgezeichnet werden. <h2>Das Geflüster</h2>
<h2>Der Anfang vom Ende</h2>
3. Die restlichen Absätze sollen als separate Textabsätze ausgezeichnet werden (auch „Autor unbekannt“). 3x <p>...</p>
<p>Autor unbekannt</p>
4. Alle CSS-­‐Angaben sollen über das Internal-­‐Stylesheet realisiert werden. Im <head>: <style type=“text/css“>
</style>
5. Wähle für alle Elemente den Font Arial, wähle dazu die passende generische Schriftart. Im <style> *{ font-family: Arial, sans-serif;
}
6. Alle Überschriften sollen eine beliebige Schriftfarbe (nicht schwarz) bekommen. h1, h2{
color: red;
}
7. Die Überschrift 2. Ordnung soll deutlich kleiner als die der 1. Ordnung sein h2{
font-size: 16px;
}
8. Hebe das Wort „tastet“ (7x) mit einer beliebigen Hintergrundfarbe (nicht weiß) und fett gedruckt hervor. <span>tastet</span>
span{
font-weight: bold;
background-color: yellow;
}
Code muss fehlerfrei validierbar sein § HTML: http://validator.w3.org/#validate_by_input § CSS: http://jigsaw.w3.org/css-­‐validator/#validate_by_input Im <head> <title>Challenge 2</title>
§
14 Lektion 7 – Box Modell à Folien Zum Anschauen und erklären: <!DOCTYPE html>
<html>
<head>
<title>Box Modell</title>
<style type="text/css">
.content{
font-size: 32px;
background-color: rgb(128,128,255);
color: white;
}
#box1{
width: 350px;
padding: 10px;
border: solid black 5px;
background-color: rgb(255,255,128);
}
#box2{
width: 380px;
background-color: rgb(255,192,255);
font-size: 16px;
font-weight: bold;
}
#box3{
width: 350px;
padding: 10px;
border: solid black 5px;
background-color: rgb(255,255,128);
margin: 30px;
}
</style>
</head>
<body>
<div id="box1">
<div class="content">Content</div>
</div>
<div id="box2">380px</div>
<div id="box3">
<div class="content">Content</div>
</div>
</body>
</html>
Block-­‐ & Inline-­‐Elemente: • Block: erzeugt immer eine neue Zeile à h1, p, div • Inline: bleibt innerhalb der Zeile à span, img, a • Dieses Verhalten kann per CSS verändert werden 15 Lektion 9 – Box-­‐Inhalt <!DOCTYPE html>
<html>
<head>
<title>Positionierung</title>
<style type="text/css">
div{
background-color: lightgrey;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Block-­‐Elemente nehmen im normalen Textfluss soviel Breite und Höhe ein, wie nötig. Die definierte Hintergrundfarbe verdeutlicht das à nichts drin bedeutet keine Größe 1. Wir wollen Breite und Höhe des div-­‐Elementes kontrollieren. Es soll 300px breit und 150 px hoch sein. width: 300px; height: 150px; 2. Wir befüllen das div-­‐Tag mit Textinhalt (100 Wörter reichen). Problem: Text ist länger, aber das div-­‐Element nimmt nur die angegebene Höhe ein. Mehrere Varianten das zu verhindern: 1) overflow: hidden (kürz Inhalt, bietet keine Scrollbars), scroll, auto à wie verhält sich Element bei Overflow (Überfüllung) 2) min-­‐width und min-­‐height definieren à bringt allerdings vor allem in der Breite nicht immer das Gewollte 3) min-­‐height, aber width belassen 16 Lektion 10 -­‐ Positionierung <!DOCTYPE html>
<html>
<head>
<title>Positionierung</title>
<style type="text/css">
#left{
background: yellow;
}
nav{
color: white;
background: black;
}
aside{
background: cyan;
}
</style>
</head>
<body>
<article id="left">
<div id="first">
<img width="140px"
src="http://www.wallpapers.net/robot-hd-wallpaper9135.jpg">
</div><!-- #first -->
<p>Weit hinten, hinter den Wortbergen, fern der
Länder Vokalien und Konsonantien leben die Blindtexte.
Abgeschieden wohnen Sie in Buchstabhausen an der Küste des
Semantik, eines großen Sprachozeans. Ein kleines Bächlein
namens Duden fließt durch ihren Ort und versorgt sie mit den
nötigen Regelialien. Es ist ein paradiesmatisches Land, in
dem</p>
</article><!-- #left -->
<aside>
<p>Weit hinten, hinter den Wortbergen, fern der
Länder Vokalien und Konsonantien leben die Blindtexte.
Abgeschieden wohnen Sie in Buchstabhausen an der Küste des
Semantik, eines großen Sprachozeans. Ein kleines Bächlein
namens Duden fließt durch ihren Ort und versorgt sie mit den
nötigen Regelialien. Es ist ein paradiesmatisches Land, in
dem</p>
</aside>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html> 17 1. Als erstes soll das Bild links neben dem Text stehen à Links positionieren und rechts daneben soll Textfluss weiter gehen. Zusätzlich spendieren wir noch ein wenig Außenabstand. Wir greifen die div-­‐Box an, die um das Bild gesetzt ist. #first{
float: left;
margin: 5px;
}
2. Der gesamte article #left (Bild und Textabsatz) soll links sein und das eine Sidebar positioniert sein, die rechts vom Article ist. #left{
float: left;
width: 40%;
}
3. Nun soll die Navbar aber komplett unten stehen à dafür muss das floating beendet werden. nav {
clear:both;
}
4. Abstand zwischen Inhalt links und Sidebar bringen. erster Gedanke: aside{
margin-left: 1em;
}
à nix passiert Dafür muss die Sidebar „angreifbar“ gemacht werden à der Sidebar selbst muss ein float zu gewiesen werden. Und damit es funktioniert, muss sie auch eine Breite bekommen. aside{ float: left; width: 40%; } auch float: right zeigen auf aside, so könnte margin-­‐left weggelassen werden. 18 Lektion 11 – Challenge 3 <html>
<head>
<style type="text/css">
*{
font-family: Arial, sans-serif;
backgroundColor: lime;
}
#red{
font-size: 0.8em;
}
.left, .img{
float: lef;
}
left{
width: 60%;
margin-left: 5%;
}
img{
width: 140px;
}
.left h1{
color: white;
}
</style>
</head>
<body>
<article id="red">
<div class="img">
<img src="http://www.wallpapers.net/robot-hdwallpaper9135.jpg">
</div>
<div class="left">
<p><h1>Wer tastet </h1></p>
<p>
Wer tastet sich nachts die Finger
klamm?<br>
Es ist der Programmierer mit seinem
Programm! <br>
Er tastet und tastet, er tastet
schnell,<br>
im Osten wird schon der Himmel hell.<br>
Sein Haar ist ergraut, seine Hände
zittern,<br>
vom unablässigen Kernspeicher füttern.
</p>
</div>
</article>
<article id="red">
<div class="img">
<img
src="http://diremirth.files.wordpress.com/2012/04/sad_robot_by
_natdatnl.jpg" alt="Sad Robot 2">
19 </div>
<div class="left">
<h1>Das Geflüster</h2>
<p>
Da - aus dem Kernspeicher ertönt ein
Geflüster:<br>
"Wer popelt in meinem Basisregister?"<br>
Nur ruhig, nur ruhig ihr lieben Bits,<br>
es ist doch nur ein kleiner Witz.<br>
Mein Meister, mein Meister, sieh mal
dort,<br>
da schleicht sich ein Vorzeichen fort!<br>
Bleib ruhig, bleib ruhig, mein liebes
Kind,<br>
ich hol es wieder - ganz bestimmt.<br>
Mein Meister, mein Meister, hörst du das
Grollen?<br>
Die wilden Bits durch den Kernspeicher
tollen.<br>
Nur ruhig, nur ruhig, das haben wir
gleich,<br>
die sperren wir in den Pufferbereich.
</p>
</div>
</article>
</body>
</html>
1. Behebe alle Fehler. Der Code soll fehlerfrei als HTML5 und CSS validierbar sein. HTML Doctype fehlt, Dokument wird deshalb nicht als HTML5 validiert <!DOCTYPE html>
im <head> fehlt der <title>-­‐Tag: <title>Finde alle Fehler</title>
alt-­‐Attribut auf 1. Img-­‐Tag fehlt: <img src="http://wallpapers.net/wallpapers/sad_robot1440x900.jpg" alt="Sad Robot 1">
<p>-­‐Tag gehört nicht als Parent von <h1>: <h1>Wer tastet </h1>
id „red“ wird mehrfach verwendet: class=red
öffnendes <h1> mit schließendem <h2>: <h1>Das Geflüster</h1>
20 CSS backgroundColor = background-color
float: lef = float: left
Selektor der class left = .left
21 Lektion 12 -­‐ Arbeiten im Editor Dateien erstellen •
•
index.html style.css Endung .html für Dateien mit html Endung .css für Dateien nur mit CSS Info: Startseite einer Seite ist immer die index.html, die wird auch wenn nur das Verzeichnis und nicht direkt die Datei aufgerufen wird automatisch vom Server zurückgeliefert. Code aus Lektion 10 in index.html kopieren Zeichenkodierung Überprüfen, ob Datei als UTF-­‐8 encodiert ist, wenn nicht UTF-­‐8 auswählen Zusätzlich Meta-­‐Tag im <head>: <meta charset="utf-8">
Um richtige Zeichenkodierung zu gewährleisten immer: 1. Datei als UTF-­‐8 abspeichern 2. Meta-­‐Tag im HTML-­‐Doc angeben CSS separieren Code aus style-­‐Tag (index.html) in style.css kopieren Style-­‐Tag in index.html durch link-­‐Tag ersetzen <link rel="stylesheet" href="style.css">
Bild lokal (vom eigenen Rechner) integrieren Bild downloaden und in selben Ordner wie html und css-­‐Datei legen Source im img-­‐Tag ersetzen <img width="140px" src="roboter.jpg">
Hinweis: Bilder immer nur in der Größe einbinden, wie sie auch benötigt werden! Width aus img-­‐Tag rausnehmen und als CSS auf den img-­‐Tag geben Auf eine 2. Seite verlinken Datei mit Namen z.B. about.html anlegen (im selben Verzeichnis wie index.html und style.css Text aus gelbem Bereich ersetzen mit einem anderen Blindtext Verlinkung in der Navigation ändern <li><a href=“about.html“>About</a></li>
22
