レッスンお疲れさまでした。

本日は、ホームページ制作する時の設定とHTMLの基本を行いました。

設定に関して

 ホームページを作成する時には、拡張子を意識する必要があります。

 拡張子は、ファイル名の最後についているドット(「 . 」点)の後ろの文字です。

 ホームページ制作する際のhtmlファイルは拡張子を「 .html 」にします。

 Macを購入後の標準状態では拡張子は表示しない設定になっていますので、拡張子を表示する設定に変更します。

拡張子を表示するには

 「Finder」の「環境設定」から「詳細」タブを選択し「すべてのファイル名拡張子を表示」にチェックを入れます。

テキストエディットに関して

 標準状態のテキストエディットはhtml制作に適した設定にはなっていないので設定を変更します。

 「テキストエディット」の「環境設定」から「新規書類」タブを選択し「フォーマット」を「標準テキスト」を選択。

 「テキストエディット」の「環境設定」から「開く/保存」タブを選択し「ファイルを開くとき」の「HTMLファイルを、フォーマットしたテキストではなくHTMLコードとして表示」にチェック。

 ファイルを保存するときに拡張をつけないと自動的に「 .txt 」になりますので、意識的に「 .html 」を付けます。

 htmlは一般的に文字コードをUTF-8を使用するので、ファイルを保存するときの「標準テキストのエンコーディング」を「Unikode(UTF-8)」を選択します。

ファイルをダブルタップした時に起動するアプリケーションは拡張子によって変わります。

標準状態では、拡張子が「 .html 」の場合、ブラウザ(Safari)が起動します。

拡張子が「 .txt 」の場合、テキストエディタ(テキストエディット)が起動します。

作成したhtmlファイル(拡張子「 .html 」)をテキストエディットで開くには、開きたいファイルをドラッグ&ドロップでDockに登録されているテキストエディットのアイコンに重ねます。

HTML

 HTMLは、文章の構造を表します。

 CSSは、見た目のデザインを表します。

 

 HTMLはタグによって文章構造を表していきます。

 洋服にサイズ(S、M、Lなど)を表すタグや、素材(綿100%など)を表すタグ、値段(3,000円など)を表すタグがあるように、文章のこの部分が「見出し」であるとか、この部分が「文章(段落)」であるというように指定します。

 

 タグは基本的に開始タグと終了タグがあり、開始タグと終了タグで囲うことで文章構造を指定します。

 の中にはヘッダー情報(設定に関する内容)、の中にサイトに表示するものを記述します。

 の中に書かれた内容はコメントとなりブラウザには表示されないのでメモとして利用します。

 タグの中に「lang=”ja”」を書くことで日本語であることを指定します。

 タグの中にタグで文字コードがUTF-8であることを指定します。

HTML5のテンプレートを参考に実際にテキストエディットでhtmlを入力します。

 タグは開始タグを入力したら、先に終了タグを入力してからタグの中を入力するようにすると、開始タグがあるのに終了タグがないといったミスを防ぐことができます。

  

を入力したら

  

と入力、次に

  

と入力、最後に

  

大見出し

と入力する。

 タグの中のダブルクォーテーションも、先にダブルクォーテーションを2つ入力してから中を入力するとミスを防げます。

HTMLタグ

  Headingの略で、見出しを表します。

  見出しの重みにより

から

まで6種類あります。

 

 Paragraphの略で、段落を表します。

 

     Unordered Listの略で、順不同のリストを表します。

     

       Ordered Listの略で、順序付きリストを表します。

       

    1.  List Itemの略で、リストの項目を表します。

        Anchorの略で、リンクを設定します。