備忘録:HTML(初級編)

HTML(初級編)

HTMLをコーディングしていくうえで必要なことの備忘録です。

通常忘れることはないと思うのですが、

最近忘れっぽいような気がするので、備忘録としてまとめておきます。

HTMLは、ドットインストールなどのプログラミング学習のサイトで、

学習させていただきました。

ドットインストールは、すごく丁寧なサイトで、動画でとても分かりやすいです。

備忘録として

  • ATOMのコード保存 →ctl+S
  • ATOMのコード移動 →選択し、ctl+上下
  • ATOMのコードコピー貼り付け →行を選択し、ctl+shift+D
  • ATOMのコードコメントショートカット →行を選択し、ctl+/
  • ブラウザ更新→ctl+R
  • マークアップ<h1>・・・</h1>、<p>・・・</p>
  • 同じフォルダの中にあるimgフォルダの内の画像を表示

<img src=”img/jiro.png” width=”140″ height=”140″ alt=”次郎アイコン”>

  • <!DOCTYPE html> 一番はじめに
    <html lang=”ja”>・・・</html> 日本語でということ
  • <head>
    <meta charset=”utf-8″> 文字コードはこれで決まり!
    <title>次郎のポートフォリオ</title>
    <link rel=”icon” href=”favicon.ico”>
    <meta name=”description” content=”次郎の紹介です”>
    </head>
  • <!– コメント –>
  • bodyの中を<header> </header> <section></section><footer></footer>に大きく分ける
  • 箇条書き<ul> <li> </li> </ul>
  • 連番<ol> <li> </li> </ol>
  • リンク設定  <a href=”http://kamisiru.com”> 〇〇〇 </a>
  • リンク先を別タブで開きたい場合 <a href=”http://kamisiru.com” target=”_blank”> 〇〇〇 </a>
  • メールを開きたい場合<a href=”mailto:kamisirukamisiru@gmail.com” target=”_blank”>
  • <head>の中に
    • <style>
      h1{
      color:red;
      }
      </style> でデザインを変更できるが、CSSファイルを使用する
  • htmlの中にjavascriptを入れる場合、<div><script> 〇〇〇</script></div>とする。divで囲む。注意点として、〇〇〇の中は、空の行は無くさなければならない。