Πανεπιστήμιο Αιγαίου. Χειμερινό εξάμηνο. Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

Σχετικά έγγραφα
Γαβαλάς αµιανός

Γαβαλάς αµιανός

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)

ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I

7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα. Europe Code Week

Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο

Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής)

Η γλώσσα XHTML: διαφορές με HTML, μετατροπή

Προγραμματισμός Διαδικτύου

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης

Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013

Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ

<a href=" στο κείμενο</a>.

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 1o ΕΡΓΑΣΤΗΡΙΟ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML

Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML. Decode, ISSEL. Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος Στέλιος Μόσχογλου

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

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

Κείμενο ASCII Unicode - HTML. Κωδικοποίηση ASCII / Unicode HTML

ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ

Βασίλειος Κοντογιάννης ΠΕ19

ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :...

Διάλεξη 2η Εισαγωγή στο CSS

Νέες Τεχνολογίες στην Εκπαίδευση

Βασικά στοιχεία του CSS

Σχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20

Περιεχόμενα. Γαβαλάς Δαμιανός

HTML 1. Στόχος της ώρας 11/3/2014. Εισαγωγή της γλώσσας HTML σε αρχάριο επίπεδο:

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο

Βαρβάκειο Πρότυπο Γυμνάσιο

Εργαλεία ανάπτυξης εφαρμογών internet Ι

ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 1 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΑ ΣΥΣΤΗΜΑΤΑ

Περιεχόμενα. Γαβαλάς Δαμιανός Τρέχον status της HTML

Μάθηµα 3 Περ ε ισ ι σότ ό ε τ ρ ε α α γ ια ι α τ η τ η γ λώσ ώ σα α HTML

Γαβαλάς Δαμιανός Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS)

ΕΠΛ 003: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ. Παγκόσμιος Ιστός

Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table.

Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);

Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να

Άσκηση 6 Επαναληπτική Άσκηση HTML

1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section>

Σχεδιασμός και Ανάπτυξη Ιστότοπων

Cascading Style Sheets (CSS)

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML

Αλεξιάδης Γεώργιος (ΠΕ86) -

Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής

Εισαγωγή στην HTML (1)

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος

1. O FrontPage Explorer

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ. Παγκόσμιος Ιστός

CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML

Διαχείριση Πληροφοριών στο Διαδίκτυο. Εργαστήριο 2

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

Νέες Τεχνολογίες στην Εκπαίδευση

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5

<HTML> <HEAD> <TITLE> <BODY>

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας

Η Γλώσσα Προγραμματισμού του Internet HTML

Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες

Παρουσίαση και μορφοποίηση κειμένου

Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου.

Εφαρμοσμένη Πληροφορική ΙΙ (Ε) To Ολοκληρωμένο Περιβάλλον Ανάπτυξης (Integrated Development Environment-IDE) Netbeans 8

ΤΕΧΝΟΛΟΓΙΕΣ ΣΧΕΔΙΑΣΗΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (Web Site Design Technologies)

Η Βίβλος των CSS. Εισαγωγή στα CSS

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

ΚΕΡΑΜΟΠΟΥΛΟΣ ΕΥΚΛΕΙΔΗΣ

Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface

Σχεδίαση ιστοσελίδων

2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1>

Εργαστηριακή Άσκηση 4 Μορφοποίηση Κειμένου μέσω του

CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ

Περιεχόμενο και μορφοποίηση. Πότε χρησιμοποιώ το ένα και πότε το άλλο.

ΤΕΙ ΚΑΒΑΛΑΣ. Πτυχιακή εργασία ΕΙΣΑΓΩΓΗ. Μιλτιάδης Κακλαμάνης

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο

ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ ΧΑΡΑΚΤΗΡΕΣ ΜΕ ΕΙΔΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ. ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ Χαρακτήρας Κωδικός διαφυγής Ερμηνεία Συμβόλου & nbsp;

Σχεδίαση και Ανάπτυξη Ιστότοπων

Σχεδιασμός και Ανάπτυξη Ιστότοπων

1. Απαιτήσεις εργασίας

Europe Code Week 7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης

PowerPoint Ένα εργαλείο παρουσίασης

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος

Βαρβάκειο Πρότυπο Γυμνάσιο

Μαθηματικά Λογισμικά και Γλώσσες Αναπαράστασης Γνώσης

Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ

Transcript:

Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #3η: Εισαγωγή στην HTML Χειμερινό εξάμηνο

HyperText Markup Language: HTML (Ι) Γλώσσα κειμένου που χρησιμοποιείται για να δημιουργηθούν σελίδες ιστού. HyperText (υπερ-κείμενο): δίνει στο χρήστη τη δυνατότητα ανάγνωσης και κίνησης μέσα σε κείμενο και άλλες μορφές οπτικής πληροφορίας με μη γραμμικό τρόπο ακολουθώντας μια σειρά από συνδέσμους Σχεδιάστηκε για να καθορίσει τη λογική οργάνωση ενός αρχείου κειμένου που προορίζεται να «δημοσιευτεί» στον παγκόσμιο ιστό Ουσιαστικά πρόκειται για μια γλώσσα οδηγιών που καθοδηγεί διαφορετικά προγράμματα ανάγνωσης ιστοσελίδων (φυλλομετρητές browsers) να «μεταφράσουν» τις οδηγίες και να σχεδιάσουν τα αποτελέσματα (πληροφορία) στη σελίδα του χρήστη Οι οδηγίες της HTML δίνονται με χρήση των ετικετών (tags). Οι ετικέτες είναι το τμήμα εκείνο του κειμένου που περικλείεται από τα σύμβολα μικρότερο (<) και μεγαλύτερο (>) και την εντολή μέσα στα σύμβολα αυτά που αποτελεί την οδηγία. Οι ετικέτες «ανοίγουν» και «κλείνουν». Π.χ.: <b>this text will be displayed as bold!</b>

HyperText Markup Language: HTML (II) Ενα HTML αρχείο είναι ένα απλό αρχείο κειμένου (text file). Έτσι, δεν χρειάζεται ένα ειδικό επεξεργαστή κειμένου. Αρκεί ένας απλός επεξεργαστής κειμένου όπως είναι το NotePad ήτοms Word Υπάρχουν ωστόσο και ειδικά προγράμματα για τη γρήγορη και εύκολη συγγραφή HTML κώδικα (web authoring tools), όπως το MS FrontPage ήτοadobe Dreamweaver (απαιτούν άδεια!) και άλλα τα οποία διατίθενται δωρεάν Η HTML δεν αποτελεί έναν "Παίρνεις Αυτό Που Βλέπεις" (What You See Is What You Get, WYSIWYG) επεξεργαστή κειμένου όπως το MS Word. ηλαδή, ο HTML κώδικας δεν απεικονίζεται αυτούσιος όταν το HTML αρχείο ανοίγεται από έναν browser

HyperText Markup Language: HTML (IΙI) Σε μια ιστοσελίδα χρησιμοποιούνται διαφορετικοί τρόποι αναπαράστασης πληροφορίας: κείμενο, εικόνες και σύνδεσμοι,... Η HTML δεν δημιουργεί αυτά τα αντικείμενα, αλλά λέει στον browser που και πώς να τοποθετήσει τα αντικείμενα αυτά στην επιφάνεια της σελίδας Η HTML είναι επεκτάσιμη (extensible) γλώσσα, δηλαδή μπορούν να προστεθούν σε αυτή νέες ιδιότητες και λειτουργίες, χωρίς να ακυρώνονται υπερκείμενα ανεπτυγμένα σε παλαιότερες εκδόσεις της Κάθε HTML έγγραφο είναι ένα έγγραφο κειμένου (δηλ. περιέχει ASCII χαρακτήρες) και μπορούν να δημιουργηθούν όπως το notepad Τα αρχεία HTML έχουν συνήθως κατάληξη.html ή.htm (συνήθως,.html είναι η κατάληξη της κεντρικής σελίδας: index.html, ή default.html Ο έλεγχος ενός αρχείου HTML μπορεί να γίνει «τοπικά» με τη χρήση browser και χωρίς να είναι αναγκαία η εγκατάσταση του αρχείου σε κάποιο διακομιστή (web server)

Ιστορία της HTML (Ι) Στο ξεκίνημά του, το World Wide Web ήταν ένα σύστημα βασισμένο σε κείμενο που καθοριζόταν απο την HyperText MarkUp Language (HTML). Οι ετικέτες (tags) και η μετάφραση τους βασίζονταν σε προδιαγραφές (HTML 1.0) που καθοριζόταν από μια διεθνής επιτροπή (http://www.w3.org/). Ακολουθώντας αυτές τις προδιαγραφές, οι πληροφορίες ήταν απολύτως ανεξάρτητες του browser και της πλατφόρμας του Η/Υ όπουέτρεχεοbrowser Ο πρώτος browser Mosaic (1993) ως ο πρώτος web browser έχει δυνατότητα παρουσίασης γραφικών και ακολουθεί αυτές τις προδιαγραφές HTML 2.0, με νέες ετικέτες Μια ομάδα αποτελούμενη από τον άνθρωπο που ανέπτυξε το Mosaic δημιούργησε μια νέα εταιρία, προωθώντας έναν ταχύτερο και πιο αξιόπιστο browser: Netscape Navigator Το Netscape περιλαμβάνει όλες τις σχετικές της HTML 2.0 καθώς και επιπλέον ετικέτες για πράγματα που δεν μπορούσαν να γίνουν με την HTML 2.0. Αυτές οι «επεκτάσεις» (extensions) ή "εμπλουτισμοί" προκάλεσαν διαφωνίες ανάμεσα στους υποστηρικτές της "καθαρής" HTML και σε αυτούς που τους αρέσουν οι προσθήκες του Netscape. Άρχισαν επίσης να εμφανίζονται σελίδες με το μήνυμα: "This page optimized for Netscape". Νέοι browsers εμφανίστηκαν υποστηρίζοντας «καθαρή HTML 2.0+".

Ιστορία της HTML (ΙΙ) Το w3c αντιμετωπίζει το δίλημμα να γίνουν αυτές οι «επεκτάσεις» μέρος της HTML. Στην HTML 3.0 συμπεριλήφθηκαν οι περισσότερες ετικέτες που είχε εισαγάγει η Netscape. Το 1996 η Microsoft εισήγαγε τις δικές της HTML ετικέτες. Η HTML 4.0 (1997) υιοθετήθηκε από το σύνολο των web browsers. Περιέχει νέες λειτουργίες όπως τα Style Sheets (CSS) που παρέχουν ένα αποτελεσματικό μέσο για την ανανέωση ενός ολόκληρου web site με πιο μεγάλη συνέπεια. Σύγχρονες τάσεις: XHTML (extensible HTML), 2000: Νέα γλώσσα υπερκειμένου, προσφέρει συμβατότητα με την τεχνολογία XML. Έγγραφα γραμμένα σε XHTML είναι συμβατά με τους browsers της HTML. Υπάρχουν εργαλεία που μετατρέπουν HTML έγγραφα σε XHTML

Τι σημαίνουν οι εκδόσεις της HTML για τον web developer; ημιουργώντας ιστοσελίδες, πρέπει να σκέφτεστε πάντα τι πρόγραμμα θα χρησιμοποιούν οι αναγνώστες σας για να διαβάζουν τις σελίδες σας. Πιο απλά, "δημοσιεύοντας" τις ιστοσελίδες σας μέσα απο έναν Internet server δεν θα έχετε ιδέα τι browser ή ακόμη και τι υπολογιστής χρησιμοποιείται κάθε φορά από τους χρήστες. Μπορείτε να χρησιμοποιήσετε ειδικές προειδοποιήσεις στις σελίδες σας. Μπορείτε να παραμείνετε πιστοί στις προδιαγραφές που υποστηρίζουν όλοι οι browsers. Ακόμη και αν χρησιμοποιήσετε ειδικές ετικέτες, υπάρχουν συνήθως τρόποι για να αποφύγετε την δημιουργία χάους στους χρήστες διαφορετικών browsers. Το πιο σημαντικό είναι να μην εφησυχάζετε με την άψογη εμφάνιση των ιστοσελίδων σας στον δικό σας υπολογιστή. Οι αναγνώστες σας μπορεί να χρησιμοποιούν διαφορετικούς browsers, διαφορετικές γραμματοσειρές, διαφορετικά χρώματα, αναλύσεις οθόνης και γενικά όλα εκείνα που μπορεί να προκαλέσουν διαφοροποίηση στο μέγεθος και στην εμφάνιση. Αν μπορείτε δοκιμάστε τις ιστοσελίδες σας σε διαφορετικούς υπολογιστές, μεγαλώστε ή μικρύνετε το παράθυρο του browser, αλλάξτε τις γραμματοσειρές. Ευτυχώς, ο αρχικός σχεδιασμός της HTML έχει ένα ανοιχτό σετ από κανόνες που συγχωρεί, σε γενικές γραμμές, τα λάθη. Αν ο browser συναντήσει μια ετικέτα που δεν αναγνωρίζει ή δεν μπορεί να απεικονίσει, απλά αγνοεί την ετικέτα αυτή.

Βασική δομή ενός HTML εγγράφου Δηλώνει την ύπαρξη HTML κώδικα Τα κυρίως περιεχόμενο που περιλαμβάνει τα στοιχεία που αναλύονται και απεικονίζονται στην οθόνη <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Επικεφαλίδα: περιέχει πληροφορίες σχετικά με το υπερκείμενο (τίτλος, λέξειςκλειδιά,...)

Τι είναι οι ετικέτες (tags) της HTML; Οδηγίεςπροςτονbrowser σχετικά με το πως θα μορφοποιήσει ένα σώμα κειμένου. Η γενική μορφή μιας HTML ετικέτας είναι: <tag_name>σώμα κειμένου</tag_name> Κάθε δομικό συστατικό (στοιχείο) ενός HTML εγγράφου αποτελείται από 3 μέρη: Την ετικέτα έναρξης (start tag), < > Το περιεχόμενό του Την ετικέτα λήξης (end tag), </ > π.χ. <TITLE> Hello World </TITLE> Μπορούν να υπάρξουν και «άδεια στοιχεία» (δεν περιλαμβάνουν περιεχόμενο ούτε έχουν ετικέτα λήξης, π.χ. <br> HHTML δεν κάνει διάκριση μεταξύ ετικετών γραμμένων με μικρά ή κεφαλαία γράμματα, π.χ. ο κώδικας <title>κεφάλαιο 1ο</title> ταυτόσημος με τον <TITLE>Κεφάλαιο 1ο</TITLE>

H HTML δεν είναι WYSIWYG <html> <head> <title>wyswyg</title> </head> <body> Αυτό το κείμενο έχει πολλά κενά μεταξύ των λέξεων όπως επίσης αλλαγές γραμμών... </body> </html> <html> <head> <title>wyswyg</title> </head> <body> Αυτό το κείμενο έχει πολλά κενά μεταξύ των λέξεων όπως επίσης αλλαγές γραμμών... </body> </html> Παράδειγμα

Προσθήκη σχολίων στην HTML Συνήθως στην πρώτη γραμμή ενός HTML εγγράφου υπάρχει μια γραμμή σαν την ακόλουθη: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Αυτή ή γραμμή δεν εμφανίζεται στην οθόνη ούτε είναι τεχνικά απαραίτητη αλλά είναι ένας κώδικας που λέει στον browser για ποιά έκδοση της HTML είναι γραμμένη η συγκεκριμένη σελίδα. Προσθήκη σχολίων (επίσης δεν εμφανίζονται): <!-- διάφορα σχόλια --> Γιατί είναι απαραίτητα τα σχόλια;

Ετικέτες επικεφαλίδων (I) Για να δημιουργήσουμε μια επικεφαλίδα N-οστού επιπέδου γράφουμε: <hn>κείμενο Τίτλου</hN> π.χ., ο κώδικας <h1>κεφάλαιο 1ο</h1> θα δημιουργήσει μια επικεφαλίδα επιπέδου 1 με κείμενο «Κεφάλαιο 1ο» ΌσομικρότεροτοΝ, τόσο μεγαλύτερη θα εμφανίζεται η ετικέτα ΟκώδικαςτηςHTML έχει σχεδιαστεί για να παίρνουν οι επικεφαλίδες τους 6 τύπους (h1 to h6)!

Ετικέτες επικεφαλίδων (II) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <!-- Το head περιέχει πληροφορίες που αφορούν το αρχείο και δεν εμφανίζονται στην οθόνη. --> <TITLE>Ετικέτες...</TITLE> </HEAD> <BODY> <!-- Γραμμένο από τον..., στις... --> <h1>επικεφαλίδα επιπέδου 1</h1> <h2>επικεφαλίδα επιπέδου 2</h2> <h3>επικεφαλίδα επιπέδου 3</h3> <h4>επικεφαλίδα επιπέδου 4</h4> <h5>επικεφαλίδα επιπέδου 5</h5> <h6>επικεφαλίδα επιπέδου 6</h6> </BODY> </HTML>

Παράγραφοι, Αλλαγή γραμμής, οριζόντιες γραμμές Ο web browser αγνοείόλατακενάαπότοπάτηματουenter μέσα στο κείμενο. Για αυτό το λόγο, η HTML έχει ετικέτα για την τοποθέτηση μιας παραγράφου. Αυτή η ετικέτα λέει στον browser να αφήσει μία κενή γραμμή. Ο κώδικας είναι ο ακόλουθος: <p> Η ετικέτα της παραγράφου, δεν χρειάζεται ετικέτα τέλους όπως οι άλλες: </p> Επίσης, πριν και μετά την <h> ετικέτα, δεν τοποθετούμε την <p> ετικέτα, αφού αλλάζει από μόνη της παράγραφο H ετικέτα <br> (επίσης δεν χρειάζεται ετικέτα τέλους) απλά αλλάζει γραμμή (χωρίς να αφήνει κάποιο κενό διάστημα μεταξύ των παραγράφων όπως κάνει η ετικέτα <p> Τέλος, η ετικέτα <hr> εισάγει μια οριζόντια γραμμή στο έγγραφο Σημείωση: μετά από μια επικεφαλίδα (<hn>) δεν αλλάζουμε παράγραφο με την ετικέτα <p> (τα headers αλλάζουν παράγραφο αυτόματα)

Παράγραφοι / Αλλαγή γραμμής Παράγραφος (ετικέτα <p>) Αλλαγή γραμμής (ετικέτα <br>) Οριζόντια γραμμή (ετικέτα <hr>)

Ετικέτες στυλ <b>this is Bold</b> <i>this is Italics</i> <u>this is Underline...</u> <strike>this is Strike-through...</strike> <tt>this is typewriter</tt> Πως θα μορφοποιήσω ένα κείμενο ως bold + underlined; <b><u>this is Bold and underlined</u></b>

Λίστες: μη αριθμημένες λίστες (unordered) <B>Μη Αριθμημένη Λίστα:</B> <ul> <li> Στοιχείο 1 <li> Στοιχείο 2 <li> Στοιχείο 3 </ul>

Λίστες: αριθμημένες λίστες (ordered) <B>Μη Αριθμημένη Λίστα:</B> <οl> <li> Στοιχείο 1 <li> Στοιχείο 2 <li> Στοιχείο 3 </οl>

Λίστες: σύνθετες λίστες Πως θα δημιουργήσω λίστες πολλαπλών ιεραρχικών επιπέδων; <ol> Προσοχή στη στοίχιση (indentation) του HTML κώδικα!!! <li>this is the first item <li>this is the second item <ul> <li> This is the first subitem of the second item <ol> <li> And this is a numbered subitem of a subitem <li> And this is another numbered subitem of a subitem <li> Getting lost yet? </ol> <li> This is the second subitem of the second item <li> This is the third subitem of the second item </ul> <li>this is the third item </ol>

Προ-μορφοποιημένο κείμενο (preformatted) <html> <head> <title>preformatted</title> </head> <body> <pre> Αυτό το κείμενο έχει πολλά κενά μεταξύ των λέξεων όπως επίσης αλλαγές γραμμών... </pre></body> </html>

Blockquote <blockquote> "Αυτή είναι μια υποσημείωση από ένα πολύ διάσημο πρόσωπο. Εφόσον είναι μεγάλη και ενδιαφέρουσα, πρέπει να ξεχωρίζει από το υπόλοιπο κείμενο. Έτσι δείχνουμε οτι η σημείωση προέρχεται απο κάποιον άλλο εκτός του συγγραφέα." </blockquote>

Ορίσματα (attributes) Καθορίζουν τις ιδιότητες κάποιας ετικέτες, πχ η ετικέτα <hr> (horizontal line) έχει τα ορίσματα: WIDTH, που καθορίζει το μήκος της γραμμής σε σχέση με το πλάτος της σελίδας (πχ 70%) SIZE, που καθορίζει το πάχος της γραμμής σε pixels (πχ 10) ALIGN, που καθορίζει τη στοίχιση της γραμμής (δηλ. left, right, center) Παράδειγμα: <HR SIZE=6 WIDTH= 10% ALIGN= left> Όταν σε ένα browser δεν δίνουμε συγκεκριμένες οδηγίες για το πώςναεμφανίσειέναστοιχείο(ορίσματα), τότε χρησιμοποιεί τις αρχικές του (default) ρυθμίσεις Οι default ρυθμίσεις εξαρτώνται από το συγκεκριμένο browser

Στοίχιση <html> <body> <h1 align="center">αυτή είναι επικεφαλίδα επιπέδου 1</h1> <p>η παραπάνω επικεφαλίδα έχει στοιχηθεί στο κέντρο. </body> </html> Το κατηγόρημα (attribute) align είναιμέσαστοάνοιγματηςετικέτας h1, άρα αφορά μόνο το κείμενο που πρόκειται να μορφοποιηθεί ως επικεφαλίδα πρώτου επιπέδου. Η χρήση attributes είναι προαιρετική.

Μορφοποίηση κειμένου (Ι) Ορισμός μεγέθους γραμματοσειράς <font size=n>σώμα Κειμένου</font> Ορισμός σχετικού μεγέθους <font size=+1>σώμα Κειμένου</font> <font size=-2>σώμα Κειμένου</font> Αλλαγή προκαθορισμένου μεγέθους <basefont size=5>

Μορφοποίηση κειμένου (ΙΙ) <HTML><HEAD><TITLE>Fonts</TITLE> </HEAD> <BODY> <p><b><font size=+5>v</font><font size=+3>olcano WEB</font></b></p> <font size=7>info about volcanos...</font> </BODY></HTML>

Χρώμα γραμματοσειράς (Ι) <font color=red>...</font> <font color=#993459>...</font> <font color=lime>...</font> <font color=#002200>...</font> <font color=navy>...</font> <font color=#193467>...</font>

Χρώμα γραμματοσειράς (ΙΙ) <HTML><HEAD><TITLE>Font Colors</TITLE> </HEAD> <BODY> <B><font size=+4 color=#ff66ff>v</font> <font size=+3 color=#dd0055>olcano WEB</font></B> <p><font size=7>info about volcanos...</font> </BODY></HTML>

Είδη γραμματοσειράς Η σύνταξη της HTML για τον καθορισμό μιας γραμματοσειράς είναι: <font face="γραμματοσειρά_1,γραμματοσειρά_2">κείμενο π.χ. <HTML><HEAD><TITLE>Font Types</TITLE> </HEAD> <BODY> <B><font face="arial,helvetica" size=+4 color=#ff66ff>v</font> <font face="arial,helvetica" size=+3 color=#dd0055>olcano WEB</font></B> <p><font size=7>info about volcanos...</font> </BODY></HTML>

Subscripts/Superscripts Subscript: H<sub>2</sub>O H 2 O Superscript: km<sup>3</sup> km 3

Subscripts/Superscripts Volcanoes were important contributors to the early earth atmosphere by releasing gases such as nitrogen (N<sub>2</sub>), carbon dioxide (CO<sub>2</sub>), and ammonia (NH<sub>4</sub>). <p> Note that volcanic eruptions that occurred before historic times were several orders of magnitude larger (more than 1000 km<sup>3</sup> in erupted volume) than ones observed by humans.