こんにちは。谷口です。
paizaラーニングの「Web技術入門編」に「Web技術入門編02 : HTMLを理解しよう」が追加されました！
「Web技術入門編02 : HTMLを理解しよう」では、Webページを表現するためのHTMLについて、またWebページを取得・解析するためのテクニックが学べます。
今回は、「Web技術入門編02 : HTMLを理解しよう」の講座内容をご紹介します。
- プログラミングは少しできるようになったけど、Webの仕組みについてはまだ勉強していない
- HTMLって少しは読み書きできるけど、どういう仕組みで動いているのかよく知らない
- これからWebエンジニアを目指したい！
という方におすすめです。
「Web技術入門編02 : HTMLを理解しよう」の内容ご紹介
「Web技術入門編01 :URIとHTTPを知ろう」でも解説していますが、Webページを表示するときは、まずWebブラウザからWebサーバに「リクエスト」を送ります。Webサーバはそのリクエストに応じて「レスポンス」を送り返し、Webブラウザがそれを表示します。
このとき、リクエストの送り先となるアドレスは「URI」、このような通信手順は「HTTP」といいます。「Web技術入門編02 : HTMLを理解しよう」学ぶ「HTML」は、このような手順で送信されているWebページの記述方式です。
HTMLとは、「HyperText Markup Language」の略で、Webページの内容と構成を記述するマークアップ言語です。プログラミング言語と同じような感覚で、Webページの内容と構成をテキストとして記述できます。基本的には1ページにつきひとつのファイルを作成して、テキストファイルとして保存します。このテキストファイルをブラウザに読み込むと、Webページとして表示することができます。
ハイパーテキストとは、簡単に言うと複数の文書を相互に関連付ける仕組みです。
たとえば、通常の紙の文書だったらページとページの間は、独立していますよね。読み手が特定の言葉について詳しく調べようと思ったら、五十音順に索引を引いて関連ページを参照する…というように、すべて手動でやらなければなりません。でも、ハイパーテキストではその単語を選択するだけで関連ページを表示する…といったことができます。
HTMLは、このハイパーテキストという仕組みをインターネットで実現するために生まれました。Webページでは、Webサイト上の文書や画像を相互にリンクして、簡単に閲覧できますよね。
プログラム上でHTMLを処理するには、HTMLのパーツと構造をしっかり把握しておきましょう。
HTMLで、もっとも基本となるのが下図の部分です。開始タグと終了タグがあって、その間に「コンテント」があります。これらをひとまとめにして「要素」とか「エレメント」と呼びます。
HTMLの要素は、入れ子（ネスト）で記述します。たとえばpタグの要素の中で、強調したい部分がstrongタグで要素になっています。このような要素は、親要素のコンテント部分に、子要素が入っていなければなりません。pタグとstrongタグの要素が交差していると、Webページが正常に表示されなくなります。
イメージタグのように、開始タグだけで単独で記述する場合もあります。このような要素を「空要素」と呼びます。空要素は、Webページの特定の位置に何かを挿入したり埋め込んだりに使用します。
要素をよく見ると、開始タグの中に次のような記述があります。これを「属性」や「アトリビュート」と呼びます。属性は、要素に関する追加情報を記述します。
たとえば、このaタグでは、リンク先のアドレスを属性として記述しています。属性は、属性名と属性の値をイコールでつなぎます。属性値は、シングルクォーテーションかダブルクォーテーションで囲みます。
HTMLのパーツは、このような要素と属性でできています。
まとめ
「Web技術入門編02 : HTMLを理解しよう」では、このようなHTMLの構造を学んだあとに、実際にPythonやRuby、PHPを使ってWebページのHTMLを取得して指定の情報を取り出すプログラムを書いてみることができます。
Web開発初心者の方、Webエンジニアを目指してみたい方、プログラミングは学んだけど仕組みはよく知らないな…という方はぜひチャレンジしてみてください。
※「Web技術入門編」とは
サービスやシステムのユーザーであれば、それほど仕組みを理解していなくても利用することはできます。ただ、Webエンジニアを目指すなら、仕組みを理解していないとサービスを一から作ったり、性能を改善したり、障害に対応したりすることはできません。
この講座の目的は、WebサービスやWebアプリケーションの基本となるインターネットの仕組みを理解することです。
プログラミングの初歩やHTML/CSSについては学習済みの方が対象となっていますので、「プログラミング自体が初めて…」という方は、どれかの言語の入門編とWebアプリ開発入門編、またHTML/CSSやシェルコマンドの入門編を終えてからのほうが理解しやすいかと思います。（復習としての解説もありますので、すべて理解できていなくても大丈夫です）
各言語の入門編とWebアプリ開発入門編について詳しくはこちら
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
