|
| Zobacz poprzedni temat :: Zobacz następny temat |
| Autor |
Wiadomość |
Drah Master
Nabijacz postów
Dołączył: 14 Paź 2006
Posty: 944
Przeczytał: 0 tematów
Ostrzeżeń: 7/7
Skąd: ^.- Szczecin -.^
|
 Wysłany: Sob 13:41, 04 Lis 2006 Temat postu: [Poradnik]HTML-kurs dla początkujących |
|
|
Każdy post niezgodny z regulaminem podforum zostanie zreportowany. Jak chcesz ocenić - zagłosuj! (nie w sondzie) Pamiętaj, że możesz komentować! Oby tylko post nie składał się ze zdania "Nice 8/10"! Więcej treści!
Witajcie forumowicze!
Postawiłem sobie za zadanie wytłumaczenie Wam co to HTML.
Mam nadzieję że dzięki mnie stworzycie sobie ładną stronę, forum, oraz pochwalicie się w temacie : )
Najpierw początki: co to HTML?
HTML - czyli Hypertext Markup Language. Jest to podstawowy język w którym tworzy się strony WWW (World Wide Web). Może go używać każdy, nie ważne czy stary, czy młody, niski czy wysoki, Galanin czy mieszkaniec Aldory, PACC czy FACC itd. itp.
Moim zadaniem jest wyjaśnić Ci, jak używać HTML. Wprowadzę cię do świata body, meta, size, b, i, u, url, a, href, area itd.
HTML tylko wydaje się trudny. Nie trzeba opanować go do perfekcji aby pisać strony internetowe. Opanowanie zajmuje 2-3 dnie. Wystarczy chcieć...
Mój przyjaciel - edytor
Zacznijmy od stworzenia katalogu ze stroną. Nazwij go np. moja strona. Stwórz go w widocznym miejscu (polecam pulpit).
Twoim pierwszym edytorem może być... notatnik (!) ale radzę użyć programu Pajączek. Ściągnij go z tej strony:
<a href=http://www.sprytne-programy.pl/modules.php?op=modload&name=Downloads&file=index&req=getit&lid=128 >Klick</a>
[url=http://www.sprytne-programy.pl/modules.php?op=modload&name=Downloads&file=index&req=getit&lid=128]KLICK[ /url ]
Program jest w wersji Trial, ale nam wystarczy.
Jeżeli już zainstalowałeś Pajączka, uruchom go.
Wybierz Nowy dokument -> Szybki start i kliknij OK.
Usuń to co pojawiło się w oknie dokumentu.
Jeżeli chcesz zobaczyć efekty pracy kliknij na pasek u góry edytora z napisem Tworzenie. Jeżeli chcesz wrócić do edytora znów wciśnij Tworzenie.
Przejdźmy do budowy!
Zacznijmy od najważniejszego znacznika: < HTML > i < BODY >.
Wpisz poniższy tekst:
| Kod: |
[b]Notatnik napisał[/b]
<HTML>
<BODY>
Oto moja strona!
</BODY>
</HTML> |
Jednak znacznik BODY nie jest najlepszy. Nie obsługuje polskich liter. A więc posłóżmy się WIELKIM META! Wystarczy skopiować:
| Kod: |
[b]Notatnik napisał[/b]
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
</head>
Oto moja strona! ąęźśćżńłó
</body>
</html> |
I już! To twoja strona! Teraz zapisz ją w stworzonym wcześniej folderze jako plik html. Najlepszą nazwą jest index.html.
Uwaga! Strony złożone z wielu plików HTML nie zadziałają jeżeli główny plik nie będzie miał tytułu index !
A teraz nowe znaczniki!
Pokażę ci teraz kilka nowych znaczników. Pierwszy z nich to < BR >.
Działa jak spacja. Pamiętaj! Jak wciśniesz spacje w edytorzem to nie będzie jej w przeglądarce. Musisz użyć < BR >.
Drugim jest znacznik < HR >. Tworzy on poziomą linię.
Trzeci, czwarty i piąty to znaczniki < U >, < I > oraz < B >. Służą po kolei do podkreślania, kursywy i pogrubienia.
A teraz test! Wpisz to:
| Kod: |
[b]Notatnik napisał[/b]
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
</head>
<body>
<B><U>Oto moja strona!</U></B>
<HR>
<BR>
<I>Ładna, co nie?</I><BR>
<BR>
<BR>
Niedługo będę umiał więcej : )
</body>
</html> |
Praca domowa: napisz stronę od podstaw, wykorzystując znaczniki których się dziś nauczyłeś. To tyle!
Więc pokoloruj mi świat!
Tytuł mówi wszystko. Teraz pokolorujemy Twoją stronę!
Zaczniemy od tła, a przy okazji nauczę Cię jak stworzyć tytuł, który pojawi się na górnym pasku okienka przeglądarki.
Do stworzenia tła wykorzystamy znacznika < body bgcolor="#kolor" >
A teraz zamieszczę listę kolorów:
Czarny - #000000
Brązowy - #800000
Czerwony - #FF0000
Zielony - #FF8000
Niebieski - #0000FF
Szary - #808080
Liliowy - #800080
Pomarańczowy - FF8F00
Żółty - #FFFF00
Biały - #FFFFFF
No i zacznijmy! W znaczniku zamiast #kolor wpisz któryś z powyższych numerów!
A teraz jak umieścić tytuł? Czytaj dalej.
Wystarczy użyć znacznika < title > i < /title > a między nimi wpisać tytuł.
Tyle teorii. Teraz podam przykład:
| Kod: |
[b]Notatnik napisał[/b]
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<title>Moja pierwsza strona</title>
</head>
<body bgcolor="#FFFF00">
<B><U>Oto moja strona!</U></B>
<HR>
<BR>
<I>Ładna, co nie?</I><BR>
<BR>
<BR>
Niedługo będę umiał więcej : )
</body>
</html> |
Teraz bieżemy się za resztę związaną z kolorami. Pokolorujemy napis!
Do tego służy atrybut < font color=#kolor-z-listy > i < /font > pisząc między nimi wybrany tekst : ).
Zauważyliście że nauka robi się łatwiejsza? I Twoja strona ładnieje : )
Ale zapomnięliśmy o powiększani/pomniejszaniu czcionki.
Do tego służy atrybut < font size="wielkość od 1 do 7" > oraz < /font > a między nimi piszemy tekst : )
A teraz wielkie podsumowańsko:
| Kod: |
[b]Notatnik napisał[/b]
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<title>Moja pierwsza strona</title>
</head>
<body bgcolor="#FFFF00">
<font size="3"><font color=#0000FF><B><U>Oto moja strona!</U></B></font></font>
<HR>
<BR>
<I>Ładna, co nie?</I><BR>
<BR>
<BR>
Niedługo będę umiał więcej : )
</body>
</html> |
Fajnie, co?
Zmieńmy czcionkę, dodajmy linki i obrazki ; )
Tak jak w tytule. Zacznijmy od najłatwiejszego, czyli od innej czcionki.
Użyjemy atrybuta < font face="nazwa czcionki" > i < /font> pisząc między nimi tekst.
Teraz wielka niewiadoma! Linki! Są bardzo proste...
Użyjemy trudniejszego < a href=http://www.tibia.org.pl >tekst< /a > gdzie zamiast linka na stronę tibia.org.pl piszemy swój wybrany link, a zamiast słowa ,,tekst" piszemy wybrany tekst. Gdy go klikniemy przejdziemy na wybraną stronę.
No i skończmy na obrazkach.
Użyjmy znacznika < img src="link-do-obrazka" >. Jeżeli obrazek znajduje się w katalogu ze stroną można wpisać < img src="demon.jpg" > jeśli plik nazywa się demon i jest w formacie *.jpg
Jeszcze przykładzik:
| Kod: |
[b]Notatnik napisał[/b]
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<title>Moja pierwsza strona</title>
</head>
<body bgcolor="#FFFF00">
<font size="3"><font color=#0000FF><B><U>Oto moja strona!</U></B></font></font>
<HR>
<BR>
<I>Ładna, co nie?</I><BR>
<BR>
<BR>
<font face="arial" >Niedługo będę umiał więcej : )</font> <br>
<br>
<img src="http://tibia.org.pl/graf/potwory/Demon.gif><br>
<br>
Obrazek wzięty z <a href=http://www.tibia.org.pl>tej</a> strony. Dziękuję!
</body>
</html> |
Rozbudowana strona z menu
Weźmy się za trudniejsze rzeczy. Zróbmy złożoną stronę z wykorzystaniem ramek.
Użyjemy znacznika < Frame >. Aby to zadziałało musimy zrobić nowy plik o nazwie menu.html w katalogu z naszą stroną. Na razie będzie on wyglądał tak:
| Kod: |
[b]Notatnik napisał[/b]
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
</head>
<body>
Link 1<br>
Link 2<br>
Link 3<br>
</body>
</html> |
Pamiętaj, że możesz go dowolnie zmieniać, używać wszystkich znaczników.
A teraz musimy zrobić kolejną stronę. Teraz tej nadamy nazwę index.html a tamta wcześniejsza (kolorowa) niech nosi nazwę text.html.
| Kod: |
[b]Notatnik napisał[/b]
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<title>Moja pierwsza strona</title>
</head>
<frameset cols="30%,70%">
<frame src="menu.html">
<frame src="text.html">
</frameset>
<body>
<noframes>
Niestety, Twoja przeglądarka nie obsługuje ramek.
</noframes>
</body>
</html> |
No i to wszystko. Jeszcze ćwiczenie! Zrób ładną stronę z wykorzystaniem mego poradnika i pochwal się!
**************************************************
Później możesz przeżucić się na pajączka i możesz wykorzystywać inne znaczniki.
**************************************************
PS: Znaczniki (które nie są w cytatach) są specjalnie napisane z błędem (tego wymaga forum). Przy używaniu ich w edytorze skasuj spację po < i przed >.
**************************************************
Ćwicz jak najwięcej a będziesz lepszy!!!
**************************************************
A teraz taka jakby stopka. Po pierwsze wielkie podziękowania dla Ciebie, czytelniku, że zechciałeś przeczytać mój poradnik
Źródło : [link widoczny dla zalogowanych]
Post został pochwalony 0 razy
Ostatnio zmieniony przez Drah Master dnia Sob 14:21, 04 Lis 2006, w całości zmieniany 1 raz
|
|
| Powrót do góry |
|
 |
|
|
 |
Mejger
Łowca postów
Dołączył: 20 Lip 2006
Posty: 360
Przeczytał: 0 tematów
Ostrzeżeń: 1/7
Skąd: Zamość
|
| Wysłany: Sob 14:04, 04 Lis 2006 Temat postu: |
|
|
po 1. < br> to nie spacja...
po 2. zeby uzywac danej czcionki trzeba ja najpierw wgrac na server chyba ze jest to czcionka wbudowana w Windows
po 3. O ile sie nie myle to bardzo podobny poradnik jest dolączony do kazej wersji Pajaczka.
po 4. widac ze wysztkie znaczniki byly autonapisane przez Pajaczka < DUZE LITERY >
no to chyba tyle...
Post został pochwalony 0 razy
|
|
| Powrót do góry |
|
|
Doggebi
Pogromca stworów
Dołączył: 09 Sie 2006
Posty: 230
Przeczytał: 0 tematów
Ostrzeżeń: 7/7
|
| Wysłany: Sob 15:01, 04 Lis 2006 Temat postu: |
|
|
a to już xx poradnik, który nikomu sie nie przyda, bo jeżeli ktoś chcę zacząć z HTML to wejdzie w google i sobie poszuka poradnika...
topic bezsensu, za kilka dni ujrzysz kilku iVul h4cker0w podających strony z linkami do keylogow...
Post został pochwalony 0 razy
|
|
| Powrót do góry |
|
|
Kueraskas
Gość
|
| Wysłany: Sob 15:05, 04 Lis 2006 Temat postu: |
|
|
Mejger, jesli chodzi o twoj punkt 4.
Niektorzy ludzie, polecaja pisanie znacznikow wielkimi literami, jako, ze sa wtedy lepiej widoczne, wiec nie musi to byc auto-uzupelnianie.
|
|
| Powrót do góry |
|
|
catek
Notoryczny miotacz postami
Dołączył: 17 Cze 2006
Posty: 1344
Przeczytał: 0 tematów
Ostrzeżeń: 0/7
|
| Wysłany: Sob 15:08, 04 Lis 2006 Temat postu: |
|
|
| Cytat: |
| #dopatrzyłem się kolejnego błędu...z obrazkami...jeżeli chcemy mieć swój obrazek na stronie bez wcześniejszego wgrania go na imageshack.us (itp.) musimy go także wgrać na swój server... |
jesli obrazek nie bedzie z linka, lecz z naszego serwera, to nalezy go wgrac na nasz serwer...tak to zrozumialem ja
@topic
poradnik nie podoba mi sie, kiedys juz pisalem jaki jest najlepszy moim zdaniem i chyba nawet najbardziej znany to [link widoczny dla zalogowanych] ^^ zobaczcie sami ;] godzina, dwie i mozesz spokojnie stworzyc strone w html ;]
Post został pochwalony 0 razy
|
|
| Powrót do góry |
|
|
Słodka Megi
Nowy
Dołączył: 12 Paź 2006
Posty: 12
Przeczytał: 0 tematów
Ostrzeżeń: 0/7
Skąd: Tarnów
|
| Wysłany: Sob 15:20, 04 Lis 2006 Temat postu: |
|
|
Ja takie żeczy mam na informatyce i według mnie to nie jest dobry poradnik ponieważ nie ma tu wielu informacji i opisów, a nawet mam wrażenie że nie wiesz nawet co tam pisze. W pierwszym kodzie nie napisałeś między <head> a </head>: <title>  . Może się czepiam ale byłam uczona inaczej . W HTML zalecane jest stosowanie małych znaczników - w XHTML, który jest kontynuacją języka HTML, małe znaczniki są już obowiązkowe, zatem lepiej jest się przyzwyczajać do właściwych technik. Polecam tą stronę, jeśli ktoś ma zamiar zabrać się za pisanie stronki: [link widoczny dla zalogowanych]
Post został pochwalony 0 razy
|
|
| Powrót do góry |
|
|
Drah Master
Nabijacz postów
Dołączył: 14 Paź 2006
Posty: 944
Przeczytał: 0 tematów
Ostrzeżeń: 7/7
Skąd: ^.- Szczecin -.^
|
| Wysłany: Sob 15:24, 04 Lis 2006 Temat postu: |
|
|
Przypominam poradnik nie jest mój niektórym się to zapewne przyda bo html'u uczą już bodajże w 1 klasie Gimnazjum 
Polecam te strony poradniki dotyczące HTML :
[link widoczny dla zalogowanych]
[link widoczny dla zalogowanych]
[link widoczny dla zalogowanych]
[link widoczny dla zalogowanych]
Post został pochwalony 0 razy
|
|
| Powrót do góry |
|
|
Słodka Megi
Nowy
Dołączył: 12 Paź 2006
Posty: 12
Przeczytał: 0 tematów
Ostrzeżeń: 0/7
Skąd: Tarnów
|
| Wysłany: Sob 15:39, 04 Lis 2006 Temat postu: |
|
|
to trzeba było od razu napisać "poradnik z tej i tej strony, zostal napisany przez jakiegos kolesia", drugi link jest taki sam jak w moim poprzednim poście
Post został pochwalony 0 razy
|
|
| Powrót do góry |
|
|
|
|
Nie możesz pisać nowych tematów
Nie możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
|
|
