HTML5-Tutorium: Canvas: Hello World 01: Unterschied zwischen den Versionen
aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 31: | Zeile 31: | ||
# Im Projektexplorer (linkes Fenster): <code>HelloWorldCanvas01</code> aufklappen | # Im Projektexplorer (linkes Fenster): <code>HelloWorldCanvas01</code> aufklappen | ||
# Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> | # Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>HTML file</code> | ||
# Dateiname: <code>hello.html</code> → <code>Weiter</code> → Templates: <code>New HTML Flie (5)</code> → <code>Fertigstellen</code> | # Dateiname: <code>hello.html</code> → <code>Weiter</code> → Templates: <code>New HTML Flie (5)</code> → <code>Fertigstellen</code> | ||
==HTML-Datei bearbeiten== | |||
Benutzen Sie am Besten immer die Code-Vervollständigung (<code>Strg-Leerzeichen</code> bzw. <code>Crtl-Space</code>). | |||
Beispiel: | |||
# Klicken Sie im Editor-Fenster (mit der Überschrift <code>hello.html</code>)in die Leerzeile nach <code><body></code> | |||
# Drücken Sie <code>Strg-Leerzeichen</code> und wäglen Sie <code><> canvas</code> | |||
Es gibt auch einen WYSIWYG-Editor, den Sie folgendermaßen öffnen können: | |||
# Rechtklick in das Editor-Fenster → <code>Öffnen mit</code> → <code>Web Page Editor</code> | |||
Erfassen Sie folgenden Code in der HTML-Seite: | |||
<source lang="html"> | |||
</source> | |||
=Quellen= | =Quellen= | ||
Version vom 26. September 2011, 16:36 Uhr
Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
| Korrektheit: 0 (nicht überprüft) |
Umfang: 0 (viel zu gering) |
Quellenangaben: 0 (fehlen vollkommen) |
Quellenarten: 0 (ungenügend) |
Konformität: 5 (ausgezeichnet) |
HTML5: Hello-Word-Anwendung mit Canvas
Zur Erstellung der Anwendung wird Eclipse (Indigo) eingesetzt. Die Vorgängerversion (Helios) eignet sich auch schon zur Erstellung von HTML5-Web-Anwendungen.
Eclipse vorbereiten
Zunächst muss der Character Code korrekt eingestellt werden:
Fenster→Benutzervorgaben→Webaufklappen ->HTML-Filesselektieren- Codierung:
ISO Latin-1durchISO 10646/Unicode(UTF-8)ersetzen OK
Außerdem sollte man die „richtige“ Oberfläche auswählen:
Fenster→Perspektive öffnen→Web(evtl. unter dem PunktAndere...zu finden)
Neues Projekt anlegen
Datei→Neu→Statisches Web-Projekt- Project name:
HelloWorldCanvas01→Fertigstellen
Neue HTML-Datei anlegen
- Im Projektexplorer (linkes Fenster):
HelloWorldCanvas01aufklappen - Rechtsklick auf Ordner
WebContent→Neu→HTML file - Dateiname:
hello.html→Weiter→ Templates:New HTML Flie (5)→Fertigstellen
HTML-Datei bearbeiten
Benutzen Sie am Besten immer die Code-Vervollständigung (Strg-Leerzeichen bzw. Crtl-Space).
Beispiel:
- Klicken Sie im Editor-Fenster (mit der Überschrift
hello.html)in die Leerzeile nach<body> - Drücken Sie
Strg-Leerzeichenund wäglen Sie<> canvas
Es gibt auch einen WYSIWYG-Editor, den Sie folgendermaßen öffnen können:
- Rechtklick in das Editor-Fenster →
Öffnen mit→Web Page Editor
Erfassen Sie folgenden Code in der HTML-Seite:
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
- Coding HTML5 Pages Using Eclipse
