ホームページ作り

おはこんばんにちは、一週間怠けて今週分もやっとかける時間が作れましたうぷ主です。

今回は具体的にホームページを作っていきます。

作っていく上でコードの役割を写真を添えてつらつらと書いていきます。

それでは行ってみましょう。


まずはこれがなければ始められない、ファイルを作りますが、それを置くフォルダを作っておきます。場所は後で参照するのでわかりやすいところに置いておきます。今回はworkspaceという名前で置いておきます。その中に任意の名前.htmlのファイルを新しく作っておきます。

そしたらコードを書き始めていきましょう。

最初に注意することは動作させたいコードは場所を指定してから書き始めます。

ここでは上から2行目から順にやりたいことが書かれており、表示する文字をUTF-8の規格で表示させること、タイトルの決定、別ファイルでHTMLファイルの見栄えをよくするために使うファイルをリンクさせることの宣言をしています。

書いたコードを有効にするためにheadタブ、コード写真では<head></head>で囲っています。書いたコードを有効するためにはしたいことを指示する正しいコードを正しいタグで囲う必要があるのです。

最初は<!DOCTYPE html></html>でこれからさせたいことのコードを囲います。要するに色々書いているコードは全部このタグ内で書きます。新しいタグを作って場所を作る場合では入れ子構造にしていきます。<!DOCTYPE html><head>書きたいコード</head></html>みたいに書いていきます。

それを踏まえた上でhtmlファイルのコード内容はこうなっております。

一枚目

2枚目です。ちょっと長すぎて見にくいですね(汗)これからはこまめに更新して更新した部分だけを紹介していきます。

このファイルでやっていることはメニューバーを上につける、写真を貼る、インスタグラムとツイッターの写真を下に置くことだけです。

写真の位置や文字の大きさ、ホームページの背景の色などはさっき言った見栄えをよくするための別ファイルに書いていきます。htmlファイルにも直接かけますがコードの可読性のために別ファイルにします。

写真をHPで出力するには<img>タグを使います。このタグは<>の中に必要な写真ファイルの場所をsrc="写真ファイルのリンク"というように使います。

大きさはwidth=,height=というように写真のリンクを指定した後につけ足して大きさを調整します。

ただ並べるだけだと位置調整とかの編集がめんどくさいしコードも読みにくくなってデバッグがとても時間がかかるのでulタグとliタグで整理しながら写真を添付していきます。

ulタグとliタグは箇条書きなどにセットでよく使われるタグです。liタグ単体では使えません。

divタグは囲った内容をグループにまとめるものです。まとめて編集したいときに使います。

bodyタグで囲ったところはコードで実際にさせたい動作、写真や文字を表示させたいなどを書く場所です。

headerタグはいわゆるメニューバーを作るときに使うタグでホームページ画面の上部分の場所になります。

footerは逆に下の部分、よくツイッターやFacebook、インスタグラムのリンクが貼ってある場所になります。

h1、pタグはともに文章を書くときに囲うタグですが、h1は見出し、pタグは中身となる文章をHP表示させるために使います。なので文字の大きさはh1の方が大きいです。h3とかでも見出しとして表示されますが、よく使い方がわかっていないのでほぼ使わないと思います。

navタグはナビゲーションタグと言われており、ページを飛ぶ際に踏むリンクをまとめるために使われています。比較的最近になってから使えるようになりました。

htmlファイルについては以上です。

HPを形にするために一気に書き上げましたが、ブログに書き直すと面倒くさいし、かなり分量が多くなってしまいますね、今までで一番長いかもしれません。見栄えをよくするための別ファイルもあるのですが、そこは次回にまわすとします。

見にくい記事となってしまってすみませんが、今回はこれまでということで。

おわりんぬ


NICO'S HOME

不定期更新しているブログです.週一では更新されていると思います. 日記的なの書いたり,ノウハウみたいなのも書いていく予定です.

0コメント

  • 1000 / 1000