zono note

zono note

日々の学び、気付きを大切に綴りたい

html

html 振り返り #1

最近、wordpressで仕事を行う事が多く HTMLとCSSの使い方を復習(メモ的)htmlを書く時の基本骨格内には見えない部分画像を挿入するには内にaltを入れることで検索に引っ掛かりやすくなる

Learning HTML & CSS『tableタグの利用』

table タグ内には 見やすく整理する為に でタグを入れることができる 例コードは以下の通り 以上

htmlをcssを使って整える(8)印刷除外の設定

印刷除外の設定:印刷用cssの作成① html では以下の様に、 とprint.cssと結びつけ 印刷時に表示したくない箇所を で囲む② 印刷用cssを作成する以上

htmlをcssを使って整える(7)テーブル毎にsectionで区切る

table をsectionで区切る。 以上

htmlをcssを使って整える(6)一行毎に色を付ける

table 一行毎に色を付けていきますcssコードはtableは以下の通り以上

htmlをcssを使って整える(5)tableの列を指定して編集

前回の、tableを横に並べる②の HTML 文を元にcss の方でとする事で特定の列を編集できる。ここでは、class box_left1の1列目 幅を10pxにする※ nth - child(1) で 一つ目の列という事

htmlをcssを使って整える(4)tableを横に並べる②

tableを横に並べるもう一つの方法html文のイメージをザックリ cssの編集コード tableは 以上

htmlをcssを使って整える(4)tableを横に並べる①

html 文は、入れ子にして2つのdivで括っている box_left1とbox_left2に分けているcssで編集 コードは以下の通り tableは、以下の通りに横に並ぶ以上

htmlをcssを使って整える(3)html分をdivで括る

html分を入れ子にする。 イメージとして 下記に記す 以上

htmlをcssを使って整える(2)htmlとcss分ける

前回の html で作成した コードを css に渡すhtmlのコード 以下のように述を変えるcss のファイルを作成する元々、htmlに書かれていたコードをhtmlとcssに分ける事ができた 以上

htmlをcssを使って整える(1)

htmlだけで作成した 縦並びの二つのtable作成table html コード

html learning memo no.8

『table作成』 HTML tableタブを作るhtml tableタグの基本表は、table要素とth要素、tr要素、tb要素の組み合わせで作成【th要素】 表の見出し 【tr要素】 表の行を定義するための要素 【tb要素】 表のデータをいれる為の要素 <table border="1"> <tr> <th>日付</th> <th>集合場所</th> </tr> <tr> <td>2016/4/8</td> <td>鹿</td></tr></table>…

連載 8 : pythonとhtmlの連載

『 最終回 』cgisever(python)作成入力フォーム(html)作成出力フォーム(html、css)作成出力フォームにランダムに表示する画像の選択入力フォームと出力フォームを読み込みを一つにするプログラム(python)【出来上がりのフォーム】 出力用 【出来上がっ…

連載 7 : pythonとhtmlの連動

『 htmlとcssとpythonの合体 』 入力用フォームと出力用フォームの、html、cssをpythonに読み込む。ファイル名は、mane.pyにする。 ごめんなさい。少し長いコードになりますが。 def get_date(): import datetime now = datetime.datetime.now() today = str…

連載 6: pythonとhtmlの連動

『出力用フォームをcssで編集』 出力用フォームを編集する為に cssで編集する @page { size: A4; magin:10mm; } @media print { body { width: 190mm; } } body { border: 2px solid black; width: 210mm; height: 148mm; padding-right: 50px; padding-left…

連載 5 : pythonとhtmlの連動

『 出力フォーム作成 』 出力フォーム作成(htmlとcss使用)コードは以下の通り <html> <head> <title>いちろ献立</title> <style> @page { size: A4; magin:10mm; } @media print { body { width: 190mm; } } body { border: 2px solid black; width: 210mm; height: 148mm; padding-right: 5</head></html>…

連載 4 : pythonとhtmlの連動

『 入力フォーム作成 』 入力フォーム作成コードは以下の通り <html> <head> <title>すずき弁当入力</title> <meta charset="utf-8"> </head> <body> <form action="/cgi-bin/menu.py"> 名前入力: <input list="browsers" name="name"> <datalist id="browsers"> <option>鹿児島タロウ</option> <option>熊本ハナコ</option> </datalist> </form></body></html>

連載 3 : pythonとhtmlの連動 

『 cgi server作成 』 python cgi Server 作成コードは以下の通り import http.server server_address = ("",8000) handler_class = http.server.CGIHTTPRequestHandler server = http.server.HTTPServer(server_address,handler_class) server.serve_foreve…

連載 2 : pythonとhtmlの連動

『連載で作成したいもの:イメージ』 最後に目指す完成形をを最初に記します1、入力フォーム(html) 2、上記に入れたオhtml 出力フォーム:alt=htmlで作成した出力フォーム 弁当オーダーが 出力フォームに反映される 3、上記の出力画面の詳細説明 名前は、入…

連載 1 : pythonとhtmlの連動

『 htmlファイルをpython読み込み 』 目標 htmlとcssを扱う事が今回が初めてなのでしっかり身に付ける htmlとcssを使って自在に入力フォーム、出力フォームを作成する 入力されたデータをpython(cgi)を使いhtmlとpythonを連動させる 上記目標を一週間で達成…

pythonでhtmlを扱う

pythonからhtmlを扱う ざっくりまとめ html側の入力フォーム作成 名前入力か選択 : <input list="browsers" name="myBrowser" /></label> <datalist id="browsers"> <option value="鈴木イチロー"> <option value="山田ハナコ"> </datalist> <br> メニュー(1):<input type="text"name="value2"><br> メニュー(2):<input type="text"name="value3"><br> メニュー(3):

html learning memo no.7

『フォルダをまとめる』 html learning memo no.7 フォルダをまとめる事 フォルダをまたいたリンク結ぶ フォルダをしっかり整理する。 作業を行う上で、しっかりとフォルダ分けと階層の理解をした方が良い 例えば、画像はimagesというフォルダを作り、まとめ…

html learning memo no.6

『属性について』 html learning memo no.6 属性について こんにちは</p> <p class = "message active"> こんにちは</p> <p class = "massage" style ="background : skyblue ;">こんにちは</p>

html learning memo no.5

『form作成』 html learning memo no.5 <html lang="ja"> <head> <meta charset="UTF-8"> <title>form</title> </head> <body> <form action="#"> <p> メールアドレス: <input type="email" name="mail"> </p> <p> 郵便番号: <input type="text" name="post_code"> </p> <p> <input type="submit" value="送信"> </p> </form></body></html>

html learning memo no.4

『コメントアウト、段落等』 html learning memo no.4 コメントアウトする場合は 上記入力でstyle内容はコメントアウトされます <html lang="ja"> <head> <meta charset="UTF-8"> <title>改 行</title> </head> <body> <h1>全員野球を目標に</h1> <p>超攻撃を目指す</p> <hr> <p>サインはどうする?</p> <…</hr></body></html>

html learning memo no.3

『meta情報、style等の呼び出し』 html learning memo no.3 <head> <meta name ="description" content="野球の本です"> </head> 上記のmeta情報入力は 、検索結果に反映されるのでとても大切です。 <head> <meta name ="description" content="野球の本です"> <style> boby { background : skyblue ; } </style> </head> 上記はstyleタグを使って背景に色を付けまいます。でも、styleタグを使うと長くなる…

html learning memo no.2

『文字の表示』 html learning memo no.2 <html lang="ja"> <head> <meta chatset = " utf8 "> <title>スタートHTML</title> <style> boby { background : skyblue ; } </style> </head> <boby> <p>さあー、行こう!</p> </body> </html> <html lang="ja"> 日本語設定ですよ <meta chatset = " utf8 "> 日本語コード 間違えると文字化け はてな記法メモ >| (言…</meta></html>

html learning memo no.1

html learning memo no.1 ヘッダー部分のまとめ htmlの基本構造『以下の型を必ず書く』 <html> -------------------------------------------------------------------------------- <head> --------------------------------------- ヘッダー 部分 </head> -------------------</html>…