さて今日は、HTML＆CSSというテーマです。

HTML＆CSS
HTML stands for HyperText Markup Language. Hypertext means "text with links in it." Any time you click on a word that brings you to a new webpage, you've clicked on hypertext!

A markup language is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more. HTML is the markup language we'll be learning.

What makes webpages pretty? That's CSS—Cascading Style Sheets. Think of it like skin and makeup that covers the bones of HTML. We'll learn HTML first, then worry about CSS in later courses.

The first thing we should do is set up the skeleton of the page.

a. Always put  <!DOCTYPE html>on the first line. This tells the browser what language it's reading (in this case, HTML).
b. Always put  <html> on the next line. This starts the HTML document.
c. Always put  </html> on the last line. This ends the HTML document.

Instraction
Go ahead and put the three lines mentioned above into test.html, which is now blank.

In between the second and last line (between the  <html> and the  </html>), feel free to write whatever message you like
Hint
In HTML, the order you put things in matters! But formatting (i.e. empty space) doesn't matter from a technical point of view.

You will notice there's a pattern in how we indent each line of HTML, though. This is to aid readability and help us catch mistakes. We'll talk more about indentation later!


HTML＆CSS
 HTMLとはHyperText Markup Languageの略です。
HyperTextとは、複数の文章を結びつける、という意味です。
ワードをクリックすることで、新しいページに飛びますね。
これは、HyperTextをクリックした！ということになります。

マークアップランゲージとは、かつてはwebページに置かれるもというよりも、テキストを動かすものです。テキストを画像やリンクやテーブル、リストなどに変換します。
HTMLは私たちがこれから学ぶマークアップランゲージです。

Webページはどうしたらかわいくなるのか？それはCascading Style Sheetで略されるCSSを使います。HTMLという骨を覆う、皮膚や化粧のようなものです。HTMLを学んだ後にCSSを学びましょう！

私たちがまずすべきことは、Webページの骨組みを作ることです。

a. 1行目には必ず<!DOCTYPE html>を書きます。これはブラウザにどのような言語を読み込ませているか教えてあげています。（今回はhtml）
b.　次には必ず<html>を書きます。これでhtmlの文章を始めます。
c.　最後には必ず</html>を書きます。これでhtmlの文章を終えます。


課題

空白のtest.htmlの中に、上記の3行を書いてみましょう。
2行目と3行目の間(<html>と</html>の間)に、好きなメッセージを書いてみましょう。

ヒント

 HTMLには語順の規則がありますが、見た目(例えばスペースなど)は、技術的な面からは気にしなくていいです。

ですが、今後あなたはとあるインデント(改行したあとの文字の前のスペース)の規則に気がつきます。これは見た目やミスに気付きやすくするためです。あとで、これについて述べますね！

---------------------------------------------------------------

で、私はこんな感じにしてみました！


samplecode

<!DOCTYPE html>
    <html>
        わっしょいわっしょい！
    </html>


ちなみにインデント(例えば<html>で改行したあとのわっしょいの前のスペース)は、キーボードのスペースじゃなくて、tabキーでつけるのが一般的です。


では今日はここまで！

※1度書いたものをうっかり消してしまったので訳が甘いです・・・ごめんなさい・・・