HTML基本

基本的なマウスの操作方法と用語
拡張子の確認
自分ホルダーの確認
1. 階層イメージ
自分のプロフィールを作成してみましょう！
HTML入力
1. Macの場合
  1. テキストエディット
  2. コトエディタ
<!doctype html>
<html></html>
1. HTML基本　（ポイントだけ）
<meta charset=”UTF-8″>
<img src=”…”>
<h1><h2>…
<p>
クロームでHTML表示の確認
メモ
スクショの方法

基本的なマウスの操作方法と用語

基本的なマウスの操作方法と用語をご紹介します。クリックとは、マウスのボタンを指で押してすぐ離す操作を指します。マウスを押したままは、クリック＆ホールドといいます。クリックは、「力」を込めて押す必要はありません。ボタンも軽く指の腹で「カチ...

拡張子の確認

拡張子が表示されているか確認します。

WIN
https://www.pc-koubou.jp/magazine/36291

Mac
https://support.apple.com/ja-jp/guide/mac-help/mchlp2304/mac

自分ホルダーの確認

NISHIZONO

HTML_CSS
└profile
└index.html
└img
└01.jpg

階層イメージ

自分のプロフィールを作成してみましょう！

ご自身のお写真（スマホの自撮りとか、Facebookから引っ張ってくるとか、）
商用可無料から自分のイメージに合うものを探してもOK!
ファイル名：01.jpg

へ変更します。

画像の準備が出来ました

HTML入力

winの「メモ帳」を開いて下記のテキストを入力します。

Macの場合

テキストエディット

Macの「アプリケーション」フォルダ内にデフォルトで入っているテキストエディター

コトエディタ

CotEditorは、日本語フレンドリーな無料のMac専用テキストエディター

<!doctype html>

「!DOCTYPE」とは文書の解釈に使うDTDを宣言するもので、正確に言えばHTMLのタグではありません。HTML文書を作成するとき、HTMLタグよりも先頭にまず書くべきなのが DOCTYPE 宣言です。

「DTD」とは「Document Type Definition」のことで、「文書型の定義」を意味します。HTMLのバージョンごとに、そのバージョンで使用できる要素（タグ）や属性の名前などの情報が定義されています。
たとえば、「<!DOCTYPE HTML」と記されている場合は、これからDTDを宣言することを示し、その文書タイプが「HTML」であるという意味です。

<html></html>

HTML文書では<HTML>、<HEAD>、<BODY> の3種類のタグで文書の構造を定義します。 <HTML>～</HTML>はその文書がHTML文書であることを宣言するタグであり、文書の最初と最後に記述します。 <HEAD>～</HEAD>の間には、文書のタイトル等のヘッダ情報を記述します。そして<BODY>～</BODY>の間には、実際にブラウザに表示される文書の本体を記述します。

HTML基本　（ポイントだけ）

HTML CSS 基本用語

HTMLとCSSは、ホームページを作成するときに使われます。 HTMLは、文書を構造化するための言語でマークアップ言語といいます。 CSSは、作成されたHTMLの見た目や装飾を整えるものでスタイルシート言語ともいいます。それぞれ...

<meta charset=”UTF-8″>

HTMLやXMLのページで使われているエンコーディングは常に指定するべきです。もし指定しないと、コンテンツ内の文字が誤って解釈される可能性があります。それは単に人が読めるかどうかという問題であるだけでなく、コンピューターがデータを処理する必要がますます出てきたからでもあります。また文字エンコーディングは、フォームへ入力されたり、スクリプトにより生成されたURLなどなど、非ASCII（アスキーコード）文字を処理する際にも必要になります。

<img src=”…”>

「イメージソース」と読みます。

サイトページに画像を掲載するときに
記述するタグで、

「image source」の省略形になります。
imageは「画像」、sourceは「元」
という意味になります。

<h1><h2>…

hはheadingの略で、Webサイトの見出しを意味します。見出しにはh1,h2,・・・,h6までの6種類があり、数字が小さいものほど、より階層の高い大見出しとなります。この見出しの体系が正しく整理されていることで、検索エンジンはページの階層構造をより認識しやすくなります。

<p>

パラグラフとは、文章の段落、節のこと。
英語の長文をリーディングする際には、このパラグラフ単位で文章の意味を把握することが重要となります。

「P」とは、段落を指定するためのタグで、「P」とは「Paragraph」の略です。<p>～</p>で囲まれたテキストは1つの段落であることを示します。

HTMLにおける段落は、通常の文章と同じく文章のひとかたまりを表します。

クロームでHTML表示の確認

htmlのコーディングする際に「要素の検証」を上手に使って、コーディングの抜けやコード分析します。

そのためにも、index.htmlの表示が、デホでChromeにセットしてるか確認しましょう！

メモ

Googleのドキュメント
 Evernote
Wordprss
手書き（紙のメモ帳）

スクショの方法

Windows 10で使用できるスクリーンショットの6つとMacスクリーンショット3つ

Webページの画面をメモとして使用したり、資料作成のためにアプリの画面などを撮影したりと、便利に利用する機会が多いスクリーンショットの操作方法を紹介します。スクリーンショット撮影機能の定番といえば Windowsは「PrintSc...

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>PROFILE | NISHIZONO</title> 
</head>
<body>
<h1>PROFILE</h1>
<img src="img/01.jpg" alt="">
<h2>NISHIZONO</h2>
東京都内在住。フリーで、WEBサイト制作を中心に行っております。
 HTML、CSS３、 WEBデザイン、LP制作、コーディング、WordPressオリジナルテーマ作成、カスタム投稿、バナー、フライヤー作成、WEB通販の商品ページ制作、Tシャツデザイン、動画編集・等制作、映像編集・映像制作 SEO他

 </body> </html>