![\"info\"](\"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-content\/uploads\/2021\/04\/info-300x300.png\")
Schritte zur Gestaltung einer Homepage:<\/h5>\nSchritte zur Gestaltung einer Homepage:<\/h5>\nErstellen einer Homepage in Html<\/a>-Steps<\/a>\u00a0(Kurzfassung<\/span>)<\/p>\n M\u00f6chtest Du eine Webseite auf Deinem eigenen PC (Tablet) erstellen, so ist es sinnvoll, erstmal eine Ordnerstruktur \u00a0zu erstellen in der alle (verlinkten) Dateien gespeichert werden. \u00dcblich (und sinnvoll) ist folgende Struktur:<\/p>\n Als erstes bekommt Dein Projekt einem Namen<\/strong><\/em><\/span>.<\/p>\n index.html<\/strong><\/em><\/span> ist die Startseite Deiner Homepage. <\/p>\n <\/p>\n <\/p>\n <\/p>\n Um eine Html-Seite zu erstellen, wird zun\u00e4chst ein Editor Ein einfacher Editor (der hier auch installiert ist) ist Notepad++<\/span><\/strong>.<\/p>\n Diesen kannst Du starten, indem du auf das Windows-Symbol (unten links am Bildschirm) mit der rechten Maustaste klickst und auf ausf\u00fchren<\/strong> <\/em><\/span>(3. Punkte von unten) gehst und folgendes eingibst:<\/p>\n C:\\Program Files\\Notepad++<\/span><\/strong><\/p>\n Als Erstes speicherst Du Dein Dokument (->save as …)<\/strong><\/em><\/span> <\/p>\n Die eigentlichen Befehle zur Strukturierung der Seite sind befinden sich zwischen den zwei Body-Tags. <<\/span>body><\/span><\/span><\/strong><\/em><\/span> …..Befehle<\/span> <\/strong>…... <<\/span>\/body><\/span><\/span><\/span><\/strong><\/em><\/p>\n Fast jeder Befehl besteht aus einem Start-Tag\u00a0 <<\/span>…><\/span><\/span><\/strong><\/em><\/span> und einem\u00a0 <<\/span>\/ > <\/span><\/span><\/span><\/strong><\/em>Ende-Tag.<\/p>\n <<\/span>p><\/span><\/span><\/strong><\/em>Hier kommt der Text rein<<\/span>\/p> https:\/\/www.w3schools.com\/html\/html_paragraphs.asp<\/a><\/p>\n Mit style<\/span> k\u00f6nnen die Eigenschaften der Texte festgelegt werden.<\/p>\n Beispiele<\/strong>: Weitere Details dazu findest Du hier:<\/p>\n Die \u00dcberschriften sind hierachisch.<\/p>\n <<\/span>h1<\/span>> …<\/span> <\/span><\/span>Haupt\u00fcberschrift …\u00a0 <<\/span>\/h1><\/span><\/span> https:\/\/www.w3schools.com\/html\/html_headings.asp<\/a><\/p>\n Gut programmierte Apps\u00a0sind immer mit den\u00a0entsprechenden Kommentaren versehen, die beschreiben, was hier passiert.<\/p>\n https:\/\/www.w3schools.com\/html\/html_comments.asp<\/a><\/p>\n Verkn\u00fcpfungen k\u00f6nnen zu einer anderen Homepage, innerhalb der eigenen Homepage sein,\u00a0 aber auch zu anderen Dateien.<\/p>\n <<\/span>a<\/span><\/strong><\/em> href<\/span><\/strong><\/em>=\u201chttps:\/\/www.bk-opladen.de\/de\/homepage\/\u201c<\/span><\/span>><\/span><\/span>Name der Verkn\u00fcpfung- Hier: BKO<<\/span>\/a><\/span><\/span><\/strong><\/em><\/span><\/p>\n oder<\/span><\/p>\n <<\/span>img<\/strong><\/em><\/span> src<\/strong><\/em><\/span>=“Bild.jpg“<\/span> alt<\/span>=“Bildtitel“<\/span> width<\/span><\/strong><\/em>=\u201c104\u2033<\/span> height<\/strong><\/em><\/span>=\u201c142\u2033<\/span><\/span>><\/span><\/span><\/p>\n Sollen Bilder einf\u00fcgt werden, so musst der Datei-Pfad, wo sich die Bilddatei befindet angegeben werden.<\/p>\n Dazu bietet es sich an, unterhalb der index-Datei einen Ordner anzulegen, in dem alle Bilder, die verwendet werden sollen, gespeichert werden. (Name Bsp.: images)<\/p>\n Der Pfade w\u00fcrde dann so lauten (Relative URL<\/strong><\/em><\/span>):<\/p>\n <<\/span>img<\/strong><\/em><\/span> src<\/strong><\/em><\/span>=“images<\/span>\/Bild.jpg<\/span>“ Optional k\u00f6nnen noch Bildtitel<\/span> und H\u00f6he<\/span> und Weite<\/span> des Bildes angegeben werden.<\/p>\n Alternativ kann auch eine absolute URL<\/span><\/strong> angegeben werden, d.h. hier steht der komplette Pfad der Datei dann drin. Dies kann jedoch zu Problemen beim kopieren der Programme f\u00fchren. https:\/\/www.w3schools.com\/html\/html_images.asp<\/a><\/p>\n Verkn\u00fcpfungen zu anderen Seiten und eMail-Accounts:<\/p>\n https:\/\/www.w3schools.com\/html\/html_links.asp<\/a><\/p>\n Wie Du Tabellen in html erstellst findest Du hier:<\/p>\n \u00a0https:\/\/www.w3schools.com\/html\/html_tables.asp<\/a><\/p>\n Spiegelpunkte und durchnummerierte Aufz\u00e4hlungen:<\/p>\n https:\/\/www.w3schools.com\/html\/html_lists.asp<\/a><\/p>\n https:\/\/www.w3schools.com\/html\/html_emojis.asp<\/a><\/p>\n https:\/\/www.w3schools.com\/html\/html_layout.asp<\/a><\/p>\n <\/p>\n https:\/\/www.w3schools.com\/css\/default.asp<\/span><\/p>\n","protected":false},"excerpt":{"rendered":" Schritte zur Gestaltung einer Homepage: Erstellen einer Homepage in Html-Steps\u00a0(Kurzfassung) Dateistruktur M\u00f6chtest Du eine Webseite auf Deinem eigenen PC (Tablet) erstellen, so ist es sinnvoll, erstmal eine Ordnerstruktur \u00a0zu erstellen in der alle (verlinkten) Dateien gespeichert werden. \u00dcblich (und sinnvoll) ist folgende Struktur: Als erstes bekommt Dein Projekt einem Namen. index.html ist die Startseite Deiner … Info: Erstellung & Gestaltung von Html-Seiten<\/span> weiterlesen Dateistruktur<\/h2>\n
![\"Bildschirmfoto](\"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-content\/uploads\/2023\/09\/Bildschirmfoto-2023-09-22-um-20.11.16.png\")
<\/p>\n
\nIm Ordner images<\/strong><\/em><\/span> speicherst Du nun alle Bilder und auch PDF-Dateien<\/span><\/strong><\/em>, die auf Deiner Homepage zu sehen sind.
\nIm Ordner html<\/strong><\/em><\/span>\u00a0speicherst Du nun alle anderen html-Seiten<\/i><\/b><\/span><\/span>, die Du f\u00fcr Deine Homepage verwendest.
\nDen Ordner css<\/i><\/b><\/span><\/span>\u00a0betrachten wir sp\u00e4ter.<\/p>\nHtm
![\"html\"](\"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-content\/uploads\/2023\/09\/html.png\")
l-Editor ![\"notpad\"](\"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-content\/uploads\/2023\/09\/notpad.jpg\")
<\/h2>\n
\n<\/span><\/strong> (->Programm zum Erstellen des Programmcodes) ben\u00f6tigt.<\/p>\n
\nund legst den Dateityp fest.
\n(-> Dateityp: Hyper Text Markup Language file.)
\n<\/strong><\/em><\/span>Die erste Seite der Homepage hei\u00dft (fast) immer:
\nindex.html.<\/strong> <\/em>Also nennne Deine auch ersteinmal so.<\/span><\/span><\/p>\nHtml-Dokumente
![\"html2\"](\"http:\/\/bkovertretung.bplaced.net\/wordpress\/wp-content\/uploads\/2023\/09\/html2.png\")
<\/h2>\nGrundlegende Befehle<\/h3>\n
Einfacher Absatz<\/h5>\n
\n<\/span><\/span><\/strong><\/em><\/span><\/span><br><\/strong><\/em><\/span> Leerzeile (ohne Ende-Tag)<\/p>\nFarben & Gr\u00f6\u00dfen & sonstige Formatierungen<\/h5>\n
\n<p>I am normal<\/p>
\n<p style<\/span>=“color:red;“>rot<\/span><\/p>
\n<p style<\/span>=“color:blue;“>blau<\/span><\/p>
\n<p style<\/span>=“font-size:50px;“>gro\u00dfe Schrift<\/p><\/p>\n\n
\u00dcberschriften<\/h5>\n
\n<<\/span>h2><\/span><\/span> … \u00dcberschrift unter der hHaupt\u00fcberschrift … <<\/span>\/h2><\/span><\/span>
\n<<\/span>h3><\/span><\/span> … wietere Ebene darunter … <<\/span>\/h3><\/span><\/span><\/p>\nKommentare<\/h5>\n
\u00a0<\/span><\/span>Links<\/h5>\n
<<\/span>a<\/span> href<\/span>=“https:\/\/www.w3schools.com\/html\/“<\/span><\/span>>
\n<\/span><\/span>Visit our HTML tutorial<<\/span>\/a><\/span><\/span><\/div>\nBilder<\/h5>\n
\n-> ausgehend von der index-Datei (bzw. der html-Datei in dem der Befehl steht), wird dann der Ordner images<\/span> gesucht und dort die Datei Bild.jpg<\/span>.
\n<\/span><\/span><\/span><\/p>\n
\nBsp.: src=“C:\\Users\\k.froehlig\\Desktop\\images\/img_girl.jpg“<\/em><\/span>.<\/p>\nLinks<\/h5>\n
Tabellen<\/h5>\n
Aufz\u00e4hlungen<\/h5>\n
Emojis<\/h5>\n
Layout einer Seite<\/span><\/h5>\n