strony - Kurs HTML i CSS
HTML dla zielonych / Ćwiczenia...zacznij systematycznie ćwiczyć. W ramach rozwoju umiejętności praktycznych zalecam wykonanie serii ćwiczeń. Będą one polegać na stworzeniu prostej strony internetowej bazującej na poznanych informacjach. W kolejnych rozdziałach będziemy ją stopniowo rozbudowywać, dlatego nie zapomnij zapisać jej sobie gdzieś na komputerze. Na tym etapie opublikowanie strony w internecie nie będzie jeszcze konieczne. Znajdź temat, który szczególnie Cię interesuje. Może to być np. Twoja ulubiona książka, gra...
CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">W zasadzie aby rozpocząć przygodę z językiem CSS, wystarczy wstawić w nagłówku strony - tzn. w dowolnym miejscu pomiędzy znacznikami <head> oraz </head> - jedną dodatkową linijkę: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Tu wpisz opis zawartości strony"> <title>Tu wpisz tytuł strony</title> <link rel="stylesheet" href="style.css"> </head> <body> Tu wpisuje się treść strony </body> </html> Dzięki znacznikowi <link> do dokumentu zostanie...
HTML dla zielonych / Edytory HTML...jest po prostu plikiem tekstowym, gdzie wpisujemy wszystkie polecenia dotyczące formatowania tekstu, wstawiania grafiki i inne. Lecz pisanie strony w zwykłym edytorze tekstu byłoby bardzo uciążliwe. Dlatego powstało wiele wyspecjalizowanych edytorów, które ułatwią, przyspieszą i uprzyjemnią Twoją pracę. Poniżej znajdziesz listę popularnych edytorów HTML (kolejność wg licencji i alfabetycznie). Informacje częściowo zostały zaczerpnięte ze stron producentów. Windows Pajączek...
- HTML dla zielonych / Kolor tła oraz tekstu HTML <body "background-color, color">
<body style="background-color: kolor tła; color: kolor tekstu"> Tu jest właściwa treść strony </body> Zamiast wyrazów "kolor tła" oraz "kolor tekstu" należy wpisać definicję koloru odpowiednio: tła strony oraz tekstu na całej stronie. Robi się to tak samo jak w przypadku czcionek. Jeśli chcemy ustalić kolor tła oraz tekstu na całej stronie możemy użyć dodatkowych wartości atrybutu dla znacznika <body>. Wartości te ("background-color: ...; color: ...") nie wpisujemy w miejscu właściwej treści...
- HTML dla zielonych / Odsyłacz do podstrony HTML <a href>
...lub hiperłącza). Najczęściej stanowi je specjalnie wyróżniony krótki tekst (lub obrazek), po kliknięciu którego, następuje przeniesienie do innej strony. Tak jak każda książka składa się z rozdziałów, tak samo serwisy internetowe składają się zwykle z podstron. Każda podstrona jest osobnym plikiem HTML (z rozszerzeniem *.html lub *.htm) i zawiera treść, która dość znacznie różni się tematycznie od pozostałych (tworzy się ją w taki sam sposób jak stronę główną). Taka organizacja ułatwia...
- Nagłówek i treść HTML / Słowa kluczowe <meta "keywords">
...wyrazy kluczowe, z których mogą korzystać wyszukiwarki sieciowe. Dlatego staraj się tutaj wpisać wyrazy, które jak najlepiej opiszą zawartość Twojej strony. Dobrze dobrane słowa kluczowe mogą pomóc wyszukiwarkom odnaleźć Twoją stronę. Znacznik <meta name="keywords"> nie jest wykorzystywany przez Google i nie ma wpływu na pozycję strony w wynikach tej wyszukiwarki. Pytania i odpowiedzi <meta "keywords"> Jak wpisać słowa kluczowe? Słowa kluczowe to lista wyrazów rozdzielonych przecinkami...
- Oprawa graficzna / Zamiennik obrazkowy
...Wstęp Fahrner Dwyer Phark Gilder/Levin Jefferies Zamienniki obrazkowe a Google Wstęp Po lekturze rozdziałów Menu w CSS oraz Szablon strony na DIV-ach powinny być Ci już znane ogromne możliwości wpływania na wygląd dokumentów stron WWW tylko za pomocą stylów CSS. Wiesz już, w jaki sposób można przygotować optymalny kod HTML, a następnie za pomocą w zasadzie drobnych wpisów w arkuszu CSS, wprowadzać daleko idące zmiany wyglądu witryny. Nie jest żadnym kłopotem zmiana ułożenia...
- Odsyłacze HTML / Odnośniki hipertekstowe
...się odsyłacze. Najczęściej stanowi je specjalnie wyróżniony krótki tekst (lub obrazek), po kliknięciu którego, następuje przeniesienie do innej strony. Przy czym strona taka może wchodzić w skład tego samego serwisu, ale równie dobrze może znajdować się na drugim końcu świata. Przeglądarki internetowe wyświetlają odsyłacze najczęściej w innym kolorze oraz podkreślają je (można to oczywiście zmienić) - w ten sposób są one lepiej widoczne i odróżniają się od zwykłego tekstu. Użytkownika...
- Wstawianie stylów CSS / Wewnętrzny arkusz stylów <style>
...można z niego usunąć wszystkie komentarze. Oznaczałoby to, że tego typu skrypty i arkusze w ogóle nie byłyby brane pod uwagę przy renderowaniu strony! Znacznik STYLE może znajdować się tylko i wyłącznie w nagłówku dokumentu. Przykład <style> Jeśli w treści nagłówkowej strony zostałby umieszczony następujący wewnętrzny arkusz stylów: <style> h6 { color: red } </style> to po wpisaniu w dowolnym miejscu strony po prostu: <h6>To jest tytuł rzędu 6</h6> otrzymalibyśmy tytuł rzędu szóstego...
- Jednostki CSS / Długość
...czcionki dla elementu <body> albo wstawienie dodatkowego potomka z ustaloną wielkością cziconki może nam w tym przypadku całkowicie popsuć wygląd strony, wpływając w niełatwy do przewidzenia sposób na szerokość naszego bloku. Taka sytuacja nie będzie miała jednak miejsca, jeśli zamiast tego wpiszemy "width: 20rem" (16px * 20 = 320px). Oczywiście opisane problemy nie będą miały również miejsca, gdy ustalimy szerokość bloku bezpośrednio w pikselach - "width: 320px". Jednak w pewnych...