Diese Projektarbeit bearbeitet das Thema der Erstellung einer Homepage Seite „MakaFotografie“ mit HTML und ist in drei Teile gegliedert. Zu Beginn werden theoretische Grundlagen von HTML und des Programms Atom definiert. Anschließend folgen Erläuterungen sowie deren Verwendung. Im letzten Kapitel soll die Idee „MakaFotografie“ vorgestellt und die einzelnen Schritte zur Erstellung der eigenen Website beschrieben werden. Dementsprechend wird gezeigt, wie die Website erstellt, Befehle geschrieben und das Design festgelegt wurde.
In unserem modernen Zeitalter der globalen Kommunikation ist es heutzutage kaum vorstellbar keinen Internetanschluss zu besitzen. Das Internet ist nicht mehr wegzudenken und ist zu unserem Alltag geworden, da man sowohl das Neueste aus aller Welt erfährt als auch seinen persönlichen Interessen nachgehen kann. Das Internet bietet für alles und jeden ein nahezu unendliches Angebotspotential. Für Unternehmen und private Nutzer besteht außerdem die Möglichkeit, selbst im Netz präsent zu sein. Um dieses Ziel zu erreichen, wird eine Homepage, die man leicht und schnell zu einer Web-Site erweitern kann erstellt.
Zu Beginn dieser Projektarbeit stellte ich mir die Frage, für wen oder was ich gerne eine Homepage Seite erstellen möchte. Das Gestalten von Webseiten interessierte mich sehr, weshalb ich mich im Freundeskreis umhörte. Ein befreundeter Fotograf ist momentan dabei sein Hobby auszubauen. Bis jetzt vermarktete er sich und seine Bilder nur über Instagram. Aber auch er weiß, dass ein besserer Weg die Vermarktung über eine Website ist. Ich sah dies als Chance und bot ihm die Erstellung einer Homepage Seite an, sodass er Anfragen auch über diese generieren kann und professioneller wirkt.
Inhaltsverzeichnis
Inhaltsverzeichnis
Abbildungsverzeichnis
1 Hinführung zum Thema
2 Definition von HTML
2.1 Grundbausteine einer HTML Seite
2.2 Verwendung HTML
3 Definition des Programms „Atom“
3.1 Installation Atom
3.2 Verwendung von Atom
4 “MAKAFOTGOGRAFIE“
4.1 Erste Schritte der Webseite “MakaFotografie“
4.2 „Home“ Button
4.3 „Über mich“ Button
4.4 „Galerie“ Button
4.5 „Kontakt“ Button
4.6 „Preise“ Button
4.7 CSS-Datei
Quellenverzeichnis
Abbildungsverzeichnis
Abbildung 1: Download Atom
Abbildung 2: Ansicht Atom
Abbildung 3: Anfang HTML
Abbildung 4: Buttons der Webseite „MAKAFOTOGRAFIE“
Abbildung 5: Aufbau “Home“
Abbildung 6: Befehl für die Hinweise auf Cookies und Datenschutz
Abbildung 7: Aufbau “Über mich“
Abbildung 8: Aufbau “Über mich“ mit Aufbau Verknüpfung
Abbildung 9: Fertige Darstellung “Über mich“
Abbildung 10: Befehle für Images
Abbildung 11: Fertige Darstellung “Galerie“
Abbildung 12: Code für Kalender
Abbildung 13: Fertige Darstellung “Kontakt“
Abbildung 14: Aufbau der Seite „Preise“
Abbildung 15: Fertige Darstellung „Preise“
Abbildung 16: Inhalt der CSS-Datei
Abbildung 17: Inhalt der CSS-Datei
1 Hinführung zum Thema
In unserem modernen Zeitalter der globalen Kommunikation ist es heutzutage kaum vorstellbar keinen Internetanschluss zu besitzen. Das Internet ist nicht mehr wegzudenken und ist zu unserem Alltag geworden, da man sowohl das Neueste aus aller Welt erfährt als auch seinen persönlichen Interessen nachgehen kann. Das Internet bietet für alles und jeden ein nahezu unendliches Angebotspotential. Für Unternehmen und private Nutzer besteht außerdem die Möglichkeit, selbst im Netz präsent zu sein. Um dieses Ziel zu erreichen, wird eine Homepage, die man leicht und schnell zu einer Web-Site erweitern kann erstellt.
Zu Beginn dieser Projektarbeit stellte ich mir die Frage, für wen oder was ich gerne eine Homepage Seite erstellen möchte. Das Gestalten von Webseiten interessierte mich sehr, weshalb ich mich im Freundeskreis umhörte. Ein befreundeter Fotograf ist momentan dabei sein Hobby auszubauen. Bis jetzt vermarktete er sich und seine Bilder nur über Instagram. Aber auch er weiß, dass ein besserer Weg die Vermarktung über eine Website ist. Ich sah dies als Chance und bot ihm die Erstellung einer Homepage Seite an, sodass er Anfragen auch über diese generieren kann und professioneller wirkt.
Diese Projektarbeit bearbeitet das Thema der Erstellung einer Homepage Seite „MakaFotografie“ mit HTML und ist in drei Teile gegliedert. Zu Beginn werden theoretische Grundlagen von HTML und des Programms Atom definiert. Anschließend folgen Erläuterungen sowie deren Verwendung. Im letzten Kapitel soll die Idee „MakaFotografie“ vorgestellt und die einzelnen Schritte zur Erstellung der eigenen Website beschrieben werden. Dementsprechend wird gezeigt, wie die Website erstellt, Befehle geschrieben und das Design festgelegt wurde.
2 Definition von HTML
HTML ist eine textbasierte Auszeichnungssprache, die dazu dient Bilder, digitale Dokumente, Texte oder auch Hyperlinks zu realisieren und im Web auf einer Homepage Seite darzustellen. HTML-Skripte sind die Grundbausteine für jede Website, die man im World Wide Web aufrufen kann. Die Abkürzung für HTML ist “Hypertext Markup Language“. Im Deutschsprachigen Raum bedeutet HTML “Hypertext Auszeichnungssprache“. Die unterschiedlichen Browser wie beispielsweise Safari, FireFox, Google Chrom, Internet-Explorer und so weiter öffnen die geschriebenen HTML-Codes in wenigen Sekunden, sodass man jede selbsterstellte Website aufrufen kann. Für eine erfolgreiche Nutzung von HTML muss man bestimmte Befehle wie zum Beispiel „<html>“ und „<html/>“ kennen. Diese zwei genannten Befehle dienen einer HTML Seite, um den Anfang und das Ende festzulegen. Auf das Thema “Grundbausteine einer HTML“ wird im nachfolgenden Kapitel der Projektarbeit eingegangen. In der heutigen Zeit der Digitalisierung werden sogenannte HTML Codes nicht mehr selbst geschrieben. Firmen geben solche Aufgaben bestimmten Unternehmen, die die Webseiten dann für verschiedene Kunden an Hand deren Wünschen erstellen. Es gibt bestimmte Programme, die die Grundbausteine einer Webseite darstellen. Für das Einfügen bestimmter Formen, Farben und Größen einer Homepage dienen sogenannte CSS Dateien. Die Abkürzung CSS steht für „Cascading Style Sheets“. Eine CSS Datei wird mit der HTML Seite verknüpft und formatiert, um dann die aufgezählten Punkte einheitlich digital im Web darstellen zu können.1
2.1 Grundbausteine einer HTML Seite
Um erfolgreich HTML nutzen zu können muss man zu Beginn einige Grundbegriffe beherrschen. Die Grundbestandteile und das gewisse Know-How, um eine Webseite erstellen zu können wurden im Internet recherchiert.
Erst einmal müssen der „Kopf“ und der „Rumpf“ einer Webseite definiert werden. Daraus schließt sich, dass man für den Kopf in der ersten Zeile <html> und in der letzten Zeile </html> schreibt. Zu beachten ist, dass Befehle immer geschlossen werden. Den Seiteninhalt einer Webseite kann man mit dem folgenden Befehl <BODY> für den Anfang und </BODY> für den Schluss bestimmen. Der „Rumpf“ wird zwischen der ersten und letzten Zeile geschrieben, also zwischen Beginn <html> und Ende </html>. Auch hier müssen sich das Öffnen und das Schließen in getrennten und untereinanderstehenden Zeilen befinden. In den Zeilen zwischen Anfang und Ende kann man nun jeglichen Inhalt hinzufügen, der für die Gestaltung einer Webseite gewünscht wird.2
2.2 Verwendung HTML
Um HTML erfolgreich auf einem Rechner abspielen zu können, muss man zunächst einmal ein Programm benutzen, das bereits auf Laptops und Computern vorhanden ist. Um solche Befehle ausführen zu können, kann man beispielsweise den TextEditor benutzen, der meist schon installiert ist. Für MacIOS ist der „TextEdit“ empfehlenswert und für Microsoft ist es beispielsweise das Programm „NotePad“. Diese beiden Standardprogramme eignen sich, um Anweisungen für HTML Webseiten zu schreiben. Natürlich gibt es auch noch weitere Prozesse, die solche Anwendungen unterstützen. Für diese Projektarbeit wurde sich jedoch das Programm „Atom“ entschieden. Dieses wid im nachfolgenden Kapitel näher erläutert.3
3 Definition des Programms „Atom“
Atom ist genau wie TextEdit oder NotePad eine kostenlose Texteditor Variante, die für MacIOS, Windows und Linux entwickelt worden ist. Atom besteht aus dem Webbrowser „Chromium“ und „JavaScript-Framwork Node.js“. Dies bietet die Möglichkeit, dass Atom mit beliebigen Anwendungen wie beispielsweise JavaScript oder CSS kombiniert werden kann. Aufgrund der benutzerfreundlichen Applikation von Atom und der simplen Handhabung, wurde sich für das Programm Atom entschieden. Atom hat eine Datenbank mit sämtlichen Befehlen, die man verwenden kann, um eine Webseite zu erstellen. Ein Beispiel für die einfache Verwendung ist, dass wenn man nur den Anfangsbuchstaben des gewünschten Befehles eingibt, dann schlägt Atom sofort verschiedene Beispiele vor, die zur Verfügung stehen.4
3.1 Installation Atom
Um Atom erfolgreich auf einem Rechner nutzen zu können, muss eine vorherige Installation erfolgen. Im ersten Schritt muss ein Internetbrowser geöffnet werden. Dazu wurde Safari, geeignet für MacIOS, verwendet und in der Suche die Seite https://atom.io aufgerufen. Je nach Betriebssystem wird angezeigt welche Version des Programms für den PC zur Verfügung steht. Der Texteditor Atom ist nicht nur für Apple Produkte, sondern auch mit Windows oder Linux und vielen mehr kompatibel. Anschließend wird zur kostenlosen Installation auf den Download-Button der Seite geklickt. Dies wird in Abbildung 1 demonstriert.5
Abbildung in dieser Leseprobe nicht enthalten
Abbildung 1 : Download Atom
3.2 Verwendung von Atom
Um Atom verwenden zu können, muss nach der Installation zunächst auf das Programm Atom geklickt werden, um dieses aufzurufen. Nach dem Öffnen sieht man folgende Ansicht, die in Abbildung 2 dargestellt wird.
Abbildung in dieser Leseprobe nicht enthalten
Abbildung 2 : Ansicht Atom
Auf der rechten Seite ist zu erkennen, dass viele verschiedene Möglichkeiten mit diesem Programm geboten werden. Man kann Projects öffnen oder auch Packages installieren. Wichtig zu wissen ist, dass jede Spalte im Atom vorerst geschlossen werden kann. Jedoch sollte die Spalte “untitled“ geöffnet bleiben, denn dort werden wir beginnen die Befehle zu schreiben. Im Folgenden muss eine genaue Vorgehensweise beachten werden. Im ersten Schritt muss man auf „File“ klicken. Anschließend auf „Add new Project“, um ein neues Projekt zu öffnen. Dann wählt man einen Ordner aus, sodass ein neues Fenster geöffnet wird. Nun befindet man sich auf der Seite, in die man die Befehle eintippt.
Am besten ist es, wenn man davor einen neuen Ordner auf dem Computer erstellt und diesen benennt. Daraus folgt, dass man Atom im Verlauf anweisen kann auf diesen Ordner zuzugreifen und dort die gewünschten Speichervorgänge abzuschließen. Im zweiten Schritt müssen die HTML Codes eingegeben werden in Atom. Hat man dies gemacht, sollte gespeichert werden. Im Anschluss daran kann die gespeicherte Datei mit Hilfe eines Internet Browsers aufgerufen und als Webseite angezeigt werden. Im Folgenden werden die einzelnen Schritte, die zur Erstellung der Webseite dienten, beschrieben.6
4 “MAKAFOTGOGRAFIE“
Zunächst einmal wird der Hintergrund der Erstellung erläutert. Der Name „MakaFotografie“ wurde aus zwei Teilen zusammengesetzt. Der erste Teil ist eine Abkürzung für den Namen Maurice Karg. Herr Karg hat sein Hobby zum Beruf gemacht und betreibt seit einiger Zeit professionelle Fotoshootings von Motorrädern und Autos. Die Vermarktung der Bilder erfolgt auf bestimmten Social Media Plattformen wie zum Beispiel auf Instagram und Facebook. Um jedoch professioneller zu wirken, kam ihm die Idee einer richtigen Homepage in den Sinn. Zusammen machten wir uns Gedanken über seine Webseite. Wir diskutierten über den Aufbau, Inhalt und das Design. Anschließend hat er mir einige Bilder zukommen lassen und mir seine schriftliche Einwilligung gegeben, dass ich die erhaltenen Bilder, sowie seinen Namen in meiner Projektarbeit erwähnen und zeigen darf. Schließlich arbeitete ich an der Erstellung seiner Seite. Die ersten erfolgreichen Ergebnisse waren für mich schwer zu erzielen, da ich mich erstmal einarbeiten und mich mit bestimmten Befehlen (Codes) auseinandersetzen musste. Nach einiger Zeit und Mühe habe ich jedoch die ersten Ergebnisse erbringen können. Dies erläutere ich im folgenden Kapitel.
4.1 Erste Schritte der Webseite “MakaFotografie“
Die ersten Schritte, um die Webseite zu erstellen, bestanden darin, Atom zu installieren und einen Ordner auf meinen Macbook zu erstellen.
Den Speicherort habe ich mir genau gemerkt, denn dort musste ich alle Dokumente ablegen. Im Anschluss daran konnte ich mit dem Schreiben der Befehle, sowie dem Abspeichern beginnen. Wie im Kapitel „Grundbausteine für eine HTML Seite“ beschrieben, habe ich auch hier einen Anfang und ein Ende benötigt. Wie man auch aus der Abbildung 3 erkennen kann habe ich den Anfang das mit <HTML> begonnen. Am Ende wurde das mit </HTML> geschlossen.
Abbildung in dieser Leseprobe nicht enthalten
Abbildung 3: Anfang HTML
Zu den weiteren Befehlen komme ich später in meiner Projektarbeit. Auf Grund des geringen Umfangs der Arbeit kann nicht jeder Befehl erläutert werden. Es wird ausschließlich auf die Wichtigsten, die für die Erstellung der Webseite von Bedeutung sind, eingegangen. Da meine Seite mehrere Buttons bekommen hat, musste ich für jeden Button einen Anfang und ein Ende erstellen. Die Buttons meiner Webseite sind „Home“, „Über mich“, „Galerie“, „Kontakt“ und „Preise“. In Abbildung 4 werden die verschiedenen angelegten Buttons in der richtigen Reihenfolge dargestellt.
Abbildung in dieser Leseprobe nicht enthalten
Abbildung 4: Buttons der Webseite „MAKAFOTOGRAFIE“
Um Buttons erstellen zu können, musste ich für jeder dieser Buttons eine Datei eröffnen und dort genaustens definieiren, wie die gewissen Erscheinungen dargestellt werden sollen.7
4.2 „Home“ Button
Für den „Home“ Button erläutere ich die Gestaltung und die Einstellungen, die ich getroffen habe für meine Webseite. Die Vorgehensweise werde ich erst erklären und dann einzelne Screenshots darstellen, sodass man eine grafische Darstellung hat und man die einzelnen Schritte leichter versteht.
Auf der Seite „Home“ kann man auf den ersten Blick eine weiße Überschrift mit dem Titel Makafotografie, Bilder, Inhaber, Webdesigner, Buttons (Home, Über mich, Galerie, Kontakt und Preis) sowie einen Hinweis auf die Verwendung von Datenschutz erkennen.
Images sind grafische Darstellungen, die Bilder auf der Webseite präsentieren. Alle Bilder müssen als „jpeg“ abgespeichert werden, denn somit erkennt das Programm, dass es sich hier um ein Foto handelt. Um dem Programm dann zu sagen, dass es sich bei dem Foto um ein Image handelt, muss der Tag <IMG> verwendet werden. Damit erkennt das System das Foto dann als Bild. Natürlich kann man jede beliebige Größe der Bilder benutzen. Die Größe eines Bildes (Image) beschreibt man mit den Befehlen „height“ (Länge) und „width“ (Breite). Meine vier Images auf der Webseite sind alle auf 300px eingestellt. PX steht für die Verpixelung eines Bildes.
Die Überschrift der Seite MakaFotografie hat die Schriftgröße <h1>. Die Schriftgrößen können von <h1> bis <h6> eingestellt werden. <h1> wäre die größte und <h6> die kleinste Schriftgröße. Die Farbe der Überschrift ist weiß. Dies kann mit Hilfe des Befehls <color> festlegen. Die Art der Farbe ist frei wählbar. Die Farben werden mit bestimmten Farbcodes geschrieben. Folgend sind einige Beispiele aufgeführt: rot= ff0000; grün= 00ff00; blau= 0000ff; gelb= ffff00; anthrazit= 3d3d3d. Das gleiche Prinzip erfolgt auch bei der Hintergrundfarbe, die für alle CSS-Dateien gleich festgelegt werden. Um die Lage der Überschrift zu bestimmen, ob rechts-, linksbündig oder mittig, benutzt man beispielsweise den Befehl “center“ für Zentral/ mittig.
Nun kommen wir zu den Buttons. Die Buttons werden mit einem sogenannten <a href> verknüpft. Dieser Befehl weist darauf hin, dass eine Verknüpfung stattfindet, sodass man auf den Button „Home“ klicken kann. In Atom würde das Ganze folgendermaßen definiert werden: <a href=“Home.html“> und ist in Abbildung 5 dargestellt. Damit das Programm erkennt, dass es sich hier um einen Button handelt wird der Befehl <button>Home</button> benutzt. Das würde man jetzt mit jeder dieser vier Buttons betreiben.
[...]
1 Vgl. http://www.wissenschaft-technik-ethik.de/internetseiten-in-html-1.html
2 Vgl. Ebd.
3 Vgl. http://www.wissenschaft-technik-ethik.de/internetseiten-in-html-1.html.
4 Vgl. https://atom.io
5 Vgl. Ebd.
6 Vgl. https://atom.io
7 aVgl.ahttps://www.formel-sammlung.de/formel-Grundlegende-HTML-Befehle-3-29-264.html
-
-
-
-
¡Carge sus propios textos! Gane dinero y un iPhone X. -
-
¡Carge sus propios textos! Gane dinero y un iPhone X. -
-
¡Carge sus propios textos! Gane dinero y un iPhone X. -
-
¡Carge sus propios textos! Gane dinero y un iPhone X. -
-
¡Carge sus propios textos! Gane dinero y un iPhone X. -
-
¡Carge sus propios textos! Gane dinero y un iPhone X. -
-
¡Carge sus propios textos! Gane dinero y un iPhone X.