プログラム学習の勧め

プログラミングの基礎を習う!今回学習する項目

この回では次の項目について学習していきます。

  • バナー工房で学習に使う部品を使ります
  • ブラウザに表示させる

バナー工房で学習に使う部品を作りましょう。

画像の加工はバナー工房で簡単に加工できます。

お手持ちの写真とかなんでもかまいません、バナー工房を検索してアクセスしたら「画像を選択する」をクリックして好みの画像を選択して「開く」をクリックすればまたこの画面に戻ってきますので「画像を加工する」をクリックすると画像を加工できる画面になります。

画面左上の「メニュー」をクリックすると様々な項目がありますので好きな項目を選んで加工して下さい。

加工の要領は項目ごとに少し違いますが直感的に分かるようになっています、分からない時は上下にスクロールしてみて下さい。

私は写真にスタンプを貼ってこのようなものを作りました。

名前は自分で好きに付けて下さい。(半角英数字が基本です)

画像加工は自分はバナー工房でやりましたが自分の好きなもの、やり易いものでやって下さい。

ブラウザに表示させてみましょう

Atomを起動して下のように入力して保存します。

次にブラウザを起動したらこのように表示されます、このように表示されたらOKです。

HTMLで出てくるタグとは何か?

HTMLはハイパー・テキスト・マークアップ・ランゲージの略で「タグ」というマーク(命令)を使って、ここではどうゆう風にしなさいよと指示を出すこと。

大きさや色、画像の表示などができます。

ここでは画像などを表示する<img>タグと見出しに使う<h1></h1>タグと段落に使う<p></p>タグを書いてみます。

タグで注意することは、タグには開始タグと終了タグがあります。

開始タグは<h1>などのように不等号で囲まれたもの

終了タグは</h1>このように「/」スラッシュが入っています、この二つで挟まれたところがそのタグの命令を受けて表示されるところです。

しかし<img>のように終了タグがない物もあるので注意しましょう。

なおタグなどを入力するときは半角入力になるのを覚えておきましょう、全角ではうまく表示されません。

画像を表示させてみましょう

画像を表示させるには<img>タグを使用します。

山田太郎の上に<img src="img/doct.jpg">と入力します、img/doct.jpgはimgフォルダー内にあるdoct.jpgを表しています。

保存してブラウザを再読み込みすると右のような画像(画像は自分で作ったもの)が出てきたら成功です。

「src」属性は文書内に埋め込む画像やスクリプト、他のHTML文書などの外部ソースのURLを指定します

画像の大きさを変えてみる

先ほど入力した<img src="img/doct.jpg">のに写真の幅と高さを指定してやります。

<img src="img/doct.jpg" width="140" height="140">と入力します(幅と高さの数字は任意で)

これで画像の大きさの指定ができました。

画像に「ait」属性を指定する、これはその画像の説明文になるところです、つけてあげると親切です。

画像のちょっとした説明文になるところで簡単でいいです。

見出しタグと段落タグを使って表示する

次に<h1></h1><p></p>を使って書いてみましょう

それぞれのタグで囲われたところが変化したのが分かります。

h1が「見出し」を構成するタグでh1~h6まであります。

pは段落を表し記事の内容を書くところです。

初心者でも出来るプログラミングの基礎を習う!第2回

これからも学習したことを分かり易く記事にしていきます

htmlの事に少し詳しく説明しています。

ing-3">
DOCTYPE宣言とは初心者でも出来るプログラミングの基礎を習う!第3回
DOCTYPE宣言とは初心者でも出来るプログラミングの基礎を習う!第3回
2019.07.19
初心者でも出来るプログラミングの基礎を習う!第3回 ここではプログラミング言語を習う前の段階のHTMLの基礎について学習します。 HTMLに記述する内容の基本的事項 DOCTYPE...
https://tom-hiro.com/puroguram