Marginesy, dopełnienia i obramowanie
|
|
|
- Lech Lipiński
- 5 lat temu
- Przeglądów:
Transkrypt
1 Tematy: Pudełkowy model formatowania elementów Marginesy Dopełnienie Obramowanie Wymiary Zagadnienia marginesów, dopełnienia inaczej zwanego marginesami wewnętrznymi oraz obramowania są ściśle ze sobą związane i dlatego zdecydowałem się opisać wszystkie w ramach jednego rozdziału niniejszego kursu. Zanim jednak przejdziemy do konkretów, konieczne jest wyjaśnienie pojęcia pudełka, gdyż pozwoli to lepiej zrozumieć różnice. Pudełkowy model formatowania elementów Kaskadowe arkusze stylów do formatowania wszystkich elementów wykorzystują model pudełka. W praktyce polega to na tym, że wszystkie elementy umieszczane są w dodatkowej przestrzeni o kształcie prostokątów (rysunek 8.1). W ramach każdego pudełka można kontrolować następujące właściwości: - Marginesy odstępy dzielące poszczególne elementy pudełka. - Obramowanie linie rozdzielające marginesy i dopełnienie. - Dopełnienia odstępy pomiędzy elementem a otaczającą go ramką. Dopełnienia bardzo często nazywane są również marginesami wewnętrznymi. - Szerokość. - Wysokość. Rysunek 8.1. Schemat pudełka Oczywiście nic nie stoi na przeszkodzie, aby dla pojedynczego elementu określić wszystkie dostępne właściwości. Marginesy Margines to obszar występujący po zewnętrznej stronie obramowania elementu. Jest on obecny w każdym elemencie użytym na stronie WWW. Za pomocą CSS można kontrolować lewy, prawy, górny oraz dolny margines. Lewy, prawy, górny i dolny margines margin-left margin-right margin-top margin-bottom wartość liczbowa wartość procentowa auto inherit 1 / 21
2 0 p {margin-left:1cm;} Nie Specyfikacja CSS przewiduje ustawienia dla następujących marginesów: prawego, lewego, górnego i dolnego. Odpowiednie wpisy mają postać: <p style="margin-left:1cm;">przykład tekstu z lewym marginesem 1 cm </p> <p style="margin-right:1cm;">przykład tekstu z prawym marginesem 1 cm </p> <p style="margin-top:1cm;">przykład tekstu z górnym marginesem 1 cm </p> <p style="margin-bottom:1cm;">przykład tekstu z dolnym marginesem 1 cm </p> <h3>przykład działania: margin-left</h3> <div style="width:400px;height:300px;border:solid 1px black;background-color:#e7e7e7;"> <p style="margin-left:2cm;">lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p> <p style="margin-left:2cm;">lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p> <h3>przykład działania: margin-right</h3> <div style="width:400px;height:300px;border:solid 1px black;background-color:#e7e7e7;"> <p style="margin-right:2cm;">lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p> <p style="margin-right:2cm;">lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet 2 / 21
3 pharetra felis, quis aliquet odio auctor condimentum.</p> <h3>przykład działania: margin-top</h3> <div style="width:400px;height:300px;border:solid 1px black;background-color:#e7e7e7;"> <p style="margin-top:2cm;">lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p> <p style="margin-top:2cm;">lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p> <h3>przykład działania: margin-bottom</h3> <div style="width:400px;height:300px;border:solid 1px black;background-color:#e7e7e7;"> <p style="margin-bottom:2cm;">lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p> <p style="margin-bottom:2cm;">lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p> Poniżej zamieszczam jeszcze jeden przykład dokumentu o bardziej skomplikowanej strukturze marginesów. <body style="margin-left:10%;margin-right:10%;margin-top:10%;margin-bottom:10%;"> <h3>nagłowek bez własnego marginesu</h3> <p style="margin-left:3cm">przykład bloku tekstu z lewym marginesem równym 3cm. Przykład bloku tekstu z lewym marginesem równym 3cm. Przykład bloku tekstu z lewym marginesem równym 3cm. Przykład bloku tekstu z lewym marginesem równym 3cm. Przykład bloku tekstu z lewym marginesem równym 3cm. Przykład bloku tekstu z lewym marginesem równym 3cm. Przykład bloku tekstu z lewym marginesem równym 3cm.</p> <div style="width:400px;height:300px;border:solid 1px black;background-color:#e7e7e7;"> <div style="margin:10%; background-color:#c0ffff;"> 3 / 21
4 <h3>lorem ipsum dolor sit amet</h3> <p style="margin-left:2cm;">lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p> Powyższy przykład zawiera marginesy ustawione dla całego dokumentu oraz dla wszystkich akapitów. Główne marginesy strony oraz margines akapitu zostały zsumowane i w praktyce wygląda to tak, że tekst jest oddalony od lewego brzegu o 10% + 3 cm. Dzięki zastosowaniu kolorowego tła lepiej widać, w jaki sposób zostały ustawione marginesy. Marginesy mogą również przybierać wartości zerowe lub ujemne. Dzięki temu strona może zaczynać się idealnie od krawędzi okna przeglądarki lub wychodzić poza okno. <body style="margin-left:0;margin-top:0;"> <p style="margin-left:-1cm;">lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p> Na poniższym przykładzie dla pierwszego akapitu ustawiono ujemny margines, co powoduje, że tekst nie mieści się w wyznaczonym bloku tekstu. <div style="width:400px;height:300px;border:solid 1px black;background-color:#e7e7e7;"> <div style="margin:10%; background-color:#c0ffff;"> <h3>lorem ipsum dolor sit amet</h3> <p style="margin-left:-1cm;">lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet pharetra felis, quis aliquet odio auctor condimentum.</p> Przyjrzyjmy się jeszcze sytuacji, w której ustawiłem lewy i prawy margines dla elementu znajdującego się wewnątrz bloku tekstu. 4 / 21
5 <p>przykład bloku tekstu z <span style=" margin-left: 1cm;margin-right: 1cm;font-style: italic;font-weight: bold;">dodatkowym elementem</span> który posiada własne marginesy.</p> <p>przykład bloku tekstu z <span style=" margin-left: 1cm;margin-right: 1cm;font-style: italic;font-weight: bold;">dodatkowym elementem</span> który posiada własne marginesy.</p> Za pomocą odpowiednio zdefiniowanych marginesów można wyśrodkować pewne elementy na stronie. Poniżej znajduje się przykład tabeli wyśrodkowanej w ten sposób. Zgodnie z zaleceniami specyfikacji to właśnie taka konstrukcja jest poprawna i należy z niej korzystać w stronach, które tworzone są zgodnie z zaleceniami konsorcjum W3. <table style="margin-left:auto;margin-right:auto;"> <tr> <td width="100" height="100">1</td><td width="100" height="100">2</td> </tr> <tr> <td width="100" height="100">3</td><td width="100" height="100">4</td> </tr> </table> <div style="width:400px;height:300px;border:solid 1px black;background-color:#e7e7e7;padding:10pt;"> <table style="margin-left:auto;margin-right:auto;border:solid black 1px;background-color:#C0FFC0;"> <tr> <td width="100" height="100">1</td><td width="100" height="100">2</td> </tr> <tr> 5 / 21
6 <td width="100" height="100">3</td><td width="100" height="100">4</td> </tr> </table> Zbiorczy zapis właściwości marginesów margin margin-top margin-right margin-bottom margin-left 0 p {margin:1cm 3cm;} Nie Wpisy w arkuszu stylów odpowiedzialne za określanie właściwości poszczególnych marginesów mogą zostać zredukowane do pojedynczej linii. Aby ustawić wszystkie marginesy dla całego dokumentu (prawy, lewy, górny, dolny), należy skorzystać z następującego zapisu: BODY { margin:1cm; } Teraz kolej na przykład zapisu pozwalającego na zróżnicowanie marginesów na stronie. 6 / 21
7 BODY { margin:1cm 2cm; } W tym przypadku górny i dolny margines będą miały 1 cm, natomiast prawy i lewy 2 cm. W sytuacji gdy każdy margines ma inną wartość, odpowiedni zapis będzie wyglądał następująco: BODY { margin:1cm 2cm 30px 1in; } Patrząc od lewej strony na liczby, mamy górny, prawy, dolny i lewy margines. Poniżej zamieściłem schemat, z jakiego korzystają kaskadowe arkusze stylów przy zbiorczym zapisie wartości. Mam tutaj na myśli replikację wartości. Wartość górnego marginesu może zostać pobrana przez prawy i dolny margines. Natomiast prawy margines jest wykorzystywany przez lewy. Przedstawioną zależność doskonale widać na rysunku 8.2. Rysunek 8.2. Schemat powielania wartości marginesów w zapisie zbiorczym Dopełnienie Dopełnienie to obszar występujący po wewnętrznej stronie obramowania elementu. Jest obecne w każdym elemencie użytym na stronie WWW. Za pomocą CSS można kontrolować lewe, prawe, górne oraz dolne dopełnienie. Warto wspomnieć w tym miejscu, że dopełnienie bywa również nazywane marginesem wewnętrznym. Lewe, prawe, górne i dolne dopełnienie padding-left padding-right padding-top padding-bottom wartość liczbowa wartość procentowa inherit 0 p {padding-left:1cm;} 7 / 21
8 Nie Za deklarację dopełnienia odpowiada polecenie padding-left, padding-right, padding-top oraz padding-bottom. W poniższych przykładach, aby poprawić widoczność działania dopełnienia i usprawnić jego kontrolę, włączyłem dodatkowo tło elementu. <h1 style="padding-left:2cm;background-color:#c0ffc0;">nagłówek z lewym dopełnieniem równym 2 cm</h1> <h1 style="padding-right:2cm;background-color:#c0ffc0;">nagłówek z prawym dopełnieniem równym 2 cm</h1> <h1 style="padding-top:2cm;background-color: #C0FFC0;">Nagłówek z górnym dopełnieniem równym 2 cm</h1> <h1 style="padding-bottom:2cm;background-color:#c0ffc0;">nagłówek z dolnym dopełnieniem równym 2 cm</h1> <div style="width:400px"> <h1 style="padding-left:2cm;background-color:#c0ffc0;">nagłówek z lewym dopełnieniem równym 2 cm</h1> <h1 style="padding-right:2cm;background-color:#c0ffc0;">nagłówek z prawym dopełnieniem równym 2 cm</h1> <h1 style="padding-top:2cm;background-color: #C0FFC0;">Nagłówek z górnym dopełnieniem równym 2 cm</h1> <h1 style="padding-bottom:2cm;background-color:#c0ffc0;">nagłówek z dolnym dopełnieniem równym 2 cm</h1> Poniżej zamieszczam jeszcze jeden przykład dokumentu o bardziej skomplikowanej strukturze dopełnienia. <h1 style="padding-left:2cm;padding-right:2cm;padding-top:2cm;padding-bottom:2cm;">nagłówek ze wszystkimi dopełnieniami.</h1> 8 / 21
9 <div style="width:400px"> <h1 style="background-color:#c0ffc0;padding-left:2cm;padding-right:2cm;padding-top:2cm;padding-bottom:2cm ;">Nagłówek ze wszystkimi dopełnieniami.</h1> Na koniec jeszcze jeden przykład, mający uzmysłowić różnicę pomiędzy dopełnieniem oraz klasycznymi marginesami. <h1 style="background-color:#c0ffc0;padding:1cm;margin-top:1cm;margin-bottom:1cm;">nagłówek ze wszystkimi dopełnieniami równymi 1 cm i dodatkowym 1-centymetrowym marginesem górnym i dolnym.</h1> <div style="width:500px"> <h1 style="background-color:#c0ffc0;padding:1cm;">nagłówek ze wszystkimi dopełnieniami równymi 1cm.</h1> <h1 style="background-color:#c0ffc0;padding:1cm;">nagłówek ze wszystkimi dopełnieniami równymi 1cm.</h1> <h1 style="background-color:#c0ffc0;padding:1cm;margin-top:2cm;margin-bottom:2cm;">nagłówek ze wszystkimi dopełnieniami równymi 1cm i dodatkowym 2-centymetrowym marginesem górnym i dolnym.</h1> <h1 style="background-color:#c0ffc0;padding:1cm;">nagłówek ze wszystkimi dopełnieniami równymi 1cm.</h1> Zbiorczy zapis właściwości dopełnienia padding padding-top padding-right padding-bottom padding-left 9 / 21
10 0 p {margin:1cm 3cm;} Nie Dla dopełnienia podobnie jak dla marginesów zewnętrznych można definiować wartości w sposób zbiorczy. Przykład takiego działania zamieszczam poniżej. H1 { background-color:silver; padding:1cm; } Oczywiście wartości są replikowane zgodnie ze wzorem zamieszczonym na rysunku 8.2. Dlatego można stosować skrócony zapis w każdym przypadku. Kolejność podanych wartości w skróconym zapisie jest taka sama jak dla marginesów zewnętrznych patrząc od strony lewej, mamy górne, prawe, dolne i lewe dopełnienie. H1 { background-color:silver; padding:1cm 1in 10px 20mm; } 10 / 21
11 <div style="width:500px"> <h1 style="background-color:#c0ffc0;padding:1cm 1in 10px 20mm">Nagłówek ze wszystkimi dopełnieniami równymi 1cm.</h1> Obramowanie Obramowanie występuje pomiędzy marginesem a dopełnieniem i jest kolejnym elementem składowym modelu pudełka, o którym wspomniałem wcześniej. Typowe obramowanie przybiera formę pojedynczej lub podwójnej linii o ciągłej lub przerywanej strukturze i dowolnym kolorze. Zgodnie z zaleceniami specyfikacji ramka jest rysowana nad tłem ustawionym dla elementu. Niestety, nie wszystkie przeglądarki (problem ma MS Internet Explorer w starszych wersjach) w taki sposób prezentują ramki, co w niektórych przypadkach może być przyczyną problemów. Za pomocą kaskadowych arkuszy stylów można kontrolować następujące właściwości obramowania: - styl, - kolor, - grubość, - rozmiar, - miejsce występowania. Style odpowiedzialne za formatowanie obramowania nie zawsze działają w pojedynkę. Dlatego warto połączyć różne atrybuty, np. grubość, styl i miejsce występowania, aby uzyskać zadowalający efekt. Styl obramowania border-top-style border-right-style border-bottom-style border-left-style border-style none hidden dotted dashed solid double groove ridge inset outset inherit none 11 / 21
12 p {border-style:dotted;} Nie Styl obramowania może być kontrolowany za pomocą kaskadowych arkuszy stylów. Tak się składa, że ze względu na charakter tego elementu możemy określić styl obramowania dla każdego z boków pudełka (górny, prawy, dolny, lewy) oraz dla wszystkich boków jednocześnie. <h1 style="border-top-style:solid;">nagłówek z obramowaniem na górze.</h1> <h1 style="border-right-style:solid;">nagłówek z obramowaniem z prawej strony.</h1> <h1 style="border-bottom-style:solid;">nagłówek z obramowaniem na dole.</h1> <h1 style="border-left-style:solid;">nagłówek z obramowaniem z lewej strony.</h1> <h1 style="border-style:solid;">nagłówek z pełnym obramowaniem.</h1> <div style="width:400px;"> <h1 style="border-top-style:solid;">nagłówek z obramowaniem na górze.</h1> <h1 style="border-right-style:solid;">nagłówek z obramowaniem z prawej strony.</h1> <h1 style="border-bottom-style:solid;">nagłówek z obramowaniem na dole.</h1> <h1 style="border-left-style:solid;">nagłówek z obramowaniem z lewej strony.</h1> <h1 style="border-style:solid;">nagłówek z pełnym obramowaniem.</h1> Specyfikacja przewiduje kilka stylów obramowania. Poniższe przykłady prezentują dostępne możliwości. 12 / 21
13 <div style="width:400px;"> <h1 style="border-top-style:none;background-color:#c0ffc0;">nagłówek z ramką none.</h1> <h1 style="border-style:hidden;background-color:#c0ffc0;">nagłówek z ramką hidden.</h1> <h1 style="border-style:dotted;background-color:#c0ffc0;">nagłówek z ramką dotted.</h1> <h1 style="border-style:dashed;background-color:#c0ffc0;">nagłówek z ramką dashed.</h1> <h1 style="border-style:solid;background-color:#c0ffc0;">nagłówek z ramką solid.</h1> <h1 style="border-style:double;background-color:#c0ffc0;">nagłówek z ramką double.</h1> <h1 style="border-style:groove;background-color:#c0ffc0;">nagłówek z ramką groove.</h1> <h1 style="border-style:ridge;background-color:#c0ffc0;">nagłówek z ramką ridge.</h1> <h1 style="border-style:inset;background-color:#c0ffc0;">nagłówek z ramką inset.</h1> <h1 style="border-style:outset;background-color:#c0ffc0;">nagłówek z ramką outset.</h1> Szerokość obramowania border-top-width border-right-width border-bottom-width border-left-width border-width none wartości liczbowe wartości procentowe thin medium thick inherit none p {border-width:5px;} Nie 13 / 21
14 Kaskadowe arkusze stylów umożliwiają kontrolę grubości obramowania. Ze względu na charakter tego elementu możemy oddzielnie określić grubość obramowania dla każdego z boków pudełka (border-top-width, border-right-width, border-bottom-width, border-left-width) oraz dla wszystkich boków jednocześnie (border-width). <h1 style="border-top-width:1px;border-top-style:solid;">nagłówek z górnym obramowaniem 1px.</h1> <h1 style="border-right-width:2pt;border-right-style:solid;">nagłówek z prawym obramowaniem 2pt.</h1> <h1 style="border-bottom-width:2em;border-bottom-style:solid;">nagłówek z dolnym obramowaniem 2em.</h1> <h1 style="border-left-width:1cm;border-left-style:solid;">nagłówek z lewym obramowaniem 1cm.</h1> <h1 style="border-width:1cm;border-style:solid;">nagłówek z pełnym obramowaniem 1cm.</h1> <div style="width:400px;"> <h1 style="border-top-width:1px;border-top-style:solid;background-color:#c0ffc0;">nagłówek z górnym obramowaniem 1px.</h1> <h1 style="border-right-width:2pt;border-right-style:solid;background-color:#c0ffc0;">nagłówek z prawym obramowaniem 2pt.</h1> <h1 style="border-bottom-width:2em;border-bottom-style:solid;background-color:#c0ffc0;">nagłówek z dolnym obramowaniem 2em.</h1> <h1 style="border-left-width:1cm;border-left-style:solid;background-color:#c0ffc0;">nagłówek z lewym obramowaniem 1cm.</h1> <h1 style="border-width:1cm;border-style:solid;background-color:#c0ffc0;">nagłówek z pełnym obramowaniem 1cm.</h1> Dodatkowo grubość obramowania może być określona za pomocą zdefiniowanych przez twórców CSS wartości thin, medium oraz thick. 14 / 21
15 <h1 style="border-width:thin;border-style:solid;">nagłówek z pełnym obramowaniem thin.</h1> <h1 style="border-width:medium;border-style:solid;">nagłówek z pełnym obramowaniem medium.</h1> <h1 style="border-width:thick;border-style:solid;">nagłówek z pełnym obramowaniem thick.</h1> <div style="width:400px;"> <h1 style="border-width:thin;border-style:solid;background-color:#c0ffc0;">nagłówek z pełnym obramowaniem thin.</h1> <h1 style="border-width:medium;border-style:solid;background-color:#c0ffc0;">nagłówek z pełnym obramowaniem medium.</h1> <h1 style="border-width:thick;border-style:solid;background-color:#c0ffc0;">nagłówek z pełnym obramowaniem thick.</h1> Kolor obramowania border-top-color border-right-color border-bottom-color border-left-color border-color nazwa lub wartość koloru transparent inherit wg ustawień domyślnego koloru dla dokumentu p {border-color:red;} Tak 15 / 21
16 Oprócz grubości, stylu oraz miejsca występowania obramowania można zdefiniować kolor tego elementu. Podobnie jak we wszystkich poprzednich przypadkach, tak i tu istnieje możliwość określenia koloru obramowania dla wybranego boku (border-top-color, border-right-color, border-bottom-color, border-left-color) lub dla całej ramki (border-color). <h1 style="border-top-width:thick;border-top-style:solid;border-top-color:red;">nagłówek z górnym czerwonym obramowaniem.</h1> <h1 style="border-right-width:thick;border-right-style:solid;border-right-color:green;">nagłówek z prawym zielonym obramowaniem.</h1> <h1 style="border-bottom-width:thick;border-bottom-style:solid;border-bottom-color:navy;">nagłówek z dolnym granatowym obramowaniem.</h1> <h1 style="border-left-width:thick;border-left-style:solid;border-left-color:silver;">nagłówek z lewym szarym obramowaniem.</h1> <h1 style="border-width:thick;border-style:solid;border-color:yellow;">nagłówek z pełnym żółtym obramowaniem.</h1> <div style="width:400px;"> <h1 style="border-top-width:thick;border-top-style:solid;border-top-color:red;">nagłówek z górnym czerwonym obramowaniem.</h1> <h1 style="border-right-width:thick;border-right-style:solid;border-right-color:green;">nagłówek z prawym zielonym obramowaniem.</h1> <h1 style="border-bottom-width:thick;border-bottom-style:solid;border-bottom-color:navy;">nagłówek z dolnym granatowym obramowaniem.</h1> <h1 style="border-left-width:thick;border-left-style:solid;border-left-color:silver;">nagłówek z lewym szarym obramowaniem.</h1> <h1 style="border-width:thick;border-style:solid;border-color:yellow;">nagłówek z pełnym żółtym obramowaniem.</h1> Zbiorczy zapis właściwości obramowania border-top border-right border-bottom border-left border 16 / 21
17 border-style border-width border-color p {border:red;} Stosując zbiorczy zapis właściwości obramowania, możemy znacznie uprościć zapis stylów dla górnej, prawej, dolnej, lewej krawędzi (border-top, border-right, border-bottom, border-left) oraz dla całego elementu (border). <h1 style="border-top:solid thick red;">nagłówek z górnym obramowaniem.</h1> <h1 style="border-right:solid thick red;">nagłówek z prawym obramowaniem.</h1> <h1 style="border-bottom:solid thick red;">nagłówek z dolnym obramowaniem.</h1> <h1 style="border-left:solid thick red;">nagłówek z lewym obramowaniem.</h1> <h1 style="border:solid thick red;">nagłówek z pełnym obramowaniem.</h1> <div style="width:400px;"> <h1 style="border-top:solid thick red;">nagłówek z górnym obramowaniem.</h1> <h1 style="border-right:solid thick red;">nagłówek z prawym obramowaniem.</h1> <h1 style="border-bottom:solid thick red;">nagłówek z dolnym obramowaniem.</h1> <h1 style="border-left:solid thick red;">nagłówek z lewym obramowaniem.</h1> <h1 style="border:solid thick red;">nagłówek z pełnym obramowaniem.</h1> 17 / 21
18 Wymiary Szerokość i wysokość width height wartość liczbowa wartość procentowa inherit auto p {width:30%;} Nie Pudełko każdego elementu może mieć ściśle określony rozmiar szerokość i wysokość. Niezbędne polecenia wykorzystywane w tym celu to width i height. <h1 style="height:5cm;">nagłówek o wysokości pudełka równej 5cm.</h1> <h1 style="width:30%;">nagłówek o szerokości pudełka równej 30%.</h1> <h1 style="width:50%;height:50%">nagłówek o szerokości i wysokości pudełka równych 50%.</h1> <div style="width:400px;"> <h1 style="height:5cm;background-color:#c0ffc0;">nagłówek o wysokości pudełka równej 5cm.</h1> <h1 style="width:30%;background-color:#c0ffc0;">nagłówek o szerokości pudełka równej 30%.</h1> 18 / 21
19 <h1 style="width:50%;height:50%;background-color:#c0ffc0;">nagłówek o szerokości i wysokości pudełka równych 50%.</h1> Dzięki możliwości definiowania rozmiarów za pomocą CSS można uciec z pułapki, jaką w pewnych okolicznościach jest model pudełka będący podstawą stylów. Minimalna wysokość i szerokość min-width min-height wartość liczbowa wartość procentowa inherit 0 p {min-height:90px;} Nie Kaskadowe arkusze stylów pozwalają na zdefiniowanie minimalnej wysokości i szerokości elementu. Rozwiązanie to jest przydatne w przypadku, gdy przeglądarka ma sama decydować o rozmiarach elementów na stronie. Jednak jako twórcy chcemy w pewnym stopniu kontrolować jej poczynania. Odpowiednie polecenia służące do tego to min-width i min-height. <img src="kolo.jpg" style="min-width:300px;" /> <img src="kolo.jpg" style="min-height:100px;" /> <div style="width:400px;"> 19 / 21
20 <img src="kolo.jpg" /> <img src="kolo.jpg" style="min-width:300px;" /> <img src="kolo.jpg" style="min-height:100px;" /> Maksymalna wysokość i szerokość max-width max-height wartość liczbowa wartość procentowa none inherit none p {max-width:100px;} Nie Kaskadowe arkusze stylów pozwalają na zdefiniowanie maksymalnej wysokości i szerokości elementu. Rozwiązanie to jest przydatne w przypadku, gdy przeglądarka ma sama decydować o rozmiarach elementów na stronie. Jednak jako twórcy chcemy w pewnym stopniu kontrolować jej poczynania. Odpowiednie polecenia służące do tego to max-width i max-height. <img src="kolo.jpg" style="max-width:50px;" /> <img src="kolo.jpg" style="max-height:10px;" /> <div style="width:400px;"> 20 / 21
21 <img src="kolo.jpg" /> <img src="kolo.jpg" style="max-width:50px;" /> <img src="kolo.jpg" style="max-height:10px;" /> 21 / 21
Model blokowy. Model blokowy w CSS
Model blokowy Model blokowy w CSS opisuje bloki, które są generowane dla elementów HTML. Model blokowy zawiera także dokładne opcje związane z ustawieniem maginesu zewnętrznego, wewnętrznego, obramowania
Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.
Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji
Dokument hipertekstowy
Dokument hipertekstowy Laboratorium 5 Box model i layouty mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Wysokość i szerokość domyślna szerokość elementu inline jest związana z jego zawartością
Pozycjonowanie elementów
Tematy: Warstwy Pływanie i tamowanie elementów Kolejnym zagadnieniem związanym z kaskadowymi arkuszami stylów jest pozycjonowanie elementów. Dzięki tej funkcji można tworzyć strony o wyszukanych kształtach,
Krótki przegląd własności języka CSS
Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono
Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2
Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy
Znaczniki języka HTML
www.math.uni.lodz.pl/ radmat Elementy inline ... Elementy inline ... ... Elementy inline ... ... ... Elementy inline
Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów.
Tabele Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów. Ramy tabeli Ramy tabeli tworzone są za pomocą polecenia: Cała zawartość
Języki programowania wysokiego poziomu. CSS Wskazówki
Języki programowania wysokiego poziomu CSS Wskazówki CSS powinno się projektować hierarchicznie, zaczynając od elementów ogólniejszych, kończąc na szczegółowych - Źle: p.mid { text-align: center; p { color:
Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>
Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem
Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.
Nazwa implementacji: CSS i box model Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Wprowadzenie CSS (kaskadowe arkusze stylów, ang. Cascading
Tworzenie stron internetowych w kodzie HTML Cz 5
Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia
www.fwrl.pl/szkolenie
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
Dziedziczenie. Dziedziczenie i kaskadowość. Dodał Administrator środa, 10 marzec :00. Tematy: Dziedziczenie Kaskadowość
Tematy: Dziedziczenie Kaskadowość Dziedziczenie Zrozumienie pojęcia dziedziczenia wymaga od nas zapoznania się z hierarchią ważności poszczególnych znaczników wewnątrz dokumentu. Kaskadowe arkusze stylów
CSS - 2. Właściwości tekstu, czcionek
CSS - 2 Właściwości tekstu, czcionek Właściwości tekstu Służą do nadawania określonego wyglądu tekstowi:» color» direction» letter-spacing» text-align» text-decoration» text-indent» text-shadow» text-transform»
CSS - layout strony internetowej
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:
Technika pracy nad układem strony
Układ strony Technika pracy nad układem strony nad układem strony pracujemy: krok po kroku, testując witrynę po wprowadzeniu jakiejkolwiek zmiany, sprawdzamy poprawnośd kodu HTML, CSS oraz wygląd w przeglądarkach,
Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.
Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie
I. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
2. MATERIAŁ NAUCZANIA
1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się ze składnią języka HTML dotyczącą identyfikacji i grupowania elementów oraz wstawiania plików multimedialnych. 2. MATERIAŁ NAUCZANIA 2.1. Wstawianie
HTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
Deklarowanie tytułu związanej z tabelą
Tabele 1 Deklarowanie tytułu związanej z tabelą Przychody w latach 2007-2010 Położenie pozbawione stylu Treść nagłówka Formatowanie położenia w stylach
Projektowanie aplikacji internetowych. CSS w akcji
Projektowanie aplikacji internetowych CSS w akcji Tak to ma wyglądać Strona : 2 Założenie Treść strony ma być oddzielona od informacji o jej wyglądzie. Kod HTML nie powinien zawierać żadnych informacji
I. Pozycjonowanie elementów
Wykład 4 - część I. I. Pozycjonowanie elementów 1 I. Pozycjonowanie elementów Model blokowy Każdy element użyty w kodzie XHTML tworzy na stronie blok. W związku z tym strona XHTML w rzeczywistości składa
zmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >
tytuł dokumentu treść dokumentu
Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów...
Spis treści Konwencje zastosowane w książce...5 Dodawanie stylów do dokumentów HTML oraz XHTML...6 Struktura reguł...9 Pierwszeństwo stylów... 10 Klasyfikacja elementów... 13 Sposoby wyświetlania elementów...
Technika pracy nad układem strony
Układ strony Technika pracy nad układem strony nad układem strony pracujemy: krok po kroku, testując witrynę po wprowadzeniu jakiejkolwiek zmiany, sprawdzamy poprawnośd kodu HTML, CSS oraz wygląd w przeglądarkach,
PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński
PROGRAMOWANIE KASKADOWE ARKUSZE STYLÓW CASCADING STYLE SHEETS Za pomocą HTML tworzymy strukturę dokumentu, jego elementy oraz treść CSS służy do opisu wyglądu struktury dokumentu, elementów oraz treści
Arkusze stylów CSS Cascading Style Sheets
Arkusze stylów CSS Cascading Style Sheets HTML a CSS HTML odpowiada za strukturę tworzonej witryny internetowej i poszczególnych dokumentów (ich stronę semantyczną) CSS odpowiada za wizualną prezentację
Języki programowania wysokiego poziomu. HTML cz.2.
Języki programowania wysokiego poziomu HTML cz.2. Model pudełkowy HTML Elementy blokowe w tym table oraz div są wyświetlane według tzw. modelu pudełkowego: Zawartość Odstęp (padding) Obramowanie (border)
9. TABELE KURS HTML.
9. TABELE Tabele są czymś niezwykle waŝnym dla strony HTML. ChociaŜ początkujący omijają je szerokim łukiem, lepiej się je nauczyć. Ta lekcja będzie większym połączeniem oby dwóch języków kursu niŝ jakiekolwiek
Jednostki miar stosowane w CSS
Wprowadzenie CSS (ang. Cascading Style Sheets) jest językiem służącym do opisu sposobu prezentowania informacji na stronach WWW, który został opracowany przez organizację W3C. Często skrót ten tłumaczony
CSS. Kaskadowe Arkusze Stylów
CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać
Rysunek otaczany przez tekst
Tekst i obrazy 1 Rysunek otaczany przez tekst Wprowadzanie obiektu graficznego Rozmiar ramki: width= 200 deklaruje się tylko
HTML (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
Elementy div i style CSS w praktyce
Elementy div i style CSS w praktyce Włodzimierz Gajda 23 listopada 2005 ver. 0.2 Streszczenie Artykuł omawia kulisy tworzenia strony internetowej wyłącznie w oparciu o elementy div oraz kaskadowe arkusze
Tabela z komórkami nagłówkowymi (wyróżnionymi)
Tabela z komórkami nagłówkowymi (wyróżnionymi) Nagłówek poziomy ... ... Nagłówek pionowy ... ... Tytuł tabeli tytuł tabeli... gdzie
Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).
Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu
Laboratorium 1: Szablon strony w HTML5
Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony
HTML podstawowe polecenia Szkielet dokumentu: Wstawianie nowej strony
Wstawianie nowej strony W obszernych dokumentach będziemy spotykali się z potrzebą dzielenia dokumentu na części. Czynność tę wykorzystujemy np.. do rozpoczęcia pisania nowego rozdziału na kolejnej stronie.
Specyfikacja techniczna dot. mailingów HTML
Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej
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
Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski
Podstawy HTML i CSS Grzegorz Arkit Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski 13 października 2016 G. Arkit (WMIiE) Podstawy HTML i CSS 13 października 2016 1 / 20 Informacja
HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl
HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze HTML 1. Tło strony - Jednolity kolor:
Wykład 2: Kaskadowe arkusze stylów (CSS Cascade Style Sheets)
Wykład 2: Kaskadowe arkusze stylów (CSS Cascade Style Sheets) Przykład użycia stylu
Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 1 Podstawy tworzenia stron internetowych Agenda Podstawy stron internetowych Przegląd języka HTML Wprowadzenie
Podstawy pozycjonowania CSS
Podstawy pozycjonowania CSS Żeby pokazać w jaki sposób przeglądarka rozkłada elementy na stronie posłużę się prostym przykładowym fragmentem kodu html. div id="before"
Formatowanie komórek
Formatowanie komórek Korzystając z włączonego paska narzędziowego Formatowanie możemy, bez szukania dodatkowych opcji sformatować wartości i tekst wpisany do komórek Zmiana stylu czcionki (pogrubienie,
Technologie Informacyjne
Technologie Informacyjne Wykªad 7 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 1 / 23 HTML HTML Sªu»y do deniowania struktury dokumentu: akapity nagªówki
Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.
Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1
Układy witryn internetowych
1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym
Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}
Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu.
Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.
Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu
Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.
Ćwiczenie 2 Kaskadowe arkusze stylów CSS. Budowanie makiety strony i jej modyfikacja dr inż. Robert Banasiak 1 Materiały ćwiczeniowe Wszelkie materiały ćwiczeniowe: wykłady, instrukcje oraz pliki ćwiczeniowe
WYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1
WYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1 KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets, CSS) Mechanizm służący do definiowania stylu prezentacji dokumentów w Internecie. Arkusz stylów CSS to lista
LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW
LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW 1. Definicja tła Tło elementu HTML można definiować w CSS korzystając z następujących cech: background-color background-image
Kaskadowe arkusze stylów cz. 2
Formatowanie wyglądu tekstu Właściwości związane z czcionką Wybór czcionki Tworzenie czcionki pochyłej Pogrubianie czcionki Określanie wielkości czcionki Wykorzystanie kapitalików Określanie wysokości
Mailingi HTML. Specyfikacja techniczna
Mailingi HTML Specyfikacja techniczna Informacje wstępne Grupa Morizon S.A. zastrzega sobie prawo do odmowy emisji materiałów reklamowych bez podania przyczyny, w szczególności gdy ich jakość techniczna
I. Dlaczego standardy kodowania mailingów są istotne?
1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego
Moduł IV Internet Tworzenie stron www
Ze strony internetowej www.kaze.zut.edu.pl z folderu BUDOWA JACHTÓW pobierz i zapisz je do własnego folderu następujące pliki: znak_drogowy.png, morze.jpg, logo_ecdl.gif, logobj.png ZADANIE 1 Podstawy
Ćwiczenie 4 - Tabele
Ćwiczenie 4 - Tabele W ćwiczeniu tym zajmujemy się tabelami. Tabele moŝna wykorzystywać do róŝnych celów. W tabelach moŝna prezentować dane i je wyliczać, moŝna ustalić określony układ treści i stworzyć
Alfabetyczna lista stylów
Tematy: Kaskadowe arkusze stylów Alfabetyczna lista stylów Uwaga: wiele stylów CSS3 nie jest ciągle interpretowanych przez przeglądarki Styl Znaczen CSS1 CSS2 CSS3 IE FF A animation Zbiorcza definicja
Responsywne strony WWW
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę zaprojektować następujący layout strony, oparty na DIV-ach: Aby osiągnąć powyższy efekt, w pliku CSS powinniśmy utworzyć reguły: #cala_strona width: 780px;
za pomocą: definiujemy:
HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony
I. Formatowanie tekstu i wygląd strony
I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:
Tabele. Dodał Administrator czwartek, 22 lipiec :59
zazwyczaj kojarzą się z wypełnioną gęsto tekstem lub liczbami, podzieloną liniami na wiersze i kolumny kartką papieru; w dokumentach elektronicznych też najczęściej przyjmują taką postać. Na stronach WWW
Wykład 3 - część I. I. TABELE. dr Artur Bartoszewski - Nowoczesne technologie informatyczne - WYKŁAD
Wykład 3 - część I. I. TABELE 1 I. Tabele Struktura tabeli - HTML Najprostsza tabela składa się z elementu oraz komórek pogrupowanych w rzędy . Podstawowa struktura kodu tabeli 3x4 wygląda
Kaskadowe arkusze stylów (CSS)
Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do
Zaznaczanie komórek. Zaznaczenie pojedynczej komórki polega na kliknięciu na niej LPM
Zaznaczanie komórek Zaznaczenie pojedynczej komórki polega na kliknięciu na niej LPM Aby zaznaczyć blok komórek które leżą obok siebie należy trzymając wciśnięty LPM przesunąć kursor rozpoczynając od komórki
Jeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.: <div style="float: left">pierwsza treść, zdjęcie, tabele lub cokolwiek </div>
Wykorzystanie znacznika DIV. Znacznik można nazwać blokiem, sekcją, zasobnikiem, pudełkiem, w którym umieszczamy dowolną treść. Poszczególne DIVy można dowolnie umieszczać na stronie, względem siebie
Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:
1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera
Podstawowe znaczniki języka HTML.
Podstawowe znaczniki języka HTML. Struktura dokumentu. Sposób użycia i dokumentu. Między nimi umieszczana jest cała treść dokumentu. Sposób użycia Sekcja HEAD zawiera podstawowe
Odsyłacze. Style nagłówkowe
Odsyłacze ... polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja TARGET="...", która wskazuje na miejsce otwarcia wskazywanego dokumentu, a jej parametrami
Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>
Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej
efaktura walidator Instrukcja integracji komponentów webowych v2012.04.11
efaktura walidator Instrukcja integracji komponentów webowych v2012.04.11 Syriusz sp. z o.o. Rzeszów 2012 EFAKTURA INSTRUKCJA INTEGRACJI KOMPONENTÓW WEBOWYCH str. 2 Spis treści 1. Informacje ogólne...3
Programowanie WEB PODSTAWY HTML
Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony
[ HTML ] Tabele. 1. Tabela, wiersze i kolumny
![[ HTML ] Tabele. 1. Tabela, wiersze i kolumny](/thumbs/70/62541125.jpg "[ HTML ] Tabele. 1. Tabela, wiersze i kolumny")
[ HTML ] Tabele 1. Tabela, wiersze i kolumny Opis tabeli znajdowad się powinien wewnątrz znaczników . W ich ramach umieszczone są definicje rzędów, komórek w rzędach oraz dane w komórkach.
Witryny i aplikacje internetowe
Test z przedmiotu Witryny i aplikacje internetowe Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch
Tworzenie Stron Internetowych. odcinek 8
Tworzenie Stron Internetowych odcinek 8 CSS jednostki Jednostki miary stosuje się w poleceniach dotyczących np. wielkość czcionki lub rozmiarów marginesów. Zapis składa się z znaku "+" (domyślny) lub "
Techniki wstawiania tabel
Tabele w Wordzie Tabela w Wordzie to uporządkowany układ komórek w postaci wierszy i kolumn, w które może być wpisywany tekst lub grafika. Każda komórka może być formatowana oddzielnie. Możemy wyrównywać
ZAWSEZ PAMIĘTAMY O KOLJENOŚĆI OTWIERANIA I ZAMYKANIA ZNACZNIKÓW
HTML i inne Struktura dokumentu standard języka użytego do budowy strony nagłówek strony zawartość strony ZAWSEZ PAMIĘTAMY O KOLJENOŚĆI OTWIERANIA I ZAMYKANIA ZNACZNIKÓW Strona kodowa Opis strony Słowa
<!DOCTYPE HTML PUBLIC " //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd">
Podział obszaru roboczego na regiony
Elementarz HTML i CSS
Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych 1 Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych Treść, korekta, skład i oprawa graficzna
Test z przedmiotu. Witryny i aplikacje internetowe
Test z przedmiotu Witryny i aplikacje internetowe Tylko jedna odpowiedź jest poprawna!!! Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch
ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści
ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML
Budowa aplikacji wielowarstwowych. Zastosowanie Kaskadowych arkuszy stylów (CSS)
Budowa aplikacji wielowarstwowych. Zastosowanie Kaskadowych arkuszy stylów (CSS) Laboratorium 7 Technologie internetowe Zofia Kruczkiewicz TINT_Lab_7, Zofia Kruczkiewicz 1 Wykaz pytań dotyczących materiału
Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień.
Poprzednie zajęcia skończyliśmy ucząc się tworzenia odsyłaczy/hiperłączy/linków (można wrócić do poprzedniego scenariusza, jeśli ktoś go nie skończył). Skoro jesteśmy przy odsyłaczach, to warto poznać
Właściwości tekstu. Dodał Administrator środa, 10 marzec :04
Tematy: Poziome wyrównanie tekstu Pionowe wyrównanie tekstu Wcięcie testu Dekoracja tekstu Przekształcanie tekstu Odstępy między literami Odstępy między wyrazami Odstępy między liniami Pusta przestrzeń
Grafika na stronie. <img src="grafika.jpg" align="center"> obrazek w kolorowej ramce
Grafika na stronie wstawianie obrazka obrazek w kolorowej ramce obrazek z lewej strony tekstu obrazek oblany tekstem z lewej strony i odsuniety od niego obrazek pomiędzy tekstem obrazek nad tekstem puste
Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie
Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze
Formatowanie dokumentu
Formatowanie dokumentu 1. Formatowanie strony Edytor tekstu Word umożliwia nadanie poszczególnym stronom dokumentu jednolitej formy przez określenie układu strony. Domyślnie są w nim ustawione marginesy
używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów
opracowanie I. K. używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów ISO-8859-2 - norma międzynarodowa określająca sposób kodowania
EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA
Arkusz zawiera informacje prawnie Układ graficzny CKE 2016 chronione do momentu rozpoczęcia egzaminu CENTRALNA KOMISJA EGZAMINACYJNA Nazwa kwalifikacji: Twmzenie aplikacji internetowych i baz danych oraz
Rozwiązania zadań EGZAMINACYJNYCH- WITRYNY
Rozwiązania zadań EGZAMINACYJNYCH- WITRYNY Zadanie maj 2015 rok Wykonaj zestaw grafik oraz stronę internetową dla zespołów medycznych zgodnie z wymaganiami dotyczącymi bazy danych, grafiki i strony internetowej.
OGÓLNE WYMAGANIA DOTYCZĄCE SPOSOBU PRZYGOTOWANIA PRAC DYPLOMOWYCH (wytyczne dla Studentów)
OGÓLNE WYMAGANIA DOTYCZĄCE SPOSOBU PRZYGOTOWANIA PRAC DYPLOMOWYCH (wytyczne dla Studentów) W pracy dyplomowej należy zachować: Styl całego dokumentu: Styl Standardowy: rodzaj czcionki: Times New Roman
Ćwiczenie nr 12: Tworzenie stron internetowych z użyciem języka HTML Wstęp
Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 12: Tworzenie stron internetowych z użyciem języka HTML Wstęp Najprostszym sposobem utworzenia strony internetowej jest użycie języka HTML.
Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów.
Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów. Znaczniki HTML (tagi) postać ogólna: zawartość
Blok dokumentu. <div> </div>
Blok dokumentu Polecenie div (blok, sekcja) jest jednym z najbardziej fundamentalnym poleceń języka HTML, które odgrywa kluczową rolę w grupowaniu wielu różnych elementów i pozycjonowaniu większych fragmentów
Jeżeli pole Krawędź będzie zaznaczone uzyskamy obramowanie w całej wstawianej tabeli
Tabela Aby wstawić tabelę do dokumentu należy wybrać z górnego menu Tabela-->Wstaw-->Tabela W kategorii Rozmiar określamy z ilu kolumn i ilu wierszy ma się składać nasza tabela. Do dokumentu tabelę możemy