(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
/ [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ファイル が、
+(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
line2 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)」が、あります。
#上部、やや左側 これは、これから私たちが、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]ボタンをクリックしてください。
ブラウザでは、どんなふう⾒えるかが分かります。 ⾒えましたか？
#初めから⾒えているが、ここは気にしないでいこう！
<strong></strong>タグ は、あなたが書いた（タイプした）文字を太くしてい ます！
[Stuck? Get a hint!]
: もし、はまってしまったら、このボタンでヒントが⾒れます。 ↓: ヒントを⾒たら もし、なにも書き換えることが思い浮かばなかったら、「HTMLを覚えるぞ！」とかどう でしょう？ <strong>と</strong>は、書き換えたり、移動したりしてはいけません！ その点については、すぐに説明していくつもりです。
