サクラエディタで新規ファイルを作成:
ファイル→新規作成
またはショートカット(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">
を4行目に追加
(UTFは大文字でも小文字でもどっちでもいい。大文字で書かれることもよくある。)
<title>ページタイトル</title>
タイトルタグを5行目に追加
基本的にタイトルタグは表示されない。
ブラウザで見たときにタグ部分に表示される。
また、検索結果ではページタイトルが表示される。
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のルールが守られていないと検索結果順が下がる。