はじめてのHTML

Webデザインの勉強

f:id:web-css-design:20160810002210p:plain

テキストエディター

brackets.io

確認用のブラウザー

www.google.co.jp

拡張子の表示
  • テキスト P.008

f:id:web-css-design:20160810003437p:plain

HTMLに触れてみる

  • テキスト P.009
1. 新規HTMLファイルを作成します
  • Bracketsで新規ファイルを作成し、「index.html」というファイル名で所定のフォルダーに保存します
2. 最低限必要なHTMLの骨組みを書きます
  • HTMLは、「タグ」というしるしを使って書いていきます
  • 「タグ」は、原則として「開始タグ」と「終了タグ」がセットになっています
  • 終了タグには、「/ スラッシュ」がつきます
3. HTML文章にタイトルをつけます
<html>
<head>
<title>HTMLの練習</title>
</head>
<body>
</body>
</html>
4. ブラウザーでタイトルを表示します
  • テキスト P.010
  • 「title」タグの内容が反映されます

f:id:web-css-design:20160810004908p:plain

5. コンテンツを記述します
<html>
<head>
<title>HTMLの練習</title>
</head>
<body>
はじめてのHTML
今日はじめてHTMLを書きました。
</body>
</html>
6. ブラウザーでコンテンツ表示を確認します

f:id:web-css-design:20160810123636p:plain

7. コンテンツをHTMLタグで意味付けします
<html>
<head>
<title>HTMLの練習</title>
</head>
<body>
<h1>はじめてのHTML</h1>
<p>今日はじめてHTMLを書きました。</p>
</body>
</html>
8. 完成したHTML文書をブラウザーで確認します
  • このときのプレビューは、ブラウザーが持っているCSSをHTMLタグの意味付けに適応させて、文字の大きさを決められた大きさに表示しています

f:id:web-css-design:20160810124706p:plain