HTMLを教える記事
|
アーティストになるつもりがない場合は、開発者として HTML を読んで、必要に応じて簡単な変更を加えるだけで済みます。以下の私の考え方に従ってください。この記事は HTML を理解するのに役立つことを保証します。もちろん、読みながら自分で試してみると、より深い理解が得られます。では、始めましょう: (以下の記号はすべて英語で入力されています) 1. HTMLの基本ルール <html> <ヘッド> <title>私のウェブページ</title> ………………………….. </head> <本文> ………………。 </本文> </html> ほぼすべての Web ページはこの形式に従います。これは Web ページに必要なタグです。各タグは < > 内に配置され、</ > で終わりますが、省略記号の代わりに多くの乱雑なものが追加されますが、これが私たちが目にするコンテンツです。 上記のコードをメモ帳にコピーし、.html ファイルとして保存して Web ページを作成します。 次に、メモ帳で開き、<body> の間に「Home」という単語を追加して保存し、開いて次の画像を確認します。 次に、ホームページの前後にタグ <a> を追加して <a href=”#”>ホームページ</a> に変更し、保存して効果を確認します。 それはインターネットでよく見かけるハイパーリンクでしょうか?ここで「ホーム」をクリックしても何も変わりません。空のリンクを追加したからです。ですから、鉄は熱いうちに打て、というわけです。前の方法に従ってページを作成し、b.html として保存し、上記の「#」を b.html に置き換えて、ページを開いて「ホーム」をクリックします。ページ b にジャンプするでしょうか? (もちろん、ページ a とページ b は同じディレクトリにある必要があります。) ここまでで、Web ページ上のすべての機能が <a> などのさまざまなタグによって実装されていることを理解できたはずです。これらのタグの機能を覚えておくだけで十分です。 2. Webページの構造 インターネットを閲覧するときに注意してみると、ウェブページは実際には図に示すようにブロックに分割されています。 もちろん、これはあくまでも大まかな構造です。必要に応じて、多くのブロックに分割することができます。ブロックに分割する主な目的は、側面を変更し、それぞれの表現スタイルを決定することです。 これは主に <div></div> タグによって実現されます。「ホームページ」に <div> タグを追加してみます。 <div> <a href=”b.html”>ホームページ</a> </div> 保存してもう一度開いてみてください。効果はどうですか? 変更前と同じですか? いくつか変更を加えてみましょう: <div style=”幅:200px;高さ:100px;境界線スタイル:solid;” > 操作中は、マークした領域が青い背景で表示されます。 <div></div> ブロックをたくさん追加すると、Web ページを 8 つの部分に分割して、各ブロックに必要なものを配置できます。 もちろん、多くの <div> は style="" を追加します。これらのスタイル設定が類似している場合、それぞれを設定するのは面倒です。通常は、これらのスタイルを別の .css ファイル (Web ページ内の各タグの表示スタイルを制御する) に配置し、必要な場所で呼び出します。以下で試してみましょう。 新しいメモ帳を作成し、名前を c.css に変更して開き、次のように記述します。 #ヘッダー{幅:200px;高さ:100px;境界線スタイル:solid;} そしてa.htmlで削除します 次に、</head>の前に<link rel="stylesheet" type="text/css" href="c.css" />を追加します。 それは c.css ファイルを導入することです。 CSS を別のファイルに配置する利点は、このスタイルが多くの場所で参照されている場合、この 1 か所を変更するだけですべてが変更されることです。そうでない場合は、各場所を手動で変更する必要があり、後でメンテナンスを行うのに不便です。 最後に、a.htmlの<div>を<div id=header>に変更します。 効果は以前と同じですか？ ここまでくれば、もう「詩は書けなくても暗唱できる」はずです。この記事は主に、HTML の一般的な理解と HTML が何であるかを知ることを目的としています。まだ取り上げていないタグがたくさんあります。そのためには、Web デザインに関する本を見つけて読んで覚える必要があります。 |
<<: CSS の border 属性と display 属性の使い方の簡単な分析
推薦する
JSを段階的に学ぶ方法についての簡単な説明
目次概要1. jsの位置づけを明確に理解する2. 明確な学習パス3. 自己規律と粘り強さ4. 練習し...
HTML で vue-router を使用するサンプル コード
vue と vue-router の紹介 <script src="https://...
Docker イメージを Docker Hub にプッシュする実装
イメージが正常にビルドされると、Docker 環境があれば使用できますが、イメージを Docker ...
MySQL 8.0.22 のインストールと設定のグラフィックチュートリアル
MySQL8.0.22のインストールと設定（超詳細）参考までに、具体的な内容は次のとおりです。みなさ...
MySQL インデックスの正しい使い方とインデックスの原理の詳細な説明
1. はじめになぜインデックスが必要なのでしょうか?一般的なアプリケーション システムでは、読み取り...
MySQL の binlog_format モードと設定の詳細な分析
MySQL レプリケーションには、SQL ステートメント ベースのレプリケーション (SBR)、行ベ...
JavaScriptはボタンをクリックして4桁のランダムな検証コードを生成します
この記事の例では、ボタンをクリックすることで4桁のランダムな検証コードを生成するjsの具体的なコード...
MySQL GTID の総合概要
目次01 GTIDの紹介02 GTIDの仕組み03 GTIDの利点と欠点04 テスト環境構築05 テ...
MySQL PXC は IST 送信のみで新しいノードを構築します (推奨)
需要シナリオ: 既存の PXC 環境には大量のデータがあります。新しく購入したサーバーをこのクラスタ...
Nginx 経由で Tomcat9 クラスターを構築し、セッション共有を実現する
Nginx を使用して Tomcat9 クラスターを構築し、Redis を使用してセッション共有を実...
ウェブデザインの概要
<br />1998年に最初の個人ページが誕生してから2008年の今日まで、デザイン業界...
MYSQL メタデータ ロック (MDL ロック) MDL ロックの問題分析
1. はじめにMYSQL の MDL ロックは常に頭痛の種でした。ロックについて話すとき、通常は I...
MySQL EXPLAIN出力列の詳細な説明
1. はじめにEXPLAIN ステートメントは、MySQL がステートメントを実行する方法に関する情...
CentOS 7にMySQLをインストールする詳細な手順
CentOS7では、MySQLをインストールすると、MariaDBもデフォルトでインストールされます...
jQuery でダイナミックなパーティクル効果を実現
この記事では、動的なパーティクル効果を実現するためのjQueryの具体的なコードを参考までに紹介しま...