logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll

HTML の第一歩 — 結び

04/12/2019, by Ivan

ここで HTML チュートリアルを終わりにしようと思いますが、思いついたら HTML のレッスンを引き続き投稿していきます。チュートリアルがとても短く感じたかもしれませんが、タイトルは「第一歩」です。すべてのタグを説明する必要はないと思います。それは後で HTML リファレンスで行います。

学習を続けることを考えているなら、CSS の学習を続けることをお勧めします。これは HTML の一部で、HTML 要素を装飾してすべてを美しく見せることができます。

こちらが私の CSS チュートリアルへのリンクです。

HTML の第一歩 — レッスン 9 — メニューの作成

04/12/2019, by Ivan

サイトの主要な要素はメニュー(ナビゲーション)です。これを通じてサイトのページ間を移動します。また、メニューは検索エンジンによるサイトのインデックス作成にとっても重要です。ページ間のつながりがなければ、検索エンジンはすべてのページを巡回できません。メニューが何で構成されているか見てみましょう。

メニューには通常、番号なしリスト(ul、li タグ)を使用します。このように、各メニュー項目はリストの要素です。

...
<ul>
  <li></li>
  <li></li>
<ul>
...

li タグの中には通常、ページへのリンクを挿入します。

HTML の第一歩 — レッスン 8 — タグのユニバーサル属性

04/12/2019, by Ivan

さまざまなタグにはそれぞれ独自の属性があることはすでに話しました。今度は、さまざまなタグにすべてに共通の属性もあることについて話しましょう。その中でも最も人気のあるものを見ていきましょう。

id 属性

id 属性はタグの一意の名前を示します。このような名前は繰り返してはいけません。jQuery や JavaScript を扱うときに問題を引き起こす可能性があるからです。id タグの使用例をいくつか挙げます。

HTML の第一歩 — レッスン 7 — object タグ。YouTube 動画の挿入。

04/12/2019, by Ivan

自分のブログに YouTube の動画を挿入する必要がよくあります。このレッスンでは、どのタグとその属性が使用されるかを見ていきます。まずは YouTube にアクセスして動画のコードをコピーしましょう。

 

 

Youtube video

次のようなコードが得られました。

HTML の第一歩 — レッスン 6 — 画像

04/12/2019, by Ivan

サイト上の画像は非常に重要な要素です。画像がないとサイトは味気なく美しくありません。画像はサイトの装飾、フォトギャラリー、そして単なる絵として使われます。

画像は IMG タグを使って挿入します(image と完全には書かず、img とだけ書くことに注意してください)。IMG タグは単一タグ <img /> で、ペアタグはありません。

IMG タグの主要な属性は src 属性です。これはリンクの href のように機能し、src 属性に画像へのパスを挿入します。パスはリンクと同様に、相対パスまたは絶対パスで書けます。


これは私たちの index.html のコードです。

HTML の第一歩 — レッスン 5 — テーブル

04/12/2019, by Ivan

情報を保存する重要な形式の 1 つがテーブルです。Excel、Access、その他のデータベースはテーブルで情報を保存します。テーブルは非常にわかりやすくデータを表現し、これらのデータからグラフや図を作るのに便利です。
このレッスンでは、HTML でテーブルを作成する方法を見ていきましょう。このために、<table><tr><td><th><thead><tbody><tfoot> タグを使用します。

table タグ

TABLE はテーブルの主要なタグで、その中に他のテーブルタグが入ります。

<table>
</table>

他のすべてのタグはこのタグの中に書きます。

HTML の第一歩 — レッスン 4 — リンク(ハイパーリンク)

04/12/2019, by Ivan

HTML の最も基本的な部分、HTML が作られた目的そのもの、つまりハイパーリンク(あるいは単にリンク)にたどり着きました。リンクはさまざまな資料の間の関連を組織する方法です。10 万個のテキストファイルがあるとして、それらに分類目録を作るとしても、各目録に 200 のテキストドキュメントの説明があるとしても、500 の分類が必要になります。この 500 の分類をすべて見て必要な情報を見つけるには、多くの時間が必要です。では、リンクはどうやって私たちの生活を楽にしてくれるのでしょう?

リンクは 2 つの HTML ドキュメントを任意の形で結びつけます。各 HTML ドキュメントには名前があり、しかも一意の名前です。このようにして、1 つのドキュメントから他の 10 個の似た人気のドキュメントに移動でき、必要な情報を見つける成功のチャンスが増えます。

HTML の第一歩 — レッスン 3 — リストタグ ul、ol。HTML タグの属性。

04/12/2019, by Ivan

サイトではリストが非常によく使われます。メニューで、テキストで何かを列挙するために。最も人気のあるリストの種類、番号なしリスト <UL></UL>(unordered list — 番号なしリスト)から始めましょう。

UL リスト

UL リストはメニューや箇条書きリストに使われ、HTML を通じてマーカーの見た目を指定できます。

HTML コードを変更しましょう。

HTML の第一歩 — レッスン 2 — p、div タグとその違い。br タグ

04/12/2019, by Ivan

前のレッスンでは、最初の html ドキュメントを作成しました。つまり、html コードをテキストエディターで書き、すべての変更はブラウザでページを更新して(通常は F5 キーで)確認することがもうわかっています。

さて、このレッスンでは引き続きテキストを扱い、テキストを包むためのタグ span、p、div を使用します。また、br タグも見ていきます。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>

  </body>
</html>

これがこの先扱っていくコードです。