Download
1 / 17
170 likes | 332 Views
Tworzenie stron internetowych przy wykorzystaniu języka HTML. Autor: Daniel Surowiecki. Język HTML. Wprowadzenie. Kto z nas nie chciałby mieć swojej własnej strony internetowej???
E N D
Tworzenie stron internetowych przy wykorzystaniu języka HTML. Autor: Daniel Surowiecki Język HTML
Wprowadzenie • Kto z nas nie chciałby mieć swojej własnej strony internetowej??? • W dobie pełnej komputeryzacji i wyższości internetu nad innymi środkami przekazu, chyba każdy chciałby mieć swój “kawałek” tej wielkiej międzynarodowej sieci.
Wprowadzenie • Wielu z nas myśli, że do stworzenia własnej strony potrzeba wielkich umiejętności i wiedzy informatycznej. • Nic bardziej mylnego!!! Do stworzenia prostej strony potrzeba jedynie trochę chęci, program “Notatnik” i, w uzupełnieniu, moja prezentacja, w której przedstawię podstawowe polecenia potrzebne do stworzenia strony.
Podstawy • Najważniejsze w pisaniu stron są polecenia, które wpisujemy w nawiasach: <przykład> • Aby zakończyć polecenie, tzn. zakończyć obszar jego działania, należy w poleceniu wstawić ukośnik: </przykład> • Pamiętajmy, żeby całość tekstu oddzielać wolnymi wierszami, gdyż w późniejszych fazach możemy się pogubić w gąszczu poleceń.
Budowa “rusztowania” • Na początek należy otworzyć program “Notatnik”, który każdy z pewnością ma na swoim komputerze. • Pierwszym poleceniem, jakie wpiszemy jest <html> i kilka wierszy niżej </html>. Między tym poleceniem wpisujemy polecenie <head>, a pod nim <title> tu możemy wpisać tytuł strony</title>. Opcjonalnie możemy wpisać nazwisko autora poprzez wpisanie polecenia: <meta name=”author” content=”tu wpisujemy imię i nazwisko autora”/> Teraz możemy już zamknąć sekcję head poprzez wpisanie: </head>.
Budowa “rusztowania” • Następnym krokiem jest stworzenie sekcji body – tej, w której wpisywać będziemy resztę poleceń potrzebnych do budowy strony internetowej. W tym momencie warto wiedzieć, jakie tło chcemy, by miała nasza strona internetowa. Mamy do wyboru poszczególne kolory, np. Blue, green, red, etc., albo plik, który mamy na dysku, np. jakiś obrazek, czy zdjęcie. • Jeśli wybraliśmy już obrazek należy wpisać polecenie <body background=”tutaj wpisujemy pełną nazwę obrazka, np. obrazek.jpg”> Następnie tworzymy kilka linijek odstępu i wpisujemy zakończenie polecenia (jeśli jeszcze nie pamiętacie: </body>)
Budowa “rusztowania” • Mamy za sobą już budowę rusztowania. Po prawej stronie przedstawiam przykładowy wynik pracy.
Zapisywanie pliku • Gdy utworzymy już “rusztowanie” strony, należałoby plik zapisać. Aby to zrobić należy wejść w opcję “Zapisz jako...” i w polu nazwy należy wpisać nazwę i KONIECZNIE rozszerzenie .htm lub .html, np. nazwa.htm • Tak zapisany plik zostanie otwarty w przeglądarce internetowej. Aby móc ponownie wpisywać tekst do strony należy w menu “Widok” wybrać opcję “Źródło”.
Wpisywanie tekstu • Jak widzimy mamy na razie tylko tło i nic więcej na nim. Nadeszła pora na wpisanie tekstu. • Jak już wcześniej wspomniałem miejsce edycji strony internetowej to sekcja body, więc tam należy zrobić większą przerwę, aby swobodnie wpisywać tekst i polecenia. • Po wpisaniu treści należy ją sformatować.
Wpisywanie tekstu • Formatowanie czcionki: • Zaczynamy od polecenia <font face=”tu wpisujemy rodzaj czcionki, np. Arial” size=”tu wpisujemy wielkość czcionki, np. 15” color=”nazwa koloru w języku angielskim”> i zamykamy: </font> • Aby użyć pogrubienia wpisujemy polecenie <b></b> • Podkreślenie: <u></u> • Pochylenie: <i></i> • Pamiętajmy, że tekst wpisujemy pomiędzy poleceniami!!! (przykład: <font face=”Arial” size=”5” color=”black”><b>Ala ma kota</font></b>)
Wpisywanie tekstu • Formatowanie akapitu: • Wyrównanie: <p align=”left, right, center, albo justify”></p>, gdzie: left – do lewej, right – prawej, center – do środka, justify – wyjustowanie. • Koniec wiersza: <br> - jest to polecenie, które nie ma zakończenia, gdyż jego działanie jest podobne do jednokrotnego naciśnięcia przycisku ENTER.
Wstawianie grafiki • Ważnym elementem strony internetowej jest grafika. Należy jednak pamiętać, że większa ilość zdjęć i obrazków to dłuższy czas oczekiwania na otwarcie strony. • Aby dodać grafikę do strony należy wpisać polecenie <img src=”nazwa pliku graficznego” width=”tu wpisujemy szerokość obrazka w pikselach” height=”tu zaś wysokość”/> Pamiętajmy, że podawanie wysokości i szerokości nie jest konieczne, wówczas polecenie wygląda następująco: <img src=”nazwa pliku”/>
Tworzenie odsyłaczy • Odsyłacze (hiperłącza) to tzw. Linki, których kliknięcie powoduje przejście do innej strony. • Wykorzystuje się je również w tworzeniu tzw. podstron, na których podajemy szczegółowe informacje, np. na stronie głównej klikamy w link Kontakt i zostajemy odesłani na stronę z mapką, numerem telefonu i adresem.
Tworzenie odsyłaczy • Polecenie odsyłacza wygląda następująco: <a href=”adres strony, na którą mamy być odesłani”>Tu wpisujemy tekst linku</a>. • Przykład: <a href=”http://www.ilovemoto.prv.pl”>link</a>
Podsumowanie budowy strony internetowej • Mamy zbudowaną prostą stronę internetową. Oczywiście jeśli chcemy, aby nasza strona była obszerniejsza i bardziej “profesjonalna” należy do niej dodać nowe elementy, a najlepszym sposobem jest wykorzystanie edytora HTML.
Korzystanie z edytorów HTML • Pomocą w tworzeniu stron internetowych są darmowe edytory, które są dziecinnie proste w obsłudze. W nich nie musimy pamiętać wszystkich poleceń, a dodatkowo znajdziemy wiele opcji, których nie opisałem w mojej prezentacji, gdyż jest ich ogromna ilość. Programem godnym polecenia, wg mnie jest EdHTML, ale istnieją również inne dobre produkty, np. Pajączek, AceHTML, DiDa, HateML, Kicia i wiele innych. • A oto moja pierwsza strona, jaką wykonałem w programie EdHTML: www.ilovemoto.prv.pl • Stworzenie jej zajęło mi około dwóch dni, a wówczas dopiero uczyłem się projektowania stron www.
KONIEC!!! • Życzę powodzenia w projektowaniu stron internetowych i zachęcam do poznania również innych sposobów ich tworzenia.
