ウェブサイトの作り方、パート2、HTMLで0から完全に作られたサイト、画像ギャラリー付きのCSS-ビデオチュートリアル

このチュートリアルでは、すべての段階をカバーし、HTMLとCSSを使用してサイトを示していますサイトを作成、
無料ホスティングのアカウントを作成し、最終的には当社のウェブサイトのホスティングは、無料ホスティングが私たちのオンラインのウェブサイトの数分を配置する簡単な方法であることをファイルをアップロードする場合、このメソッドの不便さは、我々は全体に表示されたいくつかの広告を持っているということです内上部(ヘッダの先頭)。

ウェブサイトを開きたいと思うだれでも、HTMLとCSSを知っておく必要があり、それはHTMLの専門家である必要はありません(Hyper TEXT MArkupe Language)ですが、これらがどのように機能するかを理解するには、いくつかのコード情報が絶対に不可欠です。

あなたは1サイトを構築する場合でも、これらのファイルを介して何が起こっているか知る必要があるすべては、エラーの定期補正を必要とし、変更を実現します。

多くの人がコードから逃げ出し、コードを象形文字にたとえ、それはまったくそうではありません。「CODE IS POETRY」と誰かが言ったことがあります、彼は正しかったです。キーボードとマウスのみの仮想世界。

私たちはソフトウェア会社が作成したアプリケーションを長い間使用してきました。コンピュータ操作のみを行いました。プログラミングを行う時です。実際、それはプログラミング言語ではなく、「マークアップ言語」ですが、かなり奇妙な「マークアップ言語」のように聞こえるので、それはプログラミング言語のようなものです。HTMLは現在使用されている最も簡単なプログラミング言語(マークアップ)のXNUMXつであり、あらゆるサイトでHTMLを目にします。それらはHTMLのコンポーネントであり、このプログラミング言語は至る所にあります。今こそそれを学ぶ時です。

最初の時間は少し困難なことができますが、あなたはあまり注意を払っている場合は、すべてのものは、それがとても困難​​であることをすぐに理解するだろう、物事はシンプルで美しいですが、我々は我々の手で何かを作成して、これが最も重要なものです。

私たちはあなたに基本をお教えしますし、我々は、Webページ内のテキストを挿入する方法を学びますし、我々は手配し、カラーテキストます、我々は、我々はすべてのページ要素を配置されるとCSSスタイルページ(カスケードスタイルシート)を使用しあなたがそれのように見えるために私たちのページに配置されますように、すべてにHTMLは一枚で作られています。

あなたは、これらはHTMLとCSSの基本的なことですが、素敵な概要を作成し、基本的なHTMLとCSSの簡単なテクニックを学びます。

あなたは慎重に忍耐で武装する必要があり、このチュートリアルでは、このチュートリアルでは、我々は少し、、数秒巻き戻す場合は、非常に重要な何かを見逃すことがありますし、有効にならないことをした後で表示される濃度運ぶために余裕ができるものです情報が非常に高いと私は非常に、非常に慎重にするように依頼する理由です。

このチュートリアルの後、私も集中コースだと思います、あなたもあなたが完全にheroglifeのラインであるだけでなく、HTML文書HTML気持ちを理解して、HTMLとCSSは、コードをコントロールできるかの良いアイデアを持っています消費します、あなたは文書またはHTML CSSを見たとき、それが何であるかを知っています。

私たちは、タグ(ラベル)について学び、私たちは、ここではHTML文書で使用できるタグのいくつかの例(ラベル)を持って、心配しないで、それらのすべてを格納する必要がなく、単に最初の表に基本を学ぶ必要はありませんあなたがそれらを必要とするとき、残りはサイト上またはインターネット上でここで見つけることができます。

でも、テーブルは、これらのタグを命じているHTMLを使用して作られています。

基本的な要素(タグ)。

ファイル形式のウェブを定義
文書ヘッダ
Tilul文書
HTMLページの本文
BGCOLOR = ページの背景色
TEXT = カラーテキストページ
LINK = ページの未訪問リンクの色
VLINK = ページの訪問済みリンクの色
ALINK = クリックexacutatユーザー間にリンクの色
BACKGROUND = URL ページの背景画像
段落
<Hn> <Hn> ドキュメントのレベルサブタイトル(n = 1-6)
組み立てられたテキストの属性を指定します
SIZE =n テキストサイズは​​1-7です
FACE =「A、b」 フォントを指定します: a可能であれば、または b
COLOR =s テキストの色:色名またはRGB値のどちらか
改行
整形済み情報
HTML Comenatriu
材料は、ページを横切る
水平ルーラー
SIZE =x ピクセル定規の高さ
WIDTH =x ピクセルまたはパーセントでルーラー幅
NOSHADE 水平ルーラーを表示する影を無効にする
= ALIGNx ページ上の水平ルーラーを合わせ(左、中央、右)
COLOR =x 水平ルーラーの色(IEのみ)
アンカーマーク
HREF =URL ハイパーテキストリファレンス
HREF =#名前 内部アンカーへの参照
名前=名前 内部アンカーの定義

要素リスト .

説明の定義
リスト·タイプの定義
用語定義
機能リスト
<OL 順序付きリスト(番号)
TYPE =先端 番号を入力します。 可能な値は次のとおり、A、I、I、1
=スタートx リストの開始番号は、注文した
<UL 順序なしリスト(S)
TYPE =形状 マーキングの形。 可能な値:円、正方形、ディスク。

文字書式要素 .

太字でテキストを貼り付け
イタリック体でテキストを貼り付け
ハイライトされたテキストを貼り付け
テキストフ​​ォントミニバン
引用bibliogarfica
プログラムリスト
論理的なスタイルのハイライト
キーボードからテキスト
強力な論理を強調する
プログラムまたは変数
<ベースフォント SIZE = n> ページのデフォルトのフォントサイズを指定する

フレームのための要素 .

書き込みページの定義
COLS =x 列の数および相対的な大きさ
ROWS =x 数と行の相対的なサイズ
BORDER =x FRAMESETフレームの「オン」または「オフ」ステータスを指定します(1または0)
FRAMEBORDER = x フレームサイズを指定します。
Framespacing = x 二つの隣接するフレーム間のスペースの量
特定のフレームワークの定義
SRC =URL URLソース·フレームワーク
NAME =名前 フレーム名(アンカーマークの一部としてTARGET =名前と組み合わせて使用​​)
SCROLLING =SCRL 上の(有効)、オフ(無効)、オート(自動):オプション可能derulare.Valoriバーを定義する
FRAMEBORDER =x フレームサイズの周囲に境界線
MARGINHEIGHT =x 特定のフレームワークの上下に余分なスペース
MARGINWIDTH =x 所与のフレームの左右への追加単位空間
フレームを見ることができないユーザーのためのセクションに表示されるページ
内部フレーム((IE用)
SRC =URL ソースフレームワーク
NAME =s Nameウィンドウ(TARGETに便利)
HEIGHT =x 組み込みの高さ
WIDTH =x 埋め込まれたフレームの幅

テーブル用アイテム .

HTML表
BORDER =x 箱の表
=をCELLPADDINGx 表のセル内に追加スペース
CELLSPACING =x テーブルセル間の余分なスペース
WIDTH =x 幅は、テーブルを課し
FRAME = テーブルの微調整
RULES = テーブル定規の微調整
BorderColorなど= 境界線の色のテーブルを指定します。
BORDERCOLORLIGHT = 指定された2つの色の明るい色
BORDERCOLORDARK = 指定された2つの色の暗い色
= ALIGN ページの左側にあるテーブルとテキストの流れ、右側の位置を合わせ
= ALIGN ページの右側にテーブルを合わせ、テキストが左に流れる
HSPACE =x テーブルの周りに追加のユニット水平方向のスペース
VSPACE =x テーブルの周りに追加のユニット垂直空間
COLS =x テーブルの列数を指定します
マークアップを使用して一連の列定義を定義します
<COL WIDTH =x> ピクセル単位で列幅を定義します
テーブルのタイトルを定義します
テーブル本体を定義
ラインテーブル
BGCOLOR = 行全体の背景色を指定します。
= ALIGNアラインメント 現在の行のセルの位置を合わせます(左、中央、右)
表データのセル
BGCOLOR = セルデータの背景色を指定
COLSPAN =x 現在のセルデータにまたがる列の数
ROWSPAN =x 現在のセルにまたがるデータの行数
= ALIGNアラインメント 可能date.Valoriセル(左、右、中央)のファブリックを揃える
=をVALIGNアラインメント 可能なセル素材date.Valoriの垂直方向の配置:(上部、下部、中央)
BACKGROUND =URL テーブルセルの背景イメージを指定する
NOWRAP セル内のテキストの分離線を許可しない
= ALIGNベースライン 隣接するテキストのベースラインデータを持つセルの位置を合わせます
= ALIGNキャラクター 列を特定の文字に揃えます(デフォルトの文字は「。」です)。
= ALIGN正当化する テキストの左右のエッジの両方のエッジを合わせ

イメージ要素を追加します。

<IMG マーキング入力画像
SRC =URL ソースグラフィックファイル
ALT =클라우드 기반 AI/ML및 고성능 컴퓨팅을 통한 디지털 트윈의 기초 – Edward Hsu, Rescale CPO 많은 엔지니어링 중심 기업에게 클라우드는 R&D디지털 전환의 첫 단계일 뿐입니다. 클라우드 자원을 활용해 엔지니어링 팀의 제약을 해결하는 단계를 넘어, 시뮬레이션 운영을 통합하고 최적화하며, 궁극적으로는 모델 기반의 협업과 의사 결정을 지원하여 신제품을 결정할 때 데이터 기반 엔지니어링을 적용하고자 합니다. Rescale은 이러한 혁신을 돕기 위해 컴퓨팅 추천 엔진, 통합 데이터 패브릭, 메타데이터 관리 등을 개발하고 있습니다. 이번 자리를 빌려 비즈니스 경쟁력 제고를 위한 디지털 트윈 및 디지털 스레드 전략 개발 방법에 대한 인사이트를 나누고자 합니다. 必要に応じて表示する代替テキスト
= ALIGNアラインメント ページ内の画像の位置合わせ。 可能な値:トップ(上部)、ミドル(真ん中)、左下(下)、(左)、右(右)
HEIGHT =x 画像の高さ(ピクセル単位)
WIDTH =x 画像の幅
BORDER =x それがハイパーリンクとして使用されている画像の周りに枠
HSPACE =x 画像の周りに追加の水平方向のスペース(ピクセル単位)
VSPACE =x 画像の周りに追加の垂直方向のスペース(ピクセル単位)

要素フォーム。

アクティブなHTMLフォーム
ACTION =URL データを受信したサーバ上のCGIプログラム
METHOD =方法 データ(GETまたはPOST)サーバーに送信する方法
<入力 テキストフ​​ィールドやその他の入力
TYPE =オプション 入力フィールドタイプ。 可能な値:テキスト、パスワード、チェックボックス、非表示、ファイル、
ラジオ、リセット、画像を提出してください。
NAME =名前 値フィールドのシンボリック名
VALUE = テキストフ​​ィールドのデフォルトの内容
= CHECKED オプション ボタン/箱著しいデフォルト
SIZE =x テキストフ​​ィールド内の文字数
SIZE =x 許可される最大文字数
グループのチェックボックス
NAME =名前 値フィールドのシンボリック名
SIZE =x 一度表示されたメニュー項目の数(デフォルトは= 1)
MULTIPLE =x ことができます複数のメニュー項目の選択
<オプション フィールドでの特定の選択
VALUE = メニューの選択の結果の値
複数行に強化キャンプテキスト
NAME =名前 値フィールドのシンボリック名
ROWS =x テキストボックス内の行数
COLS =x テキストボックスの行あたりの列数(文字数)
論理的な部分に共有フォーム
フィールドのセットに関連付けられた名前(フィールドセット)
= ALIGNs 伝説のアラインメント(説明)が表示された指定します(上、下、左、右)
tabindexを=x 要素の順序を指定したときに、ユーザーがTabキーを押した
ACCESKEY =c 特定の要素のキーボードのショートカットキーを提供することを指定します
DISABLED 要素が不活性であるが、画面上に表示される
読み取り専用 項目が画面に表示され、編集することはできません

高度な要素。

モデルのスタイルに関する特定の情報
TYPE =ヴァル スタイルモデルのタイプ。 通常は「text / css」
通常、WebページにJavaスクリプトスクリプトが含まれています
LANGUAGE =言語 使用する言語
EVENT =イベント 特定のスクリプトの実行をトリガするイベント
= FORnumeobiect スクリプトが動作しているページのオブジェクト名

テーブルのHTMLタグをダウンロード

http://www.videotutorial.150m.com:チュートリアルで行ったチェックアウトしたい場合は、このアドレスにアクセスすることができます。

我々は、添付ファイルを解凍し、メモ帳を使用して、3つのhtmlファイル、またはCSSファイルを勉強することをお勧めします+ +または変更CAUを加えることができ、このようにWebページを編集するための別のプログラムもそれ中にメモを作ることができる、あなたなしでHTMLを学びますアカウント。

私はあなたを望む、快適で、このシリーズ以降の次のチュートリアルであなたを歓迎します。

FILESテストをダウンロード

ダン·コンスタンタンが実施し
tutorialegimp.blogspot.com
クリスティアンCismaru:私はIT&Cに関連するすべてのものが好きで、毎日蓄積する経験と情報を共有するのが好きです。 私はあなたに教えることを学んでいます!

コメントを見る(333)

  • このチュートリアルに記載されている情報の非常に素晴らしい、トン。
    このチュートリアルは、呼び出すことができます。注入HTMLとCSSを。
    たぶん、あなたは時間かそこらで、ここで学ぶことができ、数ヶ月で学ぶことを得ることはありません、私が投稿される前にそれをすべて見てきたと私はそれは私の引用情報がチュートリアルに収まることができる感動と言うことができます。
    ある時点で、私はただのチュートリアルを見て、また私は考えたくなかったにもかかわらず、引用ダンはその後に水を飲んで、水を飲む必要性を感じました。
    このチュートリアルの後にHTMLおよび/またはCSSを学ぶためではない何かがある。

  • アオレウ、私が学び始めて約 3 か月間試してきたことですが、まだ時間がありません...
    どうもありがとう、私は慎重にそれを見て!

  • クリスティ-adminのこのチュートリアルに記載されている情報の非常に素晴らしい、トン。
    このチュートリアルは、呼び出すことができます。注入HTMLとCSSを。
    たぶん、あなたは時間かそこらで、ここで学ぶことができ、数ヶ月で学ぶことを得ることはありません、私が投稿される前にそれをすべて見てきたと私はそれは私の引用情報がチュートリアルに収まることができる感動と言うことができます。
    ある時点で、私はただのチュートリアルを見て、また私は考えたくなかったにもかかわらず、引用ダンはその後に水を飲んで、水を飲む必要性を感じました。
    このチュートリアルの後にHTMLおよび/またはCSSを学ぶためではない何かがある。

    はい、その通りです、クリスティ、でもあなたがチュートリアルを作ってくれると思っていたので残念です:(でも、とにかく、よくできた、とても良いチュートリアルです。

    • あなたの言ったことは良くありません、そして正直に言います、この男性はあなたにウェブサイトの作り方を一から教えるのに約0時間半も苦労しました、そしてあなたは彼がそれをしなかったからがっかりしたと言いますか? 私たち一人一人に HTML と CSS の基本を教えるために、その男がどれだけの労力を費やし、どれだけの時間を失ったか想像できますか。口を開ける前に、その仕事に費やして他の仕事を辞めるのは自分には向いていない、と考えてください。他の人が入れなかったことにがっかりした、このチュートリアルを作成した、学ぶべきものがあることに感謝するなどの役に立たないコメント ;)

  • くちばし:
    はい、あなたは正しいですが、クリスティはtutorialuをやると思うので、私はがっかり とにかく、非常に良いダンブラボーtutorialu

    どうですか、「Webサイトの作り方」シリーズが終わってしまったと思います。
    次のチュートリアルでは、私は私になります。
    何の次のチュートリアルなので、私はダンによって作られたこのチュートリアルを見てする必要があります。
    私は何を提示すると、私はアザダンを実現しましたチュートリアルとは異なりますが、それに記載されている情報は、物事を適切に理解するために不可欠である。
    そこにWeb上でコンテンツを公開するには、いくつかの方法がありますが、すべてが共通の分母、HTMLとCSSを持って、それらなしでは何もできない。

  • クリスティ-adminの:
    あなたはそれでシリーズを終了しましたどう思いますか "のウェブサイトを作成する方法。"
    次のチュートリアルでは、私は私になります。
    何の次のチュートリアルなので、私はダンによって作られたこのチュートリアルを見てする必要があります。
    私は何を提示すると、私はアザダンを実現しましたチュートリアルとは異なりますが、それに記載されている情報は、物事を適切に理解するために不可欠である。
    そこにWeb上でコンテンツを公開するには、いくつかの方法がありますが、すべてが共通の分母、HTMLとCSSを持って、それらなしでは何もできない。

    こんにちはクリスティ、私はPHPやJSのシリーズを非難?

  • Alex Vetsak:
    こんにちはクリスティ、私はPHPやJSのシリーズを非難?

    私たちはすべての話だけでなく、PHPとHTMLができないことなく、JSサイトはHTMLにバインドします。
    PHP はデータベースからデータを抽出するためによく使用されますが、Web ページは依然として HTML に基づいています。動的サイト (php、dhtml、asp、jsp、cf) について話しているのか、静的サイトについて話しているのかにかかわらず、PHP を使用します。 HTML 言語、それなしでは何もできません。
    多くの人が大きな混乱をします。「もう HTML サイトは必要ありません。動的 php サイトが必要です。」ですが、これは大きな間違いであり、動的サイトか静的サイトかに関係なく、HTML が使用されるほとんどの場所で使用されます。
    JS(Javaスクリプト)がサーバーによって異なりJSP(Javaサーバページ)と同じではありません、JSサイトは特定のスクリプト、任意のサーバーの必要はありませんのために使用され、JSスクリプトは必要とせずに、任意のブラウザで実行することができますサーバー·コンポーネント、およびこのチュートリアルで、ダンはオフもののためにスクリプトJS(フォトギャラリー)のシリーズを使用はJSを使用し、そこにウェブサイト全体ではなく、JSであり、Javaを使用して完全なサイトです彼らは同じように見えるが、何か他のものであるServer Pagesの。
    あなたがずっと前に「コード」の勉強を始めたのは知っていますが、このチュートリアルは非常に役に立ちます。ダンはこのチュートリアルで素晴らしい仕事をしてくれました。あなたはこのチュートリアルがどれほど価値があるかさえ理解できないでしょう。このチュートリアルの下では、ほぼすべてのものが揃っています。 HTML で使用されるタグ (要素) は、特にそれぞれに説明があるため、使用できます。
    コー​​ドを破る、あなたのALEXをさせてはいけない、それがベースです。
    私を信頼し、潜在的なNOを逃す!

  • すごい、多くの情報が非常によく構造化されているので、誰でも理解できます。私は個人的に、何か新しいことを学ぶためにチュートリアルを見ましたが、チュートリアルが進むにつれて、Web サイトを作成するのがいかに簡単か、実際には読み込まれていないことに驚きましたこのチュートリアルだけでなく、他のすべてのチュートリアルもおめでとうございます。次の (クリスティの言葉を借りれば) 情報の「注入」を楽しみにしています。

  • おめでとう!! とても素晴らしいチュートリアルです。ルーマニアには Web デザイナーがたくさんいるでしょう :) (期待しましょう!!)

  • それはチュートリアルDreamweaverのとき? またはあなたのチュートリアルでDreamweaverのDCを使用していない?

    すべてのチュートリアルをおめでとうございます...あなたは最高です ;)

  • こんにちは。チュートリアルは本当に素晴らしいです。情報が大量にあります。当時はネットがなかったため、フロントページ 98 で図書館の本から得た何十ものテストを実行して、基本的な HTML を学ばなければならなかったと思います。そして今、私が知る必要があるすべてを説明するチュートリアルを見ることができます。私が進化していることがわかります:)))..それが段階的に説明されていて、それらがすべてウェブサイトに掲載されているという事実が気に入りました基本的なコマンドと実際に使用できる例。自分が何をしているのかを理解していることがわかります。あなたは本物の教師です。
    しかし、自動的に注文し、私の質問をするプログラムを使用して、Webデザインで働く人々の大半はチュートリアルのようなプログラムを行いますか?
    コマンドを理解し、Web デザイン プログラムをより深く理解するためにこのチュートリアルを作成したことは承知しています。しかし、それでも、このトピックについては多くの話題があるため、この一連のチュートリアルをどのように続けるのか知りたいと思っています。 Dan が作成したようなチュートリアルは退屈だと考える人もいるかもしれませんが、この機会に彼にチュートリアルを提供してくれたことに敬意を表します...

関連のポスト

このウェブサイトはクッキーを使用しています。