API tools faq
paste
Advertisement
mikolajmki

pai_lab3

mikolajmki
Mar 16th, 2022
172
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.96 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.             <meta charset="UTF-8"/>
  5.             <link rel="stylesheet" href="CSS/style.css" type="text/css"/>
  6.             <link rel="stylesheet" href="CSS/formularz.css" type="text/css"/>
  7.     </head>
  8.     <body>
  9.         <div id="tytul1"> <h1>Szybki kurs HTML</h1> </div>
  10.         <div id="menu">
  11.             <a href="index.html">Podstawowe znaczniki</a>
  12.             <a href="tabele.html">Twworzenie tabel</a>
  13.             <a href="formularz.html">Budowa formularzy</a>
  14.         </div>
  15.         <div id="tresc">
  16.             <div id="tytul2"><h3>Podstawowe znaczniki HTML to:</h3></div>
  17.    
  18.                 <div id="lista">
  19.                     <ul>
  20.                         <li> &lt;form&gt; - zbaczbuj podstawowy zawierajacy pola formularza</li>
  21.                         <li> &lt;input&gt; - znacznik umozliwia wstawienie roznych pol (pola tekstowe, przycisk typu radio, przycisk typu checkbox) w zaleznosci od wartosci atrybutu type</li>
  22.                         <li> &lt;select&gt; - pole formularza typu lista rozwijana</li>
  23.                         <li> &lt;textarea&gt; - pole formularza obszar tekstowy</li>
  24.                         <li> &lt;button&gt; - pole formularza typu przycisk</li>
  25.                     </ul>
  26.                 </div>
  27.        
  28.                 <div id="tytul3"><h3>Przykladowy formularz HTML:</h3></div>
  29.                 <form>
  30.                     <div id="forms">
  31.                         <div id="form1">
  32.                             <label for="t1">Nazwisko: </label>
  33.                             <input type="text" id="t1" name="surname"/><br/>
  34.                         </div>
  35.                         <div id="form2">
  36.                             <label for="t2">Wiek: </label>
  37.                             <input type="text" id="t2" name="age"/><br/>
  38.                         </div>
  39.                         <div id="selectform" id="s1">
  40.                             <label for="s1">Panstwo: </label>
  41.                             <select name="countries">
  42.                                 <option>Polska</option>
  43.                                 <option>Niemcy</option>
  44.                                 <option>Wlochy</option>
  45.                                 <option>Francja</option>
  46.                             </select>
  47.                         </div>
  48.                         <div id="form3">
  49.                             <label for="t3">E-mail: </label>
  50.                             <input type="email" id="t3" name="email"/><br/>
  51.                         </div>
  52.                     </div>
  53.                     <div id="tytul4" style="font-size: 22;"><h3>Zamawian tutorial z jezyka:</h3></div>
  54.                     <div id="checkboxes">
  55.                         <input type="checkbox" id="ch1" name="choice" value="P"/>
  56.                             <label for="ch1">PHP</label>
  57.                         <input type="checkbox" id="ch2" name="choice" value="C"/>
  58.                             <label for="ch2">C/C++</label>
  59.                         <input type="checkbox" id="ch3" name="choice" value="J"/>
  60.                             <label for="ch3">Java</label>
  61.                     </div>
  62.                     <div id="tytul5" style="font-size: 22;"><h3>Sposob zaplaty:</h3></div>
  63.                     <div id="radios">
  64.                         <input type="radio" id="r1" name="platnosc" value="E" />
  65.                             <label for="r1">eurocard</label>
  66.                         <input type="radio" id="r2" name="platnosc" value="V" />
  67.                             <label for="r2">visa</label>
  68.                         <input type="radio" id="r3" name="platnosc" value="P" />
  69.                             <label for="r3">przelew bankowy</label>
  70.                     </div>
  71.                     <br/>
  72.                     <div id="buttons">
  73.                         <input type="submit" value="Wyslij"/>
  74.                         <input type="reset" value="Anuluj"/>
  75.                     </div>
  76.                 </form>
  77.         </div>
  78.         <div id="stopka">© BP</div>
  79.     </body>
  80. </html>
  81.  
  82. <!DOCTYPE html>
  83. <html lang = "pl">
  84.     <head>
  85.         <meta charset="UTF-8"/>
  86.         <link rel="stylesheet" href="CSS/style.css" type="text/css"/>
  87.         <title>Szybki kurs HTML</title>
  88.     </head>
  89.     <body>
  90.  
  91.         <div id="tytul1"> <h1>Szybki kurs HTML</h1> </div>
  92.         <div id="menu">
  93.             <a href="index.html">Podstawowe znaczniki</a>
  94.             <a href="tabele.html">Twworzenie tabel</a>
  95.             <a href="formularz.html">Budowa formularzy</a>
  96.         </div>
  97.  
  98.         <div id="tresc">
  99.             <div id="tytul2"><h3>Podstawowe znaczniki HTML to:</h3></div>
  100.    
  101.             <div id="lista">
  102.                 <ul>
  103.                     <li> &lt;table&gt; - znacznik zawierajacy cala tabele</li>
  104.                     <li> &lt;caption&gt; - tytul tabeli</li>
  105.                     <li> &lt;thead&gt; - naglowek tabeli</li>
  106.                     <li> &lt;tbody&gt; - zawartosc tabeli</li>
  107.                     <li> &lt;tfoot&gt; - stopka tabeli</li>
  108.                     <li> &lt;tr&gt; - wierszz tabeli</li>
  109.                     <li> &lt;td&gt; - komorka tabeli (zawarta w wierszu)</li>
  110.                     <li> &lt;th&gt; - komorka naglowkowa tabeli (rowniez zawarta w wierszu)</li>
  111.                 </ul>
  112.             </div>
  113.    
  114.             <div id="validator-link-and-image">
  115.                 <a href="https://validator.w3.org/">HTML Walidator</a>
  116.                 <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/e/ed/W3C%C2%AE_Icon.svg"/>
  117.             </div>
  118.         </div>
  119.         <div id="stopka">© BP</div>
  120.     </body>
  121. </html>
  122.  
  123. <!DOCTYPE HTML>
  124. <html lang="pl">
  125.  
  126.     <head>
  127.  
  128.         <meta charset = "UTF-8">
  129.         <link rel="stylesheet" href="CSS/style.css" type="text/css"/>
  130.         <link rel="stylesheet" href="CSS/tabele.css" type="text/css"/>
  131.         <title>Szybki kurs HTML</title>
  132.     </head>
  133.  
  134.     <body>
  135.  
  136.         <div id="tytul1"> <h1>Szybki kurs HTML</h1> </div>
  137.         <div id="menu">
  138.             <a href="index.html">Podstawowe znaczniki</a>
  139.             <a href="tabele.html">Twworzenie tabel</a>
  140.             <a href="formularz.html">Budowa formularzy</a>
  141.         </div>
  142.  
  143.         <div id="tresc">
  144.             <div id="tytul2"><h3>Podstawowe znaczniki HTML to:</h3></div>
  145.    
  146.             <div id="lista">
  147.                 <ul>
  148.                     <li> &lt;table&gt; - znacznik zawierajacy cala tabele</li>
  149.                     <li> &lt;caption&gt; - tytul tabeli</li>
  150.                     <li> &lt;thead&gt; - naglowek tabeli</li>
  151.                     <li> &lt;tbody&gt; - zawartosc tabeli</li>
  152.                     <li> &lt;tfoot&gt; - stopka tabeli</li>
  153.                     <li> &lt;tr&gt; - wierszz tabeli</li>
  154.                     <li> &lt;td&gt; - komorka tabeli (zawarta w wierszu)</li>
  155.                     <li> &lt;th&gt; - komorka naglowkowa tabeli (rowniez zawarta w wierszu)</li>
  156.                 </ul>
  157.             </div>
  158.    
  159.             <div id="tytul3"><h3>Przykladowa tabela HTML:</h3></div>
  160.    
  161.             <div id="tabela">
  162.    
  163.                 <table>
  164.                     <caption> Popularnosc jezykow programowania </caption>
  165.    
  166.                     <thead>
  167.                         <tr>
  168.                             <th rowspan="2">Jezyk programowania</th>
  169.                             <th colspan="2">Pozycja</th>
  170.                         </tr>
  171.                         <tr>
  172.                             <th>Luty 2020</th>
  173.                             <th>2015</th>
  174.                         </tr>
  175.                     </thead>
  176.    
  177.                     <tbody>
  178.                         <tr>
  179.                             <td>Java</td>
  180.                             <td>1</td>
  181.                             <td>2</td>
  182.                         </tr>
  183.                         <tr class="parzysty">
  184.                             <td>C</td>
  185.                             <td>2</td>
  186.                             <td>1</td>
  187.                         </tr>
  188.                         <tr>
  189.                             <td>Python</td>
  190.                             <td>3</td>
  191.                             <td>7</td>
  192.                         </tr>
  193.                         <tr class="parzysty">
  194.                             <td>C++</td>
  195.                             <td>4</td>
  196.                             <td>4</td>
  197.                         </tr>
  198.                         <tr>
  199.                             <td>C#</td>
  200.                             <td>5</td>
  201.                             <td>7</td>
  202.                         </tr>
  203.                     </tbody>
  204.    
  205.                     <tfoot>
  206.                         <td colspan="3">
  207.                             <a>Na podstawie:</a></br>
  208.                             <a href = "https://www.tiobe.com/tiobe-index/">https://www.tiobe.com/tiobe-index/</a>
  209.                         </td>
  210.                     </tfoot>
  211.                 </table>
  212.    
  213.             </div>
  214.         </div>
  215.         <div id="stopka">© BP</div>
  216.  
  217.     </body>
  218.  
  219. </html>
  220.  
  221. body
  222. {
  223.     background: #4ae;
  224.     color: #000040;
  225. }
  226.  
  227. h1, h2, #stopka
  228. {
  229.     background: #000040;
  230.     color: #8080ff;
  231.     text-align: center;
  232. }
  233.  
  234. #menu
  235. {
  236.     background: white;
  237. }
  238.  
  239. #tresc
  240. {
  241.     background: rgb(143, 184, 197);
  242.     margin-bottom: 25px;
  243. }
  244.  
  245. label
  246. {
  247.     background: lightgoldenrodyellow;
  248.     border-radius: 8px;
  249.     padding: 2px;
  250.     font-weight: 600;
  251. }
  252.  
  253. #forms label
  254. {
  255.     position: absolute;
  256. }
  257.  
  258. #forms input, select
  259. {
  260.     margin-left: 100px;
  261. }
  262.  
  263. #buttons input
  264. {
  265.     background: rgb(181, 181, 228);
  266. }
  267.  
  268. table
  269. {
  270.     background: rgb(228, 228, 134);
  271.     text-align: center;
  272.     width: 94%;
  273.     margin: 2%;
  274.     border: 1px solid;
  275.     border-color: darkblue;
  276. }
  277.  
  278. caption
  279. {
  280.     font-size: 120%;
  281.     font-weight: 600;
  282. }
  283.  
  284. thead, tfoot
  285. {
  286.     background: rgb(1, 1, 66);
  287.     color: white;
  288.     font-size: 110%;
  289.     padding: 5px;
  290.     text-align: center;
  291. }
  292.  
  293. td, th
  294. {
  295.     border: 1px solid;
  296.     border-color: darkblue;
  297. }
  298.  
  299. tfoot a
  300. {
  301.     color: white;
  302. }
  303.  
  304. .parzysty
  305. {
  306.     background: white;
  307. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!