ΑΡΧΙΚΗ ΚΑΤΑΣΚΕΥΗ Bloggs ΚΩΔΙΚΑΣ html JavaScript ΕΙΣΑΓΩΓΗ ManiacΑΝΑΛΥΣΗ Site ΕΙΔΗΣΕΩΝ GadgetManiac ΓΕΝΙΚΑ

Σάββατο, 23 Νοεμβρίου 2013

Ο ΣΚΕΛΕΤΟΣ ΜΙΑΣ HTML5 ΣΕΛΙΔΑΣ


 <html> Ορίζουμε τον κώδικα. Στο <head>  ορίζουμε το τίτλο της ιστοσελίδας. Στην συνέχεια πάμε στο ορατό μέρος της  στο <body>,   ορίζουμε μια Επικεφαλιδα και αμέσως την μπάρα με το μενού <nav> .  <article>  γράφουμε το κείμενο μας.  <aside> τα social media  για την προώθηση της.  και τέλος το φούτερ <footer>  μια ανασκόπηση και λίγα λόγιαα για τον δημιουργό.
Ετσι περιλεπτικα εχουμε:
 
<html>
<head>
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>
 
 
Πιο αναλυτικά βλέπουμε πιο κάτω
 
 
<!DOCTYPE HTML>
------------------------------------------------------------------------------------------------------------
<html>
<head>
  <title>............</title>
</head>

---------------------------------------------------------------------------------------------------------------
<body>
<header>
 <h1>Η HTML5 ΣΕΛΙΔΑ ΜΟΥ</h1>
 <h2>Ο σκελετος μιας HTML5 Ιστοσελιδας</h2>
</header>

------------------------------------------------------------------------------------------------------------------
<nav>
 <ul>
  <li><a href="#">Αρχική</a></li>
  <li><a href="#">Σχετικά</a></li>
  <li><a href="#">Άρθρα</a></li>
  <li><a href="#">Επικοινωνία</a></li>
 </ul>
</nav>

--------------------------------------------------------------------------------------------------------------------
<article>
 <p> Μπλα-μπλα Μπλα  Μπλα  Μπλα  Μπλα  Μπλα  Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα
 Μπλα Μπλα Μπλα Μπλα Μπλα.</p>
 <section>
 <p>Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα
 Μπλα Μπλα Μπλα Μπλα .</p>
 </section>
</article>

---------------------------------------------------------------------------------------------------------------------------
<aside>
 <section>
  <h2>Ακολουθηστε με</h2>
   <ul>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Youtube</a></li>
   </ul>
 </section>
 <section>
 <h2>Τελευταία νέα</h2>
 ...
 </section>
</aside>

---------------------------------------------------------------------------------------------------------------------------------
<footer>
 <section id="about">Σχετικά με εμένα......</section>
 <section id="latest_comments">Τελευταία Σχόλια......</section>
 <section id="blogroll">Blogroll...</section>
</footer>

-----------------------------------------------------------------------------------------------------------------------------
</body>
</html>
ΠΕΡΙΣΣΟΤΕΡΑ