ホームページ仮③ TOPページとリンク

ハイw

本日はホームページ仮のTOPページとリンクを作れるところまで作っていこうと思います。

前のリンク関係の記事もちょこっと修正したので良かったらご覧ください

 

あくまで仮なので・・・・・・・・・・・・・・・・・・・・・・・

HTML/XMLとJavaScript

1ページ目 アクマデ作りかけ・・・

Content image

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript"src="script2.js">
</script>
<h1></h1>
<script type="text/javascript">
 <!--
  window.status="";
 -->
</script>

<div class="main">
<h1 onmouseover="window.status''"><a id="pagetop" name="pagetop"></h1>
<p><img src="image/.jpg"alt="hyoushi"/></p>
<ul>
<li><a href="top.html">TOP</a></li>
<li><a href="form.html"></a></li>
<li><a href="sab.html"></a></li>
</ul>
</div>
</div>
</head>
<body>

<div class="page">
<p class="logo"><a href="rent.html"></a><a href="mori.html"></a></p>

<script type="text/javascript">  
<!--
 function tojiru(){
  window.close();
  }
-->
</script>
<p><input type="button"value=""onclick="tojiru()"></p>
</div>
</body>
</html>

おなじく2ページ目

Content image

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript"src="script2.js">
</script>
<ul>
<li><a href="top.html">TOP</a></li>
<li><a href="form.html"></a></li>
<li><a href="sab.html"></a></li>
</ul>
<title></title>
</head>
<body>
<div class="mein">
<noscript>
<p></p>  
</noscript>
<form name="form1"onsubmit="return check()" onreset="return kakunin()">
<table border="1" summary="">
<caption></caption>
<p><img src="image/.jpg " alt=""/></p>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td class="right">01</td>
<td></td>
<td class="right">1000</td>
<td class="right"><select name="na1" onchange="ocha1()">
<option value="Hou0"selected>0</option>
<option value="Hou1">1</option>
<option value="Hou2">2</option>
<option value="Hou3">3</option>
<option value="Hou1">4</option>
<option value="Hou2">5</option>
<option value="Hou3">6</option>
<option value="Hou1">7</option>
<option value="Hou2">8</option>
<option value="Hou3">9</option>
<option value="Hou4">10</option></select></td>
<td class="right"><input name="sum1"type="text"value="0"size="20"class="right"></td>
</tr>
<tr>
<td class="right">02</td>
<td></td>
<td class="right">300</td>
<td class="right"><select name="na2" onchange="ocha2()">
<option value="m0"selected>0</option>
<option value="m1">1</option>
<option value="m2">2</option>
<option value="m3">3</option>
<option value="m4">4</option>
<option value="m5">5</option>
<option value="m6">6</option>
<option value="m7">7</option>
<option value="m8">8</option>
<option value="m9">9</option>
<option value="m10">10</option></select></td>
<td class="right"><input name="sum2"type="text"value="0"size="20"class="right"></td>
</tr>
<tr>
<td class="right">03</td>
<td></td>
<td class="right">500</td>
<td class="right"><select name="na3" onchange="ocha3()">
<option value="jas0"selected>0</option>
<option value="jas1">1</option>
<option value="jas2">2</option>
<option value="jas3">3</option>
<option value="jas4">4</option>
<option value="jas5">5</option>
<option value="jas6">6</option>
<option value="jas7">7</option>
<option value="jas8">8</option>
<option value="jas9">9</option>
<option value="jas10">10</option></select></td>
<td class="right"><input name="sum3"type="text"value="0"size="20"class="right"></td>
</tr>
<tr>
<th colspan="4" class="right"></th>
<td class="right"><input name="gou" type="text" value="0" size="18" class="right"></td>
</tr>
<tr>
<th colspan="4" class="right">(10%)</th>
<td class="right"><input name="zei" type="text" value="0" size="18" class="right"></td>
</tr>
<tr>
<th colspan="2" class="right"></th>
<td class="right"><select name="otodoke" onchange="kei4()">
<option value="sentaku"></option>
<option value="hokkaidou"></option>
<option value="touhoku"></option>
<option value="kantou"></option>
<option value="chuubu"></option>
<option value="kansai">西</option>
<option value="chuugoku"></option>
<option value="shikoku"></option>
<option value="kyuusyu"></option></select></td>
</tr>
<th class="right"></th>
<td class="right"><input type="text" name="sou" value="0" size="18" class="right"></td>
</tr>
<tr>
<th colspan="4" class="right"></th>
<td class="right"><input type="text" name="All" value="0" size="18" class="right"></td>
</tr>
</table>
<p></p>
<table summary="">
<tr>
<th class="left">()</th>
<td>
<label for="dai"><input id="dai" type="radio" name="shiharai" value="daibiki"></label>
<label for="gin"><input id="gin" type="radio" name="shiharai" value="furikomi"></label>
</td>
</tr>
<tr>
<th class="left">()</th>
<td><input type="text" name="namae" size="40" value=""></td>
</tr>
<tr>
<th class="left">便()</th>
<td>(:604-8225)&amp;amp;amp;amp;amp;amp;amp;nbsp;
<input type="text" name="yuubin" size="10" maxlength="8" value=""></td>
</tr>
<tr>
<th class="left">()</th>
<td><input type="text" name="jusyo" size="60" value=""></td>
</tr>
<tr>
<th class="left">()</th>
<td>(:012-345-6789)
<input type="text" name="denwa" size="20" maxlength="13" value=""></td>
</tr>
<tr>
<th class="left"></th>
<td><input type="text" name="mail" size="40" value=""></td>
</tr>
<tr>
<th class="left"></th>
<td><textarea name="memo" cols="50" rows="5"></textarea></td>
</tr>
</table>
<p>!!!!</p>
<p><input type="submit" value=""><input type="reset" value=""></p>
</form>
</div>
</body>
</html>

そして、3ページ目

Content image

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script type="text/javascript"src="script3.js">
</script>

<h1>     3 > </h1>
<ul>
<li><a href="top.html">TOP</a></li>
<li><a href="form.html"></a></li>
<li><a href="sab.html"></a></li>
</ul>
<title></title>

<p><strong></strong></p>

</head>
<body>
<div class="mein">
<noscript>
<p></p>  
</noscript>
<form name="form1"onsubmit="return check()" onreset="return kakunin()">
<table border="1"align="center" summary="">
<caption></caption>
<p><img src="image/1.jpg " alt="1"/></p>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th class="right">01</th>
<td>EXQ</td>
<td class="right">2000</td>
<td class="right"><select name="kai1" onchange="fu1()">
<option value="k0"selected>0</option>
<option value="k1">1</option>
<option value="k4">2</option></select></td>
<td class="right"><input name="sum1"type="text"value="0"size="20"class="right"></td>
</tr>
<tr>
<th class="right">02</th>
<td>EXQ</td>
<td class="right">1500</td>
<td class="right"><select name="kai2" onchange="fu2()">
<option value="ku0"selected>0</option>
<option value="ku1">1</option>
<option value="ku2">2</option></select></td>
<td class="right"><input name="sum2"type="text"value="0"size="20"class="right"></td>
</tr>
<tr>
<th class="right">03</th>
<td>EXQ </td>
<td class="right">100</td>
<td class="right"><select name="kai3" onchange="fu3()">
<option value="re0"selected>0</option>
<option value="re1">1</option></select></td>
<td class="right"><input name="sum3"type="text"value="0"size="20"class="right"></td>
</tr>
<tr>
<th class="right">04</th>
<td></td>
<td class="right">300</td>
<td class="right"><select name="kai4" onchange="fu4()">
<option value="kan0"selected>0</option>
<option value="kan1">1</option>
<option value="kan2">2</option>
<option value="kan3">3</option>
<option value="kan4">4</option>
<option value="kan5">5</option></select></td>
<td class="right"><input name="sum4"type="text"value="0"size="20"class="right"></td>
</tr>
<th class="right">05</th>
<td></td>
<td class="right">1000</td>
<td class="right"><select name="kai5" onchange="fu5()">
<option value="jas0"selected>0</option>
<option value="jas1">1</option>
<option value="jas1">2</option></select></td>
<td class="right"><input name="sum5"type="text"value="0"size="20"class="right"></td>
</tr>
<th class="right">06</th>
<td></td>
<td class="right">3000</td>
<td class="right"><select name="kai6" onchange="fu6()">
<option value="jas0"selected>0</option>
<option value="jas1">1</option></select></td>
<td class="right"><input name="sum6"type="text"value="0"size="20"class="right"></td>
</tr>
<tr>
<th colspan="4" class="right"></th>
<td class="right"><input name="gou" type="text" value="0" size="18" class="right"></td>
</tr>
<tr>
<th colspan="4" class="right">(10%)</th>
<td class="right"><input name="zei" type="text" value="0" size="18" class="right"></td>
</tr>
<tr>
<th colspan="2" class="right"></th>
<td class="right"><select name="otodoke" onchange="kei4()">
<option value="sentaku"></option>
<option value="hokkaidou"></option>
<option value="touhoku"></option>
<option value="kantou"></option>
<option value="chuubu"></option>
<option value="kansai">西</option>
<option value="chuugoku"></option>
<option value="shikoku"></option>
<option value="kyuusyu"></option></select></td>
</tr>
<th class="right"></th>
<td class="right"><input type="text" name="sou" value="0" size="18" class="right"></td>
</tr>
<tr>
<th colspan="4" class="right"></th>
<td class="right"><input type="text" name="All" value="0" size="18" class="right"></td>
</tr>
</table>
<p></p>
<table summary=""align="center">
<tr>
<th class="left">()</th>
<td>
<label for="dai"><input id="dai" type="radio" name="shiharai" value="daibiki"></label>
<label for="gin"><input id="gin" type="radio" name="shiharai" value="furikomi"></label>
</td>
</tr>
<tr>
<th class="left">()</th>
<td><input type="text" name="namae" size="40" value=""></td>
</tr>
<tr>
<th class="left">便()</th>
<td>(:604-8225)
<input type="text" name="yuubin" size="10" maxlength="8" value=""></td>
</tr>
<tr>
<th class="left">()</th>
<td><input type="text" name="jusyo" size="60" value=""></td>
</tr>
<tr>
<th class="left">()</th>
<td>(:012-345-6789)
<input type="text" name="denwa" size="20" maxlength="13" value=""></td>
</tr>
<tr>
<th class="left"></th>
<td><input type="text" name="mail" size="40" value=""></td>
</tr>
<tr>
<th class="left"></th>
<td><textarea name="memo" cols="50" rows="5"></textarea></td>
</tr>
</table>
<p>!!!!</p>
<p><input type="submit" value=""><input type="reset" value=""></p>
</form>
</div>
</body>
</html>

ん~~~

出来ればこんな感じのホームページを作りたいのですが商標権とか販売士の資格がないのでちょっと考え中( ^ω^)・・・

表示するとこんな感じ

 

で、最後にスタイルシートのプログラムを(CSS)載せておきます。

ホームページのデザインを決めるプログラムですwww

h1{
color:#333333;
font-weight:bold;
font-size:200%;
text-align:center
}
h2{
color:blue;
font-weight:bold;
font-size:10%;
text-align:center
}
address{
color:#003366;
font-weight:bold;
font-size:20%;
text-align:right;
border-top:5px solid #003366;
clear:both;
}
p{
font-size:150%;
line-hight:20%;
text-align:center
}
strong{
font-size:150%;
line-hight:20%;
text-align:center
}
body{
margin:0;
padding:0;
background-repeat: repeat-x;
background-attachment: fixed;
background-position: right bottom
color:#333333;
}
.logo{
background-color:#003366;
margin:0;
}
.page{
width:70px;
}
.photo{
float:right;
margin-left:1px;
}
.top{
clear:both;
text-align:right;
}
ul li{
list-style-image:url(../image/list.gif);
font-weight:bold;
font-size:120%;
margin-left:10px;
margin-bottom:10px;
}
.list-centered {
 text-align: center;
}
.list-centered li {
 display: inline-block;
}table{
background-color:collapse;
boder:1px solid #003366;
width:650px;
font-size:90%;
}
th{
background-color:#ccccff;
font-size:110%;
boder:1px solid #003366;
padding:20px
}
td{
boder:1px solid #003366;
font-size:110%;
width:20px;
padding:10px
}

.rowitem{
background-color:#ccccff;
}
caption{
font-weight:bold;
}
.point a:link{
color:#336699;
}
.point a:visited{
color:#666666;
}
.point a:hover{
color:#cc6699;
}
a img{
border:0;
}

 

Content image

TOPをクリックするとTOPに

お茶注文をクリックするとお茶注文ページに

プライズ商品注文をクリックするとプライズ商品注文ページにとぶわけです。

3つの中でそれぞれのページにとべます。

まだまだ作成途中ですが…

 

ここまでご覧いただきありがとうございました。

BYマんタ

 

Article date Article like Article tip Article supporter
公開日 いいねによる獲得 投げ銭による獲得 サポーター
: : :
2020/06/08 146.06 ALIS 0.00 ALIS
マんタ's icon'
  • マんタ
  • @25kit6
9月・・・本来祭りのシーズンだが今年は無理そうですなぁ・・・・(´;ω;`)
コメントする
コメントする