HTML/CSS入門編3:画像とリンクを載せよう

#01:画像とリンクを載せよう

ログインすると実技課題の採点等ができるようになります

<!-- 画像とリンク-->
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Project Nyaan</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script>https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <style>
        body {
            padding-top: 50px;
            background-color: lightgray;
        }

        .starter-template {
            padding: 40px 15px;
            background-color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="starter-template">
            <h1>吾輩は猫である。</h1>
            <p class="lead">名前はまだない。</p>
            <p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
            </p>
            <a class="btn btn-primary" href="#">OK</a>
        </div>
    </div>
    <!-- /.container -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>hello world</title>
</head>

<body>
    <h1>hello paiza</h1>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>hello world</title>
</head>

<body>
    <h1>hello paiza</h1>
</body>

</html>

★ 実技1
★ 実技2

実技課題「画像を表示する」

右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
この見出し下にイメージタグを追加して、以下のアドレスの画像を表示してください。この時、src属性以外は指定しないでください。

画像のアドレス： (https://paiza-webapp.s3.amazonaws.com/files/learning/img/kirishima.jpg)
※サーバーにアップしたアドレスに置き換えてください。

コードの実行をして、エラーが出なければ、演習課題クリアです！

期待する出力値

実技課題「リンクを表示する」

右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
この見出しにアンカータグを追加して、以下のアドレスにリンクしてください。この時、リンク先を別のウィンドウで開くようにします。

https://paiza.jp/

コードの実行をして、エラーが出なければ、演習課題クリアです！

期待する出力値

ここでは、Webページに画像とリンクを追加します。Bootstrapを使うことで、リンクや画像を便利に表示することができます。

作成したコード

<!-- 画像とリンク-->
<!DOCTYPE html>
<html lang="ja">
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">

    	<title>Project Nyaan</title>
    	<!-- Bootstrap -->
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    	<style>
    		body {
    			padding-top: 50px;
    			background-color: lightgray;
    		}
    		.starter-template {
    			padding: 40px 15px;
    			background-color: white;
    		}
    	</style>
    </head>
    <body>
    	<div class="container">
    		<div class="starter-template">
    			<h1>吾輩は猫である。</h1>
    			<p class="lead">名前はまだない。</p>
    			<a href="https://ja.wikipedia.org/wiki/%E5%A4%8F%E7%9B%AE%E6%BC%B1%E7%9F%B3" target="_blank"><img class="img-responsive center-block" src="https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_1024.jpg"></a>
    			<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
    			</p>
    			<a class="btn btn-primary" href="http://paiza.jp/" target="_blank">OK</a>
    			<a href="https://ja.wikipedia.org/wiki/%E5%A4%8F%E7%9B%AE%E6%BC%B1%E7%9F%B3" target="_blank">夏目漱石</a>
    		</div>
    	</div>
    	<!-- /.container -->

    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </body>
</html>

主なタグの役割

【imgタグ】
<img>タグのsrc属性で指定した画像を表示します。単独で使うタグです。

【アンカータグ】
<a>タグのhref属性で指定したアドレスにリンクを張ります。<a>と</a>の間のテキストや画像が、リンクとして表示されます。

target属性は、リンク先を同じウィンドウで開くか、別ウィンドウで開くかを指定できます。「_blank」とすると別ウィンドウで開くことになります。省略すると、同じウィンドウで表示します。_