初めてのホームページ

===== このサイトについて ===== ---//2021/01/11 更新// [[2022_読んでみたい本|2022_読んでみたい本]] [[2022_読んだ本|2022_読んだ本]] 2020年現在、プログラミングど素人の私が、WindowsパソコンでフリーソフトのみでWEBプログラミングで遊んだ経過を残したいと思います。 HTML, CSS, Javascriptを用いて、WEBサイト、Androidスマホアプリを作りたいと思います。基本的な構文などは、他のサイトや本におまかせして、実際に何かを作って公開するところまでを記載していきたいと思います。姉妹サイト：[[http://i-doctor.sakura.ne.jp/dokuwiki/|サルでもわかる機械学習]] このページへのアクセス今日: {{counter|today}} / 昨日: {{counter|yesterday}} 総計: {{counter|total}} ===== GitHubで初めてのホームページ公開 ===== GitHubというサイトで、初めてのホームページを公開してみましょう。もちろん無料です。このようなホームページを作成して、公開します。 https://adash333.github.io/html001/　 {{:pasted:20181202-203917.png}} ソースコード https://github.com/adash333/html001/blob/master/index.html




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

==== 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 GitHub の緑のボタンをクリック {{: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 ==== 7. 初めてホームページ作成しようとするときに一番お勧めの本 ==== このサイトを見ながらでもできますが、やはり、初心者用の本を何冊か読んで写経（自分の手で打ち込んでみる）していくのが一番です。たくさんの素晴らしい本がありますが、WEBプログラミング初めての方に1冊だけお勧めするとしたら、以下の本となります。最初は少し難しいかもしれませんが、とにかく、何回も写経して、実際に動くものを作っていくと、楽しく、どんどんできるようになると思います。上記の本を写経していった経過の一部を、以下に記載させていただきました。参考にしていただければ幸いです。 [[http://twosquirrel.mints.ne.jp/?p=16475|「これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん」を読んでみる（１）]] [[http://twosquirrel.mints.ne.jp/?p=16633|「これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん」を読んでみる（２）]] [[http://twosquirrel.mints.ne.jp/?p=16723|「これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん」を読んでみる（３）Chapter4]] [[http://twosquirrel.mints.ne.jp/?p=16767|「これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん」を読んでみる（４）Chapter5]] [[http://twosquirrel.mints.ne.jp/?p=16822|「これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん」を読んでみる（５）Chapter6]] [[http://twosquirrel.mints.ne.jp/?p=16827|「これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん」を読んでみる（６）Chapter7前半_Ajax通信の基本]] [[http://twosquirrel.mints.ne.jp/?p=16888|「これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん」を読んでみる（７）Chapter7後半_jQueryその他]] 『これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん』サポートサイト https://book.mynavi.jp/supportsite/detail/9784839959715.html ===== メニュー ===== プログラミング無しでホームページを公開する場合は、https://ja.wordpress.com/などの、無料でWordpressを立ち上げることができるサイトに登録するのがお勧めです。もう少し本格的にWEBサイトを作るのであれば、HTML、CSS、Javascriptを学んでみるのも楽しいです。 [[00.CSSフレームワークBulma用テンプレート:index.html]] [[Elm:index.html]] [[00.Flutter:index.html]] [[00.Vue用デザインフレームワークVuetify:index.html]] [[00.JavaScript:index.html]] [[00.NoCodeノーコード:index.html]] [[00.Node.js:index.html]] [[00.stencil:index.html]] [[00.RubyonRails:index.html]] [[00.RubyonRails6:index.html]] [[00.初めての医療統計RとEZR:index.html]] [[01.初めてのHTMLでホームページ作成:index.html]] [[02.初めてのCSSでWEBデザイン:index.html]] [[03.初めてのJavascriptでおみくじアプリ:index.html]] [[04.Javascriptで電卓アプリ:index.html]] [[05.JavascriptでToDoアプリ:index.html]] [[06.Vue.jsとFirebaseでチャットアプリ:index.html]] [[07.Vue.jsでクイズアプリ:index.html]] [[08.Googleアカウントでのログイン機能:index.html]] [[09.emailとpasswordでパスワード制限:index.html]] [[10.Vue.jsとFirebaseでランキングつき連打ゲーム:index.html]] [[11.Vue.jsとFirebaseで画像アップローダー:index.html]] [[12.Vue.jsとWebSpeechAPIで音声認識アプリ:index.html]] [[13.Vue.jsとFirebaseで認証つきボイスレコーダー:index.html]] [[14.Vue.jsのvuexで入力フォーム:index.html]] [[15.Vue.jsのvuexでカウンター:index.html]] [[16.Vue.jsのvuexでパスワード制限:index.html]] [[17.Nuxt.jsのvuexでパスワード制限:index.html]] [[18.Nuxt.jsとBulmaでハンバーガーメニュー:index.html]] [[19.Nuxt.jsで画像一覧アプリ:index.html]] [[20.Vue.jsとaxiosで名前一覧を表示:index.html]] [[17.Nuxt.jsのvuexでパスワード制限:index.html]] [[21.PWA(ProgressiveWebApps)の作成方法:index.html]] [[Stencil:index.html]] [[ホワイトハッカー:index.html]] ===== 開発環境 ===== プログラミングといえばMacが当たり前の2018年現在ですが、Windowsパソコンしか持っていないため、Windowsパソコンでやっていきます。 Macでないと、iPhoneアプリを作成することができません。また、その他のことでも、Macの方が、プログラミングを行いやすいです。


Panasonic CF-RZ4
Windows 8.1 Pro


Panasonic CF-RZ6
Windows 10 Pro

===== 2018年12月現在 ===== Vue.jsというWEBアプリ（WEBサイト）を作るためのフレームワークを勉強しています。 ===== WindowsにGitをインストールのリンク ===== WindowsでGitを使うための最初の設定は、かなり面倒です。以下のリンク先の通りに行うのがベストだと思います。 http://proengineer.internous.co.jp/content/columnfeature/6893 クリック操作でGitを行いたい場合は、SourceTreeというソフトもあります。 https://ja.atlassian.com/software/sourcetree {{:pasted:20181202-202027.png}} ===== WEBプログラミング初心者のためのお勧めの本 ===== 最初に読む本として、以下の本が非常にわかりやすくお勧めです。 ===== リンク ===== https://gihyo.jp/dev/serial/01/enjoy-pg もっと楽しむ！　プログラミング言語　「豆」談義 2007年 https://www.tohoho-web.com/html/memo/htmlls.htm HTML Living Standard ===== リンク ===== [[00.ChatGPT:index.html|00.ChatGPTトップページ]] [[00.科学的根拠に基づく教育:index.html|00.科学的根拠に基づく教育EBE]] [[00.ブロックチェーン:index.html|00.ブロックチェーントップページ]] [[00.GoogleCloudPlatform:index.html|00.GoogleCloudPlatformトップページ]] [[00.お金:index.html|00.お金トップページ]] [[00.眼科:index.html|00.眼科トップページ]] [[00.css:index.html|00.CSSトップページ]] [[00.ionic4:index.html|スマホ用ホームページ&スマホアプリ作成ソフトIonic4]] [[00.ionic5:index.html|スマホアプリ作成ソフトIonic4]] [[00.covid19:index.html|covid19トップページ]] [[00.react:index.html|Reactトップページ]] [[00.python:index.html|Pythonトップページ]] [[00.swift:index.html|Swiftトップページ]] [[elm:index.html]] [[java:index.html]] [[TensorFlow.js:index.html|TensorFlow.js]] [[vue:index.html]] [[windows11:index.html]] [[z_blog:index.html]] [[Gitとコマンドライン|Gitとコマンドライン]] [[Dokuwiki記法|Dokuwiki記法]]