Write Less - Do more

wtorek, 13 maja 2014

HTML - Każdy chce być Stylowy - Wprowadzenie do CSS

Wprowadzenie do CSS

Wstęp

CSS - (cascading style sheet) - jest to język służący do ostylowywania elementów HTML. Obecnie jego najnowsza wersja to CSS3, lecz najpierw postaram się zaprezentować podstawy, które są dostępne zarówno w CSS jak i CSS2.

Podstawy

Używanie stylów css nie jest wcale trudne. W najbardziej prostej wersji (używanej przez nas) musimy zapoznać się z kilkoma faktami:

Każdy element HTML (tag) posiada atrybut style.
Css to tak naprawdę zestaw par atrybut : wartość; zakończonych średnikiem.
Pełny zestaw atrybutów jest dostępny pod adresem http://www.blooberry.com/indexdot/css/propindex/all.htm
Nazwa każdego atrybutu jest w języku angielskim
Przykład użycia : <td style="background-color: red;" ></td>

Przykłady praktyczne

Środkowanie tekstu w danym elemencie HTML.

Zakładając, że chcemy ustawić wyśrodkowany tekst w paragrafie (w poziomie) powinniśmy użyć poniższego kodu:

<!-- Przykład CSS -->
<html>
 <head>
  <title>[CSS] Przyklad 1</title>
 </head>
 <body>
  <p style="text-align:center;">
   Text który powinien zostać wyśrodkowany!
  </p>
 </body>
</html>

Umieszczenie elementów w danej odległości od prawej i górnej krawędzi

Jeśli chcemy, aby jakiś element był umieszczony w odstępie od innego elementu (sąsiadującego, bądź krawędzi zewnętrznego) powinniśmy użyć do tego właściwości margin.

<!-- Przykład 2 CSS -->
<html>
 <head>
  <title>[CSS] Przyklad 2</title>
 </head>
 <body>
  <p style="margin-left: 300px; margin-top: 100px; background-color:red; color: white;">
   Jest on 300px od lewej i 100px od gory. <br />
   Uzyto atrybutow css : <br />
   margin-left - lewy margines <br />
   margin-top - gorny margines <br />
   background-color - kolor tla <br />
   color - kolor czcionki <br />      
  </p>
 </body>
</html>

Ustalenie stałej szerokości elementu

Czasami chcielibyśmy aby dany element był danej szerokości, nie zmieniał jej, a treść której jest zbyt wiele mogła się np przewijać. W tym celu użyjemy nowego znacznika : DIV - znacznik ten to typowy kontener, w którym można osadzać inne elementy dokumentu HTML.

<!-- Przykład 3 CSS -->
<html>
 <head>
  <title>[CSS] Przyklad 3</title>
 </head>
 <body>
  <div style="width: 300px; height: 200px; display: block; background-color: black; color: green; overflow-x: hidden; overflow-y: scroll;">
   Taki o troche matrix  ╔♀Ebn��○•tÜ<br />
   Uzyto atrybutow css : <br />
   width - szerokosc (mozliwa w px i %) <br />
   height - wysokosc (j/w) <br />
   display - sposob wyswietlania elementow - ustawiono block, by DIV byl stalym blokiem  <br />
   color - kolor czcionki <br />
   background-color - kolor tla <br />
   overflow-x/y - przepelnienie kontenera, Ustawiono wartosci hidden, aby w poziomie byly one skrywane oraz scroll, aby w pionie mozna bylo przewijac. Chowane beda naprawdedlugiewyrazymajacepowyzej300pxszerokoscinieposiadajacespacjiwiecniemoznaichzlamac. <br/>
  </div>
 </body>
</html>

Praca domowa

Ostyluj swoją stronę internetową przy pomocy atrybutów CSS użytych w tym kursie oraz zawartych na stronie http://www.blooberry.com/indexdot/css/propindex/all.htm.

KONIEC CZĘŚCI PIERWSZEJ KURSU...

czwartek, 3 kwietnia 2014

HTML - Własny system powiadamiania o zamówieniu ? Nic prostszego!

O formularzach słów kilka.

Odwiedzając różne strony internetowe często spotykamy się z różnego rodzaju formularzami. Formularze mają specyficzne pola - do wprowadzania tekstu, wyboru, zaznaczenia wielokrotnego (kwadrat) oraz jednokrotnego (kółko), a także listy (rozwijanej czy też przewijanej). Każdy z tych elementów może okazać się przydatny w innym momencie. Standardowym sposobem wykorzystania formularzy są formularze kontaktowe lub formularze z zamówieniem i tym i ostatnimi dziś się zajmiemy.

Wprowadzenie - praktyczne zastosowanie.

Najczęściej spotykanym zastosowaniem formularzy jest formularz kontaktowy lub formularz logowania. Formularz taki można zobaczyć choćby tutaj: http://gs-web.pl/contact . W dzisiejszym tutorialu postaramy się stworzyć stronę internetową (opartą na tabeli) z formularzem zamówień, lecz najpierw trochę teorii:

Typy pól formularzy

<input /> - pole ogólne posiadające atrybuty jak poniżej:

type - typ pola. Może posiadać następujące wartości

radio - przycisk opcji (okrągły)
checkbox - pole wyboru (kwadracik który możesz zaznaczyć)
text - pole tekstowe
password - j/w lecz zakropkowane
submit - przycisk odpowiadający za zatwierdzenie formularza

name - nazwa pola (dostępna dla każdego typu formularza)
maxLength - maksymalna długość wpisanych znaków (text/password)
size - liczba znaków widocznych w polu (raczej text/password)
value - wartość pola (dla tekstowych - tekst wpisany, dla radio/checkbox wartość jaka zostanie przekazana po zaznaczeniu, dla submit - tekst wyświetlony)
checked - atrybut który przyjmuje wartość "checked". Oznacza, że standardowo zaznaczony będzie właśnie ten element. (radio/checkbox)
id - identyfikator. Na tym etapie nie ma większego zastosowania

<select></select> - lista rozwijana (pole kombi / combobox)

Atrybut name - nazwa pola (pozwala na identyfikację)
Znacznik <option></option>, umieszcza się dla każdej pozycji z listy rozwijanej. Musi zostać umieszczony między znacznikami <select></select>. Posiada atrybut value odpowiadający za wartość

<textarea></textarea> - pole do wpisywania większej ilości tekstu. Atrybuty to:

name - nazwa (do identyfikacji)
id
rows - ilość linii tekstu (widocznych)
cols - ilość znaków w linii (widocznych)

Wymienione powyżej to tylko niektóre (właściwie większość). Każdy z nich zaprezentuję w poniższym listingu.

Formularz oznacza się przy pomocy tagu <form></form> który posiada atrybuty:

action - będący jaką mają zostać wysłane dane ( zazwyczaj adres mailowy lub URL)
method - metoda przesłania danych:

GET - w adresie przeglądarki
POST - w tzw. sesji (niejawnie).

name
id
enctype - nas na razie będzie interesowała tylko wartość :"text/plain"

Idea jest taka, że metody GET używamy wtedy gdy pobieramy jakieś dane ze strony, a metody POST w wypadku wysyłania danych do strony (na maila itp). Nas będzie dotyczył tylko ten pierwszy przypadek.

Poniżej obiecany listing pokazujący wysyłanie danych na adres email w postaci czystej (bez obróbki).

<!-- przyklad_8_1.html -->
<html>
 <head>
  <title>Szablon zawierający formularz</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 </head>
 <body>
  <center>
   <!-- Formularz-->   
   <form method="post" action="mailto:twoj.mail@gmail.com?subject=Zamówienie" enctype="text/plain">
    <fieldset>
     <legend>Dane główne</legend>
     Imię: <input type="text" name="imie" value="" size="32" maxLength="32" /><br />
     Nazwisko: <input type="text" name="password" value="" size="32" maxLength="32" /><br />
     Tajne hasło: <input type="password" name="haslo" value="" size="32" maxLength="32" /><br />
     Płeć: Kobieta <input type="radio" name="plec" value="K" /> Mężczyzna <input type="radio" name="plec" value="M" /><br />
    </fieldset>
    <fieldset>
     <legend>Dane teleadresowe</legend>
     Kraj pochodzenia: 
      <select name="kraj">
       <option value="PL">Polska</option>
       <option value="EN">Anglia</option>
       <option value="GB">Niemcy</option>
       <option value="CZ">Czechy</option>
       <option value="UA">Ukraina</option>
       <option value="FR">Federacja rosyjska</option>
      </select><br />
     Numer telefonu: <input type="text" name="numer_telefonu" value="" size="32" maxLength="32" /><br />          
    </fieldset>
    <fieldset>
     <legend>Krótki komentarz tekstowy</legend>
     <textarea name="Komentarz" rows="16" cols="64"></textarea>      
    </fieldset>
    <fieldset>
     <legend>Warunki/postanowienia</legend>
     <p><input type="checkbox" name="zgoda" value="" size="32" maxLength="32" /> Wyrażam zgodę, na przetwarzanie danych osobowych, itd.</p>     
    </fieldset>
    <input type="submit" name="submit" value="Wyślij" /><br />
   </form>
  </center>
 </body>
</html>

Kompletny materiał na temat formularzy można znaleźć pod adresem: http://www.kurshtml.edu.pl/html/formularze.html.

Praca domowa:

Stwórz powyższy formularz podając swój adres email. Porównaj wartości z pól value oraz te z pomiędzy znaczników. Czy widzisz różnice (między wartościami z maila a widocznymi dla klienta strony).
Posiadając dotychczasową wiedzę stwórz stronę internetową która będzie miała 5 zakładek:

O mnie
O firmie
Oferta
Galeria zdjęć
Kontakt

Każdą z podstron uzupełnij o adekwatną zawartość. Galeria zdjęć to strona na której są osadzone zdjęcia, Kontakt - to formularz kontaktowy dostosowany do profilu Twojej prawdziwej (lub zmyślonej) firmy.

Powodzenia!

poniedziałek, 17 września 2012

HTML - Zawody mistrzostw świata – zróbmy tabelę!

Trochę wstępu

Dawno, dawno temu, za siedmioma górami, za siedmioma lasami żył sobie internet. No i ten internet to był bardzo młody i taki hmmm… Nie wiedział za wiele. Brak mu było doświadczenia. Ciężko mu było zdefiniować się. Powstawały w tym czasie przeglądarki. Oczywiście każda musiała obowiązkowo mieć własne standardy i własną interpretację pewnych zdarzeń, znaczników itp. No i zapanował chaos wśród stron internetowych. I wtedy głos jednego przemówił, i tak oto rzekł:

- Zrobimy przeglądarki graficzne!

I chór się podniósł i wszyscy zgodnie wiwatowali. Niedługo jednak potem zaczęły powstawać problemy – jak organizować dane na stronach… I byli wśród nich starzy i młodzi, mędrcy oraz głupy takie, że o matko polskie społeczeństwo dni dzisiejszych by się nie powstydziło. Niemniej jednak były to burzliwe czasy. Jeden z mędrców powiedział – ZRÓBMY RAMKI! I tak też się stało, zaczęto budować strony internetowe które przypominały … Na pewno nie dzisiejsze portale. Powiem tylko, że co ładniejsze strony wyglądały naprawdę nieźle. Ale ciężko było organizować dane w ramkach. I widzieli ludzie, że ramki były brzydkie. Wtem jeden z nich, szlachetny Mietek z Mietkowa rzekł:

- Od dziś, żaden informatyk nie użyje ramki, która będzie wrogiem jego, która będzie wirusy zagnieżdżać na jego witrynach, a informatyk zniszczy ramkę i nikt już nie poważy się jej użyć. W zamian informatyk pochyli się przed tabelą i to ją miłować będzie od dziś aż po wsze czasy.

Tak też się stało, ale nie do końca.

Tabela - dobra praktyka dawnych lat

Tabeli używano tak jak i dziś, do przedstawiania wyników, do robienia zestawień, czy też cenników na stronach internetowych. Z czasem jednak tabele zaczęły przybierać na znaczeniu jako dobre kontenery użytkowe do gromadzenia treści. Przykład ten obrazuje poniższy fragment kodu:

<!-- przyklad_7_1.html -->
<html>
 <head>
   <title>Przyklad 1 rozdział 7.</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 </head>
 <body>
   <table border="1">
     <tr><td>-</td><td>1</td><td>2</td><td>3</td></tr> <!-- Wiersz pierwszy -->
     <tr><td>1</td><td>1;1</td><td>1;2</td><td>1;3</td></tr> <!-- Wiersz drugi -->
     <tr><td>2</td><td>2;1</td><td>2;2</td><td>2;3</td></tr> <!-- Wiersz trzeci -->
     <tr><td>3</td><td>3;1</td><td>3;2</td><td>3;3</td></tr> <!-- Wiersz czwarty -->
   </table>
 </body>
</html>

Powyższy przykład ukazuje samą idee tabelki. Tabelka jak każda inna, czyż nie ? Jeśli jeszcze tego nie widzisz, odpal powyższy przykład. Czas, aby poznać części składowe tego oto tworu.

<table> </table> - Początek i koniec całego ciała tabeli. Może posiadać różne atrybuty, takie jak wysokość etc. Tabela składa się z wierszy.
<tr> </tr> - Początek i koniec danego wiersza. Może posiadać różne atrybuty. Elementem wiersza może być tylko komórka.
<td> </td> - Początek i koniec komórki. Komórka jako cząstka elementarna (podstawowa) tabeli może także posiadać różne atrybuty. W niej umieszcza się tekst, wideo, obrazki, etc.

Atrybuty dodatkowe:

<table border=”x”> – border określa grubość (px) obramowania tabeli (ang border - obramowanie).
<table align=”x”> – align określa to, w jakiej pozycji ma być tabelka względem strony tj. wyrównana do: lewej, środka, prawej(left, center, right).
<table cellspacing=”x”> – ten atrybut określa odstępy między kolejnymi komórkami (ang. cell - komórka ; space - miejsce).
<table cellpadding=”x”> – atrybut określa padding (odstęp wewnętrzny) od krawędzi w komórkach tabeli.
<table width=”x”> – width (ang. width – szerokość) jest to atrybut, przyjmujący wartość w pixelach. Ustala szerokość tabeli.
<table height=”x”> – width (ang. height – wysokość) jest to atrybut, przyjmujący wartość j/w. Ustala wysokość tabeli.
<table bgcolor=”x”> – bgcolor (ang. background – tło) ustala kolor tła tabeli. Wartość może zostać podana w języku angielskim lub w trybie szesnastkowym (http://lmgtfy.com/?q=Tester+kolor%C3%B3w+hex - pierwszy link).
<td colspan=”x”> – col (ang. column -kolumna) span (ang. span – rozpiętość). Rozpiętość kolumny. x jest tu ilością komórek scalonych w jednym WIERSZU.
<td rowspan=”x”> – row (ang. row – wiersz). Rozpiętość wierszy. X jest tu ilością komórek scalonych w danej KOLUMNIE

Przykłady zastosowania:

1. Tabela wyników rozgrywek ligi mistrzów:

<!-- przyklad_7_2.html -->
<html>
  <head>
    <title>Liga mistrzów</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <table border="1" align="center" bgcolor="yellow">
      <tr><td>Lp.</td><td>T1</td><td>T2</td><td>W</td><td>PKT</td></tr> <!-- Wiersz pierwszy -->
      <tr><td>1</td><td>ManU</td><td>Real Madryt</td><td>3:1</td><td>2</td></tr> <!-- Wiersz drugi -->
      <tr><td>2</td><td>Chelsea</td><td>FC Barcelona</td><td>2:3</td><td>2</td></tr> <!-- Wiersz trzeci -->
      <tr><td>3</td><td>Bayern Munch</td><td>FC Porto</td><td>3;3</td><td>1</td></tr> <!-- Wiersz czwarty -->
    </table>
  </body>
</html>

2. Tabela z indeksu

<!-- przyklad_7_3.html -->
<html>
  <head>
    <title>Tabela z indeksu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <table border="1" width="800">
      <tr><td colspan="5"> Semestr I </td></tr>
      <tr><td rowspan="2" width="200">Imię i Nazwisko</td><td rowspan="2" width="100">Podpis</td><td colspan="3" width="500">Wyniki</td></tr>
      <tr><td width="166">Zal.</td><td width="166">Egz.</td><td width="166">XYZ.</td></tr>
      <tr><td>mgr. Wojciech Burczymucha</td><td></td><td>4</td><td></td><td></td></tr>
      <tr><td>dr. Paweł Kiszczał</td><td></td><td></td><td>5</td><td></td></tr>
      <tr><td>prof. Stasiek Ogórski</td><td></td><td></td><td></td><td>3.5</td></tr>
    </table>
  </body>
</html>

3. Jakaś strona internetowa

<!-- przyklad_7_4.html -->
<html>
  <head>
    <title>Szablon strony internetowej</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <table border="1" width="1024" height="700" align="center">
      <tr><td colspan="3" height="200"> BANNER </td></tr>
      <tr><td width="262">MENU</td><td width="500">ŚRODEK STRONY</td><td width="262">MENU</td></tr>
      <tr><td colspan="3" height="20">STOPA</td></tr>
    </table>
  </body>
</html>

Praca domowa:

Na podstawie informacji z tego rozdziału oraz z rozdziałów poprzednich spróbuj zaprojektować stronę internetową portalu z informacjami sportowymi. (lub jakiegokolwiek innego)
Zrób tabelę o takich atrybutach:

Pierwszy wiersz – jedna komórka
Drugi wiersz 2 komórki, z czego ostatnia składa się z 4 komórek, dwóch w pionie 2 w poziomie
Trzeci wiersz – dwie komórki z czego pierwsza składa się z 2 komórek w poziomie a druga pochodzi z poprzedniego punktu.
Czwarty wiersz – cztery komórki z czego pierwsza z komórek składa się z dwóch w pionie.
Szerokość tabeli: 800
Wysokość tabeli: 440
Kolor tła: czerwony
Grubość obramowania: 3
Każda komórka powinna zawierać jedno dowolne słowo
Słowo powinno być w odległości 2 px od krawędzi każdej komórki
Tabela powinna być wycentrowana

Przeczytaj artykuł ponownie :)

Powodzenia!

poniedziałek, 10 września 2012

HTML - Po nitce do kłębka – linki, łącza, hovery jak kto woli.

Linki, łącza

Witaj! Jeśli to czytasz to znaczy, że potrzebujesz podstawowych informacji dotyczących linków. Linki (odnośniki) to bardzo ważny temat jeśli chodzi o strony internetowe. W końcu bez nich nie można by było przechodzić pomiędzy podstronami itd.

Linki zewnętrzne

Wyobraźmy sobie, że chcemy zrobić odnośnik na naszej stronie internetowej pod adres http://wp.pl. Chcemy także, aby linkiem był tekst Wirtu@lna Polska. Aby zrealizować to zadanie powinniśmy umieścić na naszej stronie kod podobny do tego:

<a href="http://wp.pl"> Wirtu@lna Polska </a>

Jak widzimy, znacznikiem odpowiedzialnym za umieszczenie linku jest znacznik <a > </a>. Czymże jednak byłby ten znacznik bez odpowiedniego atrybutu href .

Wartość atrybutu href wskazuje nam miejsce do jakiego kieruje link. Może to być np. jak w przykładzie powyżej strona internetowa Czas na jakiś inny przykład:

<!-- przyklad_6_1.html -->
<html>
<head>
   <title>Przyklad 1 rozdzial 6.</title>

   <meta http-equiv="Content-Type" content="text/html; charset:UTF-8" />
 </head>
 <body>
   To jest zwykły tekst <br />
   <a href="http://wp.pl">A to jest link do Wirtu@lnej Polski :) </a> <br />
 </body>
</html>

To by było tyle na temat odnośników do stron zewnętrznych Czas na drugi typ :) - odnośniki wewnętrzne.

Linki wewnętrzne, lokalne, nazywaj je jak chcesz.

Są to odnośniki do naszych podstron. Zakładając, że mamy stronę internetową o nazwie index.html na której mamy jakąś główną treść i podstronę o_mnie.html przeanalizujmy poniższy przykład:

<!-- index.html -->
<html>
 <head>
   <title>Przyklad 2 rozdzial 6. - Strona główna</title>

   <meta http-equiv="Content-Type" content="text/html; charset:UTF-8" />
 </head>
 <body bgcolor="red">
   <center><a href="index.html"> Strona główna - czerwona </a> | <a href="o_mnie.html"> Podstrona o mnie - żółta </a></center>
   <br />
   <br />
   To jest jakaśtam treść bla bla bla bla bla <br />
 </body>
</html>

<!-- o_mnie.html -->
<html>
<head>
   <title>Przyklad 2 rozdzial 6. - Podstrona</title>

   <meta http-equiv="Content-Type" content="text/html; charset:UTF-8" />
 </head>
 <body bgcolor="yellow">
   <center><a href="index.html"> Strona główna - czerwona </a> | <a href="o_mnie.html"> Podstrona o mnie - żółta </a></center>
   <br />
   <br />
   A tu kilka słów o mnie co chciałem wam przekazać zonk :D<br />
 </body>
</html>

Oczywiście należy pamiętać o kilku rzeczach:

<a href="index.html"> oznacza adres bezwzględny pliku strony internetowej. O adresach bezwzględnych było więcej przy lekcji o znacznikach <IMG>.
Jeśli jedna ze stron jest podstroną, powinna mieć taki sam układ, ze względów etycznych.
Podstrona powinna się różnić tylko treścią docelową.
Tytuł pliku strony internetowej powinien opisywać jej zawartość.
Strona główna zawsze nosi nazwę index.html.

Kotwice

Znacznik <A> kojarzy się słusznie z ang. słowem anchor - kotwica. Kotwica, kotwiczenie te pojęcia kojarzą się z zaczepianiem. Jeśli zaczepisz o coś łańcuch, dotrzesz po łańcuchu do tego. Z kolei łańcuch kojarzy się z liną, lina z linką, linka z linkiem :] I tak o to mamy skojarzenie. Anchor <A> jest to znacznik linku. Kotwica jest odnośnikiem do miejsca na stronie. Nie przekierowuje ani na Twoją podstronę, ani na stronę zewnętrzną, ale do konkretnego punktu na Twojej stronie. Jak to działa ? Już pokazuję :)

Po 1. Każda kotwica ma punkt zaczepienia, po 2. Każda kotwica ma Odnośnik, który po kliknięciu przenosi nas do tego punktu. W praktyce wygląda to w sposób następujący:

<html>
<head>
<title>Przyklad 3 rozdzial 6. - Strona główna</title>

Nam lacus leo, tristique vitae ultrices vitae, dictum ac lectus. Nam felis sapien, feugiat sed eleifend eget, condimentum ac magna. Vestibulum vestibulum, arcu sollicitudin malesuada lobortis, quam nunc lacinia diam, ut laoreet neque nisi a felis. Integer pretium viverra enim, id gravida metus suscipit et. Fusce luctus laoreet condimentum. Fusce hendrerit tortor ut metus sollicitudin semper ullamcorper magna bibendum. Morbi sollicitudin viverra porttitor. Fusce convallis volutpat nulla nec interdum.
Nam lacus leo, tristique vitae ultrices vitae, dictum ac lectus. Nam felis sapien, feugiat sed eleifend eget, condimentum ac magna. Vestibulum vestibulum, arcu sollicitudin malesuada lobortis, quam nunc lacinia diam, ut laoreet neque nisi a felis. Integer pretium viverra enim, id gravida metus suscipit et. Fusce luctus laoreet condimentum. Fusce hendrerit tortor ut metus sollicitudin semper ullamcorper magna bibendum. Morbi sollicitudin viverra porttitor. Fusce convallis volutpat nulla nec interdum.
Nam lacus leo, tristique vitae ultrices vitae, dictum ac lectus. Nam felis sapien, feugiat sed eleifend eget, condimentum ac magna. Vestibulum vestibulum, arcu sollicitudin malesuada lobortis, quam nunc lacinia diam, ut laoreet neque nisi a felis. Integer pretium viverra enim, id gravida metus suscipit et. Fusce luctus laoreet condimentum. Fusce hendrerit tortor ut metus sollicitudin semper ullamcorper magna bibendum. Morbi sollicitudin viverra porttitor. Fusce convallis volutpat nulla nec interdum.
Nam lacus leo, tristique vitae ultrices vitae, dictum ac lectus. Nam felis sapien, feugiat sed eleifend eget, condimentum ac magna. Vestibulum vestibulum, arcu sollicitudin malesuada lobortis, quam nunc lacinia diam, ut laoreet neque nisi a felis. Integer pretium viverra enim, id gravida metus suscipit et. Fusce luctus laoreet condimentum. Fusce hendrerit tortor ut metus sollicitudin semper ullamcorper magna bibendum. Morbi sollicitudin viverra porttitor. Fusce convallis volutpat nulla nec interdum.
Nam lacus leo, tristique vitae ultrices vitae, dictum ac lectus. Nam felis sapien, feugiat sed eleifend eget, condimentum ac magna. Vestibulum vestibulum, arcu sollicitudin malesuada lobortis, quam nunc lacinia diam, ut laoreet neque nisi a felis. Integer pretium viverra enim, id gravida metus suscipit et. Fusce luctus laoreet condimentum. Fusce hendrerit tortor ut metus sollicitudin semper ullamcorper magna bibendum. Morbi sollicitudin viverra porttitor. Fusce convallis volutpat nulla nec interdum.
Nam lacus leo, tristique vitae ultrices vitae, dictum ac lectus. Nam felis sapien, feugiat sed eleifend eget, condimentum ac magna. Vestibulum vestibulum, arcu sollicitudin malesuada lobortis, quam nunc lacinia diam, ut laoreet neque nisi a felis. Integer pretium viverra enim, id gravida metus suscipit et. Fusce luctus laoreet condimentum. Fusce hendrerit tortor ut metus sollicitudin semper ullamcorper magna bibendum. Morbi sollicitudin viverra porttitor. Fusce convallis volutpat nulla nec interdum.

Maecenas ac dui vitae lectus lobortis commodo non quis velit. Suspendisse ut augue adipiscing nulla tristique dictum. Aenean nec magna nibh, sit amet faucibus turpis. Duis quis faucibus urna. Aliquam viverra sollicitudin nisi, id vehicula augue eleifend ac. Aliquam risus massa, semper eu placerat eget, pulvinar non urna. Vivamus enim mi, pellentesque nec convallis vitae, sollicitudin sed diam. Donec rutrum dignissim quam nec sagittis.

Cras suscipit egestas mi, ac volutpat nisl porttitor sit amet. Proin vitae urna ut odio facilisis lacinia. Integer nec dui est, id ultrices libero. Integer eu massa nunc, a vulputate magna. Nunc ipsum ante, aliquet nec convallis et, fringilla nec justo. Integer imperdiet fringilla erat. Donec ante lectus, malesuada id interdum et, interdum sit amet neque. Morbi blandit eros sed lectus adipiscing eget porta odio mollis. Etiam auctor sem in diam ultrices vulputate vestibulum eros posuere. Praesent nunc quam, consectetur et auctor blandit, iaculis a lacus. Suspendisse non semper purus. Cras eu porttitor <a name="koniec">sem.</a>
</body>
</html>

Nas interesują tylko 2 fragmenty.

<a href=”#nazwa”>Link do punktu zaczepienia</a>
<a name=”nazwa”>Punkt zaczepienia </a>

Jak widzisz w linku nazwe umieszczamy z wcześniejszym znakiem hash.
To na tyle jeśli chodzi o linki. Więcej informacji w rozdziale drugim.

Praca domowa

Odpowiedz na poniższe pytania

Czym jest link.
Czym jest kotwica.

Napisz stronę internetową o Twoim hobby, tak by zawierała 3 podstrony.
Dodaj do tej strony 3 sekcje, do których dodasz kotwice.

Powodzenia!

sobota, 8 września 2012

HTML - Obrazki, multimedia

Trochę o kolorach i grafice

Witaj po raz kolejny. Dziś rozmawiali będziemy na temat wstawiania multimediów na stronie internetowej. Zacznijmy od najprostszych tj. jak wstawić tło na stronie:)

Tło na stronie można ustawić jako jednolity kolor lub jako grafikę. Popatrzmy na poniższe przykłady:

<!-- przyklad_4_1.html -->
<html>
  <head>
    <title>Przykład 1 rozdział 4.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body bgcolor="red">
    To jest strona w kolorze czerwonym
  </body>
</html>

<!-- przyklad_4_2.html -->
<html>
  <head>
    <title>Przykład 2 rozdział 4.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body background="http://www.wp.pl/i/ivar/F/201109/1317123607.png">
    To jest strona z obrazkiem WP w tle :p
  </body>
</html>

Widzimy tu dwa przykłady. W pierwszym ustalamy kolor tła za pomocą atrybutu bgcolor znacznika body. Na drugim ustalamy grafikę tła za pomocą atrybutu background tego samego znacznika. Jak widać jest to bardzo proste. Gdyby w drugim przypadku chodziło nam o grafikę na serwerze należałoby podać ścieżkę bezwzględną.

Przyjmijmy teraz, że mamy katalog główny HTML. W tym katalogu mamy różne katalogi, między innymi katalog GRAFIKA. W katalogu HTML umieszczamy plik index.html w którym chcemy aby tłem była grafika z katalogu GRAFIKA. Drzewo katalogów wygląda tak

HTML
|-index.html
|–GRAFIKA
| |
| |_ _ moja_grafika.jpg
|
…

Ścieżka do naszego pliku wygląda więc następująco : GRAFIKA/moja_grafika.jpg. Całość prezentuje się więc tak:

<body background=”GRAFIKA/moja_grafika.jpg”>

Nauczyliśmy się więc już jak wstawiać tło na stronę. A co gdyby sytuacja była odwrotna a drzewo katalogów wyglądałoby tak:

UPPER
|–HTML
| |
| |_ _ index.html
|
|–GRAFIKA
| |
| |_ _ moja_grafika.jpg
|
…

W tym momencie musimy użyć operatora “..” który mówi nam “PRZEJDŹ DO FOLDERU NADRZĘDNEGO”. Ścieżka do pliku moja_grafika.jpg wyglądała by tak:

../GRAFIKA/moja_grafika.jpg

a całość:
<body background=”../GRAFIKA/moja_grafika.jpg” >

Teraz umiemy także tworzyć ścieżki do plików BRAWO!

Wstawianie grafiki

Oprócz grafiki tła możemy także na stronie umieszczać różnorakie zdjęcia. Służy do tego znacznik IMG. Posiada on następujące atrybuty:

- src – ścieżka do obrazka, może być na serwerze zewnętrznym lub lokalnym,
- width – opcjonalnie, jeśli chcemy aby grafika miała inną szerokość niż w rzeczywistości (w pixelach),
- height – opcjonalnie, jeśli chcemy aby grafika miała inną wysokość niż w rzeczywistości (w pixelach).

Całość natomiast wygląda w sposób następujący:

<img src="ścieżka_do_obrazka" width="szerokość" height="wysokość" />

Widzimy też, że img nie posiada znacznika </img> zamykającego. Sam w sobie jest znacznikiem domykającym. Czas na jakiś przykład:

<!-- przyklad_4_3.html -->
<html>
  <head>
    <title>Przykład 3 rozdział 4.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <img src="http://www.ripplants.nl/images/Ananasvrucht.jpg" /><br />
    To jest zdjęcie w normalnej rozdzielczości, a poniżej zdjęcie z ustaloną przeze mnie:<br />
    <img src="http://www.ripplants.nl/images/Ananasvrucht.jpg" width="500" height="600" /><br />
   </body>
</html>

Możemy także wstawiać dowolny film za pomocą znacznika embed. Nie jest to jednak zalecane, więc przedstawię inną (lepszą ?) metodę.

UMIESZCZANIE WIDEO

Aby umieścić wideo na stronie musimy wykonać poniższe kroki

Założyć konto na youtube
Zuploadować (wrzucić) na serwer yt. za pomocą naszego konta konkretny filmik jaki chcemy umieścić na naszej stronie
Wejść na stronę tego filmiku na youtube.
Kliknąć w przycisk UDOSTĘPNIJ
Kliknąć w przycisk UMIEŚĆ
Pojawi się kod podobny do tego:1 <iframe width="560" height="315" src="http://www.youtube.com/embed/9Xy2InXXIkk" frameborder="0" allowfullscreen></iframe>

Przekopiować ten kod i umieścić w dowolnym miejscu w sekcji BODY

Umieszczanie tła muzycznego

Umieszczanie tła muzycznego jest niezalecane. Aby to zrobić można użyć standardu IE lub technologii FLASH. Niemniej jednak, FLASH nie jest tematem tego kursu, a korzystanie ze standardu IE w pisaniu stron internetowych pod wiele przeglądarek jest niewskazane, gdyż nie działałoby to zapewne poprawnie. Tak więc nie należy umieszczać tła muzycznego i nie zostanie przedstawione tu nic co ma z tym cokolwiek wspólnego (inną rzeczą jest to, że można to zrobić w sposób identyczny jak umieszczenie wideo na stronie).

PRACA DOMOWA

Utwórz stronę internetową na której umieścisz obraz “Słoneczniki” znaleziony w google. Do powyższych słoneczników dodaj stosowny opis. Postaraj się w sposób szczegółowy wyróżnić Autora, Rok powstania oraz najważniejsze informacje. Informacje możesz zasięgnąć z wikipedii.
Utwórz stronę na której umieścisz dowolne wideo. Postaraj się aby miała tematyczne tło i znalazła się na niej jakaś konkretna treść.

Powodzenia!

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:

Przejście do nowej linii (?)
Zmiana koloru czcionki
Zmiana typu czcionki
Zmiana wielkości czcionki
Pozycjonowanie - wyrównanie kolejno do lewej, środka, prawej, justowanie.
Pochylenie, pogrubienie, podkreślenie - formatki
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:

<u>Tekst który w żaden sposób nie może zostać pominięty wzrokiem - jest podkreślony</u>
<i>Tekst, który mógłby uchodzić za jakiś cytat - jest pochylony</i>
<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

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 strofa była po lewej,
druga po środku,
trzecia po prawej,
pierwszy werset czwartej był pogrubiony,
drugi podkreślony,
trzeci pochylony,
czwarty pozostaw bez zmian.

Zmień kolor czcionki tak, aby każda strofa (zwrotka) była innego koloru.
Napisz własną stronę internetową o dowolnej tematyce wykorzystując wiedzę z tej oraz poprzednich lekcji.
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!

niedziela, 2 września 2012

HTML - Nagłówek, czyli to co tygryski lubią najbardziej.

Header - o konfiguracji słów kilka.

Strefa nagłówka – sekcja nagłówkowa – <head></head> – to tak w skrócie. Dlaczego ta sekcja jest tak istotna dla nas ? Oto kilka powodów:

Tytuł strony wyświetlany na pasku przeglądarki. Jest ustalany za pomocą znacznika <title>Tu wpisz tytuł</title>.

<!-- przykład_2_1.html -->
<html>
 <head>
      <title>Moja przykładowa strona - Tytuł </title>
 </head>
 <body>
      A tu mamy treść strony.
 </body>
</html>

Kodowanie strony jest to zestaw znaków zastosowany na danej stronie. Co to takiego ? Po krótce jest to taki “alfabet” wykorzystywany na stronie. Czas na trochę historii. Na początku gdy powstawały komputery, systemy ludzie marzyli o tym aby każdy mógł porozumiewać się z komputerem w swoim własnym języku. Jednak było to wtedy trudne do zrealizowania. Postanowiono więc wprowadzić standard jakim był oczywiście alfabet łaciński (jakżeby inaczej…). Ten standard nazwano ASCII. Z czasem jednak możliwości były coraz większe więc wprowadzono UNICODE. UNICODE jest to taki standard, który ma obsługiwać wszystkie litery wszystkich języków na całym świecie, czyli polskie ogonki, niemieckie umlauty itd. Mimo wszystko jednak nie jest on jeszcze aż tak standardowy aby każda strona go używała. W pozostałościach więc po poprzedniej epoce została składnia pozwalająca na wybór jednego z kilku kodowań (zestawów znaków) których będziemy używali. Nas oczywiście interesuje możliwość wypisywania na swojej stronie ogonków ą, ę, ć, ś, ź, ż.

Oto lista najczęściej używanych kodowań:
Radzę odwiedzić wikipedię i poczytać o ASCII, UNICODE, Windows-1250, ISO-8859-2, UTF-8. Nie jest to jednak niezbędne by dalej uczyć się z poniższego kursu.
```

<html>
 <head>
      <title>Moja strona z kodowaniem standardowym</title>
 </head>
 <body>
      ą,ę,ć,ś,ź, ściółka, ćma, ścinki, żyrafa
 </body>
</html>
```
```

<html>
 <head>
      <title> To jest moja strona z kodowaniem UTF-8</title>

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

 </head>
 <body>
      Gżegżółka na ściółce siedziała i świergoliła radośnie o dżdżystym deszczu.
 </body>
</html>
```
Odpal powyższe przykłady i sprawdź. Według zamierzenia pierwszy plik powinien pojawić się z "krzaczkami", a drugi z pięknymi polskimi ogonkami.
Style
Skrypty Javascript.

Ta sekcja posiada także inne funkcje jak miniaturka strony itp. O tym jednak będziemy mówić w części drugiej całego kursu.

PODSUMOWANIE:

Zalety sekcji HEAD

Możliwość ustawienia tytułu : <title>przykładowy tytuł strony </title>
Możliwość wyświetlania polskich znaków : <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
Style, skrypty javascript, inne kosmetyczne drobnostki takie jak info o autorze itp.

Praca domowa:

Odszukaj w internecie (nie wikipedia) wyjaśnienia określenia sformuowania: Strona kodowa. Co to takiego?
Podaj 3 zalety sekcji HEAD – z pamięci, nie zerkaj do kursu.
Napisz własną stronę HTML w której umieścisz jakąś myśl (koniecznie z polskimi znakami). Zapisz jako PD_3_1.html

Powodzenia!