HTML i inne
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
Strona kodowa
Opis strony
Słowa kluczowe
Informacje dodatkowe autor strony informacja o programie użytym do budowy strona w języku polskim
Znaczniki czasowe
Tło strony żółte tło
Nagłówki
Akapit Przejście do nowego wiersza i linia pozioma
Tekst preformatowany Tekst cytowany
Czcionka - znaczniki fizyczne
Czcionka - znaczniki logiczne
Wygląd czcionki
Grafika na stronie
Rozmiar grafiki
Pozycja grafika
Pozycja grafiki w tekście
Pozycjonowanie poziome
Pozycjonowanie względem bloku tekstu
Tabela - podstawa
Krawędzie tabeli
Odłegłość miedzy komórkami
Odległość zawartości komórki od krawędzi
Szerokość tabeli
Szerokość komórek
Wysokość wiersza
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>
Kolor w tabeli cały 2 wiersz jest biały kolor całej tabeli kolory wybranych komórek
Tytuł tabeli
Wiersz nagłówkowy
Łączenie komórek w wierszu połącz dwie sąsiednie komórki w jednym wierszu
Łączenie między wierszami łączenie komórek z sąsiadujących wierszy
Odsyłacze <a href= http://www.pwsz.nysa.pl >Kliknij aby wyświetlić stronę</a> <a href= zawartosc/kontakt.html >Zobacz dane kontaktowe</a> <a href= http://www.wp.pl ><img src= kot.jpg ></a> <a href= http://www.wp.pl target= _blank >Otwórz stronę WP w nowej karcie</a> <a href= mailto:adam.dudek@pwsz.nysa.pl >Wyślij wiadomość</a>
Graficzna mapa odsyłaczy
Wykaz - nieuporządkowany
Wykaz z kropką
Wykaz zagnieżdżony
Wykaz uporządkowany
Zmiana numeracji wykazu
Lista definicji
Co to jest CSS? - Cascading Style Sheets
Osadzanie styli style.css h2 { font-family: Verdana; } 2 3 1 index.html
Osadzanie styli style.css h2 { font-family: Verdana; } 2 3 1 index.html
Budowa stylu
Dziedziczenie styli
Kaskadowość styli Styl lokalny Styl zagnieżdzony Styl zewnętrzny
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
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
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>
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
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}
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
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
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
Tło - przykład
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
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 {.. }
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);
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>
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">
Szablon strony na DIV kompleksowy opis: http://www.kurshtml.edu.pl/css/wstep,szablon.h tml