0ぷろ!

PCに対しての知識が0の人間が半年でどこまで成長するかを自分で記録するブログ

五日目!

 

スタバに行ってきました。PCは広げませんでした。

なんか場違いな気がして...(びびり)

 

土日の進捗はどうしようかなぁと思っていたんですが、今週の土日は少し忙しかったので月曜日分と複合させてしまいます。(結構大変でした)

 

まずは土日の進捗です。

 

・先週やった事の総復習。*総復習内容については復習なので説明を省きます。

・社長様に渡されたファイルの文字化けの原因特定、修正。

・自分でHTMLファイルを実際に作る。

 

ではまずファイルの文字化けの原因特定、修正です。

 

社長から送られてきたファイルなのですが...

f:id:ysm_0pro:20160314180743p:plain

見事に化けています。

これは単純に文字コードが指定されていないのでPCがその時使用している文字コードでは読み込むことができない!というものでした。

ではこれに何をしてあげればいいのか?そのままですね。文字コードを指定してあげればいいんですね。

<head><title>の間に文字コードを指定する<meta charset="UTF-8" />を入れると

f:id:ysm_0pro:20160314181451p:plain

はい...早くおぼえます...すいません...

ちなみ文字コードは UTF-8 だけではないので、自分がどの文字コードを使用しているかを把握しておいた方がいいですね。

 

 

続いて自分でhtmlファイルを作成するです。

 

まず、htmlファイルを作成するために、なんでもいいのでファイルを作成します。

今回僕はテキストファイルからhtmlファイルを作成しました。

大事なのはファイル名を 〜〜.html にすることです。

これによりPCがそのファイルをhtmlファイルと認識してくれます。

そのhtmlファイルをターミナルから編集して様々なタグをつけることでhtmlファイルを作成する事が出来ます。

 

 ちなみに僕はこんなのを作成しました。

f:id:ysm_0pro:20160314183325p:plain

盛大に滑りそうですね。

以上が土日の進捗です。

 

 

 

では、本日の進捗です。

今日は

・htmlでもっといろんな要素(=タグ)を取り入れたhtmlファイルを作る。

・htmlとXhtmlの違いとは?

です。html漬けでした。

 

 

htmlでもっといろんな要素(=タグ)を取り入れたhtmlファイルを作る。

f:id:ysm_0pro:20160314184730p:plain

 

f:id:ysm_0pro:20160314184740p:plain

このhtmlファイルは僕が1から作成しました。土日に作ったものに比べてパワーアップしてます!!

具体的は何をしたかというと、

文字の色づけ、段落、強調、リンク付け、画像搭載などです。

ちなみに中身はhtmlファイルがどういうものであるか、というのを復習も兼ねて軽く説明してます。ちなみにソース側を見ると...

 

f:id:ysm_0pro:20160314185537p:plain

タグ付けされまくっています。

これにWebページに載せるためのタグを追加すると、Webページになります。

 

 

 

Xhtmlの軽い説明と、Xhtmlとhtmlの違いについて。

 

XHTMLとは?言葉の意味

Extensible Hyper Text Markup Language の略。HTML を XML に適合させたマークアップ言語。HTML から見栄えを指定する命令を 廃止し、正しい文書構造を記述することを目的として作られました。

 

 XMLは、ExtensibleMarkupLanguageの略

色んな情報を「情報の意味」と「情報の内容」に分けてテキストで書くための方法(言語)

 

 XML文書はテキストで記述する

テータを記述するための文法。XMLで作られた文法をXML文書と呼びます。

文字コードUnicodeなど。基本的にどんなシステムでも読み込むことが可能。

*CPUやハードウェア固有の機能などを必要としないからです。

 

逆にXMLはどんなデータでも記述が出来きます。

XMLはHTMLと同じようにタグを使ってデータ表現をします。

スプレッドシートワープロ、リレーショナル・データベース、プレゼンテーションシートなど、ほとんどすべてのアプリケーションのデータは、XML文法で記述可能。

 

さらにXMLを応用できる周辺ソフトによりXMLファイル自体の能力が高まりました。

XML文書をほかのデータ形式にコンバートするスクリプト言語XSLTXML文書間のハイパーリンクを記述するためのXLink、HTMLをXML文法で記述したXHTMLなど。

 

 SEOとは?

Search Engine Optimizationの略

サーチエンジンの検索結果のページの表示順の上位に自らのWebサイトが表示されやすいように工夫されること、そのための技術やサービス。

検索結果の最適化って意味合いかな?

 

 HTMLとXHTMLの違い

HTMLでは、作り手が多少ソースのミスをしていても、ブラウザが修正してくれますが、XHTMLはしてくれません...作り手が作ったままを表現するので、少しのミスでも許しません。厳しいですね。

 

XHTMLの構造

文書型宣言

HTMLのどのバージョンで記述されているかを宣言するもの。一行目に記述する。

html要素

このhtmlタグで囲んだ所がHTML文書であることを示している。

meta要素

metaタグ。<head>タグの中にいれる。文書の情報を記述する。

このタグには</>がなく、</>がない要素を「空要素」という。

検索エンジン用のキーワード等もこのタグで記述している。

title要素

titleタグで囲んだ所がタイトルバーに表示され、Webページのタイトルである事を示す。

body要素

bodyタグに囲まれた所が本文になる。

 

ここだけ見るとHTML文書との差は文書型宣言でしょうか?

 

では、XHTMLとHTMLの差は?

  1. 文書は整形式でなければならない
  2. 要素名及び属性名は小文字でなければならない
  3. 非空要素には終了タグが必要である
  4. 属性値は常に引用符で括られなければならない
  5. 属性の省略化はしてはならない
  6. meta、hr、br、img などは、空要素として書く
  7. 属性値内での改行を含む複数の空白は1つと見なす
  8. スクリプトおよびスタイル要素の定義が異なる
  9. 要素の入れ子などSGMLの排除機能を再現できない
  10. ‘id’および‘name’属性をもつ要素は、‘id’属性を使用する

など。

 

要するにhtmlよりも扱いにくいけど、正確で正しい文書構成が出来る!ということでしょうか。

 

参考URLです。

 

HTMLとXHTMLの違いはどこにある?

HTML講座(フォントと色) - CyberLibrarian

XMLとは?

XMLについての説明 ↓

http://www.atmarkit.co.jp/ait/articles/0204/20/news001.html

後は過去のものの流用です。

 

 

 

それでは本日のタイピング結果です。

 

f:id:ysm_0pro:20160314191432p:plain

ミスがだいぶ減ってきました。後は単純にスピードともう少しブラインドタッチとしての質を上げていきたいですね。まだキーボード見てる時があるので...

 

以上が本日の進捗となります。