<!DOCTYPE HTML PUBLIC " //W3C//DTD HTML 4.01 Transitional//EN" "
|
|
|
- Renata Socha
- 7 lat temu
- Przeglądów:
Transkrypt
1 <!DOCTYPE HTML PUBLIC " //W3C//DTD HTML 4.01 Transitional//EN" " <HTML> <HEAD> <TITLE>Podział obszaru roboczego na regiony</title> <META http equiv="content Type" content="text/html; charset=windows 1250"> <STYLE type="text/css"> #lewa { position: absolute; height: 100px; top: 275px; left: 40px; border color: rgb(128,128,128); background: rgb(239,220,228); #prawa { position: absolute; height: 100px; top: 230px; left: 420px; border color: rgb(59,66,215); background: rgb(221,231,220); </STYLE> </HEAD> <BODY> <DIV id="lewa"> lewa strona </DIV> <DIV id="prawa"> prawa strona </DIV> </BODY> </HTML>
2 <!DOCTYPE HTML PUBLIC " //W3C//DTD HTML 4.01 Transitional//EN" " <HTML> <HEAD> <TITLE>Podział obszaru roboczego na regiony</title> <META http equiv="content Type" content="text/html; charset=windows 1250"> <STYLE type="text/css"> #lewa { position: absolute; height: 100px; top: 0px; left: 0px; bottom: 100px; right: 100px; border color: rgb(128,128,128); background: rgb(239,220,228); #prawa { position: absolute; width: 400px; height: auto; top: 0px; left: 120px; bottom: auto; right: 520px; border color: rgb(59,66,215); background: rgb(221,231,220); </STYLE> </HEAD> <BODY> <DIV id="lewa"> lewa strona </DIV> <DIV id="prawa"> <H1>Jan Brzechwa</H1>
3 <H2>Chrząszcz</H2> <PRE> W Szczebrzeszynie chrząszcz brzmi w trzcinie I Szczebrzeszyn z tego słynie. Wół go pyta: "Panie chrząszczu, Po co pan tak brzęczy w gąszczu?" "Jak to po co? To jest praca, Każda praca się opłaca." "A cóż za to pan dostaje?" "Też pytanie! Wszystkie gaje, Wszystkie trzciny po wsze czasy, Łąki, pola oraz lasy, Nawet rzeczki, nawet zdroje, Wszystko to jest właśnie moje!" Wół pomyślał: "Znakomicie, Też rozpocznę takie życie." Wrócił do dom i wesoło Zaczął brzęczeć pod stodołą Po wolemu, tęgim basem. A tu Maciek szedł tymczasem. Jak nie wrzaśnie: "Cóż to znaczy? Czemu to się wół prożniaczy?!" "Jak to? Czyż ja nic nie robię? Przecież właśnie brzęczę sobie!" "Ja ci tu pobrzęczę, wole, Dosyć tego! Jazda w pole!" I dał taką mu robotę, Że się wół oblewał potem. Po robocie pobiegł w gąszcze. "Już ja to na chrząszczu pomszczę!" Lecz nie zastał chrząszcza w trzcinie, Bo chrząszcz właśnie brzęczał w Pszczynie. </PRE> </DIV> </BODY> </HTML>
4 <!DOCTYPE HTML PUBLIC " //W3C//DTD HTML 4.01 Transitional//EN" " <HTML> <HEAD> <TITLE>Podział obszaru roboczego na regiony</title> <META http equiv="content Type" content="text/html; charset=windows 1250"> <STYLE type="text/css"> BODY {text align:center; #lewa { height: 100px; top: 0px; left: 0px; border color: rgb(128,128,128); background: rgb(239,220,228); #prawa { height: 100px; top: 200px; left: 100px; border color: rgb(128,128,128); background: rgb(239,220,228); </STYLE> </HEAD> <BODY> <DIV id="lewa"> lewa strona </DIV> <DIV id="prawa">prawa strona</div> </BODY> </HTML>
5 <!DOCTYPE HTML PUBLIC " //W3C//DTD HTML 4.01 Transitional//EN" " <HTML> <HEAD> <TITLE>Dokumentacja</TITLE> <META http equiv="content Type" content="text/html; charset=windows 1250"> <STYLE type="text/css"> BODY { background: url(tlo.jpg) no repeat; background position: 50% 50px; margin:0px; font family: Verdana; font style: normal; font weight: normal; font size: 10pt; text align:center; DIV#glowna { width: 400px; margin top:100px; DIV#a1 { left: 50px; top: 0px; DIV#a2 { left: 150px; top: 100px; DIV#a3 { left: 100px; top: 80px; DIV#a4 { left: 80px; top: 120px; IMG {border:none;
6 </STYLE> </HEAD> <BODY> <DIV id="glowna"> <DIV id="a1"> </DIV> <DIV id="a2"> </DIV> <DIV id="a3"> </DIV> <DIV id="a4"> </DIV> </DIV> </BODY> </HTML>
7 Zanim przystąpimy do kodowania Przed rozpoczęciem pisania kodu HTML i CSS witryny należy ustalić główne założenia dotyczące serwisu. Zagadnieniami wymagającymi zdefiniowania są: docelowa grupa przeglądarek oraz szerokość układu witryny. Przeglądarki internetowe dzielimy na trzy główne rodziny: pierwsza generacja: przeglądarki nie wspierające CSS, druga generacja: przeglądarki częściowo wspierające CSS, trzecia generacja: przeglądarki z pełnym wsparciem CSS. Do pierwszej rodziny zaliczamy między innymi przeglądarki tekstowe oraz archaiczne wersje współczesnego oprogramowania, na przykład Inernet Explorer 4.0 czy Netscape 4. Oprogramowanie to interpretuje wybiórczo kilka podstawowych atrybutów CSS. Przeglądarki drugiej generacji, należą do nich na przykład Netscape 6 oraz Internet Explorer 5, interpretują dużą część CSS, jednak robią to w sposób na tyle niezgodny i niespójny, że przygotowywanie układu witryny w oparciu o style jest zadaniem trudnym. Wreszcie najnowsza generacja przeglądarek, Internet Explorer 6, Opera 7, Firefox oraz Netscape 8, zawiera pełne wsparcie dla CSS różniąc się jedynie w szczegółach. Witryna jest przygotowana z myślą o najnowszych wersjach przeglądarek, które posiadają pełne wsparcie dla CSS. Pozwala to na korzystanie ze wszystkich atrybutów CSS dotyczących warstw oraz pudełek. Drugim ważnym zagadnieniem jest szerokość układu witryny. Powszechnie stosowanymi rozwiązaniami są: układ o stałej szerokości, niezależnej od szerokości okna przeglądarki, układ o szerokości zależnej od szerokości okna przeglądarki, układ o szerokości zależnej od szerokości okna przeglądarki posiadający minimalną szerokość. Witryna posiada stałą szerokość wynoszącą 760 pikseli. Szerokość ta pozwala na pełne wyświetlenie witryny na monitorach o rozdzielczości od wzwyż. Owe 40 pikseli marginesu jest zarezerwowane na pionowy pasek przewijania, który jest wyświetlany na podstronach zawierających więcej tekstu. W ten sposób na witrynie nigdy nie pojawia się poziomy pasek przewijania uznawany za błąd w układzie witryny. W pierwszym kroku w kodzie HTML umieszczamy sekcję div, która będzie pojemnikiem na całą zawartość strony. Sekcji tej nadajemy style: #strona { margin : auto; border : 1px solid black; padding : 0px; width : 758px;
8 Dzięki czemu będzie ona wyśrodkowana na stronie (właściwość margin) oraz będzie posiadała zadaną szerokość. Szerokość całego elementu div wynosi 760 pikseli, z czego 758 jest przeznaczone na zawartość, a 2 na obramowanie. Cała zawartość witryny będzie umieszczona wewnątrz głównego pojemnika div o identyfikatorze #strona. Style zapisujemy w pliku style.css i dołączamy do kodu strony w następujący url(style.css); dzięki czemu staną się one niedostępne dla przeglądarek pierwszej generacji. W ten sposób stare przeglądarki (pierwszej generacji) wyświetlą wprawdzie nieatrakcyjną, ale za to czytelną witrynę. Pierwsza z ilustracji przedstawia wygląd witryny zawierającej jedynie głowne pudełko div#strona po modyfikacji koloru tła. Pojemnik główny witryny dzielimy następnie na cztery podobszary: nagłówek, stopkę, lewą kolumnę oraz prawą kolumnę. Podział ten realizujemy umieszczając w głównym pojemniku cztery sekcje div, tak jak to przedstawiono na listingu 1. <div id="strona"> <div id="naglowek"> <div id="kolumnalewa"> <div id="kolumnaprawa"> <div id="stopka"> Szerokości nagłówka i stopki odpowiadają szerokości głównego pojemnika i wynoszą 758 pikseli. Natomiast szerokości kolumn lewej i prawej mają tak ustalone wartości, by łącznie tworzyły blok o szerokości 758 pikseli. Kolumna lewa nie posiada obramowania, a jej szerokość wynosi 180 pikseli. Natomiast kolumna prawa posiada lewą jednopikselową krawędź, więc jej szerokość musi wynosić 577 pikseli. Tak by w sumie: = 758 Elementy div zawarte w głównym kontenerze przylegają ściśle do siebie nawzajem i do brzegów głownego pojemnika. Efekt ten osiągniemy za pomocą atrybutów margin, padding oraz border nadając im wartości: margin : 0px; border : none; padding : 0px;
9 Szerokości elementów ustalamy oczywiście atrybutem width. Kolumny lewą i prawą umieszczamy z lewej i z prawej strony za pomocą atrybutów float: float : left; float : right; Natomiast stopkę przesuwamy pod spód kolumn lewej i prawej atrybutem clear: clear : both; Otrzymany układ, z zaznaczeniem poszczególnych fragmentów i ich szerokości jest przedstawiony na ilustracji 2. Na tym etapie pracy warto sprawdzić, czy otrzymana witryna wygląda zgodnie z oczekiwaniami we wszystkich przeglądarkach, na jakie jest opracowywana. W naszym przypadku są to cztery przeglądarki: Internet Explorer 6, Opara 7, FireFox oraz Netscape 8. Po stwierdzeniu, że witryna wygląda dobrze należy jeszcze dokonać sprawdzenia faktycznych rozmiarów sekcji div. W tym celu modyfikujemy kolor tła wszystkich sekcji div, a następnie dokonujemy pomiaru na przykład za pomocą programu Miarka. Jakiekolwiek niedociągnięcia zbagatelizowane na tym poziomie (w szczególności choćby jednopikselowa różnica szerokości którejkolwiek z sekcji div) będą powodowały zamieszanie w kolejnych etapach pracy. Z tym, że im później, tym trudniej będzie odnaleźć błąd w kodzie HTML czy CSS. Następnie kolumny lewą i prawą dzielimy na mniejsze obszary. Tym razem podział jest poziomy. W kolumnie lewej umieszczamy dwie sekcje div: jedną przeznaczoną na ilustrację, drugą na menu pionowe. Sekcje te otrzymają identyfikatory obrazokladka oraz menupion. Obie one mają szerokość 180 pikseli i ściśle przylegają do brzegów sekcji nadrzędnej (czyli div#kolumnalewa). Podobnie, w kolumnie prawej umieszczamy dwie sekcje div. Pierwsza z nich, div#menupoziome, jest przeznaczona na menu, zaś druga, div#tresc na zawartość strony. Sekcje te przylegają ściśle do sekcji nadrzędnej (czyli div#kolumnaprawa) i obie mają szerokość 577 pikseli. Otrzymamy kod HTML zawiera wszystkie elementy div, jakie będą stanowiły układ witryny. Kod ten jest zawarty na listingu 2. <div id="strona"> <div id="naglowek"> <div id="kolumnalewa"> <div id="obrazokladka"> <div id="menupion">
10 <div id="kolumnaprawa"> <div id="menupoziome"> <div id="tresc"> <div id="stopka"> Ponownie dokonujemy sprawdzenia wyglądu witryny oraz rozmiaru poszczególnych sekcji. Kolejnym etapem tworzenia witryny jest przygotowanie menu poziomego i pionowego oraz ilustracji w lewym górnym rogu witryny. Ilustracja jest wstawiona zwykłym elementem img, zaś menu tworzymy w oparciu o listy wypunktowane ul i odpowiednie arkusze stylów. Niezmiernie ważne jest, by otrzymane menu miało odpowiednią szerokość. Menu pionowe umieszczone w lewej kolumnie musi mieć szerokość 180 pikseli, natomiast menu poziome, umieszczone w kolumnie prawej ma szerokość 577 pikseli. Najpierw przygotowujemy menu pionowe, a następnie menu poziome. Dla ułatwienia, oba menu przygotowujemy na osobnej pustej stronie, zawierającej ewentualnie jedną sekcję div. Gdy menu jest gotowe i ma odpowiednią szerokość (wygląd i rozmiar sprawdzamy we wszystkich przeglądarkach!), wklejamy je w stronę z poprzedniego kroku, po czym dokonujemy sprawdzenia otrzymanej witryny. Kończąc pracę nad witryną, dodajemy treść nagłówka oraz stopkę strony. Elementy te wymagają jedynie stylów modyfikujących atrybuty czcionki. Ich rozmiar i położenie zostały już ustalone. W stopce witryny możemy umieścić hiperłącza do adresów oraz Odnośniki takie umożliwią szybkie sprawdzenie poprawności kodu HTML oraz CSS walidatorami W3C (oczywiście strona musi być uprzednio opublikowana w Internecie). W miejscu przeznaczonym na treść witryny umieszczamy kilka akapitów tekstu Lorem ipsum. Lorem ipsum to początkowe dwa wyrazy rozprawy napisanej w starożytności przez Cycero. Rozprawa ta jest od ponad 500 lat stosowana przez drukarzy do sprawdzania krojów pism i układu graficznego drukowanych publikacji. Powodem tego jest fakt, że oglądanie tekstu w nieznanym języku pozwala się skupić na jego wizualnych aspektach. Tekst w znanym języku podświadomie zaczynamy czytać, co odrywa uwagę od jego graficznych cech.
11 W środowisko twórców stron internetowych tekst Lorem ipsum jest powszechnie stosowany jako wypełniacz szkieletów stron. Więcej informacji oraz pełny tekst Lorem ipsum znajdziemy na stronach Wikipedii oraz pod adresami i W ten sposób otrzymamy witrynę, w której układ strony jest oddzielony fizycznie od treści. Należy odpowiednio zmodyfikować adresy URL zawarte w znacznikach <a href=""> menu poziomego i pionowego Oczywiście treść zawarta w sekcji div#tresc nie może nigdy przekroczyć maksymalnej dopuszczalnej szerokości, czyli 577 pikseli. Jeśli tak się stanie, układ witryny będzie się rozjeżdżał. Do ustalenia stylów elementów zawartych w sekcji div#tresc stosujemy selektory typu potomek. Na przykład akapity zawarte w treści formatujemy umieszczając w pliku stylów wpisy: #tresc p {... Stosowanie selektorów typu potomek z jednej strony nie będzie powodowało żadnych zmian w formatowaniu elementów odpowiedzialnych za układ witryny, a z drugiej nie będzie wymagało umieszczania w kodzie HTML wszechobecnych identyfikatorów. Powyższy selektor #tresc p dotyczy jedynie elementów p zawartych wewnątrz sekcji div o identyfikatorze tresc: <div id="tresc"> <p>lorem ipsum...</p>
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
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;
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
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
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ą
I. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
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:
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
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
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 (HyperText Markup Language)
HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy
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
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
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
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
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ć
HTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
plansoft.org Zmiany w Plansoft.org
Zmiany w Plansoft.org Mapy Google... 1 Tworzenie mapy... 2 Wprowadzanie szerokości i długości geograficznej... 2 Tworzenie mapy... 2 Dostosowanie wyglądu mapy... 3 Ograniczanie liczby zasobów do wyświetlenia
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"
Ćwiczenia laboratoryjne nr 8 Podstawy języka XML.
Prezentacja Danych i Multimedia II r Socjologia Ćwiczenia laboratoryjne nr 8 Podstawy języka XML. Celem ćwiczeń jest poznanie zasad tworzenia dokumentów w oparciu o język XML oraz metod modyfikacji ich
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
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
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
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
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
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...
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
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
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
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
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
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
H2.cjk { font-family: "Microsoft YaHei"; font-size: 14pt; font-style: italic; font-weight:
Kod konspektu wygenerowany przez OpenOffice Writer
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
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
2 Podstawy tworzenia stron internetowych
2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument
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
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.
Ćwiczenie 9 - CSS i wstawianie CSS
Ćwiczenie 9 - CSS i wstawianie CSS Wprowadzenie: Od tego ćwiczenia zajmować się będziemy CSS czyli Kaskadowymi Arkuszami Stylów (Cascading Style Sheets). CSS stanowią uzupełnienie dla HTML-a. HTML odpowiada
Przedmiot: Grafika komputerowa i projektowanie stron WWW
KARKONOSKA PAŃSTWOWA SZKOŁA WYŻSZA Kierunek: Dziennikarstwo i komunikacja społeczna Przedmiot: Grafika komputerowa i projektowanie stron WWW 1 opracował: dr inż. Jerzy Januszewicz HTML (HyperText Markup
Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz
Wykład 2 TINT XHTML tabele i ramki Zofia Kruczkiewicz 1. Tabele 1.1. Przykład tabeli zawierającej kalendarz na miesiąc marzec ... definiuje tabelę Atrybuty: border ="" obramowanie tabeli,
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
HTML podstawowe polecenia Szkielet dokumentu: 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
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
URL: http://www.ecdl.pl
Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo
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
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
Znaczniki języka HTML
www.math.uni.lodz.pl/ radmat Elementy inline ... Elementy inline ... ... Elementy inline ... ... ... Elementy inline
zmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >
tytuł dokumentu treść dokumentu
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ść
2. Prezentacja wizualna
2. Prezentacja wizualna 2.1. Opis rozdziału Rozdział ten przedstawia jak stworzyć przykładowy układ graficzny dla naszej gry w HTML5 i CSS3, które w dalszej części poradnika zostaną wykorzystane do stworzenia
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
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
STRONY INTERNETOWE mgr inż. Adrian Zapała
1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText
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
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 jak zrobić prostą stronę www
HTML jak zrobić prostą stronę www Z tej prezentacji dowiemy się: - co to jest HTML - jak znając podstawy HTML'a zrobić prostą stronę Co to jest HTML? HTML = HyperText Markup Language, czyli język znaczników
Programowanie WEB PODSTAWY HTML
Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony
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
Tworzenie szablonów użytkownika
Poradnik Inżyniera Nr 40 Aktualizacja: 12/2018 Tworzenie szablonów użytkownika Program: Plik powiązany: Stratygrafia 3D - karty otworów Demo_manual_40.gsg Głównym celem niniejszego Przewodnika Inżyniera
Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych
rk Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych pojęć, prawdopodobnie zastanawiasz się, kiedy zaczniesz
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
CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).
Co to jest CSS? CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co mogę zrobić z CSS? CSS jest językiem stylu określającego układ graficzny dokumentów HTML. Na przykład, CSS
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
Zawartość specyfikacji:
Zawartość specyfikacji: Wielkość, waga i kodowanie Umieszczanie obrazków w kreacji Elementy niedopuszczalne Nazewnictwo plików Stopka mailingu Nie spełniam wymagań pracodawcy Waga, wielkość i kodowanie
Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne
Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo
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ć
XHTML Budowa strony WWW
XHTML Budowa strony WWW Wydział Fizyki Politechnika Warszawska 2019 dr inż. Marzena Sala-Tefelska Założenie strony www na serwerze student 1. Tworzymy główny plik o nazwie index.html (plik tekstowy). UWAGA!:
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ę
Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony różnych stylów.
Kaskadowe arkusze stylów Kaskadowe arkusze stylów CSS (Cascading Style Sheets) służą do definiowania sposobu wyświetlania elementów HTML. Pozwalają np. określać rozmiar i kolor czcionki, definiować odstępy
Marginesy, dopełnienia i obramowanie
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ą
Ć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ść
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
PORADNIK KODOWANIA: CSS
PORADNIK KODOWANIA: CSS Przygotowane przez Jakuba Skórzyńskiego SPIS TREŚCI Wstęp... 3 Jak zacząć?. 4 Składnia 5 Klasy i unikaty.. 7 Rzeczy ważne 8 Najważniejsze komendy 9 Porady i Triki. 11 2 Wstęp Nazywam
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
Pozycjonowanie i poruszanie warstw
Pozycja warstwy na ekranie może być zmieniana poprzez modyfikację właściwości top i left obiektu style. Odpowiadają one za położenie lewego górnego rogu; pierwsza za współrzędną x, druga y. Umiejscowienie
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
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
1. HTML dla zielonych
www.kurshtml.edu.pl 1. HTML dla zielonych Jeśli uważasz, że pisanie stron w języku HTML jest dla Ciebie "czarną magią", a sama strona jest jakimś tajemniczym i bardzo skomplikowanym dokumentem, to się
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
Adobe InDesign lab.1 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Podstawy pracy z aplikacją Układ strony... 2.
Spis treści: 1 Podstawy pracy z aplikacją... 2 1.1 Układ strony... 2 strona 1 z 7 1 Podstawy pracy z aplikacją InDesign jest następcą starzejącego się PageMakera. Pod wieloma względami jest do niego bardzo
Wybrane znaczniki HTML
Wybrane znaczniki HTML Struktura dokumentu HTML informacje o dokumencie i plikach zewnętrznych zawartość wyświetlana w przeglądarce wraz z tagami formatującymi
p { color: yellow; font-weight:bold; }
Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 13: CSS Wstęp Cascading Style Sheets (Kaskadowe Arkusze Styli, w skrócie CSS) jest językiem, który opisuje sposób w jaki będzie wyświetlana
Zadanie 9. Projektowanie stron dokumentu
Zadanie 9. Projektowanie stron dokumentu Przygotowany dokument można: wydrukować i oprawić, zapisać jako strona sieci Web i opublikować w Internecie przekonwertować na format PDF i udostępnić w postaci
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets) 1. Wprowadzenie Selektory należą do kluczowych pojęć, wskazują obiekty, którym przypisujemy jakiś zestaw
Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0
Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0 UWAGA 1: Przed dokonaniem jakichkolwiek zmian, zalecamy skopiować wcześniej kod html modułu do pliku na lokalnym dysku. W przypadku problemów ułatwi
Wprowadzenie do języka HTML
Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system
Zastosowanie kaskadowych arkuszy stylów (CSS - Cascading Style Sheets) w technologii JavaServer Faces
Zastosowanie kaskadowych arkuszy stylów (CSS - Cascading Style Sheets) w technologii JavaServer Faces wg http://www.w3.org/tr/css3-selectors/ http://courses.coreservlets.com/course-materials/pdf/jsf/jsf2/jsf2-
KATEGORIA OBSZAR WIEDZY
Moduł 3 - Przetwarzanie tekstów - od kandydata wymaga się zaprezentowania umiejętności wykorzystywania programu do edycji tekstu. Kandydat powinien wykonać zadania o charakterze podstawowym związane z
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
Wykład 1: HTML (XHTML) Michał Drabik
Wykład 1: HTML (XHTML) Michał Drabik 1 Czyli to wszystko co trzeba wiedzieć aby zacząć tworzyć strony internetowe. 2 HTML 4 HTML = HyperText Markup Language Hipertekstowy język znaczników umożliwiający
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:
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)
Pierwsza strona internetowa
HTML i CSS Pierwsza strona internetowa Rozpoczynając pracę na swoim komputerze powinieneś posiadać: dowolny edytor tekstowy (np. Notatnik), dostęp do Internetu, Microsoft Visual Studio. Podstawy formatowania
Nowy szablon stron pracowników ZUT
Nowy szablon stron pracowników ZUT Uczelniane Centrum Informatyki ZUT przygotowało nowy szablon stron pracowników, zunifikowany z obecnymi stronami ZUT. Serdecznie zachęcamy Państwa do migracji na nowy
Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.
Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 26 lutego 2006 roku Czas trwania zajęć: 90 minut, przedmiot: TI Temat lekcji: Tworzenie strony internetowej
Tutorial. HTML Rozdział: Ramki
Autor: Mateusz Wojtyna Opis ogólny Tutorial HTML Rozdział: Ramki Ramki są bardzo pomocnym narzędziem przy tworzeniu strony internetowej jeżeli na przykład chcemy stworzyć sobie menu wszystkich podstron