Advertisement
Paszta

NI - wstęp do HTML

Mar 1st, 2020
130
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.86 KB | None | 0 0
  1. -------------------------------------------indeks.html-----------------------------------------
  2.  
  3. <!DOCTYPE html>
  4. <html lang="pl">
  5.     <head>
  6.         <meta charset="UTF-8">
  7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.         <link rel="stylesheet" href="css/style.css" type="text/css" />
  9.         <title> Szybki kurs HTML </title>
  10.     </head>
  11.     <body>
  12.         <div id="kontener">
  13.             <div id="baner"><h2>Szybki kurs HTML</h2></div>
  14.             <div id="menu">
  15.                 <ul>
  16.                 <li><a href="index.html">Podstawowe  znaczniki</a></li>
  17.                 <li><a href="tabele.html">Tworzenie tabel</a></li>
  18.                 <li><a href="formularze.html">Budowanie formularzy</a></li>
  19.             </ul>
  20.             </div>
  21.             <div id="tresc">
  22.                 <h1>Podstawowe znaczniki HTML to: </h1>
  23.                 <ul>
  24.                     <li> &lt;html&gt; -korzeń dokumentu</li>
  25.                     <li> &lt;head&gt; -nagłówek strony z informacjami dla przeglądarek</li>
  26.                     <li> &lt;body&gt;-właściwa treść dokumentu widoczna w oknie przeglądarki</li>
  27.                     <li> &lt;div&gt; -element blokowy</li>
  28.                     <li> &lt;p&gt; -akapit</li>
  29.                     <li> &lt;ol&gt;, &lt;ul&gt; i &lt;li &gt;-elementy listy wypunktowanej lub numerowanej</li>
  30.                     <li> &lt;img&gt; -obrazek</li>
  31.                     <li> &lt;a&gt; -hiperłącze</li>
  32.                 </ul>
  33.                 <p>
  34.                     <a href="https://validator.w3.org/"> HTML walidator</a>
  35.                     <img   src="http://www.w3.org/Icons/WWW/w3c_home_nb" alt="Tu jest obrazek" />
  36.                 </p>
  37.             </div>
  38.             <div id="pasek">
  39.                 <div class="box">
  40.                     <h3>Walidatory: </h3>
  41.                         <ul>
  42.                         <li> <a href="http://validator.w3.org/">HTML </a></li>
  43.                         <li> <a href="http://jigsaw.w3.org/css-validator/">CSS</a></li>
  44.                        </ul>                       
  45.                 </div>
  46.                 <div class="box">
  47.                     <h3>Kursy: </h3>
  48.                     <ul>
  49.                         <li> <a href="http://www.w3schools.com/html/default.asp/"> HTML</a> </li>
  50.                         <li> <a href="http://www.w3schools.com/html5/default.asp/"> HTML5</a></li>
  51.                         <li> <a href="http://www.w3schools.com/css/default.asp/">CSS</a></li>
  52.                         <li> <a href="http://www.w3schools.com/css3/default.asp/"> CSS3</a></li>
  53.                     </ul>
  54.                 </div>
  55.             </div>
  56.             <div id="stopka">&copy;BP</div>
  57.         </div>
  58.     </body>
  59. </html>
  60.  
  61. ----------------------------------tabele.html-------------------------------------------
  62.  
  63. <!DOCTYPE html>
  64. <html lang="pl">
  65.     <head>
  66.         <meta charset="UTF-8">
  67.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  68.         <link rel="stylesheet" href="css/style.css" type="text/css" />
  69.         <link rel="stylesheet" href="css/tabele.css" type="text/css" />
  70.  
  71.         <title> Tabela </title>
  72.     </head>
  73.     <body>
  74.         <div id="kontener">
  75.             <div id="baner"><h2>Szybki kurs HTML</h2></div>
  76.             <div id="menu">
  77.                 <ul>
  78.                     <li><a href="index.html">Podstawowe  znaczniki</a></li>
  79.                     <li><a href="tabele.html">Tworzenie tabel</a></li>
  80.                     <li><a href="formularze.html">Budowanie formularzy</a></li>
  81.                 </ul>
  82.             </div>
  83.             <div id="tresc"> <h1>Podstawowe znaczniki tablic to: </h1>
  84.                 <ul>
  85.                     <li> &lt;table&gt; -znacznik calej tabelki</li>
  86.                     <li> &lt;caption&gt; -tytuł tabeli</li>
  87.                     <li> &lt;thead&gt;-nagółwek tabeli</li>
  88.                 </ul>
  89.                 <table>
  90.                     <caption>Popularność języków programowania</caption>
  91.                         <thead>
  92.                             <tr>
  93.                                 <th rowspan="2">Język Programowania</th> <th colspan="2">pozycja</th>
  94.                             </tr>
  95.                             <tr class="parzysty">
  96.                                 <td>luty 2020</td> <td>2015</td>
  97.                             </tr>
  98.                         </thead>
  99.                         <tbody>
  100.                             <tr>
  101.                                 <td>Java</td><td>1</td><td>2</td>
  102.                             </tr>
  103.                             <tr class="parzysty">
  104.                                 <td>C</td><td>2</td><td>1</td>
  105.                             </tr>
  106.                         </tbody>
  107.                         <tfoot>
  108.                             <tr>
  109.                                 <td colspan="3">Na podstawie: <br> <a href="https://validator.w3.org/"> https://validator.w3.org/ </a>                                    
  110.                                 </td>
  111.                             </tr>
  112.                         </tfoot>
  113.                 </table>
  114.             </div>
  115.             <div id="pasek">
  116.                 <div class="box">
  117.                     <h3>Walidatory: </h3>
  118.                         <ul>
  119.                         <li> <a href="http://validator.w3.org/">HTML </a></li>
  120.                         <li> <a href="http://jigsaw.w3.org/css-validator/">CSS</a></li>
  121.                        </ul>                       
  122.                 </div>
  123.                 <div class="box">
  124.                     <h3>Kursy: </h3>
  125.                     <ul>
  126.                         <li> <a href="http://www.w3schools.com/html/default.asp/"> HTML</a> </li>
  127.                         <li> <a href="http://www.w3schools.com/html5/default.asp/"> HTML5</a></li>
  128.                         <li> <a href="http://www.w3schools.com/css/default.asp/">CSS</a></li>
  129.                         <li> <a href="http://www.w3schools.com/css3/default.asp/"> CSS3</a></li>
  130.                     </ul>
  131.                 </div>
  132.             </div>
  133.             <div id="stopka">&copy;BP</div>
  134.         </div>
  135.     </body>
  136. </html>
  137.  
  138. ---------------------------------------------formularze.html-------------------------------------------
  139.  
  140. <!DOCTYPE html>
  141. <html lang="pl">
  142.     <head>
  143.         <meta charset="UTF-8">
  144.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  145.         <link rel="stylesheet" href="css/style.css" type="text/css" />
  146.         <link rel="stylesheet" href="css/formularze.css" type="text/css" />
  147.         <title> Formularz </title>
  148.     </head>
  149.     <body>
  150.         <div id="kontener">
  151.             <div id="baner"><h2>Szybki kurs HTML</h2></div>
  152.             <div id="menu">
  153.                 <ul>
  154.                     <li><a href="index.html">Podstawowe  znaczniki</a></li>
  155.                     <li><a href="tabele.html">Tworzenie tabel</a></li>
  156.                     <li><a href="formularze.html">Budowanie formularzy</a></li>
  157.                 </ul>
  158.             </div>
  159.             <div id="tresc" >
  160.                 <h1>Podstawowe znaczniki HTML to: </h1>
  161.                 <form action="mailto:" method="POST">
  162.                     <table border="0">
  163.                         <tbody>
  164.                     <tr> <td>Nazwisko : </td> <td> <input type="text" name="nazwisko"/> </td> </tr>
  165.                     <tr> <td>Wiek : </td> <td><input type="number" name="wiek"/></td> </tr>
  166.                     <tr><td>Państwo :</td> <td> <select name="panstwo">
  167.                     <option value="polska">Polska</option>
  168.                     <option value="sinne">Inne</option>
  169.                     </select>
  170.                     </td>
  171.                     </tr>
  172.                     <tr><td>Adres email :</td> <td> <input type="text" name="adres"/> </td></tr>
  173.                 </tbody>
  174.             </table>
  175.                    
  176.             <h3>Zamawaim kurs z języla</h3>
  177.             <input type="checkbox" name="php" value="php"/> PHP
  178.             <input type="checkbox" name="c/c++" value="c/c++"/> C/C++
  179.             <input type="checkbox" name="java" value="java"/> Java
  180.             <input type="checkbox" name="hla" value="hla"/> HLA
  181.             <br>
  182.             <h3>Sposób zapłaty</h3>
  183.             <input type="radio" name="zaplata" value="ec"/> Eurocard <br>
  184.             <input type="radio" name="zaplata" value="v"/> Visa <br>
  185.             <input type="radio" name="zaplata" value="pb"/> Przelew bankowy <br><br>
  186.             <input type="submit" value="Wyślij"/>
  187.             <input type="reset" value="Wyczyść"/>
  188.                
  189.                 </form>
  190.             </div>
  191.             <div id="pasek">
  192.                 <div class="box">
  193.                     <h3>Walidatory: </h3>
  194.                         <ul>
  195.                         <li> <a href="http://validator.w3.org/">HTML </a></li>
  196.                         <li> <a href="http://jigsaw.w3.org/css-validator/">CSS</a></li>
  197.                        </ul>                       
  198.                 </div>
  199.                 <div class="box">
  200.                     <h3>Kursy: </h3>
  201.                     <ul>
  202.                         <li> <a href="http://www.w3schools.com/html/default.asp/"> HTML</a> </li>
  203.                         <li> <a href="http://www.w3schools.com/html5/default.asp/"> HTML5</a></li>
  204.                         <li> <a href="http://www.w3schools.com/css/default.asp/">CSS</a></li>
  205.                         <li> <a href="http://www.w3schools.com/css3/default.asp/"> CSS3</a></li>
  206.                     </ul>
  207.                 </div>
  208.             </div>
  209.             <div id="stopka">&copy;BP</div>
  210.         </div>
  211.     </body>
  212. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement