html

[SCHOOL] html lessons
git clone git://git.kocotian.pl/html.git
Log | Files | Refs

commit f9b3f74636b64027661dae3f2f8c3f1a885a9e50
Author: kocotian <kocotian@kocotian.pl>
Date:   Tue,  9 Mar 2021 09:22:29 +0100

initial

Diffstat:
Abrednie.html | 122+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Agrafika.png | 0
Aindex.html | 31+++++++++++++++++++++++++++++++
Aindex_piątek.html | 11+++++++++++
Aobrazek.png | 0
Aobrazki.html | 17+++++++++++++++++
Aplik.html | 50++++++++++++++++++++++++++++++++++++++++++++++++++
Aplik2.html | 24++++++++++++++++++++++++
Aplik3.html | 36++++++++++++++++++++++++++++++++++++
Astyle.css | 41+++++++++++++++++++++++++++++++++++++++++
10 files changed, 332 insertions(+), 0 deletions(-)

diff --git a/brednie.html b/brednie.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + <meta name="description" + content="Przykładowa strona do stylizowania przy użyciu CSS" /> + <title>Strona główna</title> + <link rel="stylesheet" href="style.css" /> + </head> + <body> + <h1>Nagłówek naszej strony</h1> + <img src="grafika.png" /> + <h2>10 najlepszych, angielskich słów na literę N</h2> + <ol reversed="true"> + <li>Negative</li> + <li>Nevada</li> + <li>Nissan</li> + <li>Number</li> + <li>Nine</li> + <li>No</li> + <li>Nick</li> + <li>Nigeria</li> + <li>Noob</li> + <li>Nice</li> + </ol> + <h2>Lorem ipsum</h2> + <p> + Lorem velit mollitia perferendis error sapiente Quibusdam quisquam labore + quibusdam aliquid adipisci magni Temporibus impedit ea magnam dolor delectus + delectus Totam tempora iusto laboriosam porro harum Quas blanditiis adipisci + illum? + </p> + <p> + Dolor labore rem quia quasi sed Unde distinctio distinctio distinctio + ipsa distinctio. Asperiores quidem neque impedit doloribus deleniti exercitationem + amet Ea eligendi autem voluptate dolores temporibus Et error nobis provident? + </p> + <p> + Elit aut dicta illum similique magni? Commodi esse aspernatur eligendi + libero dolor Aperiam cumque veritatis explicabo ipsam magnam Maiores + est molestias praesentium laudantium saepe Vero repellat cum molestias + sapiente molestiae + </p> + <p> + Dolor qui vel tenetur cum eum corrupti rerum! Velit sunt nihil deleniti + earum totam molestias Numquam inventore eligendi quidem nesciunt voluptates, + nisi. Doloremque voluptas neque saepe excepturi accusamus dignissimos + numquam + </p> + <p> + Consectetur voluptatem assumenda at maiores eaque odit? Ipsam soluta + libero eveniet molestiae quae? Asperiores laborum reprehenderit exercitationem + laborum hic! Debitis aliquid placeat quae exercitationem nam Rerum qui + dolor iste ab + </p> + <p> + Sit magni ullam atque ipsum velit. Impedit commodi necessitatibus tempora + amet ex officiis molestiae ab inventore? Reiciendis tempore incidunt + eaque reprehenderit exercitationem ullam modi alias, atque? Fugiat assumenda + vitae laborum + </p> + <p> + Est quaerat ipsa nam accusantium non optio cupiditate facilis. Tempore + aut et cum repellat. Eaque quo perferendis assumenda qui. Voluptas nihil + ducimus fuga qui fugiat culpa est. + </p> + <p> + Quam eos ex quidem. Voluptatem earum nihil impedit occaecati qui vel + mollitia. Totam qui illo laudantium doloribus ut. Ullam excepturi saepe + sed aut similique vel dolorem. Sed rem tempora quo sed. + </p> + <p> + Pariatur quaerat non laborum voluptatibus sunt. Sint dolorem velit nam + placeat nesciunt dolor perferendis. Debitis et necessitatibus tempora + adipisci neque. Libero error nesciunt aut consectetur rerum et. Id molestias + at est cumque quia. + </p> + <p> + Aspernatur neque qui optio consequatur animi adipisci. Ipsam ex odit + ut fugit. Aut ut odio atque fuga. Corporis voluptatibus rerum sequi. + Quo quam et velit nemo rerum corporis modi soluta. + </p> + <p> + Provident ut voluptatibus deleniti. Aliquid velit et sequi architecto + ipsum veritatis sapiente. Ut qui quia laudantium. Ad rerum repellendus + est consequatur illo non. Labore et vel ea dolores vitae illum quis nisi. + Quia dignissimos ipsa quam voluptas voluptatum rerum. + </p> + <h2>Procesory x86</h2> + <p> + Procesor rodziny x86 ma kilka trybów, m.in: + </p> + <ul> + <li> + <a href="https://pl.wikipedia.org/wiki/Tryb_rzeczywisty">Tryb rzeczywisty</a>, + będący trybem w którym procesor działa w trybie 16-bitowym, tak jak procesor + <a href="https://pl.wikipedia.org/wiki/Intel_8086">Intel 8086</a>.<br /> + + Mamy tutaj do dyspozycji 16-bitowe rejestry takie jak <b>ax</b>, <b>bx</b>, + <b>cx</b>, <b>dx</b>, oraz wiele innych. Każdy taki 16-bitowy rejestr dzieli + się na 8-bitowe części - np. <b>ax</b> dzieli się na <b>ah</b> oraz <b>al</b>. + <b>ah</b> to górne 8 bitów rejestru (<i>high</i>), a <b>al</b> to dolne 8 + bitów rejestru (<i>low</i>).<br /> + + Do dyspozycji użytkownika jest dostępne <em>1024 KB</em> pamięci RAM, jednak + w nowszych procesorach (po 8086) można odblokować linię A20 dzięki powiększonej + szynie. Sprawia to, że procesor dostaje do dyspozycji <em>1088 KB</em> pamięci. + </li> + <li> + <a href="https://pl.wikipedia.org/wiki/Tryb_rzeczywisty">Tryb chroniony</a>, + jest trybem 32-bitowym. Ma on wiele dodatkowych funkcji, takich jak na + przykład <b>stronicowanie pamięci</b>.<br /> + + Rejestry są tutaj 32-bitowe, jednak możemy nadal korzystać z rejestrów obecnych + w trybie rzeczywistym. Rejestrami są m.in <b>eax</b>, <b>ebx</b>, + <b>ecx</b>, <b>edx</b>, i wiele innych. Rejestr <b>eax</b> możemy dodatkowo + podzielić na 16-bitowy rejest <b>ax</b> będący dolnymi 16 bitami rejestru <b>eax</b>, + taki rejestr <b>ax</b> możemy dzielić dodatkowo na <b>ah</b> oraz <b>al</b>.<br /> + </li> + </ul> + </body> +</html> diff --git a/grafika.png b/grafika.png Binary files differ. diff --git a/index.html b/index.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + <meta name="description" + content="Przykładowa strona do stylizowania przy użyciu CSS" /> + <title>Strona główna</title> + <link rel="stylesheet" href="style.css" /> + </head> + <body> + <h1 id="pierwszy">Witaj na potężnej stronie głównej</h1> + <img src="https://kocotian.pl/sources/welcome.gif" /> + <p> + Adipisicing beatae a voluptas ipsam tempora aspernatur. Hic nobis neque + neque dolorum praesentium ad Adipisci dolorum delectus minima error + rem, voluptatibus? Aspernatur ipsam soluta laudantium odit placeat! + Eligendi est nulla. + </p> + <hr /> + <h3>Odwiedź także:</h3> + <ul> + <li><a href="brednie.html">Kolejną podstronę</a></li> + <li> + <a href="https://dwm.suckless.org/"> + dwm, dynamiczny menadżer okien + </a> + </li> + </ul> + <h1>Kolejny nagłówek</h1> + </body> +</html> diff --git a/index_piątek.html b/index_piątek.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + <title>Strona główna</title> + </head> + <body> + <h1>Witaj na stronie głównej</h1> + <a href="obrazki.html">Kliknij tutaj aby przejść do strony z obrazkami</a> + </body> +</html> diff --git a/obrazek.png b/obrazek.png Binary files differ. diff --git a/obrazki.html b/obrazki.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + <meta name="description" content="Testowy obrazek" /> + <meta name="author" content="Jan Kowalski" /> + <meta name="keywords" content="obrazki,html,lekcje,informatyka" /> + <title>Obrazki</title> + </head> + <body> + <!-- image --> + <center> + <h1 title="Sekcja z obrazkami">Obrazek</h1> + </center> + <img src="obrazek.png" width="350" alt="Przykładowy obrazek" title="Obrazek 1" /> + </body> +</html> diff --git a/plik.html b/plik.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + <title>Tytuł strony</title> + </head> + <body> + <h1>Nasz pierwszy dokument</h1> + To jest przykładowa, <b>pogrubiona</b> linia tekstu. + <!-- break line - złam linie --> + <br /> + To jest kolejna linia <i>pochylonego tekstu</i>. + <br /> + <a href="plik2.html">Przykładowy tekst</a> + <a href="plik3.html">Tabelki</a> + <br /> + <a href="https://kernel.org">Kolejny tekst</a> + <!-- paraghaph --> + <p> + Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque + dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricie + . Curabitur et ligula. + </p> + <p> + Ut molestie a, ultricies porta urna. Vestibulum + commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, + dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum + dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus + et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam puru + . + </p> + <p> + Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel + bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer + lobortis quis, varius in, purus. Integer ultrices posuere cubilia Cura + , Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus + et ultrices volutpat. + </p> + <p> + Nullam wisi ultricies a, gravida vitae, dapibus risus + ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies + eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum + a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus + et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan + congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagitti + , ipsum dolor quam. + + </p> + </body> +</html> diff --git a/plik2.html b/plik2.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + <title>Plik 2</title> + </head> + <body> + <a href="plik.html">Poprzednia strona</a> + To jest plik 2. + <!-- unordered list --> + <ol> + <!-- list item --> + <li> + Przedmiot 1: + <ul> + <li>Przedmiot 1.1</li> + <li>Przedmiot 1.2</li> + <li>Przedmiot 1.3</li> + </ul> + </li> + <li>Przedmiot 2</li> + </ol> + </body> +</html> diff --git a/plik3.html b/plik3.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + <title>Tabelki</title> + </head> + <body> + <table border="1"> + <!-- table row --> + <tr> + <!-- table header --> + <th>Lp.</th> + <th>Imię</th> + <th>Nazwisko</th> + </tr> + <tr> + <!-- table data --> + <td>1</td> + <td>Jan</td> + <td>Kowalski</td> + </tr> + <tr> + <!-- table data --> + <td>2</td> + <td>Kazimierrz</td> + <td>Nowak</td> + </tr> + <tr> + <!-- table data --> + <td>3</td> + <td>Józef</td> + <td>Kowal</td> + </tr> + </table> + </body> +</html> diff --git a/style.css b/style.css @@ -0,0 +1,41 @@ +html, body { + background-color: black; + color: white; + font-family: Courier New, monospace, sans-serif, serif; +} + +body { + max-width: 1000px; + margin: auto; + text-align: center; + padding: 0 12px; +} + +img { width: 75%; +} + +h1, h2, h3, h4, h5, h6 { + border: 9px red solid; + border-radius: 9px; + padding: 36px; + background-color: white; + color: green; + font-family: sans-serif; +} + +#pierwszy { + color: gray; +} + +hr { + margin: 24px 0; +} + +a { + padding: 24px; + color: pink; +} + +a:hover { + color: blue; +}