このページは社内で全くhtmlに触れたことがない人向けに作成しております。
あえて浅い知識のみに絞り、伝えておりますので深くhtmlについて知りたい方はご了承ください。
htmlとは何か
htmlというのはざっくりというとwebサイトを作成するときに使うものであり、webサイトの骨組みを作るものだと思ってください。
シンプルなwebサイトならば非常に簡単に作成することが出来るので、下記の方法で一度webページを作成してみましょう。
必要なもの
- メモ帳
- webブラウザ(chrome)
基本的にはこの2つだけでwebサイトを作ることが可能です。
まずは簡単なwebサイトを作成してみましょう。
簡単なwebサイトの作成
簡単なwebサイトを作りますが、今後の学習のために拡張性を持たせた状態で作成をしていきます。
大まかな手順は下記の通りに進んでいきます。
| Step.1 | 拡張子の表示 |
|---|---|
| Step.2 | フォルダーの作成 |
| Step.3 | メインページ作成 |
この章ではあくまでもページの作成までがメインとなりますので、難しいことは何もありません。
書かれた通りに進んでみましょう。
Step.1 拡張子の表示
まずはどこでも良いのでフォルダを開いてください。
※windows+eでフォルダは開きます
出てきたフォルダの上部にある[表示]をタッチし、ファイル名拡張子と書かれたチェック項目をチェック状態にしてください。
これで[拡張子]というものが表示されるようになります。
Step.2 フォルダーの作成
デスクトップでもどこでも良いので右クリックを押し[新規作成]→[フォルダー]を選択しましょう。
これでフォルダーが作成されます。
今回は学習用として使用しますので、フォルダーの名前を
learn
に変更してみましょう。
フォルダの作成が完了したら、作成したlearnフォルダーの中に入ってください。
Step.3 メインページ作成
learnフォルダーに入ったら、フォルダーの中で右クリックをし[新規作成]→[テキスト ドキュメント]と選択しましょう。
作成されたファイルの名前を下記のように変更してください。
index.txt
作成が完了したら、index.txtを開きメモ帳で下記のように記載してみてください。
<h1>こんにちは</h1>
webページとして表示されています。
※単純にページを表示したいので今はh1等の意味を知らなくて問題ありません。
ここまで作成が完了したら、一度メモ帳を閉じてlearnフォルダーに戻り表示されているindex.txtのファイル名を下記のように変更してください。
index.html
※ファイルを選択状態でF2を押すと簡単にファイル名を変更出来ます
ファイルの拡張子[.(ドット)以降]を変更したらアイコンが変わりましたか？
ブラウザのアイコンに変更されていたら準備完了です。
そのアイコンをダブルクリックして開いてみましょう。
このような画面が表示されましたか？
単純に文字がそのまま出力されるだけではなく、<h1>こんにちは</h1>と書かれた部分が大きく表示されhtmlとして変換されてるのがわかると思います。
このようにhtmlは非常に簡単に書くことができます。
しかし実際の現場ではhtml単体のみで使われることは少なく、実際には下記のようなたくさんの言語との組み合わせで使用されます。
- CSS: 見た目や動きの変更
- javascript: 多岐に渡る動作やギミックの追加
他にも沢山の他言語の中でwebページを作成するときにhtmlが使用されます。
何かしらのwebページを作成したいと考えた時には大まかにでもhtmlを理解していくことが必要になるでしょう。
次の学習について
今回は大まかなhtmlとはということについて説明をしました。
次は実際にhtmlファイルを作っていく時にあると便利なエディタの説明をしていきます。