![HTMLって何? | 非エンジニアがWEBサイト作成に挑戦【第1話】](https://itechsearchengine.com/wp-content/uploads/2021/06/269aba42ed47e5061bb81178feb3eab0.png)
はじまり
![](https://itechsearchengine.com/wp-content/uploads/2020/09/3e083b3182efb7157dafe1e9cfe24924.png)
![](https://itechsearchengine.com/wp-content/uploads/2020/09/42f9cab910351fa8045b20f76d340390.png)
サーバ構築とか、ITエンジニアにもたくさん種類があるよ!
![](https://itechsearchengine.com/wp-content/uploads/2020/09/3e083b3182efb7157dafe1e9cfe24924.png)
![](https://itechsearchengine.com/wp-content/uploads/2020/09/42f9cab910351fa8045b20f76d340390.png)
あとはサーバ構築もやったことある!
![](https://itechsearchengine.com/wp-content/uploads/2020/09/3e083b3182efb7157dafe1e9cfe24924.png)
![](https://itechsearchengine.com/wp-content/uploads/2020/09/42f9cab910351fa8045b20f76d340390.png)
でもやってみたいね!
![](https://itechsearchengine.com/wp-content/uploads/2020/09/3e083b3182efb7157dafe1e9cfe24924.png)
![](https://itechsearchengine.com/wp-content/uploads/2020/09/42f9cab910351fa8045b20f76d340390.png)
こんな流れで、エンジニアでもない私(はるまき)がWEBサイトの作成に挑戦する事が決定しました。
これから「プログラミングって何するの?HTML?CSS?そんな英単語を言われても分からないよ!」
こんな感覚を持ったド素人が、WEBサイトを開設するまでに経験した内容を記事にしたいと思います。
現在リアルタイムでWEBサイトを作成しているので、このブログをブックマークをして更新を待っていただけると嬉しいです!
![](https://itechsearchengine.com/wp-content/uploads/2020/09/3e083b3182efb7157dafe1e9cfe24924.png)
HTMLとは?
![](https://itechsearchengine.com/wp-content/uploads/2020/09/3e083b3182efb7157dafe1e9cfe24924.png)
![](https://itechsearchengine.com/wp-content/uploads/2020/09/42f9cab910351fa8045b20f76d340390.png)
![](https://itechsearchengine.com/wp-content/uploads/2020/09/3e083b3182efb7157dafe1e9cfe24924.png)
何をするの・・・・?
そもそもHTMLとは『ハイパーテキスト・マークアップ・ランゲージ(Hyper Text Markup Language)』の略になります。
ハイパーテキスト
複数の文書を関連付けて、お互いに結びつけることができる仕組みです。
マークアップ
識別用のマークを付けることで、Webサイト内の文章を『タグ』で囲い意味を持たす作業を指します。
例)「WEBサイト」という単語を太字にしたい場合は、単語を<strong>『タグ』で囲います。
<strong>WEBサイト</strong>
↓
WEBサイト
※タグはstrong以外にもたくさんあります
ランゲージ
言語のことです。
簡単にお伝えすると、私たちが普段調べ物をする時などに何気なく使っている
WEBサイトの文章構成を作っている言語が『HTML』です。
![](https://itechsearchengine.com/wp-content/uploads/2020/09/3e083b3182efb7157dafe1e9cfe24924.png)
非エンジニアがHTMLを実際に使ってみた
![](https://itechsearchengine.com/wp-content/uploads/2020/09/42f9cab910351fa8045b20f76d340390.png)
![](https://itechsearchengine.com/wp-content/uploads/2020/09/3e083b3182efb7157dafe1e9cfe24924.png)
HTMLを使うための環境
OS:Windows10
コードエディタ:Visual Studio Code
HTMLを使う流れ
①『Visual Studio Code』をダウンロードします。
ダウンロードはこちらから
![](https://itechsearchengine.com/wp-content/uploads/2020/09/42f9cab910351fa8045b20f76d340390.png)
気になる人はチェックしてみてね!
②『フォルダーを開く』を選択します。
![](https://itechsearchengine.com/wp-content/uploads/2021/06/image-43.png)
③デスクトップにtestフォルダーを作成して選択します。
![](https://itechsearchengine.com/wp-content/uploads/2021/06/image-42-1024x575.png)
④チェックを入れて信頼を選択します。
![](https://itechsearchengine.com/wp-content/uploads/2021/06/image-44.png)
⑤赤枠から新規ファイルを作成して『index.html』と名前を付けます。
![](https://itechsearchengine.com/wp-content/uploads/2021/06/image-46.png)
⑥『html:5』と入力します。
![](https://itechsearchengine.com/wp-content/uploads/2021/06/image-47.png)
⑦画像のソースコードが表示されるので、赤枠の『"en"』を『"ja"』に変更します。
![](https://itechsearchengine.com/wp-content/uploads/2020/09/3e083b3182efb7157dafe1e9cfe24924.png)
![](https://itechsearchengine.com/wp-content/uploads/2021/06/image-49-1024x385.png)
⑧<body>の中に『<h1>絶賛開発中!</h1>』と入力して保存します。
![](https://itechsearchengine.com/wp-content/uploads/2020/09/3e083b3182efb7157dafe1e9cfe24924.png)
![](https://itechsearchengine.com/wp-content/uploads/2021/06/image-50-1024x380.png)
![](https://itechsearchengine.com/wp-content/uploads/2020/09/3e083b3182efb7157dafe1e9cfe24924.png)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sharemore</title>
</head>
<body>
<h1>絶賛開発中!</h1>
</body>
</html>
⑨右クリックで『Open with Live Server』を選択します。
![](https://itechsearchengine.com/wp-content/uploads/2021/06/image-51.png)
⑩ブラウザが起動するので、HTMLの内容を確認します。
![](https://itechsearchengine.com/wp-content/uploads/2021/06/image-52.png)
![](https://itechsearchengine.com/wp-content/uploads/2020/09/3e083b3182efb7157dafe1e9cfe24924.png)
これだけなら簡単だった!
![](https://itechsearchengine.com/wp-content/uploads/2020/09/42f9cab910351fa8045b20f76d340390.png)
じゃあ次はCSSを使ってみようか!
![](https://itechsearchengine.com/wp-content/uploads/2020/09/3e083b3182efb7157dafe1e9cfe24924.png)
色々と教えてね!
第2話はこちらからご覧ください!