saya's-blog

森田ゼミ 5期生のゼミブログ

KATインターン② 

2回目のインターン! 

 

 

少しだけ、前回のおさらい

なぜ、サイトが見れるのか?

 

作ったサイトをソフトを用いて、サーバーにアップロードすることで、ネット上で閲覧できるようになる。

サーバーに置く事が大事。

 

ftpのアプリ使い方

接続したら、左がローカル。右がサーバー。

自分の名前書いてあるフォルダ開く

 

 

 

今回行ったこと

  • コーディングの仕方(主に、閉じたぐ)
  • ファイルのアップロードの仕方
  • 自分が作ったサイトをネット上で確認

 

サイトの作り方

  1. デスクトップフォルダを作成。名前もつける
  2. vscを開き、open folderを押して、先ほど作ったファイルを選択。
  3. ニューホルダをクリックして index.html と入力する
  4. ftpを開き、ローカルから、サーバーにドラッグアンドドロップ

 

 

 

コーディング

コーディングは、visual studio code (vsc) というコードエディターを使って行いました。

 

  • コーディングに使われているこの記号<>これを、タグという。
  • タグに挟まれている文字には、それぞれ意味がある。
  • 一番上にあるのは、宣言文といってどの言語を使って、運用するかを宣言するもの。
  • 真ん中にあるbodyタグはページの中身を示すもの。
  • <p>文字</p>  と打つと、文字が出る。タグは半角。

 

自分で好きな言葉を打ち込み、サイトを作ってみようという作業。

実際にやってみると、そんなにステップは多くは無かったにも関わらず、一人で完成できませんでした。

 

一つ目の原因は、タグの記号<>が間違っていたことです。私は、これ〈〉を打ち込んでいました。

<>この記号は、私がこれまでに使ったこともなく、存在すら知らない記号でした。

改めて、キーボード上にある記号や文字を把握し、使いこなせないといけないなと反省しました。

 

2つ目の原因は、書き込みたい言葉(朝だ)にもタグをつけていたことです。

正しくは、<p>朝だ</p>でした。

私は、すべてにタグをつけると思い込んでいました。

そこで改めて、タグの意味を調べてみました。

 

タグとは、プログラムのソースコードを囲むものであることが分かりました。

ようやく、さっき上で書いた『タグで挟まれている言葉には意味がある』という言葉と意味が繋がり、理解出来ました。

 

あと、<p>の意味もついでに調べてみました。

「P」とは、段落を指定するためのタグで、「P」とは「Paragraph」の略です。<p>~</p>で囲まれたテキストは1つの段落であることを示します。

html-coding.co.jp

終えての感想。

この作業だけでかなりてこずって、みんなの時間を奪ってしまった事と、自分の能力の低さを感じて、すごくきつかったです。

 

アップロード

やっと、コーディングを終えたところでffftpというソフトを使って、サーバーにファイルをアップロードしました。

 

アップロードの作業は、先ほどよりも簡単で、ネット上にすぐアップロードできました。あまり、アップロードした感覚は、無かったです。すごく簡単に世の中に情報を届けられる素晴らしさと、ワンステップで情報が漏れてしまうかもしれない恐ろしさの両方を感じました。

 

サイト検索

実際に自分のサイトを検索して見に行ってきました!

本当にサイトが作られていて感動しました。

コーディングの時、9行ほど、コードを打ち込んだのに実際に表示されているのは、私が打ち込んだ3文字の言葉だけのシンプルというよりさみしい感じのサイトでした笑笑

私たちが日ごろ見ているサイトはどれほどのコードが打ち込まれているのか考えただけでもゾッとします。

 

 

初めてだったので長々と書いてしまいましたが、これで終わりにします!

お疲れ様でした(__)