プログラムの学習に入る。2020年8月20日
ドットインストール
プロゲート
とりあえず、上記2サイトがオススメらしい。
今回は、「ドットインストール」を進めていきたいと思う。
ちなみに私は、ネットに関しては無知な38歳である。
学校でも習ったことはなく、全くわからないところからスタートであることは言っておきたい。
完全初心者の中年が、がんばってみようと思う。
このページは、個人的なメモである。
たびたび、苦労したところをメモっている。ドットインストールと合わせて見ないと何をメモっているのかわからないだろう。
① <h1>この間に文章入れる</h1> h1=ヘディング1番という意味。
② 開始タグ・終了タグ・マークアップ
③ 段落<p></p> ＝パラグラフ（Paragraph）
※なぜかページが開かなかった。blankとなってしまう。
解決・PC上で「設定」➡「プライバシーとセキュリティ」➡「サイトの設定」➡「ポップアップとリダイレクト」ここを許可する。
④ 画像・<img src”フォルダー場所”> （閉じタグはない）
⑤ widght=幅 height=高さ （画像の予備設定（オプション）を【タグの属性】という）
読み方は「ウィズとハイト」。
オルト属性もつける。画像がうまく表示されない時の代替テキスト（丁寧に）
【alt=”〇〇の▲▲”】言葉で日本語でわかりやすく。
⑥ html文章の宣言をトップに書く。<!DOCTYPE html> 半角大文字がある。
その下に、<html lang=”ja”> 日本語という意味「ランゲージ＝ジェーエー」
⑦ ヘッドとボディ（<head>&<body>) タブキー多様する。
⑧ 移動したい文章を（段落で良い）ドラッグし、【Alt】キー押しながらカーソル⇧とか。
⑨ 文字コード設定は、<head>の下に、<meta charset”utf-8″> 「utf-8」使っておけば問題ない。
メタ、タグ。どの種類の文字をPCが使うかの設定。メタの下に<title>〇〇勉強</titol>
⑩ 次に、ファミコンじゃなく、ファビコン（上部のタブのタイトル左の小さい画像アイコン）設定。
⑪ リンクタグ<link rel=”icon” href=”favicon.ico”>リレーション=（関係）属性「rel」をアイコンとし、エイチレフ属性をファビコン。
⑫ リンクタグの説明。検索エンジンが使う可能性もあるので丁寧に。<meta name=”description” content=”太郎のポートフォリオです。”>ディスクリプション＝解説という意味。
⑬ 次は、ボディタグ内。まず見出しは、<h1><h2><h3>と重要順。ここに画像や説明を下部に入れておく<p>説明。<body>〇〇××と応答</body>ひとつ作って複製し、編集すれば楽。
⑭ 複製の方法。段落をドロップし【shift】【Alt】【矢印】で複製。
⑮ コードの中にメモを入れるコード。 <!– aaazzz –>
⑯ 【Ctrl】【/】 コントロール、スラッシュでコードだけ消すショートカットキー「aaazzz」だけになりページに反映される。
⑰ 「header」と「footer」。head＝全体の上部。header=body内部の上部。footer=body内部の下部
⑱ <section>間に各項目を移動</section> ＝地区・区分（意味）
⑲ <ul> =ユーエル＝アンオーダーリスト（順番の無いリスト）。箇条書きリスト。そのなかにリンクタグ<li>
⑳ リンクタグの作り方。<a href=”http~~~.com” target=”_blank”> ターゲット、アンダーバー、ブランクを入れることで、新しいタブページで表示される。
・感想。
アルファベット間違えると、いろんな場所で悪影響がでる。かなりデリケートだ。
気負わず進めていきたい。
【最後に今回作った、「プラグラミングコードをコピペ】
<!DOCTYPE html><html lang=”ja”><head> <meta charset=”utf-8″> <title>太郎のポートフォリオサイト</title> <link rel=”icon” href=”favicon.ico”> <meta name=”description” content=”太郎のポートフォリオです。”> </head><body> <header> <img src=”img/taro.png” width=”120″ heigth=”120″ alt=”太郎のアイコンです”> <h1>えんじ</h1> <p>UI/UXデザイナー見習いです</p> <ul> <li> <a href=”https://dotinstall.com” target=”_blank”> <img src=”img/blog.png” width=”20″ height=”20″ alt”ブログサイトへのリンク画像です” </a> </li> <li> <a href=”https://dotinstall.com” target=”_blank”> <img src=”img/photos.png” width=”20″ height=”20″ alt”写真サイトへのリンク画像です” </a> </li> </ul>
</header>
<!– 作品紹介 –> <section> <h2>WORKS</h2> <section> <img src=”img/work1.png” width=”400″ heigth=”260″ alt=”勇者ゲームの紹介画像”> <h2>勇者ゲーム</h2> <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> </section> <section> <img src=”img/work2.png” width=”400″ heigth=”260″ alt=”宝さがしゲームの紹介画像”> <h2>宝さがしゲーム</h2> <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> </section> <section> <img src=”img/work3.png” width=”400″ heigth=”260″ alt=”神経衰弱の紹介画像”> <h2>神経衰弱ゲーム</h2> <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> </section> </section>
<footer> <p>(c) dotinstall</p> </footer>
</body></html>
コメント