90 likes | 203 Views
Podstawy tworzenia stron WWW w języku HTML Koło Naukowe Elektroniki Przemysłowej - KNEP. Wykonali:Mariusz Zawistowicz i Karol Witowski.
E N D
Podstawy tworzenia stron WWW w języku HTMLKoło Naukowe Elektroniki Przemysłowej - KNEP Wykonali:Mariusz Zawistowicz i Karol Witowski
Tworząc strony www w języku HTML można skorzystać z programów znacznie ułatwiających ichkonstruowanie.Skorzystamy z freeware’owego programu EdHTML v2.7 i na jego podstawie postaramy się wyjaśnić podstawowe zasady tworzenia stron www. Program EdHTML można bezpłatnie Ściągnąć z internetu! np. ze strony: http://www.pcworld.pl/ftp/pc/programy/0971.html Poprzedni slajd
Poprzedni slajd Włączenie trybu tworzenia w języku HTML Pierwsze kroki – Zarys Strony i podstawowe ustawienia... Szybkie tworzenie dokumentu HTML Przykładowe wypełnienie okien konfiguracyjnych
Poprzedni slajd Wygląd dokumentu po wprowadzeniu podstawowych danych Sekcja <HEAD> w której znajduje się większość wprowadzonych przed chwilą informacji np. autor strony,jego e-mail, tytuł strony, kodowanie, słowa kluczowe (ułatwiają innym odnalezienie w inetrnecie stron o poszukiwanej tematyce), itp.. Większość z tych informacji nie jest jednak wymagana do prawidłowego działania Strony www. Sekcja <BODY> w której znajduje się Właściwa treść (ciało) dokumentu. W dalszej części prezentacji zajmiemy się dokładniej tą sekcja.
Poprzedni slajd Najprościej jest użyć skrótu na pasku powodującego włączenie generatora Sekcji BODY Sekcja <BODY> - kolor tla, wstawianie rysunku... Ustawienie koloru tła lub użycie dowolnego rysunku jako tła. Jeśli jako tło ustawiony został konkretny plik graficzny w sekcji BODY zostanie umieszczony do niego pełna ścieżka.
Poprzedni slajd Sekcja BODY – wstawianie tekstu do dokumentu W menu HTML wybieramy pod-menu ‘tekst’ , a następnie dowolny typ tekstu. dla przykładu wybrana została czcionka pogrubiona, powiększona i wyróżniona.Można ją również dowolnie wyrównać w pod-menu ‘wyrównywanie’ Każdy rozpoczęty znacznik nie tylko w przypadku tekstu należy zakończyć odpowiednim znacznikiem np. Czcionka pogrubiona <b> powinna być zakończona </b> lub czcionka powiększona <big> zakończona jest znacznikiem </b>. Zauważmy że cała sekcja BODY rozpoczęta znacznikiem <body> zakończona jest odpowiednio przez </body> !!! Czcionka pogrubiona Czcionka powiększona Czcionka wyróżniona Czcionka wyrównana do środka
Poprzedni slajd Po tych kilku krokach strona wygląda następująco...
Poprzedni slajd Sekcja BODY – wstawianie poziomej lini , rysunku i hiperłącza. W menu HTML wybieramy pod-menu hiperłącza, rysunku lub poziomej linii. w sekcji body pojawiają nam się odpowiednie polecenia które należy jeszcze uzupełnić. np. tak jak poniżęj Polecenie <center> powoduje wycentrowanie wszystkich elementów znajdujących się w ramach polecenia Polecenie <HR> wstawiające Poziomą linie do dokumentu. Wewnątrz określony Został dodatkowo jeszcze kolor linii Polecenie <BR> powodujące przejście do następnego akapitu Polecenie <A HREF=” ”>Powoduje umieszczenie na stronie odnośnika w podanym przykładnie o nazwie ‘KNEP’ do podanej strony internetowej. jak widać w tym przypadku jest to strona Koła Naukowego. Odnośnikiem niekoniecznie musi być storna www – może być to dowolna grafika, plik Tekstowy itp.. Polecenie <IMG SRC=” ”> powodujące wstawienie Konkretnej grafiki wprost do dokumentu. Polecenia wewnętrzne ‘width’ i ‘height’ jak Sama ich nazwa mówi określą wielkość obrazka.
Poprzedni slajd Wygląd strony po kolejnych krokach... Wpisany tekst Pozioma linia Odnośnik do strony Koła Naukowego W ten oto sposób stworzona została przez nas najprostsza strona WWW którą można oczywiście urozmaicać i wzbogacać zgodnie z naszą fantazją . Można dodać np. tabelę, wypunktowane listy, odsyłacze do innych stron i wiele wiele innych urozmaiceń które skuszą innych internautów do obejrzenia naszej strony. Dziękujemy za cierpliwe dotrwanie do końca. Mamy nadzieję, że sposób prezentacji był stosunkowo klarowny i nie sprawił większych kłopotów ! (Za niedociągnięcia w niniejszej prezentacji przepraszamy. Wszelkie uwagi proszę kierować na e-maile autorów.) Wstawiona grafika