建設業

プログラミング初心者が学んだことをブログで実践します|第一回HTML編

プログラミング初心者が学んだことをブログで実践します|第一回HTML編

 

boy

 

プログラミングってブログに活かせないかな!活かせるかどうかブログで実践してみてよ!

 

プログラミングとブログって似てませんか?

 

テーマによってはプログラミング未経験者でも全然構わないけど、ブログ公開するならキレイにしたいし、どうせなら細部までこだわりたいって思いませんか?

 

そこで今回はプログラミングをブログで実践でしながら勉強できないか試してみました。

 

本記事の内容

  • プログラミングを勉強したらブログに活かせるかが分かる
  • 完全初心者でも分かりやすく説明
  • 2分程で読み終わるボリューム

 

 

こんなツイートをしました。

 

 

ってなわけで思いついたらすぐ行動したいレオです。そんなボクの自己紹介させて下さい。

 

  • レオ
  • プログラミング超初心者
  • ブログも初心者

 

ブログは2か月目なんですが色々書いているうちに「このボックスを変えたいな、色もココは青にして文字は黒くしたい」こんなことを思うようになりました。

 

もしかしたらこの記事を見てくださっている皆さんはもう色々自分のブログをカスタムしているかもしれませんね。

 

本記事ではプログラミングを通してブログをカスタマイズできるようになるのを一番の目標として書いていくことにします。

 

プログラミング初心者がネットや教材で学んだことをブログで実践します|第一回HTML編

プログラミング初心者がネットや教材で学んだことをブログで実践します|第一回HTML編

 

  • h1タグとpタグの使い方
  • imgタグで画像を表示してみる

 

参考書も購入しました。

 

参考までに気になる方はどうぞ。

 

教材で学んだこと

  • 始めに基本となるHTMLについて学んでいく
  • WordPressのテキストエディターで実践します

 

まず初めにhtmlという言語について学んでいきます。

 

とりあえず画面を扱っていくところまでいきます。

 

動画では色々ツールを使ってますがとりあえずこのまま進めていきました。

 

というのもWordPressには「テキストエディタ」がありここにhtmlを入力すると良いのではないかと思っています。

 

  • プログラミングの基礎を学ぶ
  • HTMLは基礎中の基礎
  • WordPressのテキストエディターで出来るとこまでやってみる

 

h1タグとpタグの使い方

  • h1タグとはタイトルに使用するタグ
  • pタグとは段落を表すタグ

 

今回は見出しと文章の区別の仕方です。そのためにタグを使います。

 

一番重要な見出しはh1というタグを使います。

 

タグは不等号記号(<>←これ)を使うのですが例えば<h1>文章</h2>のように初めは<h1>で、それから間に文章を入れ閉じるときは</h1>スラッシュ(/←これ)を使います。

 

試しにテキストエディタに切り替え<h1>プログラミング</h1>と入力してみます。

 

プログラミング

 

どうです?出来ましたか?表示されない場合はテキストエディタに正確に入力されてないからだと思いますのでもう一度確認してみてください。

 

次に段落を表す<p>タグを使います。ここでも初めは<p>で間に文章を入れ閉じるときに</p>で閉じます。

 

試しにさっきのテキストエディタの<h1>プログラミング</h1>の下に<p>練習中</p>と入力してみてください。

 

プログラミング

練習中

 

うまくいきましたか?<>で始まるタグを開始タグ・</>で閉じるのを終了タグ・そしてテキストをタグで意味付けしていくことをマークアップすると言うので覚えておきましょう。

 

これをすることでブラウザがそれぞれの意味を解釈してそれっぽいスタイルを与えてくれます。

 

例えばタグを打ち間違えたとします。実際にやってみましょう。

 

<h1>プログラミング</h1>

<p>練習中</p>

 

先ほどはテキストエディタにこう入力しましたよね。これを

 

<h1>プログラミング/h1>

<p>練習中</p>

 

とテキストエディタに入力してみると

プログラミング/h1>

練習中

 

こんな感じになりどこがおかしかったのか大体わかりますのでおかしい場所はすぐに直しましょう。

 

  • <>で始まり、</>でタグを閉じる
  • 打ち間違えるとすぐに分かる

 

imgタグで画像を表示してみる

  • imgタグとは画像を表示させるタグ
  • タグを直接テキストに入力して画像を表示させてみる

 

今回はimgタグを使って画像を表示してみましょう。

 

WordPressでのやり方なのでもっと簡単にできるんですがここはあえてimgタグを使ってやっていきましょう。

 

イメージ画像を設置するHTMLタグ

  • img src="画像のURL"
  • alt="代替えテキスト"
  • width="横サイズ"
  • height="縦サイズ"

 

こうなります。さあそれでは貼り付けたい画像のURLを調べましょう。

 

メディアのライブラリーからアップロードされた画像をクリックしてリンクのURLをコピーします。そしてimg src=の後に貼り付けます。

 

<img src="https://reorinpoon.com/wp-content/uploads/2020/02/IMG_0127-scaled.jpg" alt="reo" width="120" height="120" />

 

このようにしてテキストエディタに入力すると

 

reo

 

どうです?うまく画像が貼り付けれましたか?ちなみに画像は我が家の猫リンです。

 

これができるようになるとサイドバー等に設置することもできますのでおぼえておいて損はないですよね。

 

今回はここまでとします。

 

  • まずは張りたい画像のURLを調べる
  • img src=の後に張りたい画像のURLを張り付ければOK

 

プログラミング初心者が学んだことをブログで実践します|第一回HTML編:まとめ

プログラミング初心者が学んだことをブログで実践します|第一回HTML編:まとめ

 

    • 一番重要な見出しはh1というタグを使う
    • タグは不等号記号(<>←これ)
    • 初めは<h1>で、それから間に文章を入れ閉じるときは</h1>スラッシュ(/←これ)を使う
    • 段落を表すのは<p>タグ・閉じるときも/を使う
    • 画像を表示させるのはimgタグ
    • img src="画像のURL"
    • alt="代替えテキスト"
    • width="横サイズ"
    • height="縦サイズ

 

以上となります。次回またよろしくお願いします。

-建設業

© 2020 reoblog Powered by AFFINGER5