紅葉の始まり

初心者でも出来るプログラミングの基礎を習得する!第4回

プログラミングを習得するために何が必要か!

プログラミングを習得するにあたり、どのエディタを使うのか、どの言語が良いのかを調べてみました。

参考にして下さい。

この記事内では「Atomエディタ」を使ったもので説明して行きます。

HTMLで記述するタグ

<!DOCTYPE html>タグ

HTML5で記述しますというのを宣言します、文章の解釈に使うDTDを宣言するものです。

<html></html>タグ

htmlで記述することを表しています、<html lang="ja">lang属性を記述してこの文章は日本語で書いていることを表しています。

<head></head>タグ

headタグ 文書のヘッダ部分で指定するタグ

ヘッダ部分は<title>タグやファビコンが記事上部のタイトルバーに表示されるほかは通常記事には表示されません。

ヘッダ部分では<title>タグ、<meta>タグ、<link>タグなど様々な情報が指定されます。

スタイルシート(CSS)やJavaScriptを別のファイルにした場合ヘッダタグの中で記述して読み込ませます。

<body></body>タグ

文書の本体部分で記事の内容を記述する範囲です、ブラウザの画面上に表示される。

各部分の色を指定する属性がありますが、いずれも非推奨で色を指定する場合にはスタイルシートの仕様が推奨されていますのでスタイルシートを使用しましょう。

<header></header>タグ

ボディー部分(記事の本体)の中のヘッダー部分(h1タグより上の部分)を表します、headと混同されやすいのですが、別物でheadは記事の情報を記述する部分でブラウザには表示されません。

<footer></footer>タグ

フッター部分(記事の下部の部分)を表します。

head内に記述するタグの一例

<meta>タグ

charset 文字セット

<meta charset="utf-8">と記述します、これは世界の標準的なコード規格、世界中の文字に番号を割り当て使えるようにする考えから「Unicode」が誕生しました、utf-8はその文字の集まりであるUnicodeを符号化する方式の一種です。

文字コードはとりあえず「utf-8」にしておこうが慣例になりました。

descriptionタグ

<meta name="description" content="ページの説明文">

タグに設定した文章は検索結果上の説明文として表示されます、このタグ自体には検索順位の効果はありませんが、長期的に集客する上で重要になります。

検索でページの内容を推測するのは「タイトル」「と説明文(meta description)」しかありません、ユーザー側はそれらを見てページに来てくれるのです。

その説明文の中に
・自分が探しているものがありそうだ。
・オリジナルの情報がありそうだ。
・このページを見るとお得な情報がありそうだ。
このような説明文があればクリック率が高まるということです。

ワードプレスでは「抜粋」で記事の説明が入力できるのそちらを使うのも一つの方法です。

<title>タイトル</title>タグ

head内のtitleタグは記事上部のタイトルバーに表示されます。

<link>タグ 他の場所からリンクする

リンクタグは別のファイルやページとこんな関係があると関連づけるタグ

ファビコンを表示するリンク

<link rel="icon" href="favicon.ico">これはタイトルバーにファビコンを貼るために記述する例です。

CSSと関連づけるリンク

<link rel="stylesheet" href="css/styles.css">これはCSSファイルと関連づけるためのリンクの例です。

body内に記述するタグの一例

メインとなるタグ

<header></header>タグ

各ページの先頭につける見出し情報を表示する領域の事

<footer></footer>タグ

各ページの下部に情報を表示するための領域の事

状況に応じて設定するタグ

<nav></nav>ナビゲーションセクション要素

ナビゲーションタグ、他の文書へのナビゲーションリンクを提供するためのセッションを表します。

<ul><ol><li>リスト要素

<ul></ul>順序なしリスト要素、一般的に行頭記号を伴うリスト、番号なしリスト
<ol></ol>順序付きリスト要素、番号付きリストとして表示されます。
<li></li>リストの項目を表すために使用します。

下のように記述すると

<ul>
<li>
リスト1
</li>
</ul>
<ul>
<li>
リスト2
</li>
</ul>

  • リスト1
  • リスト2

このようになります又は</li>の終了タグを省略しても表示されます。

<ul>
<li>リスト1
<li>リスト2
</ul>

これを表示すると下のようになります。

  • リスト1
  • リスト2

<a></a>アンカー要素

href属性を利用して別のウェブページ、ファイル、同一のページ内の場所、電子メールアドレスなどや他のURLへのハイパーリンクを作成します。

nav、リスト、<a>要素を使った例

メインメニューなどのサイトのナビゲーションとなるところを「nav」で囲んでいます。

<a>アンカー要素にhref属性を利用して別のWebページ、ファイル、同一ページ内の場所、電子メールアドレスなど他のURLへのハイパーリンクを作成します。

href属性を利用したときのURLはリンクで飛ばしたいURLを記述しましょう。

初心者でも出来るプログラミングの基礎を習得する!第4回

これからもまだ更新していきますのでよろしく

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事