シリウスに捧ぐ

小さな商社に勤めるオーバー30。 三度の飯より美容が好きというくらい美容オタクであり、 プログラミング初心者であり、 パニック障害持ち。 超初歩的なプログラミングの勉強の記録をメインにしつつ、そのあたりの日常をつづっていきたいと思います。

1/28進捗

こんばんは。

 

 

今日は日曜日だったので、その他の家事(明日のお弁当作り含む)をすませつつ、メインでやっているブログ記事2本とプログラミング(というかマークアップ)を少し触ることができました。

 

 

今日の現時点でやったのは、

atomのセッティング

②フォント(Ricty Diminished)のインストール

③実際にatomにhtmlを書く

 

というところまでです。

 

 

 

 

atomに書いたhtml

何が何だかサッパリですが、dotinstallさんの講義を参考に、見たまま真似しました。

f:id:kaminofubuki:20180128212507p:plain

 

 

②保存したファイルをgoogleにドロップすると、ちゃんと文字が出てきて感動!!

 

f:id:kaminofubuki:20180128212447p:plain

③「ソースを表示」させると、ちゃんとatomで書いたhtmlタグなどが表示されました。

f:id:kaminofubuki:20180128212457p:plain

 

 

私のhtml経験と言えば、何年も前に、webサイト作りをめざしたことがあって、その時にインターネットを見ながら少し触ったくらい・・・・

 

 

結局、途中で他にもう少し簡単にwebサイトを作れるフォーマットのようなものを見つけてしまったので、よく理解もしないまま忘れ去っていました。

 

 

 

あ、あと前ちょっとやってたカラーミーショップで、時々html形式でいじることもあったけど、基本は簡単モードの方で使ってたからほとんど皆無に等しい。

 

 

でも。

 

当時も今も、書いた内容がそのまま画面表示されるhtmlタグは楽しいと思います。

気持ちが変わってなくてよかった。

 

 

ゆくゆくは、htmlを一通りマスターして、phpあたりをやってwebアプリケーション制作の技術を磨きたいです。

 

 

 

【今日の知識:htmlの構造

 

■<!DOCTYPE html>

⇒これからhtmlの形式で文書を書いていく、という意味の一番トップに書く設定文。

必須。

 

■<html></html>

⇒htmlの文書の大枠。この中に行を増やしてタグを書いていく。

 

■<html lang="ja">

⇒このページの言語設定は日本語です、という属性(値)

 

■<head></head>

⇒文書自体の情報の枠組み。タイトルなどを入れる

 

<body></body>

⇒本文を入れる箇所の枠組み

 

■メタタグ

<meta chrset="utf8">

⇒ページの文字コードをutf8にするという設定。必須。

<meta name="description" content="初めてのhtml文書です">

⇒文書の説明文。web検索時の検索結果に反映される文章。

 

 

【今日のキーワード】

■タグ⇒文章に意味付けをする命令用の記号。

例)開始タグ<head>

  終了タグ(閉じタグ)</head>

※開始と終了は対でなくてはならない

 

■属性⇒タグ内の、より細かい内容の指定などのこと

例)<font color>こんにちは! </font>

↑の「color」の部分が属性

 

どうでもいいけど、カナダに留学していた時、スペルの表記が基本イギリス英語だったため、どうしても指がcolourと打ってしまう…

colourでもいけるのかな?

 

■属性値⇒属性の内容をより細かく指示する値のこと

例)<font color="pink">こんにちは!</font>

↑の"pink"の部分が属性値。

この場合属性の「color」だけでは意味をなさないので、属性値が必要

 

■pタグ⇒段落を指定するためのタグ。パラグラフの略

例)<p>こんにちは!</p>

 

 ■ファビコン⇒ウェブページ上のタブに表示されるアイコン

 

■メタタグ⇒head内の枠内に配置されるタグ。文字コードを指定したり、ページの説明文などを記述したりする。