windows - Kurs HTML i CSS
HTML dla zielonych / Wstawienie obrazka HTML <img src alt><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny"> Zamiast tekstu: "Tu podaj względną ścieżkę dostępu do obrazka", należy podać miejsce na dysku, gdzie znajduje się nasz obrazek, który chcemy umieścić na stronie. Jeżeli obrazek znajduje się w tym samym katalogu co strona, na której chcemy go wstawić, wystarczy wpisać tutaj samą nazwę pliku obrazka, nie zapominając przy tym o podaniu rozszerzenia (".jpg" lub ".gif"). Natomiast w miejsce "Tu podaj tekst...
- Nagłówek i treść HTML / Deklaracja strony kodowej <meta charset>
<head> <meta charset="utf-8"> </head> Polecenie jest deklaracją strony kodowej, czyli sposobu w jaki będą zapisane w formie cyfrowej znaki na naszej stronie WWW. Więcej na ten temat możesz dowiedzieć się w rozdziale pt.: Strony kodowe. UWAGA! Absolutnie nie należy pomijać tego wpisu i powinna to być koniecznie deklaracja kodowania UTF, a nie WINDOWS, gdyż wtedy mogą wystąpić problemy z wyświetlaniem polskich znaków (nawet jeśli na Twoim komputerze wszystko jest w porządku)! Pytania i...
Multimedia HTML / ĆwiczeniaOtwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału. Utwórz dokument z licencją zawierającą informacje o prawach autorskich Twojej strony: kto jest jej autorem, jakie są zasady korzystania z niej (czy można kopiować treść i używać ją do celów komercyjnych) itp. W tym celu możesz skorzystać z programów takich jak: WordPad - dostępny w systemie Windows Open Office - darmowy pakiet biurowy Microsoft Office - pakiet aplikacji biurowych dostępny za...
- HTML5 / Filmy i dźwięk <video, audio, source>
Spis treści <video, audio, source> Wstęp Filmy i dźwięk Atrybuty odtwarzacza autoplay controls loop muted playsinline poster preload width, height Formaty audio/wideo MP3/MP4 OGG/OGV Kodeki Kodeki MP4 Kodeki OGG/OGV Wstęp Przed pojawieniem się języka HTML5, istniały już różne sposoby osadzania treści multimedialnych audio/wideo na stronach internetowych: Osadzenie pliku Uniwersalny sposób odtwarzania plików Niestety miały one spore wady: Większość z nich nie...
- Podcast HTML / #8 Formularze HTML
...(np. Imię=Sławomir). Jest to przydatne w przypadku prostych formularzy pocztowych. Strona kodowa: atrybut accept-charset="strona kodowa" (np. windows-1250) informuje przeglądarkę o kodowaniu używanym przez system odbierający dane, co może zapobiec zniekształceniu polskich znaków diakrytycznych. Usuwanie polskich znaków: możliwe jest automatyczne usunięcie polskich znaków diakrytycznych z pól tekstowych i obszarów tekstowych za pomocą skryptu JavaScript wywoływanego przez zdarzenie...
Czcionki CSS / Wielkość czcionki {font-size}Spis treści {font-size} Wielkość czcionki {font-size} Najlepszy sposób ustalania wielkości czcionki Jednostka "em" Jednostka "px" Jednostka "pt" Podsumowanie Wielkość czcionki {font-size} selektor { font-size: rozmiar } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "rozmiar" należy podać konkretną wielkość czcionki. Możliwe są tutaj cztery sposoby: Imienne...
- HTML dla zielonych / Odsyłacz do podstrony HTML <a href>
(w obrębie tego samego serwisu) Praktycznie na każdej stronie WWW spotyka się odsyłacze (inaczej: odnośniki 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ę...
- Nagłówek i treść HTML / Opis zawartości strony <meta "description">
<head> <meta name="description" content="Tu podaj opis twojej strony"> </head> Polecenie to należy wstawić między znacznikami: <head> oraz </head>. Pozwala ono opisać co znajduje się na Twojej stronie. Z informacji tej korzystają wyszukiwarki sieciowe, dlatego staraj się tutaj wpisać tekst, który jak najlepiej opisze zawartość strony i zachęci do jej odwiedzenia. Ciekawy, ale niezbyt długi, opis może zachęcić internautów do obejrzenia Twojej strony. Znacznik <meta name="description"> nie ma...
- HTML dla zielonych / Ćwiczenia
Teoria bez praktyki jest niczym. Dlatego zachęcam do stałego eksperymentowania z kodem HTML w trakcie czytania kursu. Dzięki temu poznane informacje na pewno zostaną lepiej utrwalone w Twojej pamięci. Ponadto często dopiero na etapie ćwiczeń praktycznych okazuje się, że tak naprawdę nie do końca właściwie zrozumieliśmy teorię. Jednak przede wszystkim to praktyka sprawia, że stajemy się coraz lepsi w danej dziedzinie. To z kolei pobudza i rozwija naszą pasję, dzięki której możemy stać się...
- Odsyłacze HTML / Ćwiczenia
Otwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału. Utwórz spis treści dodając etykiety do tytułów poszczególnych sekcji tematycznych na stronie głównej, a następnie umieszczając na początku wykaz z listą odsyłaczy do tych etykiet. Przygotuj po dwie wersje ilustracji z Twojej strony. Pierwsza powinna mieć rozmiary dokładnie takie jak widoczne bezpośrednio na stronie. Natomiast druga wersja może być zdjęciem w wysokiej rozdzielczości. W tym celu...