body html - Kurs HTML i CSS
Dla nauczycieli / Scenariusz lekcji informatyki dla branżowej szkoły I stopnia...10 min - Wprowadzenie do HTML (możesz się posłużyć podcastem) Omówienie budowy dokumentu HTML5. Wyjaśnienie znaczenia elementów <html>, <head>, <body>. 10 min - Praca z edytorem Uczniowie otwierają edytor HTML i tworzą nowy dokument. Dodają tytuł i nagłówek. 15 min - Ćwiczenie praktyczne Uczniowie dodają akapity tekstu i zapisują plik HTML. Otwierają stronę w przeglądarce. 10 min - Omówienie efektów pracy i błędów Lekcja 2 - Dodawanie obrazków i linków Czas trwania...
Szablon strony na DIV-ach / Responsywny szablon...wiedzę nabytą w tym rozdziale i stworzyć najprostszy szablon responsywny korzystający z niezmiennego kodu HTML przedstawionego na wstępie. html, body { background-color: #fff; color: #000; margin: 0; padding: 0; } #NAGLOWEK { background-color: #888; } #MENU { background-color: #ccc; } #TRESC { background-color: #fff; } #STOPKA { background-color: #888; } @media only all and (min-width: 800px) { #MENU { width: 150px; float: left; overflow...
Nagłówek i treść HTML / Struktura dokumentu HTMLZnaczniki <body>...</body> oraz <meta> określają pewne informacje na temat strony jako całości. Polecenie BODY powinno wchodzić w skład każdego dokumentu HTML. Stanowi ono właściwą treść, czyli tzw. ciało, w którym zawierają się wszystkie inne znaczniki, dotyczące formatowania, a także zwykły tekst. W jednym dokumencie może się znajdować tylko jeden znacznik <body> - zaraz po nagłówku strony (<head>...</head>). Natomiast znacznik <meta> stanowi tzw. metainformację, pozwalającą określić pewne...
Galeria zdjęć HTML / Skrypt galerii zdjęć...GalleryView.prototype.open = function(goBack, goForward, onClose, onLoad) { this.onLoad = onLoad; this._overflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; this.container = this._createContainer(); this.progress = this._createPropress(); this.container.appendChild(this.progress); this.caption = this._createCaption(); this.container.appendChild(this.caption); this.back = this._createNavigation('❮', this.style.back, goBack)...
- Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego
Jeżeli nie odpowiada nam podstawowy wygląd menu, można go zmienić wykorzystując polecenia CSS. W tym celu w pliku menu.css należy wkleić np.: #menu0 { width: 200px; margin: 10px; padding: 0; } #menu0 dt { background-color: #888; color: #fff; font-weight: bold; text-align: center; cursor: pointer; margin: 10px 0 0 0; padding: 2px; } #menu0 dd { background-color: #eee; color: #000; border-width: 0 1px 1px 1px; border-style: solid; border-color: #888...
- HTML5 / Główna treść <main>
...FORM. Przykład <main> <!doctype html> <html lang="pl"> <head> <meta charset="utf-8"> <title>Matrix - Serwis kinomaniaków</title> <head> <body> <header> Serwis kinomaniaków <nav> <ul> <li><a>Matrix</a></li> <li><a href="incepcja.html">Incepcja</a></li> <li><a href="trzynaste-pietro.html">Trzynaste piętro</a></li> </ul> </nav> </header> <main> <h1>Matrix</h1> <nav> <ul> <li><a href="#czym-jest-matrix">Czym jest Matrix?</a></li>...
- XHTML / Wymagania stawiane dokumentom XHTML
...<html xmlns="http://www.w3.org/1999/xhtml" lang="pl"> <head> <title>Tytuł dokumentu</title> </head> <body> <p>Przejdź do <a href="http://example.org/">example.org</a>.</p> </body> </html> Na serwerach obsługujących skrypty PHP (pliki z rozszerzeniami *.php) po wpisaniu deklaracji XML może wystąpić błąd. Aby go uniknąć, należy zamiast deklaracji XML wpisać: <?php echo '<'.'?xml version="1.0" encoding="UTF-8"?'.'>'."\n"; ?> Niektóre...
- HTML5 / Czy XHTML umarł?
...połączenie. Przykładem struktury w języku HTML mogą być ramy dokumentu, składające się z nagłówka <head>...</head> i właściwego ciała dokumentu <body>...</body>, a wszystko to umieszczone wewnątrz znacznika <html>...</html>.
- Podcast HTML / #2 Nagłówek i treść HTML
...W kontekście tworzenia stron WWW, niezwykle istotne jest zrozumienie struktury dokumentu HTML, w tym różnicy między nagłówkiem (<head>) a ciałem (<body>). Nagłówek zawiera metainformacje, które nie wpływają bezpośrednio na wygląd dokumentu, ale są równie ważne. Metainformacje i ich znaczenie Metainformacje, definiowane za pomocą znacznika <meta>, pozwalają określić ogólne wiadomości dotyczące dokumentu, takie jak sposób kodowania znaków, opis zawartości czy język. Zastosowanie...
- CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">
...content="Tu wpisz opis zawartości strony"> <title>Tu wpisz tytuł strony</title> <link rel="stylesheet" href="style.css"> </head> <body> Tu wpisuje się treść strony </body> </html> Dzięki znacznikowi <link> do dokumentu zostanie automatycznie dołączony arkusz stylów. W nim właśnie wpisuje się wszystkie polecenia zmieniające wygląd strony. Ważne jest tylko, aby ten plik posiadał rozszerzenie *.css. W powyższym przykładzie jest to plik pod nazwą "style.css", który znajduje...