htmlの基礎知識・使い方・アップロードの仕方

1. 効果

web上に文書を表示できる。
また、webページの構成を指定できる言語とファイル形式。
全てのwebページはHTMLによって表示されている。

2. HTMLの使い方

2.1 HTMLを使う際に必要な条件

HTMLを使う際には、文章が入力できるソフトとHTMLの文法が必要になる。

ソフト:テキストエディタ
文法:タグ

2.2 テキストエディタの例

・windowsやmac内蔵のメモ帳

・TeraPadやサクラエディタといったフリーソフト

※officeのwordのような文章作成ソフトは適していない

2.3 代表的なHTMLのタグ

名前読み方効果例(<>は本来半角で入力。●●は任意の文章。)
 heading ヘッディング 使われている文章を「見出し」にする<h1>●●</h1>
 paragraph パラグラフ 使われている文章を「段落」にする<p>●●</p>
 br ブレーク 使った場所から改行を行う ●●<br />●●
 a hrefエーエイチレフ
または
アンカーのエイチレフ
 使われている文章に他のページへのリンクをつける <a href=”http://●●”>リンクはこちら</a>

2.4 タグの入力の仕方

  1. <(大なり)を打つ
  2. 決められたHTMLの文法に従って、アルファベットを打つ
  3.  >(小なり)を打つ
  4. タグの効果を適用したい文章を打つ
  5. <(大なり)を打つ
  6. /(スラッシュ)を打つ
  7. 2で打ち込んだ、決められたHTMLの文法を打つ
  8. >(小なり)を打つ

※4「タグの効果を適用したい文章を打つ」以外は全て半角で打つ

【タグを使用して文章を見出し扱いにする例】
<h1>タグの効果を適用したい文章</h1>

タグの効果を始める最初のタグ(ここでは<h1>)を「開始タグ」と言い、
タグの効果の終わりを決める最後のタグ(ここでは</h1>)を「終了タグ」と言う。

2.5 HTMLの保存方法

ファイルの拡張子を「html」にする。

テキストエディタを使って書かれたHTMLはそのあと、HTMLファイルとして保存する。

2.5.1 保存方法の一例

テキストエディタ:windows内蔵のメモ帳

「ファイル」→「名前をつけて保存」から、ファイル名を「●●.html」に変更する
※●●は任意の名前

下記のようなアイコンのファイルができる
※アイコンの画像は、PCやスマートフォンでデフォルトとして設定しているブラウザソフトのものになっている。
ブラウザソフトとは:インターネットを見るためのソフト
例:chrome、safari、インターネットエクスプローラーなど

クリックするとweb上で表示されます。
※ただし、ここで表示されているhtmlは、インターネットから検索しても見る事ができない状態です。

3. HTMLのファイルをインターネット上で公開する方法

必要な環境:webサーバー(レンタルで問題なし)
例:さくらインターネットのレンタルwebサーバーを使う場合

「ファイルマネージャー」を開く

html14

フォルダを作成する

ファイル名は任意の名前を入力

作成したhtmlファイルをアップロードする

「ファイルを追加」をクリック

「アップロード開始」をクリック
※「同名のファイルを上書きしてよろしいですか」という警告が出るが、無視してかまわない

アップロード完了。

検索してみると表示されている。

※今回事例でのアドレスが「●●.sakura.ne.jp/test/test.html」になる理由
 ・ 「●●.sakura.ne.jp」の部分 
   さくらインターネットで契約時に発行されるサブドメイン「●●.sakura.ne.jp」
 ・ 「/test」の部分 
   作成したフォルダ名
 ・ 「/test.html」 
   作成したファイル名

4. 参考文献

5. 関連項目

・CSS

6. web・ITスキルがもっと必要な方向けのサービス

現在、 「 俺たち非IT系web担一年生プロジェクト」 では、下記のサービスを行っております。
※サービス名をクリックするとお申込みページへ移ります。

webサイトの基礎知識の習得から、具体的なサンプルサイトを元にした営業・販売用サイトの作成、さらには自分でweb関連の学習ができるようになる方法までを、たったの5時間で習得するワークショッププログラムです。

自分ではwebサイトは作らないけれど、webサイト作成の指示を外注業者に出すことがある人や、webマーケティングをこれから覚えたいという人に向けた、初心者用の必須web基礎知識習得講座です。
こちらは3時間で覚えるプログラムなので、忙しい人でも気軽に参加することができます。
※上記をクリックすると、セミナーマッチングサイト「ストアカ」の専用ページにリンクします

コメント