Webサイト

HTMLの基本知識

はじめに

当面は、ウェブサイト制作の副業にて収入を得ることを目標とするため、まずHTMLについて学習を行っていきます。
本記事では、学習した内容をまとめていきます。

学習に使用したもの

今回、学習で使用するのはProgateというプログラミング学習サイトになります。
Pragateは一部有料ですが、基本的には無料です。
HTML・CSSの学習は無料で全コースの受講が可能となっています。

学習内容

タグ

HTMLでは、テキストを「タグ」というもので囲っていきます。
こうすることで、テキストが「見出し」や「リンク」といった意味を持つようになります。

以下のように開始タグと終了タグで挟みます。
このとき、終了タグには「/」が必要となるので、注意してください。

<h1>プログラマーの副業日記へようこそ！</h1>
<p>今回はHTMLとCSSについて学習します</p>

プログラマーの副業日記へようこそ！

今回はHTMLとCSSについて学習します

以下に、タグでよく使用するものを数種類記載します。

h1,h2,h3,...,h6

見出しを表すタグ。
heading(見出し)の略。
h1が一番大きく、h6が一番小さな見出しとなる。

p

段落を表すタグ。
paragraph(段落)の略。

div

それ自体に特に意味を持たないが、グループをまとめるタグ。
division(区分)の略。

a

リンク先を指定したり、外部ファイルを表示させるときに使用されるタグ。
anchorの略。

img

画像を読み込むタグ。
image(画像)の略。

table

表を作成する際に使用されるタグ。

コメント

コメントを記載するにはテキストを<!-- -->で囲みます。
コメントはブラウザには表示されないので、メモとして使用します。

<h1>コメントについて</h1>
<!--これはコメントなので、ブラウザでは見えません-->
<p>コメントはメモとして使用します</p>

コメントについて

コメントはメモとして使用します

リンクを作成する

リンクを作成するにはaタグを使用します。
リンクの飛び先を指定するには、href属性を追加する必要があります。
<a herf="url">のように記載し、url部分にリンク先に指定したいURLを指定すれば、指定のページに飛びます。

HTMLでは、hrefのような属性が数多くあります。
値を指定する際には、ダブルクォーテーション(")で囲むことを忘れないようにしましょう。

<a herf="https://programmer-record.com">
プログラマーの副業日記
</a>
プログラマーの副業日記

画像を表示する

画像の表示には、imgタグを使用します。
<img src="url">のように、src属性のurl部分に画像のリンクを指定することで、画像が表示されます。
<img>要素はテキストを囲まないので、終了タグは必要ありません。

<img src="https://programmer-record.com/wp-content/uploads/2021/03/1633133_m.jpg">

リストを作成する

リストを作成するには、liタグを使用します。
箇条書きにしたいテキストをliタグで囲むことで、リストを作成できます。
また、liタグはそのliタグを囲むタグによって見た目が変わるという特徴があります。
ulタグで囲むと、黒点が先頭につき、
olタグで囲むと、数字が連番でつくといった具合です。
このとき、囲む要素を親要素、囲まれる要素を子要素と呼びます。
親要素と子要素の判別をつきやすくするためにインデント(字下げ)を行うほうが良いです。

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>WebSite</li>
</ul>

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>WebSite</li>
</ol>
  • HTML
  • CSS
  • WebSite
  1. HTML
  2. CSS
  3. WebSite

まとめ

今回はHTMLについて学習をしました。
HTMLはウェブサイト制作を行う上で、必須と言ってもいい知識です。
ただ、一気に覚えるのはなかなか難しいので、基本だけ抑えて、あとは実践を通して覚えていけばいいかと思います。

-Webサイト