NotE覚書的な奴！

HTMLとかを色々勉強していく感じです。

HTMLの基本・改＿その１

HTMLの基本 勉強関連

前回のが自分でも読み辛いなーと思ったので。

HTML5までは触れずに、これだけ入れればとりあえずできるよっていうのをまとめる。

f:id:notE:20180714093155p:plain

とりあえずメモ帳に

<html>

<head></head>

<body></body>

</html>

これを書き込んで、保存。

その時にファイル名を英数字で作っておくと実際に公開できるようにするときとかに便利。

拡張子（.txtとか.pngとか表示される奴）は「.html」になる。

これが「これはウェブページですよ」っていう合図。

f:id:notE:20180714093400p:plain

ここまで出来たら保存！

保存したフォルダにはちゃんとウェブサイトのアイコンになっておいてある。

今回テキスト文書のままでもできてたけど前はファイルの種類をちゃんと「すべての種類」にしておかないとテキスト文書で保存されてたから今回メモ帳のアイコンだったらここを変えて保存し直してほしい。

f:id:notE:20180714093601p:plain

f:id:notE:20180714093640p:plain

今回何も書いてないから真っ白なページ（笑）

次でもう少し詳しくやっていきます！

HTMLの基本

HTMLの基本

とりあえず自分でもわかる話。

HTMLは

  • DOCTYPE宣言
  • HTMLタグ
  • HEAD
  • 本文
  • フッター

で構成されてて、フッターは書いたことない。

最近はHTML5が使われてるから宣言は

<!DOCTYPE html>と宣言してここから先はHTML5で書かれてますよーって伝える。

何に伝えるの？サイトを閲覧してるブラウザに宣言してるってことだよね？

次のHTMLタグはこっから気がHTMLです、みたいな。ここにどの言語で書いてますよってのも書く。検索エンジンなんかはこの言語タグでより分けてるらしい。

だから日本語圏の検索サイトに登場させたいなら<html lang="ja">って入れておいた方が検索にヒットしやすいってことかな。

HEADタグにはmetaデータってのを書く。

文字コードもこれで指定するからHTML5は基本的にUTF-8なので

<meta charset="utf-8">って設定しておく。

こういうのは書いたしたから影響するので必ず<head>タグの次の行に書いておく。

他にも<meta name>で概要とか書けるらしい。多分検索とかで使うんじゃないかな。

他にもタブやブックマークに表示されるページタイトルは<title></title>タグで挟んで書いておくし、CSSのリンクも<link rel>で書いておく。

JavaScriptはこのページにすぐに反映させるならここだったかな？ボタンとかで反応させるのはそれを表示する場所に<script type>でリンクさせる。

ようやく本文。

本文は色々タグを使う。でも昔覚えた奴より減ったなあ。<font color>とか<center>とかもうなくなったからね！今はCSSでそういうのは設定。

とりあえずエリア分けの<div>とCSSに反映させるためのid、classを使っていく感じ。

 

とりあえず簡単なのはここまで。

自分もくじ

ホームページ作成についていろいろ勉強したいけど勉強した先から忘れるから備忘録として書いてく。

とりあえず自分でできるといえるのは

  • HTML　　　（むっちゃ昔懐かしい）簡単な骨組み
  • CSS　　　　id,classごとの色変えたり大きさ変えたり
  • JavaScript　正直サイト見ながらじゃないとつらい

うーん、頑張ろう

 

カテゴリについて

  • HTMLの基本：基本的なこと。そのまま（笑）自分の理解をまとめるためなのでわかりにくいとかここを詳しく書いて欲しいとかコメントしてもらえると嬉しいです。

  • 勉強関連：HTMLやCSSなんかの勉強したことを書いたり。

  • 趣味：趣味に関する記事。増えてきたら小分けしていこうかなあ。
  • 便利：タグ一覧とか、あとでカラーコードを作ったらそのページにリンクしたりする予定
  • 制作物宣伝：あれこれつくったよー！見てー！って宣伝したいときに。

以上。増えたら更新していきます！