html
最近、wordpressで仕事を行う事が多く HTMLとCSSの使い方を復習(メモ的)htmlを書く時の基本骨格内には見えない部分画像を挿入するには内にaltを入れることで検索に引っ掛かりやすくなる
table タグ内には 見やすく整理する為に でタグを入れることができる 例コードは以下の通り 以上
印刷除外の設定:印刷用cssの作成① html では以下の様に、 とprint.cssと結びつけ 印刷時に表示したくない箇所を で囲む② 印刷用cssを作成する以上
table をsectionで区切る。 以上
table 一行毎に色を付けていきますcssコードはtableは以下の通り以上
前回の、tableを横に並べる②の HTML 文を元にcss の方でとする事で特定の列を編集できる。ここでは、class box_left1の1列目 幅を10pxにする※ nth - child(1) で 一つ目の列という事
tableを横に並べるもう一つの方法html文のイメージをザックリ cssの編集コード tableは 以上
html 文は、入れ子にして2つのdivで括っている box_left1とbox_left2に分けているcssで編集 コードは以下の通り tableは、以下の通りに横に並ぶ以上
html分を入れ子にする。 イメージとして 下記に記す 以上
前回の html で作成した コードを css に渡すhtmlのコード 以下のように述を変えるcss のファイルを作成する元々、htmlに書かれていたコードをhtmlとcssに分ける事ができた 以上
htmlだけで作成した 縦並びの二つのtable作成table html コード
『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>…
『 最終回 』cgisever(python)作成入力フォーム(html)作成出力フォーム(html、css)作成出力フォームにランダムに表示する画像の選択入力フォームと出力フォームを読み込みを一つにするプログラム(python)【出来上がりのフォーム】 出力用 【出来上がっ…
『 htmlとcssとpythonの合体 』 入力用フォームと出力用フォームの、html、cssをpythonに読み込む。ファイル名は、mane.pyにする。 ごめんなさい。少し長いコードになりますが。 def get_date(): import datetime now = datetime.datetime.now() today = str…
『出力用フォームを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…
『 出力フォーム作成 』 出力フォーム作成(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>…
『 入力フォーム作成 』 入力フォーム作成コードは以下の通り <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>
『 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…
『連載で作成したいもの:イメージ』 最後に目指す完成形をを最初に記します1、入力フォーム(html) 2、上記に入れたオhtml 出力フォーム:alt=htmlで作成した出力フォーム 弁当オーダーが 出力フォームに反映される 3、上記の出力画面の詳細説明 名前は、入…
『 htmlファイルをpython読み込み 』 目標 htmlとcssを扱う事が今回が初めてなのでしっかり身に付ける htmlとcssを使って自在に入力フォーム、出力フォームを作成する 入力されたデータをpython(cgi)を使いhtmlとpythonを連動させる 上記目標を一週間で達成…
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 フォルダをまとめる事 フォルダをまたいたリンク結ぶ フォルダをしっかり整理する。 作業を行う上で、しっかりとフォルダ分けと階層の理解をした方が良い 例えば、画像はimagesというフォルダを作り、まとめ…
『属性について』 html learning memo no.6 属性について こんにちは</p> <p class = "message active"> こんにちは</p> <p class = "massage" style ="background : skyblue ;">こんにちは</p>
『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 コメントアウトする場合は 上記入力でstyle内容はコメントアウトされます <html lang="ja"> <head> <meta charset="UTF-8"> <title>改 行</title> </head> <body> <h1>全員野球を目標に</h1> <p>超攻撃を目指す</p> <hr> <p>サインはどうする?</p> <…</hr></body></html>
『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 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の基本構造『以下の型を必ず書く』 <html> -------------------------------------------------------------------------------- <head> --------------------------------------- ヘッダー 部分 </head> -------------------</html>…