Popis XHTML úlohy

Z VirtlabWiki

(Rozdíly mezi verzemi)
Přejít na: navigace, hledání
Verze z 08:40, 18. 8. 2008
Zap113 (Diskuse | příspěvky)
(→CSS styl)
← Předchozí porovnání		 Verze z 10:18, 18. 8. 2008
Zap113 (Diskuse | příspěvky)
(→CSS styl)
Následující porovnání →
Řádka 192: Řádka 192:
'''Ukázka nového Css stylu pro úlohy.''' '''Ukázka nového Css stylu pro úlohy.'''
<pre> <pre>
-/* Last update:2008_08_17 by Karel Zapletal */+/* Last update:2008_08_18 by Karel Zapletal */
body { body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
Řádka 212: Řádka 212:
/* Struktura uloh */ /* Struktura uloh */
 +
 +/* Caption class */
 +div.caption {
 + text-align: left;
 + font-size: 14px;
 + font-weight: bold;
 + font-style: italic;
 + color: #336667;
 + margin: 0px 0px 0px -20px;
 + padding: 0px 0px 6px 0px;
 +}
 +/* Title */
div#title { div#title {
font-family: Arial; font-family: Arial;
Řádka 221: Řádka 233:
padding: 18px 0px 12px 0px; padding: 18px 0px 12px 0px;
} }
- +/* Goal */
div#goal { div#goal {
border-bottom: 1px black dotted; border-bottom: 1px black dotted;
Řádka 227: Řádka 239:
padding: 12px 0px 6px 20px; padding: 12px 0px 6px 20px;
} }
- +/* Required Time */
div#time { div#time {
border-bottom: 1px black dotted; border-bottom: 1px black dotted;
Řádka 233: Řádka 245:
padding: 12px 0px 6px 20px; padding: 12px 0px 6px 20px;
} }
- +/* Theoretical Background */
div#teoback { div#teoback {
border-bottom: 1px black dotted; border-bottom: 1px black dotted;
Řádka 242: Řádka 254:
list-style-type: none; list-style-type: none;
} }
 +/* Topology */
div#topology { div#topology {
border-bottom: 1px black dotted; border-bottom: 1px black dotted;
Řádka 253: Řádka 266:
padding: 12px 0px 6px 20px; padding: 12px 0px 6px 20px;
} }
- +/* Optional Tables */
div#optionaltable { div#optionaltable {
border-bottom: 1px black dotted; border-bottom: 1px black dotted;
Řádka 262: Řádka 275:
div#optionaltable table{ div#optionaltable table{
border: 1px #AAAAAA solid; border: 1px #AAAAAA solid;
- text-align: center; 
} }
div#optionaltable table tr{ div#optionaltable table tr{
Řádka 270: Řádka 282:
border: 1px #AAAAAA solid; border: 1px #AAAAAA solid;
background-color: #DDDDDD; background-color: #DDDDDD;
- padding: 5px;+ padding: 7px;
text-align: center; text-align: center;
} }
div#optionaltable table td{ div#optionaltable table td{
border: 1px #AAAAAA solid; border: 1px #AAAAAA solid;
- padding: 5px;+ padding: 7px;
text-align: left; text-align: left;
} }
- +/* Configuration */
- +
div#config { div#config {
border-bottom: 1px black dotted; border-bottom: 1px black dotted;
Řádka 285: Řádka 296:
padding: 12px 0px 6px 20px; padding: 12px 0px 6px 20px;
} }
- +/* Function Test */
div#test { div#test {
border-bottom: 1px black dotted; border-bottom: 1px black dotted;
Řádka 291: Řádka 302:
padding: 12px 0px 6px 20px; padding: 12px 0px 6px 20px;
} }
- +/* Optional Tasks */
div#optional { div#optional {
border-bottom: 1px black dotted; border-bottom: 1px black dotted;
Řádka 371: Řádka 382:
/* Struktura uloh END */ /* Struktura uloh END */
-div.caption { 
- text-align: left; 
- font-size: 14px; 
- font-weight: bold; 
- font-style: italic; 
- color: #336667; 
- margin: 0px 0px 0px -20px; 
- padding: 0px 0px 6px 0px; 
-} 
/* Code */ /* Code */
div.code { div.code {

Verze z 10:18, 18. 8. 2008


HTML stránka úlohy

  • hlavicka 
<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='cs' lang='cs'> 
<head>
	<!-- ENCODING /-->
	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	  <meta http-equiv="Content-Language" content="cs" />
	<!-- ENCODING end /-->
	
	<!-- CASCADING STYLE SHEETS /-->
	   <!-- EXTERNAL STYLE /-->	
	   <link rel="stylesheet" type="text/css" href="./css/task-design.css" />
  <!-- CASCADING STYLE SHEETS - end /-->
  
	<!-- TITLE /-->
    <title>Topologie 1 IP routing, RIP, statické routy</title>
  <!-- TITLE end /-->

</head>
  • body, div wrapper 
<body>
<!-- WRAPPER /-->
<div id="wrapper">
  • Název (Title) 
  <div id="title">
    Title: Topologie 1 IP routing, RIP, statické cesty.
  </div>
  • Cíl (Goal) - h1 nadpis 
  <div id="goal">
    <h1>Goal:</h1>
    Nakonfigurujte síť pomocí směrovcího protokolu RIP verze 1 a 2.
  </div>
  • Cas reseni (Required Time) - h1 nadpis 
  <div id="time">
    <h1>Required Time: 120 minits</h1>
  </div>
  • Teoretický základ (Theoretical Background) - text nebo link, VOLITELNE - h1 nadpis 
  <div id="teoback">
    <h1>Theoretical Background:</h1>
      Teoretický úvod pro RIP:
      <ul>
        <li><a href="http://www.ietf.org/rfc/rfc1058.txt"> RIP RFC 1085 - Ietf.org</a></li>
        <li><a href="http://www.ietf.org/rfc/rfc1388.txt"> RIPv2 RFC 1388 - Ietf.org</a></li>
        <li><a href="http://www.cisco.com/en/US/tech/tk1330/tsd_technology_support_technical_reference_chapter09186a0080759842.html"> RIP Technology Handbook - Cisco.com</a></li>
      </ul> 
      Konfigurace a referenční příkazy pro RIP:
      <ul>
        <li><a href="http://www.cisco.com/univercd/cc/td/doc/product/software/ios124/124cg/hirp_c/ch25/ripconfg.htm"> RIP Configuration guide IOS 12.4T - Cisco.com</a></li>
        <li><a href="http://www.cisco.com/univercd/cc/td/doc/product/software/ios124/124tcr/tirp_r/rte_riht.htm"> RIP Command reference IOS 12.4T - Cisco.com</a></li>
      </ul>   
  </div>
  • Topologie (Topology) - obrazek, primo v hlavnim HTML dokumentu - h1 nadpis 
  <div id="topology">
    <h1>Topology:</h1>
    <img src="../pictures/rip1.png" alt="Topology RIP1" title="Topology RIP1" />
  </div>
  • Volitelne tabulky s adresami, cisly DLCI, VLAN apod. - h1 nadpis 


  •  Konfigurace (Configuration) - h1 nadpis



  <div id="config">
    <h1>Configuration:</h1>
    <p>
      Nakonfigurujte síť pomocí směrovcího protokolu RIP v.1, bez záložní linky 19.2 kbit.
      Použijte IP adresy z privátního rozsahu 192.168.x.x. Ověřte funkci pomocí příkazů:
    </p>
    <div class="code">
      Router# sh ip route <span>;výpis směrovací tabulky</span><br/>
      Router# sh ip protocol <span>;výpis ip protokolu</span><br/>
      Router# debug ip rip <span>;výpis informací o RIP směrovacích transakcích</span><br/>
    </div>
  
      <p>
      Upravte konfiguraci pro použití protokolu RIP verze 2 a znovu zkontrolujte funkci.
      </p>
      <div class="code">
        Router(config)# router rip<br/>
        <div>
    	     Router(config-router)# version 2<br/>
        </div>
      </div>
      <p>
      Doplňte na sériovou linku B-C autentikaci pro směrovací aktualizace.
      </p>
      
      <div class="code">     	
        Router(config)# key chain jméno<br/>
        <div>
  	     Router(config-keychain)# key 1<br/>
  	     <div>
  	       Router(config-keychain-key)# key-string heslo<br/>
  	     </div>
        </div>
        Router(config)# Int s1<br/>
        <div>
    	   Router(config-if)# Ip rip authentication key-chain jméno<br/>
    	   Router(config-if)# Ip rip authentication mode md5<br/>
    	  </div>
      </div>
      
      <div class="code">
        Router# Sh key chain
      </div>
      Vyzkoušejte efekt příkazu:
      <div class="code">
          Router(config)# router rip<br/>
          <div>
      	     Router(config-router)# maximum-paths 1<br/>
          </div>
      </div>
      Změňte výchozí metriku záložní linky příkazem.
      <div class="code">
          <div>
            Router(config)# router rip<br/>
            <div>
        	     Router(config-router)# offset-list 0 out 5 s0<br/>
            </div>
        	</div>
      </div>
      na routerech A a D (pro jejich sériové interface s0 nebo s1)
      <p>
      Překonfigurujte danou síť pomocí statického směrování (bez záložní linky). 
      Na routerech A a E použijte výchozí cestu (default route). Zkontrolujte funkci příkazem PING.
      </p>
  </div>



  •  Test funkce (Function Test) - h1 nadpis



  <div id="test">
    <h1>Function test:</h1>
    <div class="code">
      Router# sh ip route<br/>
      Router# sh ip protocol<br/>
      Router# debug ip rip<br/>
      Router# ping<br/>
      Router# trace<br/>
    </div>
  </div>



  •  Volitelne ulohy (Optional Tasks) - h1 nadpis



  <div id="optional">
    <h1>Optional task:</h1>
  </div>



  •  Konec wrapper, body a stránky



</div>
<!-- WRAPPER end /-->

</body>
</html>



 CSS styl 


Odkazy na CSS styly:




Ukázka nového Css stylu pro úlohy.



/* Last update:2008_08_18 by Karel Zapletal */
body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #FFFFFF;
}
/* Obal stránky */
#wrapper {
	padding: 0px 0px 0px 0px;
	background-color: #FFFFFF;/* #CEFFAF */
	/*border: 1px ridge #A7CC8F;*/
	position: relative;
	margin: auto;
	width: 900px;
	color: #111111;
	text-align: justify;
}

/* Struktura uloh */

/* Caption class */
div.caption {
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	font-style: italic;
	color: #336667;
	margin: 0px 0px 0px -20px;
	padding: 0px 0px 6px 0px;
}
/* Title */
div#title {
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	/*background-color: #F6FFBF;*/
	color: #336667;
	margin-left: 5px;
	padding: 18px 0px 12px 0px;
}
/* Goal */
div#goal {
	border-bottom: 1px black dotted;
	margin: 5px;
	padding: 12px 0px 6px 20px;
}
/* Required Time */
div#time {
	border-bottom: 1px black dotted;
	margin: 5px;
	padding: 12px 0px 6px 20px;
}
/* Theoretical Background */
div#teoback {
	border-bottom: 1px black dotted;
	margin: 5px;
	padding: 12px 0px 6px 20px;
}
div#teoback ul li {
	list-style-type: none;
}
/* Topology */
div#topology {
	border-bottom: 1px black dotted;
	text-align: center;
	margin: 5px;
	padding: 12px 0px 6px 20px;
}
div#topology img {
	/*border: 1px ridge #A7CC8F;*/
	margin: 5px 0px 0px -20px;
	padding: 12px 0px 6px 20px;
}
/* Optional Tables */
div#optionaltable {
	border-bottom: 1px black dotted;
	text-align: center;
	margin: 5px;
	padding: 12px 0px 6px 20px;
}
div#optionaltable table{
	border: 1px #AAAAAA solid;
}
div#optionaltable table tr{

}
div#optionaltable table th{
	border: 1px #AAAAAA solid;
	background-color: #DDDDDD;
	padding: 7px;
	text-align: center;
}
div#optionaltable table td{
	border: 1px #AAAAAA solid;
	padding: 7px;
	text-align: left;
}
/* Configuration */
div#config {
	border-bottom: 1px black dotted;
	margin: 5px;
	padding: 12px 0px 6px 20px;
}
/* Function Test */
div#test {
	border-bottom: 1px black dotted;
	margin: 5px;
	padding: 12px 0px 6px 20px;
}
/* Optional Tasks */
div#optional {
	border-bottom: 1px black dotted;
	margin: 5px;
	padding: 12px 0px 6px 20px;
}
div#goal h1{
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	font-style: italic;
	color: #336667;
	margin: 0px 0px 0px -20px;
	padding: 0px 0px 6px 0px;
}
div#time h1{
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	font-style: italic;
	color: #336667;
	margin: 0px 0px 0px -20px;
	padding: 0px 0px 6px 0px;
}
div#teoback h1{
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	font-style: italic;
	color: #336667;
	margin: 0px 0px 0px -20px;
	padding: 0px 0px 6px 0px;
}
div#topology h1{
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	font-style: italic;
	color: #336667;
	margin: 0px 0px 0px -20px;
	padding: 0px 0px 6px 0px;
}
div#optionaltable h1{
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	font-style: italic;
	color: #336667;
	margin: 0px 0px 0px -20px;
	padding: 0px 0px 6px 0px;
}
div#config h1{
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	font-style: italic;
	color: #336667;
	margin: 0px 0px 0px -20px;
	padding: 0px 0px 6px 0px;
}
div#test h1{
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	font-style: italic;
	color: #336667;
	margin: 0px 0px 0px -20px;
	padding: 0px 0px 6px 0px;
}
div#optional h1{
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	font-style: italic;
	color: #336667;
	margin: 0px 0px 0px -20px;
	padding: 0px 0px 6px 0px;
}
/* Struktura uloh END */

/* Code */
div.code	{
	font-family: "Courier New", Courier, monospace;
	/*color: Yellow;*/
	background-color: #F1F1F1;
	border: 1px dashed;
	width: 600px;
	padding: 10px 5px 10px 20px;
	margin: 5px 0px 5px 20px;
}
div.code	span{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-style: italic;
}
div.code	div{
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 20px;
}
div.code ul {
	list-style-type: none;
	margin-left: -20px;
}
div.code ul li {
	list-style-type: none;
}
/* Code END */

/* Link */
a:before {
	content: "Link:";
}

a {
	text-decoration: none;
	color: #336667;
}
/* Link END */

/* tag code */
code {
	font-family: "Courier New", Courier, monospace;
	background-color: #F1F1F1;
	border: 1px dashed;
	width: 600px;
	padding: 10px 5px 10px 20px;
	margin: 5px 0px 5px 20px;
	display: block;
}
code	span{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-style: italic;
}
code object {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 20px;
}
code a:before {
	content: "";
}
code a {
	text-decoration: none;
	color: #000000;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 20px;
}
/* tag code END */




Citováno z „http://infra2.cs.vsb.cz/vl-wiki/index.php/Popis_XHTML_%C3%BAlohy“

						
			

		

	

		

		

	
	

		
Osobní nástroje