KAT~インターン~ no.3 HTML

冬は寒くて、冷え性にはつらい季節です。部屋を暖かくしてから寝ようと思います。

 

先日、インターン初期トレの第3回目を行いました。今回は、勉強したことをブログに書いていきます。

*画像ファイル

まずは、画像ファイルについて。

画像ファイルにはjpg、png、gifなどの種類があります。

・jpg(ジェイペグ)→写真に多く使われ、色彩の細かな部分も表現してくれる。しかし、圧縮すると画像が劣化してしまう。また、データ容量が軽い。

png(ピング)→圧縮しても変化せず、背景の透過ができるので、ウェブサイトに適している。

・gif(ジフ)→小さな画像に使えて、コマ動画の作成ができる。

jpgやpngはパソコンにある画像の中でよく見かけます。また、Twitterで絵が動いている動画を見かけることがありますが、それがgifということでした。私もgifを使って、絵を動かしてみたいなと思いました。

 

*比率

人間には美しいと感じる比率があります。

黄金比=1:1.618 

黄金比は自然界に多く存在している比率です。例えば、巻貝やTwitterのアイコンも黄金比になっています。

白銀比=1:1.414

白銀比は人間が作った建造物などに使われている比率です。スカイツリーやキティちゃんなど。

自然界のものが黄金比であると初めて知りました。身近なところに美しいと感じる比率があり、無意識のうちに黄金比を美しいと感じているんですね。

 

*実践

色々な知識を学んだところで、実際にタグを書いていきました。

1.画像が変わる

 
<img src="./img/image1.jpg" onmouseover="this.src='./img/image2.jpg'" 
onmouseout="this.src='./img/image1.jpg'">

マウスを画像の上に載せたとき、画像が変化します。画像1から画像2、そしてマウスを画像から離すと画像1に変化します。また、onmouseoutを書かなければ、変化した画像のままになります。

 

2.文字や画像を動かす

<marquee>こんばんは</marquee>

このタグの場合、文字が右から左に動きます。タグの種類によって、他にも様々な動きをつけることができます。

 

3.リスト

<li>を使ってリスト表示することができます。

また、<ol>~</ol>でリストに番号をつけることができます。反対に、<ul>~</ul>を使うと番号なしのリストになります。

 

4.表

<table border="1">→テーブルの枠線の太さを設定 <tr>→行 <td>→列

これらのタグを使って表を作成します。

<table border="1">
    <tr>
        <th>見出し</th><th>見出し</th>
    </tr>
    <tr>
        <td>セル3</td><td>セル4</td>
    </tr>
</table>

実際にやってみて、私は行と列が増えたら、どこが行でどこが列か、わからなくなりそうだなと感じました。あまり、表を作成する機会はないかもしれないけれど、休み期間の間にしっかり頭で整理しておきたいなと思いました。

 

5.コメントアウト

例:<!--コメント-->

コメントアウトは備忘録のようなメモのことです。後から修正するときや他の人が見たときなど、わかりやすいように活用します。

私も制作中、自分で作ったものなのに「これ何のためにあるの?」となることがあります。復習で理解しやすいよう、積極的に使用していこうと思います。(使いすぎもよくないかもですが…)

 

*HTMLの構造

HTMLの<head>~</head>部分には、宣言文やタイトル、メタ情報などが記載されています。

そして、<body>~</body>部分には、見出しやメインコンテンツ(内容)、付随情報などが記載されており、この部分がWebサイト上に表示されています。

 

*ブロック要素とインライン要素

ブロック要素とはひとまとまりを表しています。そして、ブロック要素の中に含まれているのがインライン要素であり、インライン要素はまとまりを作りません。これは、文字の情報や付随的な情報を追加しています。

 

*感想

HTMLで動きをつけられることを知らなかったので、画像が動いて面白かったです!また、今回でHTMLの勉強は終了ですが、まだまだ知らないタグが多くあるのでいじりながら覚えていきたいと思います。

 

次回からはCSS

おわり