ITゲームインフォ

IT,ゲーム,ラジオの情報を配信

HTMLでウェブサイトを作ろう!第一回 基本を覚えよう

time 2018/04/11

ウェブサイトを1から作るときに必要になるのがHTMLのプログラミングの知識です。

今回はHTMLで何ができるのかと基本の書き方を教えます。

sponsored link

HTMLとは何か

HTMLという言葉を聞いたことがある人もいるかもしれませんがこのページを見ているほとんどの人は知らないと思うので説明します。

ウェブサイトを作る要素は3つあります。

1つ目が文字や写真などの内容。2つ目が文字の色や大きさ、フォント等のデザイン。3つ目がクリック時のアニメーション等の特殊な動作です。

HTMLは1つ目の文字や写真等の内容を決めるプログラミング言語です。

HTMLはウェブサイトを作る上で欠かせないものです。

準備

基本的な書き方を知る前にプログラミングの準備が必要です。HTMLエディターを探してダウンロードするかWindowsのメモ帳を起動してください。

HTMLの基本

まず以下のコードをコピー&貼り付けしてください。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>各ページタイトル</title>
<meta name=”description” content=”ページ概要文”>

</head>

<body>

 

</body>

</html>

 

この上のコードは何かというとHTMLを使う上での基本の文です。今のところは意味を理解していなくてもいいです。

次にコードを書いていきますがどこに何を書けば良いのか分かりませんよね?

まず最初はコードを書く場所について解説します。

コードを書く場所について

コードを書く場所は基本的に上で打ったコードの<body>と</body>の間です。このbodyというところに書くコードは目に見える物(写真や文字等)のコードを書きます。

それ以外の場所に書くと何も起きません。

基本的な書き方

まずはこれらのコードを見てください。

<p>これは文字です。</p>

<h1>見出しです。</h1>

これらのコードに共通することがわかりますか?

山括弧の間に文字があって反対側に同じものにスラッシュがついたものがあります。

HTMLでは基本的に

<要素>内容</要素>

という書き方になります。要素とは先程のPやh1のことです。

pで文字を表示するという意味。

h1は見出し(大きい文字)を表示する意味です。

文字を表示しよう

今学んだことを使って文字を表示してみましょう。

先程コピー&貼り付けしたコードの<body>と</body>の間に1つ前で書いた文字を表示するコード<p></p>を使って文字を書いてみます。

今回はあいうえおと表示させます。

まずは<p></p>を<body>と</body>の間に入力します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>各ページタイトル</title>
<meta name=”description” content=”ページ概要文”>

</head>

<body>

<p></p>

</body>

</html>

次に<p>と</p>の間にあいうえおと入力します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>各ページタイトル</title>
<meta name=”description” content=”ページ概要文”>

</head>

<body>

<p>あいうえお</p>

</body>

</html>

保存したら実行してみます。HTMLエディターなら実行ボタンを押せば実行できますがWindowsのメモ帳の場合は一度HTMLファイルとして保存する必要があります。

名前をつけて保存を押したあとファイル名の.txtを消して.htmlに変えて保存してください。エクスプローラーからファイルを開けば実行できます。

今回のウェブサイト作成講座は終わりです。わかりにくいところがあればコメント欄で質問してください。

sponsored link

down

コメントする




CAPTCHA


バイナリエディタ

広告

ITゲームインフォについて

このサイトでは管理人のウォーターとシュガーがandroidやパソコンのカスタマイズ情報やゲームの改造、ラジオ、アプリなどの情報を紹介していきます。
内容は不定期に更新する予定です。

このサイトのコンテンツの無断使用は固く禁じます。

カテゴリー



sponsored link

アクセスカウンター

  • 23現在の記事:
  • 17476総閲覧数:
  • 5今日の閲覧数:
  • 89昨日の閲覧数:
  • 12744総訪問者数:
  • 5今日の訪問者数:
  • 70昨日の訪問者数:
  • 69一日あたりの訪問者数:
  • 0現在オンライン中の人数:
  • 2017年10月29日カウント開始日: