Skocz do zawartości
Szukaj w
  • Więcej opcji...
Znajdź wyniki, które...
Szukaj wyników w...
Jacob192

Poradnik początkującej osoby (html5, css3, itd)

Rekomendowane odpowiedzi

Witajcie! Chciałbym w tym poradniku krótko opisać język html5 oraz css3 i jak nim się posługiwać.

  • Język html stosuje się do tworzenia stron internetowych. Przeglądarki internetowe odczytują składnię html i interpretują ją, wyświetlając stronę.

Zaczynając krótko opiszę wam parę rzeczy, które warto stosować.

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

  Czyli jest to potrzebne żeby pojawiały się polskie znaki na naszej stronie internetowej.

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

Ustawienia strony trafiają do sekcji wyznaczonej przez element <head>,  natomiast treść strony internetowej, czyli wszystko to co zostanie wyświetlone na ekranie musi znaleźć się w elemencie <body> (ang. ciało strony, dokumentu).

Pomiędzy znacznikami <body> oraz </body> lokujemy wszystkie informacje, które chcielibyśmy umieścić na stronie. Zaktualizujmy teraz nasz dokument o nowy znacznik.

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

Wiele osób wie czym jest RWD, ale postaram wam się to wyjaśnić:

Responsive web design (RWD) – technika projektowania strony www, tak aby jej wygląd i układ dostosowywał się automatycznie do rozmiaru okna przeglądarki, na której jest wyświetlany np. przeglądarki, smartfonów czy tabletów.

Aby zrobić odsyłacz należy do tego:

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

Jeżeli chcemy mieć kod css to tworzymy pliczek style.css, ale przed tym musimy w html dodać to:

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

Generalnie jeżeli chcemy dodać jakiś kod css gdzie nie mamy tego kodu wyżej lub style.css to po prostu dajemy

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

Lecz po co sobie zaśmiecać index.html/php jak możemy mieć do tego odpowiedni pliczek, którym jest np style.css

Jeżeli chcemy edytować nasz odsyłacz to możemy to zrobić za pomocą CSS

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

Jeżeli chcemy, aby nasza strona posiadała tytuł należy do niego kod:

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

Jeżeli chcemy, aby nasz tekst itd zyskał jakiś fajny efekt mam na myśli font to polecam stronę:

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

Gdy chcemy aby nasz font zadziałał należy w htmlu dodać:

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

a tam gdzie mieliśmy

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

                       doctype html5

DOCTYPE HTML5

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

Deklaracji dokumentu html dokonujemy na samym początku strony internetowej, na samej górze, na pierwszej linii kodu html. Deklaracja ta informuje przeglądarkę o rodzaju dokumentu, który ma przetworzyć

                                                                                  deklaracja języka w HTML5

Deklaracji języka stosowanego na naszej stronie internetowej dokonujemy za pomocą:

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

Sekcja nagłówkowa w HTML

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

Autor html

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

 

Może teraz trochę o javascript:

Tworzymy plik o nazwie np: xxx.js a w htmlu:

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

Tak jak wyżej pisaliśmy o odsyłaczu także możemy edytować nasz tekst za pomocą CSS wystarczy:

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

Każdą rzecz można edytować w CSS tylko nie zapominajcie o <div class="xxxxx"></div>

Kody javascript są określane tagiem

Zaloguj się lub zarejestruj, aby zobaczyć ukrytą zawartość.

 Jeżeli chodzi oto jaki program macie pobrać to polecam notepad ++. Polecam wam też pobrać przeglądarkę firefox developer edition

Jeżeli nie wiecie jaki to kolor, który wam się podoba na danej stronie to polecam zainstalować dodatek Color picker

 

 

Poradnik będę dokańczać! Na ten moment jest to tylko opisanie co i jak a póżniej będziemy robić strony w tym poradniku krok po kroku 🙂

Edytowane przez Jacob192
  • Lubię to! 2
  • Super! 1

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Jeżeli chcecie kontynuacje tego poradnika to potrzebowałbym od jakieś osoby grafikę do poradnika, ponieważ chcę was wgłębić jak zakodować stronę przy użyciu grafiki. Osoby chętne do pomocy zapraszam na PW.

Edytowane przez Jacob192

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Jak już pisałem wiele darmowych layotów znajdziesz na internecie. Wystarczy, że będziesz szukał pod hasłem „layout freebie”.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się

×