クサイダー速報

違うネタバレ専用サイトに移転しました どこかは言えない

HTMLとCSSの基本を学ぶ ~まとめ編~

オススメ記事

前回はHTMLドキュメントの始め方、終わり方について学びました。

結構中途半端ですが、その3も兼ねてまとめていきます。

f:id:narutonetabare:20140429200423j:plain

前回の記事

HTMLとCSSの基本を学ぶ その2 ~HTMLドキュメントの基本~ - クサイダー的日常HTMLとCSSの基本を学ぶ その2 ~HTMLドキュメントの基本~ - クサイダー的日常

どうも、クサイダーです。 最近色々忙しいので、記事の更新に時間がかかっています...では、前回の続きを書いていこう!今回は実際にHTMLドキュメントを作っていき...

まずは、<html>タグの間に、<head>と </head> を書いて下さい。  この<head></head>の間に入る情報は、通常ブラウザー上には表示されません。 この<head>タグの中には必ず <title>クサイダー的日常</title>のように、サイトのタイトルを書きます。 <title>タグを含む、 <head> タグ内の一部の情報はブラウザ上に表示されます。

<head> and <title> tags

まとめの前に、<body>タグについて学んでおきましょう。 </head>タグの下に <body></body>と書いて下さい。 ブログ上の全てのコンテンツは、ここに書かれています。(例:画像、動画、リンクなど)

How to use the <body> tags

書いたものは保存しようね Σ(゚Д゚;)ー

ここまで、HTMLドキュメントの基本を書き込んできました。 いま書き込んだものは、そのままだと.txtファイルで保存されてしまうので、HTMLファイルで保存するには"Save As"(日本語版では何て書いてあるんだろう?)をクリックして下さい。

Save As

HTMLというものを選択肢から選んでみて下さい。

Save as type:HTML

HTMLという選択肢がなかったら、.txtファイルで保存して下さい。 あとで拡張子を、.txt から.htmに変えればOKです. 

HTMLドキュメントを保存したフォルダーを開いて下さい。Chromeや、IEなどのアイコンにHTMLドキュメントはなっているはずです。

Picture of Folder

ダブルクリックすればブラウザーに表示されませんか?

Picture of browser

大成功!! ソースを見てみましょう。(Windows: Ctrl + U   Mac:Command + Option+ U). HTMLドキュメントで書いたものと同じになっているはずです。

Picture of source 

まとめ

いかがでしたか? 本当に基本の事しか書いていないうえ、CSSには全く触れず....

お役にたてたら嬉しいなぁ

 

PS: あくまで基本なので、はてなブログのカスタマイズ法も兼ねて応用編をいつか書きます! あ、書くって言っちゃった...(;゚∀゚)

 

バックナンバー

連載を読んでいただいてありがとうございました

 

↓↓↓↓↓クリックしていただけると励みになります。↓↓↓↓↓

にほんブログ村 漫画ブログ 週刊少年ジャンプへにほんブログ村 漫画ブログへ