04 HTMLコードまとめ(1)

ここではこれまで紹介してきたHTMLを使った初歩的なコードをまとめます。

文字の色や大きさを決める

まずは文字を表示するのは<p></p>でしたね。
<p>HTMLで初めて書きます。</p>

次は”初めて”を太字にします。太字は<strong>です。
<p>HTMLで<strong>初めて</strong>書きます。</p>

それではさらに”初めて”を赤で表示しましょう。これには<font  color = "red"></font>を使います。(コードのダウンロードはここから。)
<p>HTMLで<font color = "red"><strong>初めて</strong></font>書きます。</p><font color = "orange">

さらに文字の大きさを大きくしてみましょう。 (コードのダウンロードはここから。)
<font size="+2></font>を使います。
<p>HTMLで<strong><font size="+2">初めて</font></strong>書きます。</p>

見出しを作る

<h2> はじめに</h2>

画像を表示させる

画像は<img crc></img>ですね。あとで分かり易いように画像フォルダをimagesにしてデータを保存することも学びましたね。(コードのダウンロードはここから。) alt=""で説明を追加できます(alt=alternative) 。
<h2>画像の表示</h2>
<p>以下に画像を表示します</p>
<p><img src="../images/tempimage.png" alt="テスト画像 "></p>

※ ../ は相対path , 絶対path

リンクを張る

外部のURLのリンクは<a href=""></a>です。””の中にURLを挿入します。(コードのダウンロードはここから。)

<h2>リンクの挿入</h2>
<p>以下の太字のところをクリックするとgoogleのページが開きます。</p>
<a href="https://www.google.com/"<strong>ここ</strong></a>

表を作成する

表の例として 02で解説したコードを再利用します。

tableは表です。
theadはtable headerです。表の行を指定します。
tbodyは表の内容部分
trとthは各要素を記載します。

<table class="waffle" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="row-header freezebar-origin-ltr"></th>
<th id="0C0" style="width:100px;" class="column-headers-background">A</th>
<th id="0C1" style="width:100px;" class="column-headers-background">B</th>
</tr>
</thead>

<tbody>
<tr style="height: 20px">
<th id="0R0" style="height: 20px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 20px">1</div>
</th>

   <td class="s0" dir="ltr">商品名</td>
<td class="s0" dir="ltr">単価(円)</td>
</tr>

  <tr style="height: 20px">
<th id="0R1" style="height: 20px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 20px">2</div>
</th>

  <td class="s0" dir="ltr">りんご</td>
<td class="s1" dir="ltr">150</td>
  </tr>

<tr style="height: 20px">
<th id="0R2" style="height: 20px;" class="row-headers-background">
<div class="row-header-wrapper" style="line-height: 20px">3</div>
</th>

<td class="s0" dir="ltr">みかん</td>
<td class="s1" dir="ltr">100</td>
</tr>

</tbody>

</table>

Google Driveにフォルダを作成する

Google drive にある画像を挿入するには、まずはgoogle driveに下記の手順でフォルダを作成します。

Google dirveを検索してログインします
新規をクリックしてフォルダを選択します
新しいフォルダに名前「images」をつけます
作成をクリックします

Driveから画像をSiteに挿入する

Google DriveにあるデータをGoogle Siteに追加するには、右の挿入ツールのDriveを選択する方法と画像を選択する方法があります。

Drivegoogle siteの右側のツールからドライブを選択します。フォルダを選択して、目的のファイルを選択します。

もう一つの挿入→画像を選択して挿入する方法です。
右のツールボックスの画像をクリック
ファイルの選択
右下の挿入ボタンで挿入

※この方法ではPC にある画像もアップできますが、アップロードや、drag & dropで挿入したファイルは後から変更する場合に元ファイルがわからなくなります。このためデータをdriveで管理しておくと便利です。

Google DriveにあるデータのリンクをGoogle siteに張り、クリックすると画像や動画が表示されるようにします。
youtubeなどのURLを挿入する方法も同様です。

Driveにアップされたデータの右の点々マークを右クリックしてプルダウンメニューから共有を選択しリンクをコピーをクリックします。これでリンクがクリップボードにコピーされました。このリンクをgoogle siteの文字を選択して、その後編集ボタンの中のリンクボタンでリンク挿入を開いてペーストします。

driveにファイルをアップロードする作業の短い動画はここをクリックして動画を表示。

他の方法は文字をクリックすると画像が別ページで開くリンクの張り方を以下に説明します。

同様に左のツールから挿入/画像/選択でドライブ内のファイルを選択し、作成をクリックします。これで下に画像が挿入されます。

Youtubeなどのリンクも同様に埋めることができます。ここをクリックしてください。youtubeのリンクはYoutubeの管理画面でコンテンツの右にある点々のその他のオプションをクリックして、以下の表示で、「共有可能なリンクを取得」をクリックして、クリップボードに入れることができます。