HTMLスキル - 第1章 Lesson7

[実践]HTMLを書いてみよう:簡単なテキストのマークアップ

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

HTMLタグの書き方を理解した上で、実際に簡単なテキストをマークアップしていきます。
見出しタグや段落タグの意味を覚えながら、基本文法を定着させることが、ここでの目的です。



この動画で学べること

・トップページ用のファイルの作成方法
・HTMLの基本的な書き方



トップページ用のファイルの作成方法

「base.html」をトップページ用にコピーしていきたいと思います。
base.htmlをコピーとペーストで複製し、トップページとして認識させるために名前を「index.html」に変更します。
名前の変更ができたら、ファイルをダブルクリックしてSublime Text で開きましょう。



HTMLの基本的な書き方

<html></html>で囲まれた部分がHTMLとして認識される部分です。
この中に、<head></head>と<body></body>がありますが、
<body></body> の中に書いたものが、ブラウザで表示されます。
今回は、Webサイトからコピー&ペーストで文章を貼り付けていきましょう。



ーーーーーーーーーーーーーーーーーーーーーーーーー貼り付ける文章ーーーーーーーーーーーーーーーーーーーーーーーーーー


NESTonlineとは?

Webサイトを制作するためのノウハウを、動画でご紹介するサービスです。


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー




こちらの文章にタグを入れて意味付けをしていきたいと思います。
「h1」は見出しタグになります。
<h1></h1>で見出しの部分を囲みましょう。

「p」は段落タグです。
<p></p>で文章を囲みます。





Sublime Text でファイルを保存する方法

ここまでできたら、このファイルを保存しましょう。
メニューバーのFileからSaveに進むことで保存ができます。
または、ショートカットキー
[Mac] command ⌘+S
[Windows] Ctrl +S
でも同じように保存ができます。


次の動画で、この保存したファイルをブラウザで見てみましょう。