サクラエディタで新規ファイルを作成
ファイル→新規作成
またはショートカット(CTRL+N)
ファイルを新規作成したら最初に保存する
ファイル→
名前を付けて保存(CTRL+Shift+Sでもいい)
(フロッピーディスクアイコンのクリックでもいい)
デスクトップ上に新しくフォルダを作ってそこに入れていく
名前を付けて保存
→デスクトップ
→新しいフォルダアイコンクリック
→名前は「20191023」
→そこに保存
「index.html」
しっかり拡張子までかく
→保存ボタンをクリック
1行目に入力
<!DOCTYPE html>
ドキュメントタイプの設定
HTMLのバージョンを指定している
小文字で書いても別に構わないが普通大文字で書くらしい
2行目からhtmlのタグを書いていく
<html>タグで全体を囲う
<html>
</html>
↓
<html>に付け足す。
<html lang="ja">
日本語のサイトですよという宣言
htmlの後は半角あける
タグ名(要素名):html
属性:lang
langというのが「属性」になる
属性の後に、イコールでつなげてダブルコーテーションで入っているのが「値」
(ここでいうja)
<要素名(半角スペース)属性="値">
これが基本の記述の形
属性の前には半角スペースが入り、値は""で囲む
<head>タグ
開始と終了が存在する
<head>
</head>
<body>タグ
同上
通常小文字で書く
<meta charset="UTF-8">
UTFは大文字でも小文字でもどっちでもいい
大文字で書かれることもよくある
<title>ページタイトル</title>
タイトルタグ
基本的にタイトルタグは表示されない
ブラウザで見たときにタグ部分に表示される
また、検索結果ではページタイトルが表示される
head内には、最低限このmetaタグとtitleタグを入れる
index.htmlというのは特別なファイル
一番最初に開かれる
たとえば〇〇ドットコムとかいうページを開くとき、
なんの指定もなかったらindex.htmlが勝手に開く
ではこのindex.htmlを、自己紹介のページにしていきましょう
<title>だれそれの自己紹介</title>
<body>
だれそれ
趣味
趣味1
趣味2
</body>
ブラウザで見ると横に並んじゃってる
HTMLにとっては改行は改行じゃない
ソースコードで改行しても、
ブラウザ上では改行されない(半角スペースになる
なので、見出しのマークアップをしましょう
<body>
<h1>だれそれ</h1>
<h2>趣味</h2>
趣味1
趣味2
</body>
箇条書きにしたいときは、
1.<ul>タグで囲う
2.こいつは項目ですよということで、項目別に<li>で囲う
<body>
<h1>だれそれ</h1>
<h2>趣味</h2>
<ul>
<li>趣味1</li>
<li>趣味2</li>
</ul>
</body>
<ul>タグの中には、必ず子要素の
<li>タグが入るというのがお約束になっている
ul(Unordered List)
番号がないリスト。箇条書きリスト
li(list item)
↑
↓
ol(Ordered List)というのもあって、これは番号があるリスト
じゃ箇条書きの中(<ul>のなか)に
<h2>とかを入れてもいいのか?
→だめです。
<ul>の子供は<li>だけというルールがある
ブラウザで一応表示はされるけどよくない
そういうルールを破ると点数が下がる
グーグルで検索結果を出す順番は、お金を出して広告だとかいろいろあるけど、
「減点方式」であり、htmlのルールが守られていないと検索結果順が下がる