演習課題

listを使う

番号なしリスト ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>ul</title> </head> <body> <h1>大見出し</h1> <p>本文本文本文本文本文本文本文</p> <p><a href="http://google.com" target"_blank"><img src="glass.jpg" width="400" height="250" alt="眼鏡"></a></p> <h2>新商品の特徴</h2> <ul> <li>PC操作時に最適</li> <li>…</li></ul></body></html>

まとめ

ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>これからWeb制作をするために勉強しなければいけないこと</title> </head> <body> <h1>これからWeb制作をするために勉強しなければいけないこと</h1> <p>勉強を始めるにはWeb制作の現場で使われる専門用語を理解する必要があります。どの言葉ひとつとっても初心者に</p></body></html>…

linkの使い方

別ページでリンクを開く テキストリンクと画像リンク テキストリンクのサンプル Googleの検索はこちらから 画像リンクのサンプル ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>link</title> </head> <body> <h1>大見出し</h1> <p>本文本文本文本文本文本文本文</p> <p>Googleの検索は<a href="http://google.com" target="_blank">こちら</a>から</p> <p></p></body></html>

画像を表示する

ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>画像の表示</title> </head> <body> <h1>大見出し</h1> <p>本文本文本文本文本文本文</p> <p><img src="glass.jpg" width="400" height="250" alt="眼鏡"> </p> </body> </html> ブラウザで表示

基本構造

HTMLの骨組み ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <p>本文(ほんもん)</p> </body> </html> Firefox,Chrome のブラウザで表示する

head内の記述

ソースコード <html lang="ja"> <head> <meta charset="UTF-8> <meta name="description" content="演習課題 <title>head内の記述</title> <link rel="stylesheet" href="favicon.icon"> </meta></head></html>

body内の記述

ソースコード <html lang="ja"> <head> <meta charset="UTF-8"> <title>body内の記述</title> </head> <body> <h1>大見出し</h1> <p>本文本文本文本文本文本文本文本文</p> <p>改行ありの本文本文<br>本文本文本文本文</p> </body> </html> ブラウザで表示