simonja/programko
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Šimon Záriš 2024-03-21 10:25:45 +01:00
commit 78013237e2
20 changed files with 1798 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

227
FormulareOdUcitela.html Normal file
View File

@ -0,0 +1,227 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<title>formularoducitela</title>
<body>
<h2>Formular priklad</h2>
<!-- method get alebo post -->
<form action="http://localhost/adlerka/action_page.php" method="get" name="prihlasenie">
<!-- method moze nadobudat dve hodnoty post alebo get,
default je get -->
<label for="namef">Meno:</label><br>
<input type="text" id="namef" name="fname" value="John"><br>
<label for="namel">Priezvisko:</label><br>
<input type="text" id="namel" name="lname" value="Doe"><br><br>
<input type="submit" value="Stlac">
</form>
<hr>
<h2>input type="text"</h2>
<form>
<label for="ffname">First name:</label>
<input type="text" id="ffname" name="fnamee"><br>
<label for="llname">Last name:</label>
<input type="text" id="llname" name="lnamee">
</form>
<hr>
<h2>input type="password"</h2>
<form method="get">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
<input type="submit" value="Stlac">
</form>
<hr>
<h2>input type="submit" a input type="reset"</h2>
<form action="/action_page.php">
<label for="xfname">First name:</label><br>
<input type="text" id="xfname" name="xfname" value="John"><br>
<label for="xlname">Last name:</label><br>
<input type="text" id="xlname" name="xlname"><br><br>
<input type="submit" value="Odosli">
<input type="reset" value="test">
</form>
<hr>
<h2>input type="radio"</h2>
<form>
<input type="radio" id="idmale" name="gender" value="male">
<label for="idmale">Male</label><br>
<input type="radio" id="idfemale" name="gender" value="female">
<label for="idfemale">Female</label><br>
<input type="radio" id="idother" name="gender" value="other">
<label for="idother">Other</label>
<input type="submit" value="Odosli">
</form>
<hr>
<h2>input type="checkbox"</h2>
<form method="post" name="test">
<input type="checkbox" id="vehicle1" name="vehicle12" value="Bike" checked="">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle22" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle32" value="Boat" checked="">
<label for="vehicle3"> I have a boat</label>
<input type="submit" value="Submit">
</form>
<hr>
<h2>input type="color"</h2>
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
<input type="submit" value="Submit">
</form>
<hr>
<h2>input type="date"</h2>
<form action="">
<label for="datemax">Enter a date before 2000-01-01:</label>
<input type="date" id="datemax" name="datemax" max="2000-01-01"><br><br>
<label for="datemin">Enter a date after 2020-01-02:</label>
<input type="date" id="datemin" name="datemin" min="2020-01-02"><br><br>
<input type="submit" value="Submit">
</form>
<hr>
<h2>input type="email"</h2>
<form method="get">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
<hr>
<h2>input type="file"</h2>
<form method="post">
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile" multiple="">
<input type="submit" value="Submit">
</form>
<hr>
<h2>input type="number"</h2>
<form>
<label for="quantity">Quantity (between 0 and 500):</label>
<input type="number" id="quantity" name="quantity" min="0" max="500" step="3">
</form>
<hr>
<h2>atributy pre input (Input Restrictions)</h2>
<p>
checked - Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio")<br>
disabled - Specifies that an input field should be disabled<br>
max - Specifies the maximum value for an input field<br>
maxlength - Specifies the maximum number of character for an input field<br>
min - Specifies the minimum value for an input field<br>
pattern - Specifies a regular expression to check the input value against<br>
readonly - Specifies that an input field is read only (cannot be changed)<br>
required - Specifies that an input field is required (must be filled out)<br>
size - Specifies the width (in characters) of an input field<br>
step - Specifies the legal number intervals for an input field<br>
value - Specifies the default value for an input field<br><br>
</p>
<form>
<label for="quantityy">Quantity:</label>
<input type="number" id="quantityy" name="quantity" min="0" max="100" step="10" value="30">
</form>
<hr>
<h2>input type="range"</h2>
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
<hr>
<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
10
<input type="range" id="a" name="a" value="50" min="10" max="100">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
<hr>
<h2>input type="tel" https://regexr.com/</h2>
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" placeholder="zadajte ci 123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
<input type="submit">
</form>
<hr>
<h2>input type="url"</h2>
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage" pattern="^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&amp;'\(\)\*\+,;=.]+$">
<input type="submit">
</form>
<hr>
<h2>Datalist</h2>
<form action="">
<input list="browsers" name="browser" value="Chrome">
<datalist id="browsers">
<option value="Internet Explorer">
</option><option value="Firefox">
</option><option value="Chrome">
</option><option value="Opera">
</option><option value="Safari">
</option></datalist>
<input type="submit">
</form>
<hr>
<form action="">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<select id="cars" name="cars" size="3" multiple="">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="formula" selected="">Formula</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
</select><br><br>
<textarea name="message" rows="10" cols="30"> The cat was playing in the garden.</textarea> <br><br>
<input type="submit" value="Submit">
</form>
<hr>
<button type="button" onclick="alert('Hello World!')">
Click Me!</button>
regularny vyraz
input type="text" pattern
datum narodenia 2020.12.31
rodne cislo 123456/8888
<form>
<label for="phone">Enter your phone number:</label>
<input type="text" id="phone" name="phone" placeholder="2020.12.31" pattern="[0-9]{4}.[0-9]{2}.[0-9]{2}">
<input type="submit">
</form>
</body>

80
Záriš_Šimon_1.C.html Normal file
View File

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<title>registracny formular 2 test</title>
<link rel="stylesheet" href="https://www.wz.sk/admin/filemanager/edit?file=%2Fweb%2Fuprava.css&dir=%2Fweb%2F">
</head>
<body>
<h2>Registracny formular</h2>
<br>
<!--method get alebo post-->
</body>
<h2>Meno a Priezvisko</h2>
<form action="http://localhost/adlerka/action_page.php" method="get" name="prihlasenie">
<!-- method moze nadobudat dve hodnoty post alebo get,
default je get -->
<label for="namef">Meno:</label><br>
<input type="text" id="namef" name="fname" value="Meno"><br>
<label for="namel">Priezvisko:</label><br>
<input type="text" id="namel" name="lname" value="Priezvisko"><br><br>
<input type="submit" value="Potvrdiť">
</form>
<br>
<h2>Pohlavie</h2>
<form>
<input type="radio" id="idmale" name="gender" value="male">
<label for="idmale">Muž</label><br>
<input type="radio" id="idfemale" name="gender" value="female">
<label for="idfemale">Žena</label><br>
<input type="radio" id="idother" name="gender" value="other">
<label for="idother">50/50</label><br><br>
<input type="submit" value="Potvrdiť">
</form>
<br>
<h2>Vlastnosti</h2>
<form method="post" name="test">
<input type="checkbox" id="hodnota1" name="hodnota1" value="Dobrosrdečný">
<label for="hodnota1"> Dobrosrdečný</label><br>
<input type="checkbox" id="hodnota2" name="hodnota2" value="Vytrvalý">
<label for="hodnota2"> Vytrvalý</label><br>
<input type="checkbox" id="hodnota3" name="hodnota3" value="Rozvážlivý">
<label for="hodnota3"> Rozvážlivý</label><br>
<input type="checkbox" id="hodnota4" name="hodnota4" value="Zábavný">
<label for="hodnota4"> Zábavný</label><br>
<input type="checkbox" id="hodnota5" name="hodnota5" value="Komunikatívny">
<label for="hodnota5">Komunikatívny</label><br>
<input type="checkbox" id="hodnota6" name="hodnota6" value="Múdry">
<label for="hodnota6"> Múdry</label><br><br>
<input type="submit" value="Potvrdiť">
</form>
<br>
<h2>Dátum narodenia</h2>
<form action="">
<label>Vypíšte</label>
<input type="date" id="min" name="min" min="1400-01-01"
type="date" id="max" name="max" max="3000-01-01"><br><br>
<input type="submit" value="Potvrdiť">
</form>
<br>
<h2>Obľubená farba</h2>
<form>
<label for="favcolor">:</label>
<input type="color" id="favcolor" name="favcolor"><br><br>
<input type="submit" value="Submit">
</form>
<br>
<h2>Email</h2>
<form method="get">
<label for="email">Napíšte email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Potvrdiť">
</form>

59
flex.css Normal file
View File

@ -0,0 +1,59 @@
body{
min-width: 100%;
margin: 0;
}
#Obsah {
text-align: center;
}
.wrapper {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
/*The flex blabblah*/
}
.header {
background: #eeaf61;
}
.navigation {
background: #fb9062;
}
.footer {
background: #ee5d6c;
}
.main {
text-align: left;
background: #ce4993;
}
.aside-1 {
background: #6a0d83;
}
.aside-2 {
background: #35063e;
}
/*responzivita*/
@media all and (min-width: 800px) {
.main {flex: 3 10;}
.aside-1 {order: 1;}
.main {order: 2;}
.aside-2 {order: 3;}
.footer {order: 4}
}

44
flex.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="kratky popis stranky.">
<meta name="keywords" content="sablona, html, cize klucove slova nasej strsanky">
<title>flex</title>
<!-- Mobile viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0 , user-scalable=yes">
<link rel="shortcut icon"
href="https://localhost/adlerka/image/favicon.ico"
type="image/x-icon">
<!-- namapovanie css -->
<link rel="stylesheet"
href="flex.css" />
<style>
</style>
</head>
<body>
<a href="https://developer.morilla.org/en-US/docs/Learn/CSS"></a>
<div class="wrapper">
<header class="header">Header</header>
<nav class="navigation"></nav>
<main class="main">
<article>
<p id="Obsah">Obsah</p>
</article>
</main>
<aside class="aside aside -1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>
</body>
</html>

155
formular.html Normal file
View File

@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<title>formular</title>
<!-- namapovanie css-->
</head>
<body>
<h2>Formular priklad</h2>
<!-- method get alebo post -->
<form action="https://localhost/adlerka/action_page.php"
method="get" name="prihlasenie">
<!-- method moze naberat dve hodnoty post alebo algebricky, default je get-->
<label for="name">meno</label><br>
<input type="text" id="name" name="fname" value="john"><br>
<label for="name1">priezvisko</label><br>
<input type="text" id="name1" name="1name" value="Doe"><br>
</form>
<hr>
<h2><input type="text"></h2>
<form>
<label for="ffname">First name</label>
<input type="text" id="ffname" name="fname"><br>
<label for="11name">last name</label><br>
<input type="text" id="11name"><br>
</form>
<hr>
<h2><input type="password"></h2>
<form method="get">
<label for="username">username</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">password</label><br>
<input type="text" id="password" name="password"><br><br>
<input type="submit" value="stlac">
<input type="reset" value="reset">
<h2><input type="password"></h2>
<form method="action_page.php">
<label for="xfname">xfname</label><br>
<input type="text" id="xfname" name="xfname"><br>
<label for="xfname">password</label><br>
<input type="text" id="xfname" name="xfname"><br><br>
<input type="submit" value="stlac">
<input type="reset" value="reset">
<hr>
<h2><input type="radio"></h2>
<form>
<label type="username">username</label><br>
<input for="text" id="username" name="username"><br>
<label for="password">password</label><br>
<input type="text" id="password" name="password"><br><br>
<input type="submit" value="stlac">
<input type="reset" value="reset">
</form>
<hr>
<h2><input type="email"></h2>
<form method="get">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
<hr>
<h2><input type="file"></h2>
<form method="post">
<label for="mylife">Select a file:</label>
<input type="file" id="myfile" name="myfile" multiple>
<input type="submit" value="Submit">
</form>
<h2>input type="number"</h2>
<form>
<label for="quantity">Quantity (between 0 and 500) :</label>
<input type="number" id="quantity" name="quantity"
min="0" max="500" step="3">
</form>
<hr>
<h2><input type="range"></h2>
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
<hr>
<h2>input type="tel" https://regexr.com</h2>
<hr>
<h2>input type="url"</h2>
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage" pattern="^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&amp;'\(\)\*\+,;=.]+$">
<input type="submit">
</form>
</body>
</html>

42
grid.css Normal file
View File

@ -0,0 +1,42 @@
#page {
display: grid;
width: 100%;
/*height: 250px;*/
grid-template-areas: "head head head head"
"nav nav nav nav"
"left main main right"
"foot foot foot foot"
;
grid-template-rows: 6fr 1fr 6fr 5fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
/*grid-template-columns: 150px 150px 150px 150px;*/
}
#page > header {
grid-area: head;
background-color: #7c60f7;
}
#page > nav {
grid-area: nav;
background-color: #755481;
}
#page > .left {
grid-area: left;
background-color: rgb(53, 69, 87);
}
#page > .right {
grid-area: right;
background-color: rgb(77, 77, 87);
}
#page > main {
grid-area: main;
background-color: #6e64ff;
}
#page > footer {
grid-area: foot;
background-color: #7d79a1;
}

47
grid.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>grid</title>
<meta name="description" content=" kratky popis nasej stranky">
<meta name="keywords" content="sablona,html,kluc slova nasej stranky">
<!--Mobile viewport-->
<meta name="viewport" content="width-device-width-initial-scale=1.0, user-scalabble=yes">
<link rel="shortcut icon" href="https://miro.medium.com/v2/resize:fit:598/1*-KK3SRZBrrqODshRTsZoEg.png" type="image
/x-icon">
<!--namapovanie css -->
<link rel="stylesheet" href="grid.css">
</head>
<body>
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>
<a href="https://www.w3schools.com/css/css_grid.asp">grid_w3</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">grid_moz</a>
<a href="https://itnavody.sk/video-navody/xhtml-css/xhtml-css-26-lekcia-selectory-rodic-potomok">selektory</a>
<section id="page">
<header>Header</header>
<nav>Navigation</nav>
<div class="left">Left</div>
<main>Main area</main>
<div class="right">Right</div>
<footer>Footer</footer>
</section>
</body>
</html>

61
jsbutton.html Normal file
View File

@ -0,0 +1,61 @@
<!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" id="site" href="https://localhost/adlerka/responsive.css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.mim,js">
</script>
<script type="text/javascript"></script>
<script>
$(document).ready(function(){
$("hide").click(function(){
$("p").hide();
});
$("show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<h1>1</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">Click me to to display date and time</button>
<p id="demo"></p>
<h1>2</h1>
<p id="demo1">Javascript can change any type of html element.</p>
<script>
function myFunction() {
document.getElementById('demo1').style.fontSize = "25px";
document.getElementById('demo1').style.color = "red";
document.getElementById('demo1').style.backgroundColor = "yellow"
}
</script>
<button type="button" onclick="myFunction()">Click me</button>
<h1>3</h1>
<button id="hide">hide</button>
<button id="show">show</button>
<p>this is small content</p>
<p>another small paragraph</p>
<p>https://www.w3schools.com/jquery/</p>
<p>https://www.w3schools.com/html/html_scripts.asp/</p>
<h1>4</h1>
<img class="img1" src="https://hips.hearstapps.com/hmg-prod/images/dw-burnett-pcoty22-8260-1671143390.jpg?crop=0.668xw:1.00xh;0.184xw,0&resize=640:*"
style="width: 500px;"
@media screen and (max width="50em")*>
</html>

249
layout.css Normal file
View File

@ -0,0 +1,249 @@
body{
min-width: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
background-color: rgb(39, 81, 139);
}
.wrapper > * {
/*padding: 10px;*/
flex: 1 100%;
}
.container{
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction
and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-around;
margin-right: auto;
margin-left: auto;
min-height: auto;
max-width: 1200px;
min-width: auto;
}
.container_menu{
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction
and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: left;
margin-right: auto;
margin-left: auto;
min-height: auto;
max-width: 1200px;
min-width: auto;
}
/******* header *******/
header{
background-color: #1a6699;
}
#header .flex-item {
padding: 5px;
margin: 5px;
width: auto;
height: 30px;
line-height: 30px;
color: white;
font-weight: bold;
font-size: 1em;
text-align: center;
}
#header p{
margin: 0;
padding: 0;
}
/* navigation */
/* Add a black background color to the top navigation */
nav{
background-color: #6497b1;
}
.topnav {
background-color: #65829c;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
color: #ffefef;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
background-color: #1c73adfd;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
main
{
background-color: #77aaec;
}
/* Medium screens */
@media all and (max-width: 800px) {
/******* header *******/
#header {
/* When on medium sized screens, we center it by evenly distributing empty space around items */
flex-flow: column wrap;
}
#header .flex-item{
padding: 2px;
margin: 2px;
line-height: 25px;
height: 25px;
margin-left: 0 !important;
}
/******* navigation *******/
}
/* Small screens */
@media all and (max-width: 500px) {
/******* header *******/
#header {
/* On small screens, we are no longer using row direction but column */
flex-flow: column wrap;
}
#header .flex-item{
padding: 2px;
margin: 2px;
line-height: 25px;
height: 25px;
color: black;
}
/******* navigation *******/
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.container_menu{
display: flex;
flex-flow: row;
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
.responsive{
display: flex;
flex-flow: column;
}
}

92
layout.html Normal file
View File

@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="sk"><head>
<meta charset="UTF-8">
<title>Struktura stranky</title>
<meta name="description" content="Kratky popis nasej stranky.">
<meta name="keywords" content="sablona, html, cize klucove slova nasej stranky">
<!-- Mobile viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="icon" href="asdd.png" type="image/png">
<!-- namapovanie css -->
<link rel="stylesheet" href="layout.css">
<!-- script na zobrzenie menu css -->
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav container_menu") {
x.className += " responsive";
} else {
x.className = "topnav container_menu";
}
}
</script>
</head>
<body>
<div class="wrapper">
<header>
<div id="header" class="container">
<div id="header_logo" class="flex-item">
<img width="75px" src="http://localhost/adlerka/image/basic-logo.png">
</div>
<div id="header_nazov" class="flex-item">
<p>Vymyslena spolocnost a.s.</p>
</div>
<div id="header_text" class="flex-item" style="margin-left: auto">
<p>Poradime Vam zavolajte na +421 98989 8987 877.</p>
</div>
</div>
</header>
<nav>
<div class="topnav container_menu" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
</nav>
<main>
<h1>Apples</h1>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<article>
<h2>Red Delicious</h2>
<p>These bright red apples are the most common found in many
supermarkets.</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>Granny Smith</h2>
<p>These juicy, green apples make a great filling for
apple pies.</p>
<p>... </p>
<p>... </p>
</article>
</main>
<footer>
<p>pata</p>
</footer>
</div>
</body></html>

8
sdfsdf.html Normal file
View File

File diff suppressed because one or more lines are too long

57
tabulky.css Normal file
View File

@ -0,0 +1,57 @@
/*pre tabulky*/
/* ID zapisujeme v css znakom # */
#tabulka2, #tabulka2 th, #tabulka2 td
{
border: 1px solid black;
border-collapse: collapse;
}
/* CLASS zapisujeme v css znakom . */
.podfarbenie tr
{
background-color: red;
}
#tabulka3, #tabulka3 th, #tabulka3 td
{
border: 1px solid black;
border-collapse: collapse;
}
.podfarbenie2 tr:nth-child(even)
{
background-color: red;
}
.podfarbenie2 tr:nth-child(odd)
{
background-color: blue;
}
.podfarbenie2 th
{
background-color: black;
color: white;
}
.podfarbenie2 td:nth-child(3)
{
text-align: center;
background-color: #2196F3 !important;
}
.podfarbenie2 tr:nth-child(2)
{
text-align: center;
background-color: green !important
}
.podfarbenie2 tr:hover
{
text-align: right;
background-color: orange !important
}
.podfarbenie2 tr:hover {
background-color: green;
transition:duration: 1s;
transition-timing-function: linear;
transition-delay: 0.3s;
}

97
tabulky.html Normal file
View File

@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<title>Tabulky</title>
<!-- namapovanie css -->
<link rel="stylesheet" href="tabulky.css">
</head>
<body>
<h2>Struktura tabulky</h2>
<table border="5px">
<tr>
<th>Prvý</th>
<th>Druhý</th>
<th>Tretí</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<hr>
<h2>Oramovanie tabulky</h2>
<table id="tabulka2" class="podfarbenie">
<tr>
<th>Prvý</th>
<th>Druhý</th>
<th>Tretí</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<table id="tabulka3" class="podfarbenie2">
<tr>
<th>Prvý</th>
<th>Druhý</th>
<th>Tretí</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>

22
uloha.css Normal file
View File

@ -0,0 +1,22 @@
a:hover {
background-color: yellow;
}
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}

260
uloha.html Normal file
View File

@ -0,0 +1,260 @@
<!DOCTYPE html>
<html lang="sk">
<meta charset="UTF-8">
<title>Tabulky</title>
<head>
<link rel="stylesheet" href="uloha.css">
<style>
table, th, td {
border: 1px solid rgb(0, 0, 0);
border-collapse: collapse;
}
</style>
</head>
<table border="5px">
<tr>
<th>PČ</th>
<th>text</th>
<th>Čísla</th>
<th>Mená</th>
<th>Adresy</th>
<th><Obj>Obľúbené číslo</Obj></th>
<th>Obľúbená farba</th>
<th>Obľúbené jedlo</th>
<th>Rodisko</th>
<th>Rok narodenia </th>
<th>Pohlavie</th>
</tr>
<tr>
<td>90133</td>
<td>text</td>
<td>1</td>
<td colspan="2"></td>
<td>64</td>
<td>Modrá</td>
<td>Kakaove rezance</td>
<td>Bratislava</td>
<td>1994</td>
<td>Muž</td>
<tr>
<td>90133</td>
<td>text</td>
<td>2</td>
<td>Miro</td>
<td>Štefániková 9</td>
<td>12</td>
<td>červená</td>
<td>Guláš</td>
<td>Poprad</td>
<td>1990</td>
<td>Muž</td>
</tr>
<td>90133</td>
<td>text</td>
<td>3</td>
<td>Katka</td>
<td>Krátka 7</td>
<td>47</td>
<td>Fialová</td>
<td>Bratislava</td>
<td>2001</td>
<td>Žena</td>
</tr>
<tr>
<td>90133</td>
<td>text</td>
<td>4</td>
<td>Janko</td>
<td>Pekná 9</td>
<td>94</td>
<td>Žltá</td>
<td colspan="3" rowspan="2" class="colrowspantd"><span class="colrowspan">Neznáme</span></td>
<td>Muž</td>
</tr>
<tr>
<td>90133</td>
<td>text</td>
<td>5</td>
<td>Magdaléna</td>
<td>Pekná 5</td>
<td>144</td>
<td>Zelená</td>
<td>Žena</td>
</tr>
<tr>
<td>90133</td>
<td>text</td>
<td>6</td>
<td>Peter</td>
<td>Nová 12</td>
<td>298</td>
<td>Červená</td>
<td>Slepačí vývar</td>
<td>Banská Bystrica</td>
<td>1973</td>
<td>Muž</td>
</tr>
<tr>
<td>90133</td>
<td>text</td>
<td>7</td>
<td>Filip</td>
<td>Stará 2</td>
<td>10</td>
<td>Fialová</td>
<td>Kebab</td>
<td>Bratislava</td>
<td>2004</td>
<td>Muž</td>
</tr>
<tr>
<td>90133</td>
<td>text</td>
<td>7</td>
<td>Ľubomír</td>
<td>Stará 19</td>
<td>45</td>
<td>Modrá</td>
<td>Burger</td>
<td>Bratislava</td>
<td>1996</td>
<td>Muž</td>
</tr>
<tr>
<td>90133</td>
<td>text</td>
<td>8</td>
<td>David</td>
<td>Hrdinská 2</td>
<td>68</td>
<td>Červená</td>
<td>Makové rezance</td>
<td>Bytča</td>
<td>2005</td>
<td>Muž</td>
</tr>
<tr>
<td>90133</td>
<td>text</td>
<td>9</td>
<td>Marianna</td>
<td>Stará 6</td>
<td>30</td>
<td>Zelená</td>
<td>Donuty</td>
<td>Bratislava</td>
<td>2014</td>
<td>Žena</td>
</tr>
<tr>
<td>90133</td>
<td>text</td>
<td>10</td>
<td>Félix</td>
<td>Dlhá 14</td>
<td>68</td>
<td>Modrá</td>
<td>Pizza</td>
<td>Čunovo</td>
<td>1998</td>
<td>Muž</td>
</tr>
<tr>
<td>90133</td>
<td>text</td>
<td>11</td>
<td>Patrik</td>
<td>Krásna 9</td>
<td>44</td>
<td>Žltá</td>
<td>Džemove guľe</td>
<td>Pezinok</td>
<td>2001</td>
<td>Muž</td>
</tr>
<tr><td>90133</td>
<td>text</td>
<td>12</td>
<td>Filoména</td>
<td>Pekná 15</td>
<td>49</td>
<td>Fialová</td>
<td>Studená káva</td>
<td>Bratislava</td>
<td>1990</td>
<td>Žena</td>
</tr>
<tr>
<td>90133</td>
<td>text</td>
<td>13</td>
<td>Sebastian</td>
<td>Krátka 93</td>
<td>11</td>
<td>Červená</td>
<td>Pizza</td>
<td>Bratislava</td>
<td>2000</td>
<td>Muž</td>
</tr>
<tr><td>90133</td>
<td>text</td>
<td>14</td>
<td>sofia</td>
<td>Pekná 15</td>
<td>78</td>
<td>Zelená</td>
<td>Parené buchty</td>
<td>Bratislava</td>
<td>2001</td>
<td>Žena</td>
</tr>
<tr>
<td>90133</td>
<td>text</td>
<td>15</td>
<td>Matúš</td>
<td>Dlhá 2</td>
<td>76</td>
<td>Žltá</td>
<td>Bryndzové halušky</td>
<td>Vranou nad topľou</td>
<td>1500</td>
<td>Muž</td>
</tr>
</table>
</html>

61
ulohaformular.html Normal file
View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<title>formular</title>
<!-- namapovanie css-->
</head>
<body>
<h2>Formular uloha</h2>
<form action="https://localhost/adlerka/action_page.php"
method="get" name="prihlasenie">
<label for="name">Meno</label><br>
<input type="text" id="name" name="fname" value=""><br>
<label for="name1">priezvisko</label><br>
<input type="text" id="name1" name="1name" value=""><br>
</form>
<hr>
<h2><input type="password"></h2>
<form method="get">
<label for="username">Username</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password</label><br>
<input type="text" id="password" name="password"><br><br>
<input type="submit" value="stlač">
<input type="reset" value="reset">
<hr>
<label type="pohlavie">Muž</label> <h2><input type="radio"></h2>
<label type="Pohlavie">Žena</label><br> <h2><input type="radio"></h2>
<form>
<label type="username">Username</label><br>
<input for="text" id="username" name="username"><br>
<label for="password">Password</label><br>
<input type="text" id="password" name="password"><br><br>
<input type="submit" value="stlač">
<input type="reset" value="reset">
</form>
<hr>
<h2><input type="email"></h2>
<form method="get">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
<hr>
<h2><input type="file"></h2>
<form method="post">
<label for="mylife">Select a file:</label>
<input type="file" id="myfile" name="myfile" multiple>
<input type="submit" value="Submit">
</form>

15
upravaformularov.css Normal file
View File

@ -0,0 +1,15 @@
#prvy input
{
width: 100%
}
#druhy input[type=text] , #druhy input[type=number]
width: 100%;
padding: 12px 20PX;
margin:

42
upravaformularov.html Normal file
View File

@ -0,0 +1,42 @@
<!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="https://www.wz.sk/admin/filemanager/edit?dir=%2Fweb%2F&file=%2Fweb%2Fuprava.css">
</head>
<body>
<div style="width: 200px; margin: aut;">
<form id="prvy">
<label for="fname">Meno</label>
<input type="text" id="fname" name="fname">
<input for="num">cislo</label>
<input type="number" id="num" name="Cislo">
</form>
</form>
</div>
<hr>
<form id="druhy">
<label for="fname2">Meno
<input type="text" id="fname2" name="fname2">
<input for="1name">prezvisko</label>
<input type="text" id="1name" name="1name">
<input for="num2">cislo</label>
<input type="number" id="num2" name="cislo">
</label>
</form>
<hr>
<form id="treti">
<input type="text" name="neco"
placeholder="Meno">
</form>
<hr>
<form id=""></form>
</body>
</html>

61
wwwuloha.html Normal file
View File

File diff suppressed because one or more lines are too long

119
wwwuloha2.html Normal file
View File

@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bambusové ponožky</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #b9b9b9;
}
header {
background-color: #bba7358f;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #444444b7;
padding: 10px;
text-align: center;
}
nav a {
color: #dfd07a;
text-decoration: none;
margin: 0 10px;
}
nav a:hover {
color: rgb(189, 189, 42);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #585a59;
min-width: 100px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #363636;
}
section {
padding: 20px;
}
footer {
background-color: #333333c7;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>
<header id="top"> <!-- Added id attribute here -->
<h1>Bambusové ponožky od majstra</h1>
</header>
<nav>
<div class="dropdown">
<a href="#top">Domov</a> <!-- Added href pointing to the top -->
<div class="dropdown-content">
<a href="#about">Domov</a> <!-- Change href to point to the "About Us" section -->
<div class="dropdown-content">
<a href="#cheap-socks">Lacnejšie</a> <!-- Change href to point to the "Lacnejšie" section -->
<a href="#">Drahšie</a>
<a href="#">Najdrahšie</a>
</div>
</div>
<div class="dropdown">
<a href="#">O stránke</a>
<div class="dropdown-content">
<a href="#">Sublink 1</a>
<a href="#">Sublink 2</a>
<a href="#">Sublink 3</a>
</div>
</div>
<div class="dropdown">
<a href="#">Kontakty</a>
<div class="dropdown-content">
<a href="#">Sublink 1</a>
<a href="#">Sublink 2</a>
<a href="#">Sublink 3</a>
</div>
</div>
</nav>
<section id="about"> <!-- Added id for the "About Us" section -->
<h2>About Us</h2>
<p>Welcome to our website! We specialize in high-quality bamboo socks.</p>
</section>
<section id="cheap-socks"> <!-- Added id for the "Lacnejšie" section -->
<h2>Cheap Bamboo Socks</h2>
<p>Here you can find affordable bamboo socks:</p>
<ul>
<li><a href="https://example.com/cheap-bamboo-socks-1">Cheap Bamboo Socks 1</a></li>
<li><a href="https://example.com/cheap-bamboo-socks-2">Cheap Bamboo Socks 2</a></li>
<li><a href="https://example.com/cheap-bamboo-socks-3">Cheap Bamboo Socks 3</a></li>
</ul>
</section>
<footer>
&copy; 2024 My Basic Website. All rights reserved.
</footer>
</body>
</html>