Html – basics of static html pages

50 %
50 %
Information about Html – basics of static html pages
Education

Published on February 5, 2014

Author: mkosmidis

Source: slideshare.net

Description

Εισαγωγικό μάθημα HTML

Μανώλης Κοσμίδης 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="akmi.jpg" width="104" height="142"> • Σθμαντικό να γνωρίηουμε τθ διαδρομι αποκικευςθσ τθσ εικόνασ. • Στο παράδειγμα το αρχείο τθσ ιςτοςελίδασ βρίςκεται ςτον ίδιο φάκελο με τθν εικόνα.

Δθμιουργία κενών και γραμμών <p>This is a paragraph.</p> <hr> <br /> <br /> <p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p>

Χριςθ ςχολιών • <!-- This is a comment --> • Σχολιάςτε αναλυτικά το κώδικα. Δεν είναι μόνο για ςασ τα ςχόλια. Απευκφνονται πικανώσ ςε άλλουσ χριςτεσ που κα πρζπει να ςυντθριςουν ι να αλλάξουν το κώδικα. Επίςθσ, μετά από 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> <p>This is a paragraph.</p> </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>

Add a comment

Related presentations

Related pages

HTML - Learn HTML in 8 steps - Udemy

Knowledge rich guide to start your career in Web Development with HTML and learn how to develop static HTML pages. ... want to add HTML - Learn HTML in 8 ...
Read more

HTML5 Introduction - W3Schools

WHATWG wanted to develop HTML as a "Living Standard". A living standard is always updated and improved. New features can be added, ...
Read more

How to create a static website with HTML – Web Tutorial Plus

HTML Basics. HTML – Hyper Text M ... point when creating a static web pages and really will ... regarding how to create a static website with basic ...
Read more

HTML Basics | Codecademy

HTML Basics. Why learn HTML? Every ... You can think of HTML as the skeleton that gives every webpage structure. In this course, we'll use HTML to add ...
Read more

Generating static HTML pages with Grunt + Assemble

Static HTML pages with Grunt From YAML to HTML using Grunt and Assemble psst… for this article you need to know basics of Grunt. Recently I embarked on ...
Read more

Static HTML: iframe tabs on Facebook | Facebook

Static HTML: iframe tabs. App Privacy · App Terms · Report/Contact. Privacy · Terms · Advertising · Ad Choices · Cookies · More. Static HTML: iframe ...
Read more

Example of a simple HTML page - help.websiteos.com

Example of a simple HTML page. ... HTML uses hundreds of different tags to define a layout for web pages. ... ...
Read more

HTML Examples - W3Schools

HTML Examples HTML Examples HTML Quiz HTML Certificate HTML Summary HTML References HTML Tag List HTML Attributes HTML Events HTML Colors HTML ... HTML ...
Read more

Github Pages Help

Categories / GitHub Pages Basics What is GitHub Pages? ... Configuring a publishing source for GitHub Pages; User, Organization, and Project Pages;
Read more