HTMLきほんpc操作中

目次

文字(色、
大きさなど)
について
HTML画像
(要素と属性、
サイズなど)
のとこへ
コメント、空白
など表示
について

はじめに

テキストエディタを準備し、テキストエディタにそれぞれHTML、CSSを記述し、HTMLファイル、CSSファイルを作ります

HTML 文字や画像などwebサイトの中身や骨格になります。

CSS 色や大きさ、余白など設定。webサイトの装飾になります。
HTMLと同じファイルに記述できますが、通常、HTMLファイルとは別にCSSファイルを作成します。
テキストエディタ テキストエディタには「atom」,「Sublime Text」,「TeraPad」など多数あり, 無料のものも多くあります。

htmlの書き方の基本

「ファイル名.html」として保存します。

index.html

サイトのトップページのファイル名は index.htmlにする。

<html>～</html> あいだに<head>～</head>や<body>～</body>など、すべての内容を記述します。
DOCTYPE宣言(ドックタイプ宣言) 「Document Type Definition」（DTD）のこと。HTMLの初めに記述します

文書がどのバージョンのHTMLで、どの仕様で作られているのかをブラウザに伝えるためのもの。

<!DOCTYPE html>
lang属性 lang属性で言語を指定します。
日本語の場合は<lang="ja">、英語の場合は<lang="en">

<html lang="ja">～</html>

<head>～</head>

cssファイル名など、webサイトの情報、設定などを記述します。

<link rel="stylesheet" href="cssファイル名" type="text/css"></style> CSSファイルを適用させます
metaタグ webページの設定や情報等を伝えるタグ。文字化けしないための文字コードやスマホ対応のコードを記述します。metaタグへ

<title>～</title> ブラウザのタブや検索エンジンの検索に表示されます。SEO的にも重要になります。 各ページごとにつけます。
30字以内で記述しましょう。この文字数を超えると一部が省略されます。 <body>～</body>あいだに本文を記述します。

要素について

要素　見出しや段落などのこと。タグと中身を合わせた全体
ブロックレベル要素

文書の骨組みとなる要素です。箱のようなもの
見出し要素（h1, h2, h3など）、p、ul、li、div、table など。

縦に積まれていく表示になります。基本的に横に並べることはできない
インライン要素 ブロックレベル要素の中身として使われる要素です。
a、span、img、strong など。

行のようなもので横にならぶ表示になります。

フォント　文字


外部リンク参考サイトさん ・文字ちょうせい 　・ページ全体の文字色 　・文字の大きさ

画像

画像のきほん

　<IMG src="画像のアドレス"　alt="画像の代わりとなるコメント">

IMG要素にsrc属性をつけて画像のアドレスを指定。

alt属性は画像の読み込みに失敗した等に画像の代わりにコメントを表示する。

img要素には、src属性（src="値"）とalt属性（alt="値"）が必須となります。

外部リンク参考サイトさん ・がぞう基本 　・がぞう設定詳細
サイズ 画像のサイズを指定するには、img要素にwidth属性とheight属性をつけ値をピクセル数またはパーセントにします。

<img src="画像アドレス" alt="コメント" width="数値または%" height="数値または%">

画像の表示サイズは小さく出来ますが、ファイルサイズ、データ量そのものは変わりません。

サイズを指定するとブラウザの読み込みスピードが多少速くなるので、必ず指定する。

外部リンク参考サイトさん　サイズ設定について
スタイルの調整 余白や位置などを調整したい時は
cssで設定しIMG要素にclassをつけます。

<img src="画像アドレス" alt="コメント" width="数値または%" height="数値または%"class="クラス名">

表示についてなど

htmlのコメント

<!--コメント文-->

テキストエディタ内だけの表示になり、ブラウザでは表示されません。 外部リンク参考サイトさん コメントについて
「 < 」と「 > 」を表示させる 通常だと「 < 」と「 > 」で囲むと表示されなくなりますが、表示させる。

「<」→「＆ｌｔ；」　「>」→「＆ｇｔ；」　ここではそれぞれ全角だが、半角にするとそれぞれ「<」、「>」になる

空白

テキストエディタ上での 「(半角)スペース」、 「改行」はいくつでも「1つの空白」。
スペースキーを使って半角スペースをいくつ打っても、ブラウザ上で表示される空白は1つだけ。

ただし、全角スペースは打った分だけ空白が表示される。

背景色　 <BODY bgcolor="カラー名">

アップロードについて

作成したHTMLファイルをweb上で見るためには、「filezilla」などが必要になります。

自分のＰＣだけ（ローカル環境と言います）で見る場合はアップロードしなくても可能です。

楽しくpc