HTMLを学ぶ:ハイパーテキストマークアップ言語を学ぶためのガイド
独自のウェブサイトを構築することに興味がある場合でも、ウェブ開発者としてのキャリアを追求する場合でも、HTMLの知識を持つことは不可欠なスキルです。
ハイパーテキストマークアップ言語(HTML)は、インターネット上のほぼすべてのWebサイトを強化する3つのコアテクノロジーの1つです。 HTMLを使用すると、Webデザイナーと開発者はWebサイトの構造を定義できます。開発者はHTMLを使用して、テキストや画像などの特定の要素をWebページのどこに表示するかを決定します。
HTMLは、Web開発を学びたいと考えている技術者だけのものではありません。この言語は、他のさまざまな状況で使用できます。たとえば、多くのドラッグアンドドロップWebデザインプラットフォームでは、ページをより自由にカスタマイズしたい場合に、ユーザーがHTMLを使用できるようになっています。
このガイドでは、HTMLをオンラインで学習するための最良の方法について説明します。 HTMLの学習を開始するのに役立つ、次のステップの明確なセットを提供します。
HTMLとは何ですか?
HTMLは、Webサイトの構造を定義するために使用されるプログラミング言語です。これは、テキスト、画像、リンクなどのすべてがWebページに表示される方法です。
CSSのようなテクノロジーを使用すると、Webページのスタイルを設定できます。一方、HTMLは、ページがWebサイトにどのように表示されるかについての青写真の作成に重点を置いています。
HTMLは、タグを使用してWebサイトの構造を作成します。これらのタグを使用すると、Webページに表示されるヘッダー、ビデオ、画像、およびその他の要素を作成できます。発生する可能性のあるHTMLタグの例を次に示します。
-
を使用すると、テキストの段落を作成できます。
-
を使用すると、大きな見出しを作成できます。
ほとんどのタグには、開始タグ(「
」など)と終了タグ(「
」など)があります。これらのタグをマスターしたら、ウェブサイトの構造がどれほど複雑になるかについての制限はありません。参加者の81%は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。
平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。
なぜHTMLを学ぶ必要があるのですか?
HTMLとCSSはインターネットの構成要素です
HTMLとCSSは、Web開発で使用される2つの最も基本的なプログラミング言語です。それらがなければ、ウェブサイトはありません。
HTMLとCSSでコーディングする方法を知っていると、インターネットがどのように機能するかについて明確な洞察が得られます。毎日使用するウェブサイトがどのように構築されているかをよりよく理解できるようになります。
Webサイトで色付きのテキストを表示する方法や、WebサイトにYouTubeビデオを含める方法について疑問に思ったことはありませんか。 HTMLとCSSでコーディングする方法を知っているので、不思議に思う必要はありません。ウェブサイトの構築方法の基本的な部分をすべて理解できます。
HTMLとCSSは、既存の仕事をより良くするのに役立ちます
Web開発者になりたくない場合でも、HTMLとCSSを少し知っていると役立ちます。
たとえば、マーケティング担当者の場合、Webページがどのように構築されているかを知っていると、より効果的なマーケティングキャンペーンを設計できます。または、SEOの専門家であれば、ウェブサイトの構造を知っていると、戦略を改善するのに役立ちます。 HTMLとCSSは、Webでの作業を伴うあらゆる仕事を習得するための優れたスキルです。
あなたは顧客の成功に責任がありますか? HTMLの知識を使用して、顧客に送信するより効果的な電子メールを設計できます。それともあなたは販売に責任がありますか? HTMLを使用して、会社のWebサイトに配置できるカスタムフォームをデザインできます。
Web開発者は需要があります
構築するスキルを決定するとき、「これは私のキャリアに役立ちますか?」という質問があります。おそらくあなたの心に浮かび上がるでしょう。 HTMLとCSSを学ぶことは、Web開発者またはWebデザイナーとしてテクノロジーのキャリアに参入するのに役立ちます。
HTMLとCSSは、Webデザインと開発のすべての仕事に必要な2つの基本的なスキルです。その結果、これらのスキルは非常に需要があります。
Glassdoorのデータによると、米国には53,000を超えるWeb開発者の求人広告があります(2020年4月24日現在)。
さらに、米国労働統計局は、Web開発の仕事が2028年までに13%増加すると報告しています。労働統計局は、この成長を「平均よりはるかに速い」と説明しています。 Glassdoorからのデータと組み合わせると、このデータは明確な画像を描きます。Web開発者は高い需要があります。
HTMLは何に使用されますか?
つまり、HTMLコードは、Webページを構成するテキスト、画像、およびその他のメディアをフォーマットします。言語は、開始タグ(<>)内の一連の属性と要素、および山かっことスラッシュ(>)を使用する終了タグを使用してコンピューターと通信します。
HTMLは進化し、Webページでビデオやサウンドなどをホストできるようになりました。ただし、HTMLだけでは非常に機能的なWebページを作成できないことに注意することが重要です。プログラミング言語は、CSS(カスケードスタイルシート)およびJavaScriptで一般的に使用されます。これらの言語は、サイトのスタイルとインタラクティブ機能をそれぞれ定義します。
HTMLの学習にはどのくらい時間がかかりますか?
ほとんどの新しいプログラマーは、2〜3週間以内にHTMLの基本を学ぶことができます。しかし、言語に堪能になり、その可能性を最大限に理解するには、日常の練習が必要です。ほとんどのプログラマーは、1日約2〜4時間練習することをお勧めします。
HTMLには多くの機能があり、3週間以内にすべてをカバーすることはできなかったでしょう。ウェブサイトにテンプレートコンポーネントを提供することで言語を拡張するHTMLフレームワークもあります。
「プロの」Web開発者の仕事の準備が整うまでには少なくとも1年かかると予想する必要があります。しかし、あなたの学習は決して終わりません。 HTMLは今日でも更新されています。学ぶことができるタグと標準は何百もあります。
ほとんどの人は実践することで学ぶので、できるだけ早く新しいスキルを実践することが重要です。ナイキの信条に従い、「それを実行する」。ウェブページをフォーマットしたり、機能を試したり、プロジェクトに取り組んで能力を強化したりできます。
HTMLをすばやく学習する方法
HTMLでコーディングする方法をどのように学びますか?これは、すべての初心者がいつか直面する問題です。コーディングの方法をすでに知っている場合でも、どこから始めればよいかを知るのは難しい場合があります。
HTMLを効率的かつ効果的に学習するための旅を始めるために、従う必要のあるいくつかの手順を見ていきましょう。
ステップ1:基本から始める
HTMLの学習を開始するときにできる最善のことは、基本的なHTMLタグを習得することです。そして、準備ができたら、自信を持ってより複雑な技術的概念を追求することができます。右足で始めるのを助けるために、ここにあなたが焦点を合わせるべき主なトピックのリストがあります:
HTMLの構造とタグ
HTMLドキュメントについて最初に学ぶ必要があるのは、Webページの構造とWebページの作成方法です。これにより、Webページがどのようにまとめられるかが明確に示されます。これは、構築するすべてのWebサイトに必要な洞察です。
Webページの構造を学習したら、基本的なタグの調査に進むことができます。タグは、Webページに機能を追加するために使用されます。 HTML構造に関して学ぶべき主なトピックは次のとおりです。
- Webページはどのように構成されていますか?
- HTML見出し(
、
…
)
- タグ
とを使用したテキストの提示
- テキストのスタイリング
- 順序付きリストと順序なしリスト(
- および
- )
- 画像()
- ビデオ(
HTMLテーブル
多くの場合、Webサイトを設計するときに、データの表を表示したい場合があります。学校のウェブサイトを構築している場合は、学校のスケジュールをウェブサイトに表示することをお勧めします。このデータを表示するには、テーブルを使用する必要があります。
HTMLには、多くの最新のWebサイトに不可欠なカスタムテーブルの作成に使用できるタグが多数用意されています。学ぶべき主なトピックは次のとおりです。
- テーブルの作成
- テーブルの行と見出し
- テーブルデータ
- テーブルの境界線
- 列と行のスパン
- テーブルのヘッド、ボディ、フッター
HTMLフォーム
フォームは、サイトがユーザーから情報を収集できるようにする多くのWebサイトのもう1つの一般的な機能です。たとえば、ウェブサイトには、ユーザーがサイトにコメントを送信できる「お問い合わせ」フォームがある場合があります。
HTMLフォームには、ドロップダウンメニュー、1行のテキストボックス、大きなテキストボックス、チェックボックス、およびその他の種類のフォームフィールドを含めることができます。 HTMLフォームを学び始めるときに学ぶべき主なトピックは次のとおりです。
HTMLページへのスタイルの追加
これまで、HTMLを使用してWebページの構造を開発する方法について説明してきました。ただし、カスタムスタイルをWebページに追加する場合は、別のテクノロジであるカスケードスタイルシート(CSS)を使用する必要があります。
CSSを使用すると、WebページのHTML要素にスタイルを適用できます。これらのスタイルは、これらの要素がユーザーのWebブラウザでどのように表示されるかを決定します。たとえば、CSSを使用してテキスト行の色を変更したり、テーブルに境界線を適用したりできます。
学ぶべき主なトピックのいくつかを次に示します。
- CSSとは何ですか?
- インラインCSS
- 内部CSSと外部CSS
- CSSスタイルルールの書き方
次に、これらのトピックを学習したら、表のスタイル設定方法や見出しのスタイル設定方法など、要素固有のCSSスタイルを調べることができます。
HTMLを無料で学ぶための最良の方法
このガイドでは、HTMLでコーディングするために知っておく必要のある基本的なトピックについて説明しました。しかし今、あなたは「これらのトピックについてどこで学ぶことができるのか」と疑問に思うでしょう。
誰もが独自の学習スタイルを持っています。コーディングの方法を学び始めるときに、サポートを探すために行くべき場所は1つではありません。
ただし、ほとんどの人にとって、インタラクティブなコースまたはチュートリアルはHTMLを学習するための良いオプションです。これは、これらのコースとチュートリアルで、HTMLでのプログラミングを没入型で見ることができるためです。理論だけでなく、実際に自分のスキルを実践することもできます。たとえば、チュートリアルを最後に行うと、他の人に見せびらかすことができる具体的なプロジェクトができあがります。
オンラインHTMLコース
CodecademyでHTMLを学ぶ
- 費用:無料
- 対象者:初心者
コースの開始以来、380万人を超える人々がCodecademyのLearnHTMLコースに登録しています。このコースでは、HTMLで最も一般的に使用されるタグと、それらを使用してWebサイトを構築する方法について学習します。
ミシガン大学によるHTML5の紹介
- 費用:無料
- 対象者:初心者
このコースは、Webページを作成するために必要な基礎を教えることを目的としています。例を使って、ウェブサイトの仕組みの背後にある理論を探り、HTMLプログラミング言語の実践的な知識を習得します。
W3CによるHTML5コーディングの要点とベストプラクティス
- 費用:無料
- 対象者:中級
W3Cが提供するこのコースでは、HTML5のすべての基本を学びます。すべての新しいHTML5タグを学び、HTMLが最初のバージョンから現在のバージョンにどのように進化したかを確認します。アニメーション、フォーム、グラフィックについても学びます。
オンラインHTMLブック
HTMLとCSS:JonDuckettによるWebサイトの設計と構築
この本は、HTMLおよびCSS言語の完全な紹介です。 Webページを作成するために知っておく必要のあるすべてのことを学びます。この本は、HTMLタグがページにどのように表示されるかを理解するのに役立つ、テキストとグラフィックスに付随する詳細な例を提供します。
MarkMyersによるHTMLとCSSを学ぶためのよりスマートな方法
この本は、HTMLの基本を学ぶのに役立ちます。次に、読者は、知識を強化するために、さまざまなコーディング例と課題に従うことをお勧めします。この本を読み終えると、Webページの作成方法をしっかりと理解できるようになります。
アンディハリスによるダミーのためのHTML5とCSS3オールインワン
For Dummiesシリーズのこの本は、HTMLとCSSでWebサイトを作成することに焦点を当てています。他の本とは異なり、この本はJavaScript、PHP、MySQLにも触れているため、フルスタックWebアプリケーションを作成するために必要なスキルを学ぶことができます。
オンラインHTMLリソース
HTMLを学ぶ
Learn HTMLは、「HTMLとCSSを学ぶ最も簡単な方法」であると主張するWebサイトです。このサイトには、HTMLの学習に使用できる初心者向けチュートリアルと上級者向けチュートリアルの両方があります。便利なCSSチュートリアルもあります。
W3SchoolsHTMLチュートリアル
W3Schoolsは、Web開発チュートリアルで広く知られています。 HTML形式からセマティックまですべてをカバーする詳細で簡潔なガイドがあります。
CodecademyHTMLチートシート
このチートシートには、使用する可能性のあるすべての主要なHTMLタグの簡単な入門書が記載されています。このチートシートは、参照として、またはHTMLタグの知識を広げる方法として使用できます。
これらのリソースは、短いチュートリアルから完全なコースまで多岐にわたります。 HTMLでコーディングする方法を学ぶために習得する必要のあるすべての重要なトピックをカバーしています。基本を学んだら、自分のプロジェクトに取り掛かる準備が整います。
ステップ2:プロジェクトを構築する
プロジェクトを構築することは、あなたが学んだスキルを強化し、それらを実践するための素晴らしい方法です。ウェブサイトの構築方法に関する重要な資料をすべて読んだら、興味のあるプロジェクトに取り組み始めたいと思うでしょう。
プロジェクトを構築するための最初のステップは、自分自身に問いかけることです。何を構築すればよいですか?この質問に対する間違った答えは本当にありません。日常生活で直面する問題について質問してください。次に、コードを使用して問題の解決策を作成する方法を考えてみてください。店に行くときはいつも何かを忘れますか?ショッピングリストアプリを作成できます。
どのプロジェクトを選択する場合でも、それが自分が取り組みたいものであることを確認する必要があります。結局のところ、それはあなたのプロジェクトです!
何を構築できるかを考え始めるのに役立ついくつかのアイデアを次に示します。
- Web開発プロジェクトのポートフォリオ
- 米国の政治キャンペーンの寄付リストを共有するサイト
- 写真家のためのポートフォリオサイト
- 地元のコーヒーショップや美術館のウェブサイト
- お気に入りのカードゲームのリファレンスサイト
これらは、構築できる多くのプロジェクトアイデアのほんの一部です。あなたが作成できるものへの唯一の制限はあなた自身の想像力です。これは、コーディングを学ぶことのすばらしい点です。基本をマスターすれば、何でも作成できます。単純なWebサイトの構築に使用されるのと同じルールは、より複雑なWebサイトの構築にも使用されるルールです。
ステップ3:開発者コミュニティに参加する
そこにいくつのウェブサイトがあるか考えてください。これにより、Web開発コミュニティに才能のあるWeb開発者が何人いるかがわかります。
HTMLでのコーディングの学習を始めるときは、Web開発者コミュニティに参加することをお勧めします。開発者コミュニティには、初心者から専門家まで、あらゆるバックグラウンドの開発者が集まり、話したり、アイデアを共有したり、プロジェクトで共同作業したりできます。
どこから始めればいいのかわかりませんか?新しいWeb開発者に最適なコミュニティをいくつか紹介します。
- Stack Overflow:技術的なQ&Aコミュニティ。このサイトには、役立つと思われるHTMLに関するディスカッションが不足していません。
- GitHub:コードを保存および共有するためのサイト。インスピレーションにとらわれた場合は、新しいアイデアを見つけるのに役立つ「初心者プロジェクトリスト」がたくさんあります。
- Dev.to:あらゆる種類の開発者のためのコミュニティ。 Dev.toには、初心者から専門家まで、すべての開発者に最適なHTMLとCSS専用のコミュニティエリアがあります。
1つか2つのコミュニティに参加したら、できるだけ早く貢献を始めてください。誰かの問題の解決策を知っていますか?それを書き留めて共有します。何か手伝いましょうか? StackOverflowなどのプラットフォームで質問してください。
ステップ4:フィードバックと調査のベストプラクティスを求める
HTMLを学ぶときの最初の目標は、基本をマスターすることです。チャレンジの準備ができたら、より高度なプロジェクトに取り掛かることができます。
HTMLスキルを開発するための優れた方法の1つは、ベストプラクティスを調査することです。これらは、他の開発者がコードを作成するときに使用する規則です。コーディングのベストプラクティスは、あなたのコードを見たいと思うかもしれない他の開発者と将来の雇用者の両方によって評価されます。
ベストプラクティスを調査する最良の方法は、フィードバックを求めることです。プロジェクトが終了したら、友達に評価してもらい、コメントをいくつか付けてもらいます。助けてくれる技術的な友達がわからない場合は、Dev.toのようなコミュニティでプロジェクトを共有し、フィードバックを求めてください。
ステップ5:練習で完璧になります
これは以前にも聞いたことがあると思いますが、繰り返す価値があります。練習すれば完璧になります。
コーディングの方法を学んでいると、あきらめる言い訳を簡単に見つけることができます。プロジェクトがうまくいかない場合があり、続行するよりも停止する方が簡単だと思うでしょう。
しかし、それはコーディング方法を学ぶ上で当然のことです。時には、物事がイライラすることもあります。頑張って続ければ、スキルを磨いて先に進むことができます。
オンラインチュートリアルに従い、コースを受講し、プロジェクトに取り組むことで、スキルを練習できます。または、CodecademyやfreeCodeCampなどのサイトからのコードチャレンジに取り組むこともできます。
本当の課題に直面している場合は、Stack Overflowをスクロールして、他の初心者の開発者が直面している問題を解決できるように支援してください。
まとめ
HTMLでコーディングする方法を学ぶことは、インターネットが支配する世界でのあなたの時間の貴重な使い方です。 HTMLは、意欲的なWeb開発者、またはWebに興味のある人の学習に投資するのに最適な言語です/
HTMLは、CSSやJavaScriptと並んで、最新のWebサイトのコアビルディングブロックの1つです。その結果、HTMLでコーディングする方法を知っている開発者の大規模なコミュニティがあります。基本をマスターするのに役立つ、オンラインで利用できる書面によるガイドがたくさんあります。
HTMLを学習するときの最初の焦点は、構造、構文、および
やなどの基本的なタグの使用にあります。次に、テーブル、フォーム、HTMLとCSSの接続、およびその他の技術的なトピックを調べます。
-
HTMLとXML
HTML HTMLは、ハイパーテキストマークアップ言語の略で、Webページの構造を記述するために使用される言語です。 HTMLタグとそのコンテンツで構成されるさまざまなHTML要素で構成されています。 HTMLはハイパーテキスト言語であるため、ドキュメントのリンクのチェーンを作成できます。 HTMLの現在のバージョンはHTML5です。 HTMLは静的であり、小さなエラーを無視できます。HTMLでは、タグを閉じる必要はありません。 HTMLの例を見てみましょう- 例 <!DOCTYPE html> <html lang="en"> <he
-
Chromeでウェブを閲覧するだけで新しい言語を学ぶ
新しい言語を学ぶことは困難な仕事です。ほとんどの人は幼い頃に話すことを学びます、そしてそれは他の人の話し言葉を聞くだけで自然に起こる傾向があります。しかし、大人として、それは巨大な挑戦であり、まったく恐ろしいものです。 それはあなたが読んでいるウェブページ上の単語をあなたが選んだ別の言語に翻訳します。そうすることで、実際に何かを勉強するために邪魔をすることなく、語彙を構築していることになります。 拡張機能がインストールされると、ブラウザウィンドウの右上にアイコンが表示されます。それをクリックすると、ポップアップが表示され、ニーズに合わせて拡張機能を設定できます。作業する言語と、現在のスキ