第34回【ラクラク副業塾】をはじめます。(*´▽`*)

 

今回はブログを構成する1つの言語として「HTML」の基本に触れたいと思います!(´゚∀゚`)

 

「うっ!!そう言うのは苦手だ!(−_−;)」と言う方も、お話程度には聞いておいて下さい。

いずれ役に立つ日が来ますので!!ヽ(´▽`)/

 

 

ワードプレスは「HTML」と「PHP」などの言語を利用して構成されています。

今回はそのHTMLの入門編を少しだけ触れてみましょう!!(⌒▽⌒)

 

まずは、下の図はおなじみの「Google」のトップページです。(o゚∀゚o)

人間の視覚としては下の図のように見えますが、実は色々な情報で構成されています。

 

 

どんなホームページ上でも構いませんが、右クリックをすると、下図のようなメニューが出ます。

WindowsでもMacでも!

 

「ページのソースを表示」を選んでみましょう!!(o゚3゚b)b

 

 

ずらりと並ぶ意味不明の文字列!!(⌒-⌒; )

何が何やら??!!と言う感じですが、先ほどのGoogleのトップページの情報とは、こんな形で構成されています。

 

これがいわゆる「HTML」と言う言語で構成されものです。

 

 

実はワードプレスも、PHPと呼ばれるプログラム言語を利用しならがら、この「HTML」をP動かしています!

 

【HTML】とはプログラミング言語のことではなく、webページを作るために必要な【マークアップ言語】と呼ばれるものです。( ノ゚∀゚)ノ

 

この【HTML】を動的に表示させるために、【PHP】と呼ばれるプログラム言語を利用しています。

 

【PHP】は「インタプリタ言語」の一種で、データ処理は早くありませんが、開発や修正が素早くでき、機能が豊富に提供されているので、数多くのwebサイトで使われています。(o゚∀゚o)

 

※アセンブラ・コンパイラ・インタプリタ言語について

 

今皆さんの勉強中のこの【ワードプレス】は、人間の言葉の方に近い「インタプリタ言語」の【PHP】を利用して作られています。(⌒▽⌒)

 

難しいコンピュータ言語の話はこれくらいにしておいて、実際にワードプレスで利用する「ソース」を見てみましょう!!(σ゚∀゚)σ

 

 

実際の記事投稿画面の右上にある「テキスト」をクリックしましょう!(´゚∀゚`)

 

 

実際はこのような「HTML」で画面は構成されています。

この「HTML」で作られたものを動かしているのが「PHP」です。

 

お好きな方は、「HTML」や「PHP」を詳しく勉強頂ければ、ブログやサイト作成が非常に楽しくなります!

 

もちろん、サイト作成ができると、それだけでも「お金儲け」になります!ヽ(*゚∀゚*)ノ

 

 

今回はとりあえず、「HTML」の「タグ」と呼ばれる命令を行う文字の中でも、重要なものを紹介します!

 

覚えておくと便利です!(d゚ω゚d)

 

 

代表的でよく使う「タグ」一覧

 

<title>
ブラウザのタブ内表記や、ブックマークされた際に表示されるサイトのタイトルを入力します。

 

<meta>
サイトのメタ情報を設定するタグです。

文字コードを指定したり、検索エンジン用のキーワードを入れたりすることが可能です。

 

<link>
指定した文書を参照するためのタグです。

外部スタイルシートを適用する場合などは、このタグを使用します。

 

<body>
コンテンツの「中身」を書く部分になります。

 

<header>
ヘッダー部分に使用するタグです。

主に「サイトのタイトル」や「メインの説明文」「ナビゲーション」などが入ります。

 

<footer>
フッター部分に使用するタグです。

「サイトに関する情報」「著作権に関する注記」「連絡先」などが入ります。

 

<p>
段落を作成する際に使うタグです。

例えば、2つの<p>~</p>によって2つの段落に分けることができます。

 

<h1~h6>
見出し作成の際に使用するタグです。

<h1>が一番大きな文字で、サイトのメインとなる見出しに使用されます。

<h2> → <h6>になるにつれて、文字の小さな見出しになります。

 

<img>
画像を貼り付ける際に使用するタグです。
配置や大きさの設定は「CSS」で操作することが可能です。

 

<a>
他のページへのリンクを貼ったり、指定したメールアドレスへの送信を行う際に使用します。

中でもよく使うのが「<a href=”http://〇〇/”>リンク</a>」と言う「リンク用」のタグです!

 

<ol>・<ul>・<li>
リストを作成するタグです。

 

<table>
表の開始を示すタグです。

 

<tr>
table rowの略で、テーブルの行に使用します。

このタグを使用した分だけ、「行」が追加されます。

 

<form>
フォームの作成に使用しますが、データの受け取り自体は【PHP】で行います。

 

<select>
セレクトボックスを作成できます。

セレクトボックスはプルダウン式で選択肢を表示で居ます。

 

<!–more–>
私もよく利用しますが、「続きを読む!」と言うタグです。

 

 

その他にも「タグ」は非常に多く存在しますが、よく使うものは重要なものを憶えておくだけで、「HTML」を改造することが容易になります!!(⌒▽⌒)

 

私のブログの右サイドバーにも、いくつかバナーが存在していますが、オリジナルで作成したものものあります。

これらも「HTML」を利用すると、色々なものを作成できます!

 

参考に!!「HTHL タグ一覧」

↓↓↓

HTMLタグ一覧

 

他のサイトなどのソースも一度ゆっくりと見ながら、タグの意味を理解するとさらにブログやサイト作成は楽しくなります!!(⌒▽⌒)

 

今回は以上です、お疲れ様でした。(*´▽`*)

 

 

次回は9/12(水)前後に配信予定です。

※配信は予定日なので、2~3日の前後はあります。

 

 




 

 

LINE@登録で、オイシイ情報をイチ早くお届け!

「仮想通貨」は情報の信頼性とスピードが命です!

オイシイ情報をいち早くお届けします!【裏情報】等も!

「登録方法」など分からない!と言う質問にも親身になってお答えします。

友達登録お願いします!(*^▽^*)

友だち追加

LINE ID : @gzf4827c

(ジー・ゼット・エフ・ヨン・ハチ・ニ・ナナ・シー)

 

【アフィリエイト塾 塾生募集中!!】

アフィリエイトで稼ぎたい方は、ご応募下さい!

無料で塾を行っています!!