Basic HTML - Getting Started with Your Website
ウェブサイトの立ち上げは困難な作業になることがあります。特に、ウェブサイト構築の経験が限られている場合はそうです。始めるために、Dynadotは提供しています。 無料ワンページホスティング すべてのドメイン購入時に。私たちの1ページホスティングには、HTMLを知らない人々がウェブサイトを構築するのを助けるための"wizard"が備わっています。ただし、私たちのウィザードでは、HTMLほどサイトに対して多くのことができないので、ここに基本を紹介します*:
<b>bold</b>
<i>italics</i>
<u>underline</u>
フォントサイズ
フォントサイズを変更する最も簡単な方法は、これらのタグを使用することです:
<big>フォントサイズを1段階大きくする</big>
<small>フォントサイズを1段階小さくする</small>
フォントをさらに大きくしたり小さくしたりする必要がある場合は、これらのより具体的なタグを使用できます:
<font size="+2">引用符内の数字でフォントサイズを増やします</font>
<font size="-2">引用符内の数字でフォントサイズを減らします</font>
You can also be even more specific with your font size by specifying a number 1-7 as the font size with 1 being the smallest size and 7 being the largest:
<font size="1">最小フォント 8 pt</font>
<font size="7">最大フォント 36 pt</font>
フォントサイズの別のオプションは、ヘッダータグ1-6を使用することです。これにより、テキストの周りにスペースも追加されます:
<h1>最大の見出し</h1>
<h6>最小の見出し</h6>
フォントカラー
フォントのサイズを変更するだけでなく、色も調整できます。
<font color="blue">青</font>
<font color="red">赤</font>
異なる赤や青の色合いを使いたい場合は、単語 "red" や "blue." の代わりに6桁の16進数を入力できます。すべての色は赤、青、緑で構成され、各色には独自の "code." があります。コードの最初の2桁(時には文字)は赤を表し、次の2桁は緑を、最後の2桁は青を表します。ダウンロードできます カラーコピー PC用または デジタルカラーメーター Mac用で、これらの製品を使用して画面上の任意の色の上にカーソルを合わせると、必要なコードが表示されます。たとえば、上記の青のコードを使用する場合、次のようになります。
<font color="#0000FF">同じ青</font>
<font color="#3DC6EA">and here is an example of another shade of blue you can choose using the code</font>
フォントタイプフェース
最後に、フォントのタイプフェースを変更できます。アイデアが必要な場合は、Microsoft Wordを使用できます。
<font face="arial">arialフォント</font>
<font face="comic sans ms">comic sans msフォント</font>
<font face="lucida handwriting">lucida handwriting</font>
これで全てをまとめる必要があります。"font"という単語が含まれるものについては、すべての情報を1つのタグに入れるだけで済みます。ヘッダータグを使用したり、太字、斜体、下線を追加したい場合は、それぞれのタグで追加できます。
<font size="4" color="376E1E" face="calibri">you can put it all together</font>
<b><font size="4" color="376E1E" face="calibri">you can bold all of it</font></b>
<font size="4" color="376E1E" face="calibri">または太字にすることもできます <b>part</b> of it</font>
間隔
Now that you're able to adjust your font, you'll want to create paragraphs, line breaks, and in some cases you may need to manually add spaces:
<p>段落タグを使用すると、テキストが独自の段落に配置されます...</p>
<p>...そして次の行で</p>
改行を使うのは...<br>
...Enterキーを押して次の行に移動し、このページの他のすべてとは異なり、閉じタグは必要ありません(これは閉じタグです</p>)。単に再度入力するだけです...<br>
...もう一度次の行へ行くようなものです。
テキスト間のスペース(スペースバーからのもの)にコードを使う必要はありません。追加のスペースを追加したい場合を除きます。なぜなら、HTMLはスペースバーで複数入力しても1つしか認識しないからです。テキスト間にスペースを与えるには、コード を使えます。
リンク
One thing you'll probably want to add to your website are links to other pages on your website or even other websites. Links are easy to add using this code:
<a href="http://www.dynadot.com">これはDynadotのホームページへのリンクです</a>
上記のリンクをクリックすると、ブラウザの設定に応じて別のタブまたはウィンドウで開くことに気づくかもしれません。これは簡単に追加でき、ウェブサイトから離れるリンクを貼る場合や、特定のページ(ブログなど)で訪問者を失いたくない場合にお勧めです。なぜなら、顧客がブラウザの戻るボタンをクリックしなくてもそのページを開いたままにしておけるからです。必要なのは、リンクの後に target="_blank" を追加することだけです。
<a href="http://www.dynadot.com" target="_blank">これはDynadotのホームページへのリンクです</a>
画像
最後に、サイトに画像を追加したい場合があります。 HTMLで画像を追加するには、どこかにホストする必要があります。自分で画像をホストする場所がない場合は、次のようなサービスを利用できます。 Tiny Pic.com 無料で画像をアップロードし、HTMLタグを生成してくれるサービスです。アカウントを作成したくない場合は、生成されたHTMLを保存するだけです(ただし、Microsoft Wordで保存しないでください。 Wordがコードを動作しなくなるものを追加することがあるからです)。一部の画像は非常に大きいので、スペースを節約するために最適化したい場合があります。画像のファイルサイズを減らすために使える無料の画像最適化ツールがいくつかあります。例えば、 Image Optimizer.net. 基本的な画像タグの例を以下に示します:
<img src="https://i45.tinypic.com/9bkglk.jpg"> これはこのように見えます: 
画像に枠線を追加したり、サイズを変更したり、周りにスペースを追加したりすることもできます:
<img src="https://i45.tinypic.com/9bkglk.jpg" border="2" width="100" height="30" vspace="10" hspace="20" align="left">
ご覧の通り、画像には枠線があり、幅が広く高さが低く、上下左右にスペースが取られています。また左揃えになっているので、テキストが画像の横に表示されています。
画像にリンクを追加することもできます。画像タグの周りにリンクタグを置くだけで、次のようになります:
<a href="http://www.dynadot.com" target="_blank"><img src="https://i45.tinypic.com/9bkglk.jpg" border="0"></a>
この画像をクリックすると、ホームページに移動します: 
これにより、テキストリンクで見られる青色の境界線が画像の周りに追加されることがあります。それを削除するには、画像タグに border="0" を追加するだけです。また、Tiny Pic.comで生成されたHTMLには、画像タグ内に alt="Image and video hosting by Tiny Pic" があることに気づくかもしれません。これは、誰かのブラウザで画像が正しく表示されない場合にテキストを画像と一緒に置くために使えます。代替テキストを追加することは、検索エンジン最適化(SEO)にも役立ちます。
HTMLについて少し自信がついたところで、自分のウェブサイトでスキルを試してみましょう。ただし、不完全なHTMLで保存する前に、無料サービスを使ってHTMLをテストすることをお勧めします。 onlinehtmleditor.net。上部には簡単なHTMLボタンもあり、役立ちます。今、あなたはただ あなたのドメイン まだお持ちでない場合は、今日からウェブサイトを始めましょう!
*Please note that the font tag is deprecated and may not show correctly in all browsers. It is best to define font style in CSS, which we will cover in a later blog post.
投稿者 ロビン・ノーガン