初めてのホームページ

===== 01.初めてのHTMLでホームページを公開（GitHubで初めてのホームページ公開） ===== (このページの内容はトップページと同じ内容です。) ホームページの本文やリンクや画像の配置は、HTML(エイチティーエムエル)というプログラミング言語で記載します GitHub(ギットハブ)というサイトで、初めてのホームページを公開してみましょう。もちろん無料です。このようなホームページを作成して、公開します。 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 をクリック




  
    初めてのホームページ
  
  
    初めてのホームページ
    GitHubで公開

{{: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パソコンで基本的にフリーソフトのみで一つずつWEBサイトなどを作って公開していき、そのときに必要なHTMLなどを（一部）解説していくということをやっていきたいと思います。 ==== 6.出来上がったサイトとソースコード ==== サイト https://adash333.github.io/html001 ソースコード https://github.com/adash333/html001 ==== 6. 初めてホームページ作成しようとするときに一番お勧めの本 ==== このサイトを見ながらでもできますが、やはり、初心者用の本を何冊か読んで写経（自分の手で打ち込んでみる）していくのが一番です。たくさんの素晴らしい本がありますが、WEBプログラミング初めての方に1冊だけお勧めするとしたら、以下の本となります。 ===== 初めてホームページ作成をするときに参考となるサイト ===== 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]]