サルでもわかるWEBプログラミング

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
===== 01.初めてのHTMLでホームページを公開（GitHubで初めてのホームページ公開） =====
(このページの内容はトップページと同じ内容です。)

ホームページの本文やリンクや画像の配置は、<wrap hi>HTML(エイチティーエムエル)</wrap>というプログラミング言語で記載します

<wrap hi>GitHub(ギットハブ)</wrap>というサイトで、初めてのホームページを公開してみましょう。もちろん無料です。

このようなホームページを作成して、公開します。

https://adash333.github.io/html001/　

{{:pasted:20181202-203917.png}}

ソースコード

https://github.com/adash333/html001/blob/master/index.html
==== 0.用意するもの =====
１．パソコン\\
当サイトではWindowsパソコンで行いますが、今回はMacでも全く同じ環境です。
スマホでもできなくはないですが、やはり、パソコンでキーボードで打ち込むのが良いと思います。
このサイトをスマホで見ながら、パソコンで打ち込んでいく（写経していく）のがベストかと思われます。

２．Webブラウザ\\
今、このサイトを見ているソフトです。Edge, Internet Explorer, Chrome, Firefox, Safariなどですが、Chromeがお勧めです。
ぜひ、この機会に、https://www.google.co.jp/chrome/から、Chromeをインストールしてみてください。

==== 1.Githubに登録 =====

いきなり英語でとっつきづらいですが、以下のリンクから、Githubというサイトに登録します。

  -https://github.com/へ行く
  -半角英数字で好きな名前を入力
  -自分のEmailアドレスを入力
  -パスワードを入力（次回以降、ログインするときに覚えておく必要があります）
  -Sign up for GutHub の緑のボタンをクリック

{{:pasted:20181202-194330.png}}

==== 2.Githubで新規リポジトリを作成（新しいファイルの置き場所を作る） =====

GitHubにアカウント登録をすると、ログイン後の画面になりますので、画面右上の「＋」ボタンをクリックして、さらに、New repository をクリック。

{{:pasted:20181202-200027.png}}

  -「Repository name」のところに、「html001」と入力し、
  -「Create repository」ボタンをクリックします。

{{:pasted:20181202-200406.png}}

==== 3. index.htmlファイル（HTMLファイル、ホームページのファイル）を作成 =====
すると、以下のような画面になるので、「creating a new file」をクリックします。

{{:pasted:20181202-200811.png}}

以下のような真っ白な画面が出てきます。

{{:pasted:20181202-200844.png}}

  -name your file... のところに、index.html と記入し、
  -下の方に、以下のコードをがんばって打ちこみます（最初はコピーアンドペーストでもかまいません）
  -入力し終わったら、下の方へ移動して、
  -Commit new file をクリック

<code>
<!DOCTYPE html>
<html>
  <head>
    <title>初めてのホームページ</title>
  </head>
  <body>
    <h1>初めてのホームページ</h1>
    <p>GitHubで公開</p>
  </body>
</html>
</code>

{{:pasted:20181202-201514.png}}

{{:pasted:20181202-201647.png}}

==== 4. GitHubでindex.htmlをホームページとして公開 ====
以下のような画面になるので、画面右上の方にある、「Settings」をクリック。

{{:pasted:20181202-202255.png}}

  -Settingsページが表示されるので、下の方へ行き、

{{:pasted:20181202-202339.png}}

  -GitHub Pagesのところの、Source のところの、None をクリック
  -master branch をクリック

{{:pasted:20181202-202800.png}}

  -Save をクリック

{{:pasted:20181202-202914.png}}

==== 5. 公開されたホームページを確認する ====

公開されているホームページアドレス（URLといいます）は、Settings画面から確認することができます。

{{:pasted:20181202-203329.png}}

  -Settingsの画面になっていますので、そのまま下の方へ行き、
  -GitHub Pagesの下にある、Your site is ready to be published at の右側のリンクをクリック

{{:pasted:20181202-203644.png}}

私の場合は、https://adash333.github.io/html001/　がリンクとなり、実際、以下のようになりました。

{{:pasted:20181202-203917.png}}

これで、初めてのホームページが公開できました。以外と簡単だったのではないでしょうか？

このサイトは、このような感じで、Windowsパソコンで基本的にフリーソフトのみで<wrap hi>一つずつWEBサイトなどを作って公開していき、そのときに必要なHTMLなどを（一部）解説していく</wrap>ということをやっていきたいと思います。

==== 6.出来上がったサイトとソースコード ====

サイト

https://adash333.github.io/html001

ソースコード

https://github.com/adash333/html001


==== 6. 初めてホームページ作成しようとするときに一番お勧めの本 ====
このサイトを見ながらでもできますが、やはり、初心者用の本を何冊か読んで写経（自分の手で打ち込んでみる）していくのが一番です。

たくさんの素晴らしい本がありますが、WEBプログラミング初めての方に1冊だけお勧めするとしたら、以下の本となります。

<html>
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B06XT19H2D&linkId=afb0514d180c005899a85e8ca1c71a39"></iframe>
</html>

===== 初めてホームページ作成をするときに参考となるサイト =====

https://www.sejuku.net/blog/1046
WEBアプリケーションのサービスの仕組みを図解を使って徹底解説
2015年 by 侍エンジニア塾ブログ編集部

https://saruwakakun.com/html-css/basic
{{:pasted:20181202-173142.png}}

http://html2php.starrypages.net/
{{:1.はじめてのwebプログラミング:pasted:20181202-184727.png}}

http://toretama.jp/kiso3.html
{{:1.はじめてのwebプログラミング:pasted:20181202-185701.png}}


===== リンク =====

[[1.はじめてのWEBプログラミング:index.html]]

[[CSSフレームワークBulmaでWEBデザイン:index.html]]

[[vue:index]]