Σχεδιασμός μιας σελίδας HTML Είναι μια γλώσσα σημειώσεων Αν θέλουμε να εμφανιστεί στην οθόνη το κείμενο this is in italics σε πλαγιαστά γράμματα γράφουμε : <I>this is in italics</I> Τα <I> , </I> λέγονται marks, ή tags (ετικέτες) Ο καλός προγραμματιστής πρέπει να γνωρίζει πιο tags κάνει τί. Επειδή η HTML είναι μια γλώσσα tag-oriented αρκεί ένας απλός ASCII διορθωτής κειμένου, για τη δημιουργία HTML σελίδων π.χ. o Notepad (Microsoft) ή ο vi σε UNIX Δ.Π.Θ.
Ένα απλό παράδειγμα <HTML> <HEAD> <TITLE>A Simple Sample HTML document </TITLE> </HEAD> <BODY> <H1>Welcome to the World of HTML</H1> <HR> HTML documents can be as simple as this Web page, which consists of just asingle page of <B>text</B> and <I>links</I>, or as complex as a 10,000 page corporate intranet site replete with Java applets and CGI data base access. <P>In this book, we'll explore the possibilities of HTML, but we'll also check out what can be done by adding other elements to your documents. <P>Click <A HREF="sample.htm">HERE</A> to reload this page!<P> </BODY> </HTML> Δ.Π.Θ.
Αν σώσετε το αρχείο με όνομα sample Αν σώσετε το αρχείο με όνομα sample.htm και το ανοίξετε με κάποιο Web browser θα δείτε την ακόλουθη εικόνα Δ.Π.Θ.
Εμφάνιση της σελίδας στο WWW Αν θέλουμε να εμφανίσουμε τη σελίδα αυτή στο World Wide Web, θα πρέπει να τη φορτώσουμε σε ένα ISP (Internet service provider = Παροχέας Υπηρεσιών Internet). Ενας ISP είναι ο υπολογιστής loki.ee.duth.gr Αν μετονομάσουμε το αρχείο sample.html σε index.html και το μεταφέρουμε στο φάκελο public_html (με τη βοήθεια του FTP) τότε η ανάγνωση της σελίδας από το Internet μπορεί να γίνει γράφοντας : http://loki.ee.duth.gr/~loginname Σημείωση 1: Και σε περιβάλλον UNIX το αρχικό αρχείο πρέπει να βρίσκεται στον κατάλογο public_html. Στη Microsoft το αρχικό αρχείο λέγεται main.htm ή default.htm Σημείωση 2: Χρησιμοποιείστε την εντολή chmod 755 για τον υποκατάλογο public_html. Δ.Π.Θ.
Microsoft Internet Information Server Web Servers Microsoft Internet Information Server http://www.microsoft.com/iis/default.asp Περιέχει : FTP server, WWW server, Gopher server, WAIS server και το πρόγραμμα κατασκευής σελίδων FrontPage Luckman Web Commander http://www.luckman.com Περιέχει : HTML authoring tools, secure-server applications, ODBC database support, WAIS Toolkit, Netscape Navigator, και τη γλώσσα Perl 5. WebSite Professional http://www.ora.com Περιέχει : HTML authoring tools με SSIs, Hot Dog, WSAPI, και τον Netscape browser/editor. Δ.Π.Θ.
Web Browsers Amaya is an open source software project hosted by W3C http://www.w3.org/Amaya/ HotJava Browser 3.0 http://java.sun.com/products/hotjava/index.html Lynx is a text browser for the World Wide Web http://lynx.browser.org/ Opera - The Best Internet Experience on any Device http://opera.nta.no/ Περισσότερα στη Διεύθυνση http://wdvl.internet.com/Software/Browsers/ Δ.Π.Θ.
Βασικές εντολές <HTML> <HEAD> <TITLE>Μια βασική σελίδα σε HTML</TITLE> </HEAD> <BODY>Αυτό είναι ένα απλό κείμενο στην οθόνη. </BODY> </HTML> Δ.Π.Θ.
Ένα παράδειγμα με τις βασικές δυνατότητες <HTML> <HEAD><TITLE>Μάθημα σε HTML</TITLE> <LINK HREF="mailto:karakos@ocean.ee.duth.gr" REV="made"> <BASE HREF="http://dalab.ee.duth.gr/~karakos"> <META HTTP-EQUIV=“Expires" CONTENT="31 Dec 2002"> <META NAME="Last Modified" CONTENT=“29 Oct 2002"> <META NAME="Keywords" CONTENT="Ξάνθη, ΔΠΘ, Δημοκρίτειο Πανεπιστήμιο Θράκης, Τμήμα Ηλεκτρολόγων, Ασκήσεις, HTML"> <META NAME="Description" CONTENT="Βασικά θέματα προγραμματισμού σε HTML"> </HEAD> <BODY BGCOLOR="NAVY" TEXT="WHITE" LINK="RED" VLINK="BLUE" ALINK="GREEN"> <BASEFONT SIZE=3 FONT="Arial, Times New Roman"><H1> <FONT COLOR="YELLOW">Εργαστήριο Υπολογιστών </FONT> </H1><BR>Απλά μαθήματα HTML. <BR><BR>Εισαγωγή στις βασικές εντολές<BR> </BODY> </HTML> Δ.Π.Θ.
Αν σώσουμε αυτό το αρχείο με επέκταση. htm ή Αν σώσουμε αυτό το αρχείο με επέκταση .htm ή .html (στο UNIX) με τη βοήθεια ενός φυλλομετρητή θα δούμε την εικόνα που ακολουθεί Δ.Π.Θ.
Τα βασικά στοιχεία μιας εντολής META Ιδιότητα Αποτέλεσμα HTTP-EQUIV Ορίζεται η ιδιότητα του στοιχείου NAME Επι πλέον περιγραφή του στοιχείου Αν λείπει ισχύει η HTTP-EQUIV. URL Ορίζεται ο στόχος CONTENT Ορίζεται το περιεχόμενο Δ.Π.Θ.
Τα πιο βασικά στοιχεία εμφανίζονται στον ακόλουθο πίνακα Ιδιότητα Αποτέλεσμα BACKGROUND Δείχνει το URL μιας εικόνας που θα χρησιμοποιηθεί σαν background. BGCOLOR Ορίζει το χρώμα του background. BGPROPERTIES Παίρνει τιμή μόνο την FIXED, και σημαίνει οτι η εικόνα μένει σταθερή (Μόνο στον Microsoft Internet Explorer) LEFTMARGIN Ορίζει την απόσταση από αριστερά σε pixels. TOPMARGIN Ορίζει την απόσταση από πάνω σε pixels. TEXT Ορίζει το χρώμα των γραμμάτων. LINK Ορίζει το χρώμα ενός link που δεν έχει ακόμη επιλεγεί. VLINK Ορίζει το χρώμα ενός link που έχει ήδη επιλεγεί. ALINK Ορίζει το χρώμα ενός ενεργού link. Δ.Π.Θ.
Το πρόγραμμα αυτό εμφανίζει την επόμενη εικόνα Παράδειγμα προγράμματος <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD><TITLE>Amateur Astronomy on the World Wide Web</TITLE> <META NAME="Keywords" CONTENT="Astronomy, Telescope, Stargazing"> <META NAME="Description" CONTENT="Amateur Astronomy resources available on the Web"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </HEAD> <BODY BGCOLOR="WHITE" TEXT="BLACK" LINK="RED" VLINK="GREEN" ALINK="YELLOW" > <FONT SIZE=3 FACE="Verdana, Arial, Helvetica"><BR><H1>Amateur Astronomy on the World Wide Web</H1><HR><H2>Magazines</H2> <OL><LI><A HREF=http://www.astronomy-mall.com/Astronomy-Mall/?190,54>The Astronomy Mall</A> - A place to find many amateur astronomy companies. <LI><A HREF=http://www.skypub.com>Sky On-line</A> - Publishers of <I>Sky and Telescope</I> and <I>CCD</I> magazines.</OL><HR> <ADDRESS>Created by Robert Meegan<BR>Last Modified on 16 Dec 1996</ADDRESS> </BODY> </HTML> Το πρόγραμμα αυτό εμφανίζει την επόμενη εικόνα Δ.Π.Θ.
Δ.Π.Θ.