HTML入門まとめ

ブログが作りたい!HTML入門 > HTML入門まとめ

HTML入門まとめ

HTML入門まとめ

HTML入門(10)

よく使うHTMLタグの紹介も終わったので、今回は復習もかねて、簡単なページを作ることにします。

「おれ様は、ばっちりだからもういいんだぜぇ」という人もいらっしゃるかもしれませんが、今回作成したページは、CSS入門でも使う予定なので作成しておいて欲しいのね。

お話は、次の順番で進みます。

▲ページの先頭に戻る

よく使うHTMLタグのまとめ

HTML入門の復習をしておきましょう。

1:最低限必要なHTMLタグ 4つ

覚えているかしら。最低限必要になるHTMLタグです。

<html>

HTML文だから、<html>タグで囲みます。

<head>

そのページの情報を記載します。

<title>

そのページのタイトルを記載します。

<body>

<body>タグ内に、伝えたい内容を記載します。

忘れてしまった人は、記事「HTML入門 はじめました」をご覧ください。

▲ページの先頭に戻る

2:よく使うHTMLタグ 8つ

よく使うであろうHTMLタグです。ちょっと自信がないタグがあるときは、下記タグをクリックして、過去の記事へ飛びましょう。

<h>

見出しタグです。<h1>~<h6>まであります。

<p>

文章を書くためのタグです。<p>~</p>で、ひと段落を囲みます。

<img>

画像を表示させるタグです。href属性、alt属性は必須です。

<a>

リンクを張るときのタグです。

<table>

表を作るときのタグです。<tr>、<th>、<td>もお忘れなく。

<ul>

箇条書きを書くときのタグです。それぞれの項目は、<li>~</li>で囲みます。

<div>

ブロックレベルでグループ化するためのタグです。

<span>

インラインでグループ化するためのタグです。

▲ページの先頭に戻る

3:たまに使うHTMLタグ 3つ

頻繁には使わないけれど、たまには使うので覚えておくと良いHTMLタグです。(この記事のあとで、紹介して行く予定です)

<br>

強制的に改行するタグです。

<strong>

文字を強調させるためのタグです。ワンランク下には、<em>タグがあります。

<blockquote>

引用文を使うときのタグです。

集中して「よく使うHTMLタグ 8つ」を覚えてもらいたいので分けて書くことにしました。

▲ページの先頭に戻る

Webサイトを紹介するページの作成

HTML入門の総決算として、Webサイトを紹介するページを作成してみましょう。最低限、次の情報を盛り込んで、HTMLコードを作成してみてください。

  • ページにタイトルを付ける。
  • 見出しを入れる。
  • 表を作って、Webサイト情報を書く。
  • Webサイト名からリンクを張る。
  • Webサイトの要旨を書く。
  • Webサイトのキャプチャ画像を入れる。
  • 箇条書きで特徴を書く。
HTML入門の総決算

正解があるわけではないので、お好きなように作成してください。ただ、デザインやレイアウトは、CSSにて行います。もっさりしたままにしておいてください。

キャプチャ画像の作り方が分からない人は、記事「プリントスクリーンの方法」を参考にしてください。

▲ページの先頭に戻る

次回予告

次回は、改行するタグ(<br>タグ)について書きます。

▲ページの先頭に戻る

関連記事

HTMLに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/03/30 更新日:2008/03/30

« 「グループ化 【<div>タグ】」|「改行する 【<br>タグ】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

できました。夢のようです。

「Webサイトを紹介するページの作成」、
無理かな~と思ったのに
指定されたように 
表もキャプチャ画も入って完成できました。

ここまでが限界でも充分満足です。

すごい!

sachiさん、こんばんは。
コメントありがとうございます。

おぉ!すごい!

勘が良いのか、はたまたセンスがあるのか。
お見事でございます。

短期間で、HTMLが使えるようになりましたね。
すごいなぁ。私も頑張らなきゃ。

とてもためになります。

KumaCrowさん初めまして。

最近こちらのブログを発見して、拝見(勉強)させていただいております。

私は現在、ADPSを使って電子雑誌作成の仕事をしておりまして、HTMLが役に立つのではと考えております。

そんな時、こちらのブログを発見いたしました。

KumaCrowさんのブログはHTMLに関してはすごく分かり易く、とても丁寧で毎日のように読ませていただき、毎日のようにHTMLをしこしこ書いてみています。(覚えるまでにはまだまだかかりますが…)

これからも、毎日のようにこちらのブログにお邪魔して、HTMLをマスター(大げさ!)できるように勉強していきたいと思っています。

KumaCrowさんこれかも頑張ってください。

P.S.HTML5&CSS3の記事も期待しております。

ものすごぉ~く勉強になりましたぁ~(≧▽≦)

初めましてですm(__)m

今さらながら・・・

妻がブログをしたいっ!という意欲に賛同し、色々調べた結果FC2でブログを始める事となりました(^^;)

とは言え・・・

あ~したい!こ~したい!を実現するには基本的な知識なくして実現不可能と察し、クマクロ様のブログを発見!

Σ(・ω・ノ)ノ!

本当に親切で解りやすく、所々にある『おちゃめなコメント』にも癒されながら『HTML入門』にて楽しく勉強させて頂き、総決算のWebサイト紹介ページを
「<blockquote>タグ」以外全て使って無事完成させる事ができましたぁ~。

ありがとうございましたm(__)m

次は「CSS入門」頑張ります。

先は長い(^^;)。。。。。。

承認待ちコメント

このコメントは管理者の承認待ちです

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/250-d688d61e
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて