30 απίστευτα απλές ιστοσελίδες

Μερικές από τις πιο διάσημες σελίδες είναι πολύ φορτωμένες με πληροφορίες, αλλά προτιμώ το αντίθετο: τις απλές.

Προφανώς, ο μεγάλος εκθέτης αυτής της ομάδας είναι η Google με την μινιμαλιστική αρχική σελίδα της από τότε που ξεκίνησε το ταξίδι της, αλλά σαφώς δεν είναι το μόνο στο Διαδίκτυο που έχει δεσμευτεί να διατηρεί τα πράγματα απλά.

Απλά παραδείγματα ιστοσελίδων HTML

Καν Ρίτσμοντ

Ο Kean Richmond μας κάνει να βλέπουμε την απλότητα του παιχνιδιού με λίγα στοιχεία, αλλά σε πολύ καλή θέση δώστε μια υπέροχη αίσθηση στο μινιμαλισμό. Το λογότυπό του πάνω αριστερά, τα εικονίδια Twitter και επαφών στα δεξιά και στο κέντρο, με μια εντυπωσιακή τυπογραφία, σε αυτό που είναι αφιερωμένο.

Σύνδεσμος στον Ιστό: Keanrich Δευτέρα

Άλις Ντράγκαρντ

Άλις Ντράγκαρντ διατηρήστε το απλό και τοποθετημένο το λογότυπό σας στο κέντρο, τέσσερις καρτέλες για να μετακινηθείτε μεταξύ των κύριων σελίδων του ιστότοπού σας και μιας σειράς φωτογραφιών τοποθετημένων κατάλληλα έτσι ώστε με μια ματιά να γνωρίζουμε τι κάνετε και τι κάνετε.

Σύνδεσμος στον Ιστό: Άλις Ντράγκαρντ

Τζόναθαν Ογκντεν

Ogden συνεχίστε να παίζετε με το πόσο απλό είναι το όνομά σας ως λογότυπο, τα κοινωνικά δίκτυα που βρίσκονται ακριβώς κάτω χωρίς να προσελκύουν την προσοχή και ο σχεδιασμός τους λειτουργεί έτσι ώστε να μπορούμε να τα περάσουμε γρήγορα. Σε μία σελίδα δείχνει ό, τι έχει σημασία.

Σύνδεσμος στον Ιστό: Τζόναθαν Ογκντεν

Σπίνος

Το Finch πηγαίνει ήδη σε άλλα μέρη για να παίξει με την τυπογραφία και αυτά χρώματα που δείχνουν την κομψότητα και τη σοφία του τι κάνει. Με λίγα στοιχεία, αφήνει τον επαγγελματισμό του ενόψει. Καθιστά επίσης σαφές ποιες σελίδες έχουν συνδεθεί με εσάς.

Σύνδεσμος στον Ιστό: Σπίνος

Ένα διαφορετικό σχέδιο

Αυτός ο ιστότοπος παίξτε διαφορετικά. Χρησιμοποιήστε μια ταπετσαρία με μια κεφαλίδα από την οποία μπορούμε να μεταβούμε στις κύριες σελίδες, στο τηλέφωνό σας και στους συνδέσμους στα κοινωνικά σας δίκτυα.

Σύνδεσμος στον Ιστό: Ένα διαφορετικό σχέδιο

Μπριζκ

Ο Κάι μας δείχνει με τη δική του φιγούρα με ένα αφηρημένο τρίγωνο και μια κατάλληλη παλέτα χρωμάτων για να δώσετε εγγύτητα. Προσφέρει επίσης μέρος του βιογραφικού του με μια γραμματοσειρά σε μικρότερο μέγεθος σε περίπτωση που θέλουμε να μάθουμε περισσότερα για αυτόν.

Σύνδεσμος στον Ιστό: Μπριζκ

Κατακόρυφος σχεδιασμός κήπου

Όπως και το προηγούμενο, το Vertical Garden Design πηγαίνει προς μια φωτογραφία που δείχνει γρήγορα μια από τις καλύτερες δουλειές του στο αεροδρόμιο του Όσλο. Στην κορυφή έχουμε την κεφαλίδα με τη «γραμμή πλοήγησης» ή τη γραμμή πλοήγησης και ακόμη και τη δυνατότητα αλλαγής της γλώσσας. Το λογότυπο το τοποθετεί σε κάθετη μορφή για να δώσει την τελευταία πινελιά σε μια πολύ απλή σελίδα.

Σύνδεσμος στον Ιστό: Κατακόρυφος σχεδιασμός κήπου

247 Γκραντ

247 Γκραντ παίξτε με μονόχρωμη και μια εικόνα φόντου σχεδόν εντελώς σκοτεινό. Η γραμματοσειρά κεφαλίδας, μικρότερη από το κείμενο και την κεφαλίδα, έχει κεφαλαία γράμματα για να δημιουργήσει μια μεγάλη αντίθεση στη συνολική σχεδίαση.

Σύνδεσμος στον Ιστό: 247 Γκραντ

Απολαύστε αυτό

ένα εξαιρετική τυπογραφία μπορεί να είναι το σημάδι της αυθεντικότητας και ότι ξέρουμε τι κάνουμε. Δεν χρειάζεται να δώσετε τίποτα περισσότερο εάν το μήνυμα είναι άμεσο. Το καθιστούν σαφές: τους αρέσει να δημιουργούν όμορφες εφαρμογές και ιστότοπους. Αφήνουν το ταχυδρομείο για έργα και τη μελέτη τους σε έναν άλλο σύνδεσμο.

Σύνδεσμος στον Ιστό: Απολαύστε αυτό

Άλισον Χου

Ο Άλισον μας παίρνει πριν από άλλα μαθήματα και περιλαμβάνει περισσότερες εικόνες και αυτή η πιο "γυναικεία" γραμματοσειρά. Το ίδιο ισχύει για την κύρια εικόνα σας και αυτήν την κεφαλίδα. Έχει την πολυτέλεια να παρουσιάζει μια κάρτα που δείχνει κόλπα αγορών.

Σύνδεσμος στον Ιστό: Άλισον Χου

pixelot

Το Pixelot είναι λίγο τρελό, αλλά δείχνει επίσης τη δημιουργικότητα του συγγραφέα. Χρήση το δείκτη του ποντικιού για να δημιουργήσετε μια μάσκα που θολώνει όπου κι αν το έχουμε σκαρφαλωμένο.

Σύνδεσμος στον Ιστό: pixelot

Lionel σχολές

Αν θέλετε κάντε το βιογραφικό σας στο διαδίκτυο με τίποτα περισσότερο από αυτό, Ο Lionel σας δείχνει τα βήματα. Μια κατάλληλη γραμματοσειρά, η φωτογραφία σας πάνω αριστερά, συνδέσμους προς τα κοινωνικά σας δίκτυα και την εμπειρία σας. Το μόνο διακοσμητικό στοιχείο είναι αυτές οι δύο οριζόντιες γραμμές διαφορετικών χρωμάτων.

Σύνδεσμος στον Ιστό: Lionel σχολές

Κομψοί γλάροι

Επιστρέφουμε στην κομψότητα του μινιμαλισμού και αυτά τα μεγάλα κενά διαστήματα. Από τη μία πλευρά, η κεφαλίδα είναι πολύ μακριά από τα υπόλοιπα στοιχεία, και από την άλλη τα στοιχεία που έχουν διαμορφωθεί με τέτοιο τρόπο ώστε να δημιουργούν μια μεγάλη οπτική αρμονία μεταξύ τους.

Σύνδεσμος στον Ιστό: Κομψοί γλάροι

Ζωτικού χώρου

Όπως μπορείτε να δείτε σε όλα τα παραδείγματα, είναι σημαντικό τις καρτέλες κεφαλίδας για μετάβαση στις διαφορετικές σελίδες από τον ιστότοπο. Η τυπογραφία έχει μεγάλη σημασία, παίξτε με ένα για την κεφαλίδα και άλλο για το κείμενο με ένα sans serif που κάνει εξαιρετική δουλειά.

Σύνδεσμος στον Ιστό: Ζωτικού χώρου

PinkPoint

Η αντίθεση των χρωμάτων μας οδηγεί σε έναν ελαφρώς πιο περίπλοκο ιστό όλων των προβολών. Δεν λείπουν όλα αυτά τα κύρια στοιχεία για να παίξετε αυτή τη φορά με τις ντεγκραντέ για την εικόνα φόντου και τις δύο ενότητες που έχουν τα κύρια χρώματα της κύριας διαβάθμισης εικόνας.

Σύνδεσμος στον Ιστό: PinkPoint

IWC

Μια υπέροχη φωτογραφία με μια καλά επιλεγμένη γραμματοσειρά και ένα στοιχείο "ήρωας" μπορείτε να δώσετε σε αυτόν τον Ιστό. Με ένα ρυθμιστικό δείχνει ότι ένα μέρος της εργασίας είναι αρκετά απλό στη σύλληψή του.

Σύνδεσμος στον Ιστό: IWC

Γρήγορα

Η ψηφιακή απεικόνιση μας φέρνει στο Chop Chop αυτή η εικόνα που τρώει όλη την οπτική παρουσία της. Το μπλε χρώμα στην κεφαλίδα του δίνει τη δυνατότητα να δημιουργεί χρωματικές τιμές σε αρμονία με ολόκληρη την εικόνα που προβάλλεται από τον ιστό.

Σύνδεσμος στον Ιστό: Γρήγορα

7 πεύκο

Το 7Pine παίζει με το πράσινο για να είναι ο μεγάλος πρωταγωνιστής του σπιτιού. Τα υπόλοιπα το συνθέτουν μια εικόνα με πολύ πράσινο και μια απλή κεφαλίδα που θέλει να παραμείνει απαρατήρητο από το λογότυπο.

Σύνδεσμος στον Ιστό: 7 πεύκο

Το άθροισμα

Το άθροισμα μας οδηγεί προς άλλες κατευθύνσεις. Παίξτε με το μυθικό ασπρόμαυρο, μια πολύ δημιουργική εικόνα και αυτό συμβαδίζει με τα υπόλοιπα στοιχεία και δύο άλλες εικόνες για να δημιουργήσει κάτι περισσότερο από ενδιαφέρον. Ένα παράδειγμα για τη δημιουργία ενός ιστότοπου που ξεχωρίζει από τους υπόλοιπους.

Σύνδεσμος στον Ιστό: Το άθροισμα

Καπέλο

Το μπλε είναι το κυρίαρχο χρώμα σε αυτόν τον ιστότοπο στον οποίο δεν υπάρχει έλλειψη εικόνων που φωτίζονται πλήρως από το λευκό και ποια θα είναι το παιχνίδι σε 3D αυτού του δημιουργού ιστότοπων που κινείται καθώς κινούμαστε.

Σύνδεσμος στον Ιστό: Καπέλο

Κάρα Λάιτ

Η Κάρα πηγαίνει απλότητα και μινιμαλισμός με τη φυσική και όμορφη παρουσία του στη φωτογραφία σας. Το υπόλοιπο είναι ένα κείμενο που συνοδεύει τα βασικά στοιχεία για την κεφαλίδα και ένα κουμπί χάμπουργκερ για να το ανοίξετε.

Σύνδεσμος στον Ιστό: Κάρα Λάιτ

Insrinsic Studio Marketing

Es του απλούστερου ιστού αλλά αυτό μας δείχνει τι είναι να φτιάχνουμε ένα blog. Το κόκκινο και το μαύρο είναι οι πρωταγωνιστές σε ένα πολύ "blog" site.

Σύνδεσμος στον Ιστό: Insrinsic Studio Marketing

Πώς να δημιουργήσετε έναν απλό ιστότοπο σε HTML

Θα σας διδάξουμε δημιουργήστε έναν απλό ιστότοπο σε HTML έτσι ώστε να γνωρίζετε τα πιο βασικά στοιχεία που το συνθέτουν. Θα είναι απαραίτητο να έχουμε έναν οικοδεσπότη Ιστού όπου μπορούμε να φορτώσουμε τον κώδικα και κάποιες τροποποιήσεις στο CSS, αλλά έλα, αυτές είναι οι αρχές για να ξεκινήσουμε το ταξίδι μας σε HTML.

Έχοντας δει μερικά απλά παραδείγματα ιστού Με το οποίο μπορείτε να παρακινήσετε τον εαυτό σας αρκετά για να φτιάξετε τα δικά σας σχέδια χωρίς να σπάσετε πολύ το κεφάλι σας. Μερικές φορές το απλό δημιουργεί ένα καλύτερο αποτέλεσμα από το να μας περιπλέκει σε πολύπλοκα πράγματα. Θα δείτε ότι στις περισσότερες περιπτώσεις το απλό λειτουργεί πολύ καλά. Καν 'το.

Η δημιουργία ενός απλού ιστότοπου σε HTML είναι ευκολότερη από ό, τι φαίνεται στην αρχή. Μία ιστοσελίδα αποτελείται από μια κεφαλίδα, το σώμα ή περιεχόμενο και το υποσέλιδο ή υποσέλιδο ως κύρια στοιχεία. Μπορούμε να τα ταξινομήσουμε με αυτόν τον τρόπο:

• Έγγραφα: όλα τα έγγραφα που πρόκειται να δημιουργήσουμε πρέπει να γίνουν με ένα . Ανοίγουμε με ένα και κλείνει πάντα με ένα
• Το σώμα ή το σώμα: το ορατό μέρος του εγγράφου βρίσκεται μεταξύ Γ
• Κεφαλίδες: είναι γνωστοί από τα H1, H2, H3 ... Ξεκινάμε με ένα και κλείνουμε με ένα . Το κείμενο που βρίσκεται μέσα θα εμφανίζεται ως κεφαλίδα και ανάλογα με την αρίθμηση θα το κάνει σε μικρότερο ή μεγαλύτερο μέγεθος.
• Παραγράφους: η παράγραφος περικλείεται εντός α και κλείνει με
• Links: το πιο ξεκάθαρο παράδειγμα είναι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" και με .

Είναι σημαντικό να κοιτάτε προσεκτικά τον κώδικα και όποτε θέλετε ανοίγετε μια λειτουργία κλείστε την με τη γραμμή αντίστοιχα

Λίγο CSS

Πηγαίνουμε στο CSS λίγο, αλλά περνώντας έτσι ώστε να καταλαβαίνετε πώς να στυλ HTML. Ας πούμε ότι το CSS και το HTML συμβαδίζουν για να δώσουμε αυτούς τους απλούς ιστότοπους που θα βρείτε παρακάτω.

Εάν από τη μία πλευρά έχουμε τη σημασιολογική χρήση του HTML για το τι είναι η κεφαλίδα, το σώμα ή το σώμα με το άρθρο ή την εικόνα του και το υποσέλιδο, στο CSS θα χρησιμοποιούσαμε τη συνάρτηση «Div» για να ταυτοποιήσουμε σε καθέναν από αυτούς τους χώρους, προκειμένου να εφαρμοστούν αργότερα οι απαραίτητες αλλαγές στο σχεδιασμό.

Κάτι τόσο απλό όσο:

Ενώ μπορούμε να εφαρμόσουμε τα στυλ με Div, μια κατάλληλη και τέλεια δομή θα βοηθήσει έτσι ώστε τα προγράμματα ανίχνευσης ιστού να μπορούν να «διαβάσουν» τέλεια το περιεχόμενό μας, οπότε αν ακολουθήσουμε αυτήν τη βασική δομή, θα έχουμε μια καλή δουλειά και θα βασίσουμε πρώτα.

Un απλό παράδειγμα κώδικα CSS:

h1 {
χρώμα: άσπρο;
text-align: κέντρο;
}

Το λέμε H1 και το κείμενο θα το βάλουμε σε λευκό με χρώμα: λευκό? και θα το ευθυγραμμίσουμε στο κέντρο με «ευθυγράμμιση κειμένου». Πάντα κλείστε με αγκύλες μετά το άνοιγμα στην κλήση H1.

Φωτογραφία κεφαλίδας του Γκρεγκ ρακοζί