メモ

メモを入力してみよう!


Lesson 02「HTMLの書き方」

学習概要

HTMLの構成と基本的な書き方を無料のテキストエディタソフト「CotEditor」を使って学んでいきます。

補足

■Windowsユーザーのエディターについて
この部活ではEditor独自の機能を使うことはないため、
Windowsを使っている場合は、他の好きなEditorを使ってもらって構いません。
Windows用の無料エディタであれば「サクラエディタ」やもう少し高機能な「Atom」がオススメです。
別の部では「Atom」や「Brackets」を使っています。

■HTMLタグの書き方について
詳しくはコチラ

■拡張子について
保存をするファイルの最後には「.(ドット)」をつけて拡張子を指定します。
拡張子はファイルの種類をPCに分からせるものです。

◼️文字化けについて
エディターで開いた時にコードが文字化け(わけのわからない文字がいっぱい出ている)ている場合は、エディターの文字コード設定をUTF-8にしてください。
http://www.be-webdesigner.com/tips/coding/mojibake.htm

この練習でわからない所を質問する※部活外の質問はできません

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 02「HTMLの書き方」の内容※SEO用のため読めません

ではプログラミングを始めていきましょうプログラミングにはテキストエディタと呼ばれるメモ帳のようなソフトを使いますマックには標準でテキストエディットというソフトが入っています【入門】HTML言語・CSS言語初心者。

しかし標準のソフトでは使いづらいため部活では無料のテキストエディターソフトコットエディターというソフトを使っていきたいと思います【入門】HTML言語・CSS言語初心者。

インターネットからコットエディターを検索しダウンロードインストールを行ってくださいまたプログラミングには Web ブラウザーというソフトを使います【入門】HTML言語・CSS言語初心者。

Web ブラウザーはホームページを表示させるソフトになりますマックでは標準で Safari というソフトが入っていますがこちらもプログラミングの開発ように Google クロームというソフトをインストールしてください【入門】HTML言語・CSS言語初心者。

インストールした事エディターを開くとこのような画面が表示されるかと思います。【入門】HTML言語・CSS言語初心者この画面の中で実際にプログラミングを行っていきます。

プログラミング言語で書いた文章のことを行動と言います。【入門】HTML言語・CSS言語初心者ではこちらの行動をキーボードから打ち込んでみてください。コードが書き終わったら保存していきましょう。

コマンドと S ボタンを同時に押すと保存の画面が出てきます【入門】HTML言語・CSS言語初心者。

ここではデスクトップに保存をしたいと思います。

まずデスクトップにフォルダを作りましょう新規フォルダ作成でフォルダを作ります。

【入門】HTML言語・CSS言語初心者適当な名前で構いませんがここではテストというフォルダを作ることにしますその中にファイルを保存してくださいファイルの名前はこちらも適当で構いませんが今回はインデックスという名前にします。

【入門】HTML言語・CSS言語初心者そして拡張子こちらはファイルの種類になりますがこちらは. HTML ホームページの拡張子にして保存をしてくださいそうするともっとエディターがこの文章は HTML 言語で書かれているということを理解してコードが見やすいように色をつけてくれます。

【入門】HTML言語・CSS言語初心者では保存されたファイルを開いてみましょうまずはデスクトップに作成されたテストフォルダを開きます。

その中に先ほど作成したホームページのファイル INDEX . HTML というファイルがあるかと思いますそちらを開いていましょう。開いてみるとウェブブラウザソフトが立ち上がりホームページが表示されました。

これで簡易的なホームページの出来上がりです【入門】HTML言語・CSS言語初心者。

では実際にですねコードの中身を見ていきたいと思います行動全体を見てもらうとですね大なり小なりで囲まれたものがあると思うんですけれどもこれがですね目印になるタグと呼ばれるものになりますあと1行目をまずちょっと見て頂きたいんですけれども一行目にですねそうなりビックマークドック Type HTML 何かというとこの文章は HTML 5という形式で書かれてますよというものを宣言してる私になります宣言というのはコンピューターに伝えてあげるという風なものですね2行目にはですね HTML タグがあります一番最後の行にもですね同じにしてたってこっちの方は前の方にスラッシュが入ってるものですね。

【入門】HTML言語・CSS言語初心者ありますありそうですねこのタグというのは基本的にはこの二つが2になってますこれで1セントという形ですねこっからここまでのような意味になりますエレス猫のタグの意味はここからここまでの間に愛さに演出にメールの 色々と書いていきますよと言ったような意味になります。

その中ですね実際には二つの構成に分かれてます一つ目の構成は3行目からあることですね。【入門】HTML言語・CSS言語初心者えっとというタグを使ってますと呼ばれるものになるんですけれどもこの中にはですねどういったものが書かれているかというと4行目ですねメタタグというもので指定されてるんですけれどもこれは文字コードというの指定してますかもう時効だとちょっと待って後説明しますけれども文字の種類だと思っていただければと思います。

 UTF 8という種類の文字コードを使いますよそれで書かれてますよということを指定してます。もう一つがそのしたタイトルタグというものを使ってます何かというとこのホームページのタイトルがこのまま文字列タイトルタグの中に書かれてるようですね言いなりますよっというものを指定してますなので聞かれた文字がですね実際には褒めるブラウザの方を見てもらうとですね画面の一番上ですねのところに書いた文字が出てきてますこれでこれがタイトルですよっても指定している俺が減ったと呼ばれるところですね。【入門】HTML言語・CSS言語初心者。

もう一つが BODY タグというものを使っているボディ部というところがありますこの部分の中に書くのはですね実際に画面に表示されるところ画面に表示されるものをこの中に変えていきますその中に入り細に今回どんなものを変えているかと言うとまず H 1タグというものを使って書いてることがあります。

【入門】HTML言語・CSS言語初心者 H 1タグというのはみだしのタグになりますここが見出しですよというもんですなので画面を見てもらうとその中に変えた文字が見出しとしても大きく太字で表示されているような形ですねもう一つがですねその下 P タグといったものを使ってますこれからグラフの略の P なんですけどパラグラフというのは段落ですねこのタグの中に書いた文字が段落ですよーというものを示してますなのでそこに書いた文字がですね実際に画面にはあとと見出しよりは小さい文字で書かれていますこれが段落として表示されているような形ですねこのように HTML の書き方というのはまずドッグタイプという形でんしてみろ宣言しますよ HTML というタグで皮膚の中を書いていきますよヘッドというタグでヘッダー部というものを作ってその中に文字コードやタイトル変えていきます最後に BODY タグというものを使ってボディ部という部分を作ってその中に文章などを書いていくというような構成になっています。