HTMLに触れてみよう!

この記事は約7分で読めます。
Slide

HTML , CSSを学ぼう

このレッスンでは以下の図のようなWebページを作ることを目指します。
難しそうに見えるかもしれませんが心配しないでください。
私たちと一緒に1つ1つ学び、作り上げていきましょう。
Slide
HTMLに触れてみよう!
プログラミングの
世界へようこそ
Webページは「HTML」と「CSS」という言語を組み合わせて作られています。 HTMLとCSSを学ぶだけで、以下のような見た目のサイトも作れるようになります。
Slide
HTMLに触れてみよう!
HTMLの仕組み
まずはHTMLについて勉強していきましょう。
HTMLでは、テキストに「タグ」と呼ばれる印を付けていきます。
図のようにテキストをタグで囲むことにより、テキストが「見出し」や「リンク」といった意味をもつことになります。
Slide
HTMLに触れてみよう!
開始タグと終了タグ
テキストをタグで囲む時は、以下の図のように、開始タグ終了タグではさみます。終了タグには「/」が必要な点に注意してください。
Slide
HTMLに触れてみよう!
見出しをつける
見出しの要素は<h1><h6>要素があります。
hはheading(見出し)の略です。
図のように、<h1>が一番大きな見出しで、
<h6>が一番小さな見出し
になります。
Slide
HTMLに触れてみよう!
段落を作成する
段落を表すのは<p>要素です。
pはparagraph(段落)の略です。
<h2>要素や<p>要素で囲んだテキストは改行されます。
Slide
HTMLに触れてみよう!
見出しと段落
見出しのあとに、小さな見出しか段落(文章)を記述します。
段落は、文章が短ければ1つのpタグ内に納めても良いです。
段落を分けたほうが読みやすい場合はpタグを分けましょう。
Slide
HTMLに触れてみよう!
コメントアウト
<!-- -->で囲むとコメントアウトとなります。
WEBサイトには表示させないコメントを残すときに使いましょう。
Slide
スライドは終わりです。
演習に進みましょう!
previous arrow
next arrow

この記事では、WEBエディタを使い、HTMLの記述に触れてもらいます。


手順

では早速、HTMLに触れてみましょう。
エディタ」にコードを入力していきます。
プレビュー」がその結果です。

index.html

Hello world.」を入力し、
 ・開始タグ:<h1>
 ・終了タグ:</h1>
で囲んでください。

見本」のようになりましたか?
終わったら、「できた!」をクリックしてください。



プレビュー
見本

この記事を書いた人

たくみ
たくみ

兼業サラリーマンをしている、たくみと言います!

自身のためにも、皆さんの役に立つ記事を投稿していきます!

WEB技術やPC関連情報が得意分野です。

コメント

タイトルとURLをコピーしました