web(html)はHyperText Markup Languageにより、OS環境によらずどのPC(コンピュータ)でも同じように表示されるようにすることを可能にしました。現在ではテキスト・画像・動画、それらのレイアウトなど広範囲に応用されています。特にハイパーリンクにより、別の項目に遷移(移動)することが特徴的であり、Wikipediaが百科事典の代わりに普及した要因の一つになっています。
コンピュータの通信で最も基本になるのがテキストの送信です。テキストが基本です。半角英数字が基本で、0から255数字に割り当てられています。一文字”a”は”97”です。つまり文字97を送ると”a”と表示されます。その文字を意味付けるのがタグと呼ばれる決まりです。タグは荷札のことで、よくカバンにタグをつけて名前を書きますね。この文字を送るときに<a></a>のようにタグで挟んでタグの中身は〇〇ですのような指定をします。
htmlはテキストで書かれています。標準のテキストエディタを開いて以下をコピー&ペーストして保存します。ファイル名はfirsthtml.htmlとして保存しましょう。最後はhtmlに変更してください。”.txt”で保存された場合はファイル名の変更機能を利用してください。”.txt”や”.html”は拡張子、あるいは属性といいます。アプリケーションの判断に利用されます。
このファイルを右クリックでwebブラウザ(safariやcrhome、egde)を選択して開いて見てください。<p></p>はprint(表示)しますの意味ですね。
<html>
<p>初めてのHTML</p>
</html>
※[参考]ファイルを書くアプリケーションについて: Macではテキストエディットというアプリケーションが標準で利用できます。新規書類を開いたら、メニューのフォーマットから標準テキストを選択します。上のテキストを記載したら拡張子を「.txt」→「.html」に変更して保存します。
Windowsは「メモ帳」アプリケーションがプリインストールされています。これを利用して作業を進めることができます。
それでは<p> </p>で囲まれた部分を以下のように変更して上書き保存してください。再度ブラウザを指定して開いてみましょう!(あら不思議)
<html>
<p>
<font color="red">初めてのHTML</font>
</p>
</html>
まずは適当な画像を保存します。firsthtml.thmlが保存してある同じフォルダに、imagesというフォルダを作成し、その中に表示させたい画像を保存します。ここではtemp_image.pngを用意しました。
<html>
<p>
<font color="red">初めてのHTML</font>
</p>
<p><img src="images/temp_image.png" alt="テスト画像"></p>
</html>
google 検索で次の言葉を検索します。「google site login」
表示されたページにログインします。
以下の空白のサイトをクリックして開きます。