IT 1NOTE パソコンスクール

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

TEL.086-252-7585

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

HTML

Webサイトは様々なデバイス対応で作成すること

岡山市北区 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン

講師きびだんご桃子
教室ブログTOP

 

 

HTML/CSSの基礎〜応用まで実践レッスンを終えた生徒様は、

次は自分用のWebページ作成に入ります。

 

今では様々なサイズのデバイスが登場していますので、

PCとタブレット、スマホと異なる画面サイズに合わせて、

レイアウトの切り替えが出来るようにすることが必要です。

 

どのデバイスで見ても、見栄えの良いレイアウトを、

全てに対応しないといけません。

 

 

使用するユーザーが、”見やすい、使いやすい”ことを意識し、

最初の段階で、後々の過程を見越しながらWebページを

一つ一つ構想を練りながら作成して行きます。

 

また後々の制作工数を出来るだけ少なく、手間やミスを減らすには、

効率よく構文を作成しないといけません。

 

一つ形が出来れば、後は一部の管理で活用することが出来ますので、

まず最初は一からWebサイトを作れる様に、実践レッスンで習って行きます。

 

 

 

⭐️教室からのお知らせ⭐️

この秋、スマホ・タブレット・PCスキルアップにぴったりな、

ご新規の方にお得なキャンペーンを開始いたしました!

詳しい内容はこちら↓

スマホ・タブレット・PC初心者さんキャンペーン

期間は11月4日まで受付中です!

キャンペーンはご復帰の生徒様にも適応しております。

 

パソコン初心者の方、シニアの方、大歓迎!

もしご検討されてる方は、見学、無料体験もございますので、

どうぞお気軽にお問い合わせ下さいませ。

* 無料体験&無料カウンセリングでお待ちしております。

 

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

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

HTML/CSSのタグ入力にはタイピングは必須

岡山市北区 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン

講師きびだんご桃子
教室ブログTOP

 

 

HTML/CSS講座を受講されている生徒様がいらっしゃいます。

 

様々な内容のタグ入力が必要なのですが、まだ慣れていない時に、

全てタグをコピペで済ましてしまうと、どうなるか?

 

コピペだけで入力をせずに済ましてしまうと、

タグの内容が覚えられないという事をよくご存知のようで、

しっかりと入力をされておりました。

 

もちろん、他の講座でも同じです。

自分で一から作成できる事、これがとても重要です。

 

タイピング

 

完成までの過程まで、その都度一つ一つ確認をする作業が必要です。

 

そして完成したWebサイトを修正・変更する時、HTMLやCSSを見た時に、

どこを修正するか?もしくは間違っている箇所はどこか?

そこを見付けるには、タグの名前や、内容の意味を

覚えていないといけません。

 

まずはひたすら文字入力、ここで役立つのがタイピングです。

ホームポジションをしっかり身に付けておけば、

手元を見なくても早く入力が出来て、またミスも少なくなります。

 

プログラミングも一緒で、HTML/CSSも、

まずはタイピングを習得することは必須です。

 

 

⭐️教室からのお知らせ⭐️

この秋、スマホ・タブレット・PCスキルアップにぴったりな、

ご新規の方にお得なキャンペーンを開始いたしました!

詳しい内容はこちら↓

スマホ・タブレット・PC初心者さんキャンペーン

期間は11月4日まで受付中です!

キャンペーンはご復帰の生徒様にも適応しております。

 

パソコン初心者の方、シニアの方、大歓迎!

もしご検討されてる方は、見学、無料体験もございますので、

どうぞお気軽にお問い合わせ下さいませ。

* 無料体験&無料カウンセリングでお待ちしております。

 

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

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

HP作成No10 brタグって何?

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

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タグ

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

8. HP作成No8 Webページ写真の準備

9. HP作成No9 Webページに写真

 

スキマ時間講座も10回目になりました。
このページから入った方は、
上記1~9までの工程を順を追って作業確認して下さい。
決して難しいことはしていないはずです。

さて、今回の目的は文字の改行についてです。

さっそく始めます。

デスクトップ → 2016tabiフォルダー → index.html

これをメモ帳で開きます。(下図参照)

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

 

次のような文章を写真挿入タグの下に追加入力します。

「2016年11月17日(木) 晴れた中のサイクリングは最高!」

下図赤丸内を参照

20161117br%e3%82%bf%e3%82%b03

入力できたら保存します。

ファイル → 上書き保存

完成したindex.htmlをブラウザ表示で確認します。

①index.htmlの上で右クリック。
②プログラムから開く → InternetExplorer

下図のようにIEのブラウザで表示確認ができます。

20161117br%e3%82%bf%e3%82%b01

よくみると、
「2016年11月17日(木)晴れた中のサイクリングは最高!」

が写真横に。

一つ改行できたら、下に下がるのでは?と発想してみます。

そこで、brタグ(強制改行)を文の前に入力します。

<br>
2016年11月17日(木)晴れた中のサイクリングは最高!

 

20161117br%e3%82%bf%e3%82%b04

ファイル → 上書き保存

index.htmlファイルをブラウザ表示で開いて確認。

①index.htmlの上で右クリック。
②プログラムから開く → EnternetExplorer

20161117br%e3%82%bf%e3%82%b02

文字が下に落ちてくれました。
brタグは強制改行してくれるのです。

でも少し窮屈にみえます。
そこで、もう一度brタグを入力してみます。
思い切って2つ追加、計3つになりました。
3行分改行するイメージです。

<br>
<br>
<br>
2016年11月17日(木)晴れた中のサイクリングは最高!

下図参照

20161117br%e3%82%bf%e3%82%b05

ファイル → 上書き保存

index.htmlファイルをブラウザ表示で開いて確認。

①index.htmlの上で右クリック。
②プログラムから開く → EnternetExplorer

20161117br%e3%82%bf%e3%82%b06

すると・・・。

どうでしょうか?上手く文字が配置された感じです。

brタグ(強制改行)は
<>開始タグ ~ </>終了タグで1セットのタグと違い単独で使えます。

終了タグがないのです。

<br>とよく似ているのに<br />がありますが、同じ意味です。

ここでは長くなるので解説を省きます。
興味のある方は、下記の用語で検索をかけてみて下さい。

<br>   <br />   html  Xhtml html5

brタグを覚えるとホームページの修正に役立ちますね。

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

 

HP作成No10
To be continued

 

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

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

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