Html – basics of static html pages
•Transferir como PPTX, PDF•
2 gostaram•997 visualizações
Εισαγωγικό μάθημα HTML
Recomendados
Mais conteúdo relacionado
Semelhante a Html – basics of static html pages
Semelhante a Html – basics of static html pages (20)
Mais de Manolis Kosmidis
Último
Último (20)
Html – basics of static html pages
- 1. Μανώλης Κοσμίδης Dipl. Electrical & Computer Engineering, MEng E-commerce & Computer Systems, MEdu Management and Leadership HTML Hypertext markup language Δθμιουργία ςτατικών ιςτοςελίδων
- 2. Προαπαιτοφμενα • Ζνασ κειμενογράφοσ (πχ. Notepad) • Προτείνεται: Notepad++ • Επίςθσ χρθςιμοποιοφνται ολοκλθρωμζνα περιβάλλοντα όπωσ ο Dreamweaver. • Ζνασ internet browser για τθ προβολι των ιςτοςελίδων. • Αποκικευςθ των αρχείων με προζκταςθ .htm
- 3. To πρώτο μου πρόγραμμα <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
- 4. Δθμιουργία επικεφαλίδων • <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
- 5. Δθμιουργία παραγράφων <p>This is a paragraph.</p> <p>This is another paragraph.</p>
- 6. Προβλιματα παραγράφων <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>
- 7. Δθμιουργία ςυνδζςμων <a href="http://www.firstonweb.gr">This is a link</a>
- 8. Δθμιουργία εικόνων • <img src="akmi.jpg" width="104" height="142"> • Σθμαντικό να γνωρίηουμε τθ διαδρομι αποκικευςθσ τθσ εικόνασ. • Στο παράδειγμα το αρχείο τθσ ιςτοςελίδασ βρίςκεται ςτον ίδιο φάκελο με τθν εικόνα.
- 9. Δθμιουργία κενών και γραμμών <p>This is a paragraph.</p> <hr> <br /> <br /> <p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p>
- 10. Χριςθ ςχολιών • <!-- This is a comment --> • Σχολιάςτε αναλυτικά το κώδικα. Δεν είναι μόνο για ςασ τα ςχόλια. Απευκφνονται πικανώσ ςε άλλουσ χριςτεσ που κα πρζπει να ςυντθριςουν ι να αλλάξουν το κώδικα. Επίςθσ, μετά από 6 μινεσ, είναι ςίγουρο ότι κυμάςτε πολφ λιγότερα για τισ λειτουργίεσ που ο ίδιοσ ζχετε προγραμματίςει.
- 11. Βαςικζσ Μορφοποιιςεισ <b> Ζντονθ γραφι <em> Εμφατικι γραφι <i> Πλάγια γραφι <small>μικρότερα γράμματα <strong>ζντονότερα γράμματα <sub>δείκτθσ <sup>εκκζτθσ
- 12. Μορφοποιιςτε το κείμενο ςασ (για 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
- 13. Eνςωματωμζνο style ςτο <head> • <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
- 14. Inline style <p style="color:blue;margin-left:20px;">This is a paragraph.</p>
- 15. 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>
- 16. Text-align • <!DOCTYPE html> <html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html>
- 17. Εξωτερικό 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; }
- 18. Τα ςτοιχεία <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">
- 19. Μερικά ακόμθ tags • Unordered lists <ul> • Ordered list<ol> • Definition lists<dl> • Tables <table>
- 20. Διαχωριςμόσ ςε 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>