Model Box

Karta pracy 2016/2017

Adres:
http://plotkarka.eu/KP/css3-box.html
Autor:
Radosław Kowaluk

Model formatowania elementów blokowych

Utwórz plik css3-box.html z podstawową strukturą strony WWW w standardzie HTML5 .

<!DOCTYPE html>
<html>
 <head>
  <title>Modele formatowania</title>
  <meta charset="utf-8"/>
  <style>

  </style>
 </head>
 <body>
  <header>Nagłówek strony</header>
  <nav>Menu strony</nav>
  <main>Tresć strony</main>
  <footer>Stopka strony</footer>
 </body>
</html>

Marginesy zewnętrzne1

W elemencie style dodaj kod.

header { 
margin: auto;
}

Zapisz zmiany i odśwież podgląd strony.

Marginesy wewnętrzne2

W elemencie style dodaj kod.

margin: 20px auto;
border: 1px solid;
padding: 10px;
}

Zapisz zmiany iodśwież podgląd.

Szerokość3

W elemencie style dodaj kod.

padding: 10px; 
width: 800px;
}

Zapisz zmiany i odśwież podgląd.

Wysokość4

W elemencie style dodaj kod.

width: 800px;
height: 100px;
}

Zapisz zmiany i odśwież podgląd.

Oblewanie 5

W elemencie style dodaj kod.

}
nav, main {
float: left;
}
</style>

Zapisz zmiany i odśwież podgląd.

Przyleganie 6

W elemencie style dodaj kod.

}
footer {
clear: both;
}
</style>

Zapisz zmiany i odśwież podgląd.

Sprawdzanie poprawność kodu strony

W przeglądarce internetowej wpisz adres validator.w3.org/unicorn/

Wybierz zakładkę Lokalny plik

Za pomocą przycisku Przeglądaj... otwórz plik modele_formatowania.html

Naciśnij przycisk Sprawdź


  1. Styl {margin:} - definiuje margines elementu. Wartością mogą być liczby z jednostka długości, procent lub auto.
    Wartość auto - powoduje, że przeglądarka ustawia marginesy automatyczne.
    Podanie jednej wartości ustala ją dla wszystkich marginesów.
    Dwie wartości: pierwsza - margines górny i dolny, druga - margines prawy i lewy.
    Trzy wartości: pierwsza - margines górny, druga - margines prawy i lewy, trzecia - margines dolny.
    Cztery wartości to odpowiednio: prawy, dolny, lewy i górny margines.
    Uwaga: Styl border (obramowanie) jest omówiony w karcie Tło i obramowania.
  2. Styl {padding:} – definiuje margines wewnętrzny elementu. Wartością mogą być liczby z jednostka długości, procent lub auto.
    Wartość auto - powoduje, że przeglądarka ustawia marginesy automatyczne.
    Podanie jednej wartości ustala tę wartość dla wszystkich marginesów.
    Dwie wartości: pierwsza - margines górny i dolny, druga - margines prawy i lewy.
    Trzy wartości: pierwsza - margines górny, druga - margines prawy i lewy, trzecia - margines dolny.
    Cztery wartości to odpowiednio: prawy, dolny, lewy i górny margines..
  3. Styl {width:} - definiuje szerokość. Wartość liczba z jednostka długości lub procent.
  4. Styl {height:} - definiuje szerokość. Wartość liczba z jednostka długości lub procent.
  5. Styl {float:} – definiuje kierunek oblewania elementu przez tekst lub element. Wartości stylu mogą być równe: none – brak oblewania, left – element znajduje się z lewej strony a oblewany jest z prawej strony, right – element znajduje się po prawej stronie i oblewany jest z lewej strony.
  6. Styl {clear:} – definiuje kierunek oblewania elementu przez tekst lub element. Wartości stylu mogą być równe: none – brak wpływu na float, left – element będzie poniżej wszystkich z float:left;, right – element będzie zsunięty poniżej wszystkich z float:right;, both - element będzie poniżej wszystkich poprzedzających go.

Model Box

Wyświetlanie1

W elemencie style dodaj kod.

a { 
display: block;
}

W elemencie nav dodaj kod.

Menu: <a href="#">Link</a>

Zapisz zmiany i odśwież podgląd.

Marginesy zewnętrzne: górny2, prawy3, dolny4, lewy5

W elemencie style dodaj kod.

display: block;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

Zapisz zmiany i odśwież podgląd. Przetestuj okno przeglądarki.

Marginesy wewnętrzne: górny6, prawy7, dolny8, lewy9.

W elemencie style dodaj kod.

margin-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

Zapisz zmiany i odśwież podgląd.

Maksymalna szerokość10 i Minimalna szerokość11

W elemencie style dodaj kod.

body {
max-width: 987px;
min-width: 800px;
}

Zapisz zmiany i odśwież podgląd. Przetestuj okno przeglądarki.

Maksymalna wysokość10 i wysokość13

W elemencie style dodaj kod.

min-width: 610px;
max-height: 377px;
min-height: 233px;
}

Zapisz zmiany i odśwież podgląd. Przetestuj okno przeglądarki.

Przycinanie 14

W elemencie style dodaj kod.

min-height: 233px;
overflow: scroll;
}

Zapisz zmiany i odśwież podgląd.

Widzialność 15

W elemencie style dodaj kod.

footer {
visibility: hidden;
}

Zapisz zmiany i odśwież podgląd. Zmień widzialność.

Wgrywanie plików na serwer

Umieść plik css3-box.htmlna serwerze po sprawdzeniu poprawności.

Zadania

Zastosuj poznane wiadomości w pliku index.html.


  1. Styl {display:} - definiuje szerokość. Wartościami sa: inline; (element liniowy), block; (element blokowy), none; (usunięcie) inline-block; (element liniowy o charakterze blokowym).
  2. Styl {margin-top:} - margines górny elementu.
  3. Styl {margin-right:} - margines lewy elementu.
  4. Styl {margin-bottom:} - margines dolny elementu.
  5. Styl {margin-left:} - margines lewy elementu.
  6. Styl {padding-top:} - margines wewnętrzny, górny.
  7. Styl {padding-right:} - margines wewnętrzny, prawy.
  8. Styl {padding-bottom:} - margines wewnętrzny, dolny.
  9. Styl {padding-left:} - margines wewnętrzny, lewy.
  10. Styl {max-width:} - definiuje maksymalną szerokość. Wartość liczba z jednostka długości.
  11. Styl {min-width:} - definiuje minimalną szerokość. Wartość liczba z jednostka długości.
  12. Styl {max-height:} - definiuje maksymalną wysokość. Wartość liczba z jednostka długości.
  13. Styl {min-height:} - definiuje minimalną wysokość. Wartość liczba z jednostka długości.
  14. Styl {overflow:} - definiuje przycinanie i paski przewijania elementu. Wartościami sa: visible (widoczny), hidden (ukryty), scroll (widoczne suwaki), auto (automatyczne suwaki), no-display (niewidoczne widoczne suwaki), no-content (brak zawartości)
  15. Styl {visibility:} - definiuje widzialność elementu. Wartościami sa: visible (widoczny), hidden (ukryty), collapse (ukryta komórka lub wiersz tabeli)

Wykaz skrótów

Dodatki pracy 2013/2014

Adres:
http://plotkarka.eu/b/abbr.html
Autor opracowania:
Radosław Kowaluk

AAC
advanced audio coding
AI
Artificial Intelligence
AIML
Artificial Intelligence Markup Language
API
Application Programming Interface
ASCII
American Standard Code for Information Interchange
BMP
? (file format)
BTS
Base Transceiver Station
CDR
? (file format Corel Corporation)
CMD
Cross Document Messaging
CMS
Content Management System
CMY
cyan, magenta, yellow
CMYK
cyan, magenta, yellow and key (black)
CSS
Cascading Style Sheets
DHTML
Dynamic HyperText Markup Language
DOM
Document Object Model
DTD
Document Type Definition
ECMA
European Computer Manufacturers Association
EOT
Embedded Open Type
FLAC
Free Lossless Audio Codec (format pliku dźwiękowego)
FTP
File Transfer Protocol
GIF
Graphics Interchange Format
GNU
GNU’s not Unix
GPL
General Public License
GPS
Global Positioning System
HSL
Hue Saturation Lightness
HSLA
Hue Saturation Lightness Alpha
HSV
Hue Saturation Value (brightness)
HTML
HyperText Markup Language
HTTP
Hypertext Transfer Protocol
HTTPS
Hypertext Transfer Protocol Secure
IE
Internet Explorer
IP
Internet Protocol
IT
Information Technology
JNG
JPEG network graphics
JPEG
(file format), Joint Photographic Experts Group
JPG
JPEG
ISO
International Organization for Standardization
i18n
internationalization
MDN
Mozilla Developer Network
MIME
Multipurpose Internet Mail Extensions
MP3
MPEG-1/MPEG-2 Audio Layer 3
NEF
Nikon Electronic File
PCX
? PiCture eXchange
PCM
Pulse Code Modulation (format dźwięku)
PHP
PHP/FI - Personal Home Page/Forms Interpreter
PNG
Portable Network Graphics
PSD
? (file format Photoshop Document)
RAW
? (format graficzny)
RGB
Red Green Blue
RGBA
Red Green Blue Alpha
SGML
Standard Generalized Markup Language
SMIL
Synchronized Multimedia Integration Language
SWF
small web format
sRGB
standarised RGB (Red, Green, Blue)
SQL
Structured Query Language
SVG
Scalable Vector Graphics
TCP/IP
Transmission Control Protocol / Internet Protocol
TIFF
Tagged Image File Format
TXT
text file
URI
Uniform Resource Identifier
URL
Uniform Resource Locator
UTF
Unicode Transformation Format
XDM
Cross-Document Messaging
XML
Extensible Markup Language
XHTML
Extensible HyperText Markup Language
W3C
World Wide Web Consortium
WAI
Web Accessibility Initiative
WaSP
Web Standards Project
WAV
WAVE (format pliku dźwiekowego)
WCAG
Web Content Accessibility Guidelines
WMA
Windows Media Audio
WWW
World Wide Web