LoginSignup
0
0
@natsu72(natsu 72)

文系大人初心者プログラミングするよ🔰【HTML】

Posted at

いよいよコードを書いていきます！
まずはHTMLとCSSの学習からスタート。名前くらいは聞いたことある！
昔、自分でHPを作れるクラスメイトいましたよね:writing_hand:？？
これは大体のスクールでも、最初に習うんじゃないでしょうか？？

★HTML（HyperText Markup Language）
：webサイトに表示される情報を記載する言語

★CSS（Cascading Style Sheets）
：HTMLに装飾を加える言語

VScordで拡張子.htmlファイルを作成・記述したら
ファイルをドラッグしてブラウザのタグに持っていくと
webページが出来てるのがすぐ見れちゃいます！
これびっくりした、、:open_mouth:！

.html
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">　　※文字コード指定
    <title>ブラウザタグのタイトル</title>
  </head>
  <body>
    <h1>
      見出し
    </h1>
    <p>
      1つ目の段落
    </p>
    <p>
      2つ目の段落<b>この部分は太字</b>
    </p>
    <!-- これはコメントアウトされる -->
    <a href="https://www.google.com/">クリックするとGoogleへ移動</a>
  </body>
</html>

いっぱいあるので基本を抜粋
HTML：
・開始タグ< >と終了タグ >に囲まれたものがHTMLにおける要素
・要素に情報を付け加える属性と属性値がある
ex.
meta=要素　charset=属性　UTF=8=属性値
・head要素とbody要素がある
・DOCTYPE要素：ドキュメントタイプの略　文章がHTML文章であることを宣言する
・html要素：HTML文章の始まりと終わりを示す
・metaメタ要素：HTML文章に関する情報を指定（charset=はmeta要素の属性）
・br要素：Line Breakの略　テキストを改行する　終了タグ不要
・b要素：Boldの略　文字でを太くする　...で囲まれている部分だけ太字
・a要素：Anchorの略で...で囲ったテキストをリンクにする
　href属性：Hyper Referenceの略　リンクの移動先を指定

◎VSCodeのコード差分
見本のコードコピー→自分のコードがあるファイルを開く→でコマンドパレットを開く
→compare（比較）と入力→Compare Active File With Clipboardを選択

HTMLだけでもめっちゃあるから
いいなと思ったものはコピペして保存しとくか、
その道を極めてるサイトから随時コピペが良さそう:writing_hand:

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0