forras

css/bootstrap-reboot.css

@@ -0,0 +1,331 @@
+/*!
+ * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
+ * Copyright 2011-2019 The Bootstrap Authors
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
+  display: block;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  text-align: left;
+  background-color: #fff;
+}
+
+[tabindex="-1"]:focus {
+  outline: 0 !important;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-original-title] {
+  text-decoration: underline;
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  border-bottom: 0;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: .5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+a {
+  color: #007bff;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
+a:not([href]):not([tabindex]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:not([href]):not([tabindex]):focus {
+  outline: 0;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1em;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+svg {
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  color: #6c757d;
+  text-align: left;
+  caption-side: bottom;
+}
+
+th {
+  text-align: inherit;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+select {
+  word-wrap: normal;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button:not(:disabled),
+[type="button"]:not(:disabled),
+[type="reset"]:not(:disabled),
+[type="submit"]:not(:disabled) {
+  cursor: pointer;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  -webkit-appearance: listbox;
+}
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 0;
+  margin-bottom: .5rem;
+  font-size: 1.5rem;
+  line-height: inherit;
+  color: inherit;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none !important;
+}
+/*# sourceMappingURL=bootstrap-reboot.css.map */

css/bootstrap-reboot.min.css

@@ -0,0 +1,8 @@
+/*!
+ * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
+ * Copyright 2011-2019 The Bootstrap Authors
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
+/*# sourceMappingURL=bootstrap-reboot.min.css.map */

nyomtatas.css

@@ -0,0 +1,44 @@
+body{
+  color: #293647;
+}
+
+.bg-fej {
+  background-position: center;
+  height: 250px;
+  padding-top: 75px;
+}
+
+.bg-fej h1{
+  color: white;
+  font-size: 500%;
+  text-transform: uppercase;
+  text-decoration: underline overline;
+  font-weight: bold;
+}
+
+.container{
+  margin-bottom: 25px;
+}
+
+.bg-torzs {
+  background-color: #C5C599;
+}
+
+h3{
+  margin: 25px 0px;
+}
+
+a {
+  font-style: italic;
+  font-weight: bold;
+  color: darkblue;
+}
+
+#kalkGomb {
+  margin: 20px auto;
+}
+
+#valasz{
+  visibility:hidden;
+}
+

nyomtatas.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Forrásoldal</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="css/bootstrap.min.css">
+  <script src="js/bootstrap.min.js"></script>
+</head>
+<body>
+
+<div class="jumbotron bg-fej text-center">
+  <h1>Nyomtatás</h1>
+</div>
+  
+<div class="container">
+  <div class="row">
+    <div class="col-md-12">
+      <h3>Nyomtatási eljárások</h3>
+      <p>A nyomtatás dokumentumok sokszorosítására szolgáló eljárás. Kínában már a 8. században feltalálták, Európában viszont csak a reneszánsz korban jelent meg, a Johannes Gutenberg-féle nyomdaprés volt az első európai nyomdagép. Az évszázadok során sok eltérő nyomtatási eljárás fejlődött ki.</p>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-4 bg-torzs">
+      <h3>Magasnyomtatás</h3>
+      <p>A nyomtatás Kínában már a 8. században feltehetőleg ismert volt. A ma ismert legrégebbi bizonyíték egy 868-ban készült Gyémánt szútra, de a források alapján már 812-től papírpénzt is előállítottak, amelyhez nélkülözhetetlen a nyomtatás. A magasnyomtatás kezdetleges formáját, a fadúcos nyomtatást alkalmazták, amely abból állt, hogy egy kézzel vésett falapot befestékeztek, majd egy papírlapot ráterítettek, és száraz kefével a hátoldalát dörzsölve hozzásimították. Ugyanekkor már megpróbálkoztak fából faragott, szedhető írásjegyekkel is, jó néhány nyomtatott könyvet készítettek, de az eljárás nem terjedt el széles körben.</p>     
+    </div>
+    <div class="col-md-4">
+      <h3>Síknyomtatás</h3>
+      <p>1796-ban Alois Senefelder feltalálja a litográfiát, és ezzel együtt kidolgozta a síknyomtatás elvét. Először maratással kialakított rézlemezt használ magasnyomóformaként, majd olcsóbb anyagokat keres. Kísérletei közben mészkövet is használ, melynél véletlenül felfedezi, hogy a vizes felületen nem tapad meg a festék. Az ő nevéhez fűződik még a fémfelületről történő síknyomtatás bevezetése is.</p>
+      <p>Ugyanez az elv az alapja a bádognyomtatásnak is, melyet plakátgyártásnál, konzervdoboz gyártásnál használtak. Szintén ebből fejlődött ki a ma leginkább elterjedt ofszetnyomtatás, mely szintén egy közvetett nyomtatási forma.</p>
+    </div>
+    <div class="col-md-4 bg-torzs">
+      <h3>Szitanyomtatás</h3>        
+      <p>A 19. században újra felbukkan egy némileg feledésbe merült technológia, a szitanyomtatás. A textiliparban használják, ahol filmnyomásnak nevezték el. Főleg a lyoni selyemiparban volt használatos, selymek díszítésére. Kialakulásáról keveset tudunk, annyi azonban bizonyos, hogy Kínában és Japánban már évszázadokkal ezelőtt használták textilfestésre. A formát fakeretbe erősített emberi haj, később selyemszál alkotja, ráragasztott rizspapírból kivágott sablonnal. A módszer maga nem sokat változott, de ma már modernebb anyagokat és gyártástechnológiát alkalmaznak. A különböző sűrűségű szitaszövetekből sok esetben fototechnikai úton készítik a nyomóformát. Szitanyomtatással olyan anyagok állíthatók elő, amik mással csak nehezen, vagy egyáltalán nem. Manapság is a textilipar használja leginkább, de így gyártják például a közúti jelzőtáblákat is. Papírra is nyomnak vele, általában kis példányszámú névjegyek, plakátok gyártására ideális, de sok esetben használják ofszetnyomatok díszítő jellegű felülnyomására többnyire színtelen UV fényre száradó lakkokkal. Ezek mellett a művészetben is használatos grafikai eljárás. </p>      
+    </div>
+   </div>
+   <div class="row">
+    <div class="col-md-6">
+      <h3>Mélynyomtatás</h3>        
+      <p>A 20. század elején tökéletesítik a mélynyomtatást, melynek elve az őskorig nyúlik vissza, majd később az ötvösművészek fejlesztették tovább. A 15. századig kézzel vésték a formákat. Majd savas maratással finomabb árnyalatok visszaadását is lehetővé tették. Ez az eljárás kimondottan művészeti célokra volt használatos. Klics Károly angliai útja során megismerkedik William Henry Fox Talbot találmányával, melynek lényege az, hogy bizonyos sók nagymolekulájú szerves anyagban fényérzékenyekké válnak. Emellett tanulmányozza az akkori modern textiliparban használt mélynyomó gépeket. Ezeket az ismereteket felhasználva kifejleszti a fényképészeti úton történő formakészítést, és a rácsmélynyomtatást. Lényegében az ő találmányát hívjuk ma hagyományos értelemben mélynyomtatásnak. Ezt az elvet alkalmazzák a tamponnyomtatásban is, mely hasonlóan az ofszetnyomtatáshoz, egy közvetett nyomtatási forma. Először egy rugalmas anyagra mélynyomtatással juttatják a festéket, aztán ezt az anyagot nyomják a nyomandó felületre. Az anyag rugalmassága lehetővé teszi, hogy nem csak sík felületnél használható. Manapság többek közt ajándék, és reklámtárgyak (például tollak, öngyújtók) esetében alkalmazzák. </p>
+    </div>
+    <div class="col-md-6 bg-torzs">
+      <h3>Digitális eljárások</h3>        
+      <p>A számítástechnika fejlődésével fokozatosan épültek be a nyomdaiparba. Először a fényszedésnél jelentek meg szövegek szerkesztésénél, tördelésénél, majd a fényképészetben is elterjedtek. Ezután megjelentek a nyomóformakészítésben is. Legelterjedtebb formája az ofszetnyomtatásnál alkalmazott CTP. A személyi számítógépekhez használt nyomtatók ugyan már régóta digitális eljárásokkal működnek, de nyomdászati célokra kevés területen használják. A hagyományosan nyomóformáról történő nyomtatással szemben eléggé lassúnak mondható. Eleinte kisebb példányszámú, kevésbé igényes termékeket gyártottak vele, de napjainkban akár 4-500 példányszámú nyomatok gazdaságos, jó minőségű nyomtatására is van lehetőség. </p>
+    </div>
+    
+  </div>
+</div>
+
+</body>
+</html>
+

nyomtatas.js

@@ -0,0 +1,12 @@
+function kalkulal(){
+    //Űrlapadatok
+    const szelesseg=297;
+    const magassag=420;
+    const papir=document.getElementById('papirtipus').value;
+    //Számítások
+    let terulet=Math.round((szelesseg*magassag)/10000);    
+    let koltseg=terulet*papir;
+    //Megjelenítés
+    document.getElementById('valasz').style.visibility = "visible";
+}
+

webforras.txt

@@ -0,0 +1,50 @@
+Hivatkozások:
+-------------
+
+Johannes Gutenberg -> https://hu.wikipedia.org/wiki/Johannes_Gutenberg
+Alois Senefelder -> https://hu.wikipedia.org/wiki/Alois_Senefelder
+William Henry Fox Talbot -> https://hu.wikipedia.org/wiki/William_Henry_Fox_Talbot
+
+
+Képek feliratai:
+---------------
+
+kezi_szedes.jpg -> Kézi szedés
+ofszet_nyomogep.jpg -> Ofset nyomógép
+nyomdagep_pultja.jpg -> Nyomdagép pultja
+
+
+Új tartalmi rész:
+-----------------
+
+<p>Plakátnyomtatás</p>
+
+<p>Egy színes plakát nyomtatásának költségét meghatározó tényezők többek közt a papírlap minősége és a papírlap mérete</p>
+
+<p>A következő űrlapon plakátnyomtatáshoz lehet árat kalkulálni:</p>
+
+<form class="bg-torzs p-3 text-center">
+  <label for="szelesseg">Szélesség (mm):</label>
+  <input type="text" class="form-control" id="szelesseg" min="10" max="1000" />
+  <label for="magassag">Magasság (mm):</label>
+  <input type="text" class="form-control" id="magassag" min="10" max="1400" />
+  <label for="ptip">Papírtípus:</label>
+  <select class="form-control" id="papirtipus">
+    <option value="38">Pauszpapír (115g/m³)</option>
+    <option value="32">Matt, vastag, általános papír (120g/m³)</option>
+    <option value="45">Matt, normál, fotópapír (180g/m³)</option>
+    <option value="45">Fényes, normál, fotópapír (200g/m³)</option>
+    <option value="45">Szatén, normál, fotópapír (190g/m³)</option>
+    <option value="65">Művész, kreatív, kartonpapír (300g/m³)</option>
+  </select>
+  <input type="button" value="Kalkuláció" id="kalkulalGomb" />
+  <div>
+    <p>A kalkuláció alapja:</p>
+    <ul>
+      <li>területe: <span id="terulet"></span> dm<sup>2</sup></li>
+      <li>papírköltség: <span id="papir"></span> Ft/dm<sup>2</sup></li>
+    </ul>
+    <h2><span id="koltseg">?</span> Ft</h2>
+  </div>
+</form>
+