STRONA www.fwrl.pl/szkolenie MS WORD
HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML
HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa prezentacyjna jak ma wyglądać) HTML
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
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
PRZYKŁADOWA SKŁADNIA <p>to jest akapit</p> <img width="580" height="200" alt= Obrazek title= Obrazek src= images/header4.jpg /> <a href="http://fwrl.pl/">fwrl Inicjatywa </a> HTML
TAGI W TAGACH <a href="http://fwrl.pl/"><p>fwrl Inicjatywa </p></a> <a href="http://fwrl.pl/"><img width="580" height="200" alt= Obrazek title= Obrazek src= images/header4.jpg /> <p>fwrl Inicjatywa </p></a> HTML
Ć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
ĆWICZENIE - rozwiązanie <p >Mój tytuł</p> <img width="480" height="360" alt= Obrazek title= Obrazek src='gm-pic01.jpg'/> HTML
selektor klasa, identyfikator, tag właściwość element formatujący wartość wartość elementu formatującego
SKŁADNIA selektor { właściwość: wartość; } selektor { właściwość: wartość; właściwość: wartość; } selektor, selektor { właściwość: wartość; }
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)
TYPOWE WŁAŚCIWOŚCI margin margines na zewnątrz obiektu padding odstęp wewnątrz obiektu
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
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;
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>
Ć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
Ć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'/>
Ć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 http://fwrl.pl 4. Link ma otwierać stronę w nowej zakładce (target="_blank ) 5. Dodaj margines dolny 30px
Ć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
Ć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='http://fwrl.pl' target="_blank" title="fwrl" alt="fwrl"><img class="obrazek" alt= Obrazek title= Obrazek src='gm-pic01.jpg'/><br/>fwrl</p></a>
Ć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
PRZYDATNE STRONY www.w3schools.com www.kurshtml.edu.pl webmaster.helion.pl/kurshtml HTML/