ZAWSEZ PAMIĘTAMY O KOLJENOŚĆI OTWIERANIA I ZAMYKANIA ZNACZNIKÓW

Wielkość: px

Rozpocząć pokaz od strony:

Download "ZAWSEZ PAMIĘTAMY O KOLJENOŚĆI OTWIERANIA I ZAMYKANIA ZNACZNIKÓW"

Włodzimierz Staniszewski
7 lat temu
Przeglądów:

1 HTML i inne

2 Struktura dokumentu standard języka użytego do budowy strony nagłówek strony zawartość strony ZAWSEZ PAMIĘTAMY O KOLJENOŚĆI OTWIERANIA I ZAMYKANIA ZNACZNIKÓW

3 Strona kodowa

4 Opis strony

5 Słowa kluczowe

6 Informacje dodatkowe autor strony informacja o programie użytym do budowy strona w języku polskim

7 Znaczniki czasowe

8 Tło strony żółte tło

9 Nagłówki

10 Akapit Przejście do nowego wiersza i linia pozioma

11 Tekst preformatowany Tekst cytowany

12 Czcionka - znaczniki fizyczne

13 Czcionka - znaczniki logiczne

14 Wygląd czcionki

15 Grafika na stronie

16 Rozmiar grafiki

17 Pozycja grafika

18 Pozycja grafiki w tekście

19 Pozycjonowanie poziome

20 Pozycjonowanie względem bloku tekstu

21 Tabela - podstawa

22 Krawędzie tabeli

23 Odłegłość miedzy komórkami

24 Odległość zawartości komórki od krawędzi

25 Szerokość tabeli

26 Szerokość komórek

27 Wysokość wiersza

28 Położenie zawartości komórek <td valign="top"> </td> <td valign="middle"> </td> <td valign="bottom"> </td> <td align="left"> </td> <td align= center"> </td> <td align="right"> </td> <td align="right" valign= bottom>c3 </td>

29 Kolor w tabeli cały 2 wiersz jest biały kolor całej tabeli kolory wybranych komórek

30 Tytuł tabeli

31 Wiersz nagłówkowy

32 Łączenie komórek w wierszu połącz dwie sąsiednie komórki w jednym wierszu

33 Łączenie między wierszami łączenie komórek z sąsiadujących wierszy

34 Odsyłacze <a href= >Kliknij aby wyświetlić stronę</a> <a href= zawartosc/kontakt.html >Zobacz dane kontaktowe</a> <a href= ><img src= kot.jpg ></a> <a href= target= _blank >Otwórz stronę WP w nowej karcie</a> <a href= mailto:adam.dudek@pwsz.nysa.pl >Wyślij wiadomość</a>

35 Graficzna mapa odsyłaczy

36 Wykaz - nieuporządkowany

37 Wykaz z kropką

38 Wykaz zagnieżdżony

39 Wykaz uporządkowany

40 Zmiana numeracji wykazu

41 Lista definicji

42 Co to jest CSS? - Cascading Style Sheets

43 Osadzanie styli style.css h2 { font-family: Verdana; } index.html

44 Osadzanie styli style.css h2 { font-family: Verdana; } index.html

45 Budowa stylu

46 Dziedziczenie styli

47 Kaskadowość styli Styl lokalny Styl zagnieżdzony Styl zewnętrzny

48 Klasy i identyfikatory Klasa - atrybut znaczników dokumentu HTML Atrybut class: <znacznik class= jakas_nazwa >... Kod html lub tekst.</znacznik> Selektor klasy - nazwa klasy połączona z innym selektorem za pomocą kropki selektor.nazwa_klasy { cecha: wartosc;} Klasa uniwersalna - klasa pomija nazwę selektora - można ją zastosować do wszystkich znacznków

49 Klasy - przykład style.css p.czerwony { color: red; }.niebieski { color: blue; } <p class= czerwony >Czerwony tekst</p> <p>czarny tekst</p> <h1 class= niebieski >Nagłówek</h1> index.html

50 Identyfikatory <znacznik id= nazwa_identyfikatora >... Kod html lub tekst.</znacznik> h1#bardzo_wazny_naglowek { color: red; font-family: verdana; } #bardzo_wazny { color: yellow; font-family: verdana; } <h1 id= bardzo_wazny_naglowek >Ważny tekst</h1> <p class= czerwony >Czerwony tekst</p> <p>czarny tekst</p> <h1 class= niebieski >Niebieski nagłówek</h1> <p class= niebieski >Niebieski akapit</p> <h3 id= bardzo_wazny >Bardzo ważny tekst</h3>

51 Jednostki miar Miary absolutne: in - cale, 1in = 2.54cm cm - centymetry, 1cm mm - milimetry, 1mm pt - punkty, 1pt = 1/72in pc - pika, 1pc = 12pt Miary relatywne: em - wysokość czcionki elementu ex - x-height - wysokość litery x px - piksele, w odniesieniu do rozdzielczości tła

52 Właściwości czcionki Cecha Opis Możliwe wartości font-family ustalenie kroju czionki główne kroje czcionek: Arial, Verdana, Times New Roman, Courier New, Helvetica, Tahoma główne rodziny czcionek: serif, Sans-serif font-size rozmiar czionki wybrana jednostka lub predefiniowane wartości: xx-small, x-smal, smal, medium, large, x-large, xx-large, smaller, larger font-style styl czionki normal, italic font-weight grubość lighter, normal, bold font-variant typ czionki normal, small-caps font forma skrócona oddzielone spacjami wartości w ustalonej kolejności p { font: italic small-caps bold 30px Verdana}

53 Właściwości tekstu Cecha Opis Możliwe wartości color ustalenia kolorów nazwy kolorów z tzw. palety html, lub kolor podany jako rgb(200,200,200), lub szestnastkowo #C8C8C8 line-height wysokość wiersza wysokość podawana w wybranej jednostce letter-spacing odległość pomiędzy znakami odległość podawana w wybranej jednostce text-align wyrównanie poziome left, right, center, justify text-decoration wyróżnienie none, underline, overline, line-trough, blink

54 Właściwości tekstu cd Cecha Opis Możliwe wartości text-indent wcięcie pierwszego wiersza wartość podana w wybranej jednostce text-transform zmiana wielkości liter none, capitalize, uppercase, lowercase word- spacing odległość między wyrazami wartość podana w wybranej jednostce p.przyklad1

55 Właściwości tła Cecha Opis Możliwe wartości background-attachment pozwala przewijać tło bądź go blokować fixed, scroll background-color kolor tła standardowy wybór koloru background-image grafika tła adres url background-position pozycja grafiki tła precyzyjne współrzędne, lub top, bottom, left, right etc. background-repeat sposób powtarzania grafiki tła repeat, repeat-x, repeat-y, no-repeat

56 Tło - przykład

57 Właściwości krawędzi Cecha Opis Możliwe wartości border-color ustalenie koloru krawędzi standardowy wybór koloru border-width grubość krawędzi wartość wyrażona w wybranych jednostkach lub jako thin, medium, thick border-style rodzaj kreski none, hidden, dotted, dashed, solid, double, grove, ridge, inset, outset border-left-color border-left-width border-left-style border-left-, border-right-,border-top-,border-bottom- border przykład: 1px solid red oddzielone spacjami wartości width, style, color

58 Linki i pseudoklasy Cecha Opis Możliwe wartości a:link wygląd standardowego linku na stronie wszystkie cechy dotyczące bloku tekstu lub innych a:visited wygląd linku który był odwiedzony jak wyżej a:hover wygląd linku w momencie wskazania kursorem jak wyżej a:active wygląd w momencie kliknięcia jak wyżej a:link, a:visited {.. } a:hover, a:active {.. } dotyczy tylko tych A, które są klasy przycisk a.przycisk:hover, a.przycisk:active {.. }

59 Właściwości list Cecha Opis Możliwe wartości list-style-type rodzaj markera użytego jako podpunkt disc, square, circle, decimal, roman, lower-roman,. etc list-style-position pozycja znacznika inside, outside list-style-image grafika zamiast standardowego punktora np. url(grafika.jpg);

60 Wymiary i marginesy Cecha Opis Możliwe wartości height wysokość elementu wartość podana w wybranej jednostce width szerokość elementu wartość podana w wybranej jednostce margin margines całego bloku względem otoczenia wartość podana w wybranej jednostce (np. auto) margin-top, margin-left, margin-right, padding (padding-top, padding-left, etc ) odległość zawartości od krawędzi bloku wartość podana w wybranej jednostce float pływanie (położenie) bloku względem innych left, right <div class= blok1 >Tekst wewnątrz elementu blokowego</div>

61 Pozycjonowanie #foto_css { border: 2px solid black; padding: 10px; position: absolute; left: 20px; top: 20px; } div#obszar { width: 500px; height: 350px; background-color: green; left: 10px; top: 10px; } <div id= obszar > </div> <img src="kot.jpg" id="foto_css">

62 Szablon strony na DIV kompleksowy opis: tml

Podobne dokumenty

Znaczniki języka HTML

Znaczniki języka HTML www.math.uni.lodz.pl/ radmat Elementy inline ... Elementy inline ... ... Elementy inline ... ... ... Elementy inline