Popis XHTML úlohy
Z VirtlabWiki
(Rozdíly mezi verzemi)
| Verze z 18:54, 18. 8. 2008 Zap113 (Diskuse | příspěvky) (→CSS styl) ← Předchozí porovnání |
Aktuální verze Zap113 (Diskuse | příspěvky) (→CSS styl) |
||
| Řádka 181: | Řádka 181: | ||
| </body> | </body> | ||
| </html> | </html> | ||
| - | </pre> | ||
| - | |||
| - | == CSS styl == | ||
| - | Odkazy na CSS styly: | ||
| - | <ul> | ||
| - | <li>URL CSS pro úlohy: https://virtlab.cs.vsb.cz/css/task-design.css - Původní</li> | ||
| - | <li>URL CSS pro úlohy: https://virtlab.cs.vsb.cz/css/task_style.css - Nový</li> | ||
| - | </ul> | ||
| - | |||
| - | '''Ukázka nového Css stylu pro úlohy.''' | ||
| - | <pre> | ||
| - | /* 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: 700px; | ||
| - | 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: 700px; | ||
| - | 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 */ | ||
| </pre> | </pre> | ||
Aktuální verze
[editovat]
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>
