超テキストをマークアップした言語なんだぁ~くらいに覚えておくと良いでしょう。ウェブサイト制作はHTMLと呼ばれる言語で作られています。作成したものサーバーにアップロードして完成なのです。アップロードするにはレンタルサーバーとドメインが必要です。始めは、レンタルサーバー年間10,000円程度がお手頃でしょう。ドメインは年間1300~12,000円。これは『~.net』『~.com』『~.art』などがあります。私は、さくらインターネットでレンタルサーバーを契約しています。ドメインはバリュードメインで取得しました。そんなお金を持っていない!『HTMLの勉強がしたいだけ』『全国の人に見られるはチョットいや』って方でも大丈夫です。サーバーなしでも、ドメインなしでも作ることができるです。HTMLファイルは公開されません。自由に遊ぶ感覚でHTMLを学べます。HTMLを記述するテキストエディタHTMLを記述するテキストエディタは、パソコンを購入時に付属している『メモ帳』でも良いのですがフリーソフトで気に入ったテキストエディタを使うことをお勧めします。私は『窓の杜』でフリーソフト『TeraPad』を使っています。検索すると、4つくらい『広告』がありますが、無視してください。注意!『広告』のTerapadは怪しいですよ!!今はよっぽど慎重にサイト見てても、詐欺サイトや、ウイルスに掛かってしまいます。公式サイト:https://tera-net.com/でダウンロードしたら安心です。作者:寺尾進さんだから『Tera』なのでしょう。メモ帳を使ってHTMLを記述する場合の注意点。パソコンがWindowsならば、メモ帳はWindowsのアクセサリーの中にあります。次の文を打ってください。charset=”utf-8”><title>タイトル</title></head><body>本文</body></html>で、保存します。ファイル名を書いて『識別子』を『.html』とします。ファイルの種類を『テキスト文書』から『すべてのファイル』とします。1度試す事をお勧めします。1度失敗することで、これは見た事あるぞ。見た事がない失敗で焦らないようにする為です。失敗は成功の基と言うように、今のうちにいっぱい失敗しましょう。経験を積み重ねましょう。|xxx.css(cssファイル)ファイルの拡張子を表示する方法ファイルの拡張子を表示する方法を説明します。デスクトップ画面のタスクバーにある、エクスプローラーのアイコンをクリックします。拡張子を表示したいフォルダを開き、メニューの「表示」タブをクリックします。[ファイル名拡張子]のチェックボックスをクリックします。拡張子付きのファイル名に、表示が変わります。Windows10の場合フォルダを開きます。メニューの「表示」タブをクリックします。[ファイル名拡張子]のチェックボックスをクリックします。拡張子付きのファイル名に、表示が変わります。要素HTMLの要素とは大きく分けて「見出し」「本文」、さらに「段落」「リスト」「リンク」「テーブル」などです。要素<title>webサイト制作</title>の『title』が要素です。href=”images/dog.png”>愛犬</a>の『a(アンカーリンク)』が要素です。red;”>~『p』は段落を表していますが、これもまた要素です。要素の中には属性と値が含まれるものがあります。タグタグは要素を『<』と『>』挟んで表します。HTMLは開始タグ『<要素>』と終了タグ『</要素>』で構成されています。終了タグで終わらせないと、うまく反映出来ない場合がありますのできちんと終了タグで終わらせるように心がけましょう。なかには、「空要素」と言って終了タグを持たない要素があります。空要素と呼ばれるものは、10個に満たないので使う時に覚えた方が良いでしょう。私はよく『終了タグ』で記述漏れ失敗しました。「開始タグ」と「終了タグ」は1か所『/』スラッシュが着くかつかないだけなので、コピペして終了タグに『/』スラッシュを付け忘れて最後まで分からなかったっていうことがありました。結局のところ、友達の指摘で分かったということが何度もありました。HTMLの構造HTMLの構造は<html>~~~</html>の中に<head>と<body>を入れます。<head>~~~</head>の中に、メタ情報やタイトルなどを入れます。<body>~~~</body>の中にはサイト内容が入ります。charset=”utf-8”><title>タイトル</title></head><body>本文</body></html>このページのトップへHTMLのバージョン現在、HTMLのバージョン5です。public”-//w3c//...”>と、長いdoctype宣言でした。Windows10では、Windowsアクセサリーの中にメモ帳があります。html>と書きます。type(タイプ)これは文書型宣言と言います。HTML5の宣言HTML5というからにはHTML4、HTML3というのがあると想像できるでしょう。HTML5の前にHTML4.01があったのです。今もあるのですが...(笑)下に記述したのが、HTML4.01の文書型宣言なのですがブラウザの進化につれてHTMLの文書型宣言も簡素化されてすっきりしたのです。html>だけ記述すればHTML5の宣言となるのです。HTML4.01の文書型宣言HTML4.01では、構造と見栄えの分離を目指しつつも、当面は旧バージョンとの互換性も考慮しようという姿勢から、3種類の文書型定義が用意されました。この3種類の文書型宣言の書式はそれぞれ次のようになります。DTDもっとも厳密で正確な仕様です。非推奨の要素や要素は除かれており、フレームも使用することはできません。HTML文書を作成するにあたってはこのDTDにしたがうのがもっとも望ましいのですが、厳しい制約があるため、文書の作成も難しくなります。DTDに、非推奨の要素・属性が加えられています。インラインフレーム以外のフレームを使うことはできません。DTDに比べて扱いやすいDTDですが、従来のバージョンとの互換性を考えた移行用の仕様であり、廃止される予定の要素や属性が含まれていることに注意する必要があります。DTDにフレームが加わったものです。ブラウザとは、インターネットを開く時に反映された画面のことです。Windowsですとインターネットエクスプローラーが標準装備されています。他には、クローム(Google)やサファリ(safari)などがあります。/html>と、記述し、メモ帳を保存してください。「上書き保存」と「名前を付けて保存」とで二種類の保存があります。「名前を付けて保存」でファイル名とファイルの種類を選んで保存してください。ファイル名は「index.html」と記述し、ファイルの種類は「すべてのファイル(*.*)」で保存します。HTML5は<doctype>だけでよくなりました。このページのトップへ文書情報を記述<meta>タグを使います。<head>の中へ記述します。charset=”~”>で指定します。ここでは『utf-8』を指定しています。「著者」「キーワード」「文書の概要」を記述することができます。<meta>で括り付けられているものを、メタ情報とよびます。<head>の中の、ほとんどの部分は表面には出ないですけど、サイトの重要な情報の記載があります。このページのトップへ文書にタイトル<head>中の<title>がタイトルになります。気づいた方もいるかと思いますが、『ウェブサイト制作の練習』と記述されているのがタイトルです。<title>~~</title>タグ内に指定されたものが、ブラウザのタイトルバーで表記されます。開始タグと終了タグで閉じることを忘れてはいけません。一つ大事なのは、文字コードです。漢字が表示できる文字コードは数種類あります。「shift-jis」、「unicode」、「utf-8」等があります。文字コードの種類を決めてから、タイトルを書かないと文字化けを起こす可能性があります。<meta>で括り付けられているものを、メタ情報とよびます。メタ情報は表面にはでないけど、サイトの重要な部分でもあります。範囲の指定は<div>と<span>を使います。これだけでは意味を持たないのですが、id属性やclass属性などを付けることで、名前やスタイルを指定することができます。このページのトップへスタイルを整えたい(1)HTMLのスタイルとは、文章や文学作品の表現形式です。スタイルを指定する方法が3つあります。ここでは<head>内、<style>属性で指定する方法を2つ紹介します。1)<head>2)<style>このページのトップへスタイルを整えたい(2)外部CSSファイル3つ目のスタイルを指定する方法を紹介します。それは、CSSファイルを使う方法です。外部ファイルとは、HTMLファイルとは別のところということです。外部CSSファイルを作るには新しいフォルダにCSSと記入して保存してください。その中に『style.css』を作ります。最後にlinkを張ります。相対パスと絶対パス相対パスとは自分のいる階層から、行きたい目的地までのパス(道順)となります。同位フォルダにはなにもつけず下位フォルダ『/』をつけます。下の図を見てください。画像ファイル2の所行きたい。なると、以下なパス(道順)になります。画像ファイル2』となります。https://www.yahoo.co.jpと打てばいつでも、ヤフーのHPにいけます。この様に、URLを打ち込めば、目的のサイトへいけます。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。articleTwitterメタ情報ログイン投稿フィードコメントフィードWordPress.orgこのサイトについてHTMLが苦手な人も楽しんで習得できるWEB学習サイトです。Commnitycom,Inc.。