Ο οριστικός οδηγός HTML για αρχάριους

Τελευταία ενημέρωση για το 15 Μαΐου 2018

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

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

Και αν αντιμετωπίζετε τη διάταξη του περιεχομένου δεν φαίνεται σωστή, η γνώση HTML μπορεί να σας φέρει πίσω στο σωστό δρόμο.

Ακολουθεί κάποια έκδοση του οδηγού HTML για bloggers και μη-techie ιδιοκτήτες επιχειρήσεων.

Το HTML αποτελεί τη ραχοκοκαλιά του σημερινού διαδικτύου. Εκατομμύρια ιστοσελίδες μαζί σχηματίζουν το Διαδίκτυο. Όπου HTML αποτελεί το δομικό στοιχείο όλων αυτών των ιστότοπων.

Ε & Α αρχαρίων

1- Τι είναι το HTML;

HTML είναι η συντομογραφία του HΥΠΕΡ Text MArkupe Lαγωνία. Είναι η τυπική γλώσσα για την επισήμανση περιεχομένων για προγράμματα περιήγησης ιστού.

Το HTML αντιπροσωπεύεται από τα "Στοιχεία". Τα στοιχεία είναι επίσης γνωστά ως "Ετικέτες".

2 - Γιατί χρειάζεται HTML;

Τα προγράμματα περιήγησης στο Web μπορούν να δημιουργήσουν έναν ιστότοπο μόνο όταν είναι γραμμένο στη γλώσσα που υποστηρίζει. Η HTML είναι η πιο κοινή γλώσσα σήμανσης και έχει την υψηλότερη αποδοχή σε προγράμματα περιήγησης ιστού.

Γι 'αυτό χρειάζεστε HTML.

3- Είναι ευαίσθητη σε πεδία HTML;

Η HTML δεν διακρίνει τις πεζούλες. Αλλά η καλύτερη πρακτική είναι να γράψετε HTML με σωστές περιπτώσεις.

Βήματα για τη δημιουργία του πρώτου αρχείου HTML

Μπορείτε να δημιουργήσετε ένα βασικό αρχείο HTML χρησιμοποιώντας το Σημειωματάριο στον υπολογιστή σας. Αλλά θα είναι οδυνηρό για τη συγγραφή πολλών γραμμών κωδίκων.

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

Χρησιμοποιώ και προτείνω Notepad + + (δωρεάν και ανοιχτού κώδικα) για τη σύνταξη γλωσσών ιστού. Υπάρχουν και άλλοι συντάκτες που μπορείτε να χρησιμοποιήσετε Sublime Κείμενο, άτομο και ούτω καθεξής

Εδώ είναι τι πρέπει να κάνετε:

  1. Εγκαταστήστε ένα πρόγραμμα επεξεργασίας κώδικα
  2. Ανοίξτε το
  3. Δημιουργήστε ένα νέο αρχείο
  4. Αποθηκεύστε το ως αρχείο .html

Είστε έτοιμοι να πάτε!


Go Top

1 - Γεια σας!

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

Κώδικας:

<Hello world! </ P> </ body> </ html> </ body> </ head>

Παραγωγή:

Συγχαρητήρια! Δημιουργήσατε το πρώτο σας αρχείο HTML. Δεν χρειάζεται να το καταλάβετε σε αυτό το σημείο. Θα το καλύψουμε σύντομα.

Κατανόηση της διάρθρωσης HTML

Κάθε αρχείο HTML έχει μια κοινή γυμνή δομή. Αυτό είναι όπου όλα αρχίζουν. Και κάθε μεγάλη σελίδα κωδικών θα έρθει σε αυτή τη δομή μετά την περικοπή.

Ας προσπαθήσουμε να το καταλάβουμε από τον κώδικα "Hello World!". Τα παρακάτω στοιχεία είναι τα υποχρεωτικά μέρη για κάθε αρχείο HTML.

  • <! DOCTYPE html> = Είναι μια δήλωση στο πρόγραμμα περιήγησης ότι αυτό είναι ένα αρχείο HTML. Πρέπει να το ορίσετε πριν από την ετικέτα <html>.
  • <Html> </ html> = Αυτό είναι το στοιχείο ρίζας ενός αρχείου HTML. Ό, τι γράφετε πηγαίνει μεταξύ <html> και </ html>.
  • <Head> </ head> = Αυτό είναι το τμήμα πληροφορίας μεταδεδομένων για ένα πρόγραμμα περιήγησης. Οι κώδικες μέσα σε αυτήν την ετικέτα δεν έχουν οπτική έξοδο.
  • <Body> </ body> = Αυτό είναι το μέρος που κάνει το πρόγραμμα περιήγησης ιστού. Αυτό που βλέπετε ακριβώς σε έναν ιστότοπο είναι η απόδοση κωδικών μεταξύ <body> και </ body>.


Go Top

Ετικέτες 2- HTML

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

Οι ετικέτες HTML έχουν συνήθως ένα άνοιγμα και μια ετικέτα κλεισίματος. Η ετικέτα ανοίγματος έχει τη λέξη-κλειδί που περιβάλλεται από ένα σύμβολο μικρότερο από (<) και μεγαλύτερο από (>). Η ετικέτα κλεισίματος έχει όλα τα ίδια αλλά μια επιπλέον εμπρόσθια κάθετο (/) μετά το λιγότερο από (<) σήμα.

(2a) Κεφαλίδες

Όλες οι ετικέτες κεφαλής μεταβαίνουν μεταξύ <head> και </ head>. Περιέχουν μετα-πληροφορίες για το πρόγραμμα περιήγησης και τις μηχανές αναζήτησης. Βασικά δεν έχουν οπτική έξοδο.

<Title> </ title>

Η ετικέτα τίτλου ορίζει τον τίτλο μιας ιστοσελίδας που είναι ορατός στην καρτέλα του προγράμματος περιήγησης. Αυτές οι πληροφορίες χρησιμοποιούνται από προγράμματα ιστού και μηχανές αναζήτησης. Μπορείτε να έχετε ένα υψηλότερο τίτλο ανά αρχείο HTML.

Κώδικας:

<title> Η πρώτη μου ιστοσελίδα </ title>
Η ετικέτα τίτλου εμφανίζεται στην κορυφή του προγράμματος περιήγησης.

<link>

Η ετικέτα συνδέσμου συνδέει τη σελίδα HTML με εξωτερικούς πόρους. Η κύρια χρήση του συνδέει τη σελίδα HTML με τα φύλλα στυλ CSS. Είναι μια αυτοκόλλητη ετικέτα και δεν χρειάζεται το τέλος </ link>. Εδώ rel σημαίνει σχέση με το αρχείο και src σημαίνει την πηγή.

Κώδικας:

<link rel = "stylesheet" type = "text / css" src = "style.css">

<Meta>

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

Κώδικας:

<meta name = "description" content = "Αυτή είναι η σύντομη περιγραφή που εμφανίζουν οι μηχανές αναζήτησης"

<script> </ script>

Η ετικέτα δέσμης ενεργειών χρησιμοποιείται για τη συμπερίληψη δέσμης ενεργειών διακομιστή ή τη δημιουργία συνδέσμου σε εξωτερικό αρχείο δέσμης ενεργειών. Μπορεί να έχει δύο χαρακτηριστικά στην ετικέτα ανοίγματος. Ο ένας είναι ο τύπος και ο άλλος είναι η πηγή (src).

Κώδικας:

<script type = "text / javascript" src = "scripts.js"> </ script>

<noscript> </ noscript>

Η ετικέτα Noscript λειτουργεί όταν τα σενάρια είναι απενεργοποιημένα σε ένα πρόγραμμα περιήγησης ιστού. Κάνει μια σελίδα συμβατή με αυτούς που δεν επιτρέπουν scripts στα προγράμματα περιήγησης ιστού τους.

Κώδικας:

<noscript> <p> Αλίμονο! Τα σενάρια είναι απενεργοποιημένα. </ P> </ noscript>

(2b) Ετικέτες σώματος

Όλες οι ετικέτες σώματος μεταβαίνουν μεταξύ <body> και </ body>. Έχουν οπτικές εξόδους. Αυτό είναι όπου το μεγαλύτερο έργο γίνεται. Πρέπει να χρησιμοποιήσετε αυτές τις ετικέτες για να δομήσετε το περιεχόμενο της κύριας σελίδας σας.

<h1> </ h1> σε <h6> </ h6>

Αυτές είναι οι ετικέτες τίτλου. Η πιο σημαντική επικεφαλίδα φέρει ετικέτα <h1> και το λιγότερο σημαντικό με <h6>. Πρέπει να τα χρησιμοποιήσετε στη σωστή ιεραρχία.

Κώδικας:

<h1> Αυτή είναι μια επικεφαλίδα h1 </ h1> <h2> Αυτή είναι μια επικεφαλίδα h2 </ h2> <h3> Αυτή είναι μια επικεφαλίδα h3 </ h3> <h4> Αυτή η κεφαλίδα h4 </ h4> > Αυτή είναι μια επικεφαλίδα h5 </ h5> <h5> Πρόκειται για τίτλο h6 </ h6>

Παραγωγή:

Μορφοποίηση ετικετών

Το κείμενο σε ένα αρχείο html μπορεί να μορφοποιηθεί χρησιμοποιώντας πολλές ετικέτες μορφοποίησης. Θα είναι απαραίτητο όταν θέλετε να επισημάνετε μια λέξη ή μια γραμμή από το περιεχόμενό σας.

Κώδικας:

<p> Μπορείτε να επισημάνετε το κείμενό σας με πολλούς τρόπους. </ p> <p> Μπορείτε να <strong> έντονα </ strong>, <u> υπογραμμίστε </ u>, <em> > mark </ mark>, <sub> δείκτης </ sub>, <sup> δείκτης </ sup> και πολλά άλλα! </ p>

Παραγωγή:

<->

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

Παράδειγμα:

<! - <p> Μπορείτε να σχολιάσετε οποιονδήποτε κώδικα περιβάλλοντάς τα με αυτόν τον τρόπο </ p> ->

(2c) Άλλες σημαντικές ετικέτες HTML

<a> </a>

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

Η δομή είναι ίδια. Έχει ένα άνοιγμα <a> και ένα τμήμα κλεισίματος </a>. Το κείμενο που θέλετε να αγκυρώσετε μεταβαίνει μεταξύ <a> και </a>.

Υπάρχουν ορισμένα χαρακτηριστικά που καθορίζουν πού και πώς ο χρήστης πηγαίνει αφού τον κάνει κλικ.

  • ahref = "" = Ορίζει τον σύνδεσμο προορισμού. Ο σύνδεσμος πηγαίνει μεταξύ των διπλών εισαγωγικών.
  • target = "" = Καθορίζει αν η διεύθυνση URL θα ανοίξει σε μια νέα καρτέλα προγράμματος περιήγησης ή στην ίδια καρτέλα. target = "_ blank" είναι για τη νέα καρτέλα και ο στόχος = "_ self" είναι για το άνοιγμα στην ίδια καρτέλα.
  • rel = "" = Ορίζει τη σχέση της τρέχουσας σελίδας με τη συνδεδεμένη σελίδα. Εάν δεν εμπιστεύεστε τη συνδεδεμένη σελίδα, μπορείτε να ορίσετε rel = "nofollow".

Κώδικας:

<p> <a target="_blank" href="https://www.google.com/"> Κάντε κλικ εδώ </a> για να μεταβείτε στην Google. Θα ανοίξει σε μια νέα καρτέλα. </ P> <p> <a target="_self" href="https://www.google.com/"> Κάντε κλικ εδώ </a>. Θα σας μεταφέρει και στο Google, αλλά θα ανοίξει στην τρέχουσα καρτέλα. </ P>

Παραγωγή:

<img />

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

<img /> είναι μια ετικέτα με αυτοκόλλητο. Δεν χρειάζεται το παραδοσιακό κλείσιμο όπως </ img>. Υπάρχουν ορισμένα χαρακτηριστικά που πρέπει να γνωρίζετε προτού μπορέσετε να τα χρησιμοποιήσετε σωστά.

  • src = "" = Αυτό είναι για τον ορισμό του συνδέσμου προέλευσης της εικόνας. Βάλτε το σύνδεσμο δεξιά μεταξύ των διπλών εισαγωγικών.
  • alt = "" = Πρόκειται για εναλλακτικό κείμενο. Όταν η εικόνα σας δεν φορτώνει, αυτό το κείμενο θα δώσει στους χρήστες μια ιδέα για την εικόνα που λείπει.
  • width = "" = Ορίζει το πλάτος μιας εικόνας σε εικονοστοιχεία.
  • Ύψος = "" = Ορίζει το ύψος μιας εικόνας σε εικονοστοιχεία.

Παράδειγμα:

<p> Αυτό είναι το Googleplex τον Αύγουστο του 2014. </ p> <p> Αυτή η εικόνα έχει πλάτος 500 εικονοστοιχείων και ύψος εικονοστοιχείων 375. </ p> <img src = "https: //upload.wikimedia. org / wikipedia / commons / 0 / 0e / Googleplex-Patio-Aug-2014.JPG "alt =" Κεντρικά γραφεία της Google τον Αύγουστο του 2014 "width =" 500 "height =" 375 "

Παραγωγή:

Συμβουλές: Θέλετε να εισαγάγετε μια εικόνα με δυνατότητα κλικ; Τυλίξτε τον κώδικα εικόνας με <a> ετικέτα. Δείτε πώς πηγαίνει.

<ol> </ ol> ή <ul> </ ul>

Η ετικέτα λίστας προορίζεται για τη δημιουργία μιας λίστας στοιχείων. <ol> σημαίνει καταγεγραμμένες λίστες (αριθμημένη λίστα) και <ul> σημαίνει μη ταξινομημένες λίστες (κουκκίδες).

Τα στοιχεία λίστας μέσα στο <ol> ή <ul> φέρουν ετικέτα με <li> </ li>. li σημαίνει λίστα. Μπορείτε να έχετε τόσα <li> όπως θέλετε μέσα στην γονική <ol> ή <ul> ετικέτα.

Κώδικας:

</ li> <li> Στοιχείο 1 </ li> <li> Στοιχείο 2 </ li> </ ol> <p> Πρόκειται για μια λίστα που δεν έχει ταξινομηθεί: </ p> <ul> <li> Στοιχείο 3 </ li> <li> Στοιχείο 1 </ li>

Παραγωγή:

<Table> </ table>

Η ετικέτα πίνακα είναι για τη δημιουργία πίνακα δεδομένων. Υπάρχουν μερικές ετικέτες εσωτερικού επιπέδου που ορίζουν τις κεφαλίδες, τις σειρές και τις στήλες του πίνακα.

<table> </ table> είναι ο εξωτερικός γονικός κώδικας. Στην ετικέτα αυτή, <tr> σημαίνει σειρά πίνακα, <td> σημαίνει στήλη πίνακα και <th> σημαίνει επικεφαλίδα πίνακα.

Κώδικας:

<table> <tr> <th> Όνομα </ th> <th> Ηλικία </ th> <th> </ td> <td> Jo <td> 27 </ td> </ td> </ td> </ td> </ td> </ td> </ td> / td> <td> 26 </ td> <td> Καθηγητής </ td> </ tr> </ table>

Παραγωγή:

Σημείωση: Οι τιμές εντός των πρώτων <tr> είναι επικεφαλίδες. Έτσι, χρησιμοποιήσαμε <th> το οποίο εφαρμόζει έντονο κείμενο στο κείμενο.

Ομαδοποίηση πινάκων

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

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

Οι ετικέτες ομαδοποίησης πινάκων είναι:

  • <thead> </ thead> = Για την περιτύλιξη των επικεφαλίδων ενός πίνακα. Εκτυπώνει σε κάθε σελίδα διαχωρισμού του πίνακα.
  • <tbody> </ tbody> = Για την περιτύλιξη των κύριων δεδομένων ενός πίνακα. Μπορείτε να έχετε τόσα <tbody> όπως χρειάζεστε. Μια ετικέτα <tbody> σημαίνει μια ξεχωριστή ομάδα δεδομένων.
  • <tfoot> </ tfoot> = Για την περιτύλιξη των πληροφοριών υποσέλιδου ενός πίνακα. Εκτυπώνει σε κάθε σελίδα διαχωρισμού του πίνακα.

Σημειώστε ότι δεν είναι υποχρεωτική η χρήση ομαδοποίησης. Μπορείτε να το χρησιμοποιήσετε για να κάνετε μεγαλύτερα τραπέζια πιο ευανάγνωστα. Ενώ ορισμένοι ειδικοί προγραμματιστές χρησιμοποιούν αξιοσημείωτα αυτές τις ετικέτες ως CSS Selectors.

Εδώ μπορείτε να ομαδοποιήσετε τον παραδειγματικό μας πίνακα σε <thead>, <tbody> και <tfoot>:

Κώδικας:

<td> <td> </ td> <td> </ td> <td> <td> John </ td> <td> 27 </ td> <td> </ td> </ td> </ td> <td> <td> </ td> <td> </ td> <td> Σύνολο προσώπων: </ td> <td> 26 </ td> </ tr> </ tfoot> </ table>

Παραγωγή:

<Form> </ form>

Το στοιχείο φόρμας χρησιμοποιείται για τη δημιουργία διαλογικών μορφών για ιστοσελίδες. Μια φόρμα HTML περιέχει πολλά διαδοχικά στοιχεία. Για παράδειγμα: <label>, <input>, <textarea> κ.λπ.

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

Μπορείτε να χρησιμοποιήσετε μία από τις δύο μεθόδους, να πάρετε ή να δημοσιεύσετε. Get Get στέλνει όλες τις πληροφορίες στη μορφή URL, όπου η Post στέλνει τις πληροφορίες στο σώμα του μηνύματος.

Υπάρχουν πολλοί τύποι εισροών για έντυπα. Ο πολύ βασικός τύπος εισόδου είναι κείμενο. Είναι γραμμένο ως <input type = "text">. Οι τύποι μπορεί επίσης να είναι ραδιόφωνο, πλαίσιο ελέγχου, ηλεκτρονικό ταχυδρομείο και ούτω καθεξής. Θα πρέπει να υπάρχει μια καταχώρηση τύπου υποβολής στο κάτω μέρος για τη δημιουργία ενός κουμπιού υποβολής.

Η ετικέτα <label> χρησιμοποιείται για τη δημιουργία ετικετών και τη σύνδεσή τους με τις εισόδους. Ο κανόνας της συσχέτισης ετικετών με τις εισόδους είναι ότι έχουν την ίδια τιμή στην ιδιότητα attribute = "" της ετικέτας και id = "" της εισόδου.

Κώδικας:

<form name = "name =" name = "name =" name = "name =" name = "name" </ label> <textarea id = "bio" rows = "10" cols = "</ 30 "placeholder =" Εισαγάγετε το βιογραφικό σας εδώ ... "> </ textarea> <br> <label> Φύλο: </ "ραδιόφωνο" όνομα = "gender" id = "αρσενικό"> <br> <label for = "θηλυκό"> θηλυκό </ label> > <input type = "submit" value = "Υποβολή"> <φόρμα>

Παραγωγή:

Σημείωση: Έχω επισημάνει την ενέργεια σε τιμή null επειδή δεν ήταν συνδεδεμένη με κανένα διακομιστή για να επεξεργαστεί τις πληροφορίες.


Go Top

Χαρακτηριστικά 3- HTML

Τα χαρακτηριστικά είναι ένας τύπος τροποποιητών για ετικέτες HTML. Προσθέτουν νέες διαμορφώσεις στις ετικέτες HTML.

Ένα χαρακτηριστικό μοιάζει με attributename = "" και κάθεται στην αρχική ετικέτα HTML. Η τιμή του χαρακτηριστικού πηγαίνει ανάμεσα στα διπλά εισαγωγικά.

id = "" και class = ""

id και κλάση είναι τα αναγνωριστικά των ετικετών HTML. Διαφορετικά ονόματα ορίζονται σε διαφορετικά στοιχεία HTML χρησιμοποιώντας αναγνωριστικά. Μπορείτε να χρησιμοποιήσετε ένα αναγνωριστικό κλάσης για πολλά στοιχεία. Ωστόσο, δεν μπορείτε να χρησιμοποιήσετε ένα αναγνωριστικό ταυτότητας για πολλά στοιχεία.

Κώδικας:

<h1 class = "heading"> Αυτός είναι ο κύριος τίτλος </ h1>

href = ""

href σημαίνει Hypertext Reference. Δείχνουν τους χρήστες στους συνδέσμους αναφοράς. Η ετικέτα αγκύρωσης <a> χρησιμοποιεί το href για την αποστολή χρηστών σε μια διεύθυνση URL προορισμού.

Κώδικας:

<a href="https://www.google.com/"> Google </a>

src = ""

src σημαίνει πηγή. Ορίζει την πηγή ενός μέσου ή ενός πόρου που χρησιμοποιείτε στο αρχείο HTML. Η πηγή μπορεί να είναι είτε τοπική διεύθυνση είτε διεύθυνση URL τρίτου μέρους.

Κώδικας:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

alt = ""

alt σημαίνει εναλλακτική λύση. Πρόκειται για ένα αντίγραφο ασφαλείας που χρησιμοποιείται όταν δεν είναι δυνατή η φόρτωση ενός στοιχείου HTML.

Κώδικας:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt = "Κεντρικά γραφεία της Google" />

style = ""

style χρησιμοποιείται συχνά σε ετικέτες HTML. Κάνει την εργασία του CSS μέσα στην ετικέτα HTML. Οι ιδιότητες στυλ σας περνούν ανάμεσα στα διπλά εισαγωγικά.

Κώδικας:

<h2 style = "color: red"> Αυτός είναι ένας άλλος τίτλος </ h2>


Go Top

4- εμφάνιση κωδικών: Αποκλεισμός κατά εν σειρά

Ορισμένα στοιχεία αρχίζουν πάντα σε μια νέα γραμμή και λαμβάνουν το πλήρες διαθέσιμο πλάτος. Αυτά είναι τα στοιχεία "Block".

Παράδειγμα: <div>, <p>, <h1> - <h6>, μορφή κ.λπ.

Ορισμένα στοιχεία λαμβάνουν μόνο τον απαιτούμενο χώρο και δεν ξεκινούν από μια νέα γραμμή. Αυτά είναι στοιχεία "Inline".

Π.χ. <a>, <span>, <br>, <strong>, <img> κλπ.

Θα χρειαστεί να διαφοροποιήσετε τα στοιχεία μπλοκ από το inline όταν θα χρησιμοποιείτε στυλ CSS. Σε αυτόν τον οδηγό HTML, δεν είναι πολύ απαραίτητο.

Κώδικας:

<Head> <title> Η πρώτη μου ιστοσελίδα </ title> </ head> <body> <h2> Αυτή είναι η επικεφαλίδα H2. Έχει εμφάνιση Block. </ H2> <h2> Αυτή είναι η <u> άλλη </ u> επικεφαλίδα H2. Εδώ η ετικέτα υπογράμμισης έχει ένδειξη Inline. </ H2> </ body> </ html>

Παραγωγή:


Go Top

5- Διπλό απόσπασμα έναντι ενιαίας παραπομπής σε HTML

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

Σε HTML, το ενιαίο quote και το διπλό quote είναι τα ίδια. Δεν κάνουν καμία διαφορά στην έξοδο.

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


Go Top

6 - Σημασιολογικός κώδικας HTML έναντι μη σημασιολογικού HTML

Η σημασιολογική HTML είναι η τελευταία έκδοση της HTML, η οποία καλείται επίσης HTML5. Είναι η ανεπτυγμένη έκδοση των μη σημασιολογικών HTML και XHTML.

Γιατί είναι καλύτερο το HTML5; Σε προηγούμενες εκδόσεις τα στοιχεία HTML προσδιορίστηκαν με ονόματα id / class. Για παράδειγμα: <div id = "article"> </ div> θεωρήθηκε άρθρο.

Στην HTML5, η ετικέτα <article> </ article> αναπαριστάται ως ένα άρθρο χωρίς να χρειάζεται κάποιο αναγνωριστικό ταυτότητας.

Για λόγους HTML5, οι μηχανές αναζήτησης και άλλες εφαρμογές ιστού μπορούν να κατανοήσουν καλύτερα μια ιστοσελίδα. Σημαντικές ιστοσελίδες έχουν αποδειχθεί ότι κάνουν καλύτερα για SEO.

Ακολουθεί μια λίστα με ορισμένες δημοφιλείς ετικέτες HTML5:

  • <main> </ main> = Πρόκειται για την περιτύλιξη του κύριου περιεχομένου που θέλετε να εμφανίζονται οι θεατές σας.
  • <header> </ header> = Αυτό είναι για την επισήμανση του τμήματος κεφαλίδας ενός περιεχομένου όπως τίτλος ή μετα-συγγραφέας.
  • <article> </ article> = Προσδιορίζει ένα περιεχόμενο που καθορίζεται από το χρήστη ή ανεξάρτητο περιεχόμενο για τους θεατές σας.
  • <section> </ section> = Μπορεί να ομαδοποιήσει οποιονδήποτε κώδικα όπως την κεφαλίδα, το υποσέλιδο ή την πλευρική γραμμή. Μπορείτε να πείτε, είναι η σημασιολογική μορφή του div.
  • <footer> </ footer> = Εδώ ανήκει το περιεχόμενο υποσέλιδου, η αποποίηση ευθυνών ή το κείμενο πνευματικών δικαιωμάτων.
  • <audio> </ audio> = Σας επιτρέπει να εισάγετε αρχεία ήχου χωρίς να έχετε κάποιο πρόβλημα με το plugin.
  • <video> </ video> = Όπως το <audio>, μπορείτε να εισάγετε βίντεο χρησιμοποιώντας αυτήν την ετικέτα χωρίς προβλήματα σύνδεσης.

Μια απλή δομή HTML5 θα μοιάζει με αυτή:

</ Title> </ head> <body> <header> <nav> <ul> </ head> <html> <head> <meta charset = "utf-8" li> Μενού 1 </ li> <li> Μενού 2 </ li> </ ul> </ nav> </ header> <h2> Το περιεχόμενο του άρθρου πηγαίνει εδώ Copyright 2 John Doe </ p> </ p> <p> </ p> <p> p> </ footer> </ body> </ html>


Go Top

Επικύρωση 7- HTML

Οι περισσότεροι επαγγελματίες του διαδικτύου επικυρώνουν τον κωδικό τους μετά την ολοκλήρωσή τους. Γιατί είναι απαραίτητο να επικυρώσετε έναν κώδικα όταν λειτουργεί καλά;

Υπάρχουν δύο πιθανές αιτίες για την επικύρωση των κωδικών σας:

  1. Θα σας βοηθήσει να κάνετε τον κώδικα σας cross-browser και cross-platform συμβατό. Ο κώδικας ενδέχεται να μην εμφανίζει κάποιο σφάλμα στο τρέχον πρόγραμμα περιήγησης, αλλά μπορεί να υπάρχει και σε κάποιο άλλο. Η επικύρωση του κώδικα θα το διορθώσει.
  2. Οι μηχανές αναζήτησης και άλλα προγράμματα ιστού ενδέχεται να σταματήσουν να ανιχνεύουν τη σελίδα σας αν έχετε σφάλματα σε αυτήν. Μπορείτε να επιβεβαιώσετε μέσω επικύρωσης ότι δεν έχετε κάποιο σημαντικό σφάλμα.

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


Go Top

8- Άλλοι χρήσιμοι πόροι

Το HTML είναι ένα θέμα συνεχούς μάθησης. Περισσότερες ενημερωμένες εκδόσεις HTML ενδέχεται να έρθουν νωρίτερα. Επομένως πρέπει να ενημερώνεστε και να συνεχίζετε να ασκείτε. Η πρακτική είναι τι aces HTML.

Ακολουθούν ορισμένοι χρήσιμοι πόροι για εσάς: