Witam wszystkich na moim blogu❕😉👍 Z każdym kolejnym postem przekonuję się, że uruchomienie bloga o programowaniu było dobrym ruchem.
Po pierwsze, sam sobie powtarzam materiał, który poznawałem dużo wcześniej.
Po drugie, każdy kto zaczyna naukę programowania i po przeczytaniu mojego posta pisze do mnie “materiał bardzo fajny, i będzie śledził dalej”, to naprawdę działa motywująco💪😉
Mamy nieciekawy okres w którym należy przestrzegać wiadomych dla wszystkich zasad. Pracuję normalnie, ale nie zmienia to faktu, że nie widzę problemu. Mama nadzieję że pandemia, z czasem po prostu osłabnie, i wszystko wróci do normy.
Tak więc zapraszam do kolejnego materiału, obserwowania i polubienia mojej strony fb 👍😃
Znaczniki do “wyszczególnienia”?
Istnieje znacznik, dzięki któremu możemy objąć wybrany tekst, np. część akapitu i zmienić style. Mowa o znaczniku <span></span>
Popatrzmy na przykład:
Tekst wyszczególniony, a teraz już normalnie:);
Efekt powyższego kodu będzie następujący:
- “Tekst wyszczególniony” – zostanie wygenerowany w kolorze czerwony w rozmiarze 25px.
- “, a teraz już normalnie:)” zostanie wygenerowany bez stylu (domyślny styl przeglądarki).
Ćwiczenie
- Dodaj nowego pena.
- Tytuł – “Znaczniki span”.
- W ciele dokumentu dodaj akapit z przykładowym tekstem, wyszczególnionym fragmentem i stylami wymyślonymi przez siebie. Proste co nie? 😃
Segmenty z div-em❕
Poznajmy kolejny znacznik – <div></div>. Działa na podobnej zasadzie jak znacznik akapitu. Jednak <div> służy przede wszystkim do podziału strony na segmenty (części), przykładowo: menu, panel główny i stopkę.
Podział na główne segmenty pozwala utrzymać porządek oraz osobno stylować kolejne segmenty strony, np. menu na zielono a stopkę na niebiesko.
Tak na marginesie, znacznik <div> jest elementem blokowym (obok nagłówka i paragrafu). Oznacza to w praktyce, że po jego dodaniu w HTML-u tworzy się element w 100% szerokości, oddzielony z góry i dołu.
Spójrzmy na przykład, który stworzyłem na zobrazowanie teorii:
See the Pen Znacznik div by Daniel Minschinski (@daniel-minschinski) on CodePen 1
Ze znacznikiem <div> musimy się zaprzyjaźnić❕ Co to oznacza❓
Oznacza to, że od tej pory, podczas tworzenia stron w HTML-u znacznik <div> będzie przewijał się za każdym razem. Sam zobaczysz 😉
Ćwiczenie
- Dodaj nowego pena.
- W tytule – “Znacznik div”.
- W ciele dokumentu dodaj parę znaczników div. W nim utwórz style tła, wielkości czcionki, padding, obramowanie.
- W środku dodaj przykładowy akapit.
- Powtórz punkt 3 i 4 😃 tylko z innymi stylami dla urozmaicenia 😉 Pobaw się❕😜
To na tyle😉 Było krótko, ale konkretnie❕
✅ Przede wszystkim do zapamiętania – znacznika <div> będziemy często używać w naszym kodzie, więc warto już teraz go zapamiętać i stosować go w naszym kodzie💻
Zapraszam do kolejnego wpisu, który mam nadzieje ukaże się jeszcze w tym tygodniu 📅🔽
…a w nim podsumowanie i budowa strony o sobie😎 Zapraszam do polubienia fb 🙂