Poradnik jak napisać prostą i dobrą stronę w HTML cz 1

MultiJoa · 4 Marca 2015

UWAGA to jest mój pierwszy poradnik teog typu . A i pamiętajcie nie jestem robotem też mogę popełniać błedy .

Jeśli to czytasz to pewnie chcesz zrobić prostą i dobrą stronę internetową ale nie wiesz jak się za to zabrać !

Spokojnie to nie jest trudne a język HTML jest bardzo łatwy w zrozumienia . Więc może najpierw podstawy . Najpierw ustal jaką stronę internetową chcesz robić ! W tym poradniku na pewno nie powiem ci jak robić system logowania i rejestracji bo ten poradnik ma być o prostej stronie !

No dobra masz już pomysł ale nie wiesz w czym masz napisać stronę ? Nie ma problemu już ci pomagam ! Oczywiście możesz skorzystać z edytorów online ale każdy edytor ma ustalone własne szablony czyli jeśli będziesz miał zarys swojej strony to najpierw musisz pousuwać rzeczy które wkleił ci edytor . Pamiętaj żebyś nie kupował specjalnie jakiegoś programu skoro masz na początek zrobić prostą stronę ! No dobra już skończyłem biadolić . Teraz powiem wam o kilku edytorach tekstu w których możemy zacząć pisać .

Notatnik – Podstawowy edytor tekstu systemu Windows . Automatycznie zainstalowany na komputerach z Windows’em a jeśli nie masz to nie wiem co ty masz za windows’a .

Jego + i - :

+ Jest za darmo .

+ Łatwy w obsłudze .

- Nie wyświetla błędów w kodzie .

- Barak rozbudowanego interfejsu .

Notepad++ - Darmowy edytor tekstu . Download - http://notepad-plus-plus.org/download/v6.7.4.html

Jego + i –

+ Jest za darmo.

+ Posiada kilka użytecznych funkcji podczas pisania kodu .

+ Można ustawić w jakim języku piszemy kod .

+ Łatwy interfejs .

+ Dostępny język Polski .

- Brak wyświetlania błedów w kodzie .

JTHTML – Darmowy program zaprojektowany do pisania kodów XHTML, HTML, CSS, JS(JavaScript), PHP i SQL . Download - http://www.dobreprogramy.pl/JTHTML,Program,Windows,35215.html

+ Jest za darmo .

+ Dostępy język Polski .

+ Specjalne zakładki z opcjami dla poszczególnych języków .

+ Automatycznie zamyka nam funkcje(Tak ja mniej więcej to nazywam nie mam 100% pewności czy tak jest poprawnie !) kodu .

+ Wyszukuje nam błędy .

+ Można ustawić w jakim języku piszemy kod .

+- Wczytuje nam listę opcji np. gdy napiszemy <ht to wczyta nam taką listę i możemy tam znaleźć to co chcieliśmy napisać czyli <html> . Jednak czasami to jest wkurzające :/ .

Lista będzie aktualizowana bo edytorów tekstu jest bardzo dużo i nie dało by się ich wszystkich tutaj zmieścić .

Wybierzcie sobie jakiś program w tym poradniku ja będę używał Notepad++ wy możecie używać czegoś innego ale potem żeby nie było problemów .

No dobra mamy już pomysł i mamy program i jedyne czego nam tu brakuje to folder gdzie zapiszemy naszą stronę . A więc twórzmy sobie folder na pulpicie(Lub gdzie tam chcecie.) nazywamy go „Moja strona” a w nim tworzymy na początek jeszcze dwa foldery o nazwie „Tło” i „Menu” .

No dobra mamy już wszystko ! Trzeba zacząć pisać nasz kod . Tworzymy w głównym folderze „nowy dokument tekstowy” i nazywamy go„index” klikamy na niego ppm i wchodzimy w właściwości

Tam gdzie jest nazwa naszego pliku zmieniamy „index.txt” na „index.html”

klikamy „Zastosuj” i „Ok” klikamy na nasz plik ppm i wybieramy „ Edit witch Notepad++”.

I teraz zaczyna się cała zabawa ! Ale najpierw klikamy „Składnia” szukamy linijki gdzie pisze „H” i wybieramy z listy „HTML” .

No dobra czas zacząć pisać kod .

Wpisujemy :

<HTML>
</HTMl>

Dzięki tym dwóm słowom zrobionym w znakach <> przeglądarka internetowa może ustalić że ten plik to jest strona którą ma załadować . Ale teraz pytanie co zrobić gdy mamy kilka innych plików ze stronami które mają być podstronami strony głównej ? Właśnie dla tego nazwaliśmy nasz pierwszy plik „index” dzięki temu przeglądarka będzie wiedziała, że ten plik ma być wywołany jako pierwszy .

No dobra to teraz zacznijmy ustawiać coś na naszej stronie więc dodajmy kolejną linijkę kodu .

<Html>
<head>
<title> Tytuł Strony </title>
</head>
</Html>

Jak widzicie dodaliśmy dwa nowe znaczniki które są ważne na każdej stronie internetowej .

Najpierw znacznik <head> jest to jak by to nazwać „Głowa” strony . Np w niej dajemy znacznik <title> która jak sama jej nazwa wskazuje odpowiada za tytuł strony . W moim przypadku jest to : Strona Poradnikowa . W „Głowie” dodamy też takie rzeczy jak menu i może kiedyś opcje logowania .

No ale teraz dodajmy może jakieś tło dla naszej strony bo jak na razie jest pusta i cała biała .

<Html>
<head>
<title> Tytuł Strony </title>
<body bgcolor="Kolor">
</head>
</Html>

Pamiętajcie aby takie rzeczy jak tła, tytuły, nagłówki itp dodawać w znaczniku <head> .

Od razu mówię lista kolorów jest podana na samym dole ! A teraz wytłumaczmy sobie co właśnie dodaliśmy . Znacznik <body> jest „ciałem” strony czyli miejscem w którym wyświetla się cały tekst itp . Ale nasz znacznik nie jest zwyczajny dodaliśmy do niego jeszcze atrybut bgcolor=”” . Bg to skrót od Background czyli tła. Więc nasz znacznik <body> wywołuje atrybut bgcolor który ma wartość odpowiadającą za kolor tła. Mniej więcej wytłumaczyłem to tak żeby osoby które mają pierwszy raz styczność z HTML’em mogli zrozumieć . No dobra za chwilę kończymy ten poradnik ale jeszcze przygotujemy sobie już cały kod do następnego poradnika .

A więc wpisujemy .

<Html>
<head>
<title> Tytuł Strony </title>
<body bgcolor="Yellow">
Nagłówek strony
</head>
<hr>
<body>
</body>
</Html>

A więc co tu dodaliśmy ? Na początek linijka 5 . Tutaj wszystko zaczynamy od znacznika . Znacznik zawsze jest dawany na początku każdego znacznika który też zaraz sobie omówimy daje się go gdy chce się zacząć zdanie od nowej linijki. Teraz znacznik , znacznik odpowiada za dodawanie tekstu . Tutaj zmodyfikowaliśmy ten znacznik dodając dwa atrybuty „Size” i „Color” . Atrybut size odpowiada za wielkość a color jak można się domyślać za kolor tekstu . Potem jest zawartość czyli w tym wypadku nasz tekst a potem znacznik zamykający .

Następne co dodajemy to element <hr> . Ten element nie musi być zamykany w taki sposób </hr> bo on jedyne co dodaje to poziomą linie oddzielająca „Głowę” od „Ciała” .

Następnie dajemy znacznik otwierający <body> i zamykający </body> w nim będziemy robić zawartość naszej strony .

No dobra to by było na tyle mam nadzieje że poradnik wam się przyda a w następnym zrobimy tło obrazkowe i ogólnie zmienimy wygląd naszej strony .

OczkoSX · 4 Marca 2015

Słabo wytłumaczone, za dużo lania wody. Tło powinno byc robione w CSS. Widać ze sam nie masz za bardzo pojęcia o czym piszesz, masz jakieś projekty za sobą?

Vertoi · 4 Marca 2015

weźcie to usuńcie, prosze was... już wiem dlaczego wiele osób nadal używa znaczników typu , <center> zamiast uczyc się css - bo powstają poradniki zatytułowane "jak zrobić dobrą stronę".

#edit

i widać, ze nie wiesz czym jest prawdziwy edytor online. jakie szablony? korzystales moze z czegos porządnego typu codeanywhere albo c9.io ?

#edit2

znacznik p to nic innego jak paragraf. to nie jest znacznik, którym "zaczynamy każdą linię tekstu i wstawiamy zawsze przed ".

nie odpowiada za dodawanie tekstu tylko chyba jego stylizowanie.

i dlaczego do cholery tam jest 2x body i jedno niedomknięte? mam nadzieje, ze początkujący będą omijali ten poradnik szerokim łukiem.

do tego jeszcze piszesz, ze menu się daje do <head>... głowa mnie już rozbolała od czytania tych głupot.

gks0770 · 4 Marca 2015

nie polecam tego poradnika, popieram słowa kolegi powyżej i dodaje od siebie :

- gdzie do cholery jest <!DOCTYPE html> , czy już żadna osoba tego nie używa w poradnikach ? - przecież to jedno z ważniejszych -,-

Ksawiryn · 4 Marca 2015

Plus za chęci, ale nic poza tym. "Poradnik" wprowadza w błąd. kosz

Zaloguj się

👋 Witaj na MPCForum!

Poradnik jak napisać prostą i dobrą stronę w HTML cz 1

Rekomendowane odpowiedzi

MultiJoa

MultiJoa

OczkoSX

OczkoSX

Vertoi

Vertoi

gks0770

gks0770

Ksawiryn

Ksawiryn

Zarchiwizowany