初心者による初心者のためのHTML講座

プログラミング
HTML初心者講座

こんにちはっ!しおりです(`・ω・´)ゞ

プログラミングの勉強を始めたばかりの

めちゃくちゃ初心者ですっ!!


既にプログラミングを熟知した方には当たり前のことでも

初心者は右も左もわからない状態なので、

まったくの初心者が一歩一歩、

進んでいく過程を公開すればわかりやすいんじゃないかな

と、思い

同じようにプログラミングを始めたい!

と、思っている初心者の方の役に立てたらいいなあ

ということでわたしが学んだことをノート替わりに

ブログに起こしていこうと思います(。・ω・)ノ

プログラミング第1回目は、HTML\(^o^)/

初歩中の初歩ですね!

これができればこの先の余裕でっせ(`・ω・´)ゞ

スポンサーリンク

*HTMLの役割・書き方

HTMLは

HTML初心者講座""

『こういう風に表示して!』と、指示するものになります!

テキストに『タグ』と呼ばれる印をつけていきます!

『タグ』で囲むことでテキストに意味を持たせれるのです。

<?>←タグ

開始タグ<h1>ようこそShiori*Blogへ♡</h1>終了タグ

テキストを囲むときは、“開始タグ”“終了タグ”があります!

終了タグには、“/(スラッシュ)”が必要になります!

HTML初心者講座

わたし、個人の話ですが『なんか変だなー』

って思うときは、このスラッシュのつけ忘れが多いですw


では!!実際にワードプレスで今の例を実践していきます\( ‘ω’)/

HTML初心者講座

ようこそShiori*Blogへ♡


先ほど入力した<h1>などのHTMLが見事に消えて見出しの出来上がりです(`・ω・´)ゞ

*見出しと段落

見出しの要素は、<h>

hは、heading(へディング)見出しという意味の略なのです!

<h1> <h2> <h3> <h4> <h5> <h6>

この6つで見出しの作成ができます。

<h1>が一番大きな見出しで、<h6>が一番小さな見出し!

HTML初心者講座

初心者なので、このHTMLメモを見ながら必死にやっています(;^ω^)



段落を表す要素は、<p>

<p>は、paragraph(パラグラフ)段落という意味の略なのです!

<h1>や<p>で囲んだテキストは改行されます。

わたしの趣味は名探偵コナンです

ミステリーが好きだからです


Enterを押さなくても<p>で囲むと改行してくれます♪


<h1>~<h6>の要素は、見出しの重要性に応じて使い分けます!
見出し以外は、<p>要素を使いましょう☆

HTML初心者講座


*コメント

<!– –>

で、囲んだテキストを“コメント”と呼びます。

HTML初心者講座

コメントとして書かれたテキストはブラウザに表示されないのです!!

なので、メモとして活用出来ちゃうんです(`・ω・´)ゞ

“-“とテキストの間に半角スペースを空ける

わたしの趣味は名探偵コナンです


じゃーーーん\(^o^)/

見事に表示されない!!!


(`・∀・´)エッヘン!!

*リンク・飛び先指定

リンクを作成するには、<a>(アンカー)リンク先へという意味です!

テキストを<a>で囲むことで簡単にリンクが作成できるのです!

HTML初心者講座
Twitter

<a>で囲むとこんな風にリンクが表示されます(`・ω・´)ゞ

ですが、これではまだリンク先がないので飛べません!

なので、<a>の要素にリンク先を追加します!

リンク先を追加するには、

href(エイチレフ)属性コードの中に追加します!

この属性というものは、要素の細かい指示の設定のようなものと覚えておけばOKです!

(例)リンク(<a>)でここに飛ばして!(<href>)

というようなことです(`・ω・´)ゞ

属性は、たくさんあるけど仕組みわかっていれば大丈夫です◎



hrefはリンク先指定の属性です!

HTML初心者講座

実際にブラウザ上に表示されるのは、このリンク!

Twitter
HTML初心者講座



※値を指定するときにダブルクォーテーション(“)を付ける!


いきなり、(”)とか(=)が出てきてややこしやー

って感じですが、属性と値の追加をするときに使う!

と、覚えておけばOKです◎

*画像の表示

画像の表示には、<img>(イメージ)要素を使います!

<img src=“URL”>

このようにsrc(ソース)属性の部分に画像のリンクを指定することで画像が表示されます!

※<img>要素は、テキストを囲まないので終了タグはいりません。

srcは、画像のあるURLの属性です!

HTML初心者講座

よくわからないアルファベットの羅列が見事に一枚の画像になりました(*’v`)b

ここで、わたしが苦戦したのが

自分のデータフォルダの画像のURLの取得です(´・ω・`)

ネット上に転がっている画像は、右クリックすると

“画像のアドレスコピー”

と、でてくるのですが、

データフォルダに入っているオリジナルの画像では、URLがでません。

これでは、HTMLで貼り付けることができないのでURLの取得をしますっ(`・ω・´)ゞ

*URL取得方法

①Googleの検索画面にを開く

②左上にあるアプリをクリックするとこの画面がでます!

③Googleドライブをクリックするとマイドライブがでてきます!

④左上の新規をクリックして
その他のGoogleサイトをクリック

⑤画像をクリック

⑥画像をアップロードして、公開をクリック

⑦WebのURLを入力。今回は、ただURLを取得したいだけなので
適当なものでOKです◎

⑧公開をクリックすると公開されるので、
下に出てくる表示をクリック

⑨画像を右クリックすると
画像のアドレス(ULR)の取得ができます!

最初は、URL出ないじゃん!!

って結構パニックでしたがこれで2回目からは困りません(;^ω^)

*リストの作成

好きなアニメ

  • 名探偵コナン
  • 金田一少年の事件簿
  • 探偵学園Q

このようなリストを作るには、

<li>(リスト)の要素を使います! <li>は、list itemの略です!

箇条書きにしたいテキストをそれぞれ<li>で囲むことでリストを作れます!

<li>名探偵コナン</li>
<li>金田一少年の事件簿</li>
<li>探偵学園Q</li>


<li>要素は、囲む要素によって種類が変わります!

<ul> unordered list (アンオーダードリスト)の略
黒点でのリストが作成できます!

HTML初心者講座
  • 名探偵コナン
  • 金田一少年の事件簿
  • 探偵学園Q

<ol> ordered list(オーダードリスト)の略
数字でのリストが作成できます!

HTML初心者講座
  1. 名探偵コナン
  2. 金田一少年の事件簿
  3. 探偵学園Q


要素を要素で囲むことを“入れ子”といいます!

囲む方を“親要素”、囲まれる方を“子要素”といいます。

<ul>←親要素
 <li>名探偵コナン</li>←子要素
 <li>金田一少年の事件簿</li>←子要素
 <li>探偵学園Q</li>←子要素
</ul>←親要素

*インデント

入れ子の構造がある場合には、インデント(文字下げ)をするのがおすすめです☆

・インデントしていない場合

HTML初心者講座
  • 名探偵コナン
  • 金田一少年の事件簿
  • 探偵学園Q

・インデントした場合

HTML初心者講座
  • 名探偵コナン
  • 金田一少年の事件簿
  • 探偵学園Q

<ul>←ここで改行
 <li>名探偵コナン</li>
 <li>金田一少年の事件簿</li>
 <li>探偵学園Q</li>
↑スペースもしくはTabキーで揃える
</ul>

インデントしてもしなくても表示される内容に変わりはないので

インデントはしなくてもOKです!

ただ、インデントした方が親子関係が分かりやすくて綺麗っていうことです(。・ω・)ノ

*最後に

初めて学ぶHTMLを実践するためにこのブログに起こしてみました!

練習ソフトでやるのと、実践では全然違って

間違いや、知らなかったことたくさんありました(;^ω^)

ノートを見直しながら調べながらここまでたどり着きました\(^o^)/

少しでも参考になったら嬉しいです!!

コメント

タイトルとURLをコピーしました