ΕΠΛ 012 Γλώσσα Μορφοποίησης HTML
Πως κτίζουµε τις Ετικέτες Notepad ή άλλο TEXT editor Πού τα κάνουµε Save? Πώς τα οργανώνουµε Πώς τα βάζουµε δηµόσια online Τα αρχεία να τελειώνουν σε.html ή.htm
Πως ξεκινούµε να εργαζόµαστε; Επιλέγουµε πρόγραµµα για να γράψουµε τον HTML κώδικα Χρήση text editor όπως notepad των windows, αφού το HTML είναι text Όχι WordPad ή Word (γιατί?) Μπορεί να γίνει και χρήση προγράµµατος Web Editor Κειµενογράφοι ετικετών WYSWYG: Τότε ότι γράφεις, παίρνεις!!! Μορφοποίητης κειµένων µε µετατροπέα σε HTML
Κτίσιµο Χρήση κά οιου βασικού αρχείου σας σηµείο εκκίνησης Μια αράγραφο κάθε φορά The <p> tag and some of it's attributes. The heading tags. <h1>...<h6> Formatting tags & attributes. <h1 style="color= red; font-style= italic"> <! Σηµειώσεις Σχόλια! > Γιατί είναι χρήσιµα;;;; Divide and conquer The <div> tag: καθορίζει κοµµάτια της σελίδας Γιατί να το θέλω αυτό???
Κτίσιµο, ως ξεκινούν όλα... Ένα απλό HTML template: <html> <head> <title>title of the page</title> </head> <body> This is my first homepage. <b>this text is bold</b> </body> </html>
Ετικέτα <head> Είναι τύπου ενότητας (containment), δηλ. Απαιτεί και </tag> όταν τα περιεχόµενα του τελειώσουν. Παράδειγµα: <head> <title>τίτλος της Ιστοσελίδας: Αθλητικά Νέα</ </title> <meta name="keywords" content="baseball, soccer, tennis"> <meta name="description" content="sports information page"> </head> Ο τίτλος (title) γράφεται στην µπάρα τoυ διαφυλλιστή! <meta> meta>: Οι λέξεις κλειδιά (keywords keywords) προδίδουν το σκοπό της ιστοσελίδας, έτσι ώστε να κατατάσεται πιο εύκολα από µηχανές αναζήτησης (google, yahoo)
Ενότητα <body> </body> Τα περιεχόµενα της σελίδας µας Μπορούµε να αραδιάσουµε µέσα ότι θέλουµε σε µορφή απλού κειµένου (text) Αλλά προτιµότερο να τους δώσουµε µια σωστή µορφή και δοµή Απλούστερος τρόπος: Headings!
Ετικέτες Ε ικεφαλίδας <h> <h1> Chapter 1</ </h1> <h2> Section 1 </h2> Blah blah blah <h2> Section 2 </h2> <h1> Chapter 2</ </h1> <h2> Section 1 </h2> <h3> Subsection 1 </h3> Blah blah ίνουν µία ιεραρχία στο περιεχόµενο της σελίδας µας, και αλλάζουν την µορφή των τίτλων που φέρουν Ο ακέραιος ν=1..6 στο <Ην> προσδιορίζει το µέγεθος των χαρακτήρων της επικεφαλίδας
Το αποτέλεσµα διαφέρει από browser σε browser Αλλά η ουσία µένει!!! Χρήσιµο και από µηχανές αναζήτησης (πως?)
Συχνά λάθη: Προσοχή στο nesting!!! <h1> Chapter 11 <h2> section 2 </h1> </h2> Ή <head> <body> </head> </body>
Χαρακτηριστικά - Attributes Για διαφοροποίηση του οπτικού αποτελέσµατος κάποιας ετικέτας. Π.χ., για στοίχιση κειµένου <h1 align=center> chapter1 </h1>
Στοίχιση της ε ικεφαλίδας Χαρακτηριστικό/παράµετρος: ALIGN=left center right Στοίχιση του κειµένου της επικεφαλίδας αριστερή (left), στο κέντρο (center) ή δεξιά (right) βασική στοίχιση: αριστερή Π.χ., <H1 ALIGN=LEFT> Επικεφαλίδα ύψους 1 </H1> <H2 ALIGN=RIGHT> Επικεφαλίδα ύψους 2 </H2> <H3 ALIGN=CENTER> Επικεφαλίδα ύψους 3 </H3> Π.χ., Ε ικεφαλίδα ύψους 1 Ε ικεφαλίδα ύψους 3 Ε ικεφαλίδα ύψους 2
Παράγραφοι <p> <p>this is a paragraph</p> <p>this is another paragraph</p>!!! Βάζει επιπλέον κενή γραµµή πριν και µετά την παράγραφο. Στοίχιση παραγράφου µε το χαρακτηριστικό ALIGN=left center right Αν θέλουµε να αλλάξουµε γραµµή µε το ζόρι; <br> που σηµαίνει line break
Παράδειγµα <p>this <br> is a para<br> <br>graph with line breaks</p> This is a para graph with line breaks
Προκαθορισµένη παράγραφος Ενότητα ή διπλή ετικέτα <blockquote> </blockquote blockquote> Προκαθορισµένη στοίχιση δεξιότερα από αµέσως προηγούµενο κείµενο
Σχόλια στην ιστοσελίδα <!-- This is a comment --> εν πρόκειται ποτέ να εµφανιστεί στην οθόνη Σε τι χρησιµεύει άραγε;
Απλές οριζόντιες γραµµές <hr> Επιπλέον βάζει κενή γραµµή πριν και µετά την γραµµή (όπως το <p>, <blockquote>) οκιµάστε το σπίτι...
Μορφοποίηση γραµµατοσειρών <font>: καθορίζει τη γραµµατοσειρά στο έγγραφό, καθώς και τη µορφοποίησή της <font face= = γραµµατοσειρά[, γραµµατοσειρά]" size=2 color=red> Π.χ., <FONT FACE="MS SANS SERIF" SIZE=2 COLOR=red> Ο Ήλιος είναι µεγαλύτερος πλανήτης από τη Γη </FONT> <FONT SIZE=5> Ο Ήλιος είναι µεγαλύτερος πλανήτης </FONT SIZE> <FONT SIZE=4> από τη Γη </FONT SIZE> <! fonts.html > Μέγεθος: size = 1...7 µε το 3 προεπιλεγµένο 1 το µικρότερο και 7 µεγαλύτερο
Color names and srgb values Χρώµατα (color): όρισµα από 3 ζεύγη δεκαεξαδικών αριθµών για Κόκκινο, Πράσινο, Μπλε COLOR="#6F006F (µωβ) Black = "#000000" Green = "#008000" Silver = "#C0C0C0" Lime = "#00FF00" Gray = "#808080" Olive = "#808000" White = "#FFFFFF" Yellow = "#FFFF00" Maroon = "#800000" Navy = "#000080" Red = "#FF0000" Blue = "#0000FF" Purple = "#800080" Teal = "#008080" Fuchsia = "#FF00FF" Aqua = "#00FFFF" <! color.html >
Προεπιλεγµένη γραµµατοσειρά <basefont size=ακέραιος> <basefont> ορίζεται στην ενότητα header Π.χ., <HTML> <HEAD> <BASEFONT SIZE=4> </HEAD> <BODY> Πανεπιστήµιο Κύπρου </BODY> </HTML> Με τον ορισµό του basesize to size στην ετικέτα <font size> µπορεί να είναι απόλυτη τιµή 1 7 ή σχετική τιµή -3 +3
Παραδείγµατα χρήσης Size <HTML> <HEAD> <BASEFONT SIZE=4> </HEAD> <BODY> Πανεπιστήµιο Κύπρου <FONT SIZE=2> Πανεπιστήµιο Κύπρου </FONT> <br> <FONT SIZE=+1> Πανεπιστήµιο Κύπρου </FONT> <br> <FONT SIZE=-1> Πανεπιστήµιο Κύπρου </FONT> <br> <FONT SIZE=-3> Πανεπιστήµιο Κύπρου </FONT> <br> <FONT SIZE=4> Πανεπιστήµιο Κύπρου </FONT> </BODY> </HTML> <! basesize.html> [δοκίµασε µε διαφορετικούς πλοηγούς]
Mορφοποίηση χαρακτήρων Αυτό: italics bold underline Γίνετε έτσι: <i> italics </i> <strong> bold </strong> <u> underline </u> Άλλες διπλές ετικέτες µορφοποίησης χαρακτήρων <b>, </b>: έντονη (bold) γραφή <em>, </em>: έµφασης, π.χ., λάγια γραφή <cite>,</cite>: για αναφορές, πλαγια γραφή <sub>, </sub>: δείκτες (subscript) <sup>,</sup>: εκθέτες (superscript) <tt>, </tt>: γραφή γραφοµηχανής <b> b>ο χηµικός τύπος του νερού</b> </b>: H<sub sub>2</ >2</sub>O <! H2O.html>
Κωδικοί Σηµείων Στίξεως & Συµβολών <: < Προσέξτε το ; (γιατί?) >: > &: & ": " ': &appo; : : Αριθµητικές πράξεις: and
Κωδικοί Σηµείων Συµβολών : : : :
Χαρακτηριστικά οριζοντίων γραµµών <hr size width align color noshade> SIZE= = πάχος σε εικονοστοιχεία (pixels). Εάν δεν καθοριστεί, τότε θα εµφανιστεί µόνο η σκιά της γραµµής. WIDTH= = µήκος σε εικονοστοιχεία "ποσοστό% µήκους οθόνης" ALIGN= left center right COLOR= = "#RRGGBB" NOSHADE Αφαιρει τη σκιά στο κάτω µέρος της γραµµής.
Έλεγχος γραµµής <br> νέα γραµµή κενές γραµµές <nobr> Αποτρέπει το σπάσιµο φράσης σε δυο γραµµές Π.χ., <NOBR> <H1> Θέλουµε αυτή η γραµµή κειµένου να εµφανιστεί στη ιδία γραµµή και όχι να σπάσει σε πολλες!</h1> </NOBR>
Προδιαµορφωµένο κείµενο Μη αναµόρφωση από διαφυλλιστή, όπως έχει συνταχτεί Π.χ., διατηρεί τα κενά στο κείµενο ιπλή ετικέτα <PRE>, </PRE> Π.χ., <PRE> Είδος Τιµή Έκπτωση Κόστος ----------------------------------------------------- Α 500 10 400 Β 90 2 4 Γ 120 30 50 </PRE> Όχι: Είδος Τιµή Έκπτωση Κόστος ----------------------------------------- ------------ Α 500 10 400 Β 90 2 4 Γ 120 30 50 Όχι