freestyle-selection

漫画アニメ情報色々。考察を気軽に更新

【HTML】Webサイト制作方法!ホームページを作ろう。手順をわかりやすく。

webサイトを作る上で知っておくべきこと。

 webサイトをどのように作るのか手順すら分からない。

 どこから何をどうすればいいかが分からない。

 HTMLとかって聞いたことあるけど・・・。

 

 webサイトを作る上で学ぶこと、手順を勉強していきます。

 

 

ãweb imageãã®ç»åæ¤ç´¢çµæ

 

webページとは

 いろいろな商品を販売するショッピングのページや会社などを紹介するページ。

 

 また個人の日記を書き記すためのブログ。

 

 などのいろいろな情報が公開されています。

 

 

 

 個人や起業が発信したい情報を一つにまとめ、インターネット上で公開できるようにまとめた文書のことをwebページといいます。

 

 

 一般的にwebページやwebサイトのことをホームページと呼ぶこともあります。

 

webサイトとは

ãwebsite imageãã®ç»åæ¤ç´¢çµæ

 複数のwebページをひとまとめにしたものをwebサイトと言います。

 

 例えば、ショッピングなどができるwebページでは複数の商品情報や価格。

 

 商品の購入方法や商品の問い合わせ掲載などのたくさんの情報を載せていかなければいけません。

 

 それら全てを一つのwebページにまとめると膨大な量になってしまいます。

 

 そこで載せたい情報を種類別で分けてwebページを作ります。

 

 それらをまとめたものがwebサイトなのです。

 

webページを作るには

f:id:umituki_pc:20190127170855p:plain

 

 文字や写真をインターネット上に発信をし、誰もが見られるようにするには、決められた言語でwebページを作成しなければなりません。

 

 その言語の一つがHTMLです。

 

 webページ作成にはまず、HTMLについて学ぶ必要があります。

 

学びたい場合

HTMLの基礎をわかりやすく

  

#HTML カテゴリーの記事一覧 - freestyle-selection

 

 そしてwebページを見やすくデザインをするにはスタイルシートの言語であるCSSを学ぶ必要性があります。 

 

学びたい場合 

 

#CSS カテゴリーの記事一覧 - freestyle-selection

 

Webページ制作の流れ

ãwebsite imageãã®ç»åæ¤ç´¢çµæ

目的やテーマを決める

 まずはじめにテーマや目的を決めないといけません。

 

 なにから手を付けていいかわからないからです。

 

 目的が例えば多くの人に犬の良さを知ってもらいたいなら、どんな種類があるか、どこがいいかと定めることが出来ます。

 

 筆者の場合はwebとパソコン、プログラミング等を扱っています。

 

掲載する記事の内容、原稿や写真を用意する

 

 webページに掲載する素材を用意します。

 

 商品を紹介するならあらかじめ原稿を用意しておきます。

 

 またその商品を紹介するときにわかりやすいように写真も用意しておくといいでしょう。

 

デザイン案を考える

 デザイン案を考えます。

 

 webページの目的にあったデザインにしましょう。

 

 各ページにそのページにあった物にすることによって統一感が生まれます。

 

HTMLとCSSファイル作成

ãfile imageãã®ç»åæ¤ç´¢çµæ

 デザイン案を決めたのなら、次にwebページのもとになるHTMLファイルを作成します。

 

 HTMLには文字列や画像要素のみを書き、デザインはスタイルシート言語のCSSに書きます。

 

 基本的にHTMLは文字画像。

 

 CSSはデザインと覚えてもらって結構です。

 

ブラウザで確認する

é¢é£ç»å

 

 ブラウザに作ったファイルをドラッグ&ドロップすると確認出来ます。

 

 CSSファイルの正しく反映されているかなどをチェックします。

 

 記述した要素が正しく反映されているか。

 

 それらをチェックします。

 

Webサイトを公開

ããµã¼ã imageãã®ç»åæ¤ç´¢çµæ

 

 完成したwebサイトに必要なデータは作成者のコンピュータの中に保存されているだけでまだ公開はされていません。

 

 公開するには必要なデータをサーバーに通す必要があります。

 

 ファイルを送りコピーしなければなりません。

 

 一般的にはインターネットサービスプロバイダやレンタルサーバ会社と契約をし、提供されるサーバにファイル転送ソフトウェアを利用してファイルをコピーします。

 

 あとは契約先から提供されるURLをブラウザに入力して完成です。

 

 最後にWEBサイトをちゃんと閲覧できるか確認します。

 

summary

f:id:umituki_pc:20190127224345p:plain

 webサイト作りにはHTMLなどの言語がかかせません。

 

 正直のところ、今の世の中ではHTMLができるだけでは余程極めていないと就職に厳しい世界です。

 

 PCのプログラミング言語とは違って難しくは無いので少しづつ当サイトで勉強していきましょう。