IT 1NOTE パソコンスクール

岡山市北区・静かな住宅街のパソコン教室。仕事、日常生活でパソコン活用術。 スマホやタブレット~資格取得まで。IT1NOTE(アイティーワンノート) パソコンスクールつしま校

TEL.086-252-7585

〒700-0088 岡山市北区津島笹が瀬10-16

ul

HP作成No7 リストを作成する

岡山市北区 個別指導 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン
講師きびだんご店長

好きな事をするフリ―講座での実践型個別指導の教室
フリー講座単価60分2,300円

 

数回に渡ってホームページ作成方法をシンプル解説にて記載。

これまでの内容

1. HP作成No1 はじめの一歩(メモ帳)

2. HP作成No2 作成基本タグ(メモ帳)

3. HP作成No3 HPファイルと素材の管理

4. HP作成No4 メモ帳文字入力とWeb表示

5. HP作成No5 見出しの設定

6. HP作成No6 最初に覚えたい5つのHTMLタグ

 

今回はWebページにリストを作成します。

このリストは、後にメニュー項目に変えることができます。

下図教室Webページ メニュー項目を参照

web%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%aa%e3%82%b9%e3%83%88%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc

では、さっそく作成してみましょう。

前回作成のindex.htmlファイルをメモ帳で開きます。

※メモ帳で開く方法がわからない方は、HP作成No4を参考

以下のリスト全体を表すタグを入力します。(下図参照)

<ul>〇〇〇</ul>

20161110ul%e3%82%bf%e3%82%b01

次にul開始タグとul終了タグの間に

項目にするタグ<li>〇〇〇</li>を入力。(下図参照)

<ul>
<li>トップ</li>
<li>旅日記</li>
<li>旅写真</li>
<li>お知らせ</li>
</ul>

20161110ul%e3%82%bf%e3%82%b02

入力終了しましたら

ファイル→上書き保存

最後はWeb表示確認します。

① index.htmlの上で右クリック

② プログラムから開く→InternetExplorer

%e3%83%a1%e3%83%a2%e5%b8%b3%e9%96%8b%e3%81%8d%e6%96%b93

 

リスト表示ができていたら成功です。下図参照

20161110ul%e3%82%bf%e3%82%b03

 

ここまで、あまり難しいことはしていません。

スキマ時間で覚えていきましょう♪

 

HP作成No7
To be continued

 

この続きは教室で語り合いましょう♪

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ