�ݺ�ߣ

Μανώλης Κοσμίδης
Dipl. Electrical & Computer Engineering,
MEng E-commerce & Computer Systems,
MEdu Management and Leadership

HTML
Hypertext markup language
Δθμιουργία ςτατικών ιςτοςελίδων

Προαπαιτοφμενα
• Ζνασ κειμενογράφοσ (πχ. Notepad)
• Προτείνεται: Notepad++
• Επίςθσ χρθςιμοποιοφνται ολοκλθρωμζνα
περιβάλλοντα όπωσ ο Dreamweaver.
• Ζνασ internet browser για τθ προβολι των
ιςτοςελίδων.
• Αποκικευςθ των αρχείων με προζκταςθ .htm

To πρώτο μου πρόγραμμα
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Δθμιουργία επικεφαλίδων
• <h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

Δθμιουργία παραγράφων
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Προβλιματα παραγράφων
<html>
<body>

<html>
<body>

<html>
<body>

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of
spaces
in the source code,
but the browser
ignores it.
</p>

<p>
The number of lines in
a paragraph depends
on the size of your
browser window. If you
resize the browser
window, the number of
lines in this paragraph
will change.
</p>

</body>
</html>

</body>
</html>

</body>
</html>

Δθμιουργία ςυνδζςμων
<a href="http://www.firstonweb.gr">This is a
link</a>

Δθμιουργία εικόνων
• <img src=/slideshow/html-basics-of-static-html-pages/30852068/"akmi.jpg" width="104"
height="142">
• Σθμαντικό να γνωρίηουμε τθ διαδρομι
αποκικευςθσ τθσ εικόνασ.
• Στο παράδειγμα το αρχείο τθσ ιςτοςελίδασ
βρίςκεται ςτον ίδιο φάκελο με τθν εικόνα.

Δθμιουργία κενών και γραμμών
<hr>
<br /> <br />
<hr>

Χριςθ ςχολιών
• 
• Σχολιάςτε αναλυτικά το κώδικα. Δεν είναι
μόνο για ςασ τα ςχόλια. Απευκφνονται
πικανώσ ςε άλλουσ χριςτεσ που κα πρζπει να
ςυντθριςουν ι να αλλάξουν το κώδικα.
Επίςθσ, μετά από 6 μινεσ, είναι ςίγουρο ότι
κυμάςτε πολφ λιγότερα για τισ λειτουργίεσ
που ο ίδιοσ ζχετε προγραμματίςει.

Βαςικζσ Μορφοποιιςεισ
<b> Ζντονθ γραφι
<em> Εμφατικι γραφι
<i> Πλάγια γραφι
<small>μικρότερα γράμματα
<strong>ζντονότερα γράμματα
<sub>δείκτθσ
<sup>εκκζτθσ

Μορφοποιιςτε το κείμενο ςασ
(για SEO)
• <abbr> Defines an abbreviation or acronym
• <address> Defines contact information for the
author/owner of a document
• <blockquote> Defines a section that is quoted
from another source
• <q>Defines an inline (short) quotation
• <cite> Defines the title of a work
• <dfn> Defines a definition term

Eνςωματωμζνο style ςτο <head>
• <head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

Inline style
<p style="color:blue;margin-left:20px;">This is a
paragraph.</p>

Font, Color, size
• <!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>

Text-align
• <!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned
heading</h1>
</body>
</html>

Εξωτερικό CSS
• <head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
Body { background-color:#d0e4fe; }
h1 { color:orange; text-align:center; }
p { font-family:"Times New Roman"; fontsize:20px; }

Τα ςτοιχεία <meta>
Πολύ σημαντικά για το SEO
• <meta name="keywords" content="HTML,
CSS, XML, XHTML, JavaScript">
• <meta name="description" content="Free
Web tutorials on HTML and CSS">
• <meta name="author" content="Hege
Refsnes">
• <meta http-equiv="refresh" content="30">

Μερικά ακόμθ tags
• Unordered lists <ul>
• Ordered list<ol>
• Definition lists<dl>

• Tables <table>

Διαχωριςμόσ ςε DIV
<!DOCTYPE html>
<html>
<body>
<p>This is some text.</p>
<div style="color:#0000FF">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>
</body>
</html>

�ݺ�ߣ

Html – basics of static html pages

More Related Content

Html – basics of static html pages