Tekst podstawowe znaczniki

Wielkość: px

Rozpocząć pokaz od strony:

Download "Tekst podstawowe znaczniki"

Irena Maciejewska
7 lat temu
Przeglądów:

1 Wyświetlanie Tekst podstawowe znaczniki Język HTML przewiduje dwa podstawowe modele wyświetlania treści znaczników: w bloku - podczas wyświetlania bloku w przeglądarce, automatycznie dodawane są znaki końca linii (linijki przerwy) 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. w linii - elementy takie są wyświetlane normalnie, tzn. bez dodawania dodatkowych interlinii przed i po (tak jak zwykły tekst). Dwa takie elementy mogą znajdować się w jednej linii - obok siebie. Generalnie nie powinny one zawierać elementów blokowych, ale mogą inne elementy wyświetlane w linii oraz zwykły tekst. Jeśli jednak umieścimy wewnątrz nich jakiś element blokowy, moŝe to spowodować (choć nie musi), Ŝe przeglądarka zignoruje taki znacznik (w większości przypadków tak się nie dzieje). Akapit <p>...</p> Akapit jest to część tekstu objęta znacznikami: <p>...</p>. Następujące bezpośrednio po sobie akapity są oddzielone przerwą w tekście (pustą linią). Dzięki umieszczaniu w kolejnych akapitach treści nieco róŝniącej się tematycznie, strona stanie się bardziej estetyczna oraz czytelniejsza. JeŜeli przed akapitem serią akapitów postawimy znak paragrafu (w kodzie źródłowym reprezentowany przez znak specjalny ) z ewentualnym numerem porządkowym, to taki fragment tekstu nosi nazwę paragraf. Zwykle odnosi się on do przepisów prawnych. Stosując akapity moŝemy skorzystać z kilku metod wyrównywania tekstu na stronie (czyli jego ustawienia): <p align="left">...</p> <p>...</p> <p align="right">...</p> <p align="center">...</p> <p align="justify">...</p> Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML zaleca się stosowanie stylów. Akapit (paragraf) jest znacznikiem specyficznym - jest wyświetlany w bloku, ale nie moŝe zawierać innych elementów blokowych (włączając w to inne paragrafy). MoŜe natomiast zawierać zwykły tekst oraz elementy wyświetlane w linii.

2 Tytuł <hn>...</hn> (n = 1...6) Aby nadać tytuł (nagłówek) jakiejś części tekstu (rozdziałowi), moŝesz uŝyć tej komendy. Istnieje sześć rzędów tytułów. NajwyŜszym rzędem jest rząd pierwszy: <h1>...</h1>, a najniŝszym - szósty: <h6>...</h6>. Tytuł wyŝszego rzędu jest pisany większą czcionką. Tworząc tytuły moŝesz uŝyć tych samych sposobów wyrównywania tekstu co w przypadku paragrafów, tzn.: <hn align="left">...</hn> <hn>...</hn> <hn align="right">...</hn> <hn align="center">...</hn> <hn align="justify">...</hn> Prawidłowa kolejność tytułów NaleŜy dąŝyć do tego, aby tytuły na stronie były poukładane w odpowiedniej kolejności, odzwierciadlającej podział na działy, rozdziały, podrozdziały, punkty, podpunkty itd. Oznacza to, Ŝe kaŝdy element h2 powinien być poprzedzony przynajmniej przez jeden element h1, h3 - przez h2, h4 - przez h3, h5 - przez h4, h6 - przez h5. W innym przypadku mielibyśmy do czynienia z sytuacją podobną do wykazu numerowanego np. od 1.1 zamiast od 1 albo z brakującymi podpunktami, tzn. jak gdyby nastąpiło "przeskoczenie" z punktu nr 1 od razu do pomijając 1.1. <h1>1. Dział</h1> <h2>1.1. Rozdział</h2> <h2>1.2. Rozdział</h2> <h3> Podrozdział</h3> <h1>2. Dział</h1>

3 Dymek narzędziowy Stosując polecenie: <hn title="tu podaj opis">...</hn>, moŝemy wprowadzić opis, który będzie się pojawiał, gdy przesuniemy wskaźnik myszki na dany tytuł. Atrybut ten (title="...") moŝna stosować praktycznie w stosunku do wszystkich znaczników HTML (oprócz: <base />, <basefont />, <head>, <html>, <meta />, <param />, <script>, <title>). UWAGA! W treści atrybutu title="..." nie naleŝy uŝywać znaków cudzysłowu. Jeśli musimy to zrobić, naleŝy zamiast nich wpisywać: " Blok <div>...</div> Polecenie to wydziela większy blok tekstu, przez co moŝemy nadać mu jakiś rodzaj formatowania: <div align="left">...</div> <div>...</div> <div align="right">...</div> <div align="center">...</div> <div align="justify">...</div> W odróŝnieniu od paragrafu, blok moŝe zawierać wewnątrz siebie inne elementy wyświetlane w bloku. Kolejne bloki są oddzielane od siebie znakami nowej linii, ale nie są dodawane linijki przerwy (aby je dodać, naleŝy np. zastosować znacznik <br />). Koniec linii <br /> Jest to bardzo przydatny znacznik. UŜywamy go, gdy chcemy natychmiast zakończyć linię i przejść do następnej (wszystkie normalne znaki końca liniii są ignorowane przez przeglądarkę). Pochylenie <i>...</i> Pozwala napisać tekst pismem pochylonym, czyli kursywą (ang. "italic").

4 Pogrubienie <b>...</b> Znacznik ten pozwala pogrubić (wytłuścić) część tekstu (ang. "bold"). Indeks 1. Indeks górny <sup>...</sup> 2. Indeks dolny <sub>...</sub> UmoŜliwia wprowadzenie indeksów (górnych dolnych) przy cyfrach i literach. WyróŜnienie 1. Zwykłe (emfaza) <em>...</em> 2. Mocne (mocna emfaza) <strong>...</strong> Pozwala wyróŝnić dowolny tekst (tzw. emfaza), aby podkreślić jego znaczenie. Pierwsze polecenie zwykle wyświetla tekst napisany kursywą, natomiast drugie - pogrubiony. RóŜnią się one jednak od zwykłego wytłuszczenia i kursywy tym, Ŝe dodatkowo niosą ze sobą pewne informacje, co do waŝności tekstu. W sytuacjach kiedy szczególnie zaleŝy nam na zwróceniu uwagi czytelnika na jakieś informacje, a nie jedynie na określonym sformatowaniu czcionki, powinniśmy uŝyć właśnie przedstawionych powyŝej znaczników. Czcionka powiększona i pomniejszona 1. Czcionka powiększona <big>...</big> 2. Czcionka pomniejszona <small>...</small> Wprowadza tekst napisany powiększoną czcionką (<big>) pomniejszoną (<small>). Wpisując powyŝsze znaczniki (tego samego rodzaju) jeden wewnątrz drugiego (np.: <big><big>...</big></big>), moŝna zwiększyć zmniejszyć rozmiar tekstu o kilka wielkości.

5 Pozioma linia <hr /> Polecenie to pozwala narysować na ekranie poziomą linię. MoŜe ona np. rozdzielać kolejne rozdziały, które róŝnią się tematycznie, przez co strona staje się bardziej czytelna i przejrzysta. Obramowanie <fieldset>...</fieldset> Wprowadza obramowanie wokół wybranego fragmentu tekstu. Prawdziwe zastosowanie znacznika <fieldset> to grupowanie pól formularza. Wygląd obramowania moŝe się róŝnić w zaleŝności od przeglądarki. Polecenie to często stosuje się wraz z: <legend>...</legend>, co pozwala podać tytuł ramki. Po wpisaniu: UWAGA! Znacznik <legend>...</legend> (tytuł ramki) musi znajdować się bezpośrednio po znaczniku otwierającym <fieldset> ZagnieŜdŜanie wykazów Wypunktowanie (podstawowy) <li>punkt pierwszy <li>punkt 1.1 <li>punkt <li>punkt <li>punkt 1.2 <li>punkt drugi Numerowanie <li>punkt pierwszy <li>punkt 1.1 <li>punkt <li>punkt <li>punkt 1.2 <li>punkt drugi Kod wykazów podrzędnych wpisuje się wewnątrz znacznika <li>... wybranego punku wykazu nadrzędnego. Pomiędzy dwoma punktami wykazu, tzn. między znacznikami a <li> nie moŝna się znaleźć Ŝaden kod ani tekst, poniewaŝ jest to błędem!

Podobne dokumenty

Ćwiczenie 2 Tekst podstawowe znaczniki.

Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 poświęcone jest formatowaniu tekstu za pomocą znaczników. AŜeby uzyskać poŝądany wygląd tekstu musimy posłuŝyć się określonymi znacznikami. Ćwiczenie