第1回 webページの基礎知識

Webとは

Webの基礎知識

NAVERまとめ「[HTMLの歴史] HTMLの誕生からHTML5までをザッと要点紹介」

構造言語と表現言語

構造言語：HTMLなどのwebの構造を表す言語。

表現言語：cssなどのHTMLを装飾する言語。

Webの仕組みを理解する

増田先生の「webの基礎知識」のページ

web担の「URLとURIは何が違うの？」

HTMLとは

基本のHTMLとタグ

HTMLファイルの作成と表示
html HTML文書を示す
head ページの設定情報を記述する
meta HTML文書に関する情報を示す
body ページのコンテンツを記述する 
<!DOCTYPE html>
<html lang="ja">
  <head>
      （そのページの基本情報↓文字、タイトル…）
      <meta charset="utf-8">
      <title>ページのタイトル</title>
  </head>
  <body>
    （そのページの本文）
  </body>
</html>

見出しと段落
h1～3 見出しを示す
p 段落を示す 
<h1>見出し1</h1>
<h2>見出し2</h2>
<p>適当な文章を打ち込んでみましょう</p>

リスト
ul 順番なしリストを示す
ol 順番付リストを示す
li リスト項目を示す 
<ul>
<li>バナナ
<li>りんご
</ul>

<ol>
<li>卵を割る
<li>フライパンをあたためる
<li>卵をフライパンに入れる
</ol>

表
table 表を示す
tr 行を示す
th 表見出し項目を示す
td 表データ項目を示す
thead表ヘッダーを示す
tbody表ボディを示す
tfoot 表フッターを示す 
<table>
  <caption>身近な果物</caption>
  <tr>
    <th>名称</th>
    <th>味の特徴</th>
    <th>色</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>甘酸っぱい</td>
    <td>おおむね赤</td>
  </tr>
  <tr>
    <td>なつみかん</td>
    <td>かなり酸っぱいと思う</td>
    <td>たいてい黄色</td>
  </tr>
</table>

追加の構造を示す
article 独立した記事のセクション
section セクション
aside 本筋から外れる内容のセクション
header ヘッダーを示す
footer フッターを示す

非推奨タグ

HTML/XHTML は構造の記述言語とし、表現の記述はCSSに任せるようになってきてます。このため、見栄えの設定のためのタグなどが非推奨とされています。

非推奨タグの例

非推奨タグの例
タグ 用途
<applet> Javaアプレット使用
<basefont> 基本フォント指定
<center> 中央揃え
<dir> リスト表示
<center> 中央揃え
<isindex> 検索語入力欄表示
<menu> リスト表示
<s> 取消線付き
<strike> 取消線付き
<u> 下線付き
その他の非推奨タグの例

宿題

  1. 教科書を見ながら、今日学んだところまでのタグを全て使ってHTMLファイルを作成しなさい。ただし内容は教科書通りでなく、自分なりのコンテンツに変更してください。
  2. 関連するファイル一式を、ウェブページとしてアップロードしなさい。
  3. 関連するファイル一式を、自分の学籍番号のフォルダを作って授業フォルダに提出しなさい。
    4. 授業フォルダの場所：
    \\nas002.term.usmc.dendai.ac.jp\授業用ワークスペース\千住キャンパス\前期\未来科学部\②情報メディア学科\FI1コンピュータプラクティス／Webページ制作(森本有紀)\第09回\提出

〆切：今週金曜日正午