CSS Kurs - Kurs CSS dla początkujących! css,style,kaskadowe,beginner,cascading style sheets,kurs,polski,stylesheet



Polecam: www.urdruk.pl 



Budowanie szablonów stron HTML opartych na standardach

Mówiliśmy sporo teorii na temat współpracy pomiędzy CSS i HTML i ich wzajemnym uzupełnianiu się i pracy nad uformowaniem wyglądu struktury przez CSS. Pierwszą część tworzenia strony internetowej jest zawsze taka sama piszesz zawsze tagi <html><head>...i tak dalej. Dlatego też dlaczego nie moglibyśmy stworzyć jakiegoś szablonu strony, którą później użyjemy do stworzenia kolejnej nowej strony? Zatem, jakie wymagia są potrzebne? Powinniśmy mieć: Zacznijmy zatem od numeru jeden. Chcemy rozbić nasz kod HTML na cztery części wszystkie w różnym znaczeniu. W tym celu posłużę się tagiem <div>. Div jest skrótem dla słowa "division"-"sekcja" i nie jest headerem, ani typem nawigacji, ale po prostu fragmentem/działem naszej strony? Tak sądzę. Zatem zaczynajmy:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//PL">
<html lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Twoja własna nazwa strony</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div id="header">
<!-- Tutaj jest div nagłówek! -->
</div>
<div id="navigation">
<!-- Tutaj jest div nawigacji! -->
</div>
<div id="content">
<!-- Tutaj jest div zawartości strony-->
</div>

</body>
</html>
Ok, mogliśmy się natknąć na jakieś nowiny we fragmecie tego kodu, zatem przeanalizujmy go linijka po linijce. W pierwszej linijce wskazujemy jakiego języka używa nasz dokument. Być może słyszałeś o języku XHTML podobnym do języka HTML, ale na razie nie będą nam potrzebne możliwości jakie nam daje ten język. Również, <!DOCTYPE> w kodzie powyżej wskazuje na Strict HTML (surowy HTML). Aby zrozumieć, że potrzebujesz wiedzieć, że są dwa rodzaje interpretacji w przeglądarce. Jedna interpretacja podąża za standardami sformułowanymi przez W3C ("standards mode"), i jedna dla starszych stron, nazwana "quirks mode". Standards mode jest interpretacją, którą będziemy używać. Standards mode sprawia, że strona wczytuje się tak samo w nowoczesnych przeglądarkach i uwalnia nas od konieczności bycia uwiązanym od jakiejś konkretnej przeglądarki, zatem po prostu będziemy podążać za standardami. Quirks mode jest czymś w rodzaju bug mode. Standard ten jest po to aby pozwolić starym stronom wyglądać tak jak wyglądały zanim nastały nowe standardy i jest po to by zapobiedz powstawaniu dziwnych błędów. Przeglądarka sama wybiera jaki standard ma wybrać aby odczytać stronę, zatem bądź pewien, że wybrałeś ten właściwy! Ok. Sporo tłumaczenia jak na na jedną linijkę kodu, teraz będę nieco szybszy. Prawdopodobnie napisałeś taga <html> zanim rozpocząłeś pisać swój dokument. Moja linijka kodu jest prawie taka sama, z wyjątkiem tego, że dodałem lang="pl". Ta linijka mówi przeglądarce, którego języka używamy. Dlaczego ma to znaczenie jakiego języka używamy? zapytasz� Hmm, ta funkcja pozwala skorzystać z metody czytania zawartości strony na głos przez specjalistyczne oprogramowanie służące temu celowi. Takie oprogramowanie musi wiedzieć jakiego języka używa strona, żeby móc ją przeczytać. A skoro dodanie tych paru linijek jest takie łatwe dla Ciebie, to dlaczego nie miałbyś tego dodawać? Jeśli nie planujesz wykonywać swojej strony www w języku angielskim, zawsze możesz odwiedzić stronę WAIs Language Codes i sprawdzić dwuliterowy kod dla swojego języka. (Uwaga: kody języków pisze się małymi literami). Następnie mamy nagłówek "head" strony. Nagłówek zawiera niektóre meta � informacje, jak na przykład kodowanie strony, jakiego stylu CSS używać. Ustawienia charset, są jednymi z najbardziej delikatnych spraw w kodzie, zatem zajmijmy się tym na samym początku. Jest wiele różnych liter w języku. Kiedy pierwsze komputery powstawały inżynierowie myśleli jedynie o amerykańskim angielskim, nawet nie pomyśleli o literkach języka szwedzkiego a, ä, ö albo niemieckiego ü albo znaku & (od tłumacza: o polskim języku także nie wspominano :)). Jest wiele systemów kodowania znaków (charset) i z początku nie było jakiegoś generalnego konsensusu w sprawie ich uporządkowania. Potem ktoś wpadł na pomysł, by je pogrupować je w ten sposób, że będą podzielone na grupy wyszczególnione zgodnie z częściami świata. Zatem meta - tagi wskazują na to, na przykład, że: "Ta osoba chce ustawić system kodowania zachodni (latin-1 system kodowania znaków)", a to mówi przeglądarce jakiego języka używamy. Bardziej generalne ustawienia można dać na utf-8 co szybciej staje się delikatne. W końcu pozostał nam text/html, który mówi przeglądarce jakiego języka używamy. Znaczniki <title> i <link> - z nimi powinieneś być już zaznajomiony, a jeśli nie, to pogoogluj :) Tyle informacji w kilku linijkach kodu, mam nadzieję, że powyższe informacje Ciebie nie przeraziły, bo nie są one wcale trudne. W zasadzie aby użyć tych znaczników, o których pisałem wyżej wystarczy jedynie skopiować i wkleić, a potem już zacząć uzupełniać stronę własną treścią. Body Twojego dokumentu składa się z kilku divów, dodajmy nieco treści do nich:
...
<div id="header">
<h1>Nazwa tej strony</h1>
</div>
<div id="navigation">
<h2>Nawigacja</h2>
<ul>
<li><a href="pierwszy.html">Pierwszy</a></li>
<li><a href="drugi.html">Drugi</a></li>
<li><a href="trzeci.html">Trzeci</a></li>
</ul>
</div>
<div id="content">
<h2>Zawartość</h2>
<p>Jakaś przykładowa treść, którą możesz dodać tutaj</p>
</div>
<div id="footer">
<p>Ta strona została napisana przez [Twoja nazwa] i zbudowana na
<a href="http://friendlybit.com">templatce Friendly bit</a>.</p>
</div>
...
Czego tutaj dokonaliśmy? Pierwsze co musisz wiedzieć, że szybki ogląd na stronę powie Ci dużo więcej na temat treści strony. Łatwo zauważysz, że są w dokumencie także nagłówki (h1, h2), a niektóre są tylko listami linków (ul, li, a). Przejrzyjmy szybko kod: Najpierw mamy header. Header jest z reguły czymś w rodzaju dużego obrazka i nieco tekstu. Niektóre strony wogóle nie mają w kodzie HTML header'a, tylko po prostu skierowują na link na obrazek, który ma w środku jeszcze tekst. Problemem jaki się tutaj pojawia jest niemożliwość odczytywania tekstu ze znaczników "title" zarówno przez wyszukiwarki jak i oprogramowanie, które czyta strony www. Z tekstem "title", który zdaje się być najważniejszym fragmentem opisu, osoba wizytująca stronę wchodząc na stronę spodziewa się treści na jaką wskazuje znacznik "title". Zatem zaufaj mi, zatrzymaj ten tekst tam. Następnie mamy nawigację strony. Nawigacja powinna być zawsze zaznaczona jako niepoukładana lista linków. Widziałem także nawigacje tworzone w dziwny sposób przy pomocy tabelek, przełamanych tagiem <br>- po każdej linijce, ale jedyną zawartością w tej tabeli są linki, dlaczego mielibyśmy zatem tworzyć z tego coś czego nie ma? Używanie listy nie oznacza tego, że wszystko musi wyglądać tak samo, graficznie może być wszystko dopracowane w CSS'ach, tutaj jedynie używamy wstępnie tagów HTML Zauważ, że możesz w prosty sposób usunąć
list-style: none;
i pozostanie lista bez formatowania graficznego. Najważniejszą częścią Twojego dokumentu HTML jest treść. Jest ona głównym powodem, dla którego ludzie odwiedzają Twoją stronę www i musisz położyć główny nacisk na to. Zadbaj także o to by odpowiednio sformułować swoje nagłówki, tak aby wyrazy zawarte w nich najlepiej odzwierciedlały co chcesz osobie odwiedzającej przekazać. Używaj tagów paragrafów wokoło tekstu, aby łatwiej potem sformatować tekst, dla przykładu CSS:
text-indent: 2em;
dodaje nieco treści przed pierwszym wyrazem w każdej początkowej linijce paragrafu. W końcu byłoby dobrze dodać jakąś stopkę do swojej strony. Upewnij się, że masz jakieś informacje kontaktowe na stronie do siebie, któż wie co za osoby będą chciały się o Ciebie dopytywać? Jeśli chcesz mi pomóc możesz także dodać do swojej strony linka skierowującego do mnie na stronę z tym kursem CSS. Na następnej (ostatniej) stronie postaramy się pozbierać wszystko do kupy i dodamy jakiś przykładowy CSS do niej. Wszystko jest za friko i możesz użyć CSS na swojej stronie, jasne?

Wróć do strony nr 1 | nr 2 | Obecnie jesteś na stronie nr 3 | Przejdź na stronę nr 4 |

Tłumaczenie kursu wykonane zostało przez vj_, oryginał pochodzi ze strony: Friendlybit.com i zostało oficjalnie potwierdzone przez autora kursu. Prawa autorskie do tłumaczenia zastrzeżone, możesz jednak swobodnie rozpowszechniać ten kurs podając link do strony z autora tłumaczenia, oraz linka do strony autora oryginału.



Copyright vj zone 2006 - 2016