BLOG

 

IT初心者の成長日記 4日目-HTMLでリンクや画像を貼り付ける

09 2月 2017, Posted by HIDE in GITA, インターンシップ, ウェブの基礎知識, プログラミング

インターンも3日目となりました、HIDEです。

今日はHTMLでどのように画像やリンクを貼り付けていくのかやってみたいと思います。

このように、HTML文書を作成します。(sublime text3というアプリケーション )

昨日はnotepadで作成していましたが、

こちらの方が文書を作成していく上で何かと便利なので今後はsublimeを使用します。

さて、画像のように文書を入力すると出来上がるのがこちら。

HTML文書を見れば分かるのですが、FacebookやInstagram、お問い合わせについてはリンクが貼ってあります。

つまり、これらの文字をクリックすればわたしのFacebookやInstagramにアクセスでき、

なんとメールまでできてしまう!!(URL・メールアドレスは黒く塗りつぶしています。)

1.<header>タグの中にFacebok、Instagram、お問い合わせ等の文字を打ち込みます。

2.それらの前に飛ばしたいリンクのURLやメールアドレスを打ち込みます。

例)<a href=”http://www…..”>Facebook</a>

このコードを入力するとFacebookの文字をクリックすると指定したリンク先に飛びます。

ここまでだとFacebookの文字の下にアンダーバーが出てしまうので、さらに一歩踏み込むと・・・

3.styleタグを打ち込みます。

例)<a href=”http://www…..” style=”text-decoration: none”>Facebook</a>

上記のようにすると、アンダーバーが消えます。

文字の色を変更したい場合は・・・

4.fontタグを打ち込みます。

例)<font color=”blue”><a href=”http://www…..” style=”text-decoration: none”>Facebook</a></font>

このようにすればFacebookの文字が指定した色に変わります。(ここでは青色)

 

今日のプログラミングの授業は必要なアプリケーションのインストール、

それらについての説明の時間がほとんどだったため技術的なことは習うことができませんでした。

そのため、ネットで調べながらHTML文書を自分なりに作成してみました。

デザイン等、見た目に関することは今後習うであろうCSSで作成できるらしいです。

 

今後はひとつ、習ったことや自分で勉強してことについて

ブログを更新しながらwebサイトを作り上げていけたらと思っています。

また明日、お会いしましょう。

HIDE

Post a comment