コンテンツに飛ぶ | ナビゲーションに飛ぶ

コンテンツファイル(HTMLドキュメント)の作成とアップロード
 

コンテンツファイル(HTMLドキュメント)の作成とアップロード

WebページはHTML(Hyper Text Markup Language)と呼ばれる言語を用います.HTMLはタグという<>で囲まれたマーク(命令)を使って,文章の構造(見出しやタイトルなど)や,修飾情報(文字の大きさや色,画像など)を表示することが出来ます.教育用端末やWindowsでドキュメントファイルを作成する場合は,以下のエディタをご利用ください.

    教育用端末
    Mac
    例)mi,テキストエディットなど
    Windows 例)terapad,wordpad,メモ帳など

 

コンテンツファイルを作成する

教育用端末でHTMLドキュメントを作成する手順(例:mi)

作成

    1. 「Finder」-「環境設定」-「サイドバー」 ホーム(家マーク)にチェックが入っていない場合は,チェックを入れて閉じてください.
    2. 「mi」を起動してください.
    3. 「アプリケーション」を選択します.

      「アプリケーション」がない場合は,「Finder」の中に「アプリケーション」があります.

      「アプリケーション」の中から「mi」を選択し,起動します.

    4. 「ファイル」→「新規作成」→「HTML」を選択します.
    5. 新規ファイルにHTMLタグを入力します.
      以下のタグは基本構成です.(英数字は必ず 半角で入力してください.大文字でも小文字でも構いません)
    6. タグの説明
      <html>~</html>
      このタグの間にあるのは,全てHTMLドキュメントの一部です.
      <head>~</head>
      このタグの間にあるのは,全てHTMLドキュメントのヘッダーの一部(タイトルやメモなど)です.
      <title>~</title>
      タイトル.ここで書かれたものはタイトルバーやお気に入りに追加される場合にも表示されるものです.
      <body>~</body>
      HTMLの本文を囲むタグ.このタグの間にあるのは,ブラウザで表示される実際のテキストです.

     

    保存

      1. 「ファイル」→「保存」を選択して下さい.
      2. 保存名に,「.html」という拡張子をつけてください.
        ここでは 「index.html」 と名前をつけます.ホームの「public_html」 の下に保存します.
      3. 保存したファイル「index.html」を表示し,内容を確認してください.
        画面左下の「Finder」をクリックし,左側デバイスのところのホームを選択します.
        保存しているフォルダの中から,「public_html」を選びクリックするとファイルのアイコンが出てきます.

      4. 「index.html」のアイコン上で右クリックし,「このアプリケーションで開く」→「Safari」を選択してください.
      5. もう一つタブを開くと,次のように表示されます.
        文字化けする場合は,「表示」-「テキストエンコーディング」でUnicode(UTF-8)を指定してください.

       

      教育用端末以外のMacでHTMLドキュメントを作成する場合
      エディタを起動し,教育用端末の場合と同じ手順でファイルを作成し,「index.html」という名前で保存してください.

      WindowsでHTMLドキュメントを作成する場合
      エディタを起動し,教育用端末の場合と同じ手順でファイルを作成し,「index.html」という名前で保存してください.保存場所はデスクトップでかまいません.

       

      コンテンツファイルのアップロード

      教育用端末
      フォルダとコンテンツファイルを作成し保存すると,アップロードが完了します.Webブラウザを開いて,アドレスバーに個人WebのURLを入力すると,内容が表示されます.

       

      教育用端末以外のMac
      Cyberduckを使ってアップロードしてください.

       

      Windows
      WinSCPを使ってアップロードしてください.

       

      HTMLの書き方(例)

      画像を中央揃えで挿入する

      上記HTMLドキュメントの作成で入力したHTMLタグに,太字の部分を追加して下さい.以下の例では,画像ファイルを"gazou.gif"にしています.
      画像ファイルは,先ほど作った 「public_html」フォルダに保存して下さい.

        <html>
        <head>
        <title>Welcome to My Homepage</title>
        </head>
        <body>
        <center>
        <img src="gazou.gif">
        <br>

        ここが本文になります。
        </center>
        <br>

        </body>
        </html>
        タグの説明
        <center>~</center>
        センタリングのタグ.文字や画像などを水平方向の中央に配置します.
        <img src="URL">
        画像を貼り付けるタグ.URLのところには,画像のある場所と名前を入力します.

        <img src="URL" align="leftまたはright">
        画像の表示位置を左または右へ変更することができます.
        <br>
        改行タグ.テキスト中で改行しても,改行タグを付けていなければブラウザで見たときには改行されずに表示されます.

      これを上書き保存すると,以下のように表示されます.

       

      背景の色を指定・水平線の挿入・神戸大学へのリンクをつける

      上記HTMLドキュメントに,更に,以下の太字の部分を追加してください.

        <html>
        <head>
        <title>Welcome to My Homepage</title>
        </head>
        <body bgcolor="yellow">
        <center>
        <img src="gazou.gif">
        <br>
        ここが本文になります。
        </center>
        <br>
        <a href="http://www.kobe-u.ac.jp">
        神戸大学のホームページへ</a>

        </body>
        </html>
        タグの説明
        <body bgcolor=" ">
        背景の色を指定します.
        #ここでは"yellow"を指定しています.

        <body background=" ">

        背景用のファイルを指定します.
        <hr>
        ページに水平な線を引きます.
        <a href="URL">~</a>
        リンクを貼ります.
        リンクを貼る場合は,リンクフリー等明示されているものを除き,リンク先の承諾を得てください.

      上書き保存すると,このようになります.