HTMLの基礎〜リンクと画像~HTML入門~HTML TUTORIAL~

リンク

リンクとは、みなさんがよく見ている：続きはこちらから：のようなハイパーリンクのことです。これを使うことによって次のページへ誘導したり、ホームページ（そのホームページの最初の画面:index画面とも言います）に戻したりなどができるようになります。

例えば何かしらのホームページにやってきてホームへ戻ることができなければ非常にやっかいでよね。お客様のへの拝領に繋がるわけです。

ちなみにつくりかたは以下になります。

<!DOCTYPE html>

<html>

<head>
    <title>My first web page</title>
</head>

<body>

    <h1>My first web page</h1>

    <h2>What this is</h2>
    <p>A simple page put together using HTML</p>


    <h2>Where would you like to go</h2>
    <p><a href="http://www.google.com">google</a></p>

</body>

</html>

この部分　 <a href="http://www.google.com">google</a>が今回の作成場所です。は文字列（つまりはハイパーリンクでgoogleですという部分）を表し<a href="http://www.google.com> がリンク先を表します

さあ皆さんも上のコードを実際に打って見ましょう。言い忘れてましたが実際にコードを手で打つことが非常に重要です。手で打たない限り上達はありません。例えばシンタックスエラー（記載ミス）なども自分で気づく能力をここで身につけるわけですので、必ず手で打ちましょう

つまりはこんな感じになると思います

課題
ではヤフーに飛ばして、文字は：ここからヤフーです：と打つためにはどうすれば良いでしょうか。考えて見てください　ヒントは<a href="http://www.google.com">google</a>です。

答えは　<a href="http://www.yahoo.com">ここからヤフーです</a>

ですね。簡単でしたかね。では次に項目へ。

画像

では次の項目です。画像がない場合、非常に退屈ですよね。ウェブサイトを見ていてもこの場合は画像をどこからか引っ張ってくる必要があります。ちょっと難しいんですが例えば個人でサーバーを契約して、そこからFTPソフトでアップロードして、そこのURを取得して、表示させる。

なんてことをウェブサイトを作る場合は行っています。ちなみにこんな感じで打ちます

imgsrc=”http://peace3110.oops.jp/wpcontent/uploads/2017/07/1249f2682be7181f6a6266c99ee5cae6.png”までがそのデータがある場所になります。真面目に僕のCCNAコンテンツを見た方ならなんとなくわかるかと思います。笑

でalt=”” width=”1601″ height=”172″ /が画像の大きさです。では上記をコピペしてメモ帳からコマンドを打ってください。なんか画像出ましたか？

こんな感じで出ましたか？これが出たら成功です。

では次にまいりましょう！！

前のページHTMLの基礎〜見出しとリスト

次のページHTMLの基礎〜テーブルとフォーム

プログラミングは独学からは挫折の可能性が高いです。まずは無料体験ができる
コードキャンプが本当におすすめ。無料体験でわからないところを聞きましょう。
転職補助つき。カリキュラム終了後に転職紹介をしてくれます。

HTMLの基礎〜リンクと画像~HTML入門~HTML TUTORIAL~

スポンサーリンク

リンク

画像

スポンサーリンク