2019年10月25日SHAREツイートシェアはてブLINEPocket目次HTMLを編集してみよう!事前準備ディレクトリ(フォルダ)、ファイルを作成しよう!HTMLの雛形を作成しよう!<body>タグに文章を記述しよう!画像を表示させてみよう!こんにちは!Webエンジニアのたけです!前回は、ざっくりと学習のロードマップについて7つの行程についてまとめましたが、今回その1つ目のHTML/CSSの学習についてまとめていきたいと思います!今回の記事ではHTMLの記述とその事前準備についてまとめています!HTMLを編集してみよう!事前準備まずはじめに、HTMLとCSSのファイルを編集するにあたって2つのツールが必要です。それはテキストエディターとWebブラウザです。Explorerなどのことです。Installerをクリックjapanese-menuと入力しinstallをクリックディレクトリ(フォルダ)、ファイルを作成しよう!実際にHTMLを記述していきます!コーダーとしての第一歩です!まずデスクトップに「study」というディレクトリ(フォルダ)を作ります!Atomエディタでプロジェクトにフォルダを追加します。ここで先ほど作成したstudyフォルダを開きましょう!左にstudyフォルダが追加されましたか?そうしたら、フォルダのアイコンのところで右クリックをして新しいファイルを作成します。ファイル名は「index.html」として下さい。HTMLの雛形を作成しよう!ここからいよいよソースコードを書いていきます!以下の画像のように記述して下さい。「html」と記述して「tabキー」を入力すると自動で補完されます!ここでは、HTMLの雛形を作成しタイトルを「初めてのHTML」としました。このようにHTMLでは<title></title>というような記号で文字を挟んで記述します。<title>という記号を開始タグ</title>という記号を終了タグと呼びます。この二つの総称を「タグ」と呼びます。ここに書かれていることを簡単に説明してきます。HTMLは<html>、<head>、<body>の3種類のタグで文書の構造を定義します。<html>タグはその文書がHTMLであることを定義するタグであり、文書全体を囲うように記述します。lang=”ja”というところは、日本語であるということを定義しています。(jaをenにした場合は英語である)headタグには文書のタイトルなどの基本的な情報を記述するヘッダ情報を記述します。bodyタグには実際にブラウザ上で表示される文書本体を記述します。headに書かれているヘッダの情報はサーチエンンジン向けのキーワードや説明、文書のタイトル、利用するスタイルシート、文字のエンコードなどのメタ情報などの情報が記述され、タイトル以外はほとんどブラウザ上では表示されません。文字のエンコードは日本語の場合基本的にUTF-8を利用します。詳しく知りたい方は調べて見て下さい!<body>タグに文章を記述しよう!では実際にブラウザ上で表示されるようにbodyタグに情報を記述してみましょう!以下のように記述してみて下さい!では実際にブラウザで表示させてみます。Chromeの上でドロップしてみて下さい!以下のように表示されましたか?(僕のブックマークは気にしないで下さいw)ここでは、<h1>タグと<p>タグを表示させました。<h1>タグは見出しを記述するもの(基本的には1ページに1つのみ)、<p>タグは段落(paragraph)を記述するもので、それぞれ表示させてみました!HTMLではこのように文章の構成を記述していきます。画像を表示させてみよう!次に、画像を取り込んでいきます。「study」フォルダの中に「images」というフォルダを作って下さい。「images」の中にはお好きな画像を保存して下さい。以下のように記述して下さい。Atom上では以下のようになります。ここでは、<img/>タグを使いました!<img/>タグは画像を表示させるタグです。順を追って説明していきます!<img/>タグは開始と終了を省略して書きます。省略する場合は「/」を後ろにつけます。他にも改行を表すタグ<br/>タグもこのように書きます!次に「src」「alt」について説明します。これらは属性と呼ばれます。srcにはファイルパスを書き表示する画像を指定します。ここはつまずきやすいポイントです!index.htmlファイルから読み込むので同じ階層にあるのはimagesフォルダです。imagesフォルダの中に「dog.jpg」を保存したのでファイルパスを書くときは「images/dog.jpg」となります。(studyフォルダの中に画像を保存した場合は「dog.jpg」となります。)alt属性は、画像の説明を書きます。画像が読み込まれなかった場合にその説明が表示されるようになるものです。実際にブラウザで確認しましょう!ちゃんと犬の画像が表示されましたね!今回はここまでにします!実際にタグは多く種類があるのでこの記事では紹介しきれませんでした。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。