Write Less - Do more: 2014

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...

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!

Write Less - Do more

wtorek, 13 maja 2014

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