Σχεδιασμός μιας σελίδας HTML

Σχεδιασμός μιας σελίδας 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 μπορεί να γίνει γράφοντας : Σημείωση 1: Και σε περιβάλλον UNIX το αρχικό αρχείο πρέπει να βρίσκεται στον κατάλογο public_html. Στη Microsoft το αρχικό αρχείο λέγεται main.htm ή default.htm Σημείωση 2: Χρησιμοποιείστε την εντολή chmod 755 για τον υποκατάλογο public_html. Δ.Π.Θ.

Microsoft Internet Information Server
Web Servers Microsoft Internet Information Server Περιέχει : FTP server, WWW server, Gopher server, WAIS server και το πρόγραμμα κατασκευής σελίδων FrontPage Luckman Web Commander Περιέχει : HTML authoring tools, secure-server applications, ODBC database support, WAIS Toolkit, Netscape Navigator, και τη γλώσσα Perl 5. WebSite Professional Περιέχει : HTML authoring tools με SSIs, Hot Dog, WSAPI, και τον Netscape browser/editor. Δ.Π.Θ.

Web Browsers Amaya is an open source software project hosted by W3C
HotJava Browser 3.0 Lynx is a text browser for the World Wide Web Opera - The Best Internet Experience on any Device Περισσότερα στη Διεύθυνση Δ.Π.Θ.

Βασικές εντολές <HTML> <HEAD>
<TITLE>Μια βασική σελίδα σε HTML</TITLE> </HEAD> <BODY>Αυτό είναι ένα απλό κείμενο στην οθόνη. </BODY> </HTML> Δ.Π.Θ.

Ένα παράδειγμα με τις βασικές δυνατότητες
<HTML> <HEAD><TITLE>Μάθημα σε HTML</TITLE> <LINK REV="made"> <BASE HREF=" <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 "> </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= Astronomy Mall</A> - A place to find many amateur astronomy companies. <LI><A HREF= 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> Το πρόγραμμα αυτό εμφανίζει την επόμενη εικόνα Δ.Π.Θ.

Δ.Π.Θ.

Σχεδιασμός μιας σελίδας HTML

Παρόμοιες παρουσιάσεις

Παρουσίαση με θέμα: "Σχεδιασμός μιας σελίδας HTML"— Μεταγράφημα παρουσίασης:

Παρόμοιες παρουσιάσεις

Σχετικά με το έργο

Σχόλια

Είσοδος

Σύνδεση μέσω των κοινωνικών δικτύων:

Σχεδιασμός μιας σελίδας HTML

Παρόμοιες παρουσιάσεις

Παρουσίαση με θέμα: "Σχεδιασμός μιας σελίδας HTML"— Μεταγράφημα παρουσίασης:

Παρόμοιες παρουσιάσεις

Σχετικά με το έργο

Σχόλια