【Webデザイン】HTMLの基本。2019.11.14こんにちは。HTML、CSS勉強中のうりのすけです。今回はHTMLの基本について学んでいきたいと思います。目次まずはHTMLファイルを作ってみようHTMLの基本構造について学ぼうHTMLの書き方を学ぼうHTMLの基本文法タグを書く時のルールタグの中にあるタグについてタグに情報を加えるまずはHTMLファイルを作ってみようなにはなくともHTMLを書いてみるところからです。テキストエディタを起動しましょう。3を使っているので下のような画面です。下のようなコードを書いてみます。書けたらファイルを保存しましょう。ファイル名はindex.htmlとします。保存先はどこでもいいのですが、わかりやすくデスクトップとします。<title>副業はじめました。content="月収10万円を目指して副業始めました。</head><body><h1>副業始めました。</h1><p>月収10万円を目指して副業始めました。</p></body></html>デスクトップに保存したファイルを開きます。するとブラウザが立ち上がり下のような表示となります。これでWebサイト作成の初めの一歩、HTMLファイルが作成できました。HTMLファイル作成する上でのファイル名とフォルダ名のルールがあるので注意が必要です。拡張子(HTML)をつける半角英数字のみ(日本語は不可)「-(ハイフン)」「_(アンダーバー)」以外は使わない空白は使わない小文字に統一ホームページ(Webサイトのホーム画面)は「index.html」とするHTMLの基本構造について学ぼうHTMLファイルが作れるようになったので、次は基本の構造について学んでいきましょう。html>Doctype宣言といいます。どのバージョンのHTMLが使用されているかを書いています。「XHTML1.1」などバージョンがいくつかありますが、特に指定がなければHTML5となります。・<html>~</html>htmlの文書ということを表しています。ちなみにlangは言語でjaは日本語ということを示しています。・<head>~</head>ページのタイトルやCSSファイルとのリンクなどブラウザに表示されない部分の情報を書いています。charset=”UTF-8′′>「UTF-8」の文字コードにしますよと指定しています。これをしないとページが文字化けする場合があります。・<title>~</title>ページのタイトルとなります。ブラウザのタブの部分に表示されます。お気に入りに入れたときや検索で表示された時のタイトル名になります。content=”~”>検索した際にページタイトルと一緒に表示される部分になります。検索されやすいキーワード等をいれて記述したほうがいいかと思います。・<body>~</body>HTMLの本体の部分です。ブラウザで開いた際にページに表示される部分になります。以上がWebページとして表示するために必須となる要素の内容となります。実際にネット上にあるようなWebサイトを作成する際は<header>や<footer>など他の要素も必要となってきます。ページの情報を表している。ページのタイトルを表す。ページに表示される部分HTMLの書き方を学ぼう最後にHTMLを書く際の基本文法と注意点を見ていきましょう。先ほど作ったHTMLのコードに<>、</>がたくさん書かれていたかと思うのですが、これはタグといいます。<>が開始タグで</>は終了タグといいます。開始タグと終了タグはセットになっており、仮に終了タグを書き忘れるとその部分は表示されなくなります。終了タグで囲むをタグを「閉じる」といったりします。<タグ(開始)>コンテンツ内容</タグ(終了)>といった形で、コンテンツ内容をタグで囲むというのが基本的なHTMLを書く際の文法となります。タグを書く時のルール・半角英数字で書く。ファイル名と同じように、全角文字は使えません。・基本的に小文字で書く大文字と小文字の区別はありません。バージョンによっては小文字での記述が必要になる場合があるので小文字で統一したほうがいいです。タグの中にあるタグについてHTMLファイルを書いていくと<html>の中に<head>、<head>の中に<title>などタグの中にタグをどんどん書いていくことがよくありますが、このような書き方のときは必ず最後に書いたタグから閉じていく必要があります。下の例でいうと<head>から先に閉じていきます。例:<html>コンテンツ名<head>コンテンツ名</head></html>タグに情報を加える開始タグの中に付加情報を加える場合があります。その付加情報の種類のことを「属性」、内容のことを「値」といいます。画像を貼るためのタグになります。画像の場所についてはsrc属性を使って開始タグの中に書きます。src=”image/gazou.jpg”>HTMLのファイルの作り方から基本構造、書き方まででした。HTMLってどうやって書くんだろうかというところは理解できたのではないでしょうか。あとはタグの種類色々とあるので次回はタグについて勉強していきたいと思います。「金持ち父さん、貧乏父さん」に学ぶ、ブロガーにとっての資産を考える。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。スポンサードリンクプロフィールブロガー歴:3カ月うりのすけうりのすけです。新卒⇒派遣社員として就職⇒正社員に転職⇒再度転職と人生で2度の転職しています。機械系エンジニアをやっていて、副業したいとブログを始めて色々模索中です。ブログ始めたての方向けの記事やおススメしたいモノなど色々発信しています。仕事や副業おススメサイトマップホーム検索トップサイドバースポンサードリンクプロフィールブロガー歴:3カ月うりのすけうりのすけです。新卒⇒派遣社員として就職⇒正社員に転職⇒再度転職と人生で2度の転職しています。機械系エンジニアをやっていて、副業したいとブログを始めて色々模索中です。ブログ始めたての方向けの記事やおススメしたいモノなど色々発信しています。エンジニアに強い転職エージェント3選【2020年版】ブログで稼ぐために登録必須のアフィリエイト(ASP)のまとめ17選【ブログ初心者向け】(ASPごとの得意ジャンルも紹介します)将来に不安を感じる会社員は副業を始めるべき【理由を解説】カラフルボックスが格安と評判なので、MixHost、エックスサーバーと比べてみる【月額480円】ブログを始めたら入れておきたいあると便利な無料・有料ツールまとめ14選!【初心者必見】スポンサードリンクタイトルとURLをコピーしました。