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

Μέγεθος: px

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

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

Αριάδνη Σερπετζόγλου
7 χρόνια πριν
Προβολές:

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

2 Στόχοι 1 Να δημιουργήσουμε υπερκείμενα με την Γλώσσα Επισημείωσης Υπερκειμένων (hypertext markup language, HTML).

3 Υπολογιστικά συστήματα: Στρώματα 2 επικοινωνία εφαρμογές λειτουργικό σύστημα προγράμματα υλικό δεδομένα 4

4 3

5 4 Χρήση Notepad για την εγγραφή υπερκειμένων HTML Βήμα 1: Ανοίξτε το Notepad Start All Programs Accessories Notepad Βήμα 2: Συντάξτε το υπερκείμενο σας Βήμα 3: Αποθηκεύστε το αρχείο με κατάληξη.html Βήμα 4: Ανοίξτε το αρχείο με την χρήση του Πλοηγού

6 5 Στοιχείο <ετικέτα>περιεχόμενο</ετικέτα> <ετικέτα> : λέξεις κλειδιά Επισημείωσης Πεζά ή κεφαλαία γράμματα σε ετικέτες <html> <body> <h1>this a Heading</h1> <p>this is a paragraph.</p> <p>this is another paragraph.</p> </body> </html> <body> : Το περιεχόμενο του υπερκειμένου

7 6 Η ετικέτα < html> δηλώνει τον τύπο και την έκδοση της γλώσσας HTML που έχει χρησιμοποιηθεί π.χ. <!DOCTYPE html> για HTML5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " για HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " για XHTML 1.0 Επιτυγχάνεται έτσι η σωστή προβολή της ιστοσελίδας

8 7 Η ετικέτα <hx> υποδηλώνει επικεφαλίδες από 1 μέχρι 6, <h1>, <h2>,, <h6> Οι επικεφαλίδες χρησιμοποιούνται και ως δείκτες έτσι δεν πρέπει να χρησιμοποιούνται απλά για να αλλάξουμε τη εμφάνιση των χαρακτήρων μιας ιστοσελίδας. Η ετικέτα <p>. </p> υποδηλώνει μια παράγραφο. Η ετικέτα <img src= width="104" height="142" alt="some_text"> εισάγει μια εικόνα. Η ετικέτα <a href= > </a> χρησιμοποιείτε για την εισαγωγή ενός συνδέσμου.

9 8 Η ετικέτα <hr> δημιουργεί μια οριζόντια γραμμή Για υποσημειώσεις/σχόλια χρησιμοποιείτε το ζεύγος ετικέτας  Για την μορφοποίηση κειμένου: <b> </b> <em> </em> <i>..</i> <strong> </strong> <small> </small> <sub>.</sub> <sup> </sup> <del> </del>

10 9 Η ετικέτα <head> </head> περιλαμβάνει Τον τίτλο του υπερκειμένου <title> </title> <!DOCTYPE html> <html> <head> <title>title of the document</title> </head> <body> The content of the document... </body> </html>

11 10 Η ετικέτα <head> </head> περιλαμβάνει Τον τίτλο του υπερκειμένου <title> </title> Την ετικέτα <style> <!DOCTYPE html> <html> <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head> <body> The content of the document... </body> </html>

12 11 Η ετικέτα <head> </head> περιλαμβάνει Τον τίτλο του υπερκειμένου <title> </title> Την ετικέτα <style> Την ετικέτα <link> <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> The content of the document... </body> </html>

13 12 Η ετικέτα <head> </head> περιλαμβάνει Τον τίτλο του υπερκειμένου <title> </title> Την ετικέτα <style> Την ετικέτα <link> Την ετικέτα <script>

14 13 Ύφος με την χρήση Επικαλυπτόμενων Φύλλων Ύφους (Cascading Style Sheets, CSS) Σε ακολουθία (Inline) Εσωτερικά ενός υπερκειμένου (Internal) Εξωτερικά από το υπερκείμενο σε ξεχωριστό αρχείο (External)

15 14 Ύφος με την χρήση Επικαλυπτόμενων Φύλλων Ύφους (Cascading Style Sheets, CSS) Σε ακολουθία (Inline) <p style="color:blue;margin-left:20px;">this is a paragraph.</p> Φόντο: <!DOCTYPE html> <html> <body style="background-color:yellow;"> <h2 style="background-color:red;">this is a heading</h2> <p style="background-color:green;">this is a paragraph.</p> </body> </html>

16 15 Ύφος με την χρήση Επικαλυπτόμενων Φύλλων Ύφους (Cascading Style Sheets, CSS) Σε ακολουθία (Inline) Γραμματοσειρά, χρώμα και μέγεθος κειμένου: <!DOCTYPE html> <html> <body> <h1 style="font-family:verdana;">a heading</h1> <p style="font-family:arial;color:red;font-size:20px;">a paragraph.</p> </body> </html>

17 16 Ύφος με την χρήση Επικαλυπτόμενων Φύλλων Ύφους (Cascading Style Sheets, CSS) Σε ακολουθία (Inline) Στοίχιση κειμένου: <!DOCTYPE html> <html> <body> <h1 style="text-align:center;">center-aligned heading</h1> <p>this is a paragraph.</p> </body> </html>

18 17 Ύφος με την χρήση Επικαλυπτόμενων Φύλλων Ύφους (Cascading Style Sheets, CSS) Εσωτερικά ενός υπερκειμένου (Internal) <!DOCTYPE html> <html> <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head> <body> <h1 style="text-align:center;">center-aligned heading</h1> <p>this is a paragraph.</p> </body> </html>

19 18 Πίνακες με την χρήση της ετικέτας <table> </table> <tr> </tr> για νέα γραμμή <td>... </td> για νέο πεδίο <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

20 19 Χρώματα Δεκαεξαδικό σύστημα απαρίθμησης χρωματισμών 3 ζεύγη διψήφιων δεκαεξαδικών αριθμών για τα 3 βασικά χρώματα (RGB)

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

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

Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,