LEHRGANG HTML / CSS. Inhaltsverzeichnis A) LEISTUNGSZIEL FÜR MEDIAMATIKER B) LEHRMITTEL

Transkript

1 LEHRGANG HTML / CSS Inhaltsverzeichnis A) Leistungsziel für Mediamatiker... 1 B) Lehrmittel... 1 C) Lernkontrollen... 3 D) Zeitplan... 4 E) Wochenplan (Jg 2015)... 6 F) Lerninhalte OnlineKurs und Buch... 6 René Probst 2014/2015 Version 4.0 A) LEISTUNGSZIEL FÜR MEDIAMATIKER Handlungskompetenzbereich Einsetzen von ICTMitteln (3) Leistungsziel B) LEHRMITTEL Webseiten mit Skriptsprachen gemäss Kundenbedürfnissen entwickeln und warten. Sie sind in der Lage, die Auszeichnungssprachen (X)HTML und die Formatierungssprache CSS fachmännisch einzusetzen. Die einzelnen Lernschritte werden interaktiv mittels der WEBSite (in Englisch) vermittelt. Zur Vertiefung des Wissens wird das Fachbuch (in Deutsch) HTML5, Günter Born, Markt + Technik (ISBN / ebook # ) verwendet. Leider ist dieses Buch inzwischen vergriffen. Sie finden ein ebook auf der BZZownCloud

2 2 Lehrgang HTML/CSS codecademy WEB-Site 1. Erstellen Sie auf der WEBSite ein Konto mit Ihrem Namen! Sie können sich auch über ein bestehendes FacebookKonto anmelden. 2. Wählen Sie danach den folgenden Kurs aus! 3. Gehen Sie nun schrittweise durch die Lernaufgaben! Jedes Kapitel teilt sich ein in die Vermittlung von Grundelementen von HTML und CSS eine Vertiefung der erlernten Elemente in einem Kleinprojekt 4. Starten Sie das erste Kapitel! Klicken Sie dazu auf den Titel. Ein Kapitel ( Chapter ) besteht aus mehreren Sektionen ( Sections ), die der Reihe nach bearbeitet werden. Jede Sektion unterteilt sich weiter in mehrere Lerneinheiten ( Lessons ). 5. Auf der WEBSite können Sie oben links jederzeit die einzelnen Sections und Les- sons einsehen. Chapter Zweite von dreizehn Lessons Section Lesson

3 3 Lehrgang HTML/CSS 6. Sie können eine Lerneinheit jederzeit unterbrechen und später wieder fortsetzen! 7. Wenn Sie eine Lerneinheit (z.b. 4. Make the head) abgeschlossen haben, kli- cken Sie unten links auf den Link, um zur nächsten Lerneinheit zu gelangen! 8. Wenn Sie eine Sektion abgeschlossen haben, klicken Sie auf den Link, der Sie zur nächsten Sektion bringt. HTML5 Kompendium Die codecademy WEBSite vermittelt sehr schlank und ohne grossen Hintergrund die Elemente von HTML und CSS. Damit Sie sich bei Bedarf einem Thema vertieft zuwenden können, dient das Fachbuch HTML5. Sie finden weiter hinten in dieser Anleitung Hinweise, welche Kapitel aus dem Buch jeweils zu welcher Lerneinheit aus codecademy nachgelesen werden können. Auf Grund des Aufbaus der beiden Werke ist eine 1:1 Zuordnung aber nicht möglich. Der Bezug wird über die jeweils erlernten HTMLTag hergestellt. Das Studium des Fachbuchs kann begleitend zum onlinekurs oder im Nachgang erfolgen. Es ist nicht zwingend, dass alle erwähnten Kapitel bearbeitet werden. Dies hängt davon ab, wie gut Sie den Stoff verstanden haben. Das Buch geht zudem in den meisten Themenbereichen weiter als der onlinekurs. C) LERNKONTROLLEN Checkpoint Nach jedem Kapitel aus codecademy folgt ein Checkpoint! Hier erhalten Sie mehrere Übungen, die Sie selbständig ausführen müssen. Dabei entschei- den Sie in der Regel selber, wie viele dieser Übungen Sie machen, bis Sie über die nötige Sicherheit verfügen, den bis anhin erlernten Stoff zu beherrschen. Das Dokument finden Sie auf dem BZZPortal unter: Unterricht > Lehrmittel > Mediamatiker > Übungen > Informatik > HTML und CSS (2. Sem) Test Zu den Kapiteln aus codecademy werden Sie Tests ablegen. Den Zeitpunkt für die Tests entnehmen Sie der Wochenplanung.

4 4 Lehrgang HTML/CSS D) ZEITPLAN Der Zeitplan ist eine Richtgrösse, der Ihnen anzeigt, wie viel Zeit für eine Lernsequenz etwa vorgesehene ist. Nach diesem Zeitplan richtet sich auch der Zeitpunkt der Tests. Sie müssen Ihre Lernzeit so einteilen im Unterricht und zu Hause dass Sie auf den Zeitpunkt eines Tests alle Übungseinheiten und Vertiefungen durchgearbeitet haben. Die Zeitangaben beziehen sich nur auf die onlineübungen! Was Sie an zusätzlichem Auf- wand für das Studium des Fachbuchs aufwenden müssen, fällt generell in die Hausaufga- benzeit (mit HA vermerkt). Kapitel Sektion Inhalte Dauer HTML Basics Checkpoint A HTML Basics II Checkpoint B HTML Basics III Checkpoint C CSS: An Overview Checkpoint D CSS Selectors 1. Introduction to HTML html, title, paragraphs Body elements headings Adding images to your site! images and links 30 Project: Build your own webpage Vertiefung 1. bis Kapitel 1.4 (im Fachbuch lesen) HTMLEntities 10 Kapitel 5.6 (im Fachbuch lesen) Lokale Verweise in HTML Making lists ordered / unordered lists Styling the font! fontfamiliy, font color, font size 6. More nice styling! backgroundcolor, text align, strong, emphasis Project: Social networking profile Vertiefung 4. bis Leraning about tables table, row, tabledata Better tables tablehead and body Div and span div, span 10 Project: Clickable photo page Vertiefung 7. bis 9. HA 10. What s CSS style, link CSS selector, property, value Details, Details hexvalues, fonts Selecting HTML Elements background, table Review Vertiefung 10. bis Project: Design a Button border, align HA 15. A Greater Selection selectors C is for Cascading tags and inheritance Class and ID Selectors other selectors; id and class PseudoClass Selectors links Review Vertiefung 15. bis Project: Sorting your friends border, align, selectors 30 HA HA HA HA 135 (3 L) 135 (3 L) 45 (1 L) 90 (2 L) 135 (3 L)

5 5 Lehrgang HTML/CSS Kapitel Sektion Inhalt Dauer Checkpoint E CSS Positioning Checkpoint F1 F5 20. The Box Model Box position Margins, Borders and Padding Margin and padding Floating Element alignement Absolute, Relative, Fixed Position Review 5 Project: Build a resume 20 Checkpoint F6 45 Für den Themenbereich Formulare geben Sie bitte direkt die folgende URL in Ihrem Browser ein: What You ll be bulding Try a form The Basic Form typeelement for text Adding a <textarea> use of textarea Radiobuttons typeelement for radio Checkboxes typeelement for checkbox Submit the submit button Style: the extra mile use CSS for styletag HA Lesen Sie die Theorie zu 3. Formular Felder im Portal 40 Unterricht>Lehrmittel>Mediamatiker>Skripte>Informatik>HTMLCSS>formulare.html WEB Form HA HA 100 (3 L) 90 (2 L)

6 6 Lehrgang HTML/CSS E) WOCHENPLAN (JG 2015) Siehe Termine und Themen in der Fachorganisation (Teil_00) F) LERNINHALTE ONLINE-KURS UND BUCH HTML5 1. Introduction to HTML TAGS <!DOCTYPE html>, <html>, <head>, <title>, <body>, <p>, <br /> 1.2 Grundstruktur einer HTMLDatei [ohne Was sind Attribute] 1.3 HTMLDokumente mit (Text)Information 1.4 Entities, Zeichencodierung und Sonderzeichen 1.5 Kommentare im HTMLQuellcode A.2 <!DOCTYPE > A.19 <body> A.20 <br> A.50 <head> A.54 <html> A.82 <p> A.111 <title> Lesen Sie unbedingt Whitespace 2. Body elements Tags <h1>..<h6> Überschriften in HTML gestalten A.49 <h1> <h6> 3. Adding images to your site! Tags & Attribute <img src= />, <a href= >, <a id= > Grafik per <img>tag einbinden Pfadangabe im srcattribut 5.1 Verweis und Referenz in HTMLDokument 5.2 Pfadangeben im hrefattribut 5.3 Hinweise zur Gestaltung von Hyperlinks 5.6 Arbeiten mit lokalen Verweisen A.3 <a > (Anker) A.57 <img> absolute und relative Adresse beachten! unbedingt beachten!

7 7 Lehrgang HTML/CSS 4. Making lists Tags <ol>, <ul>, <li> 3.1 Arbeiten mit Aufzählungen 3.2 Nummerierungen in HTML A.65 <li> A.78 <ol> A.116 <ul> 5. Styling the font! Tags & Attribute <!-- -->, < style=. > Kommentare in HTMLQuellcode 2.7 Schriftarten und farben auswählen A.1 <! > (Kommentar) Farbe als HEXWert in RGB! 6. More nice styling! Tags < style=. >, <strong>, <em> 2.3 Auszeichnung mit em und strong A.39 <em> A.98 <strong> 7. Learning about tables Tags <table>, <tr>, <td> Eine Tabelle erstellen A.103 <table> A.105 <td> A.112 <tr> 8. Better tables Tags & Attributs <thead>, <tbody>, <th>, < colspan=.. > Tabellenüberschriften festlegen Tabelleninhalt mit thead, tbody und tfoot gruppieren A.104 <tbody> A.108 <th> A.109 <thead>

8 8 Lehrgang HTML/CSS 9. Div and Span Tags <div>, <span> Die Elemente span und div A.36 <div> A.96 <span>

9 9 Lehrgang HTML/CSS CSS3 10. What s CSS Tags < style>, <style>, <link > Properties color, font-family, font-size, background-color 10.1 CSSGrundlagen 10.2 Style Sheets einbinden A.66 <link> A.99 <style> C.1.1 C.1.2 C.2.1 C.2.2 fontfamily fontsize color backgroundcolor 11. CSS Tags als Selektor Eigenschaften gruppieren Kommentare in Stylesheets 12. Details, Details height, width, border, text-decoration Festlegen der Schriftfarbe (Tabelle 2.1) C.3.5 C.4.19 border C.4.20 width C.4.21 height textdecoration D.1 Farbnamen und Codes in HTML

10 10 Lehrgang HTML/CSS 13. Selecting HTML Elements Hintergrund farbig unterlegen Textfarbe und Schriftarten Tabellen mit Rahmen Höhe und Breite der Zelle festlegen 14. Review 15. A Greater Selection Kontext sensitive Selektoren Der Universal Selektor 16. C is for Cascading font-weight Vererbung bei Selektoren 2.8 Verschachtelte Tags C.1.5 fontweight 17. Class and ID Selectors Klasse als Selektor Allgemeine Klassen als Selektoren id als Selektor 18. Pseudo-Class Selectors a:action, tag :child Spezielle Pseudoelemente

11 11 Lehrgang HTML/CSS 19. Review 20. The Box Model display, border-radius Das Boxmodell: Rahmen um Absätze ziehen C.4.25 borderradius C.6.1 display 21. Margins, Borders and Padding margin, padding Das BoxModell: Rahmen um Absätze ziehen C.4.5 margin C.4.10 padding 22. Floating float, clear Spaltensatz mit CSS und float C.4.22 float C.4.23 clear C.7.2 float 23. Absolute, Relative, Fixed Position position, margin Positionierung per CSS C.4.5 C.7.1 margin position 24. Review

12 12 Lehrgang HTML/CSS WEB Formulare 25. What You ll be bulding Formulare verwenden 26. The Basic Form <form>, <input type= text > Das <form>tag zur Formulargestaltung Textfelder für Eingaben A.46 <form> A.58 <input> 27. Adding a <textarea> <textarea> Mehrzeilige Textfelder A.106 <textarea> 28. Radiobuttons <input type= radio > Optionsfelder 29. Checkboxes <input type= checkbox > Kontrollkästchen 30. Submit <input type= submit > Schaltflächen im Formular