10日で出来るWeb製作 1日目 HTMLについて

こんばんは!KOSEN’s阿部です。
僕の担当は「10日で出来るWeb製作!」です!
Webを学んでまだ半年ですが皆さんと一緒に勉強していきます!
専攻でデザインを勉強しているので、配色、配置なども紹介していきます。
本だと見ただけでノックダウンしてしまう可能性もあるので、
ドットインストールを参考にしていきますね:)

ドットインストールとは?
3分動画でマスターする初心者向けプログラミング学習サイト   ドットインストール

「3分動画でマスターする初心者向けプログラミング学習サイト」です。高専の授業でもプログラミングを勉強しますが、スピードが早かったり、何をしているか分からない時もあります。そんな時にこれを用いて勉強するととても分かり易いと思います!様々な言語の動画があるので、自分に合ったスピードで、自分の好きな言語を勉強することができます!ちなみに動画は全部無料です!

1.HTMLって!?
HTMLというのはハイパーテキスト マークアップ ランゲージの略で、
ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することで様々な
機能を記述設定することができるもの。(wikipedia参照)

…..

要するに
「Webをつくる時に土台となる言語。様々な機能を追加することができる。」
ものです。

ちなみに最近バージョンのHTML5も基礎はHTMLです。
HTML5って何ができるの?ということでHTML5でつくられたデモページ
があったのでご覧下さい。
Demo
(参考:http://www.mrdoob.com/projects/chromeexperiments/ball-pool/より)

ということで本日はHTMLについて紹介していきます!
2.HTMLの書き方!(参考:ドットインストール HTML入門 #01〜#04)

ここではブラウザ上(Ex.Safari,Chrome,Firefox…)に”こんにちは!”と
表示させるHTMLファイルをつくっていきます。

1. <!DOCTYPE html>
2. <htmllang=”ja”>
3. <head>
4. <metacharset=”UTF-8″>
5. <meta name=”description” content=”はじめてのHTMLです。”>
6. <title>はじめてのHTML</title>
7. <link rel=”Stylesheet” href=”mystyle.css”>
8. <link rel=”shortcut icon” href=”favicon.ico”>
9. <script src=”myscript.js”></script>
10. </head>
11. <body>
12. <p>こんにちは!</p>
13. </body>
14. </html>

[今回使ったタグ]
<!DOCTYPE html>
HTML5で書きましたよーという宣言。他のバージョンだと少し変わってきます。

<html>〜</html>
HTML文書の範囲を示すタグ

<head>〜</head>
文書のタイトルなどのヘッダ情報を示すタグ。ブラウザ(Ex.Safari,Chrome,Firefox…)側に情報を送る。

<body>〜</body>
Webの本文を記載するところ(実際にブラウザに表示される部分)

<meta>
文章に関する情報を指定して、ブラウザや検索ロボットに知らせるためのタグ。

<title>〜</title>
Webページのタイトル。ブラウザの上部に記載されるもの

<link>
ファイル、データを読み込む部分。ここではファビコン(タブについてる小さな画像)とCSSを読み込んでいます。

<script>〜</script>
Javascriptのファイルを読み込んでいます。(※後日紹介します。)

<p>〜</p>
一つの段落(パラグラフ)を示しています。ここでは”こんにちは”が一つの段落として表示されています。

ファイルを保存する時は.txtファイルではなく.htmlファイルで拡張子を変更しましょう!

タグに関しては他にも多くのタグが存在します。
自分の用途にあったタグを用いてWebを編集してみましょう!
(参考タグ辞書:http://www.htmq.com/index.htm)

明日は画像、動画、フォームを設置してみましょう!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>