本稿では、マークアップ言語であるHTMLファイルを作成し、WEBサーバーにアップしてWEBブラウザから閲覧する・・・という一連の流れを解説いたします。
プログラミングの超基礎が始まる感じですね。
まずは、HTMLというものが何なのか？というところから入っていきたいと思います。
HTML概略
HTMLとは？
htmlとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」の頭文字を取った略語でして、通称、「マークアップ言語」と呼ばれるコードです。
これはWEBブラウザにコンテンツデータを表示するための記述言語になるんですね。
知らなくてもイイっちゃいいんですが、「html」と言っても実は種類がありまして、例えば「xhtml」。
今はもうほとんど使われなくなりましたね。
「xhtml」は「eXtensible HyperText Markup Language」の略でして、「xml」のルールで記述された「html」のことです。
「xml」は「Extensible Markup Language」の略ですね。
性質としては、「html」とそう変わらないんですが、記述方法が異なることと、役割的なものも少し違うんですね。
（細かい背景は一旦無視して概略的に書かせていただきますと）最近ですと、データの受け渡しに「JSON（JavaScript Object Notation）」が用いられることが多いですが、「JSON」と「xml」はかなり近い性質を持っていると感じます。
本講座では、そこまで深いプログラミングを解説する予定ではありませんが、色々進んでいくうちに調べてもらえたらと思います。
で、今後、本講座では「html5」を主として使っていきます。
弊社は、今は「html5」を記述していますが、その前は「html4.0 strict」で記述していました。
htmlのバージョンによって記述内容が変わります。
html5は、マークアップ言語ではありますが、かなりプログラム的な思想を持ったマークアップ言語です。
html5は、cssやjavascriptとあわせることで、デザインについてかなり細かくて動的な描写が出来ます。
かなり専門性の高いところになってきますので、ちょっと難しいかもしれません。
ひとまず本講座は、SEOやAI最適化に向けたスキルを身につけるための講座ですので、どこまで深掘りするかは、今後考えながらやっていくことを予定しています。
cssとjavascriptの存在
htmlを記述する上で、一緒に覚えなければいけなくなってくるのが「css」と「javascript」です。
「css」は「Cascading Style Sheets」の略、「javascript」は略されてない記述で、「javascript」を略して「js」ですね。
「css」はコンテンツを装飾するための記述をするためのスタイルシート言語で、「js」はWEBブラウザ上で動的な動きをするためのプログラミング言語です。
どちらも深掘りすると話が長くなるのでここでは割愛いたします。
それぞれググっていただくとたくさんの情報が出てきますので、適宜選別しながらご確認ください。
htmlはあくまでブラウザ上でコンテンツを表示するためだけの記述をするものでして、cssやjavascriptなどをくみあわせてコンテンツを華麗に綺麗に表示することとなります。
ここは深く関わってきますので、丁寧に解説していきたいと思います。
写真を使って解説 〜HTMLをサーバーにアップしてWEBブラウザで確認するまで〜
さて、前置きが長くなりました。
ここからは、手元のパソコンでhtmlファイルを作成し、前の項で契約していただいたレンタルサーバーにhtmlをアップしてWEBブラウザで表示を確認するところまでをやっていきます。
まずは、ftpを開いて、前の項で設定したテスト環境に繋いでください。
別の項で解説したftp接続やファイルの置き場について理解がないと、ファイルの管理が大変になってきますので、一つ一つの作業の中で理解を深めるようにしてください。
また、手元のパソコンでもテスト環境にアップしているファイルを入れているフォルダを開いておいてください。
htmlファイルを作成する準備として、テキストエディタでファイルを開いておいてください。
先に文字コードや改行コードについて確認をしておいてください。
これも別の項で解説していますので、見覚えがないことでしたら別の項を確認しておいてください。
これでひとまずhtmlファイルを作成する準備が整った感じでしょうか。
さて、まず最初に何をするといいか。AI（gemini）に聞いてみましょう。
今回のプロンプトは以下の通りです。
htmlを書き始めたい。
何から書くといい？
以下のポイントでコピペ出来るコードを出して欲しい。・文字コードはUTF-8で、改行コードはLF。
・表示するテキストは「初めてのHTMLコード」。
・これから色んな要素を追加してくため、物凄く基礎的で簡素なコード。でよろしくお願いします。
こちらが求めていた返信をいただきました。
いただいた返信を Google document にコピペしておきましたので、以下のリンクを開いて確認してください。
以下のキャプチャのような画面が開きます。
で、一応ですが、みなさん、それぞれ gemini に打ち込んだ内容と返信をもらった内容はドキュメントなどに保存して、ドライブ上のどこかにまとめて管理しておくようにしてくださいね。
で、肝心なコードの部分をコピペして、テキストエディタに記述してください。
記述内容は以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>初めてのHTML</title>
</head>
<body>
<p>初めてのHTMLコード</p>
</body>
</html>
この作業は、手書きしてください。
コピペすると意味がありません。
全角、半角、英数字、アルファベット、日本語などなど、入力する際にたくさんのことを考えることになりますので、コピペではなく、手書きで書くようにしてください。
で、コードを手書きしましたら、以下のキャプチャの通り、「文字コード」「改行コード」「標準」のところの「標準」をクリックしてその中にある「HTML5」を選択してください。
そうしますと、シンタックスハイライトのカラーがつきましたね。
これは、テキストエディタが持つ標準機能でして、コードを少しでもみやすくするための機能です。
たくさんの選択肢があったと思います。
それぞれの特徴がありまして、種類ごとに独自のルールを設定することも出来ます・・・がここでは一旦割愛します。
ともあれ、「HTML5」を選択したら、ファイルそのものを保存します。
「別名で保存」や「名前をつけて保存」などを選択し、「index.html」というファイル名をつけてテスト環境にアップするフォルダに保存してください。
「index.html」は、そのフォルダ内の”インデックスファイル”として扱われ、フォルダの中の中心的なファイルの扱いになります。
テスト環境のフォルダにindexファイルを保存したら、次はftpを確認しましょう。
以下のように、ftp上ではまだファイルが確認出来ていません。
ですので、ftpの読み込んだファイル情報を最新状態にします。
右クリックをして「最新の状態に更新」のような文言があると思うので、それを選択してクリックします。
そうしたら、ftpの左側のペインが最新状態になり、「index.html」が見れるようになりました。
次に、アップロードするファイルを選び、右クリックして「アップロード」を選択し、サーバーへアップロードしてください。
重いファイルをアップする時には時間がかかりますし、サーバーの稼働がおかしい時もアップロードに時間がかかったりします。
サーバーにファイルをアップした後は、WEBブラウザで表示内容を確認します。
URTLのところに「https://ahaha.semlaboratory.company/」と打ち込みます。
そうしましたら、別の項で設定したテスト環境にアクセスします。
basic認証を設定していますので、設定した「ユーザー名」と「パスワード」を入力してください。
成功したら、以下の画面が表示されます。
以下のような感じの画面が表示されたら成功です。
単純ですが、今回は「初めてのHTMLコード」と出力されるだけのコードでした。
さて、ここで一つ疑問を持っていただきたいところです。
先ほど作成したファイルは「index.html」でした。
ですが、先ほどのURLに「index.html」とは入力していません。
そうなんです、「index.***」というインデックスの扱いをされているファイルは、ファイル名の入力を割愛することができるんですね。
例えば「index.php」や「index.cgi」なども同じくです。
インデックスファイルは入力を割愛してもファイルが存在していれば自動で読み込まれるようになっているんですね。
そうそう、今回のプロンプトですが、以下のようにテキストエディタにプロンプトの内容をメモして、残しておくようにしましょう。
そして、別の項でも書いた通り、諸々の内容をスプレッドシートなどに残して、全部の記録を取っておくようにしましょう。
誰に見せるわけではなく、身内で履歴などを把握するためです。
そして、先ほど作成したメモファイルをサーバー上にアップしておきましょう。
厳密な話をするとすれば、公開エリアに履歴などを書いたものをアップしてはいけません。
非公開エリアにアップして、全員で共有するようにしてください。
また、ファイル名も、簡単には想像出来ないファイル名などにしてくださいね。
先ほどアップした「index.html」の内容ですが、WEBブラウザに出力されたコードでも確認を取っておきましょう。
今回は簡易的なチェックの方法で確認を取ります。
WEBブラウザの画面上にマウスカーソルをあてて、右クリックをして「ページのソースを表示」をクリックしてください。
そうしますと、WEBブラウザが読み込んでる内容が表示されます。
もし、ミスなどがあれば、赤色でハイライトされていて、多少見やすい感じになってるかなと思います。
もし、想像通りの表示になっていない時は、こうやって確認をするようにしましょう。
今は、 Google chrome の機能でもっとたくさんの情報を確認することが出来るんですが、まだこの段階では不要なので、ソースだけを確認するようにしてください。
締め
ということで、本稿は以上です。
これからhtmlファイルを編集する方法に入っていき、またcssやjsについても深めていくことになります。
ここからは半角記号に慣れないと出来ない作業になってきますので、ここで書かれたことを理解しながらたくさんのファイルを作成して、関連するツールやソフトがどのような動作をするのか、ご自身で体感してください。
何にせよ、これが”技術者”と言われる方々の最初の作業です。
頑張って慣れていくようにしてください。
以上。
| Profile | |
|---|---|
 |
SEM LABORATORY»書いた記事一覧 株式会社SEMラボラトリーの管理者アカウントです。公式の発表については管理者アカウントから配信しています。 |
この記事へのコメントはありません。