



WithCodeMedia-1-pc
WithCodeMedia-2-pc
WithCodeMedia-3-pc
WithCodeMedia-4-pc




WithCodeMedia-1-sp
WithCodeMedia-2-sp
WithCodeMedia-3-sp
WithCodeMedia-4-sp
ペン博士!最近プログラミングに興味があるのですが、そもそも「HTML」って何なのかよくわかりません。
HTMLはWebページの骨組みを作る基本中の基本の言語じゃ!
今から詳しく解説するからよーく聞くんじゃぞ!
はい!お願いします!
「学習→収入」につなげた受講生のリアルな体験談も公開中!
働き方を変えたい方にも響くストーリーです。
吉池さん
これまでに、IT業界で主にインフラ関連の業務をしていましたが、Web制作・開発に興味を持ったことがきっかけで、WithCodeの受講を決意し、4ヶ月間の学習を開始。卒業後にWithCodeからの実案件を経験したほか、自身でも案件を獲得します。転職活動では、30代という年齢がネックだったものの、見事受託開発の会社への転職の成功を果たしました。
詳しくはこちらの記事をご覧ください。
吉池さんの主な制作実績はこちら
HTML(Hyper Text Markup Language)は、Webページを作成するために作られたマークアップ言語です。マークアップ言語とは、Webページ内のテキスト情報の構成や役割をコンピュータに構造的に理解させるものです。HTMLはWebブラウザに対して、Webページの構造や表示方法を指示するために使用されます。今現在Web上で公開されているほとんどのWebサイトでHTMLが使用されています。
HTMLはWebページの構造を定義する役割を持っています。具体的には、見出し、段落、リンク、画像などの要素を配置し、それらの要素を表示するようにブラウザに指示をします。
また、文章の意味や構造をコンピュータに伝えるための役割も果たし、検索エンジンなどがWebページの中身や関連性を理解しやすくなるのでプログラミング学習には必要不可欠です。
HTMLは他の技術と組み合わせてWebページを構築するための基礎となる言語で、CSS(Cascading Style Sheets)やJavaScriptと組み合わせて使用することで、より洗練されたデザインや動的な機能を実現できるぞ!
HTMLとCSSは、Webページの作成において役割が異なります。簡単に言うとHTMLは文章の構造を作るものです。Webページの構造やコンテンツを定義するための言語であり、タグを使用して要素やコンテンツの役割を指定します。
一方、CSSはWebページのスタイルやデザインを指示するための言語です。CSSはHTMLに対してスタイルのルールやデザインの指示を行い、要素のレイアウトや色、フォントを指定できます。
HTMLとCSSは互いに連携し合い、Webページの構造とデザインを分離して管理することで、より柔軟で効率的なWebページの作成が可能じゃ!
ここでは、タグについて詳しく解説するぞ!
HTMLでは、要素やコンテンツを示すためにタグという印を使用します。タグとは簡単に説明すると文字に役割を与えてくれる存在であり、タグによってコンピュータはテキスト情報を表示する形を認識できる非常に重要な部分です。タグは<要素名>の形式で記述され、開始タグと終了タグのペアで表示されます。開始タグは要素の始まりを、終了タグは要素の終わりを示します。
またタグにはさまざまな種類があり、それぞれの役割や構造を表現するために使用され、タグはネスト(入れ子)することもでき、複数の要素を包含することができるので覚えておきましょう。
HTMLでは、さまざまなタグを使って要素を表現します。ここでは、いくつかの基本的なタグの書き方について説明します。
まず、HTMLの書き始めは<html>タグから始めます。この<html>タグで、HTMLの文書であることを宣言します。<head>タグ内にはページのタイトルやメタ情報などを記述します。<body>タグ内には実際のコンテンツを記述します。
例えば、以下のようなHTMLタグを使って「WithCode」と表示するページを作成することができます。
<!DOCTYPE html>
<html>
<head>
<title>WithCode</title>
</head>
<body>
<h1>WithCode</h1>
</body>
</html>
上記のコードでは、<h1>タグを使って「WithCode」という見出しを作成しています。このタグは大見出しを表すタグであり、ページの題名などに使用されます。その他にも、<p>タグを使うことで段落を表現したり、<img>タグを使うことで画像を表示したりすることができます。
またHTMLでは、様々なタグを使用してWebページの構造やコンテンツを表現します。ここでは、HTMLでよく使われる重要なタグについて説明します。
よく使用される主なタグの一覧になります。
またタグを使用する際は、いくつかのルールがあります。
タグは<タグ名>と</タグ名>で囲む形式で使用します。</タグ名>が終了を意味します。
タグには属性を付けることができ、属性は属性名=”値”の形式で指定します。
<a href="https://example.com">
例外的に一部のタグには終了タグが不要な場合があります。例えば、<br>タグは改行を表現し、終了タグの必要がありません。
以下に、タグの使用例とそれに対応するサンプルコードを示します。
例えば「WithCode」というテキストを段落として表示したい場合、<p>タグを使用します。
<p>WithCode</p>
また、例えば、リンクを作成する場合には<a>タグを使用します。以下はGoogleのホームページへのリンクのコード例です。
<a href="https://www.google.com">Google</a>
上記のコードは、「Google」というテキストがリンクになり、クリックすると「https://www.google.com」に遷移します。
続いて、HTMLでホームページを作成する手順を解説するぞ!
ホームページを作成するには、まず基本的なツールを準備する必要があります。主に必要なのは 「テキストエディタ」と「Webブラウザ」 の2つです。
テキストエディタ
Webブラウザ
この2つのツールを用意することで、HTMLを使ったホームページ作成の準備が完了です。
ツールが用意できたら、次にHTMLを書き始めましょう。
1. テキストエディタを開く
HTMLコードを入力するためのエディタを立ち上げます。
2. HTMLの基本構造を理解する
HTMLは以下のような構成で書きます:
<!DOCTYPE html>
<html>
<head>
<!-- ヘッダー情報(タイトルなど) -->
</head>
<body>
<!-- ページに表示される内容 -->
</body>
</html>
3. 必要なタグを記述する
目的に応じてタグを使い分けましょう:
<h1>〜<h6>
:見出し(数字が小さいほど大きな見出し)<p>
:段落(文章を区切る)4. ファイルを保存する
ファイル名の末尾に .html
を付けて保存(例:index.html
)
5. ブラウザで開く
保存したHTMLファイルをWebブラウザで開くと、書いた内容が表示されます。
6. 見た目や動作を確認・修正
表示結果を見ながらコードを調整して、理想のページに近づけていきましょう。
以上が、HTMLでホームページを作成する手順です。テキストエディタにHTMLを書いて、Webブラウザで表示するという作業を繰り返すことで、ご自身だけのオリジナルなホームページを作成することができます。
ペン博士、HTMLって難しそうに感じてたけど、タグの意味や使い方がわかるとちょっと楽しくなってきました!
うむ、それで良いのじゃ。HTMLはWeb制作の土台。しっかりとした基礎が、後々CSSやJavaScriptを学ぶ時にも大きな力になるぞい。
今日学んだことを忘れないうちに、実際に簡単なWebページを作ってみます!ありがとうございました!
今回は、HTMLの基礎知識から活用方法まで解説しました。冒頭でも触れましたが、HTMLは、数多くのWebサイトで使われており、Webサイトの制作に必須なスキルです。
また、HTMLはタグでテキストを囲むだけで簡単にコーディングができることから、習得難易度も低く、初心者の方でも習得しやすいです。
WithCodeでは、Web制作を中心に「稼げる人材」へのサポートを強みとしています。相談しながら学習する言語を決めたい、挫折せずに学習したい、最短で結果を出したいという方はぜひお気軽にお問い合わせフォームより無料相談をお申込みください。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか?
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください!
公式サイト より
今すぐ
無料カウンセリング
を予約!