Ataeru design

与えるブログTips第4回〜リンクをHTMLのコードで書けるようになる

 

こんばんは。

webコーチの木野あさみです。

あなたの与える力を引き出す、をコンセプトに配信する”与えるブログ Tips”。

webをどう使ったらいいかわからない、PCがニガテ;;という起業女子へ。

webのわからなさを1からわかりやすく、お伝えします。

 

 

 

第4回目のテーマはリンクの貼り方、HTML編です。

ここまで、

与えるブログTips第2回〜自分の投稿に誰かのブログ記事をリンクさせたい時。アメブロver.

では、アメブロを例にエディタでのリンクの貼り方を。

与えるブログTips第3回〜親切なリンクの貼り方とは?

では、読者目線でのリンクの重要性。

かゆいところに手が届く、親切なリンクの貼り方を具体的にご紹介いたしました。

リンクの話が続きますが、

今回は覚えておいて損はない、

HTMLの書き方です。

 

HTMLとは?

HTMLとは、マークアップ言語と呼ばれるものです。

マークアップとは、コンピュータに指示するために行うものです。

今回はHTMLに関してはざっくりとした説明に留めさせていただきますが、

このTipsでもだんだんと深めていきますので

このTipsを読み終わる頃には

PC苦手、コードと聞くだけで無理そう( ;  ; )

といった方にも!

必要なものだけでも

使いこなせるようになっていただけたらと思います^^

 

 

HTMLとは、

こんな感じのコードになります。

htmlkonnitiwa

よく、ブログでも余白を増やす目的で段落をつけたりしますよね。
このpというタグは、段落という意味があります。

このリンクバージョンをお伝えします。

HTMLでのリンクの貼り方を覚えよう

 

エディタを使ったリンクの貼り方も、

エディタというツールを通して

自動でHTMLを記述しているといったことが行われています。

例えば、アメブロのエディタにしても

通常表示、というタブの隣に

HTML表示、というタブが存在し

対応していることがわかります。

ameblo-html00

ameblo-html

 

WordPressのエディタであれば、

ビジュアル、が見た目の表示スタイル。

テキスト、という部分がHTMLやCSSなどの言語表記になります。

 

HTMLやCSSを使って、

文字の色やサイズ、リンクや引用などを表現していくことができます。

 

今回はその中でもリンクに焦点を絞ってご紹介。

これを覚えれば

エディタの使い方がわからなかったり、

エディタの調子が悪かったりしても、

ダイレクトでコードを記述して、表示させることができます♪

 

 

リンクのコードはこちらです

html-link01

リンクはアルファベットのaで表現されます。

aは、anchor(アンカー・船の錨)のaが由来で

紐付けを意味しています。

href はhyper referenceの略と言われていますが、

要するにこの文字列は

コンピュータにこちらの意図を伝え、

理解させる為の決まり文句ということです。

この決まり文句を、タグ、とも言います。

HTMLのタグは半角の<>という記号で挟まれています。

リンクタグのポイントは、

a href=”ここにURLを記入”

とあるこの部分に、リンクさせたいURLを必ず入れること。

html-link01

ここに文章を記入、という部分に

リンクを聞かせたい文字列を入れること。

です。

 

そして、タグを打つ場合には、最後に必ず

tojitag

という、aの前にスラッシュを追加した 閉じタグ

というものを忘れないようにしてください。

この閉じタグがないと、

コンピュータはどこまでがこの命令の範囲なのか判断できなくて

結果、この命令を実行することができません。

 

a で始まった時には、

/a で終わるようにしてください。

 

 

まとめ

いかがでしたか?

リンクの裏で、

このような言語がせっせと紡がれていたことがご理解いただければ…

あとは見慣れて来れば、

どこにURLを入れて、

どこに文字を入れればいいかは段々と掴めてくるのではないかと思いますm(_ _)m

まずはエディタで打ったものを、

HTML表記にして、じっくり見学してみてください♪

そして、HTMLに興味が湧いてきた方は

ぜひ調べてみると他にも色々なタグがあってとても面白いですよ(^^)

ちなみに、リンクのアイコンは大体こんな形をしていることが多いです!

きっとアンカーの鎖がモチーフですね。

(元船乗りの血がさわぎます笑)

 

linkicon

2016年10月7日 8:55 PM  カテゴリー: Give/あたえる, ブログ, 与えるブログTips

Now Loading