見出し画像

コピペで始めるHTML（入門手前用）

赤根崎絵美

こんにちは！仕事とかプライベートでWebサイトを表示する「HTML」というものを扱うかもしれない！そんな時にまずは導入として難しい解説サイトじゃなく、コピペと自分のパソコンで実験してスタートしてみよう！という記事です。※簡単な編集なら難しくないよ！というのを伝えたいだけですので、本格的に始めたい方は別の記事やサイトで学びましょう。Windowsをベースにしています。

HTMLは自分のパソコン＆メモ帳ですぐに試せる

HTMLは、Webページで文字や画像を表示するなどが行える言語です。日頃からパソコンやスマートフォンでサイトを閲覧していると思いますが、多くはこの言語を基本に作られています。

単なる「文字列」なので、いわゆる標準のメモ帳でも作ってすぐにでも試せます！早速、コピペしてみましょう！

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
<meta name="description" content="サイトの説明文">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

おはようございます。

<br><br>

<img src="test.jpg">

<br><br>

<a href="https://www.google.com/">リンクはこんな感じ</a>

<br><br>

</body>
</html>

コピペしたら、名前を付けて保存してみましょう。test.htmlでもohayou.htmlでも何でも大丈夫です。ファイルの最後だけ「.html」にしてください。

画像1

保存したファイルを開いてみる

このファイルを、そのままダブルクリックするか、GoogleChrome,InternetExplorer,MicrosoftEdgeといったインターネットブラウザで開いてみましょう。そうすると、下記のような表示がされるはずです。※画像は表示されてなくてokです。

画像2

まずは簡単に作られている事を知る

この記事では難しい事には触れないので、実際に自分でこれを編集してみましょう！保存したファイルを右クリック→プログラムから開く→メモ帳で編集でファイルの内容を変更する事が出来ます。

「おはようございます」という文字を変更すれば、表示される文字は変わります。当然日本語じゃなくても大丈夫です！<body>～</body>の間に書かれている事は、見た目で変化がわかる部分ですので、是非変えてみてください。

画像3

<>が書いてあるところとそうでないところは？
<>で囲まれたものはHTMLタグと呼ばれる命令文です。<body></body>のように開始と終了があるものもあれば、<img src="xxx.jpg">のように単体でOKなものもあります。

<br>とは？
改行の意味です。

<img src="">は？
画像を表示するためのタグです。""のところに画像のURLを入れる事で表示できます。ご自身の持っている画像でもOKなので、同じフォルダ（デスクトップなど）にある画像のファイル名を入れてみましょう。【test.jpg】など。ネット上のものであれば、http～始まる書き方でもOKです。

<a href="★URL">文字列</a>は？
リンクを貼るためのものです。例えば、<a href="https://www.google.com/">文字列です！</a>とすれば、googleへのリンクが作れます。

サンプルファイル

コピペするのも面倒！という方のためにファイルを用意しましたので、ダウンロードしてご利用ください。

もっと知りたい時に

今はHTMLを学ぶ方法は無料でたくさんあります。「html 入門」といった検索ワードですぐにサイトが出てきます。これをきっかけにやってみよう！となったら是非調べてみてください！

私は実際に自分で触ってみるのが一番わかりやすい！と思いましたので、コピペしたり、実際のファイルをダウンロードしてもらう記事を作りました。

HTMLというものを知らない人が、思ったより簡単そう！と思ってもらって、覚え始めるきっかけになっていただけたら嬉しいです！！！直接もっと知りたい、助けてほしいというときは私のtwitterなどからお気軽にどうぞです！

いいなと思ったら応援しよう！