1η συνάντηση έργου
Download
Report
Transcript 1η συνάντηση έργου
Ιστοσελίδες -- Web-site
Εισαγωγή
Στατικές ιστοσελίδες
Δυναμικές ή Διαδραστικές
ιστοσελίδες:
Ο τρόπος παρουσίασης και τα
περιεχόμενά της ιστοσελίδας
μεταβάλλονται δυναμικά αφού αυτή
έχει φορτωθεί στον browser του
χρήστη.
Βασικά στοιχεία της HTML
Τι είναι η HTML
Ένα απλό HTML αρχείο
Το στοιχείο HEAD & BODY
Επικεφαλίδες, Παράγραφοι,
μορφοποίηση κειμένου, λίστες
Πίνακες & Φόρμες
Τι είναι η HTML
Hyper Text Markup Language : Γλώσσα σήμανσης
για τη δημιουργία σελίδων στο διαδίκτυο
Η γλώσσα HTML προέρχεται από την SGML
(Standard Generalized Markup Language)
Ένα HTML αρχείο είναι ένα αρχείο κειμένου που
περιέχει ετικέτες (markup tags)
Οι ετικέτες (tags) λένε στον Φυλλομετριτή (Web
Browser) πώς να παρουσιάσει το περιεχόμενο της
σελίδας
Τα HTML αρχεία έχουν html ή htm καταλήξεις
Ένα HTML αρχείο μπορεί να δημιουργηθεί
χρησιμοποιώντας έναν απλό text editor (π.χ.
notepad)
Ένα απλό HTML αρχείο
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<!-- Σχόλια -->
<head>
<title>Διαδικτυακός τόπος ΤΕΙ.</title>
</head>
<body>
<p>Καλώς Ήρθατε στο δικτυακό μας τόπο!</p>
</body>
</html>
Το στοιχείο HEAD
title : ορισμός του τίτλου της σελίδας
script : καθορισμός της scripting γλώσσας
style : καθορισμός style sheet
base : ορισμός της βάσης αρχής για τον
καθορισμό των σχετικών urls
meta : καθορισμός ζεύγους πληροφοριών
(όνομα/τιμή) - π.χ. εισαγωγή keywords
link : ορισμός σχέσεων με άλλα κείμενα
Το στοιχείο BODY - παράμετροι
bgcolor : το χρώμα του φόντου της
σελίδας
text : το χρώμα των χαρακτήρων του
κειμένου
link / vlink / alink : το χρώμα των links
background : το URL της εικόνας που θα
εμφανίζεται στο φόντο της σελίδας
<body bgcolor=" #0000FF " text="orange">
Βασικά στοιχεία της HTML
Στοιχεία ορισμού περιοχής
Επικεφαλίδες – <h1></h1>, …, <h6></h6>
Παράγραφοι - <p></p>
Λίστες - <ul></ul>, <ol></ol>,<dl></dl>
Φόρμες - <form></form>
Πίνακες - <table></table>
Οριζόντιες γραμμές - <hr />
Στοιχεία ορισμού κειμένου
Μεμονωμένα στοιχεία διαμόρφωσης - <b></b>,
<i></i>, <u></u>
Σύνδεσμοι - <a></a>
Εικόνες - <img />
Διακοπές κειμένου - <br />
Επικεφαλίδες – h1, …, h6
Υπάρχουν 6 μεγέθη από το Η1, H2, H3, H4, H5, H6
(φθίνουσα σειρά μεγεθών).
<body>
<h1>Επίπεδο επικεφαλίδας 1</h1>
<h2 align=“center”> Επίπεδο επικεφαλίδας 2</h2>
<h3> Επίπεδο επικεφαλίδας 3</h3>
<h4 align=“right”> Επίπεδο επικεφαλίδας 4</h4>
<h5> Επίπεδο επικεφαλίδας 5</h5>
<h6 align=“left”> Επίπεδο επικεφαλίδας 6</h6>
</body>
Παράγραφοι –
μορφοποίηση κειμένου
<b> Εμφανίζει το περιεχόμενο με έντονα
γράμματα (Bold).
<i> Εμφανίζει το περιεχόμενο σε πλάγια
γράμματα (italic).
Το κείμενο αυτό είναι με <b>έντονα</b> γράμματα
Το κείμενο αυτό είναι σε <i>πλάγια</i> γράμματα
<u> Εμφανίζει το περιεχόμενο υπογραμμισμένο
(underline).
Το κείμενο αυτό είναι <u> υπογραμμισμένο </u>
Σύνδεσμοι
Μια σύνδεση στο Web (link) αποτελείται από δύο μέρη :
Aυτό που βλέπουμε στη σελίδα και λέγεται άγκυρα (anchor)
Aυτό που όταν κάνουμε click θα εμφανιστεί στην οθόνη του
υπολογιστή μας
Ενα anchor μπορεί να είναι
μια λέξη
μια ομάδα λέξεων
μια εικόνα
Κάθε σύνδεση σημαίνει οτι ο browser θα φορτώσει το περιεχόμενο της
αντίστοιχης διεύθυνσης
Η διεύθυνση αυτή είναι είτε σχετική είτε απόλυτη
Η γενική μορφή σύνδεσης είναι :
<a href=“URL”>Anchor</a>
Εικόνες
Η πρόσθεση μιας εικόνας γίνεται με το tag <img /> και την
ιδιότητα src, που προσδιορίζει τη διεύθυνση που βρίσκεται η εικόνα
Π.χ. η εντολή
<img src="filename.gif" alt="image" />
αυτόματα τοποθετεί την εικόνα filename.gif δεξιά του προηγούμενου
αντικειμένου, με εναλλακτικό κείμενο τη λέξη image
Όταν παρεμβάλλεται μια εικόνα σε κείμενο, αυτόματα το κείμενο
ευθυγραμμίζεται με το κάτω μέρος της εικόνας
Με τη βοήθεια της ιδιότητας align μπορούμε να διορθώσουμε την
τοποθέτηση της εικόνας
Πίνακες
Στην HTML μπορούμε να ορίσουμε και
πίνακες με το tag <table>
Τα βασικά tags για την επεξεργασία
πινάκων είναι:
<table>
<tr>
<td>
<th>
</table>
</tr>
</td>
</th>
Ορισμός πίνακα
Νέα γραμμή
Ορίζει ένα κελί
Ορίζει την επικεφαλίδα
Πίνακες
Το στοιχείο Table
align = {left, right, center} : την οριζόντια τοποθέτηση
του πίνακα
width, height = {850, 50%} : το πλάτος και το ύψος του
πίνακα
border = {0,1,…} : το πλάτος του περιγράμματος
cellspacing = {0,1,…} : το κενό μεταξύ γειτονικών
κελιών
cellpadding : το κενό μεταξύ κελιού και περιεχομένων
<caption align = {top, bottom}>…</caption>
Πίνακες
tr / th / td – παράμετροι
nowrap : απαγορεύει την αναδίπλωση
rowspan = {int} : τις γραμμές που
κειμένου
καταλαμβάνονται από το κελί
colspan : τις στήλες που καταλαμβάνονται
width / height : το πλάτος / ύψος του κελιού
align / valign : οριζόντια / κάθετη
ευθυγράμμιση των περιεχομένων
bgcolor
tr – align & valign = {top, middle, bottom}
Φόρμες
Το στοιχείο Form
name
: ορίζει το όνομα της φόρμας
action : ορίζει το url που θα χρησιμοποιηθεί από
τον εξυπηρετητή για να επεξεργαστεί τα
δεδομένα της φόρμας
method = {get, post}: ορίζει τη μέθοδο
αποστολής των περιεχομένων της φόρμας
get : στέλνει τα περιεχόμενα σαν query στο url
post : τα στέλνει στο σώμα του http μηνύματος
Φόρμες
<input /> : παίρνει διάφορες παραμέτρους
<textarea> : για πεδία κειμένου πολλαπλών
γραμμών
Απαγορεύεται να υπάρχει ετικέτα τέλους (</input>)
rows / columns
</textarea>
<select> : μονής ή πολλαπλής επιλογής μενού
option - selected
</select>
Φόρμες
Το στοιχείο Input – παράμετροι:
Type: Καθορίζει τον τύπο του πεδίου εισόδου
text : κείμενο μίας γραμμής – size, maxlength
password : όμοιο με τον τύπο text, αλλά απεικονίζει τον
χαρακτήρα *
checkbox : δημιουργεί ζεύγος ονόματος/τιμής,
υποστηρίζονται πολλαπλές τιμές – checked
radio : δέχεται μόνο μία τιμή, μία ομάδα επιλογών έχει το
ίδιο όνομα
submit : υποβολή και αποστολή δεδομένων
reset : «καθαρίζει» τα περιεχόμενα