2015-06-09

エンジニア研修 第3日目 (HTML/CSS基礎)

はじめまして
非エンジニアの新卒、鄭です。

今回教えて頂いたのは
CSS 、HTMLについてです。

非エンジニアの私でも
<body><h>のなどのタグは初見ではなかったです。
というのが、小学校高学年の頃流行っていた HP、ブログのとき
コピペのフォーマットではありましたが、よく使用した記憶があったので
少し懐かしい気持ちでした。

まずhtmlの構造についてです
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <link rel="author" href="mailto:mail@example.com"> <title lang="en">HyperText Markup Language - Wikipedia</title> </head> <body> <div> <h1>HyperText Markup Language</h1> <p>HTMLは、<a href="http://ja.wikipedia.org/wiki/SGML">SGML</a> アプリケーションの一つで、ハイパーテキストを利用してワールド ワイドウェブ上で情報を発信するために作られ、 ワールドワイドウェブの<strong>基幹的役割</strong>をなしている。 情報を発信するための文書構造を定義するために使われ、 ある程度機械が理解可能な言語で、 写真の埋め込みや、フォームの作成、 ハイパーテキストによるHTML間の連携が可能である。</p> </div> <footer> Copytight &copy; hogehoge. </footer> </body> </html>

ぱっと見、もはや呪文で何が何だか

それをツリー構造にすると


こういった図にすると私でも分かりやすいですね。

一つ一つタグの意味、ルールなども教えていただき
さっそく書いてみました!

基礎的な部分は皆、順調にできたのですが
問題点としてあがったのは
ヒューマンエラーが多いことです
というのが 私もそうなのですがタブキーを使う習慣がないため
かなりスペルミスが多く、思った内容が反映されずエラーになることが多々ありました。

基礎のあと自由にCCSとHTMLでページを編集してみたのですが
エンジニアの新卒の作ったのを見て、こんなことも出来るのか!と感心しました。

短時間でこんなすごいペーシを製作できるものなのですね。

http://yutagotorejob.github.io/htmlWork/


経験値や知識などエンジニア、非エンジニアの間ですごくありますが
お互い刺激しあっていい研修にしていきたいと改めて思いました!
このエントリーをはてなブックマークに追加