jak założyć i prowadzić własną firmę krok po kroku rozpoczęcie działalności gospodarczej przez internet zarabianie pieniędzy przez internet jak zarobić w domu poradnik
 
 

Jak zrobić stronę internetową w html

Tworzenie stron www w notatniku


Stronę internetową w języku html można zrobić w godzinę

Wystarczy do tego notatnik !!!

Jeśli chcesz zaprojektować swój własny serwis internetowy w języku html - lepiej trafić nie mogłeś. Cały dzisiejszy artykuł poświęcamy temu, aby nauczyć Cię jak to zrobić szybko i poprawnie. I udowodnimy Ci, że może to zrobić dosłownie każdy, nawet ktoś kto ma kłopoty z obsługą konta na Facebooku i poczty email. Zapewniamy Cię o tym.


Twoja strona internetowa będzie przyjazna dla wyszukiwarki Google, będzie bardzo lekka dla przeglądarek, a do zrobienia całej gotowej witryny nie będzie trzeba żadnego specjalnego oprogramowania, bo do napisania kodu html wystarczy zwykły notatnik.

Popracuj tylko przez jeden wieczór - Twoja strona internetowa zaraz będzie gotowa. Nie wierzysz, że to możliwe? Nie będziemy Cię wcale przekonywać. Sam się zaraz przekonasz. Zatem do dzieła!

Jak będzie wyglądać Twoja strona
www napisana w języku html?

Strona, którą dzisiaj samodzielnie stworzysz będzie wyglądać bardzo dobrze, przynajmniej naszym zdaniem. Jeśli już teraz chcesz zobaczyć gotowy rezultat Twojej dzisiejszej pracy kliknij tutaj lub czytaj dalej, bo Twoja witryna być może będzie wyglądać zupełnie inaczej - podczas pracy zrozumiesz w jaki sposób łatwo możesz zmieniać cechy poszczególnych elementów serwisu i dostosowywać je do swoich własnych potrzeb.

Na przykład kolorystyka szablonu (tzw. layout), który będziesz projektować może być dowolna. Kolor tła, kolor czcionki, nagłówków, różnych widgetów i okienek, menu, stopki, linków itd... Będzie tak jak tylko zechcesz - po prostu wystarczy wiedzieć gdzie zmienić słowo red na słowo green lub yellow na white. Skomplikowane? W ten sposób dostostujesz do własnych upodobań każdy szczegół Twojego projektu strony www.

Zaczynamy tworzenie
własnej strony internetowej
w notatniku

KROK 1 - Tworzenie pliku strony głównej
Utwórz plik tekstowy o rozszerzeniu .html.
Aby to zrobić ustaw kursor myszy na pustym polu pulpitu i kliknij prawy przycisk myszy. Jeśli korzystasz np. z systemu operacyjnego Windows 7, otworzy się menu, z którego wybieramy Nowy (strzałka 1), a następnie Dokument tekstowy (strzałka 2).


KROK 2 - Nazwa pliku strony głównej naszego serwisu internetowego
W ten sposób utworzyliśmy plik tekstowy notatnika, o rozszerzeniu .txt.



Nadajemy mu nazwę index. Będzie to bowiem strona główna naszej strony internetowej. Plik ten umieścimy potem w katalogu głównym naszego serwisu. Wówczas dzięki nazwie index przeglądarka domyślnie otworzy wszystkim internautom właśnie ten plik (jako stronę główną), nawet jeśli internauta wpisze tylko krótki adres serwisu.



Na przykład:
Dokładny adres strony głównej serwisu zysk24.com to www.zysk24.com/index.html. Jeśli wpiszesz ten adres w swojej przeglądarce wyświetli się strona główna serwisu zysk24.com. Jeśli jednak wpiszesz tylko sam krótki adres: zysk24.com to wtedy przeglądarka w pierwszej kolejności będzie szukać pliku o nazwie index.html i gdy tylko go znajdzie to go wczyta i wyświetli.

Nikt przecież nie wpisuje żadnego index podczas wpisywania adresu serwisu, który włanie chcemy odwiedzić. Dlatego musimy dać sygnał serwerom, wyszukiwarkom i przeglądarkom, który dokładnie plik ma się wyświetlić jako strona główna i w tym właśnie celu plik strony głównej naszej witryny powinien mieć nazwę index.


KROK 3 - Rozszerzenie html
Gdy tworzymy nowy plik w notatniku, ma on zawsze domyślne rozszerzenie .txt. Mamy więc teraz plik tekstowy o nazwie index.txt.

Pliki stron internetowych utworzonych w języku html muszą posiadać jednak rozszerzenie .html, aby przeglądarka mogła prawidłowo wyświetlać stronę internetową.

Dlatego teraz musimy zmienić rozszerzenie naszego pliku, aby otrzymać plik index.html. Rozszerzenia plików w systemie Windows są domyślnie ukrywane - widzimy jedynie nazwę pliku. W naszym przypadku widzimy samo index zamiast index.txt.

Aby rozszerzenia się wyświetlały klikamy przycisk Start i otwieramy panel sterowania.



Następnie otwieramy panel sterowania:



Teraz wybieramy opcję Wygląd i persolalizacja.



W tej sekcji natomiast klikamy w link Opcje folderów.



Następnie wybieramy kartę Widok.



Teraz przejdź do obszaru Ustawienia zaawansowane (strzałka 1) i przewiń trochę w dół (strzałka 2). Następnie odszukaj pozycji Ukryj rozszerzenia znanych typów plików (strzałka 3) i odznacz pole wyboru, tak aby okienko było puste - bez charakterystycznego ptaszka (strzałka 3). Na koniec naciśnij przycisk OK, aby zapisać zmiany (strzałka 4).



Wracamy do naszego pliku index. Teraz system Windows wyświetla nie tylko nazwę, ale również rozszerzenie pliku. Zamiast index widzimy więc teraz index.txt.



Teraz ustaw kursor myszy na ikonie swojego pliku index.txt i naciśnij prawy przycisk myszy. Rozwinie się menu, z którego należy wybrać opcję Zmień nazwę.



Wykasuj całą nazwę pliku wraz z jego rozszerzeniem, wpisz index.html i naciśnij enter.



W tym momencie system Windows może wyświetlić okno dialogowe z ostrzeżeniem: Jeśli zmienisz rozszerzenie nazwy pliku, plik może stać się niezdatny do użytku. Czy na pewno chcesz zmienić rozszerzenie?. Oczywiście wiemy, że w tym przypadku zmiana rozszerzenia jest niezbędna, aby przygotować plik html, który będzie podstawą naszej strony internetowej. Klikamy przycisk Tak.



W ten sposób zmieniliśmy rozszerzenie i stworzyliśmy plik html, który dzięki temu może stać się zrozumiały dla przeglądarek internetowych. Zwróć uwagę, że ikona aplikacyjna również się zmieniła. W naszym przypadku wygląda teraz tak, jak na poniższej ilustracji, ponieważ my używamy Mozilla Firefox (jeśli używasz przeglądarki Google Chrome, Opera, Internet Explorer lub innych - ikona aplikacyjna pliku .html może wyglądać nieco inaczej - bez względu na to jednak wszystkie przeglądarki jednakowo odczytają zawartość tego pliku, ponieważ posiada on rozszerzenie .html).



Od tej chwili zawartość naszego pliku html utworzonego w notatniku możemy wyświetlić w naszej przeglądarce internetowej. Oczywiście w tej chwili nic się jeszcze nie wyświetli, gdyż nasz plik jest jeszcze pusty. Teraz się właśnie tym zajmiemy.


KROK 4 - podstawowy schemat kodu html
Nasz plik index.html jest jeszcze zupełnie pusty. Uzupełnimy w nim teraz najbardziej podstawową zawartość.
Otwórz plik index.html i wpisz w nim następującą treść (możesz zastosować metodę kopiuj - wklej):



Będzie to nasz stały schemat każdej strony internetowej tworzonej w języku html. Wszystkie informacje zawarte w powyższym kodzie oczywiście nie będą widoczne na naszej stronie internetowej. Internauci odwiedzający serwis nie zobaczą tego kodu. Są to informacje dla przeglądarek internetowych (aby wiedziały jak wyświetlać stronę), dla robotów Google itp.

Najważniejsze, co należy wiedzieć, to gdzie umieszczać poszczególne elementy naszej strony internetowej.

Kod html strony internetowej otwieramy znacznikiem html, a dokładniej <html xmlns="http://www.w3.org/1999/xhtml" xml: lang="pl" lang="pl"> oraz zamykamy znacznikiem </html>. Pomiędzy tymi znacznikami umieścimy całą zawartość strony internetowej, czyli sekcję head oraz body.

Mianowicie w sekcji HEAD, czyli pomiędzy znacznikami <head> oraz </head> umieszczamy informacje dla przeglądarek, robotów Google, metatagi, kod śledzący Google Analytics itd. Informacje tutaj umieszczone nie będą widoczne dla internautów, którzy odwiedzają naszą witrynę, ale są bardzo istotne dla funkcjonowania i prawidłowego wyświetlania się i działania strony.

W sekcji BODY czyli pomiędzy znacznikami <body> oraz </body> umieszczamy natomiast wszystko to, co będzie widoczne na ekranie po wczytaniu strony. Umieszczamy tutaj całą zawartość, którą pragniemy pokazać internautom (szablon, czyli tzw. layout strony, zdjęcia, treść artykułów itd.).

Teraz uzupełnimy ten podstawowy fundament o metatagi.


KROK 5 - Metatagi
Metatagi zawierają informacje dla wyszukiwarek internetowych. Są to przede wszystkim informacje zawierające tytuł strony www, jej opis oraz słowa kluczowe. Wstawimy więc teraz cztery najważniejsze metatagi.

Pierwszy metatag: (<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />) zawiera informacje o kodowaniu polskich znaków utf-8. Dzięki temu upewniamy się, że polskie znaki diakrytyczne (ę, ą, ź itd.) w tekście artykułów będą prawidłowo wyświetlane w przeglądarkach.

Drugi metatag (<meta name="Description" content="To jest opis mojego nowego serwisu www. Nauczę Was tutaj jak napisać stronę internetową w notatniku." />). Oczywiście zamiast tekstu umieszczonego pomiędzy "..." To jest opis mojego nowego serwisu www. Nauczę Was tutaj jak napisać stronę internetową w notatniku. napiszesz swój własny opis. Powinien on zawierać krótki (mniej więcej dwa zdania) opis o czym jest Twoja strona internetowa. Opis ten może wyświetlać się potem w wynikach wyszukiwania.

W trzecim metatagu (<meta name="Keywords" content="strona internetowa w html" />) umieszczamy słowa kluczowe. W naszym przykładzie tworzymy stronę internetową z poradnikami o tym, jak samodzielnie stworzyć stronę www w języku html za pomocą samego notatnika. Dlatego pomięczy znakami "..." umieściliśmy frazę kluczową strona internetowa w html. Wyszukiwarki takie jak Google zwracają na to uwagę. Wpisujmy więc tam takie słowa / frazy kluczowe, na które chcemy być wysoko w wynikach wyszukiwania Google. Zapewni nam to więcej darmowego ruchu (odwiedzin) z wyszukiwarki (w Polsce ponad 90% odwiedzin z wyszukiwarek pochodzi właśnie od Google).

W czwartym metatagu (<title>Jak napisać stronę www w notatniku</title>) wpisujemy tytuł strony. Tytuł strony internetowej wyświetlany jest zawsze w zakładce w przeglądarce internetowej. Tytuł stony internetowej zapisany w metatagu title bardzo ważny jest również z punktu widzenia pozycjonowania. W tytule zawsze warto umieszczać słowa i frazy kluczowe, na które chcemy być wysoko w wynikach wyszukiwania. W naszym przykładzie tworzymy serwis www dla osób pragnących nauczyć się tworzyć strony internetowe w notatniku, więc w tytule umieściliśmy prostą i często używaną przez internautów frazę kluczową Jak napisać stronę internetową w notatniku. Dzięki temu osoby wpisujące tą frazę kluczową w wyszukiwarce Google łatwiej odnajdą nasz serwis, ponieważ nasza strona będzie wyświetlać się wyżej w wynikach wyszukiwania (w tzw. SERPach) pod tą właśnie frazą kluczową. Zaleca się, aby tytuł nie był dłuższy niż 60 znaków (wraz ze spacjami).

Wreszcie na koniec wpisujemy: <link rel="Stylesheet" type="text/css" href="css/style.css" />.
Jest to informacja dla przeglądarek internetowych, wskazująca im lokalizację pliku .css, w którym znajdują się informacje na temat wyglądu strony (kolorów, wielkości czcionki, układu poszczególnych elementów itp.).

Całość powyżej opisanego kodu html możesz skopiować z poniższej ramki. Następnie umieść go w sekcji HEAD, czyli pomiędzy znacznikami <head> oraz </head>




KROK 6 - Plik CSS
Teraz utworzymy plik .css, czyli plik, w którym umieścimy wszystkie informacje o wyglądzie naszej strony internetowej.

W poprzednim kroku wpisując kod <link rel="Stylesheet" type="text/css" href="css/style.css" /> przekazaliśmy przeglądarkom internetowym informację o tym, gdzie znajdują się wszystkie instrukcje w jaki sposób wyświetlać serwis, tj. jakie kolory, układ itd.

Wszystkie te informacje umieścimy właśnie w pliku .css.

Aby utworzyć plik .css należy utworzyć plik .txt korzystając z notatnika, a następnie zmienić jego rozszerzenie. Postępujemy więc dokładnie tak samo, jak wówczas, gdy tworzyliśmy plik .html.

Jedyną różnicą jest to, że jako nazwę pliku zamiast index wpisujemy style, a jako rozszerzenie zamiast html wpisujemy css.



Następnie tworzymy nowy katalog o nazwie css i umieszczamy w nim plik style.css.

Teraz tworzymy katalog o nazwie np. strona www i umieszczamy w nim plik index.html oraz katalog css, w którym znajduje się plik style.css.




KROK 7 - Layout, czyli szablon strony
Treść strony, która ma być widoczna dla czytelników umieszczamy zawsze pomiędzy znacznikami <body> i </body>. W naszym kodzie umieściliśmy już div o nazwie top. Div jest czymś w rodzaju pojemnika, w którym umieszczamy zawartość strony. Dzięki temu możemy potem nadawać mu dowolne atrybuty, np. szerokość, kolor tła itd. Pomiędzy znacznikami <div id="top"> oraz </div> umieścimy całą zawartość strony.

Teraz przygotujemy szablon. W naszym kodzie, który mamy już w pliku index.html pomiędzy znacznikami <div id="top"> oraz </div> umieścimy więc podstawowe elementy szablonu naszej strony internetowej. Będzie to nagłówek, menu, lewa kolumna, prawa kolumna oraz stopka.

Wstawiamy więc w opisanym miejscu następujący kod:



Jeśli teraz wyświetlimy plik index.html w przeglądarce, wciąż wyświetli się tylko biała pusta strona. Przeglądarka widzi jednak, że znajdują się tam konkretne elementy. Aby przeglądarka wiedziała jak je wyświetlić przejdziemy teraz do pliku style.css, gdzie zdefiniujemy podstawowe elementy wyglądu i stworzymy podstawę naszego szablonu strony.


KROK 8 - CSS
Otwieramy plik style.css i umieszczamy w nim następujący kod:

Wyświetl teraz naszą stronę internetową w swojej przeglądarce (wystarczy nacisnąć dwukrotnie ikonę pliku index.html - strona powinna się wówczas automatycznie otworzyć w przeglądarce). Widzimy teraz, że przeglądarka wyświetla każdy z elementów według instrukcji, jakich jej dostarczyliśmy. Oczywiście strona nie wygląda jeszcze dobrze. W tym miejscu chodzi jednak o to, aby uświadomić Ci zasadę działania stron internetowych napisanych w języku html.

Wszystkie elementy, czyli nagłówek, menu, lewą i prawą kolumnę oraz stopkę widzimy dzięki temu, że każdemu z nich nadaliśmy atrybut background-color. Wartość tego atrybutu w tej chwili to odpowiednio white dla body (cały ekran), czyli całe tło, gdzie nie występują inne elementy będzie białe. Następnie nagłówek ma tło olive, czyli w kolorze oliwkowym. Szary obszar to menu, któremu nadaliśmy wartość gray definiując atrybut background-color. Obszar niebieski to lewa kolumna, obszar czerwony to lewa kolumna, a czarne pole to stopka.

Wszystkie wartości atrybutów to po prostu nazwy kolorów w języku angielskim, czyli olive (oliwkowy), gray (szary), blue (niebieski), red (czerwony) i black (czarny). Kolory te będziemy mogli teraz dowolnie zmieniać według własnych potrzeb i upodobań.



Jeśli masz jakiekolwiek pytania związane z tematyką poruszaną w tym artykule - pisz do nas śmiało. Staramy się być z Wami w kontakcie tak bardzo, jak tylko pozwala na to szybko biegnący cenny czas. A zadawane przez Was pytania i Wasze sugestie inspirują nas do tworzenia kolejnych ciekawych artykułów. Kliknij tutaj i napisz do nas.

Interesuje Cię biznes
i zarabianie przez Internet?

Poznaj tajniki prowadzenia dochodowej firmy
i skutecznego zarabiania w Internecie.

Metody, narzędzia i rozwiązania, o których nie mówi się głośno, które odmienią Twóje finanse, które otworzą Twoje oczy na możliwości, o których nawet nie śnisz.

| Regulamin Serwisu | Polityka Prywatności | Mapa Serwisu | Kurs |
Copyright zysk24.com © 2011. All Rights Reserved