HTML 超基礎 -HTML 編 - 3 分動画でマスターするプログラミング学習

HTML 超基礎 -HTML 編 -
2015 年 6 月 PMC
★コーディング環境を揃える for Mac
・ブラウザ (safari、chrome など )
・テキストエディタ ※文字コードを指定できるもの。(Atom、mi など )
★コードを書く！！
●3 分動画でマスターするプログラミング学習サイト「ドットインストール」
http://dotinstall.com/
【HTML 入門】#01,#03,#04,#05,#14,#15,#16
#01 補足
PMC で主に仕様する HTML のバージョンとその違いについて…
■HTML5
・ブラウザで、HTML5 に対応していないものが存在する
・タグの追加・廃止により構造のマークがより詳細になった。
・動きのある表現が HTML だけで実現しやすくなった。
・他の言語やファイルの埋め込みに対しても柔軟に対応できる。
■XHTML 1.0
・対応しているブラウザが多い
・記述方法に比較的決まりごとが多い
・3 つの DTD（文書型定義）を規定している→主に仕様するのは Traditional…デザイン用の非推奨のタグまで使用できる
（Strict…基本的なマークアップタグしか使用できない / Frameset…Traditional に加えてフレームタグが使用できる）
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title> 無題ドキュメント </title>
</head>
<body>
</body>
</html>
■HTML5 記述方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> 無題ドキュメント </title>
</head>
<body>
</body>
</html>
■XHTML 1.0traditional 記述方法
#03 補足
終了タグについて…
終了タグが必要ないタグは予め決まっています。http://vllv.us/Junk/htmlTag/
使用できるタグについて…
HTML5 と XHTML 1.0 では使用できるタグが異なります。詳しくは以下のサイトを参考に各自勉強してください。
■XHTML 1.0 で使えるタグ一覧
http://www.htmq.com/html/
■HTML5 で使えるタグ一覧
http://www.htmq.com/html5/index.shtml
HTML 超基礎 -HTML 編 -
2015 年 6 月 PMC
#04 補足
動画は Atom というテキストエディタを使用してますが、OS のバージョンが足りない場合は mi 等の
他のエディターを使用してください。
③
【mi の場合】
以下から DL＆インストールできます。
http://www.mimikaki.net/
①mi を開く
②上部メニューバーからドキュメント→モード→HTML
③テキストエンコーディング「UTF-8」を選択。
※HTML では基本的に改行コードは無視します。
④コードを書く
⑤半角英数で名前をつけて、.html 拡張子で保存。
⑥保存した html をブラウザで開いて見え方確認。
#05 補足
使用中のプログラムフォントについて…
動画では Ricty Diminished というプログラムフォントを使用していますが Monaco とかもオススメです。
文字コードについて…
<meta charset="●●●"> で宣言した文字コードで保存しなければ文字化けします。そのため、コーディングで使用するテキストエディタは
文字コードを変更して保存できるものが望ましいとされています。
WEB で使用する文字コードは主に、 shift-JIS , UTF-8 , EUC-JP , iso-2022-jp で、場合によって使い分けます。
詳しくは各自勉強してください。
#06∼13 補足
時間のある時に見ておいてください。<body> タグの中に書いていきます。
#14 補足
<a> タグについて…
①<a> タグの中に <a> タグを入れ子にすることはできません。
×→<a href= hoge.html > もっと見る（<a href= hogehoge.html > 違うページ </a>）</a>
②<a> タグで 2 つのリンク先に飛ばすことはできません。
×→<a href= hoge.html,hogehoge.html > もっと見る </a>
③<a> タグでメーラーを立ち上げることができます。（閲覧ユーザーのデバイスにメーラーが設定されている必要があります。）
○→<a href= mailto:[email protected] > お問い合わせ </a>
④③で立ち上げたメーラでタイトルや本文を指定することができます。( ただし文字化けに注意 )
○→<a href= mailto:[email protected]?subject= 問い合わせ &body= ご記入ください > お問い合わせ </a>
⑤<a> タグで電話発信用のリンクを指定できます。（スマホサイト等に使用）
○→<a href= tel:0600000000 > 電話をかける </a>
#15 補足
<img> タグについて…
<ｐ> タグの中で使用しなければならないという事はありません。
レスポンシブコーディングの場合は width,height 属性を指定しない場合もあります。
HTML 超基礎 -HTML 編 #16 補足
<table> タグについて…
①<thead><tbody> タグはだいたいの場合、省略します。
省略すると、以下のような記述になります。
<table>
<tr>
<th>Size</th><th>Price</th>
</tr>
<tr>
<td>S</td><td>150</td>
</tr>
<tr>
<td>M</td><td>180</td>
</tr>
<tr>
<td>L</td><td>210</td>
</tr>
</table>
②セルが空の時は <td></td> や <th></th> とします。
【練習】
下記のページを table タグを用いて作成し、201606 半角英名前 .html で保存して、
http://www.pmc-cr.jp/webdesign/ の新規投稿から投稿してください。（カテゴリ→課題）
「メディアを追加」で HTML ファイルをアップロードできます。
※作成にあたってのソフトの指定はありません。Atom でも DW でもなんでも可。
※HTML5 で記述してください。
※文字コードは utf-8 で記述してください。
※表中、TOP ページの文字に https://www.google.co.jp/ へのリンクをつけてください。
その際に target= _blank を指定してください。
※<title></title> には制作管理表と入れて下さい。meta は charset="UTF-8" のみで結構です。
※完成しなくても、どこで躓いたのかを教えてください。
※CSS は使用していません。
2015 年 6 月 PMC

Download Report