Html part1

Webプログラム
HTML Part1 基本編
就労移行支援事業所 Job庵

目次
・ HTMLとは？
・タグとは？
・タグの種類
・ head要素 body要素とは？
・階層とは？
・試しに作ってみましょう

HTMLとは？
HTMLとはWebサイトを作るために使う言語です。
Word、Excelが紙に文字、画像を配置するように
HTMLはWebに文字、画像を配置するために
使われます。
HTMLはタグというものを使って作っていきます。

タグとは？
タグは＜＞を使います。
例：文字を書きたいとき
<p>ここに文字を書きます。</p>
<p>から始まり、終わりに</p>を書きます。
この間に入れたい文字を書いていきます。
paragraph: 段落

タグの種類
<head> </head>
他にも数え切れないほどあります！
<body> </body>
<title> </title>
<h1> </h1>
<h2> </h2>
<p> </p>
<img>
サイトの基本的な情報を書く
本文、サイトのメイン部分
タイトル名
大見出し
中見出し
ひとつのまとまった文章、段落
画像

head要素 body要素とは？
<head> </head>
オプション設定みたいなもの
画面には表示されない
文字コード指定や他ファイルの読み込み等に使う
<body> </body>
画面に表示される
サイトの内容は全てこちらに記載する

階層とは？まずはタグの説明
<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="utf-8" />
　　　　<title>Job庵</title>
　　</head>
　　<body>
　　　　<p>Job庵プログラムです</p>
　　</body>
</html>
←HTMLのバージョンを指定
←HTML書きますよ！
←基本設定を書きますよ！
←文字を日本語に対応させますよ！
←タイトルを書きますよ！
←基本設定はここまでですよ！
←ここからが本文ですよ！
←文字(段落)を書きますよ！
←本文はここまでですよ！
←HTMLはここまでですよ！

階層とは？
<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="utf-8" />
　　　　<title>Job庵</title>
　　</head>
　　<body>
　　　　<p>Job庵プログラムです</p>
　　</body>
</html>
この2つは
<head></head>の中に
あるので<head>が
親になります。

試しに作ってみよう
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Job庵</title>
</head>
<body>
<p>Job庵プログラムです</p>
</body>
</html>
まずは
これを書こう！
<body></body>
の間に記述していきます

見出し
<h1></h1>
<h2></h2>
<h3></h3>
<body>
<h1>大見出し</h1>
<p>大見出しはタイトルに
使うことが多いです。</p>
<h2>中見出し</h2>
　　<p>多くの見出しは
この見出し</p>
<h3>小見出し</h3>
<p>中見出しの中の見出しに
使います</p>
</body>

リスト(箇条書き)
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<body>
・
　　・
<h2>今夜の晩御飯</h2>
<ul>
<li>ハンバーグ</li>
<li>ごはん</li>
<li>味噌汁</li>
</ul>
</body>

画像
<img src=”ファイルの場所”
alt="画像の名前" />
<body>
・
　　・
<h2>画像</h2>
<p><img src=”ファイルの場所”
alt="画像の名前" /></p>
</body>

リンク
<a href=”リンク先”></a>
<body>
・
　　・
<p><a href=“https://www.google.co.jp/”>Google</a></p>
<p><a href=“http://www.yahoo.co.jp/” target=“_blank”>
Yahoo</a></p>
</body>

Html part1

More Related Content

Similar to Html part1 (20)

Html part1