web作成(3) 自己紹介の作成(List)、ブログ開始

アドレスについて

基本的には自分のトップページに作成されたファイル名を追加して閲覧する。
例えばpublic_htmlフォルダ内でhoge.htmlというファイルを作成した場合、ブラウザで確認する場合
http://roy/~c1xxxxx/hoge.html
となる。ただしindex.htmlだけは特別で、ブラウザのアドレスバー入力時ファイル名を省略することができる。

注意＋重要!!
自分で作成したファイルをブラウザ上で確認する場合、 http:// からアドレス入力しないといけない。(ブラウザの仕様のよう)

なので、必要な場合アドレスをこのページに記述するので、
http:// から始まるアドレスをすべてコピペして使うと良い。

ちなみに public_html 内で新規フォルダを作成し、その中にファイルを作成したときのアドレスは、
自分のトップページ/作成したフォルダ名/ファイル名
となる。
例 public_html 内にabcというフォルダを作成し、そこにaiueo.htmlというファイルを作成した場合アドレスは
http://roy/~c1xxxxx/abc/aiueo.html
となる。(index.html は省略できる)

自己紹介作成

自己紹介ページを新規作成する。ファイル名は profile.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>profile</title>

</head>
<body>
 <h1>自己紹介</h1>
  <ul>
   <li>名前 公益太郎</li>
   <li>出身 酒田市</li>	  
   <li>生年月日 2006年 5月1日</li>
   <li>趣味 読書</li>
   </ul>
  <p>
  <a href="index.html">もどる</a>
 </p>
</body>
</html>

各自ブラウザで確認する場合のアドレスは
http://roy/~c1xxxxx/profile.html
となるので上記アドレスをコピペ、学籍番号を自分のものにして確認する。

<h1></h1>
見出しタグ。見出しダグには <h1></h1>〜<h6></h6>まであり、 1が一番字が大きく、6が一番字が小さく表示される。サンプル
<ul></ul>
順序無しリスト。わかりやすく言えば箇条書の開始と終わり。
ちなみに順序ありリスト(番号つき箇条書)は <ol></ol> と記述する。

<ul></ul>、<ol></ol> の中で使うタグは <li></li>のみと決まっている。
<li></li>
リスト表示。<ul></ul>、<ol></ol> の中で使用する。

ブログ開始

本日からブログを開始し、第13回の授業までに完成させる。ファイル名はdiary.htmlとする。
ブラウザで確認するときのアドレスは
http://roy/~c1xxxxx/diary.html

h2(見出し2)を使用したブログの例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>日記</title>

</head>
<body>
<h1>日記</h1>

<h2>2025年6月26日(木)</h2>
<p>
今日は1日授業で大変だった。レポート期限は明日まで。
</p>
<p>
バイト終わったのが22時だったのでそこからレポート作成に励んだ。
</p>

<h2>2025年6月27日(金)</h2>
<p>
授業後サークルのメンバーで集まって今後の予定を計画した。
</p>

</body>
</html>

各自アクセスし確認してみる。.

このベースを使いブログを作成してみる。
ブログは今後定期的に更新し、10日以上記録する。過去にさかのぼってもOK。

本日の課題

トップ