htmlからjsを動かす方法

index.html

index.js

 

Flaskを使ってみる

まずはwebアプリフレームワークであるFlaskをインストール

$pip install Flask

2.0.1 が入りました.

次にjinja2もインストールします。

HTMLにpythonを埋め込むテンプレートエンジンというものらしい。

$pip install jinja2

3.0.1 が入っていました。入れた記憶がないが、Flaskをインストールすると勝手にはいるのかな?

構成は

flaskr>templates>index.html, xxx.html

flaskr>__init__.py, main.py, yyy.py

の2系統ある感じする。templatesは決まりなのでフォルダ名を変えてはいけない。

フォルダ構成を作ったらindex.htmlを書いていきましょう。vs code を使っているなら ! を打つだけで、下のコードが自動的に生成されて便利です。langはenからjaに変えておきます。

ボディには下記のようなのを入れておきました。

次、__initi__.pyです。

意味わからないけど、下記のような呪文を書きます。

インポートするのはflaskモジュールではなくて自分で作ったflaskrです。

appはFlaskアプリケーションオブジェクト というらしいです。

つぎに、main.pyです。今作ったFlaskアプリケーションオブジェクトをインポートします。

トップページ(‘/’)にアクセスしたときに実行する関数を定義します。

トップページにアクセスしたときに、render_templateメソドを使って、index.htmlが表示するようにしましょう。

最後に__init__.pyの方にこのmain.pyを呼び出せるようにしておく。

さて実行しよう

Flaskアプリの起動方法
CMDの場合
flaskrが入っているフォルダへcd で移動する
set FLASK_APP=flaskr
set FLASK_ENV=development
ここまではできた
flask run でエラー
powershellの場合
flaskrが入っているフォルダへcd で移動する
env:FLASK_APP=”flaskr” ですでにエラー
どうしようもない。ダレカタスケテ
で、結局どうしたかというと、flask runができないので、直接python main.py して動かせるようにした。
そうすると、flaskrフォルダの上位へ移動する必要なくなる。
そもそも__init__.pyのimport flaskr.mainも意味わからんし、やめた。
もともと__init__.pyに入れていた app=Flask(__name__)もmain.pyに移動した。
で、最後にapp.run()を入れると、python main.py で実行できたから、ひとまずは良しとしよう。
 

JavaScript:基本

基本をはるだけです。

HTML

JS

 

 

WordPressもHTMLだから ちゃんとタグは守ろう(´・ω・`)

こんにちは 圧倒的 かずまなぶ (´・ω・`)です。

いままで見出し部分は、見やすさで”引用”を使っていました。

でも、それはHTML的には邪道なので、ここからはちゃんとしていこうと思います。

<h2>大見出し1</h2>

下のimageに意味はありません。

基本構造は

  1. <a href=”https://○○”></a>で画像に対してリンクを貼ります。
  2. この<a>タグのパラメータとして target=”_blank” を追記し、別タブで開くようにします。
  3. その中に<img src=”https://○○.jpg”>で画像を入れます。
  4. 画像タグの内部には画像サイズを指定するwidth=”300″ height=”225″ を入れます。

<a href=”https://toyo-interest.com/wp-content/uploads/2019/01/old_map.jpg”><img class=”aligncenter wp-image-902 size-medium” src=”https://toyo-interest.com/wp-content/uploads/2019/01/old_map-300×225.jpg” alt=”” width=”300″ height=”225″ /></a>

<h3>中見出し1-1 リストの構造</h3>

<p1>ここは段落。文章を書いていく場所</p>

  • <ul><li>ここはun-order-list(順番なしのリスト項目)</li>
  •          <li>ここはun-order-list(順番なしのリスト項目)</li></ul>

<p1>ここはparagraph(段落)。文章を書いていく場所</p>

  1. <ol><li>ここはorder-list(順番ありのリスト項目)</li>
  2.          <li>ここはorder-list(順番ありのリスト項目</li></ol>

<h3>中見出し1-2 効果的なリンクの貼り方</h3>

2つあるので比較してみましょう。

<h4>中見出し1-2-1 アンカーテキスト</h4>

テキストを書いて、それにリンクを貼ります。

例えば   < グーグル >

 

でもなんか寂しいですね。次回はテーマを変更してみます。

webサイトの作り方の基本を再確認

こんにちは、かずまなぶです、2019年 あけましておめでとうございます。

初心に帰りまして、いままで乱雑に学んできてしまった、webサイトの作り方の基本を今一度確認しようと思います。

基本要素をふんだんに使ったHTMLサンプルコード

上記のHTMLだけでは下記のような、縦一列の体裁になる。あとでCSSが必要

CSSとリンクして体裁を整える

 

 

 

デザインの参考になるサイト:とにかく真似をする

io300.com

IKESAI.com

サイズと色を測る:chromeの拡張機能

measureIt

ColorZilla

chromブラウザの右上に常駐しますので、アイコンをクリックすると機能します。

HTMLエディタ

sublimetext3

DOCTYPE宣言:html5を使用する宣言  CSSの解釈が異なる

<!DOCTYPE html>

効果的なボタンやバナーのデザイン

 

 

HTMLの話

超基本的なものを張っておきますあ。