+13-1_Why learn HTML？.txt
(Why) -(（we）)- +(learn)+ @(HTML)@?
/ どうしてHTMLを覚えるのか？
-(Every webpage you look at)- +(is written)+ (in a language called
HTML).
/ Webページはどのページであれ、HTML言語 を使って書かれています。
-(You)- +(can think of)+ @(HTML)@ =(as the skeleton that gives
every webpage structure)=.
/ HTML とは、Webページにおける 骨格/骨組み だと考えてください。
#そして、CSS を使って、肉付けをする/調整する わけです。
(In this course), -(we)-+('ll use)+ @(HTML)@ (to add paragraphs,
headings, images and links to a webpage).
/ このコースでは、HTML を使って、段落(paragraph)、⾒出し(heading)、画像
(image)、リンク(link) を、Webページ に、付け加えてみましょう。
(In the editor to the right), (there) +('s)+ -(a tab called test.html)-.
/ この文章の右側には、「test.html」という「タブ(tab)」が、あります。
#上部、やや左側
-(This)- +(is)+ =(the file we'll type our HTML into)=.
/ これは、これから私たちが、HTMLを書いていくためのテキストエディタにあたります。
+(See)+ @(the code with the <>s)@? -(That)-+('s)+ =(HTML)=!
/ <なになに> が、いくつか出てくるコードが⾒えますね。 そうこれが、HTML言語 な
のです。
=========================================
<!DOCTYPE html>
<strong>Feel free to change this text.</strong>
=========================================
(Like any language), -(it)- +(has)+ @(its own special syntax)@
（rules for communicating）.
/ どんな言語にも、コンピュータと「会話」するための、構文ルール(syntax) があります。
/ もちろん、HTML言語にも。
(When we press Save & Submit Code), -(the results tab)- +(will
act)+ (like an Internet browser).（e.g. Chrome, Firefox, Internet
Explorer）
1/5 ページ
+13-1_Why learn HTML？.txt
/ [Save & Submit Code]ボタン が、「下部・やや左」 に、ありますが、このボタンを
押すと、右上の小さいウィンドウ(the results tab) が、本物のブラウザのようにアク
ションします。（ブラウザの例: Chrome(グーグルクロム)、Firefox(ファイヤーフォッ
クス)、Internet Explorer(インターネット エクスプローラー)、Opera(オペラ)）
-(A browser's job)- +(is)+ =(to transform the code in test.html into a
recognizable webpage)=!
/ ブラウザの仕事、つまり、コンピュータではなく、
/
⼈にやさしい⾒栄えに変換すること
/ この仕事を、右上にある、小さなウィンドウが、実現します。
-(It)- +(knows)+ @(how to lay out the page by following the HTML
syntax)@.
/ ブラウザ君は、HTML言語に従って、きっちり、文書などを、配置してくれます。
Instructions
/ : あなたへのミッション
1. (To the right), -(we)- +(have)+ @(a test.html file)@.
/ ①今、右のエディタで、test.htmlファイル を編集しています。
2. +(Change)+ @(the text on line 2, the bit between <strong> and
</strong>)@, (to anything you like)!
/ ②test.htmlファイル内の2⾏⽬の、
/
<strong>から</strong>の間の
/
「Feel free to change this text.」の部分を、
/
何でもあなたの好きなことに、書き換えてください。
=========================================
<!DOCTYPE html>
<strong>Feel free to change this text.</strong>
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
Feel free to change this text.
/ 自由にこの文章を書き換えてください。
=========================================
3. +(Hit)+ @([Save & Submit Code])@, and -(you)-+('ll see)+ @(
=~how~= -~the test.html file~- +~would look~+ ((in a browser)) )@.
/ [Save & Submit Code]ボタンをクリックしてください。
/ そうすれば、このtest.htmlファイル が、
/ ブラウザでは、どんなふう⾒えるかが分かります。
2/5 ページ
+13-1_Why learn HTML？.txt
+(Did)+ -(you)- +(see)+ @(that)@?
/ ⾒えましたか？
#初めから⾒えているが、ここは気にしないでいこう！
-(The <strong></strong> tags)- +(made)+ @(our text)@
=(bold)=!
/ <strong></strong>タグ は、あなたが書いた（タイプした）文字を太くしてい
ます！
[Stuck? Get a hint!]
/ もし、はまってしまったら、このボタンでヒントが⾒れます。
(If -~you~-+~'re not sure~+ (( [what]←{to change the text on
line 2 to ∮} )) ), (why) +(not change#【≒don't you change】)+ @(’’
Feel free to change this text’’.)@ (to ’’I'm about to learn HTML’’)?
/ もし、なにも書き換えることが思い浮かばなかったら、「HTMLを覚えるぞ！」とかどう
/ でしょう？
+(Don't change or remove)+ @(the <strong> bit or the </strong>
bit)@!
/ <strong>と</strong>は、書き換えたり、移動したりしてはいけません！
-(We)-+('ll explain)+ @(@~what~@ -~those~- +~do~+ ∮)@
(soon).
/ その点については、すぐに説明していくつもりです。
・・・まとめ・・・
どうしてHTMLを覚えるのか？
Webページはどのページであれ、HTML言語 を使って書かれています。
HTML とは、Webページにおける 骨格/骨組み だと考えてください。
#そして、CSS を使って、肉付けをする/調整する わけです。
このコースでは、HTML を使って、段落(paragraph)、⾒出し(heading)、画像
(image)、リンク(link) を、Webページ に、付け加えてみましょう。
この文章の右側には、「test.html」という「タブ(tab)」が、あります。
3/5 ページ
+13-1_Why learn HTML？.txt
#上部、やや左側
これは、これから私たちが、HTMLを書いていくためのテキストエディタにあたります。
<なになに> が、いくつか出てくるコードが⾒えますね。 そうこれが、HTML言語 な
のです。
=========================================
<!DOCTYPE html>
<strong>Feel free to change this text.</strong>
=========================================
どんな言語にも、コンピュータと「会話」するための、構文ルール(syntax) があります。
もちろん、HTML言語にも。
[Save & Submit Code]ボタン が、「下部・やや左」 に、ありますが、このボタンを
押すと、右上の小さいウィンドウ(the results tab) が、本物のブラウザのようにアク
ションします。（ブラウザの例: Chrome(グーグルクロム)、Firefox(ファイヤーフォッ
クス)、Internet Explorer(インターネット エクスプローラー)、Opera(オペラ)）
ブラウザの仕事、つまり、コンピュータではなく、
⼈にやさしい⾒栄えに変換すること
この仕事を、右上にある、小さなウィンドウが、実現します。
ブラウザ君は、HTML言語に従って、きっちり、文書などを、配置してくれます。
Instructions: あなたへのミッション
①今、右のエディタで、test.htmlファイル を編集しています。
②test.htmlファイル内の2⾏⽬の、
<strong>から</strong>の間の
「Feel free to change this text.」の部分を、
何でもあなたの好きなことに、書き換えてください。
=========================================
<!DOCTYPE html>
<strong>Feel free to change this text.</strong>
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
Feel free to change this text.
自由にこの文章を書き換えてください。
=========================================
③[Save & Submit Code]ボタンをクリックしてください。
そうすれば、このtest.htmlファイル が、
4/5 ページ
+13-1_Why learn HTML？.txt
ブラウザでは、どんなふう⾒えるかが分かります。
⾒えましたか？
#初めから⾒えているが、ここは気にしないでいこう！
<strong></strong>タグ は、あなたが書いた（タイプした）文字を太くしてい
ます！
[Stuck? Get a hint!]
: もし、はまってしまったら、このボタンでヒントが⾒れます。
↓: ヒントを⾒たら
もし、なにも書き換えることが思い浮かばなかったら、「HTMLを覚えるぞ！」とかどう
でしょう？
<strong>と</strong>は、書き換えたり、移動したりしてはいけません！
その点については、すぐに説明していくつもりです。
5/5 ページ
© Copyright 2024 Paperzz
