最短でHTMLのコツを知りたい社会人へ

HTML&CSSの基礎はおいといて、まずは目の前の危機を救うためのブログです。元職業訓練校の講師が最短で仕事に使えるコツを伝授!

htmlファイルをサーバーにアップする

f:id:murasame-fumito:20170712184626p:plain

 

htmlファイルを保存して、ひとまず作業完了です。

が、変更したファイルをサーバーにアップロードしないとホームページは変わりません。

 

あなたが今見ているこのブログもどこかにあるサーバーにアクセスして

(ブラウザにコピーされた)データを見ているんです。

 

|更新したデータをサーバーにアップする

 

まず、FTP転送アプリを準備します。

 

有名なものはFilezilla(ファイルジラ)やFFFTPというアプリです。 

今回はmacOSでも使えるファイルジラを使用します。

 

"Filezilla"で検索しアプリをダウンロードし、インストールします。

 




最短でイメージ画像を差し替えるコツ

イマドキの手に職って、ITエンジニアだと思う【IT派遣テクノウェイブ】

f:id:murasame-fumito:20170710230543p:plain

 

【振り返り】

テキストを差し替えるコツはつかめたでしょうか?

白い文字の部分のみを変更して保存すれば大丈夫です。

また、入れ子(ネストとも言う)構造や全角になってないか確認してくださいね。

 

ーーーーー

 

今回は最短で画像を差し替えるコツをお伝えします。

Webページは主に画像とテキストがコンテンツ(内容)です。

 

 

画像データは画像がまとまって入っているフォルダに入っています。

そこからHTMLファイルへリンクして表示させています。

 

まず、差し替え後に使用する画像データを画像フォルダに入れます。

おそらく画像フォルダの名前はimgフォルダまたはimagesフォルダ

になってるかと思います。

 

f:id:murasame-fumito:20170710230712p:plain

 

 

画像を表示させる方法はimg(イメージorアイエムジー)タグを使用します。

 

|例として

<img src="images/old.jpg">

と言う記述があったとします。

 

この中のold.jpgを変更すれば良いのです。

 

差し替え後に使う画像をimgフォルダに入れてから

<img src="images/new.jpg">

 

表示させたい画像の名前を指定してあげれば良いのです!

もちろん、ちゃんと保存してからブラウザで確認してくださいね!

 

ちなみにalt="株式会社デザート"となってるalt(オルト)属性は

画像が表示されない場合にテキストで表示されます。

また、SEO的にも有効なので出来る限り内容を指定してあげましょう。

 




htmlファイルのテキスト変更の注意点

f:id:murasame-fumito:20170706183913j:plain

ブラケッツでhtmlファイルを開くと自動的に色分けされて表示されます。

テキストの変更だけならエディタ上の白文字の箇所を打ちかえれば、

データが壊れることはありません。

 

ゆっくり丁寧に白文字の箇所を選択し文字を変更し、

保存して作業完了です!

 

続きを読む

テキストエディタでhtmlファイルを修正する

ウィンドウズならメモ帳、マックならテキストエディットでもhtmlファイルを修正することはできますが、初心者こそ専用のテキストエディタを使用しましょう。

 

おススメのテキストエディタ

brackets(ブラケッツ)

 

こちらのエディタは検索すればいろいろと情報が出てくるので、

詳しくは解説しませんが、何も考えずにダウンロードして

インストールしちゃいましょう!

 

インストールできたら、htmlファイルを開きます。

brackets.io

【早い者勝ち!】 あなたのお名前、残ってる?

急げ!新ドメインは早いもの勝ち!

いきなりホームページの更新・修正(汗

f:id:murasame-fumito:20170706170408j:plain

「若いんだからインターネットわかるだろ?」

「うちのホームページの写真と文章を変えて欲しい」

「わからなかったらネットで調べて対応しろ」

など、いきなりホームページの更新・修正を振られても困りますよね。。

 

このサイトでは職業訓練校の講師歴5年、渋谷・代官山でWEB制作4年超の現役エンジニアが基礎はおいといて、今現在、目の前にある危機を最短で乗り越えるためのコツのみを発信していきます!

 

テキスト変更のコツ

  1. htmlファイルを入手する
  2. テキストエディタでhtmlファイルを開く
  3. テキストを変更し、保存する

 

1.htmlファイルを入手する

まず修正するページの元データ、つまりhtmlファイルが必要です。

htmlファイルがなければ、ブラウザからコピーを取ってしまいましょう!

 

ブラウザ(ここではchrome)上で右クリックして「ページのソースを表示」

表示されたソースをコピーしてテキストエディタにペーストしましょう。

 

別名保存で拡張子を.html(ドットエイチティーエムエル)ファイル

にして保存します。

急げ!新ドメインは早いもの勝ち!

【早い者勝ち!】 あなたのお名前、残ってる?