30 İnanılmaz Basit Web Sayfası

En ünlü sayfalardan bazıları bilgi ile aşırı yüklüdür, ancak ben tam tersini tercih ederim: basit olanlar.

Açıkçası bu grubun en büyük temsilcisi, yolculuğuna başladığından beri minimalist ana sayfasıyla Google, Ancak açıkça, internette işleri basit tutmaya kendini adamış tek kişi o değil.

Basit HTML web sayfası örnekleri

Kean richmond

Kean Richmond, birkaç unsurla oynamanın basitliğini görmemizi sağlıyor, ancak minimalizme harika bir his ver. Sol üstteki logosu, sağdaki ve ortadaki Twitter ve iletişim simgeleri, kendisini adadığı şeye çarpıcı bir tipografi ile.

Web bağlantısı: Keanrich mond

Alice drougard

Alice drougard logonuz yerleştirildiğinde de basit tutun ortada, web sitenizin ana sayfaları ve uygun şekilde yerleştirilmiş bir dizi fotoğraf arasında hareket etmek için dört sekme, böylece bir bakışta ne yaptığınızı ve ne yaptığınızı biliyoruz.

Web bağlantısı: Alice drougard

jonathan ogden

Ogden adınızın bir logo kadar basit olduğunu oynamaya devam edin, hemen altında yer alan sosyal ağlar dikkat çekmeden ve hızlı bir şekilde içinden geçebilmemiz için tasarımları çalışıyor. Tek bir sayfada önemli olan her şeyi gösterir.

Web bağlantısı: jonathan ogden

Ispinoz

Finch zaten tipografi ile oynamak için başka yerlere gidiyor ve Yaptığı işin zarafetini ve bilgeliğini ifade eden renkler. Sadece birkaç unsurla, tüm profesyonelliğini göz önünde bırakır. Ayrıca hangi sayfaların size bağlantı verdiğini de netleştirir.

Web bağlantısı: Ispinoz

Farklı bir Tasarım

Bu web sitesi farklı oyna. Ana sayfalara, telefonunuza ve sosyal ağlarınızın bağlantılarına gidebileceğimiz bir başlığı olan bir duvar kağıdı kullanın.

Web bağlantısı: Farklı bir Tasarım

canlı

Kai, bizi kendi figürü ile gösteriyor. soyut bir üçgen ve uygun bir renk paleti yakınlık vermek için. Ayrıca, kendisi hakkında daha fazla bilgi edinmek istememiz durumunda, biyografisinin bir kısmını daha küçük boyutlu bir yazı tipiyle sunuyor.

Web bağlantısı: canlı

Dikey Bahçe Tasarımı

Bir öncekinde olduğu gibi, Dikey Bahçe Tasarımı hızlı gösteren bir fotoğrafa doğru gidiyor Oslo havaalanındaki en iyi işlerinden biri. En üstte, "gezinme çubuğu" veya gezinme çubuğu ve hatta dili değiştirme olanağına sahip bir başlık var. Logo, çok basit bir sayfaya son dokunuşu vermek için onu dikey formatta yerleştirir.

Web bağlantısı: Dikey Bahçe Tasarımı

247 derece

247 derece monokrom ve bir arka plan görüntüsü ile oynayın neredeyse tamamen karanlık. Metin ve başlıktan daha küçük olan başlık yazı tipi, genel tasarımda harika bir kontrast oluşturmak için büyük harfle yazılır.

Web bağlantısı: 247 derece

Bu Enjoy

bir harika tipografi özgün olmanın işareti olabilir ve ne yaptığımızı bildiğimizi. Mesaj doğrudan ise daha fazla bir şey vermenize gerek yok. Net bir şekilde ifade ediyorlar: Güzel uygulamalar ve web siteleri oluşturmayı seviyorlar. Projeler ve çalışmaları için postayı başka bir bağlantıda bırakırlar.

Web bağlantısı: Bu Enjoy

Allison hou

Allison bizi alıyor diğer kurslardan önce ve daha fazla resim içeriyor ve bu daha "kadınsı" yazı tipi. Aynı şey ana görüntünüz ve bu başlık için de geçerli. Alışveriş için püf noktaları gösteren bir kart sunma lüksüne sahiptir.

Web bağlantısı: Allison hou

piksel

Pixelot biraz çılgınca ama aynı zamanda yazarın yaratıcılığını da gösteriyor. Kullanım maske oluşturmak için fare işaretçisi Bu, tünediğimiz her yerde bulanıklaşıyor.

Web bağlantısı: piksel

Lionel okulları

İsterseniz özgeçmişinizi bundan başka bir şey olmadan çevrimiçi yapın, Lionel size adımları gösterir. Uygun bir yazı tipi, sol üstteki fotoğrafınız, sosyal ağlarınıza ve deneyiminize bağlanır. Tek dekoratif unsur, farklı renkteki iki yatay çizgidir.

Web bağlantısı: Lionel okulları

Zarif Martılar

Geri döndük minimalizmin zarafetine ve o büyük boşluklar. Bir yandan başlık diğer elemanlardan çok uzak, diğer yandan ise aralarında harika bir görsel uyum yaratacak şekilde şekillendirilmiş bu elemanlar.

Web bağlantısı: Zarif Martılar

doğal ortam

Tüm örneklerde görebileceğiniz gibi, önemli farklı sayfalara gitmek için başlık sekmeleri web sitesinden. Tipografi çok önemlidir, biri başlık için diğeri ise harika bir iş çıkaran bir sans serif ile metin için oynayın.

Web bağlantısı: doğal ortam

Pembe Nokta

Renklerin kontrastı bizi tüm görünümlerin biraz daha karmaşık bir ağına götürür. Tüm bu ana unsurlar eksik değil bu kez arka plan görüntüsünün degradeleriyle ve ana görüntünün degradesinin ana renklerine sahip olan iki bölümle oynamak için.

Web bağlantısı: Pembe Nokta

IWC

İle harika bir fotoğraf iyi seçilmiş bir yazı tipi ve bir "kahraman" öğesi bu ağa verebilirsiniz. Bir kaydırıcıyla, işin bir kısmının konseptinde oldukça basit olduğunu gösterir.

Web bağlantısı: IWC

Chop Chop

Dijital illüstrasyon bizi Chop Chop'a getiriyor tüm görsel varlığını yiyen o görüntü. Başlıktaki mavi renk, ona web tarafından yansıtılan görüntünün tamamı ile uyumlu kromatik değerler oluşturma noktasını verir.

Web bağlantısı: Chop Chop

7Çam

7Pine, ev plakasının büyük kahramanı olmak için yeşille oynuyor. Gerisi onu oluşturur çok sayıda yeşil ve basit bir başlık içeren bir resim logo tarafından fark edilmeden gitmek isteyen.

Web bağlantısı: 7Çam

Toplam

Toplam bizi başka yönlere götürür. Çok yaratıcı bir örnek olan efsanevi siyah beyazla oynayın ve bu, ilginç olandan daha fazla bir manzara oluşturmak için diğer öğeler ve diğer iki resimle birlikte gelir. Diğerlerinden sıyrılan bir web sitesi oluşturmak için bir örnek.

Web bağlantısı: Toplam

Şapka kutusu

Mavi, bu web sitesinde tamamen beyazla aydınlatılmış eksik resimlerin olmadığı ve oyunun nasıl bir şey olacağı baskın renktir. o site oluşturucunun 3 boyutlu olarak biz hareket ettikçe hareket eden

Web bağlantısı: Şapka kutusu

Kara lyte

Kara gider doğal ve güzel varlığıyla sadelik ve minimalizm fotoğrafınızda. Gerisi, başlık için ana unsurların neler olduğu ve onu açmak için bir hamburger düğmesi ile birlikte gelen bir metindir.

Web bağlantısı: Kara lyte

Instrinsic Studio Pazarlama

Es en basit web'in ama bu bize blog yapmanın ne olduğunu gösteriyor. Kırmızı ve siyah, bir "blog" sitesinin kahramanlarıdır.

Web bağlantısı: Instrinsic Studio Pazarlama

HTML'de basit bir web sitesi nasıl oluşturulur

Sana öğreteceğiz HTML'de basit bir web sitesi oluşturun böylece onu oluşturan en temel öğeleri bilirsiniz. Kodu yükleyebileceğimiz bir web barındırıcısına ve CSS'de bazı ince ayarlara sahip olmamız gerekecek, ancak hadi, bunlar yolculuğumuza HTML'de başlamak için gereken ilkeler.

Bazılarını görmüş olmak basit web örnekleri Kendinizi çok fazla kafanızı kırmadan kendi tasarımlarınızı yapacak kadar motive edebileceğiniz bir ürün. Bazen basit, karmaşık şeylerde bizi karmaşıklaştırmaktan daha iyi bir etki yaratır. Çoğu durumda basitin çok iyi çalıştığını göreceksiniz. Göreyim seni.

HTML'de basit bir web sitesi oluşturmak ilk bakışta göründüğünden daha kolaydır. Bir internet sitesi bir başlıktan oluşur, gövde veya içerik ve altbilgi veya altbilgi ana öğelerdir. Bunları şu şekilde sınıflandırabiliriz:

• Belgeler: oluşturacağımız tüm belgeler bir . İle açıyoruz ve her zaman bir
• Vücut veya vücut: belgenin görünen kısmı arasında Y
• Başlıklar: H1, H2, H3 olarak bilinirler ... ve bir ile kapatıyoruz . İçerideki metin bir başlık olarak görünecek ve numarasına bağlı olarak bunu daha küçük veya daha büyük bir boyutta yapacaktır.
• Paragraflar: paragraf bir ve ile kapanır
• Linkler: en açık örnekcreativosonline.org/»> Creativos Online'a bağlantı
• Görüntüler: onları etiketle tanımlarız . Bir örnek olabilir . Tırnak işaretleri arasındaki resmi çağırırız ve alternatif metin için SEO için gerekli olan bir alt kullanırız.
• Listeleri: listeleri ile tanımlarız dağınık bir şekilde düzgün için. Liste öğeleri ile kullanılır . Bunları daima çubukla kapatmayı unutmayın.

Bu unsurlarla sahip olacağız basit bir web sitesi oluşturmanın temeli bir sonraki bölümde size öğreteceğimiz şeylerin çoğunda göreceğiniz gibi. Diyelim ki en önemli unsurlarıyla anlamsal yapı şu şekilde görünüyor:

• Gezinme çubuğuyla başlık sitenin farklı sayfaları için.
• Makale veya gövde alanı içine bir blog girişi oluşturabiliriz, müfredatımızı veya bir resmi koyabiliriz.
• Kenar çubuğu veya kenar çubuğu ek bilgi koymak için.
• Altbilgi veya ayak, sitenin en önemli sayfalarına ve sosyal ağların simgelerine (her zaman örnek olarak) bağlantılar yerleştireceğimiz yer.

Aşağıda göreceğiniz örneklerde tümü basit ama zarif bir logoya dayanmaktadır, sitenin farklı sayfalarına navigasyonu yerleştirdikleri bir başlık, bir metin veya bir görüntünün hakim olduğu bir merkezi alan ve önceki paragrafta bahsedilen unsurların bulunduğu bir altbilgi.

Bunu tavsiye ediyoruz kafanı kırma ve basite git. Önemli olan, bu alanların diğerlerinden görsel olarak saniyeler içinde farklılaşmasıdır. Zamanla kendimizi karmaşıklaştırabilir ve diğer alanlarda daha çok çalışabiliriz.

Bu, HTML kodunun net bir örneği en önemli unsurlarla:

<!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>

Bu HTML kodu satırlarıyla, ilk olarak başlıktaki sayfa başlığını oluşturdu, bu durumda "Anlamsal HTML", her iki başlığı da kapatırız ile başlık ve bedeni açmak için yol verirdik .

Biz olurdu H1'deki ilk başlık kapatmak için ve sitemizin farklı sayfaları için gezinme çubuğu oluşturmamıza yardımcı olacak bir listeye giderdik. Listeyi ile kapatıyoruz kapatıyoruz ve son olarak html belgesi .

Son olarak, her zaman bir belgeyi aç eğik çizgiyle tüm kodun sonunda kapatmak için. Belgeyi açtıktan sonra, her zaman dile referans kullanılır, bu durumda İspanyolca "es" ve .

Kodu yakından incelemeniz ve ne zaman ve ne zaman bir işlevi açarsan, onu çubukla kapat karşılık gelir.

Biraz CSS

CSS'ye biraz giriyoruz, ancak geçerken anlayacaksınız HTML stili nasıl yapılır. Diyelim ki CSS ve HTML, aşağıda bulacağınız basit web sitelerini vermek için el ele gidiyor.

Bir yandan üstbilgi, makale veya görüntüsü ile gövde veya gövde ve altbilgi için HTML'nin anlamsal kullanımına sahipsek, CSS'de, "Div" işlevini kullanarak daha sonra tasarımda gerekli değişiklikleri uygulamak için bu alanların her birine.

O kadar basit bir şey:

Stilleri Div ile uygulayabilirken, uygun ve mükemmel bir yapı yardımcı olacaktır Böylece web tarayıcıları içeriğimizin ne hakkında olduğunu mükemmel bir şekilde "okuyabilir", bu nedenle bu temel yapıyı izlersek, önce harika bir işimiz ve temelimiz olur.

Un basit CSS kodu örneği:

h1 {
renk: beyaz;
text-align: merkez;
}

H1 ve metni arıyoruz Beyaz renkle beyaza koyacağız: beyaz; ve bunu merkeze "metin hizalama" ile hizalayacağız. H1 çağrısını açtıktan sonra daima köşeli parantezlerle kapatın.

Başlık fotoğrafı Greg rakozy