30 অবিশ্বাস্যভাবে সহজ ওয়েব পৃষ্ঠা Pages

সর্বাধিক বিখ্যাত পৃষ্ঠাগুলিতে কয়েকটি তথ্যের সাথে খুব বেশি লোড হয় তবে আমি বিপরীতটি পছন্দ করি: সাধারণগুলি।

স্পষ্টতই এই গোষ্ঠীর দুর্দান্ত প্রকাশক হ'ল গুগল তার নূন্যতম হোম পেজটি যাত্রা শুরু করার পর থেকে, তবে স্পষ্টতই ইন্টারনেটে কেবলমাত্র জিনিসই সহজ জিনিস রাখার প্রতিশ্রুতিবদ্ধ নয়।

সাধারণ এইচটিএমএল ওয়েব পৃষ্ঠার উদাহরণ

ক্যান সমৃদ্ধ

কেয়ান রিচমন্ড আমাদের কয়েকটি উপাদানগুলির সাথে খেলার সরলতা দেখতে দেয় তবে এটি খুব ভাল করে দেওয়া হয় মিনিমালিজমে দুর্দান্ত অনুভূতি দিন। তার লোগো উপরের বামে, ডানদিকে এবং কেন্দ্রের টুইটার এবং যোগাযোগ আইকনগুলি, আকর্ষণীয় টাইপোগ্রাফি সহ, যা তিনি উত্সর্গীকৃত to

ওয়েবে লিঙ্ক: ক্যানরিচ সোম

এলিস ড্রোগার্ড ard

এলিস ড্রোগার্ড ard আপনার লোগো স্থাপন সহ এটি সহজ রাখুন কেন্দ্রে, আপনার ওয়েবসাইটের প্রধান পৃষ্ঠাগুলি এবং যথাযথভাবে স্থাপন করা ফটোগ্রাফগুলির একটি সিরিজের মধ্যে সরানোর জন্য চারটি ট্যাব যাতে একটি নজরে আমরা জানতে পারি আপনি কী করছেন এবং আপনি কী করছেন।

ওয়েবে লিঙ্ক: এলিস ড্রোগার্ড ard

জোনাথন ওগডেন

ওগডেন আপনার নামটি লোগো হিসাবে কতটা সহজ তা নিয়ে খেলুন, মনোযোগ আকর্ষণ না করে ঠিক নীচে অবস্থিত সোশ্যাল নেটওয়ার্কগুলি এবং তাদের নকশাটি কাজ করে যাতে আমরা দ্রুত তাদের মধ্য দিয়ে যেতে পারি। এক পৃষ্ঠায় এটি গুরুত্বপূর্ণ বিষয়গুলি দেখায়।

ওয়েবে লিঙ্ক: জোনাথন ওগডেন

একপ্রকার গায়ক পক্ষী

টাইপোগ্রাফি এবং সেগুলি নিয়ে ফিনচ ইতিমধ্যে অন্যান্য জায়গায় যাচ্ছে রঙগুলি যা এটি করে তার কমনীয়তা এবং জ্ঞানকে বোঝায়। মাত্র কয়েকটি উপাদান রেখে তিনি তার সমস্ত পেশাদারিত্বকে সামনে রেখে দেখেন। কোন পৃষ্ঠাগুলি আপনার সাথে লিঙ্ক করেছে তা এটিও পরিষ্কার করে দেয়।

ওয়েবে লিঙ্ক: একপ্রকার গায়ক পক্ষী

একটি ভিন্ন ডিজাইন

এই ওয়েবসাইট অন্যভাবে খেলুন। শিরোনাম সহ একটি ওয়ালপেপার ব্যবহার করুন যা থেকে আমরা প্রধান পৃষ্ঠাগুলি, আপনার ফোন এবং আপনার সামাজিক নেটওয়ার্কগুলির লিঙ্কগুলিতে যেতে পারি।

ওয়েবে লিঙ্ক: একটি ভিন্ন ডিজাইন

ব্রিজক

কাই আমাদের সাথে তার নিজস্ব চিত্র দিয়ে চিত্রিত করেছেন একটি বিমূর্ত ত্রিভুজ এবং একটি উপযুক্ত রঙ প্যালেট ঘনিষ্ঠতা দিতে। আমরা তাঁর সম্পর্কে আরও জানতে চাইলে তিনি একটি ছোট আকারের ফন্টের সাথে তাঁর বায়ো অংশও সরবরাহ করেন।

ওয়েবে লিঙ্ক: ব্রিজক

উল্লম্ব গার্ডেন ডিজাইন

পূর্ববর্তীটির মতো, উল্লম্ব গার্ডেন ডিজাইনটি এমন একটি ফটোগ্রাফের দিকে যায় যা দ্রুত দেখায় অসলো বিমানবন্দরে তাঁর অন্যতম সেরা কাজ। শীর্ষে আমাদের কাছে «নাভি বার bar বা নেভিগেশন বার এবং এমনকি ভাষা পরিবর্তন করার সম্ভাবনা রয়েছে the খুব সাধারণ পৃষ্ঠায় চূড়ান্ত স্পর্শ দেওয়ার জন্য লোগোটি এটি একটি উল্লম্ব বিন্যাসে রাখে।

ওয়েবে লিঙ্ক: উল্লম্ব গার্ডেন ডিজাইন

247 গ্রেড

247 গ্রেড একরঙা এবং একটি পটভূমি চিত্র নিয়ে খেলুন প্রায় সম্পূর্ণ অন্ধকার। পাঠ্য এবং শিরোনামের চেয়ে ছোট শিরোনাম হরফ সামগ্রিক নকশায় দুর্দান্ত বৈপরীত্য তৈরি করতে মূলধনযুক্ত।

ওয়েবে লিঙ্ক: 247 গ্রেড

এটা উপভোগ করুন

উনা দুর্দান্ত টাইপোগ্রাফি খাঁটি হওয়ার লক্ষণ হতে পারে এবং আমরা জানি যে আমরা কী করি। বার্তাটি সরাসরি থাকলে আপনাকে আর কিছু দিতে হবে না। তারা এটি পরিষ্কার করে দিয়েছে: তারা সুন্দর অ্যাপ্লিকেশন এবং ওয়েবসাইট তৈরি করতে পছন্দ করে। তারা প্রকল্পগুলির জন্য মেলটি ছেড়ে দেয় এবং অন্য লিঙ্কে তাদের অধ্যয়নের জন্য।

ওয়েবে লিঙ্ক: এটা উপভোগ করুন

অ্যালিসন হাউ

অ্যালিসন আমাদের নিয়ে যায় অন্যান্য কোর্সের আগে এবং আরও চিত্র অন্তর্ভুক্ত এবং এটি আরও "মেয়েলি" টাইপফেস। আপনার মূল চিত্র এবং সেই শিরোনামের জন্য একই। শপিংয়ের কৌশল দেখিয়ে একটি কার্ড উপস্থাপন করার বিলাসিতা তাঁর রয়েছে।

ওয়েবে লিঙ্ক: অ্যালিসন হাউ

পিক্সেলোট

পিক্সেলোট কিছুটা ক্রেজি, তবে এটি লেখকের সৃজনশীলতাও নির্দেশ করে। ব্যবহার একটি মাস্ক তৈরি করতে মাউস পয়েন্টার আমাদের যেখানে যেখানেই আছে সেখানে ঝাপসা পড়ে bl

ওয়েবে লিঙ্ক: পিক্সেলোট

লিওনেল স্কুল

যদি আপনি চান এর চেয়ে বেশি কিছু না দিয়ে অনলাইনে আপনার জীবনবৃত্তান্ত তৈরি করুন, লিওনেল আপনাকে পদক্ষেপগুলি দেখায়। একটি উপযুক্ত ফন্ট, উপরের বামে আপনার ফটো, আপনার সামাজিক নেটওয়ার্কগুলির লিঙ্ক এবং আপনার অভিজ্ঞতা। একমাত্র আলংকারিক উপাদান হ'ল বিভিন্ন রঙের দুটি অনুভূমিক রেখা।

ওয়েবে লিঙ্ক: লিওনেল স্কুল

মার্জিত সিগলস

আমরা ফিরে ন্যূনতমতা কমনীয়তা এবং এই বড় ফাঁকা জায়গা। একদিকে, শিরোনামটি বাকি উপাদানগুলির থেকে অনেক দূরে এবং অন্যদিকে elements উপাদানগুলি এমনভাবে আকার দিয়েছে যাতে তারা তাদের মধ্যে একটি দুর্দান্ত চিত্তবিন্যাস তৈরি করে।

ওয়েবে লিঙ্ক: মার্জিত সিগলস

Lebensraum

আপনি সমস্ত উদাহরণে দেখতে পারেন, এটি গুরুত্বপূর্ণ বিভিন্ন পৃষ্ঠায় যেতে শিরোনাম ট্যাবগুলি ওয়েবসাইট থেকে। টাইপোগ্রাফিটি অত্যন্ত গুরুত্ব দেয়, একটি শিরোনামের জন্য এবং অন্যটি পাঠানোর জন্য সান সেরিফ দিয়ে খেলুন যা দুর্দান্ত কাজ করে।

ওয়েবে লিঙ্ক: Lebensraum

গোলাপ পয়েন্ট

রঙের বৈসাদৃশ্যটি আমাদের সমস্ত দর্শনগুলির একটি আরও জটিল জটিল ওয়েবের দিকে নিয়ে যায়। সমস্ত মূল উপাদান অনুপস্থিত নয় ব্যাকগ্রাউন্ড চিত্রের গ্রেডিয়েন্ট এবং এই দুটি বিভাগে মূল চিত্রটির জন্য গ্রেডিয়েন্টের মূল রঙ রয়েছে এই বার খেলতে।

ওয়েবে লিঙ্ক: গোলাপ পয়েন্ট

IWC

সঙ্গে একটি দুর্দান্ত ফটোগ্রাফ একটি সুনির্বাচিত ফন্ট এবং একটি "নায়ক" উপাদান আপনি এই ওয়েব দিতে পারেন। একটি স্লাইডার সহ এটি ধারণার মধ্যে বেশ সহজ কাজটির অংশটি দেখায়।

ওয়েবে লিঙ্ক: IWC

চপ কাটা

ডিজিটাল চিত্রটি আমাদের সাথে চপ চপ এনে দেয় যে চিত্রটি এর সমস্ত চাক্ষুষ উপস্থিতি খায়। শিরোনামের নীল রঙটি এটি ওয়েব দ্বারা প্রত্যাশিত পুরো চিত্রের সাথে সুর করে ক্রোম্যাটিক মান তৈরি করতে ইঙ্গিত দেয়।

ওয়েবে লিঙ্ক: চপ কাটা

7 পাইন

7 পাইন হোম প্লেটের দুর্দান্ত নায়ক হতে সবুজকে সাথে খেলবে। বাকিরা এটি রচনা করে প্রচুর সবুজ এবং একটি সাধারণ শিরোনাম সহ একটি চিত্র যে লোগো দ্বারা অলক্ষিত যেতে চায়।

ওয়েবে লিঙ্ক: 7 পাইন

যোগফল

যোগফল আমাদের অন্য দিকে নিয়ে যায়। বিবর্ণ কালো এবং সাদা সঙ্গে খেলুন, একটি খুব সৃজনশীল চিত্রণ এবং এটি আকর্ষণীয়ের চেয়ে আরও বেশি প্রাকৃতিক দৃশ্য নির্মাণের জন্য বাকি উপাদানগুলি এবং অন্যান্য দুটি চিত্রের সাথে চলে। একটি ওয়েবসাইট তৈরির উদাহরণ যা বাকী থেকে আলাদা।

ওয়েবে লিঙ্ক: যোগফল

টুপি বাক্স

এই ওয়েবসাইটে নীল রঙের মূল রঙ যেখানে কোনও অনুপস্থিত চিত্র নেই যা পুরোপুরি সাদা দ্বারা আলোকিত এবং গেমটি কেমন হবে সাইট বিল্ডারের 3 ডি তে আমরা সরানো হিসাবে যে সরানো।

ওয়েবে লিঙ্ক: টুপি বাক্স

কারা লাইটে

কারা যায় এর প্রাকৃতিক এবং সুন্দর উপস্থিতির সাথে সরলতা এবং নূন্যতমতা আপনার ছবিতে বাকী একটি পাঠ্য যা শিরোনামের প্রধান উপাদানগুলি এবং এটি খোলার জন্য একটি হ্যামবার্গার বোতামটি কী তা সহ আসে।

ওয়েবে লিঙ্ক: কারা লাইটে

Instrinsic স্টুডিও বিপণন

Es সহজ ওয়েব এর তবে এটি আমাদের দেখায় যে এটি একটি ব্লগ তৈরি কী। লাল এবং কালো একটি খুব "ব্লগ" সাইটের নায়ক।

ওয়েবে লিঙ্ক: Instrinsic স্টুডিও বিপণন

এইচটিএমএলে কীভাবে একটি সাধারণ ওয়েবসাইট তৈরি করবেন

আমরা আপনাকে শেখাতে যাচ্ছি এইচটিএমএল একটি সহজ ওয়েবসাইট তৈরি করুন যাতে আপনি এটি রচনা করেন এমন সর্বাধিক প্রাথমিক উপাদানগুলি জানেন know এটি একটি ওয়েব হোস্টের প্রয়োজন হবে যেখানে আমরা সিএসএসে কোড এবং কিছু টুইটগুলি লোড করতে পারি, তবে আসুন, এইচটিএমএল এ আমাদের যাত্রা শুরু করার নীতিগুলি।

কিছু দেখেছি সাধারণ ওয়েব উদাহরণ যা দিয়ে আপনি নিজের মাথা খুব বেশি না ভেঙে নিজের নকশা তৈরি করতে নিজেকে যথেষ্ট প্ররোচিত করতে পারেন। কখনও কখনও সহজ জটিল জিনিস আমাদের জড়িত চেয়ে ভাল প্রভাব তৈরি করে। আপনি দেখতে পাবেন বেশিরভাগ ক্ষেত্রে সাধারণ কাজগুলি খুব ভাল করে। এটার জন্য যাও.

এইচটিএমএলটিতে একটি সহজ ওয়েবসাইট তৈরি করা এটি প্রথমে মনে হওয়ার চেয়ে সহজ। একটি ওয়েবসাইট একটি শিরোনাম, শরীর নিয়ে গঠিত বা সামগ্রী এবং পাদলেখ বা পাদলেখ মূল উপাদান হিসাবে। আমরা তাদের এভাবে শ্রেণিবদ্ধ করতে পারি:

• Documentos: আমরা যে সমস্ত দস্তাবেজ তৈরি করতে যাচ্ছি তা অবশ্যই একটি দিয়ে করা উচিত । আমরা একটি দিয়ে খুলি এবং সর্বদা একটি দিয়ে বন্ধ হয়
• দেহ বা দেহ: দস্তাবেজের দৃশ্যমান অংশটি মাঝখানে ওয়াই
• শিরোনাম: তারা এইচ 1, এইচ 2, এইচ 3 দ্বারা পরিচিত ... আমরা একটি দিয়ে শুরু করি এবং আমরা একটি সঙ্গে বন্ধ । ভিতরে থাকা পাঠ্যটি শিরোনাম হিসাবে প্রদর্শিত হবে এবং তার সংখ্যার উপর নির্ভর করে এটি ছোট বা বৃহত্তর আকারে এটি করবে।
• অনুচ্ছেদ: অনুচ্ছেদটি একটি এর মধ্যে আবদ্ধ এবং সাথে বন্ধ
• Enlaces: পরিষ্কার উদাহরণ হলcreativosonline.org/»> লিঙ্ক করুন Creativos Online
• চিত্রাবলী: আমরা তাদের লেবেল দ্বারা সংজ্ঞায়িত । একটি উদাহরণ হবে । আমরা উদ্ধৃতি চিহ্নগুলির মধ্যে চিত্রটি প্রার্থনা করি এবং বিকল্প পাঠ্যের জন্য একটি Alt ব্যবহার করি যা এসইওর জন্য প্রয়োজনীয়।
• তালিকা: আমরা তালিকাটি সংজ্ঞায়িত করি একটি অগোছালো এবং সাথে একটি ঝরঝরে জন্য। তালিকা আইটেমগুলির সাথে ব্যবহার করা হয় । সবসময় বার দিয়ে এগুলি বন্ধ করতে ভুলবেন না।

এই উপাদানগুলির সাথে আমাদের থাকবে একটি সাধারণ ওয়েবসাইট তৈরির জন্য ভিত্তি যেহেতু আপনি তাদের ভাল পরিমাণে দেখতে পাবেন যে আমরা আপনাকে পরবর্তী বিভাগে শিখিয়ে দেব। ধরা যাক যে এর সর্বাধিক গুরুত্বপূর্ণ উপাদানগুলির সাথে অর্থপূর্ণ কাঠামোটি দেখতে এমন দেখাচ্ছে:

• এর নেভিগেশন বার সহ শিরোনাম সাইটের বিভিন্ন পৃষ্ঠাগুলির জন্য।
• নিবন্ধ বা শরীরের স্থান যার মধ্যে আমরা একটি ব্লগ এন্ট্রি তৈরি করতে পারি, আমাদের পাঠ্যক্রম বা একটি চিত্র রাখতে পারি।
• সাইডবার বা সাইডবার অতিরিক্ত তথ্য রাখা।
• পাদদেশ বা পাদদেশ, যেখানে আমরা সাইটের সর্বাধিক গুরুত্বপূর্ণ পৃষ্ঠাগুলির লিঙ্কগুলি পাশাপাশি সামাজিক নেটওয়ার্কগুলির আইকনগুলি রাখব (সর্বদা উদাহরণ হিসাবে)।

নীচে আপনি দেখতে পাবেন যে উদাহরণে সবগুলি একটি সাধারণ তবে মার্জিত লোগোর উপর ভিত্তি করে, একটি শিরোনাম যেখানে তারা সাইটের বিভিন্ন পৃষ্ঠাগুলিতে নেভিগেশন রাখে, একটি কেন্দ্রীয় স্থান যেখানে একটি পাঠ্য বা একটি চিত্র এবং একটি পূর্বের অনুচ্ছেদে উল্লিখিত উপাদানগুলির সাথে একটি ফুটার দ্বারা প্রভাবিত space

আমরা যে সুপারিশ আপনার মাথা ভাঙ্গা এবং সরল যান না। প্রধান বিষয় হ'ল এই অঞ্চলগুলি কয়েক সেকেন্ডের ভিজ্যুয়াল পাসের মধ্যে বিশ্রাম থেকে পৃথক করা হয়। সময়ের সাথে সাথে আমরা নিজেকে জটিল করতে এবং আরও অনেক স্পেস কাজ করতে সক্ষম হব।

এই হল এইচটিএমএল কোডের একটি স্পষ্ট উদাহরণ সর্বাধিক গুরুত্বপূর্ণ উপাদানগুলির সাথে:

<!DOCTYPE html>
<html lang='es'>
  <head>
    <meta charset='UTF-8'/>
    <title>HTML Semántico</title>
  </head>
  <body>

    <h1>Crear web es fácil!</h1>
    <ul>
      <li><a href='#'>Inicio</a></li>
      <li><a href='#'>Acerca de</a></li>
      <li><a href='#'>Blog</a></li>
      <li><a href='#'>Iniciar sesión</a></li>
    </ul>

  </body>
</html>

এইচটিএমএল কোডের এই লাইনগুলির সাথে আমাদের থাকবে পৃষ্ঠার শিরোনামটি প্রথমে দিয়ে শিরোনামে তৈরি করে, এক্ষেত্রে «অর্থপূর্ণ HTML», আমরা উভয় শিরোনামটি বন্ধ করে দেব , সঙ্গে শিরোনাম এবং আমরা দিয়ে দেহটি খোলার উপায় দেব ।

আমরা একটি ছিল এর সাথে এইচ 1 এ প্রথম শিরোনাম এটি দিয়ে বন্ধ , এবং আমরা একটি তালিকাতে যাব যা আমাদের সাইটের বিভিন্ন পৃষ্ঠাগুলির জন্য নেভিগেশন বার তৈরি করতে আমাদের সহায়তা করবে। আমরা তালিকাটি বন্ধ করে দিয়েছি , আমরা বন্ধ এবং শেষ পর্যন্ত এইচটিএমএল ডকুমেন্ট সহ ।

শেষ করতে, সর্বদা সাথে একটি নথি খুলুন স্ল্যাশ সহ পুরো কোডের শেষে এটি বন্ধ করতে। দস্তাবেজটি খোলার পরে, ভাষার রেফারেন্সটি সর্বদা ব্যবহৃত হয়, যা এই ক্ষেত্রে "এস" এবং স্প্যানিশ স্প্যানিশ ।

আপনি কোডটি কখন এবং কখনই নিবিড়ভাবে লক্ষ্য করা জরুরী আপনি একটি ফাংশন খুলুন বার দিয়ে এটি বন্ধ করুন সেই অনুযায়ী।

কিছুটা সিএসএস

আমরা সিএসএসে কিছুটা goোকি, কিন্তু পাশ করার সময় যাতে আপনি বুঝতে পারেন কিভাবে স্টাইল এইচটিএমএল। আসুন আমরা যে নীচে পাবেন যে সাধারণ ওয়েবসাইটগুলি দিতে সিএসএস এবং এইচটিএমএল একসাথে যেতে বলি।

একদিকে যদি আমাদের শিরোনাম বা শিরোলেখ কী, তার নিবন্ধ বা চিত্র এবং পাদচরণ সহ দেহ বা দেহ কীসের জন্য এইচটিএমএল এর শব্দার্থ ব্যবহার হয়, সিএসএসে আমরা সনাক্ত করতে «Div» ফাংশনটি ব্যবহার করব পরবর্তীতে ডিজাইনে প্রয়োজনীয় পরিবর্তনগুলি প্রয়োগ করার জন্য এই স্পেসগুলির প্রত্যেকটিতে।

এর মতো সাধারণ কিছু:

যদিও আমরা ডিভের সাহায্যে শৈলীগুলি প্রয়োগ করতে পারি, একটি উপযুক্ত এবং নিখুঁত কাঠামো সাহায্য করবে যাতে ওয়েব ক্রোলাররা আমাদের লিখিত সামগ্রীর সম্পর্কে পুরোপুরি "পড়তে" পারে, সুতরাং আমরা যদি সেই বেসিক কাঠামোটি অনুসরণ করি তবে আমাদের প্রথমে একটি দুর্দান্ত কাজ এবং বেস থাকবে।

Un সাধারণ সিএসএস কোড উদাহরণ:

h1 {
রঙ: সাদা;
টেক্সট প্রান্তিককরণ: কেন্দ্র;
}

আমরা এইচ 1 এবং পাঠ্য কল আমরা এটি সাদা রঙের সাথে রাখব: সাদা; এবং আমরা এটি «পাঠ্য প্রান্তিককরণ with দিয়ে কেন্দ্রটিতে প্রান্তিককরণ করব will এইচ 1 কলটি খোলার পরে বন্ধনী দিয়ে সর্বদা বন্ধ করুন।

হেডার ফটো গ্রেগ রাকোজি