元webデザイナーが教える、初めてのhtml

先日、WordPressでアフィリエイトBlogを運営するには、Webの知識(html、css)が必要不可欠だと記事にしました。

WordPress始めるならば、Webの知識は絶対に必要

2017年3月7日

マツカタもWebデザイナーの専門学校で学んだので、学校等で学ぶのが一番の近道な気がしますが、webデザイナーを目指さない方には、大きな出費です。

html、cssについて、マツカタが教えるよりも詳しいサイト、ブログなんかがたくさんありますので、

マツカタは、触りの部分だけを、なるべく簡単簡潔に説明したいと思います。

htmlのコードは半角英数で記述

htmlのコードを記述するのに、絶対のルールが半角英数での入力です。

記事の内容なんかは、普通に全角で書いて構わないのですが、これから説明するhtmlコードは必ず、半角英数で記述して下さい。

マツカタのパソコンの環境がMacなので、Windowsの方には申し訳ないのですが、マツカタの環境に沿って話を進めます。

テキストエディター(メモ帳)でhtmlを編集してみましょう

PCには、標準でテキストエディターのソフトが入ってますよね?

  • Macだと、テキストエディター
  • Windowsだと、メモ帳

それらのソフトでhtmlは編集できます。

その際に、Macのテキストエディターの場合だと、デフォルトでの設定がリッチテキストと言って、文字が装飾できる設定のテキストなので、標準テキストに変更します。

テキストエディターのパソコン画面の一番上のリンゴマークの並びのフォーマットから、標準テキストにするをクリックして選択します。

Windowsのメモ帳を最近触ってなく、メモ帳はシンプルなテキストエディターだった気がしますが、リッチテキスト形式になってるならば、同様に標準テキストの編集モードにして下さい。

標準テキストでの編集モードになってるのを確認できたら、
htmlのコードを入力します。
絶対のルールなので、何度も言いますが、htmlコードは、必ず、半角英数での入力です。

htmlの入力によく使う、キーボードのキーですが、

丸で囲った部分です。

  • shiftキーを押しながら < を押すと、<
  • shiftキーを押しながら > を押すと、>
  • /スラッシュは普通に/キーを押せば入力できます。

<と>(大なり、小なり)の名称がわからなくて、すいません、、

<html>
<body>
こんにちは、初めてのhtmlです。(好きな文字を入力して下さい。)
</body>
</html>

htmlの基本は、<html>の開始タグで始まり、頭に/がついた</html>閉じタグが基本的にワンセットになります。
タグの中に、htmlページの内容を記述します。
記述みてもらえば、わかるんですが、<html></html>タグの中に、<body></body>タグが入ってますよね?
その構造を入れ子と言います。htmlページは、こうした入れ子構造だらけです。

htmlなどのコードを説明しやすいように、コードを表示できるプラグインってのをWordPressに入れました。横の数字はテキストエディターには表示されていないかもしれませんが、気にしないで下さい。

編集できたテキストを、拡張子、.html形式で保存しましょう。
その際の、文字のエンコードはutf-8を選択して下さい。
保存場所は、分かりやすいように、デスクトップにhtmlって名称のフォルダーを作り、その中に保存しましょう。
保存する名前はindex.htmlにしましょう。

webサイトのtopページは、ほぼ、index.htmlとなってます。
utf-8でのエンコードは、今のhtmlでの標準(推奨)だからです。

保存できた、htmlファイルをブラウザーの上にドラッグ&ドロップ。

どうですか、htmlコードは表示されず、入力した文字だけが表示されましたよね?

きちんと表示されない場合は、保存方法や、htmlコードの記述がきちんとしていないのが原因だと思います。

ちなみに、こんな感じで表示されて入れば、正解です。

ここまで、理解できた方は、もうhtmlの触りは理解できてますよ。
後は、同じような事の繰り返しです。

タイトルを入れてみます。

では、先ほどの.htmlファイルをさらに編集し、ブラウザーで表示された際に、タブ等に表示されるタイトルを入れてみましょう。

<html>
<head>
<title>初めてのhtmlです。</title>
</head>
<body>
こんにちは、初めてのhtmlです。(好きな文字を入力して下さい。)
</body>
</html>

ハイライトで表示されて部分を追加してます。
先ほど同じように、拡張子を.htmlで保存。

テキストエディターで上書き保存すると、.txt形式で保存される場合があるので、その場合は、拡張子を.htmlに変更して下さい。

ブラウザーで見てみましょう!

どうですか?タイトルが表示されましたよね?

また、続きは次回以降に

簡単、簡潔にhtmlの事を書くつもりでしたが、思いのほか情報量が多いですね、、
今回は、この辺りまでとしましょう!!

リンクの貼り方や、画像の表示くらいまでは、知りたいですよね?

また、順を追って説明しますね。

全然、テキストエディターでも編集できるのですが、htmlのエディターあれば、編集が楽で、便利です。
無料でダウンロードできますので、htmlの編集に使うのをお勧めします。

htmlエディターについては、

MATSUKATA
ggって下さい。自分が使いやすいと思ったものを使えば良いです。

htmlに興味が湧いた方は、htmlの辞書を一冊持ってると良いですよ。
色々なhtmlタグが掲載されているので、今回の流れを理解できたならば、辞書で自己流でhtmlを編集していけます。

元webデザイナーが教える、初めてのhtmlー2時間目ー

2017年3月8日

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でマツカタをフォローしよう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

matsukata

厄年を終え43歳になりました。 スノーボード歴20年以上、アウトドア、D.I.Y、料理、酒、バイク、、、趣味多数、、 大阪出身。恋愛、結婚を機に上京。東京での生活も10年そこそこの時の本厄の年、 ボーダー嫁のゲス不倫が原因での離婚。最愛の息子と離れての生活を余儀なくされる、、 そんなこんなで、これからの人生の春を信じて奮闘中!!