wtorek, 4 września 2012

HTML - Edycja tekstu ? Jakie to proste!

O formatowaniu słów kilka...

W dzisiejszej lekcji nauczymy się jak poprawnie edytować tekst (tu poprawność polityczna co poniektórych  nakazuje im powiedzieć - ALEŻ TO JEST NIEZGODNE ZE STANDARDAMI W3C !!, niemniej jednak - gdy poznasz podstawy, których już się nie stosuje łatwiej będzie Ci zaznajomić się z obecnymi standardami). Zacznijmy więc od zrobienia listy dostępnych funkcji w wordzie:
  1. Przejście do nowej linii (?)
  2. Zmiana koloru czcionki
  3. Zmiana typu czcionki
  4. Zmiana wielkości czcionki
  5. Pozycjonowanie - wyrównanie kolejno do lewej, środka, prawej, justowanie.
  6. Pochylenie, pogrubienie, podkreślenie - formatki
  7. Style wbudowane - Nagłówki.
Mamy więc spis wszystkich (najbardziej potrzebnych) dostępnych funkcji w naszym kochanym jedynym słusznym Microsoft Office Word 9x-20xx. Jak to się przekłada na HTML ? Zacznijmy:

Przejście do nowej linii

W M$ Word robi się to za pomocą przycisku shift + [ENTER] (sam ENTER rozpoczyna nowy akapit) na klawiaturze. Niemniej jednak w HTML gdy edytujesz źródło strony musisz zastosować specjalny znacznik:

<!-- przyklad_3_1.html -->
<html>
<head>
   <title>Przyklad 1 rozdzial 3.</title>

   <meta http-equiv="Content-Type" content="text/html; charset:UTF-8" />
 </head>
 <body>
   To jest pierwsza linia tekstu <br />
   To jest druga linia tekstu <br />
   To jest trzecia linia tekstu <br />
   To jest czwarta itd.... <br />
 </body>
</html>
Jakie to proste, prawda ?? Wszystko za sprawą znacznika <BR />. Stawiamy go zawsze w miejscu w którym chcemy przejść do następnej linii. Widzimy tu także fragment "<meta [...] />" poznany na poprzedniej lekcji.

Zmiana koloru czcionki

Aby zmienić kolor czcionki musimy użyć specjalnego znacznika. Jest to znacznik <font> (posiada znacznik zamykający </font>), którego jednym z argumentów jest color. A oto przykład: 

<!-- przyklad_3_2.html -->
<html>
<head>
   <title>Przykład 2 rozdzial 3.</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
 <body>
   <font color="red">To jest pierwsza linia tekstu</font> <br />
   <font color="blue">To jest druga linia tekstu</font> <br />
   <font color="yellow">To jest trzecia linia tekstu</font> <br />
   <font color="white">A ten tekst się nie wyświetli bo jest biały na białym tle :D....</font> <br />
 </body>
</html>

Jako komentarz do powyższego, mogę tylko powiedzieć, że znacznik <font> będzie najczęściej używanym znacznikiem na stronie o różnorakiej kolorystyce etc.

Zmiana typu czcionki

Typ czcionki, tak samo jak kolor oraz rozmiar zależą od znacznika <font>. Powinien być jednym ze standardowych wbudowanych typów twojego systemu operacyjnego. Obsługuje się je za pomocą atrybutu face. 

<!-- przyklad_3_3.html -->
<html>
<head>
   <title>Przykład 3 rozdzial 3.</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
 <body>
   <font color="red" face="arial">To jest pierwsza linia tekstu</font> <br />
   <font color="blue" face="georgia">To jest druga linia tekstu</font> <br />
   <font color="yellow" face="Comic Sans MS">To jest trzecia linia tekstu</font> <br />
 </body>
</html>

Oczywiście, możliwe jest używanie niestandardowych czcionek (Np: Aurebesh), ale użytkownicy nie posiadający zainstalowanej czcionki u siebie w komputerze zobaczą zwykły Arial. Innym rozwiązaniem jest umieszczenie czcionki na serwerze, ale strona może ładować się wtedy dłużej.

Zmiana wielkości czcionki

Wielkość zmienia się jak już wspomniałem także odpowiednim atrybutem, którym jest size (ang. rozmiar). Przyjmuje on prawidłowo wartości od 1 do 5 według stopnia Najmniejsza, mała, normalna, duża, największa. A przykład wygląda w sposób następujący:


<!-- przyklad_3_4.html -->
<html>
<head>
   <title>Przykład 4 rozdzial 3.</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
 <body>
   <font color="black" face="arial" size="5">To jest OGROMNIASTY tekst</font> <br />
   <font color="black" face="arial" size="2">A ten jest w miare mały ;d</font> <br />
 </body>
</html>

Pozycjonowanie

Wiadomo, że czasem jest też tak, że niektóre fragmenty tekstu np. trzeba wypozycjonować - do lewej, do prawej, środek. Czasem tekst należałoby wyjustować aby wyglądał przyzwoicie. Mamy na to kilka sposobów. Zaczniemy od najprostrzego:

Wyśrodkowanie

Aby wyśrodkować tekst należy umieścić go między znacznikami <center> </center>. W ten sposób możemy wyśrodkować także dowolny element na stronie taki jak np: obrazek, tabelka, przycisk, link. Cokolwiek. 

<!-- przyklad_3_5.html -->
<html>
<head>
   <title>Przykład 5 rozdzial 4.</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
 <body>
   <center><font color="black" face="arial" size="5">To jest OGROMNIASTY tekst. Ha i go wyśrodkowałem!</font></center> <br />
   <font color="black" face="arial" size="2">A ten jest w miare mały ;d. Nie zasłużył na wyśrodkowanie:(</font> <br />
 </body>
</html>

Możemy zrobić to także za pomocą znacznika paragrafu/akapitu. Znacznik paragrafu <p> </p> Określa nam początek oraz koniec nowego paragrafu/akapitu. Dzięki temu możemy manipulować tekstem w sposób bardziej przystępny, ograniczać go i dzielić na podsekcje. Posiada on również atrybut jakim jest align. To na nim skupimy się w tym podrozdziale.

<!-- przyklad_3_6.html -->
<html>
<head>
   <title>Przykład 6 rozdział 3.</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
 <body>
   <p align="center">
      <font color="black" face="arial" size="5">To jest OGROMNIASTY tekst. Ha i go wyśrodkowałem!</font> <br />
      <font color="black" face="arial" size="2">A ten jest w miare mały ;d. Wyśrodkuje go też:)</font> <br />
   </p>
 </body>
</html>

Dzięki align możemy ustalić także czy tekst ma być wyrównany do lewej, do prawej lub wyjustowany:

Do lewej

<p align="left">JAKIŚ TEKST PO LEWEJ</p>


Do prawej

<p align="right">JAKIŚ TEKST PO PRAWEJ</p>


Wyjustowanie

<p align="justify">Wyjustowany tekst. Różnicę zobaczysz gdy będzie naprawdę dłuuuuuuuuuuuuuuuuuuuuuuuugi!:)</p>


Pochylenie, pogrubienie, podkreślenie - formatki.

Tak jak w M$ Word tak i w HTML można zastosować takie formatki. Co więcej, jest to prawie tak samo proste:
  1. <u>Tekst który w żaden sposób nie może zostać pominięty wzrokiem - jest podkreślony</u>
  2. <i>Tekst, który mógłby uchodzić za jakiś cytat - jest pochylony</i>
  3. <b>Pogrubiony, ważny tekst</b>
Jak nietrudno zauważyć te znaczniki przypominają nam standardowe znane z windowsa ikonki B, U, I.

A teraz jakiś przykład:
<!-- przyklad_3_7.html -->
<html>
<head>
   <title>Przykład 7 rozdzial 3.</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
 <body>
   <p align="center">
      <font color="black" face="georgia" size="5">
          <i> Mam fajny, duży, <u>pochylony</u> tekst dzięki zastosowaniu znacznika <b>I</b>!</i>
      </font> <br />
   </p>
 </body>
</html>


Style wbudowane - Nagłówki.

Znaczniki nagłówków udostępniają nam zdefiniowane standardowo style po to abyśmy nie musieli tworzyć np: <font size="5" ><b>Nagłówek</b></font> Zamiast tego możemy użyć znacznika <hX></hX> który ma taką postać:
<hX>TEKST<hX> -  H jest skrótem z ang. HEADER - nagłówek. Zamiast X podstawiamy ważność nagłówka, tj. <h1> będzie największy a <h5> będzie najmniejszy. Przykład: 

<!-- przyklad_3_8.html -->
<html>
<head>
   <title>Przykład 8 rozdzial 3.</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
 <body>
      <h1>OGROMNY nagłówek</h1>
      <h2>Wielki nagłówek</h2>
      <h3>Duży nagłówek</h3>
      <h4>Taki w miare normalny nagłówek</h4>
      <h5>Mały nagłówek ?? </h5>
      <h6>Tyci nagłówek, prawie mnie kurcze nie widać :(</h6>
 </body>
</html>

Warto także wspomnieć, że nagłówki nie mogą być pozycjonowane za pomocą paragrafu. Można jednak każdemu nagłówkowi nadać wartość atrybutu align tj.

<!-- przyklad_3_9.html -->
<html>
<head>
   <title>Przykład 9 rozdzial 3.</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
 <body>
      <h1 align="left">OGROMNY nagłówek</h1>
      <h2 align="right">Wielki nagłówek</h2>
      <h3 align="center">Duży nagłówek</h3>
      <h4 align="justify">Taki w miare normalny nagłówek</h4>
      <h5 align="center">Mały nagłówek ?? </h5>
      <h6 align="right">Tyci nagłówek, prawie mnie kurcze nie widać :(</h6>
 </body>
</html>

To już jest koniec tej lekcji, zapraszam więc do pracy domowej. 


Praca domowa

  1. Napisz stronę internetową, na której za pomocą poznanych dziś znaczników umieścisz Tytuł wiersza w nagłówku, oraz wiersz http://wiersze.bfcior.pl/julian-tuwim.php?show=idzie_grzes tak, aby
    1. 1 strofa była po lewej,
    2. druga po środku,
    3. trzecia po prawej,
    4. pierwszy werset czwartej był pogrubiony,
    5. drugi podkreślony,
    6. trzeci pochylony,
    7. czwarty pozostaw bez zmian.
  2. Zmień kolor czcionki tak, aby każda strofa (zwrotka) była innego koloru.
  3. Napisz własną stronę internetową o dowolnej tematyce wykorzystując wiedzę z tej oraz poprzednich lekcji.
  4. Odpowiedz na poniższe pytania:
    • Jakiego znacznika używamy do przejścia do nowej linii
    • Czy w każdej linii muszę użyć znacznika <font> jeśli przykładowo chce mieć w 3 liniach taki sam tekst (3 razy kopiować ten sam znacznik?)
    • Czy mogę użyć znacznika pogrubienia, pochylenia i podkreślenia na raz?
Jeśli nie znasz odpowiedzi na te pytania sprawdź sam EMPIRYCZNIE :).  

Powodzenia!
Autor: o
Etykiety: , , , , ,

Brak komentarzy:

Prześlij komentarz

Subskrybuj: Komentarze do posta (Atom)