30 หน้าเว็บที่เรียบง่ายอย่างไม่น่าเชื่อ

เพจที่มีชื่อเสียงที่สุดบางเพจมีข้อมูลมากเกินไป แต่ฉันชอบสิ่งที่ตรงกันข้าม: เพจที่เรียบง่าย

เห็นได้ชัดว่าเลขชี้กำลังที่ยอดเยี่ยมของกลุ่มนี้คือ Google ที่มีโฮมเพจที่เรียบง่ายตั้งแต่เริ่มเดินทาง แต่เห็นได้ชัดว่าไม่ใช่คนเดียวบนอินเทอร์เน็ตที่มุ่งมั่นที่จะทำให้สิ่งต่างๆเรียบง่าย

ตัวอย่างหน้าเว็บ HTML อย่างง่าย

คีนริชมอนด์

Kean Richmond ทำให้เราเห็นความเรียบง่ายของการเล่นที่มีองค์ประกอบไม่กี่อย่าง แต่วางไว้อย่างดี ให้ความรู้สึกที่ยอดเยี่ยมกับความเรียบง่าย. โลโก้ของเขาที่ด้านซ้ายบนทวิตเตอร์และไอคอนผู้ติดต่อทางด้านขวาและตรงกลางพร้อมตัวอักษรที่โดดเด่นสำหรับสิ่งที่เขาทุ่มเท

เชื่อมโยงไปยังเว็บ: Keanrich mond

Alice drougard

Alice drougard ทำให้มันเรียบง่ายด้วยการวางโลโก้ของคุณ ตรงกลางแท็บสี่แท็บเพื่อเลื่อนไปมาระหว่างหน้าหลักของเว็บไซต์ของคุณและชุดภาพถ่ายที่วางไว้อย่างเหมาะสมเพื่อให้เราทราบได้อย่างรวดเร็วว่าคุณทำอะไรและทำอะไร

เชื่อมโยงไปยังเว็บ: Alice drougard

โจนาธานอ็อกเดน

อ็อกเดน เล่นต่อไปว่าชื่อของคุณเป็นโลโก้ที่เรียบง่ายเพียงใดเครือข่ายโซเชียลที่อยู่ด้านล่างโดยไม่ดึงดูดความสนใจและการออกแบบของพวกเขาทำงานได้ดีเพื่อให้เราสามารถดำเนินการได้อย่างรวดเร็ว ในหน้าเดียวจะแสดงทุกสิ่งที่สำคัญ

เชื่อมโยงไปยังเว็บ: โจนาธานอ็อกเดน

นกกระจิบ

Finch กำลังไปที่อื่นเพื่อเล่นกับตัวอักษรและสิ่งเหล่านั้น สีที่แสดงถึงความสง่างามและความเฉลียวฉลาดในสิ่งที่ทำ. ด้วยองค์ประกอบเพียงไม่กี่อย่างเขาทิ้งความเป็นมืออาชีพทั้งหมดไว้ในมุมมอง นอกจากนี้ยังทำให้ชัดเจนว่าหน้าใดเชื่อมโยงกับคุณ

เชื่อมโยงไปยังเว็บ: นกกระจิบ

การออกแบบที่แตกต่าง

เว็บไซต์นี้ เล่นแตกต่างกัน. ใช้วอลล์เปเปอร์ที่มีส่วนหัวซึ่งเราสามารถไปที่หน้าหลักโทรศัพท์ของคุณและลิงก์ไปยังเครือข่ายโซเชียลของคุณ

เชื่อมโยงไปยังเว็บ: การออกแบบที่แตกต่าง

เร็ว

ไคแสดงให้เราเห็นด้วยรูปของเขาเองด้วย สามเหลี่ยมนามธรรมและจานสีที่เหมาะสม เพื่อให้ความใกล้ชิด นอกจากนี้เขายังเสนอส่วนหนึ่งของประวัติด้วยแบบอักษรที่มีขนาดเล็กลงในกรณีที่เราต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับเขา

เชื่อมโยงไปยังเว็บ: เร็ว

การออกแบบสวนแนวตั้ง

เช่นเดียวกับภาพก่อนหน้านี้การออกแบบสวนแนวตั้งจะมุ่งไปที่ภาพถ่ายที่แสดงได้อย่างรวดเร็ว หนึ่งในงานที่ดีที่สุดของเขาที่สนามบินออสโล. ที่ด้านบนเรามีส่วนหัวที่มี«แถบนำทาง»หรือแถบนำทางและแม้กระทั่งความเป็นไปได้ในการเปลี่ยนภาษา โลโก้วางไว้ในรูปแบบแนวตั้งเพื่อให้สัมผัสสุดท้ายกับหน้าที่เรียบง่าย

เชื่อมโยงไปยังเว็บ: การออกแบบสวนแนวตั้ง

247Grad

247Grad เล่นกับขาวดำและภาพพื้นหลัง เกือบจะมืดสนิท แบบอักษรส่วนหัวซึ่งมีขนาดเล็กกว่าข้อความและส่วนหัวเป็นตัวพิมพ์ใหญ่เพื่อสร้างความเปรียบต่างที่ดีในการออกแบบโดยรวม

เชื่อมโยงไปยังเว็บ: 247Grad

สนุกกับการนี​​้

Una การพิมพ์ที่ยอดเยี่ยมสามารถบ่งบอกถึงความเป็นของแท้ และเรารู้ว่าเราทำอะไร คุณไม่จำเป็นต้องให้อะไรเพิ่มเติมหากข้อความนั้นตรงไปตรงมา พวกเขาทำให้ชัดเจน: พวกเขาชอบสร้างแอปและเว็บไซต์ที่สวยงาม พวกเขาทิ้งอีเมลสำหรับโครงการและการศึกษาไว้ในลิงค์อื่น

เชื่อมโยงไปยังเว็บ: สนุกกับการนี​​้

Allison hou

แอลลิสันพาเราไป ก่อนหลักสูตรอื่น ๆ และมีรูปภาพเพิ่มเติม และแบบอักษร "ผู้หญิง" มากขึ้น เช่นเดียวกับภาพหลักของคุณและส่วนหัวนั้น เขามีความหรูหราในการแสดงบัตรที่แสดงเทคนิคสำหรับการจับจ่าย

เชื่อมโยงไปยังเว็บ: Allison hou

pixelot

Pixelot ค่อนข้างบ้า แต่ก็บ่งบอกถึงความคิดสร้างสรรค์ของผู้แต่งด้วย ใช้ ตัวชี้เมาส์เพื่อสร้างมาสก์ ที่พร่าเลือนทุกที่ที่เรามี

เชื่อมโยงไปยังเว็บ: pixelot

นักวิชาการ Lionel

ถ้าคุณต้องการ ทำเรซูเม่ออนไลน์ของคุณโดยไม่มีอะไรมากไปกว่านั้นไลโอเนลแสดงขั้นตอนต่างๆ แบบอักษรที่เหมาะสมรูปภาพของคุณที่ด้านซ้ายบนลิงก์ไปยังเครือข่ายโซเชียลและประสบการณ์ของคุณ องค์ประกอบตกแต่งเพียงอย่างเดียวคือเส้นแนวนอนสองเส้นที่มีสีต่างกัน

เชื่อมโยงไปยังเว็บ: นักวิชาการ Lionel

นกนางนวลที่สง่างาม

เรากลับ สู่ความสง่างามของความเรียบง่าย และช่องว่างขนาดใหญ่เหล่านั้น ในแง่หนึ่งส่วนหัวอยู่ไกลจากองค์ประกอบอื่น ๆ มากและในทางกลับกันองค์ประกอบเหล่านั้นมีรูปร่างในลักษณะที่สร้างความกลมกลืนของภาพที่ดีระหว่างองค์ประกอบเหล่านี้

เชื่อมโยงไปยังเว็บ: นกนางนวลที่สง่างาม

Lebensraum

ดังที่คุณเห็นในตัวอย่างทั้งหมดสิ่งสำคัญคือ แท็บส่วนหัวเพื่อไปยังหน้าต่างๆ จากเว็บไซต์ ตัวพิมพ์มีความสำคัญมากเล่นกับส่วนหัวและอีกอันสำหรับข้อความที่มี sans serif ซึ่งทำได้ดีมาก

เชื่อมโยงไปยังเว็บ: Lebensraum

พิ้งค์พอยท์

ความแตกต่างของสีนำเราไปสู่เว็บที่ซับซ้อนขึ้นเล็กน้อยของมุมมองทั้งหมด องค์ประกอบหลักเหล่านั้นไม่หายไปทั้งหมด ในการเล่นครั้งนี้ด้วยการไล่ระดับสีสำหรับภาพพื้นหลังและทั้งสองส่วนที่มีสีหลักของการไล่ระดับสีสำหรับภาพหลัก

เชื่อมโยงไปยังเว็บ: พิ้งค์พอยท์

IWC

ถ่ายรูปสวย ๆ ด้วย แบบอักษรที่เลือกมาอย่างดีและองค์ประกอบ "ฮีโร่" คุณสามารถมอบให้กับเว็บนี้ ด้วยแถบเลื่อนจะแสดงให้เห็นส่วนหนึ่งของงานที่ค่อนข้างเรียบง่ายในแนวคิดของมัน

เชื่อมโยงไปยังเว็บ: IWC

Chop Chop

ภาพประกอบดิจิทัลนำเรามาสู่ Chop Chop ด้วย ภาพนั้นกลืนไปกับการมองเห็นทั้งหมดของมัน. สีฟ้าในส่วนหัวเป็นจุดสำคัญในการสร้างค่าสีให้สอดคล้องกับภาพทั้งหมดที่ฉายโดยเว็บ

เชื่อมโยงไปยังเว็บ: Chop Chop

7 ต้นสน

7Pine เล่นกับกรีนเพื่อเป็นตัวชูโรงของโฮมเพลท ส่วนที่เหลือแต่งมัน รูปภาพที่มีสีเขียวจำนวนมากและส่วนหัวที่เรียบง่าย ที่ต้องการให้โลโก้ไม่มีใครสังเกตเห็น

เชื่อมโยงไปยังเว็บ: 7 ต้นสน

ผลรวม

ผลรวมนำเราไปในทิศทางอื่น เล่นกับนิทานขาวดำซึ่งเป็นภาพประกอบที่สร้างสรรค์มาก และนั่นก็ไปพร้อมกับองค์ประกอบที่เหลือและภาพประกอบอีกสองภาพเพื่อสร้างภูมิทัศน์ที่น่าสนใจ ตัวอย่างการสร้างเว็บไซต์ที่โดดเด่นจากที่อื่น ๆ

เชื่อมโยงไปยังเว็บ: ผลรวม

กล่องใส่หมวก

สีน้ำเงินเป็นสีที่โดดเด่นในเว็บไซต์นี้ซึ่งไม่มีภาพที่ขาดหายไปที่สว่างไสวด้วยสีขาวและลักษณะของเกมจะเป็นอย่างไร ใน 3 มิติของเครื่องมือสร้างไซต์นั้น ที่เคลื่อนไหวเมื่อเราเคลื่อนไหว

เชื่อมโยงไปยังเว็บ: กล่องใส่หมวก

คาราไลท์

Kara ไปที่ ความเรียบง่ายและความเรียบง่ายพร้อมรูปลักษณ์ที่เป็นธรรมชาติและสวยงาม ในรูปถ่ายของคุณ ส่วนที่เหลือเป็นข้อความที่มาพร้อมกับองค์ประกอบหลักของส่วนหัวและปุ่มแฮมเบอร์เกอร์เพื่อเปิด

เชื่อมโยงไปยังเว็บ: คาราไลท์

การตลาดภายในสตูดิโอ

Es ของเว็บที่ง่ายที่สุด แต่นั่นแสดงให้เราเห็นว่าการสร้างบล็อกคืออะไร สีแดงและสีดำเป็นตัวชูโรงในไซต์ "บล็อก"

เชื่อมโยงไปยังเว็บ: การตลาดภายในสตูดิโอ

วิธีสร้างเว็บไซต์ง่ายๆด้วย HTML

เรากำลังจะสอนคุณ สร้างเว็บไซต์ง่ายๆด้วย HTML เพื่อให้คุณทราบองค์ประกอบพื้นฐานที่สุดที่ประกอบเป็นองค์ประกอบ จำเป็นต้องมีโฮสต์เว็บที่เราสามารถโหลดโค้ดและปรับแต่ง CSS ได้ แต่ต่อไปนี้เป็นหลักการในการเริ่มต้นการเดินทางของเราใน HTML

เคยเห็นมาบ้าง ตัวอย่างเว็บง่ายๆ ซึ่งคุณสามารถกระตุ้นตัวเองได้มากพอที่จะออกแบบของคุณเองโดยไม่ทำลายหัวของคุณมากนัก บางครั้งความเรียบง่ายก็สร้างผลดีกว่าการทำให้เราซับซ้อนในสิ่งที่ซับซ้อน คุณจะเห็นว่าในกรณีส่วนใหญ่การใช้งานง่าย ๆ ทำได้ดีมาก ไปเลย

การสร้างเว็บไซต์ง่ายๆใน HTML นั้นง่ายกว่าที่คิดในตอนแรก เว็บไซต์ ประกอบด้วยส่วนหัวร่างกาย หรือเนื้อหาและส่วนท้ายหรือส่วนท้ายเป็นองค์ประกอบหลัก เราสามารถจำแนกได้ด้วยวิธีนี้:

• เอกสาร: เอกสารทั้งหมดที่เราจะสร้างต้องทำด้วยไฟล์ . เราเปิดด้วยไฟล์ และปิดด้วยไฟล์
• ร่างกายหรือร่างกาย: ส่วนที่มองเห็นได้ของเอกสารอยู่ระหว่าง ย
• ส่วนหัว: พวกเขาเป็นที่รู้จักโดย H1, H2, H3 ... เราเริ่มต้นด้วย และเราปิดด้วย . ข้อความที่อยู่ภายในจะปรากฏเป็นส่วนหัวและขึ้นอยู่กับการกำหนดหมายเลขข้อความนั้นจะมีขนาดเล็กลงหรือใหญ่ขึ้น
• ย่อหน้า: ย่อหน้าอยู่ภายในไฟล์ และปิดด้วย
• ลิงค์: ตัวอย่างที่ชัดเจนที่สุดคือcreativosonline.org/»> ลิงก์ไปยัง Creativos Online
• ภาพ: เรากำหนดโดยฉลาก . ตัวอย่างจะเป็น . เราเรียกรูปภาพระหว่างเครื่องหมายคำพูดและใช้ alt สำหรับข้อความแสดงแทนซึ่งจำเป็นสำหรับ SEO
• รายการ: เรากำหนดรายการด้วย สำหรับยุ่งและด้วย เพื่อความเรียบร้อย รายการใช้กับ . อย่าลืมปิดด้วยแถบเสมอ

ด้วยองค์ประกอบเหล่านี้เราจะมี พื้นฐานในการสร้างเว็บไซต์ง่ายๆ ดังที่คุณจะเห็นในจำนวนที่ดีซึ่งเราจะสอนคุณในหัวข้อถัดไป สมมติว่าโครงสร้างความหมายที่มีองค์ประกอบที่สำคัญที่สุดมีลักษณะดังนี้:

• ส่วนหัวที่มีแถบนำทาง สำหรับหน้าต่างๆของไซต์
• บทความหรือพื้นที่เนื้อหา ซึ่งเราสามารถสร้างรายการบล็อกใส่หลักสูตรหรือรูปภาพของเรา
• แถบด้านข้างหรือแถบด้านข้าง เพื่อใส่ข้อมูลเพิ่มเติม
• ส่วนท้ายหรือส่วนท้ายซึ่งเราจะวางลิงก์ไปยังหน้าที่สำคัญที่สุดของไซต์ตลอดจนไอคอนของโซเชียลเน็ตเวิร์ก (เป็นตัวอย่างเสมอ)

ในตัวอย่างที่คุณจะเห็นด้านล่างนี้คือ ทั้งหมดมีพื้นฐานมาจากโลโก้ที่เรียบง่าย แต่หรูหราซึ่งเป็นส่วนหัวที่พวกเขาวางการนำทางไปยังหน้าต่างๆของไซต์พื้นที่ส่วนกลางที่ครอบงำโดยข้อความหรือรูปภาพและส่วนท้ายที่มีองค์ประกอบที่กล่าวถึงในย่อหน้าก่อนหน้า

เราขอแนะนำว่า อย่าหักหัวของคุณและไปที่ความเรียบง่าย. สิ่งสำคัญคือพื้นที่เหล่านี้แตกต่างจากส่วนที่เหลือในเวลาไม่กี่วินาที เมื่อเวลาผ่านไปเราจะสามารถทำให้ตัวเองซับซ้อนและทำงานในพื้นที่อื่น ๆ ได้มากขึ้น

นี้คือ ตัวอย่างที่ชัดเจนของโค้ด HTML ด้วยองค์ประกอบที่สำคัญที่สุด:

<!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 เหล่านี้เราจะมี ครั้งแรกสร้างชื่อหน้าในส่วนหัวด้วยในกรณีนี้« HTML เชิงความหมาย»เราจะปิดทั้งสองชื่อด้วย , ส่วนหัวด้วย และเราจะให้วิธีการเปิดร่างกายด้วย .

เราจะมีไฟล์ ส่วนหัวแรกใน H1 ด้วย เพื่อปิดด้วย และเราจะไปที่รายการที่จะช่วยเราในการสร้างแถบนำทางสำหรับหน้าต่างๆของไซต์ของเรา เราปิดรายการด้วย เราปิด และสุดท้ายเอกสาร html ด้วย .

เพื่อเสร็จสิ้น เปิดเอกสารด้วย เพื่อปิดท้ายรหัสทั้งหมดด้วยเครื่องหมายทับ หลังจากเปิดเอกสารแล้วจะมีการใช้การอ้างอิงถึงภาษาเสมอซึ่งในกรณีนี้คือภาษาสเปนที่มี "es" และด้วย a .

สิ่งสำคัญคือคุณต้องดูโค้ดอย่างใกล้ชิดและเมื่อใดก็ตาม คุณเปิดฟังก์ชั่นปิดด้วยแถบ ตรงกัน

CSS เล็กน้อย

เราเข้าไปใน CSS เล็กน้อย แต่ในการส่งผ่านเพื่อให้คุณเข้าใจ วิธีจัดสไตล์ HTML. สมมติว่า CSS และ HTML ร่วมมือกันเพื่อมอบเว็บไซต์ง่ายๆที่คุณจะพบด้านล่าง

หากในแง่หนึ่งเรามีการใช้ HTML เชิงความหมายสำหรับสิ่งที่เป็นส่วนหัวหรือส่วนหัวเนื้อหาหรือเนื้อหาที่มีบทความหรือรูปภาพและส่วนท้าย ใน CSS เราจะใช้ฟังก์ชัน« Div »เพื่อระบุ ในแต่ละช่องว่างเหล่านี้เพื่อนำการเปลี่ยนแปลงที่จำเป็นไปใช้ในการออกแบบในภายหลัง

สิ่งที่ง่ายพอ ๆ กับ:

แม้ว่าเราจะใช้สไตล์กับ Div ได้ โครงสร้างที่เหมาะสมและสมบูรณ์แบบจะช่วยได้ เพื่อให้โปรแกรมรวบรวมข้อมูลเว็บสามารถ "อ่าน" เนื้อหาของเราได้อย่างสมบูรณ์แบบดังนั้นหากเราปฏิบัติตามโครงสร้างพื้นฐานดังกล่าวเราจะมีงานและพื้นฐานที่ดีก่อน

Un ตัวอย่างโค้ด CSS ง่ายๆ:

h1 {
สี: ขาว;
text-align: ศูนย์;
}

เราเรียกว่า H1 และข้อความ เราจะใส่สีขาวด้วยสี: ขาว; และเราจะจัดตำแหน่งให้ตรงกลางด้วย«จัดข้อความ» ปิดด้วยวงเล็บทุกครั้งหลังจากเปิดสาย H1

รูปภาพส่วนหัวของ Greg rakozy