WS4 - Wichtige Informationen

Größe: px

Ab Seite anzeigen:

Download "WS4 - Wichtige Informationen"

Hansi Steinmann
vor 6 Jahren
Abrufe

1 WS4 - Wichtige Informationen 1 Einführung in HTML zur Erstellung einer Homepage In diesem Abschnitt zeigen wir Ihnen den Souce Code einer einfachen HTML Webseite. Wie diese Webseite im Browser aussieht, sehen Sie unter diesem Link. 1 <! DOCTYPE html > 2 <HTML > 3 4 <HEAD > 5 < Title > This is a simple. html website </ title > <BODY bgcolor =" lightgreen "> 9 <meta charset ="utf -8"> 10 <FONT SIZE =6 > 11 </HEAD > <Body > <H1 > How to make a simple Website </ H1 > To understand how this webpage was programmed, please display the souce code by right - clicking on free space and choosing " Show Page Source " <P> 23 <H2 > How to format the Layout </ H2 > 24 In the source code of this webiste you can see, how the layout was programmed. It is always useful to specify the utf -8 character set in the HEAD section of the HTML document, so that special chracters like " Umlaute " are displayed correctly. Certain words can be emphasized by making them <B > bold </B >, < U > underlined </u > or <I > cursive </I >. The number in the header command, e. g H1, H2,..., determines the size of the header. 25 </P > 26 1

2 27 <hr > <P> 30 <H2 > How to comment code lines </ H2 > 31 Lines, which are commented, are not used as code by the browser and are not displayed on the website. This is shown on the website.  32 </P > <hr > <P> 37 <H2 > How to make a link to another website </ H2 > 38 This section shows you how to make a link to another. html document wihtin the same folder structure. By clicking on this <a href =" http :// www. chemie. unibas.ch /~ team2016 / test_accp2016 / test_accp2016. html " > link </a >, you are forwarded to another website. 39 </P > <hr > <P> 44 <H2 > How to upload an image </ H2 > In this section, you learn how to upload an image. using the IMG SRC command. The picture has to be saved in the same folder as your HTML file. With the width and height option you can adjust the size of the image. <br > <IMG SRC=" hallo. jpg " width =" 750 " height =" 750 "> 49 </P > <hr > <P> 54 <H2 > How to make a list </ H3 > 55 There are orderd lists : 56 <ol > 57 <li > Element 1 </ li > 58 <li > Element 2 </ li > 59 <li > Element 3 </ li > 60 </ol > <br > And unorderd lists 63 <ul > 2

3 64 <li > Element 1 </ li > 65 <li > Element 2 </ li > 66 <li > Element 3 </ li > 67 </ul > 68 </P > <hr > <P> 73 <H3 > How to make a Table </ H3 > 74 < table border =4 > 75 <TR > 76 <TD >Element 1</TD > 77 <TD >Element 2</TD > 78 <TD >Element 3</TD > 79 </TR > 80 <TR > 81 <TD >Element 4</TD > 82 <TD >Element 5</TD > 83 <TD >Element 6</TD > 84 </TR ></ Table > 85 </P > 86 </hr > <P> 89 <H3 > How to make a simple button </ H3 > <a href =" http :// www. chemie. unibas.ch /~ team2016 / test_accp2016 / Gaussview_results. html "><button type =" button ">Dies ist ein einfacher Button mit Link </ button > </a > </P > 94 </hr > <H2 >That s it </H2 > </Font > 99 </Body > 100 </Html > Ein File gemäss obiger Vorlage können Sie mit jedem Textverarbeitungsprogramm erstellen, Sie müssen es jedoch als reinen Text abspeichern. Änderungen des Textdokuments nehmen Sie am besten auf dem Server mit dem vi-viewer vor (siehe Woche 2). Ein HTML-Script beginnt immer mit dem Kommando <HTML> (Hyper Text Markup Language) und endet mit </HTML>. Die meisten Tags (Marken) haben dieselbe Klammerstruktur, wobei HTML durch ein anderes Symbol ersetzt ist. Ein HTML Dokument besteht im Wesentlichen 3

4 aus 2 Teilen. Dem Header (<HEAD>) und dem <BODY>. Im Header wird der Titel und das Layout der Webseite festgelegt, während im Body der eigentliche Inhalt der Webseite steht. Dieser kann aus Text, Bildern, Links, Tabellen, Animation, usw. bestehen. Texte werden im allgemeinen durch Überschriften-Tags (<H1>) und (<P>) gegliedert. Kommentare, welche auf der Homepage nicht erscheinen sollen, werden durch das folgende Kommando markiert. -->. Gross- und Kleinschreibung spielt in den HTML-Befehlen keine Rolle. Der Befehl <meta charset=utf-8> erlaubt Ihnen die Verwendung von Umlauten im gesamten HTML Dokument. Alternative können Sie auch den Befehl &auml, &ouml, &uuml für die Umlaute ä,ö und ü verwenden. Eine einfache HTML-Einführung (HTML-Einführung Schritt für Schritt) und eine ausführlichere HTML-Beschreibung (SELFHTML) finden Sie in unseren ACCP-Übungsdateien. 2 Anleitung zum Hochladen von Daten auf den Webserver 2.1 Fernzugriff Mit dem Befehl ssh ( secure shell ) können Sie sich auf einem entfernten Computer einloggen und dann Befehle eingeben, die von diesem Computer ausgeführt werden, als ob Sie direkt an diesem Computer arbeiten würden. Sie können so neue Ordner erstellen (mit mkdir), Dateien löschen oder editieren (z.b. mit vi). Die Syntax des Befehls zum Einloggen auf unserem Webserver lautet: ssh team2017@ Nach Eingabe des Passwortes sind Sie auf dem Webserver eingeloggt. Alle Befehle, die Sie jetzt eingeben, werden nun auf dem Webserver statt auf Ihrem lokalen PC ausgeführt. Um sich wieder auszuloggen und auf dem lokalen PC weiter zu arbeiten, geben sie exit ein. 2.2 Kopieren von Dateien Zum Kopieren von Dateien verwenden Sie den Befehl scp. Die Syntax lautet: scp lokaler_pfad team2017@ lokaler_pfad steht dabei für den Pfad zur Datei, die Sie kopieren wollen, auf ihrem lokalen Computer. Falls Sie eine Datei aus ihrem aktuellen working directory kopieren wollen, brauchen Sie nur den Dateinamen anzugeben. entfernter_pfad steht für den Pfad auf dem entfernten Computer, wohin Sie die Datei kopieren wollen. 4

5 Beispiel: Um die Datei BildFavorit.html im aktuellen working directory in den Ordner public_html/hmueller zu kopieren, verwenden Sie: scp BildFavorit.html Tipp: Es ist praktisch zwei Terminal-Fenster zu verwenden. Auf einem loggen Sie sich mit ssh auf dem Webserver ein, auf dem anderen arbeiten Sie normal auf dem lokalen Computer und kopieren von dort Ihre Dateien mit scp. 3 Praktische Tricks 3.1 Quellcode anzeigen Wenn Sie eine Webseite aufgerufen haben, können Sie sich den Quellcode anzeigen lassen indem Sie mit der rechten Maustaste auf einen freien Bereich der Webseite klicken und "Quellcode anzeigenäuswählen. Dies sollte in allen gängigen Browsern (Internet Explorer, Firefox, Chrome, Safari) funktionieren. Dies ist sehr hilfreich um Fehler aus dem Quellcode zu eliminieren. 3.2 Hard-Refresh Nachdem Sie die Quelldatei Ihrer Homepage verändert und abgespeichert haben, werden die Änderungen erst nach dem erneuten Laden der Seite übernommen. Sollte dies nicht der Fall sein, führen Sie einen sogenannten "hard-refesh"durch, indem Sie für Firefox und Chrome Ctrl + F5 gleichzeitig drücken. 3.3 Bildformat Manchmal ist es praktisch das Format eines Bildes zu verändern. In Unix tun Sie dies, indem Sie das Bild mit dem Programm GIMP öffnen (Kommando: gimp picture.jpg) und dann in dem gewünschten Format abspeichern. Mit ps2pdf können Sie ein postscript file (ps) in pdf umwandeln. Falls Sie nicht wissen, wie dieses Kommando zu benutzen ist, informieren Sie sich unter man ps2pdf. Hier noch ein paar Informationen zu einigen Bilderformaten: 5

6 Abkürzung Bedeutung Bemerkung gif Graphics Interchange Formafreie Kompression (Web-Format) Sehr weit verbreitet; Pixel-Grafik; verlust- jpeg Sehr weit verbreitet; ideal, um zwischen Joint photographics expert Computern auszutauschen; Kompression group nicht verlustfrei; ideal für Photographien png Portable Network Graphics Pixel-Grafik ps Postscript Weit verbreitet; Vektor-Grafik; typischerweise grosse Files eps Encapsulated postscript Verwandt mit ps, aber zusätzlich Encapsulation bmp bitmap Microsoft Format; Pixel Grafik 6

Ähnliche Dokumente

Webseiten mit HTML. Visual QuickProject Guide. von Elizabeth Castro

Webseiten mit HTML. Visual QuickProject Guide. von Elizabeth Castro Webseiten mit HTML Visual QuickProject Guide von Elizabeth Castro Der Ihnen vorliegende Visual QuickProject Guide langweilt nicht mit Theorie und umständlichen Erklärungen, sondern nutzt große Farbabbildungen