skrabanek
/
3I_WTL_2025
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add form & css uvod

master
Jakub Škrabánek 3 weeks ago
parent
23e808d63e
commit
c503161a0f
5 changed files with 269 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 36
      02/formular.html
  2. 121
      02/index.html
  3. 19
      03_css_uvod/about.html
  4. 48
      03_css_uvod/index.html
  5. 45
      03_css_uvod/style.css

36
02/formular.html
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1> Formulaře</h1>
<h5>učení s formuláři</h5>
<h3><a href="index.html">Domu</a></h3>
<hr>
<form action="index.html" method="get">
<label for="name">Jmeno:</label><br>
<input type="text" name="name" id="name"><br><br>
<label for="cash">Castka:</label><br>
<input type="number" name="cash" id="cash">Kč<br><br>
<select name="vyber" id="vyber">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br><br>
<label for="dlouhyText">TextArea pro dlouhý text</label><br>
<textarea name="dlouhyText" id="dlouhyText"></textarea><br><br>
<button type="submit">ODESLAT</button>
</form>
</body>
</html>

121
02/index.html
View File

@ -0,0 +1,121 @@
<!-- Emmet pomůže html:5 nebo ! -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Domovská sránka - Startup</title>
</head>
<body>
<h1 style="color: lime;background-color: purple;">Domovská sránka - Startup</h1>
<h4>Nahodný podnadpis</h4>
<hr>
<h3><a href="formular.html">Formular</a></h3>
<p>Lorem ipsum dolor sit amet <br> consectetur adipisicing elit. <br> Reiciendis minima praesentium est asperiores quaerat, eaque quibusdam sapiente repellendus aliquid optio officiis velit tenetur consequuntur temporibus voluptates, maxime ipsum alias ullam!</p>
<h2>Tabulky</h2>
<!-- <table style="border-color: black;border-radius: 5px;border-style: solid;"> -->
<table style="border: 2px black solid;">
<!-- první se definuje řádek -> TableRow=tr-->
<tr >
<!-- teprve uvnitř řádku se definují sloupce spíš buňky neboli TableData=td -->
<td style="border: 2px black solid;">Bunka jedna</td>
<td style="border: 2px black solid;">Bunka dva</td>
</tr>
<tr>
<td style="border: 2px black solid;">Bunka tri</td>
<td style="border: 2px black solid;">Budka ctyri</td>
</tr>
</table>
<table>
<tr>
<!-- u tabulek je i specialni tag pro nadpisy v tabulkách TableHeading=th -->
<th>Jmeno</th>
<th>Castka</th>
<th>Mena</th>
</tr>
<tr>
<td>Martin</td>
<td>50</td>
<td>$</td>
</tr>
<tr>
<td>Olga</td>
<td>30</td>
</tr>
</table>
<br>
<h2>Listy</h2>
<!-- Unorderd list -> list item = ul>li -->
<ul>
<li>prvni item</li>
<li>druhy item</li>
<li>treti item</li>
</ul>
<!-- Ordered list s čísly -->
<ol>
<li>ctvry item</li>
<li>paty item</li>
<li>sesty item</li>
</ol>
<!-- Description list > define term > define description -->
<dl>
<dt>Kafe</dt>
<dd>- kouzelný napoj pro získání energie</dd>
<dt>ohnivá koule</dt>
<dd>- neboj tvoje parta bude žhavá dost</dd>
</dl>
<h2>Emmet</h2>
<!-- ALT + klikání dovoli multipointer programování (psaní textu na více místech najednou) -->
<p><a href="#">p>a</a></p>
<!-- ul>li>a -->
<ul>
<li><a href="#">Okdazík</a></li>
</ul>
<!-- ul>li*5>a -->
<ul>
<li><a href="#">Odkaz</a></li>
<li><a href="#">Odkaz</a></li>
<li><a href="#">Odkaz</a></li>
<li><a href="#">Odkaz</a></li>
<li><a href="#">Odkaz</a></li>
</ul>
<!-- table>tr*5>td*4 -->
<table>
<tr>
<th>Nadpis</th>
<th>Nadpis</th>
<th>Nadpis</th>
<th>Nadpis</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
</body>
</html>

19
03_css_uvod/about.html
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="centerClass fancyText"> About CSS</h1>
<h3 class="centerClass ">tady je menší podnadpis</h3>
<a href="index.html">Home</a>
<hr>
<p style="color: blueviolet;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum et voluptatem quibusdam culpa dignissimos quae ducimus quod, sint consectetur excepturi eveniet veniam aperiam, possimus quidem, asperiores sed praesentium iusto tempora!</p>
<p class="fancyBG">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore sapiente porro veniam consequuntur eius ipsum. Aut molestiae enim quis atque excepturi suscipit inventore voluptates dignissimos magnam. Incidunt vitae voluptatibus quis.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus dolore vero, officia maiores velit quasi! Aperiam minus hic et cupiditate eos nostrum id, iste culpa delectus est nisi ipsum laudantium?</p>
<p class="fancyText fancyBG">JAJYKOLIV TEXT</p>
</body>
</html>

48
03_css_uvod/index.html
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="centerClass fancyText"> Úvod do CSS</h1>
<h3 class="centerClass ">tady je menší podnadpis</h3>
<a href="about.html">about</a>
<a href="test.html">test</a>
<hr>
<p style="color: blueviolet;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum et voluptatem quibusdam culpa dignissimos quae ducimus quod, sint consectetur excepturi eveniet veniam aperiam, possimus quidem, asperiores sed praesentium iusto tempora!</p>
<p class="fancyBG">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore sapiente porro veniam consequuntur eius ipsum. Aut molestiae enim quis atque excepturi suscipit inventore voluptates dignissimos magnam. Incidunt vitae voluptatibus quis.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus dolore vero, officia maiores velit quasi! Aperiam minus hic et cupiditate eos nostrum id, iste culpa delectus est nisi ipsum laudantium?</p>
<p class="fancyText fancyBG">JAJYKOLIV TEXT</p>
<ul>
<li>QWE</li>
<li>EWQ</li>
<li>R</li>
</ul>
<!-- table>tr*3>td*4 -->
<table>
<tr>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
<td>TEST</td>
</tr>
<tr>
<td>AKCE</td>
<td>AKCE</td>
<td>AKCE</td>
<td>AKCE</td>
</tr>
<tr>
<td>TEXT</td>
<td>TEXT</td>
<td>TEXT</td>
<td>TEXT</td>
</tr>
</table>
</body>
</html>

45
03_css_uvod/style.css
View File

@ -0,0 +1,45 @@
/* CSS kód */
/*
AltGr + b|n = {|}
AltGr + ,|. = <|>
*/
p {
color:yellow;
font-family: Arial, Helvetica, sans-serif;
}
.centerClass {
text-align: center;
}
.fancyText {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: greenyellow;
}
.fancyBG {
background-color: aqua;
color: rgb(254, 0, 250);
}
table, tr, td {
/* border-width: 2px;
border-style: solid;
border-color:black */
border: 2px dashed black;
margin-left: auto;
margin-right: auto;
padding: 10px;
border-collapse: collapse;
}
a:visited{
color: aqua;
}
a:hover {
background-color: blue;
}
td:hover {
background-color: rgba(0, 255, 81, 0.514);
}
ul {
list-style-type: none;
}
Write Preview
Loading…
Cancel
Save