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

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

このページへのアクセス
今日: 1 / 昨日: 0
総計: 1

sidebar

index.html


このサイトについて

2021/01/11 更新

2022_読んでみたい本

2022_読んだ本

2020年現在、プログラミングど素人の私が、WindowsパソコンでフリーソフトのみでWEBプログラミングで遊んだ経過を残したいと思います。

HTML, CSS, Javascriptを用いて、WEBサイト、Androidスマホアプリを作りたいと思います。

基本的な構文などは、他のサイトや本におまかせして、実際に何かを作って公開するところまでを記載していきたいと思います。

姉妹サイト:サルでもわかる機械学習

このページへのアクセス
今日: 1 / 昨日: 2
総計: 794

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

GitHubというサイトで、初めてのホームページを公開してみましょう。もちろん無料です。

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

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

ソースコード

https://github.com/adash333/html001/blob/master/index.html

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

0.用意するもの

1.パソコン

当サイトではWindowsパソコンで行いますが、今回はMacでも全く同じ環境です。
スマホでもできなくはないですが、やはり、パソコンでキーボードで打ち込むのが良いと思います。
このサイトをスマホで見ながら、パソコンで打ち込んでいく(写経していく)のがベストかと思われます。

2.Webブラウザ

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

1.GitHubに登録

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

  1. 半角英数字で好きな名前を入力
  2. 自分のEmailアドレスを入力
  3. パスワードを入力(次回以降、ログインするときに覚えておく必要があります)
  4. Sign up for GitHub の緑のボタンをクリック

2.GitHubで新規リポジトリを作成(新しいファイルの置き場所を作る)

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

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

3. index.htmlファイル(HTMLファイル、ホームページのファイル)を作成

すると、以下のような画面になるので、「creating a new file」をクリックします。

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

  1. name your file… のところに、index.html と記入し、
  2. 下の方に、以下のコードをがんばって打ちこみます(最初はコピーアンドペーストでもかまいません)
  3. 入力し終わったら、下の方へ移動して、
  4. Commit new file をクリック
<!DOCTYPE html>
<html>
  <head>
    <title>初めてのホームページ</title>
  </head>
  <body>
    <h1>初めてのホームページ</h1>
    <p>GitHubで公開</p>
  </body>
</html>

4. GitHubでindex.htmlをホームページとして公開

以下のような画面になるので、画面右上の方にある、「Settings」をクリック。

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

  1. GitHub Pagesのところの、Source のところの、None をクリック
  2. master branch をクリック

  1. Save をクリック

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

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

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

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

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

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

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

7. 初めてホームページ作成しようとするときに一番お勧めの本

このサイトを見ながらでもできますが、やはり、初心者用の本を何冊か読んで写経(自分の手で打ち込んでみる)していくのが一番です。

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

最初は少し難しいかもしれませんが、とにかく、何回も写経して、実際に動くものを作っていくと、楽しく、どんどんできるようになると思います。

上記の本を写経していった経過の一部を、以下に記載させていただきました。参考にしていただければ幸いです。

「これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん」を読んでみる(1)

「これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん」を読んでみる(2)

「これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん」を読んでみる(3)Chapter4

「これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん」を読んでみる(4)Chapter5

「これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん」を読んでみる(5)Chapter6

「これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん」を読んでみる(6)Chapter7前半_Ajax通信の基本

「これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん」を読んでみる(7)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用テンプレート

Elm

00.Flutter

00.Vue用デザインフレームワークVuetify

00.JavaScript

00.NoCodeノーコード

00.Node.js

00.stencil

00.RubyonRails

00.RubyonRails6

00.初めての医療統計RとEZR

01.初めてのHTMLでホームページ作成

02.初めてのCSSでWEBデザイン

03.初めてのJavascriptでおみくじアプリ

04.Javascriptで電卓アプリ

05.JavascriptでToDoアプリ

06.Vue.jsとFirebaseでチャットアプリ

07.Vue.jsでクイズアプリ

08.Googleアカウントでのログイン機能

09.emailとpasswordでパスワード制限

10.Vue.jsとFirebaseでランキングつき連打ゲーム

11.Vue.jsとFirebaseで画像アップローダー

12.Vue.jsとWebSpeechAPIで音声認識アプリ

13.Vue.jsとFirebaseで認証つきボイスレコーダー

14.Vue.jsのvuexで入力フォーム

15.Vue.jsのvuexでカウンター

16.Vue.jsのvuexでパスワード制限

17.Nuxt.jsのvuexでパスワード制限

18.Nuxt.jsとBulmaでハンバーガーメニュー

19.Nuxt.jsで画像一覧アプリ

20.Vue.jsとaxiosで名前一覧を表示

17.Nuxt.jsのvuexでパスワード制限

21.PWA(ProgressiveWebApps)の作成方法

Stencil

ホワイトハッカー

開発環境

プログラミングといえば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

WEBプログラミング初心者のためのお勧めの本

最初に読む本として、以下の本が非常にわかりやすくお勧めです。

リンク

https://gihyo.jp/dev/serial/01/enjoy-pg
もっと楽しむ! プログラミング言語 「豆」談義
2007年

https://www.tohoho-web.com/html/memo/htmlls.htm
HTML Living Standard

リンク


index.html.txt · 最終更新: 2023/07/23 by adash333