FamilyHomeAboutContactHomeWebデザイン32歳の初心者が実践するゼロからのHTML入門:HTMLの基本構造を理解する2017/09/03takuizm32歳の初心者が実践するゼロからのHTML入門:HTMLの基本構造を理解する0000-takuizmです!最近知識への欲求がすごくて、HTMLのお勉強をはじめました。HTMLやCSSなどのいわゆるフロントエンド系の技術とは全く縁のない人生です。SEですが、早い段階からPM的な仕事も多く技術的な部分がほぼ素人のためこのままでは駄目だと重い腰を上げてみました。一緒に頑張りましょう!!連載する?予定です。次回の学習内容HTMLの基本知識まずはHTMLの概念というか基礎的な部分を見ていきましょう。普段当たり前のように見ているWEBページは、そのほとんどがHTMLで作成されています。WEBページには無くてはならない存在。Language略してHTMLです。WEBページの中身を覗いてみるいつも見ているWEBページがどんなHTMLで構成されているのかを簡単に確認することが出来ます。すべての人が一度は見たことがあるであろうGoogleのトップページの中身を確認してみましょう。Googleのトップページで右クリックをして、どんなHTMLが書かれているのか確認してみましょう。右クリック→「要素の詳細を表示」をクリックHTMLが書かれているのがわかりますね。HTMLをブラウザで表示させてみるでは実際にHTMLファイルを作成してブラウザに表示させてみましょう。テキストエディタでHTMLファイルを作成します。※僕はAdobeが提供しているBracketsを使用中です。今回はデスクトップに適当なフォルダを作成します。作成したらBracketsでフォルダを開きましょう。フォルダを開いたら右クリックで表示したコンテキストメニューからファイルを作成をクリック。ファイル名は好きな名前にしてください。僕は「myfirstwebpage.html」としました。適当な文字を入力しましょう。入力したら再度保存してとりあえず完了。出来上がった「myfirstwebpage.html」をブラウザにドラッグアンドドロップします。!!ブラウザに入力したテキストが表示されましたね!!ブラウザがレンダリングして、HTMLファイルを表示した結果がこれです。基本的な構造を理解しましょう。簡単です!<DOCTYPE>宣言するHTMLファイルには必ず記載するおまじないのような宣言があります。それがDOCTYPE宣言です。これからHTMLを書くよ〜という宣言だと思って良いと思います。これは必ず記述します。<html>タグ宣言の次は、<html>タグです。終了タグ</html>で閉じましょう。これはタグで囲った範囲がhtmlであることを示す重要なタグです。htmlを書く際は必ず記述します。<head>タグ次は<head>タグです。記述することが出来ます。etc...上記の通り、SEO(検索エンジン最適化)においても重要な役割をもちます。基本的に<head>タグ内の内容はWEBページには表示されません。<body>タグWEBページに表示される内容を記載するタグです。<body>タグ内に記述します。次回の学習では、<body>タグ内に記述する内容を勉強していく予定です。頭の中が整理されて、また学習頑張れそうです。次回は<body>タグ内に記述する見出しタグである<h1>〜<h5>タグについて学習アウトプットしたいと思います。withthefamily84この記事が気に入ったらいいねしよう!最新記事をお届けします。0送るRecommendおすすめ記事2017.09.0532歳の初心者が実践するゼロからのHTML入門:見出しタグ(h1〜h6)の使い方takuizm埼玉県在住の1984年生まれ。普通のサラリーマンブロガー。Shiftを模索している。コメントをキャンセルメールアドレスが公開されることはありません。都内から2時間以内でゆったりキャンプ!毛呂山ゆずの里オートキャンプ場で親子で川遊びしよう。15views都内から2時間以内でゆったりキャンプ!毛呂山ゆずの里オートキャンプ場で親子で川遊びしよう。1,823views都内から2時間以内でゆったりキャンプ!毛呂山ゆずの里オートキャンプ場で親子で川遊びしよう。702viewstakuizmのプロフィール埼玉県在住の1984年生まれ。普通のサラリーマンブロガー。Shiftを模索している。この言葉をモットーに、色々なアクテビティにチャレンジ中。キャンプ、サーフィン、WEB関連の情報発信がメインです。有益な情報を発信していきたいと思っています。