Κειµενογράφοι ετικετών

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "Κειµενογράφοι ετικετών"

Ολυμπία Γαλάνη
8 χρόνια πριν
Προβολές:

1 ΕΠΛ 012 Γλώσσα Μορφοποίησης HTML

2 Πως κτίζουµε τις Ετικέτες Notepad ή άλλο TEXT editor Πού τα κάνουµε Save? Πώς τα οργανώνουµε Πώς τα βάζουµε δηµόσια online Τα αρχεία να τελειώνουν σε.html ή.htm

3 Πως ξεκινούµε να εργαζόµαστε; Επιλέγουµε πρόγραµµα για να γράψουµε τον HTML κώδικα Χρήση text editor όπως notepad των windows, αφού το HTML είναι text Όχι WordPad ή Word (γιατί?) Μπορεί να γίνει και χρήση προγράµµατος Web Editor Κειµενογράφοι ετικετών WYSWYG: Τότε ότι γράφεις, παίρνεις!!! Μορφοποίητης κειµένων µε µετατροπέα σε HTML

4 Κτίσιµο Χρήση κά οιου βασικού αρχείου σας σηµείο εκκίνησης Μια αράγραφο κάθε φορά 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: καθορίζει κοµµάτια της σελίδας Γιατί να το θέλω αυτό???

<h1 style="color= red; font-style= italic"> <! Σηµειώσεις Σχόλια!

5 Κτίσιµο, ως ξεκινούν όλα... Ένα απλό 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>

6 Ετικέτα <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)

<meta name="description" content="sports information page"> </head> Ο τίτλος (title) γράφεται στην µπάρα τoυ διαφυλλιστή!

7 Ενότητα <body> </body> Τα περιεχόµενα της σελίδας µας Μπορούµε να αραδιάσουµε µέσα ότι θέλουµε σε µορφή απλού κειµένου (text) Αλλά προτιµότερο να τους δώσουµε µια σωστή µορφή και δοµή Απλούστερος τρόπος: Headings!

απλού κειµένου (text) Αλλά προτιµότερο να τους

8 Ετικέτες Ε ικεφαλίδας <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 στο <Ην> προσδιορίζει το µέγεθος των χαρακτήρων της επικεφαλίδας

blah ίνουν µία ιεραρχία στο περιεχόµενο της σελίδας µας, και αλλάζουν την µορφή των τίτλων

9 Το αποτέλεσµα διαφέρει από browser σε browser Αλλά η ουσία µένει!!! Χρήσιµο και από µηχανές αναζήτησης (πως?)

10 Συχνά λάθη: Προσοχή στο nesting!!! <h1> Chapter 11 <h2> section 2 </h1> </h2> Ή <head> <body> </head> </body>

11 Χαρακτηριστικά - Attributes Για διαφοροποίηση του οπτικού αποτελέσµατος κάποιας ετικέτας. Π.χ., για στοίχιση κειµένου <h1 align=center> chapter1 </h1>

12 Στοίχιση της ε ικεφαλίδας Χαρακτηριστικό/παράµετρος: 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

χ., <H1 ALIGN=LEFT> Επικεφαλίδα ύψους 1 </H1> <H2 ALIGN=RIGHT> Επικεφαλίδα ύψους 2 </H2> <H3

13 Παράγραφοι <p> <p>this is a paragraph</p> <p>this is another paragraph</p>!!! Βάζει επιπλέον κενή γραµµή πριν και µετά την παράγραφο. Στοίχιση παραγράφου µε το χαρακτηριστικό ALIGN=left center right Αν θέλουµε να αλλάξουµε γραµµή µε το ζόρι; <br> που σηµαίνει line break

14 Παράδειγµα <p>this <br> is a para<br> <br>graph with line breaks</p> This is a para graph with line breaks

15 Προκαθορισµένη παράγραφος Ενότητα ή διπλή ετικέτα <blockquote> </blockquote blockquote> Προκαθορισµένη στοίχιση δεξιότερα από αµέσως προηγούµενο κείµενο

16 Σχόλια στην ιστοσελίδα  εν πρόκειται ποτέ να εµφανιστεί στην οθόνη Σε τι χρησιµεύει άραγε;

17 Απλές οριζόντιες γραµµές <hr> Επιπλέον βάζει κενή γραµµή πριν και µετά την γραµµή (όπως το <p>, <blockquote>) οκιµάστε το σπίτι...

18 Μορφοποίηση γραµµατοσειρών <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 = µε το 3 προεπιλεγµένο 1 το µικρότερο και 7 µεγαλύτερο

, <FONT FACE="MS SANS SERIF" SIZE=2 COLOR=red> Ο Ήλιος είναι µεγαλύτερος πλανήτης από τη Γη </FONT> <FONT SIZE=5> Ο

19 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 >

"#808080" Olive = "#808000" White = "#FFFFFF" Yellow = "#FFFF00" Maroon = "#800000" Navy = "#000080" Red =

20 Προεπιλεγµένη γραµµατοσειρά <basefont size=ακέραιος> <basefont> ορίζεται στην ενότητα header Π.χ., <HTML> <HEAD> <BASEFONT SIZE=4> </HEAD> <BODY> Πανεπιστήµιο Κύπρου </BODY> </HTML> Με τον ορισµό του basesize to size στην ετικέτα <font size> µπορεί να είναι απόλυτη τιµή 1 7 ή σχετική τιµή -3 +3

21 Παραδείγµατα χρήσης 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> [δοκίµασε µε διαφορετικούς πλοηγούς]

22 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>

23 Κωδικοί Σηµείων Στίξεως & Συµβολών <: < Προσέξτε το ; (γιατί?) >: > &: & ": " ': &appo; : : Αριθµητικές πράξεις: and

24 Κωδικοί Σηµείων Συµβολών : : : :

25 Χαρακτηριστικά οριζοντίων γραµµών <hr size width align color noshade> SIZE= = πάχος σε εικονοστοιχεία (pixels). Εάν δεν καθοριστεί, τότε θα εµφανιστεί µόνο η σκιά της γραµµής. WIDTH= = µήκος σε εικονοστοιχεία "ποσοστό% µήκους οθόνης" ALIGN= left center right COLOR= = "#RRGGBB" NOSHADE Αφαιρει τη σκιά στο κάτω µέρος της γραµµής.

26 Έλεγχος γραµµής <br> νέα γραµµή κενές γραµµές <nobr> Αποτρέπει το σπάσιµο φράσης σε δυο γραµµές Π.χ., <NOBR> <H1> Θέλουµε αυτή η γραµµή κειµένου να εµφανιστεί στη ιδία γραµµή και όχι να σπάσει σε πολλες!</h1> </NOBR>

27 Προδιαµορφωµένο κείµενο Μη αναµόρφωση από διαφυλλιστή, όπως έχει συνταχτεί Π.χ., διατηρεί τα κενά στο κείµενο ιπλή ετικέτα <PRE>, </PRE> Π.χ., <PRE> Είδος Τιµή Έκπτωση Κόστος Α Β Γ </PRE> Όχι: Είδος Τιµή Έκπτωση Κόστος Α Β Γ Όχι

Σχετικά έγγραφα

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.