HeTeMuLu Creator(へてむるクリエイター)を使って
ホームページを作成します。

その前に、ホームページを作成するためには
さまざまな取り決め等があって、それらに基づいた設定が
必要になってきますが、ここでは、とりあえず難しい設定は
ぬきにします。

HeTeMuLu Creator(へてむるクリエイター)を使った
ホームページ作成を体験しながら、徐々にステップアップ
というかたちで進めていきたいと考えております。



それでは、はじめます。

■ホームページの作り方、HTMLの骨組み作りから

「リンクチェッカー」と書いた部分の右側にある「×」印をクリックして
「エクストラバー」を閉じておきましょう。

ホームページの作り方

「エクストラバー」は、とりあえず使いませんが、必要なときは「F4」キーで
いつでも表示・非表示を切り替えることができます。



「エクストラバー」を閉じると、こうなります。

ホームページの作り方-カスタム

上図で、「カスタム」、「フォント」、「レイアウト」、「文書構造」~と書いてあるタブの部分と
その上のアイコンの部分を、「タグパレット」といいます。
タブを切り替えると、その上のアイコンも変化します。


ホームページ作成の一番最初の作業は、HTMLの骨組みの作成です。

それでは、「タグパレット」のタブを「ページ」に切り替えて、
「HTMLの骨組みの作成」をクリックしてください。

ホームページの作り方-HTMLの骨組みの作成



このような窓があらわれますので、設定はそのままで「OK」をクリックします。

ホームページの作り方-HTMLの骨組み



すると、HTMLの骨組みとなる記述があらわれます。

ホームページの作り方-ページ

これが、ホームページの基礎となるタグです。

こまかい説明は省略しますが、ここで覚えていただきたいのは
「body」タグです。

タグは通常、<body>●●●</body>
のように記述して、●●●の部分が、そのタグの属性をもちます。

「body」タグは、ホームページを表示させるという属性をもち
ここに記述された内容が、ホームページの見える部分として
あらわれてきます。



というわけで、「body」タグに「こんにちは」と記述してみましょう。

ホームページの作り方

これだけで、超簡単ではありますが、ホームページの完成です。

<body>と</body>の間に、「こんにちは」の文字がはさまれていますので
ホームページ上には、「こんにちは」と表示されます。


早速、ファイルを保存して確認してみましょう。
「名前を付けて保存」をクリックします。

ホームページの作り方-名前を付けて保存



ファイル名は、何でもいいのですが
ここはオーソドックスに、「index」と付けて「保存」をクリック

ホームページの作り方



先程、「無題」と表示されていた部分が、「index」に変わりました。

更に、その左側のアイコンの色が、黄色から白に変わりましたね。
黄色は「未保存」、白は「保存済」の意味があります。

ホームページの作り方



ファイルの保存はできたでしょうか?

保存したファイルは、自動的にブラウザと関連付いていると思いますので
ファイルをダブルクリックで実行してください。

インターネットブラウザが立ち上がり
左上に「こんにちは」と表示されればOKです。


次は、カーソルを「こんにちは」の右側にもってきて
そこで、「Shift」キーを押しながら「Enter」キーを押します。

すると、<br>タグが入ったでしょうか?

これは、改行をあらわすタグです。
<br>タグを記述しないと、HeTeMuLu Creator(へてむるクリエイター)の
画面上で改行していても、ホームページ上では改行されないのです。



<br>タグを入れましたら、今度は「はじめまして」と入れてみましょう。

ホームページの作り方



そして、「上書き保存」をして、再度ブラウザで確認します。

ホームページの作り方-上書き保存



こんにちは
はじめまして

と表示されていればOKです。


同じように<br>タグを入れて、今度は画像を入れてみましょう。

「タグパレット」のタブを「リンク/画像」に切り替えて、
「画像の挿入」をクリックしてください。

ホームページの作り方-画像の挿入



画像は、「GIMP(ぎんぷ)の使い方、其の1」 で作成した、写真を使います。

「画像の設定」の窓の右上の、「…」の部分をクリックして目的のファイルを選択します。
「画像」の右側の欄に、選択したファイル名が表示されましたら「OK」をクリック

ホームページの作り方-画像の設定



そうしたら、下図のようになりました。
「src=”●●●”」の、●●●の部分が、選択したファイル名です。

もし、「index」ファイルとは別のフォルダを指定していた場合は
ファイル名の前に、「src=”▲▲▲/●●●”」や「src=”../▲▲▲/●●●”」
というように、フォルダの位置とフォルダ名が追加されて入ります。

ホームページの作り方-リンク/画像



再度、「上書き保存」をして
ブラウザ上で、このように表示されていればOKです。

ホームページの作り方



続きはこちら
AD

コメント(1)