Efektowne formatowanie wpisów na blogu - format i style tekstu

Dodane przez w w Strona internetowa EP

W tym artykule pokażę w jaki sposób efektownie formatować wpisy na Blogach Etyki Praktycznej. Tych kilka poniższych porad pozwoli Wam publikować pięknie sformatowane artykuły bez większego wysiłku korzystając jedynie z edytora tekstów Bloga EP.

Podstawowa zasada - nie formatujemy w Wordzie

Starajcie się nie formatować wstępnie tekstów w Waszym lokalnym edytorze tekstów. Zazwyczaj wklejenie takiego tekstu kończy się bałaganem na stronie. Polecam ewentualnie stosowanie podstawowych stylów takich jak Nagłówek 2 lub 3. Aby teksty wyglądały pięknie i spójnie, należy korzystać z wbudowanych w stronę EP stylów, do których dostęp macie w edytorze Waszego bloga.

Jeśli wklejacie tekst na stronę, należy skorzystać z odpowiednich ikonek ("Wklej jako czysty tekst", "Wklej z Worda"). Dzięki nim wszelkie niepotrzebne informacje z edytora tekstu zostają porzucone i przekonwertowane na język HTML. Idealnie wkejony tekst zawiera jedynie bloki paragrafów (p) oraz nagłówki (h) i nie zawiera niepotrzebnych znaczników HTML "span". Tekst taki nie powinien też posiadać podwójnych, "pustych" znaczników (p). Aby podejrzeć, z jakich bloków składa się nasz tekst, gorąco polecam włączenie w edytorze "podglądu bloków".

Widok bloków tekstu

Aby zobaczyć wszystkie wklejone znaczniki dokumentu, warto przyjrzeć się źródłu dokumentu.

Pierwszy etap - ustawianie formatu bloku tekstu

 Podstawową jednostkę formatowania wpisu internetowego w edytorze Bloga EP zmienić można tu:

Formaty bloków (znaczniki HTML) to podstawowe jednostki formatowania tekstu internetowego. Zmiana rodzaju bloku zmienia również przypisany do tekstu tag HTML. Ilość formatów jest więc zdeterminowana językiem HTML.

Paragrafy

Podstawowym w naszym edytorze jest format paragrafu (w edytorze nazwany jako "Normalny"). Jest do domyślny format wpisywanego tekstu. Każdy normalny akapit powinien mieć właśnie taki format. W języku HTML zapisany jest on jako

< p >  ....... < / p >

Każde naciśnięcie klawisza "Enter" ustanawia kolejny paragraf. Paragrafy domyślnie sformatowane są tak, że występuje między nimi kilkumilimetrowe światło a ich czcionka jest odpowiednio powiększona. Jeśli więc chcemy podzielić zdanie na linie w JEDNYM PARAGRAFIE, należy zamiast klawisza "Enter" wcisnąć "SHIFT + Enter". Zamiast nowego paragrafu pojawi się wtedy znak podziału wiersza (znacznik HTML br ). Dzięki takiemu rozwiązaniu, stosując jeden z poniższych stylów akapitu, można np. w jednej ramce umieścić ciąg lini:

Jak Kowalski
ul. Sienna 22a
72-323 Szczecin

Nagłówki tytułów i śródtytułów

Kolejnym ważnym i często używanym formatem jest nagłówek. Służy on do wyróżniania tytułów i śródtytułów wpisywanego tekstu. W języku HTML zapisuje się go jako znacznik h1-h6 . Przykładowe źródło dokumentu z nagłówkiem 2 wyglądać może tak:

 < h 2 > To jest mój tytuł < / h 2  >

Nie powinno się używać Nagłówka 1 we wpisie w Blogu EP, gdyż zarezerwowany jest on dla tytułu waszego artykułu. Ponieważ poprawne użycie Nagłówka 1 zakłada, że stosuje się go tylko raz na daną stronę, tytuł wpisu automatycznie uzyskuje format takiego Nagłówka 1. W artykułach śmiało należy natomiast korzystać z kolejnych nagłówków 2,3,4,5. Używanie nagłówków bardzo poprawia przejrzystość tekstu oraz ma duże znaczenie dla poprawnego wyszukiwania artykułu  przez wyszukiwarki. Pozostałe nagłówki zastosowane w tekście na Blogu EP wyglądają tak:

Nagłówek 2

Nagłówek 3

Nagłówek 4

Nagłówek 5
Nagłówek 6

Style bloków (paragrafów)

Drugim ważnym sposobem formatowania tekstu jest stosowanie Stylów. W edytorze zmienić je można tu:

Style tekstu

Style paragrafu są stylami, które zastosować można do całego pararagrafu (akapitu), tzn. bloku tekstu kończącego się na wciśnięciu klawisza "Enter". Komputerowy akapit może być więc kilkuzdaniowy lub kilkuliterowy. Jak już wspomniałem, w języku HTML akapit to ciąg znaków rozpoczynający się od znacznika

 < p > i kończący się znacznikiem < / p >

Stosowanie styli w języku HTML polega na przypisaniu do paragrafów odpowiednich atrybutów (class), np:

< p class="note" > To jest styl note  < / p >

Po zastosowaniu stylu blokowego do danego akapitu zmieni się jego wygląd. Poniżej przedstawiam kilka przykładowych stylów dostępnych na Blogu Etyki Praktycznej.

Styl do formatowania bibliografii i cytatów

Aby w prosty sposób sformatować cytat, należy w edytorze ustawić styl "cytat" (HTML class="cytat"). Wygląda on tak:

Maecenas et orci quam, at lacinia tellus. Sed non tortor purus. Vivamus sit amet dolor massa, commodo vestibulum turpis. Pellentesque ac lorem vitae est dictum imperdiet id id nisl. Cras luctus bibendum dignissim. Phasellus vel tortor ut ligula molestie facilisis. Aenean consequat enim sit amet ipsum posuere consequat. 

Jednym ze stylów stworzonych specjalnie na potrzeby naszego bloga jest styl "biblio", służący do formatowania bibliografii. Wygląda on tak:

Williams, B.A.O., 2006. Ethics and the Limits of Philosophy, Routledge.
Williams, B., 1973. A Critique of Utilitarianism. In J. Smart & B. Williams, eds. Utilitarianism for and Against. Cambridge: University Press.
Williams, B., 1981. Moral luck.,
Williams, B., 1972. Morality: an introduction to ethics, New York: Harper & Row.
Wolf, S., 2011. Hiking the Range. In On What Matters, Vol. 2. Oxford University Press, USA, pp. 33-57.
Wood, A., 2011. Humanity as End in Itself. In On What Matters, Vol. 2. Oxford University Press, USA, pp. 58-82.

W przeciwieństwie do pozostałych stylów jest to styl stosowany nie do akapitów ( znacznik p) lecz do bloków DIV.  Aby nasza bibliografi wyglądała jak powyżej, należy wszystkie wpisy zamknąć w bloku DIV z klasą "biblio". Ponieważ korzystając z edytora łatwo popełnić tu błąd, najprościej uczynić to edytując źródło naszego wpisu w następujący sposób (bez spracji w znacznikach HTML):

< div class="biblio" >
Tu kilka akapitów naszej całej bibliografii 
< / div >

Pozostałe style akapitów

Pozostałe style zastosować można bez problemu w edytorze na Blogu EP (menu rozwijane Style) i wyglądają tak:

Important 

Important-Green

Important-Red

Important-Purple

Number-Block1 -  Wymaga większej ilości tekstu, aby cyfra wyświetliła się poprawnie: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci quam, at lacinia tellus. Sed non tortor purus. Vivamus sit amet dolor massa, commodo vestibulum turpis. Pellentesque ac lorem vitae est dictum imperdiet id id nisl. Cras luctus bibendum dignissim. Phasellus vel tortor ut ligula molestie facilisis. Aenean consequat enim sit amet ipsum posuere consequat. 
Number-Block2 -  Wymaga większej ilości tekstu, aby cyfra wyświetliła się poprawnie: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci quam, at lacinia tellus. Sed non tortor purus. Vivamus sit amet dolor massa, commodo vestibulum turpis. Pellentesque ac lorem vitae est dictum imperdiet id id nisl. Cras luctus bibendum dignissim. Phasellus vel tortor ut ligula molestie facilisis. Aenean consequat enim sit amet ipsum posuere consequat. 
Number-Block3 - Wymaga większej ilości tekstu, aby cyfra wyświetliła się poprawnie: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci quam, at lacinia tellus. Sed non tortor purus. Vivamus sit amet dolor massa, commodo vestibulum turpis. Pellentesque ac lorem vitae est dictum imperdiet id id nisl. Cras luctus bibendum dignissim. Phasellus vel tortor ut ligula molestie facilisis. Aenean consequat enim sit amet ipsum posuere consequat. 

doc - To jest styl "doc"

note- To jest styl "note"

media - To jest styl "media"

approved - To jest styl "approved"

download - To jest styl "download"

alert - To jest styl "alert"

notice - To jest styl "notice"

attantion - To jest styl "attantion"

yellowbox - To jet styl "yellowbox"

greenbox - To jest styl "greenbox"

redbox - To jest styl "redbox"

Style liniowe

Inne style, z których możecie korzystać na Blogu EP, to style liniowe. Znaczy to, że nie stosują się do całego akapitu, lecz tylko do zaznaczonych znaków (słów). W języku HTML style liniowe zapisuje się za pomocą znacznika "span", np.

 < p > To jest mój akapit a to moje podkreślone < span > słowo < / span > < / p >    

Zatem w jednym akapicie można zastosować różne style liniowe, które służą do podkreślania fragmentów tekstu, a nie całych bloków. Style liniowe są nadrzędne nad stylami blokowymi (akapitu), zatem w poniższych przykładach zastosowałem różne style akapitu, a w nich rozmaite style liniowe.

To jest number-purpleipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci quam, at lacinia tellus. Sed non tortor purus. Vivamus sit amet dolor massa, commodo vestibulum turpis. Pellentesque ac lorem vitae est dictum imperdiet id id nisl. Cras luctus bibendum dignissim. Phasellus vel tortor ut ligula molestie facilisis. Aenean consequat enim sit amet ipsum posuere consequat. Mauris dapibus sollicitudin erat congue elementum. Aliquam tempus mattis nulla a luctus. Fusce tincidunt odio quis quam commodo id varius diam egestas. highlight highlight highlight highlight highlight. Nam convallis luctus mauris nec volutpat. Nulla facilisi. Etiam blandit accumsan lacus, quis sagittis lectus fermentum eget. Mauris quis orci at ipsum posuere hendrerit vitae at erat. Phasellus imperdiet, tellus semper pulvinar dignissim, massa massa ultricies tortor, sit amet semper lectus lectus at nisl. Nam eu pretium arcu

 

important-title-green amet, consectetur adipiscing elit. Maecenas et orci quam, at lacinia tellus. Sed non tortor purus. Vivamus sit amet dolor massa, commodo vestibulum turpis. Pellentesque ac lorem vitae est dictum imperdiet id id nisl. Cras luctus bibendum dignissim. Phasellus vel tortor ut ligula molestie facilisis. Aenean consequat enim sit amet ipsum posuere consequat. Mauris dapibus sollicitudin erat congue elementum. highlight-bold highlight-bold. Fusce tincidunt odio quis quam commodo id varius diam egestas. highlight highlight highlight highlight highlight. Nam convallis luctus mauris nec volutpat. Nulla facilisi. Etiam blandit accumsan lacus, quis sagittis lectus fermentum eget. Mauris quis orci at ipsum posuere hendrerit vitae at erat. Phasellus imperdiet, tellus semper pulvinar dignissim, massa massa ultricies tortor, sit amet semper lectus lectus at nisl. Nam eu pretium arcu

 

Dropcap-left ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci quam, at lacinia tellus. Sed non tortor purus. Vivamus sit amet dolor massa, commodo vestibulum turpis. Pellentesque ac lorem vitae est dictum imperdiet id id nisl. Cras luctus bibendum dignissim. Phasellus vel tortor ut ligula molestie facilisis. Aenean consequat enim sit amet ipsum posuere consequat. Mauris dapibus sollicitudin erat congue elementum. Aliquam tempus mattis nulla a luctus. Fusce tincidunt odio quis quam commodo id varius diam egestas. highlight-bold highlight-bold Nam convallis luctus mauris nec volutpat. Nulla facilisi. Etiam blandit accumsan lacus, quis sagittis lectus fermentum eget. Mauris quis orci at ipsum posuere hendrerit vitae at erat. Phasellus imperdiet, tellus semper pulvinar dignissim, massa massa ultricies tortor, sit amet semper lectus lectus at nisl. Nam eu pretium arcu

 

Style list (wypunktowanie i numerowanie)

Oprócz formatów, styli blokowych i liniowych, upiększyć można również wyliczenia, nadając HTMLowym znacznikom wyliczenia "li" odpowiednią klasę "bullet" lub "bullet-blue". 

  • To jest wyliczenie z atrybutem class="bullet"
  • To jest wyliczenie  atrybutem class="bullet"
  • To jest wyliczenie  atrybutem class="bullet"
  • To jest wyliczenie z atrybutem class="bullet-blue"
  • To jest wyliczenie  atrybutem class="bullet-blue"
  • To jest wyliczenie  atrybutem class="bullet-blue"

Zapraszam do eksperymentowania i poprawiania czytelności Waszych tekstów.

Oznaczone w: formatowanie
Adiunkt w Zakładzie etyki Instytutu Filozofii Uniwersytetu Szczecińskiego. Autor książki Język etyki a utylitaryzm. Filozofia Moralna R.M.Hare'a
Spodobał Ci się artykuł? Subskrybuj biuletyn i podziel się z innymi!
URL Trackback dla tego wpisu na blogu

Komentarze

  • Umieść swój komentarz jako pierwszy!

Zostaw komentarz

Gość środa, 17 października 2018
Blog Naukowy Etyk Praktycznej

Aktywne grupy

Brak aktywnych grup.