Można też ściągnąć np. z:

Transkrypt

1 W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą, przenośną wersję Notepad++ znajdziecie Państwo na stronie z zajęciami: Można też ściągnąć np. z: Jeśli ktoś woli język polski, to można go ustawić: W Settings\Preferences. Jeśli byłby problem, to można zrobić tak: skopiować pliki językowe z katalogu, gdzie jest aplikacja, do katalogu Notepad++Portable\Data\settings i zmienić nazwę pliku na "nativelang.xml".

2 Struktura dokumentu/strony Na początek jeśli w kodzie strony umieścimy jakikolwiek fragment wewnątrz znaczników  to będzie to czyli fragment, który nie będzie widoczny (i wykonywany) na stronie. Możemy w ten sposób wstawiać komentarze, żeby być opisać sobie jakieś fragmenty dokumentu. Np.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!-- powyższy wiersz to deklaracja typu dokumentu, nie ma konieczności wpisywania typu dokumentu, ale jest to wskazane, ponieważ dzięki niemu przeglądarka będzie wiedziała która wersja języka HTML/XML jest używana na stronie Więcej o deklaracji typu dokumentu: > <html> <head> </head> <body> </body> </html> znaczniki sekcji nagłówka znaczniki sekcji ciała dokumentu znacznik otwierający i zamykający dokument html Czyli, już bez dodatków: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> </head> <body> </body> </html>

3 Proszę utworzyć nowy dokument HTML - jest to zwykły dokument tekstowy z rozszerzeniem html lub htm. W Notepad++ po prostu Plik >> Nowy Rozszerzenie (format pliku) możemy wybrać podczas jego zapisywania - Plik >> Zapisz jako i wybieramy typ pliku:

4 Notepad++ może uzupełniać to co zaczęliśmy pisać - jeśli już zapisaliśmy plik w jakimś formacie, to podpowiedzi będą z tego formatowania. Opcję tą musimy włączyć w Ustawienia (Settings) >> Preferencje (Preferences) w zakładce, jak na poniższym zrzucie. Wtedy, jeśli zaczniemy pisać pierwszą literę, to pojawi się lista funkcji, np.: zdecydowanie przyspiesza to pracę.

5 Sekcja HEAD (sekcja nagłówka/nagłówkowa) Umieszczamy w niej znaczniki informujące o: kodowaniu, tytule strony, autorze, słowa kluczowe, odwołania do pliku przechowującego style, itp. Do wygenerowania części z tych informacji możemy się posłużyć np. stroną Oczywiście nie ma konieczności umieszczania w nagłówku wszystkich tych informacji. Przykład: <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso "> <META NAME="ROBOTS" CONTENT="INDEX,FOLLOW,ALL"> <META HTTP-EQUIV="Content-Language" CONTENT="pl"> <META NAME="description" CONTENT="Strona główna kursu tworzenia stron insternetowych "> <META NAME="keywords" CONTENT="wwsis, kurs, www, tworzenie stron"> <META NAME="author" CONTENT="Aleksander Krzyś"> <META HTTP-EQUIV="Reply-to" CONTENT="aleksander.krzys@gmail.com"> <META NAME="revisit-after" CONTENT="60 days"> <TITLE>Kurs Projektowania Internetowych Stron WWW</TITLE> </HEAD> </head> informacja o kodowaniu pliku instrukcja dla robotów wyszukujących (np. dla robotów Google) czy strona ma być indeksowana, czy robot ma się przemieszczać za hiperłączami na stronie określenie języka strony (np. po to żeby dla niewidomych dobrany był odpowiedni silnik czytający lub też żeby w wyszukiwarce strona była odpowiednio zindeksowana) opis strony - pojawia się m.in. w Google przy wyszukaniu strony. Jeśli go nie będzie, to strona zostanie zindeksowana z opisem będącym pierwszym fragmentem strony lub np. z pierwszym pogrubionym fragmentem tekstu słowa kluczowe - przy wyszukiwaniu strona będzie się pojawiała w wynikach właśnie po wpisaniu tych słów. Chociaż nie tylko - roboty analizują również treść strony, żeby strona była zindeksowana z tymi właśnie słowami kluczowymi, to słowa muszą występować w treści strony. Generalni chodzi o to, żeby nie było sytuacji, że wpisujemy w wyszukiwarce drzewo a w wynikach pojawia nam się np. strona kasyna on-line dane autora adres do kontaktu - będzie on widoczny w wynikach wyszukiwania znów informacja dla robotów wyszukujących - po jakim czasie ma ponownie odwiedzić stronę, czyli jak często (średnio) znacząco modyfikujemy stronę tytuł strony - pojawi się na pasku tytułowym przeglądarki oraz w wynikach wyszukiwania Jeśli ktoś chce wiedzieć więcej, to proszę wyszukać w google np. znaczniki meta lub tagi meta.

6 Sekcja BODY (sekcja zawartości strony) Wszystko co umieścimy w tej części będzie widoczne na stronie (chyba, że będzie to wspomniany komentarz). Zadanie: Stworzyć stronę, na której będzie się wyświetlało Państwa Imię i Nazwisko a w drugiej linii nazwę Uczelni. Przykład kodu: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <HEAD>  </HEAD> </head> <body> Aleksander Krzyś<br />  Uniwersytet Przyrodniczy we Wrocławiu </body> </html> Teraz proszę pogrubić Imię i zastosować kursywę (pochylenie fontu) do nazwiska. <b> - znacznik pogrubienia <i> - znacznik kursywy Przydatnym znacznikiem jest znacznik akapitu <p> (nie trzeba wtedy wstawiać znacznika <br />) <p> to jest pierwszy akapit</p> <p> to jest drugi akapit</p>

7 Formatowanie tekstu Np. jeśli chcemy pogrubić jakiś fragment tekstu to ujmujemy go w znaczniki <b></b> ten tekst jest normalny <b>to jest tekst pogrubiony</b> ten fragment już nie jest pogrubiony Pochylenie tekstu - znaczniki <i> </i> Lista głównych znaczników UWAGA - poniższy sposób formatowania tekstu, czyli użycie znacznika <font> nie jest zalecany!!! Tutaj podaję go, ponieważ wiele osób jeszcze go używa, więc np. przy modyfikacji stron możemy się z nim spotkać. Stopień pisma, czyli rozmiar - font size -- np.: to jest tekst normalny <font size= 12 >to jest tekst o wielkości 12 pt</font> to znów normalny Font normalny ma standardowo przypisaną wartość 3. Krój, czyli rodzaj - font face -- np.: to jest tekst normalny <font face= Arial >to jest tekst Arial</font> to znów normalny Krój fontu normalny, to krój, który jest ustawiony jako standardowy w przeglądarce. Kolor tekstu - font color -- np.: to jest tekst normalny <font color= red >to jest tekst czerwony :) </font> to znów normalny

8 Tabele Struktura tabeli: <table> <tr> <td></td> </tr> </table> Efektem będzie tabelka składająca się z jednej komórki. Bardziej rozbudowana tabelka: <table> <tr> <td>pierwsza komórka pierwszego wiersza</td> <td>druga komórka pierwszego wiersza </td> </tr> <tr> <td>pierwsza komórka drugiego wiersza</td> <td>druga komórka drugiego wiersza </td> </tr> </table> Jeśli chcemy dołożyć obramowanie, to np. do znacznika <table> możemy dodać: <table border= 5 > Jeśli np. chcemy mieć obramowanie tylko wokół tableli a nie wewnątrz, to możemy zastosować: <table border= 5 rules= none > Połączenie/scalenie komórek tabeli: <table border="2"> <tr> <td colspan= 2 >pierwsza komórka pierwszego wiersza</td> </tr> <tr> <td>pierwsza komórka drugiego wiersza</td> <td>druga komórka drugiego wiersza </td> </tr> </table> *colspan= x określa ile kolejnych komórek tabeli ma być połączone w jedną Inne formatowania tabel

9 Zastosowanie Kaskadowych Arkuszy Stylów (SCC) do modyfikacji wyglądu strony internetowej. CSS Cascading Style Sheets Kaskadowe arkusze stylów trochę teorii Możecie o nich poczytać np. na W dwóch słowach: CSS to zasady, zgodnie z którymi wyświetlane są poszczególne elementy strony WWW. Arkusze stylów można stosować w następujący sposób: 1) tworzymy nowy element Arkusz stylów (Style Sheet) np. o nazwie StyleSheet.css (oczywiście nazwa może być inna, proszę zauważyć, że tutaj plik ma rozszerzenie "css") 2) w Arkuszu opisujemy/określamy wygląd poszczególnych elementów strony 3) tworzymy odnośnik ze strony (np. index.html) do naszego arkusza stylów (umieszczamy go w sekcji <head>) <link rel="stylesheet" type="text/css" href="stylesheet.css" /> (w miejscu StyleSheet.css wpisujemy nazwę swojego pliku) 4) i powinno działać (oczywiście jeszcze nie mamy formatowań w pliku stylów, więc efekt będzie dopiero po dodaniu tych formatowań) Przykład: - w pliku StyleSheet.css wpisujemy np.: body { background-color: red; - w pliku index.html wpisujemy: <link rel="stylesheet" type="text/css" href="stylesheet.css" /> - i uzyskujemy czerwone tło (ponieważ całej sekcji body przypisaliśmy czerwony kolor tła) - jeśli teraz zmienimy kolor w pliku StyleSheet.css to zmieni nam się kolor tła we wszystkich plikach, w których korzystamy z tego arkusz stylów (oczywiście w powyższym przykładzie korzystaliśmy tylko z jednego :)

10 Dalsza teoria: Generalnie schemat kodu CSS wygląda tak: selektor {właściwość: wartość; po angielsku: selector {property: value; przykład zawartości pliku StyleSheet.css: body { background-color: red; background-image: url(obrazy/nemo.gif); /*proszę znaleźć sobie jakąś grafikę na tło*/ background-repeat: no-repeat; background-position: bottom; h1 { font-size: 56pt; color: #FFC650; h2 { font-size: 12pt; border-style: dotted; border-color: #1E1E1E; p { font-size: 26pt; background-color: #12579C; text-align: right; margin-top: 36pt; W dokumencie HTML odwołanie do konkretnego stylu odbywa się poprzez selektory. Np. jeśli mamy tekst pomiędzy tagami/znacznikami <p> to jest ten tekst </p> to będzie on sformatowany zgodnie z CSSsem, z którego strona korzysta.

11 Selektory identyfikatorów i selektory klas Identyfikatory Identyfikatory pozwalają na przypisanie formatowania tylko do niektórych elementów. Np. możemy mieć wiele akapitów na stronie a za pomocą identyfikatorów możemy decydować, że wygląd niektórych z tych akapitów może się różnić od wyglądu innych. Na następnych zajęciach będziemy używać selektorów identyfikatorów do tworzenia struktury dokumentu, czyli nagłówka, menu, treści, stopki itp. Zasada stosowania: W pliku CSS: p#informatyka { font-size:24pt; color:lime; p#turystyka { font-size:14pt; color:black; *zamiast p#informatyka, można napisać samo #informatyka ** p#informatyka lub #informatyka to selektory identyfikatorów W pliku strony: <p id="informatyka"> treść dla kierunku Informatyka</p><br /> <p id="turystyka">treść dla kierunku Turystyka</p></form> treść dla kierunku Informatyka treść dla kierunku Turystyka WAŻNE!!! Na danej stronie może występować tylko jeden element (znacznik) powiązany z danym identyfikatorem, czyli jeden identyfikator może oddziaływać tylko i wyłącznie na jeden element na stronie.

12 Klasy Klasy pozwalają na stworzenie takich identyfikatorów, które będziemy mogli użyć wielokrotnie w dokumencie. Zasada stosowania: W pliku CSS:.informatyka { font-size:24pt; color:lime;.turystyka { font-size:14pt; color:black; W pliku strony: <p class="informatyka"> treść dla kierunku Informatyka</p> <p class="turystyka">treść dla kierunku Turystyka</p> <h1 class= informatyka > treść nagłówka pierwszego z formatowaniem klasy informatyka</h1> <p class="informatyka"> Inny akapit korzystającyc z formatować klasy informatyka</p>

13 Zadanie 1) Struktura przechowywania strony/witryny (czyli zawartość katalogu, w którym będzie witryna) będzie wyglądać następująco: Katalog główny (np. ImieNazwisko) - index.html Katalog style: - StyleSheet.css Katalog omnie - omnie.html - MojeZdjecie.jpg Katalog Studia - wwsis.html Katalog tlo na obrazy tła (tu będą obrazy wykorzystywane na tło) Katalog MojeHobby - Hobby.html Katalog MojeMiasto - NazwaMiasta.html * jeśli ktoś używa innych nazw, to proszę unikać polskich liter oraz spacji (wprawdzie w większości przypadków nie będzie z tym problemu, ale czasami mogą się takie zdarzyć w zależności od serwera, przeglądarki itp.). 2) Przygotować powyższą strukturę witryny WWW z katalogami i plikami. Zadanie Na razie nie będziemy różnicować stron pod względem użytych, proszę więc na każdej ze stron utworzyć strukturę dokumentu HTML według poniższego schematu <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <link rel="stylesheet" type="text/css" href="style/stylesheet.css" /> </head> <body> </body> </html> 1) Żeby było wygodniej poruszać się witrynie, proszę dodać hiperłącza do stron: 1. na stronie głównej do wszystkich czterech podstron, 2. na podstronach do strony głównej 3. konstrukcja hiperłącza: <a href= NazwaStrony.html >tekst, który będzie się wyświetlał</a> lub <a href= NazwaKatalogu/NazwaStrony.html >jeśli strona jest w podkatalogu</a> lub <a href=../nazwastrony.html >jeśli strona jest w katalogu nadrzędnym</a> 2) W pliku arkuszy stylów StyleSheet.css proszę dodać kilka selektorów i przypisać kilka wartości wybranym właściwościom. Można skorzystać z przykładu na poprzedniej stronie. 3) Na poszczególnych stronach dodać jakiś tekst wykorzystując znaczniki h1, h2 i p. 4) Zmienić zawartość pliku CSS np. kolory i wielkości fontów. Sprawdzić na stronach zmiany powinny być widoczne.