html tekst - Kurs HTML i CSS
HTML dla zielonych / Znaczniki HTML...nie można zapominać o wstawianiu znaczników zamykających! W języku HTML nie ma żadnego znaczenia jakimi literami wpisujemy znaczniki, np. znacznik <html> możemy równie dobrze wpisać tak: <hTmL>. Przyznasz jednak, że ten drugi sposób jest mało czytelny. Dlatego w tym kursie wszystkie znaczniki będą pisane małymi literami. Praktycznie każdy edytor HTML oferuje: Kolorowanie składni polega na tym, że jeśli wpiszemy poprawny znacznik, jego składnia przyjmie określony kolor - zależny od ustawień...
- HTML5 / Składnia (X)HTML5
Spis treści Przykładowy dokument HTML5 Przykładowy dokument XHTML5 MathML i SVG Przykładowy dokument HTML5 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>...</title> </head> <body> ... </body> </html> W pierwszej linijce widzimy skróconą deklarację typu dokumentu (co ważne, nie przełącza ona przeglądarki w tryb Quirks). Powiedzmy sobie szczerze - raczej nikt nie był w stanie zapamiętać rozwlekłej formy DTD dla języka HTML 4 ani XHTML 1. Przeglądarki...
- Widżety HTML / Ramki lokalne <iframe>
...niezależne okno przeglądarki wewnątrz strony internetowej. Jak wstawić IFRAME na HTML? Na przykład jeśli plik podstrony nazywa się "podstorna.html" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy wstawić ramkę IFRAME, można się posłużyć następującym znacznikiem: <iframe src="podstrona.html"></iframe>. Jaki znacznik HTML służy do wyświetlania w ramce fragmentu innej strony internetowej na własnej stronie internetowej? W ramce IFRAME można...
- HTML dla zielonych / Koniec linii HTML <br>
...stosuje się gdy chcemy natychmiastowo zakończyć linię. Zapytasz zapewne: Po co go stosować, nie można po prostu nacisnąć Enter i przenieść kursor tekstowy do następnej linii? Otóż nie można. Przeglądarka internetowa ignoruje wszelkie znaki przejścia do następnej linii za pomocą klawisza Enter (ignoruje również postawienie obok siebie więcej niż jednej spacji - zobacz: Znaki specjalne). Na przykład jeśli wpiszesz w edytorze taki tekst: To jest pierwsza linia... a to jest druga linia. w...
Oprawa graficzna / "Duszki" CSS...w przypadku menu pionowego, opisanego wcześniej w rozdziale Menu w CSS. Tutaj wykonamy go przy wykorzystaniu "duszków". <ul> <li><a href="czcionki.html">Czcionki</a></li> <li><a href="tekst.html">Tekst</a></li> <li><a href="tlo.html">Tło</a></li> <li><a href="marginesy.html">Marginesy</a></li> <li><a href="obramowanie.html">Obramowanie</a></li> </ul> ul, ul li { display: block; list-style: none; margin: 0; padding: 0; line-height: normal; font-size: 12px; } ul li { width: 200px...
- Menu w CSS / Menu z nagłówkami
...krótkiego nagłówka, zapisanego wewnątrz <dt>...</dt> - taki kod również jest poprawny semantycznie: <dl> <dt>CSS</dt> <dd><a href="czcionki.html">Czcionki</a></dd> <dd><a href="tekst.html">Tekst</a></dd> <dd><a href="tlo.html">Tło</a></dd> <dd><a href="marginesy.html">Marginesy</a></dd> <dd><a href="obramowanie.html">Obramowanie</a></dd> </dl> Efekt bez stylizacji: CSS Czcionki Tekst Tło Marginesy Obramowanie Oczywiście takie menu może zawierać więcej niż jeden...
- HTML5 / Osadzenie kodu HTML w ramce lokalnej <iframe srcdoc>
...Przykład <iframe srcdoc> Obie poniższe formy zapisu są równoważne (zwróć uwagę na znaki apostrofu i cudzysłowu): <iframe srcdoc='<a href="index.html">Strona główna</a>'></iframe> <iframe srcdoc="<a href="index.html">Strona główna</a>"></iframe> Pytania i odpowiedzi <iframe srcdoc> Co to jest srcdoc="..." w ramce IFRAME? Atrybut srcdoc="..." w ramce <iframe> pozwala na bezpośrednie osadzenie kodu HTML wewnątrz ramki, zamiast ładowania zewnętrznego dokumentu przez atrybut...
- Czcionki CSS / Czcionki osadzone @font-face
...czcionki do wybranych elementów na stronie odbywa się już w standardowy sposób, który został opisany w rozdziale. pt. Rodzaj czcionki. <html> <head> <style> @font-face { font-family: comic; src: url(http://adres/plik.ttf); } body { font-family: comic; } </style> </head> <body> Ten tekst jest napisany czcionką osadzoną "comic". <p style="font-family: comic">Ten akapit używa czcionki osadzonej "comic".</p> </body> </html> Warto pamiętać, że jeśli chcemy przypisać tak...
- CSS dla zielonych / Ramki z tekstem CSS {background-color, padding, padding-top, padding-bottom, padding-left, padding-right, border-width, border-style, border-color, border-radius}
Praktycznym zastosowaniem klas selektorów mogą być np. ramki wizualnie wyróżniające tekst, który się w nich znajduje. Wystarczy, że raz zdefiniujemy ich wygląd w arkuszu stylów: .nazwa-klasy { deklaracje stylów } by następnie w miarę potrzeb móc ich wielokrotnie używać w dowolnym dokumencie HTML na naszej stronie: <div class="nazwa-klasy">dowolny tekst...</div> Przypominam, że w arkuszu stylów (pierwsze polecenie powyżej) nazwa-klasy musi być poprzedzona znakiem kropki (w tym miejscu po...
- Tekst HTML / Wyświetlanie znaczników HTML
...przed oraz po takim bloku tak, że każdy taki element jest wyświetlany w nowej linii. Generalnie element blokowy może zawierać wewnątrz siebie zwykły tekst, jak również inne elementy blokowe. Został on pomyślany do tworzenia obszerniejszych struktur niż elementy wyświetlane w linii. Wyjątkiem od tej reguły jest akapit, który mimo że stanowi element blokowy, nie może zawierać w sobie dodatkowych bloków - w tym innych akapitów. w linii - elementy takie są wyświetlane normalnie, tzn. bez...