Jump tp･･･ 画像配置/ テーブル/ 余白/ 任意位置に文字/ リンクボタン/ 文字サイズ・色/ RGBコード/ HTML連結/ 不要な行削除/ サムネイル作成/ 1画像に複数リンク/ ボタンを横並びにするCSS/ サイト内検索CGI設置/ 行末に一括で<br>をつける/
作成したホームページを、インターネット上に発表する場はレンタルサーバーを利用する。
ホームページ作成ではエディターが不可欠。無料高性能のエディターはBracketsが使いやすい。
Bracketsのサイトへ
画像の下に文字の例
革新的な技術で世の中を動かす企業を目指します。
途中で流し込みをやめ、画像下に文字を入れる場合
<br clear="all">続いて文字を<p>で囲む
テレビチャンネルを変える学習リモコンはPCからのコマンドで
（左）ネジキの花は下垂、（右）アセビは葉上
<div style="float:left; margin: 10px;">
<img src="images/nejiki.jpg" width="150">
</div>
<div style="float:left; margin: 10px;">
<img src="images/asebi/asebi5.jpg" width="150">
</div>
<br clear="both"/>
（左）ネジキの花は下垂、（右）アセビは葉上
| 設立 | 平成10年1月10日 |
|---|---|
| メールアドレス | info@example.com |
HTMLの記述
<table class="sample1">
<tr>< th> 設立 </th>
<td >平成10年1月10日 </td>
</tr>
<tr><th>メールアドレス </th>
<td>info@example.com </td>
</tr>
</table>
css の記述
table.sample1{
border-collapse:collapse;
width:100%;
margin:10px auto;
}
table.sample1 th,table.sample1 td{
padding:5px;
border:1px solid #515353;
}
table.sample1 th{
text-align:right;
font-weight:bold;
letter-spacing:1px;
white-space:nowrap;
color:#fff;
background:#797c7b;
border-left:#515353 5px solid;
}
table.sample1 td{
border-left:#515353 5px double;
border-right:#515353 5px double;
}
| 種類 | 意味 | 図解 |
|---|---|---|
| margin | 要素の外側の余白で、枠からの距離 |  |
| padding | 要素の内側の余白で、枠までの距離 |  |
padding 10px [top bottom left right]
padding 10 20px [top bottom] [left right]
padding 10 20 30px [top][left right][bottom]
padding 10 20 30 40px [top][right][bottom][left]
<a href="#top">このページのはじめに戻る</a>
<a href="aerial_img/bousai1.png">特定の写真へ</a>
サイト内の特定の場所にジャンプするには、
ジャンプ先に<a name="Aerial photos">と「ラベル名」を書いておき、
ジャンプ元には<a href="aerial.html#Aerial photos"> 空撮写真へ</a>
と飛び先を示して、「同じラベル名」を書く
注釈の入れ方 「!-- jump先の書き方 --」
HTMLの記述
<p class="absolute">表示文字</p>
CSSの記述
.absolute{
position: absolute;
top: 1350px;
right: 20;
width: 260px;
height: 100px;
border: solid 1px #ff00ff;
}
かぎ括弧はじめは <、おわりは>
iPadの画面をコピーするには
ホームボタン＜○＞とスリープボタン＜□＞とを一緒に押す
写真は「写真」アプリのカメラロールに保存される
<button type="button" onclick="window.open('blossom3.html')" style="background-color:salmon;">樹皮の特徴 </button>
説明ページへのリンク先
http://yume.hacca.jp/koiki/form/button-link.htm
<span style="font-size: 18px; color:black;">サイズを変えたい文字</span>
メモ帳、ワードパッドで文字化けが直らないときは、ブラウザにdrag and dropして、ブラウザで開く。文字化けが解消されたら、文章全部をコピーandペイストでメモ帳に貼り付け、名前を付けて保存する。
「<!--」と「-->」で囲む
cssのコメント記述は「/*」と「*/」で囲む
１）連結するHTMLファイルをフォルダーにコピーする
２）$ cat ./htmls/*.html > out.html
１）編集ー置換ー（検索欄3つ目）正規表現ー置換欄は空白
２）（含む行を削除） ^.*mojiretsu.*\n
（空白行を削除）^\n
１）残したい部分を「選択」
２）トリミング後、下側の↓でキャンバスを引き延ばす
３）空白ができたら、そのまま名前を付けて保存
１）「HTML ImageMap Generator」にアクセス
２）画像をDrag & Drop
３）ボタン形状を選び、望みの場所でDrag
４）ボタンの位置と大きさを調整
５）自動生成されたHTMLソースを「raw」ーcopy
６）画像表示するHTMLにpaste
７）HTMLのimg src= width= height= で画像サイズを調整
※画像のプロパティでサイズを確認する
１）詳細はファイル＃77-8-3，4,5
２）要点 ［．］=class
３）.Container width, justify-items
４）.box width
５）画像は背景透過処理しておく
６）cssが短ければ、html内にstyleタグで組み込むこともできる
１）ksearchを利用。Webサーバー上のファイルから、特定の文字を含むファイルを検索するCGI スクリプト。
AND/ OR検索できる。INDEX作成タイプ。優秀
Software URL: kent-web.com/data/ksearch.html
INDEX更新
URL: jk3tjn.sakura.ne.jp/ksearch/admin.cgi PassWordは「0123」
検索対象ディレクトリのURL記入 http://jk3tjn.sakura.ne.jp
２）設置手順
エディタ秀丸でksearch.cgiを開き、「改行=LF」「BOMチェックをはずす」として上書き保存
３）Serverに指示通りのフォルダを作成後、ファイルを転送する
/home/jk3tjn/www/ksearch/ksearch.cgi
/lib
/data等
４）転送後ファイルを選択して右クリック。プロパティで属性変更する
５）検索窓へのアクセス
https://jk3tn.sakura.ne.jp/ksearch/ksearch.cgi
１）VS Codeにテキストを書く。
２）改行コード<br>をつけたい複数行を選択する。
３）Shift + Alt + I --->Enter
４）すべての行末にカーソルが点滅する
５）<br>を記入する
６）最後の行の末尾でEnterキーを打つ。
警察官 これが銀行口座凍結通知書です。
自分 そんなに早く発行されるものなんですか。銀行口座が凍結されたら生活できなくなります。何とかできませんか。とても困ります。
審議官 「こちらは審査会のカトウカズヤです。ドコモショップ新宿南口店で、宮原さん名義の携帯から大量の不正メールが送信されています。放置するとすべての通信が停止されてしまいます。０８０－２４８２－６９４６は宮原さんの携帯ですか」
自分 「いいえ違いますが、ちょっと待ってください、調べます・・・。 家族のでもないです。」
審議官 「分かりました。それでは新宿警察署の担当につなぎますから、これから申し上げる内容を伝えて、即刻被害届を受理してもらうようにしてください。では文面を言いますから、書きとってください。」