- PDF Darmowe pobieranie

Wielkość: px

Rozpocząć pokaz od strony:

Download "www.fwrl.pl/szkolenie"

Konrad Czech
8 lat temu
Przeglądów:

1 STRONA MS WORD

2 HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML

3 HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa prezentacyjna jak ma wyglądać) HTML

4 STRUKTURA <xx> - znacznik otwierający </xx> - znacznik zamykający np. <h1>to jest tytuł mojej strony</h1> <xx/> - znacznik otwierająco-zamykający np. <br/> lub <hr/> HTML

5 TYPOWE ZNACZNIKI h1,h2...h6 - znacznik nagłówka p - znacznik akapitu span znacznik sekcji a - znacznik linku img znacznik obrazka div znacznik pudełka HTML

6 PRZYKŁADOWA SKŁADNIA <p>to jest akapit</p> <img width="580" height="200" alt= Obrazek title= Obrazek src= images/header4.jpg /> <a href=" Inicjatywa </a> HTML

7 TAGI W TAGACH <a href=" Inicjatywa </p></a> <a href=" width="580" height="200" alt= Obrazek title= Obrazek src= images/header4.jpg /> <p>fwrl Inicjatywa </p></a> HTML

8 ĆWICZENIE Uruchom program Notatnik i zapisz nowy dokument jako test1.html Utwórz paragraf z tekstem Mój tytuł Wstaw obrazek GM-PIC01.jpg Zapisz zmiany Otwórz w przeglądarce HTML

9 ĆWICZENIE - rozwiązanie <p >Mój tytuł</p> <img width="480" height="360" alt= Obrazek title= Obrazek src='gm-pic01.jpg'/> HTML

10 selektor klasa, identyfikator, tag właściwość element formatujący wartość wartość elementu formatującego

11 SKŁADNIA selektor { właściwość: wartość; } selektor { właściwość: wartość; właściwość: wartość; } selektor, selektor { właściwość: wartość; }

12 TYPOWE WŁAŚCIWOŚCI font-family rodzina czcionek (Arial, Tahoma, Sans itp.) font-size rozmiar czcionki (np. 20px lub 1.1em) color kolor tekstu (red, blue itp. lub szesnastkowo #0F56ff) text-align wyrównywanie tekstu (justify, left, right, center)

13 TYPOWE WŁAŚCIWOŚCI margin margines na zewnątrz obiektu padding odstęp wewnątrz obiektu

14 TYPOWE WŁAŚCIWOŚCI border krawędź obiektu; ze względu na konstrukcję można podać wartości w jednym wierszu, np. border: 1px solid red; co zastępuje: border-color: red; border-style: solid; border-width: 1px; Każda krawędź może być wyszczególniona poprzez wskaźnik top, left, right, bottom

15 TYPOWE WŁAŚCIWOŚCI border -radius zaokrąglenie rogów border-radius: 15px; albo border-radius: 10px 5px 15px 20px; natomiast border-width: 10px 5px 15px 20px; zastępuje: border-top: 10px; border-right: 5px; border-bottom: 15px; border-left: 20px;

16 WYWOŁYWANIE W KODZIE Właściwości danego znacznika określamy stosując parametr style <p style= font-family: Tahoma; font-size: 20px; >Mój tekst</p>

17 ĆWICZENIE W swoim dokumencie utwórz: 1. Nagłówek h1 zawierający tytuł dokumentu wyświetlany na środku czcionką Sans o wysokości 30px 2. dwa wyjustowane akapity w kolorze czarnym, jeden czcionką 14px, drugi czcionką 2.0em z rodziny Tahoma 3. Zaokrąglij w obrazku lewy górny i prawy dolny róg promieniem 15px

18 ĆWICZENIE - rozwiązanie <h1 style="font-size: 30px; font-family: Sans; color: red; text-align: center;">mój tytuł</h1> <p style="font-size: 14px; font-family: Tahoma; color: black; text-align: justify;">akapit 1</p> <p style="font-size: 2.0em; font-family: Tahoma; color: black; text-align: justify;">akapit 1</p> <img style="border-radius: 35px 0px 35px 0px" width="480 height="360" alt= Obrazek title= Obrazek src='gm-pic01.jpg'/>

19 ĆWICZENIE W swoim dokumencie utwórz: 1. Dodaj do obrazka szarą (grey) krawędź o grubości 4px 2. Opcjonalnie dodaj cień (box-shadow: 5px 10px 10px black) 3. Utwórz z obrazka i tekstu FWRL link do strony 4. Link ma otwierać stronę w nowej zakładce (target="_blank ) 5. Dodaj margines dolny 30px

20 ĆWICZENIE W swoim dokumencie utwórz: 1. Utwórz klasy i identyfikatory tam gdzie jest to konieczne 2. Przenieś definicje styli do definicji klas i identyfikatorów a w ich miejsce zastosuj odpowiednie klasy lub identyfikatory Podpowiedź: wykorzystaj tagi <style></style> i tam umieść definicje klas i identyfikatorów

21 ĆWICZENIE rozwiązanie <style> 1 2 h1 { font-size: 30px; font-family: Sans; color: red; text-align: center; } p { font-family: Tahoma; color: black; } #akapit1{ font-size:14px; text-align: justyfy; } #akapit2{ font-size:2.0em; text-align: justyfy; } #akapit3{ text-align:right; } 3.obrazek{ border: 4px solid grey; border-radius: 35px 0px 35px 0px; box-shadow: 5px 10px 10px black; margin-bottom:30px;" width:480; height:360; } </style> <h1>mój tytuł</h1> <p id="akapit1">akapit 1</p> <p id="akapit2">akapit 2</p> <p id="akapit3"><a href=' target="_blank" title="fwrl" alt="fwrl"><img class="obrazek" alt= Obrazek title= Obrazek src='gm-pic01.jpg'/><br/>fwrl</p></a>

22 ĆWICZENIE W swoim dokumencie utwórz: Dodaj więcej akapitów i obrazków i przypisz im klasy Zmieniaj wartości właściwości w klasach, Zwróć uwagę na właściwości width i height Opcjonalnie zamknij akapity w pudełka ( div ) i ostyluj dodając krawędź i marginesy wraz z dopełnieniem

23 PRZYDATNE STRONY webmaster.helion.pl/kurshtml HTML/

Podobne dokumenty

Krok 1: Stylizowanie plakatu

Krok 1: Stylizowanie plakatu HTML & CSS 1 Wanted! Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy