30 આશ્ચર્યજનક સરળ વેબ પૃષ્ઠો

કેટલાક ખૂબ પ્રખ્યાત પૃષ્ઠો માહિતીથી ખૂબ જ વધારે છે, પરંતુ હું તેનાથી વિરુદ્ધ પસંદ કરું છું: સરળ પૃષ્ઠો.

સ્વાભાવિક છે કે આ જૂથનો મહાન ઘાતરો એ તેના ઓછામાં ઓછા હોમ પેજ સાથે ગૂગલ છે, કારણ કે તેણે તેની મુસાફરી શરૂ કરી છે, પરંતુ સ્પષ્ટ છે કે ઇન્ટરનેટ પર ફક્ત તે જ નથી જે વસ્તુઓ સરળ રાખવા માટે પ્રતિબદ્ધ છે.

સરળ HTML વેબ પૃષ્ઠ ઉદાહરણો

કીન શ્રીમંત

કેન રિચમોન્ડ અમને થોડા તત્વો સાથે રમવાની સરળતા જોવા માટે બનાવે છે, પરંતુ તે ખૂબ સારી રીતે મૂકવામાં આવે છે ઓછામાં ઓછા માટે એક મહાન લાગણી આપે છે. ઉપલા ડાબી બાજુએ તેમનો લોગો, તે સમર્પિત છે તે માટે, આકર્ષક ટાઇપોગ્રાફી સાથે, જમણી બાજુએ અને પક્ષીએ અને સંપર્ક ચિહ્નો.

વેબ પર લિંક: કીનરિચ મોંદ

એલિસ ડ્રોગાર્ડ

એલિસ ડ્રોગાર્ડ તમારા લોગોની સાથે તેને પણ સરળ રાખો કેન્દ્રમાં, તમારી વેબસાઇટના મુખ્ય પૃષ્ઠો અને ફોટોગ્રાફ્સની શ્રેણી વચ્ચે યોગ્ય રીતે મૂકવા માટેના ચાર ટsબ્સ જેથી એક નજરમાં અમને ખબર પડે કે તમે શું કરો છો અને તમે શું કરો છો.

વેબ પર લિંક: એલિસ ડ્રોગાર્ડ

જોનાથન ઓગડન

ઓગડેન તમારું નામ લોગો તરીકે કેટલું સરળ છે તે સાથે રમતા રહો, ધ્યાન આકર્ષિત કર્યા વિના જ નીચે સ્થિત સોશિયલ નેટવર્ક અને તેમની ડિઝાઇન કાર્ય કરે છે કે જેથી અમે ઝડપથી તેના દ્વારા પસાર થઈ શકીએ. એક પૃષ્ઠ પર તે બધી બાબતો બતાવે છે જે મહત્વપૂર્ણ છે.

વેબ પર લિંક: જોનાથન ઓગડન

ફિન્ચ

ટાઇંચગ્રાફી અને તે સાથે રમવા માટે ફિંચ પહેલાથી જ અન્ય સ્થળોએ જઈ રહ્યું છે રંગો જે તે કરે છે તેની લાવણ્ય અને શાણપણ સૂચવે છે. ફક્ત થોડા તત્વો સાથે, તે તેની બધી વ્યાવસાયીકરણને ધ્યાનમાં રાખીને છોડી દે છે. તે પણ સ્પષ્ટ કરે છે કે કયા પૃષ્ઠોએ તમને લિંક કર્યા છે.

વેબ પર લિંક: ફિન્ચ

એક અલગ ડિઝાઇન

આ વેબસાઇટ અલગ ભજવે છે. હેડરવાળા વ wallpલપેપરનો ઉપયોગ કરો કે જેમાંથી અમે મુખ્ય પૃષ્ઠો, તમારા ફોન અને તમારા સામાજિક નેટવર્કની લિંક્સ પર જઈ શકીએ છીએ.

વેબ પર લિંક: એક અલગ ડિઝાઇન

બ્રિઝ્ક

કાઇ અમને તેના પોતાના આકૃતિ સાથે સચિત્ર કરે છે એક અમૂર્ત ત્રિકોણ અને યોગ્ય રંગ પ .લેટ નિકટતા આપવા માટે. જો અમે તેમના વિશે વધુ જાણવા માંગીએ તો તે નાના કદમાં ફોન્ટ સાથે તેના બાયોનો ભાગ પણ આપે છે.

વેબ પર લિંક: બ્રિઝ્ક

વર્ટિકલ ગાર્ડન ડિઝાઇન

પાછલા એકની જેમ, વર્ટિકલ ગાર્ડન ડિઝાઇન એક ફોટોગ્રાફ તરફ જાય છે જે ઝડપથી બતાવે છે ઓસ્લો એરપોર્ટ પર તેની શ્રેષ્ઠ નોકરીઓમાંની એક. ટોચ પર અમારી પાસે «એનએવી બાર» અથવા નેવિગેશન પટ્ટી અને ભાષામાં ફેરફાર થવાની સંભાવના સાથેનો મથાળું છે. ખૂબ જ સરળ પૃષ્ઠને અંતિમ સ્પર્શ આપવા માટે લોગો તેને icalભી ફોર્મેટમાં મૂકે છે.

વેબ પર લિંક: વર્ટિકલ ગાર્ડન ડિઝાઇન

247Grad

247Grad મોનોક્રોમ અને પૃષ્ઠભૂમિ છબી સાથે રમો લગભગ તદ્દન અંધકાર. એકંદર ડિઝાઇનમાં મોટો વિરોધાભાસ બનાવવા માટે ટેક્સ્ટ અને હેડરથી નાનો હેડર ફોન્ટ, મોટામાં મોટો છે.

વેબ પર લિંક: 247Grad

આનો આનંદ માણો

ઉના મહાન ટાઇપોગ્રાફી એ અધિકૃત હોવાના સંકેત હોઈ શકે છે અને તે આપણે જાણીએ છીએ કે આપણે શું કરીએ છીએ. જો સંદેશ સીધો હોય તો તમારે વધુ કંઇ આપવાની જરૂર નથી. તેઓ તેને ખૂબ જ સ્પષ્ટ કરે છે: તેમને સુંદર એપ્લિકેશનો અને વેબસાઇટ્સ બનાવવાનું પસંદ છે. તેઓ પ્રોજેક્ટ્સ અને તેમના અભ્યાસ માટેના મેઇલને બીજી કડી પર છોડી દે છે.

વેબ પર લિંક: આનો આનંદ માણો

એલિસન હૌ

એલિસન અમને લઈ જાય છે અન્ય અભ્યાસક્રમો પહેલાં અને વધુ છબીઓ શામેલ છે અને તે વધુ "સ્ત્રીની" ટાઇપફેસ. તમારી મુખ્ય છબી અને તે મથાળા માટે તે જ છે. તેની પાસે શોપિંગ યુક્તિઓ બતાવતા કાર્ડ રજૂ કરવાની લક્ઝરી છે.

વેબ પર લિંક: એલિસન હૌ

પિક્સેલટ

પિક્સેલટ થોડો ઉન્મત્ત છે, પરંતુ તે લેખકની સર્જનાત્મકતા પણ દર્શાવે છે. વાપરવુ માસ્ક બનાવવા માટે માઉસ પોઇન્ટર કે જ્યાં પણ આપણી પાસે પેરેજ હોય ​​ત્યાં અસ્પષ્ટ થાય છે.

વેબ પર લિંક: પિક્સેલટ

લાયોનેલ સ્કolલ્ટ્સ

જો તમે ઇચ્છો તો તેના કરતાં વધુ કંઇ સાથે તમારા રેઝ્યૂમેને makeનલાઇન બનાવો, લાયોનેલ તમને પગલાં બતાવે છે. યોગ્ય ફોન્ટ, ઉપલા ડાબી બાજુએ તમારો ફોટો, તમારા સામાજિક નેટવર્ક અને તમારા અનુભવની લિંક્સ. એકમાત્ર સુશોભન તત્વ એ વિવિધ રંગોની તે બે આડી રેખાઓ છે.

વેબ પર લિંક: લાયોનેલ સ્કolલ્ટ્સ

ભવ્ય સીગલ્સ

અમે પાછા લઘુતમતા લાવણ્ય માટે અને તે મોટી ખાલી જગ્યાઓ. એક તરફ હેડર બાકીના તત્વોથી ખૂબ દૂર છે, અને બીજી તરફ તે તત્વોને આકાર આપે છે કે તે તેમની વચ્ચે એક મહાન દ્રશ્ય સંવાદિતા બનાવે છે.

વેબ પર લિંક: ભવ્ય સીગલ્સ

લેબેન્સ્રોમ

જેમ કે તમે બધા ઉદાહરણોમાં જોઈ શકો છો, તે મહત્વપૂર્ણ છે વિવિધ પૃષ્ઠો પર જવા માટે હેડર ટsબ્સ વેબસાઇટ પરથી. ટાઇપોગ્રાફી ખૂબ મહત્વનું છે, હેડર માટે એક સાથે રમવું અને બીજું એક મહાન કામ કરનારી સેરીફ સાથે ટેક્સ્ટ માટે.

વેબ પર લિંક: લેબેન્સ્રોમ

પિંકપોઇન્ટ

રંગોનો વિરોધાભાસ અમને બધા દૃષ્ટિકોણોથી થોડો વધુ જટિલ વેબ તરફ દોરી જાય છે. તે બધા મુખ્ય તત્વો ગુમ નથી આ સમયે બેકગ્રાઉન્ડ ઇમેજ માટે અને તે બે વિભાગો કે જે મુખ્ય છબી માટે gradાળના મુખ્ય રંગ ધરાવે છે, તેના માટે gradાળ સાથે રમવા માટે.

વેબ પર લિંક: પિંકપોઇન્ટ

આઇડબલ્યુસી

સાથે એક મહાન ફોટોગ્રાફ એક પસંદ કરેલ ફોન્ટ અને "હીરો" તત્વ તમે આ વેબને આપી શકો છો. સ્લાઇડર સાથે, તે તેની વિભાવનામાં કામનો એકદમ સરળ બતાવે છે.

વેબ પર લિંક: આઇડબલ્યુસી

ટુકડા ટુકડા

ડિજિટલ ચિત્રણ અમને ચોપ ચોપ સાથે લાવે છે તે છબી જે તેની બધી વિઝ્યુઅલ હાજરીને ઉઠાવી લે છે. હેડરમાં વાદળી રંગ તેને વેબ દ્વારા અંદાજવામાં આવેલી સંપૂર્ણ છબીની સાથે રંગીન મૂલ્યો બનાવવા માટેનો મુદ્દો આપે છે.

વેબ પર લિંક: ટુકડા ટુકડા

7 પાઇન

7 પાઇન હોમ પ્લેટનો મહાન નાયક બનવા માટે લીલા સાથે રમે છે. બાકીના તે કંપોઝ કરે છે ઘણા બધા લીલા અને સરળ હેડરવાળી એક છબી જે લોગો દ્વારા કોઈનું ધ્યાન ન લેવા માંગે છે.

વેબ પર લિંક: 7 પાઇન

રકમ

સરવાળો અમને અન્ય દિશામાં લઈ જાય છે. અસ્પષ્ટ કાળા અને સફેદ, ખૂબ સર્જનાત્મક ઉદાહરણ સાથે રમો અને તે બાકીના તત્વો અને અન્ય બે ચિત્રો સાથે રસપ્રદ લેન્ડસ્કેપ કરતાં વધુ બનાવવા માટે છે. એક વેબસાઇટ બનાવવાનું ઉદાહરણ કે જે બાકીનાથી અલગ છે.

વેબ પર લિંક: રકમ

હેટબોક્સ

બ્લુ આ વેબસાઇટ પરનો મુખ્ય રંગ છે જેમાં સફેદ દ્વારા પ્રકાશિત કોઈ ગુમ છબીઓ નથી અને રમત કેવી હશે તે સાઇટ બિલ્ડરના 3 ડી માં જે આપણે આગળ વધીએ છીએ તે ફરે છે.

વેબ પર લિંક: હેટબોક્સ

કારા લિટે

કારા જાય છે તેની કુદરતી અને સુંદર ઉપસ્થિતિ સાથે સરળતા અને મિનિમલિઝમ તમારા ફોટોગ્રાફમાં બાકી એક ટેક્સ્ટ છે જે તેની સાથે આવે છે જે હેડર માટેના મુખ્ય તત્વો છે અને તેને ખોલવા માટે હેમબર્ગર બટન છે.

વેબ પર લિંક: કારા લિટે

ઇન્સ્ટ્રિન્સિક સ્ટુડિયો માર્કેટિંગ

Es સરળ વેબ પરંતુ તે અમને બતાવે છે કે બ્લોગ બનાવવો શું છે. લાલ અને કાળો એ ખૂબ જ "બ્લોગ" સાઇટનો આગેવાન છે.

વેબ પર લિંક: ઇન્સ્ટ્રિન્સિક સ્ટુડિયો માર્કેટિંગ

HTML માં સરળ વેબસાઇટ કેવી રીતે બનાવવી

અમે તમને ભણાવવા જઈ રહ્યા છીએ HTML માં એક સરળ વેબસાઇટ બનાવો જેથી તમે તેને લખનારા સૌથી મૂળ તત્વોને જાણો. વેબ હોસ્ટ હોવું જરૂરી છે જ્યાં આપણે સીએસએસમાં કોડ અને કેટલાક ઝટકો લોડ કરી શકીએ, પરંતુ આગળ આવો, એચટીએમએલથી અમારી મુસાફરી શરૂ કરવા માટે આ સિદ્ધાંતો છે.

કેટલાક જોયા પછી સરળ વેબ ઉદાહરણો જેની મદદથી તમે તમારા માથાને ઘણાં તોડ્યા વિના તમારી પોતાની ડિઝાઇન બનાવવા માટે પૂરતી પ્રેરણા આપી શકો છો. કેટલીકવાર સરળ અમને જટિલ વસ્તુઓમાં ગૂંચવણ કરતાં વધુ સારી અસર બનાવે છે. તમે જોશો કે મોટાભાગના કિસ્સાઓમાં સરળ કામ ખૂબ સારી રીતે કરે છે. તે માટે જાઓ.

HTML માં સરળ વેબસાઇટ બનાવવી તે પહેલા કરતાં લાગે તે કરતાં વધુ સરળ છે. એક વેબસાઇટ એક હેડર, શરીરનો સમાવેશ કરે છે અથવા સામગ્રી અને ફૂટર અથવા ફૂટર મુખ્ય તત્વો તરીકે. અમે તેમને આ રીતે વર્ગીકૃત કરી શકીએ:

• દસ્તાવેજો: બધા દસ્તાવેજો કે જે આપણે બનાવવા જઈ રહ્યા છે તે a સાથે થવું જ જોઇએ . અમે એક સાથે ખોલો અને હંમેશાં એક સાથે બંધ થાય છે
• શરીર અથવા શરીર: દસ્તાવેજનો દૃશ્યમાન ભાગ વચ્ચેનો છે વાય
• હેડરો: તેઓ એચ 1, એચ 2, એચ 3 દ્વારા જાણીતા છે ... અમે એ સાથે પ્રારંભ કરીએ છીએ અને અમે એક સાથે બંધ . અંદરનો ટેક્સ્ટ હેડર તરીકે દેખાશે અને તેની સંખ્યાના આધારે તે નાના અથવા મોટા કદમાં આવું કરશે.
• ફકરા: ફકરો એ અંદર બંધાયેલ છે અને સાથે બંધ થાય છે
• Enlaces: સ્પષ્ટ ઉદાહરણ છેcreativosonline.org/»> ક્રિએટિવોસ ઑનલાઇન માટે લિંક
• છબીઓ: અમે તેમને લેબલ દ્વારા વ્યાખ્યાયિત કરીએ છીએ . એક ઉદાહરણ હશે . અમે અવતરણ ચિહ્નો વચ્ચેની છબીનો ઉપયોગ કરીએ છીએ અને વૈકલ્પિક ટેક્સ્ટ માટે એક Alt નો ઉપયોગ કરીએ છીએ, જે એસઇઓ માટે જરૂરી છે.
• સૂચિ: અમે સાથે યાદીઓ વ્યાખ્યાયિત કરીએ છીએ અવ્યવસ્થિત માટે અને સાથે સુઘડ માટે. સૂચિ આઇટમ્સ સાથે વપરાય છે . હંમેશાં તેમને બાર સાથે બંધ કરવાનું યાદ રાખો.

આ તત્વો સાથે અમારી પાસે હશે એક સરળ વેબસાઇટ બનાવવા માટેનો આધાર જેમ કે તમે તેમની સારી માત્રામાં જોશો કે અમે તમને આગળના ભાગમાં શીખવીશું. ચાલો આપણે કહીએ કે તેના સૌથી મહત્વપૂર્ણ તત્વો સાથે સિમેન્ટીક બંધારણ આના જેવું લાગે છે:

• તેની સંશોધક પટ્ટી સાથેનો મથાળું સાઇટના વિવિધ પૃષ્ઠો માટે.
• લેખ અથવા શરીરની જગ્યા જેમાં આપણે બ્લોગ એન્ટ્રી બનાવી શકીએ છીએ, અમારા અભ્યાસક્રમ અથવા એક છબી મૂકી શકીએ છીએ.
• સાઇડબાર અથવા સાઇડબારમાં વધારાની માહિતી મૂકવા માટે.
• ફૂટર અથવા પગ, જ્યાં અમે સાઇટના સૌથી મહત્વપૂર્ણ પૃષ્ઠોની સાથે સાથે સામાજિક નેટવર્ક્સના ચિહ્નો (હંમેશાં ઉદાહરણ તરીકે) મૂકીશું.

તમે નીચે જોશો તેવા ઉદાહરણોમાં બધા સરળ પણ ભવ્ય લોગો પર આધારિત છે, એક મથાળું જ્યાં તેઓ સાઇટના જુદા જુદા પૃષ્ઠો પર નેવિગેશન મૂકે છે, એક કેન્દ્રિય જગ્યા જે ટેક્સ્ટ અથવા છબી દ્વારા પ્રભુત્વ ધરાવે છે અને અગાઉના ફકરામાં ઉલ્લેખિત તત્વો સાથે ફૂટર છે.

અમે ભલામણ કરીએ છીએ તમારા માથા તોડી અને સરળ પર જાઓ નથી. મુખ્ય વસ્તુ એ છે કે આ ક્ષેત્રોને સેકંડના વિઝ્યુઅલ પાસમાં બાકીના ભાગોથી અલગ પાડવામાં આવે છે. સમય સાથે આપણે આપણી જાતને જટિલ બનાવી શકીશું અને અન્ય જગ્યાઓ પર વધુ કાર્ય કરીશું.

આ છે એચટીએમએલ કોડનું સ્પષ્ટ ઉદાહરણ સૌથી મહત્વપૂર્ણ તત્વો સાથે:

<!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, અમે બંને શીર્ષક સાથે બંધ કરીશું , સાથે હેડર અને અમે સાથે શરીર ખોલવા માટે માર્ગ આપીશું .

અમારી પાસે એ સાથે એચ 1 માં પ્રથમ હેડર સાથે બંધ કરવા માટે , અને અમે એક સૂચિમાં જઈશું જે અમારી સાઇટના વિવિધ પૃષ્ઠો માટે સંશોધક પટ્ટી બનાવવામાં મદદ કરશે. અમે આ સાથે સૂચિ બંધ કરીએ છીએ , અમે બંધ અને છેવટે HTML દસ્તાવેજ સાથે .

અંત કરવા માટે, હંમેશાં એક દસ્તાવેજ સાથે ખોલો તેને સ્લેશ સાથે સંપૂર્ણ કોડના અંતમાં બંધ કરવા. દસ્તાવેજ ખોલ્યા પછી, ભાષાના સંદર્ભનો હંમેશાં ઉપયોગ થાય છે, જે આ કિસ્સામાં "ઇએસ" સાથે અને એ સાથે સ્પેનિશ છે .

તે મહત્વનું છે કે તમે કોડને અને જ્યારે પણ જુઓ તમે ફંક્શનને બાર સાથે બંધ કરો છો અનુરૂપ

સીએસએસ એક બીટ

અમે થોડું સીએસએસમાં જઈએ છીએ, પરંતુ તે પસાર થાય છે જેથી તમે સમજો HTML કેવી રીતે સ્ટાઇલ કરવી. ચાલો આપણે કહીએ કે સીએસએસ અને એચટીએમએલ તે સરળ વેબસાઇટ્સ આપવા માટે એકસાથે જાય છે જે તમને નીચે મળશે.

જો એક તરફ આપણી પાસે એચટીએમએલનો સિમેન્ટીક ઉપયોગ હોય, તો તેના લેખ અથવા છબી અને ફૂટરવાળા હેડર, શરીર અથવા શરીર શું છે, સીએસએસમાં અમે ઓળખવા માટે «Div» ફંક્શનનો ઉપયોગ કરીશું આ જગ્યાઓમાંથી દરેકને પછીથી ડિઝાઇનમાં આવશ્યક ફેરફારો લાગુ કરવા માટે.

કંઈક સરળ:

જ્યારે આપણે Div સાથે શૈલીઓ લાગુ કરી શકીએ, યોગ્ય અને સંપૂર્ણ માળખું મદદ કરશે જેથી વેબ ક્રોલર્સ અમારી સામગ્રી વિશે જે છે તે સંપૂર્ણ રીતે "વાંચી" શકે, તેથી જો આપણે તે મૂળભૂત બંધારણને અનુસરીએ, તો અમારી પાસે પ્રથમ શ્રેષ્ઠ નોકરી અને આધાર હશે.

Un સરળ સીએસએસ કોડ ઉદાહરણ:

h1 {
રંગ: સફેદ;
લખાણ-સંરેખિત કરો: કેન્દ્ર;
}

અમે એચ 1 અને ટેક્સ્ટને ક .લ કરીએ છીએ અમે તેને સફેદ રંગમાં મૂકીશું: સફેદ; અને આપણે તેને «ટેક્સ્ટ સંરેખિત with સાથે કેન્દ્રમાં ગોઠવીશું. એચ 1 ક callલ ખોલ્યા પછી હંમેશા કૌંસ સાથે બંધ કરો.

નો હેડર ફોટો ગ્રેગ rakozy