# data[].attributes.headline
Οδηγίες για τα πρωτότυπα αρχεία

# data[].attributes.subject
Οδηγίες για τα πρωτότυπα αρχεία

# data[].attributes.body
Κατεβάστε τοπικά στον υπολογιστή σας, στον ίδιο φάκελο τα 3 αρχεία, HTML, CSS και script.js και με διπλό κλικ τρέξτε στον Chrome/Mozilla/Edge browser το template.html

# data[].attributes.headline
Εισαγωγή στο Διαδίκτυο

# data[].attributes.subject
Εισαγωγή στο Διαδίκτυο

# data[].attributes.headline
Εισαγωγή στις σελίδες και HTML

# data[].attributes.subject
Εισαγωγή στις σελίδες και HTML

# data[].attributes.headline
HTML βασικός κορμός σελίδας

# data[].attributes.subject
HTML βασικός κορμός σελίδας

# data[].attributes.attachment_link.readable_text
HTML is the standard markup language for creating Web pages.

What is HTML?

HTML stands for Hyper Text Markup Language

HTML is the standard markup language for creating Web pages

HTML describes the structure of a Web page

HTML consists of a series of elements

HTML elements tell the browser how to display the content

HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

A Simple HTML Document

Example Explained

The <!DOCTYPE html> declaration defines that this document is an HTML5 document

The <html> element is the root element of an HTML page

The <head> element contains meta information about the HTML page

The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)

The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

The <h1> element defines a large heading

The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

The HTML element is everything from the start tag to the end tag:

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

HTML Page Structure

Below is a visualization of an HTML page structure:

<html>

<body>

</body>

</html>

Note: The content inside the <body> section will be displayed in a browser. The content inside the <title> element will be shown in the browser's title bar or in the page's tab.

HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

This tutorial follows the latest HTML5 standard.

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.headline
Γενικά - Κουβέντα

# data[].attributes.subject
Γενικά - Κουβέντα

# data[].attributes.headline
Notepad++ Εγκατάσταση

# data[].attributes.subject
Notepad++ Εγκατάσταση

# data[].attributes.headline
HTML Επικεφαλίδες

# data[].attributes.subject
HTML Επικεφαλίδες

# data[].attributes.attachment_link.description
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.

# data[].attributes.headline
HTML παράγραφος

# data[].attributes.subject
HTML παράγραφος

# data[].attributes.attachment_link.readable_text
A paragraph always starts on a new line, and is usually a block of text.

HTML Paragraphs

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

HTML Display

You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.

The browser will automatically remove any extra spaces and lines when the page is displayed:

Example

Try it Yourself "

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:

Example

Try it Yourself "

The <hr> tag is an empty tag, which means that it has no end tag.

HTML Line Breaks

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

The <br> tag is an empty tag, which means that it has no end tag.

The Poem Problem

This poem will display on a single line:

Example

Try it Yourself "

Solution - The HTML <pre> Element

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

Example

Try it Yourself "

HTML Exercises

HTML Tag Reference

W3Schools' tag reference contains additional information about HTML elements and their attributes.

# data[].attributes.attachment_link.description
A paragraph always starts on a new line, and is usually a block of text. The HTML element defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph. You cannot be sure how HTML will be displayed.

# data[].attributes.attachment_link.readable_text
Easy Learning with HTML "Try it Yourself"

With our "Try it Yourself" editor, you can edit the HTML code and view the result:
Click on the "Try it Yourself" button to see how it works.
HTML Examples

In this HTML tutorial, you will find more than 200 examples. With our online "Try it Yourself" editor, you can edit and test each example yourself!
Go to HTML Examples!
HTML Exercises

This HTML tutorial also contains nearly 100 HTML exercises.

HTML Quiz Test

Test your HTML skills with our HTML Quiz!
Start HTML Quiz!
My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study W3Schools without using My Learning.

HTML References

At W3Schools you will find complete references about HTML elements, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, browser support, and more:

Kickstart your career

Get certified by completing the course

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.headline
HTML ετικέτα εικόνας

# data[].attributes.subject
HTML ετικέτα εικόνας

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.headline
HTML - ετικέτα συνδέσμου

# data[].attributes.subject
HTML - ετικέτα συνδέσμου

# data[].attributes.attachment_link.readable_text
Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. A link can be an image or any other HTML element!

HTML Links - Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue

A visited link is underlined and purple

An active link is underlined and red

Tip: Links can of course be styled with CSS, to get another look!

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked

_blank - Opens the document in a new window or tab

_parent - Opens the document in the parent frame

_top - Opens the document in the full body of the window

Example

Use target="_blank" to open the linked document in a new browser window or tab:

Try it Yourself "

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without the "https://www" part):

Example

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

Try it Yourself "

HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the<a> tag:

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's email program (to let them send a new email):

Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

Example

Try it Yourself "

Link Titles

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

Example

Try it Yourself "

More on Absolute URLs and Relative URLs

Example

Link to a page located in the html folder on the current web site:

Try it Yourself "

Example

Link to a page located in the same folder as the current page:

Try it Yourself "

Chapter Summary

Use the <a> element to define a link

Use the href attribute to define the link address

Use the target attribute to define where to open the linked document

Use the <img> element (inside <a>) to use an image as a link

Use the mailto: scheme inside the href attribute to create a link that opens the user's email program

HTML Link Tags

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.headline
Παράδειγμα HTML - youtube channel - Ελένη Φουρέιρα

# data[].attributes.subject
Παράδειγμα HTML - youtube channel - Ελένη Φουρέιρα

# data[].attributes.headline
Παράδειγμα HTML - youtube channel - Snik's test site

# data[].attributes.subject
Παράδειγμα HTML - youtube channel - Snik's test site

# data[].attributes.body
Όλα τα emojis!

# data[].attributes.attachment_link.readable_text
Emojipedia® is a registered trademark of Zedge, Inc; Apple® is a registered trademark of Apple Inc; Microsoft® and Windows® are registered trademarks of Microsoft Corporation; Google® and Android™ are registered trademarks or trademarks of Google Inc in the United States and/or other countries.

Follow Emojipedia on Twitter, Facebook, Instagram, Mastodon, or TikTok. Do Not Sell My Personal Information. Change Consent. Read our Terms of Service here.

Run a retail store? Check out the NRSPlus.com Point of Sale (POS) system, and low-rate NRSPay.com credit card processing from our partner, National Retail Solutions (NRS).

# data[].attributes.attachment_link.title
📙 Emojipedia - 😃 Home of Emoji Meanings 💁👌🎍😍

# data[].attributes.attachment_link.description
Emojipedia® is a registered trademark of Zedge, Inc; Apple® is a registered trademark of Apple Inc; Microsoft® and Windows® are registered trademarks of Microsoft Corporation; Google® and Android™ are registered trademarks or trademarks of Google Inc in the United States and/or other countries. Follow Emojipedia on Twitter, Facebook, Instagram, Mastodon, or TikTok.

# data[].attributes.headline
Ντοκιμαντέρ - Ιστορία του Διαδικτύου

# data[].attributes.subject
Ντοκιμαντέρ - Ιστορία του Διαδικτύου

# data[].attributes.attachment_link.authors[].name
ΜΑΡΙΑ ΙΩΣΗΦΙΔΟΥ

# data[].attributes.headline
HTML Layout - Δομή σχεδίασης σελίδας

# data[].attributes.subject
HTML Layout - Δομή σχεδίασης σελίδας

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.attachment_link.readable_text
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Color Names

In HTML, a color can be specified by using a color name:

Try it Yourself "

HTML supports 140 standard color names.

Background Color

You can set the background color for HTML elements:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Border Color

You can set the color of borders:

Hello World

Hello World

Hello World

Example

Try it Yourself "

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following three <div> elements have their background color set with RGB, HEX, and HSL values:

The following two <div> elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency):

Example

Try it Yourself "

Learn more about Color Values

You will learn more about RGB, HEX and HSL in the next chapters.

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.attachment_link.readable_text
HTML tables allow web developers to arrange data into rows and columns.

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

Example

A simple HTML table:

Try it Yourself "

Table Cells

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.

tr stands for table row.

You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.

Note: There are times when a row can have less or more cells than another. You will learn about that in a later chapter.

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the<td> tag:

th stands for table header.

Example

Let the first row be table header cells:

Try it Yourself "

By default, the text in <th> elements are bold and centered, but you can change that with CSS.

HTML Exercises

HTML Table Tags

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.headline
Πρότυπο τελικής εργασίας

# data[].attributes.subject
Πρότυπο τελικής εργασίας

# data[].attributes.body
ΕΚΤΟΡΑΣ ΜΠΟΝΤΡΙΝΙ

# data[].attributes.headline
--> Εξάσκηση με επικεφαλίδες, παραγράφους, πίνακες, εικόνες <--

# data[].attributes.subject
--> Εξάσκηση με επικεφαλίδες, παραγράφους, πίνακες, εικόνες <--

# data[].attributes.body
Αρχική εξάσκηση

Τρέξτε το title-site.html στο chrome broswer και επεξεργαστείτε το ίδιο html αρχείο με το notepad++

# data[].attributes.headline
Συνέχεια εξάσκησης με πίνακες, επικεφαλίδες, συνδέσμους, εικόνες

# data[].attributes.subject
Συνέχεια εξάσκησης με πίνακες, επικεφαλίδες, συνδέσμους, εικόνες

# data[].attributes.headline
Μορφορποιήσεις και περιοχές μορφοποιήσεων στην HTHML - DIVs και CSS

# data[].attributes.subject
Μορφορποιήσεις και περιοχές μορφοποιήσεων στην HTHML - DIVs και CSS

# data[].attributes.headline
HTML - Περιοχές Μορφοποίησης - DIVs

# data[].attributes.subject
HTML - Περιοχές Μορφοποίησης - DIVs

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.attachment_link.readable_text
A CSS rule consists of a selector and a declaration block.

CSS Syntax

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

Example

In this example all <p> elements will be center-aligned, with a red text color:

Try it Yourself "

Example Explained

p is a selector in CSS (it points to the HTML element you want to style: <p>).

color is a property, and red is the property value

text-align is a property, and center is the property value

You will learn much more about CSS selectors and CSS properties in the next chapters!

# data[].attributes.attachment_link.description
A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

# data[].attributes.headline
HTML / CSS - Περιοχές/Divs - Χαρακτηριστικά ιδιοτήτων περιοχών

# data[].attributes.subject
HTML / CSS - Περιοχές/Divs - Χαρακτηριστικά ιδιοτήτων περιοχών

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.headline
Πως επιλέγουμε και μορφοποιούμε περιοχές στην σελίδα μας (DIVs) ξεχωριστά το ένα από το άλλο

# data[].attributes.subject
Πως επιλέγουμε και μορφοποιούμε περιοχές στην σελίδα μας (DIVs) ξεχωριστά το ένα από το άλλο

# data[].attributes.attachment_link.readable_text
A CSS selector selects the HTML element(s) you want to style.

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

This page will explain the most basic CSS selectors.

The CSS element Selector

The element selector selects HTML elements based on the element name.

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Note: An id name cannot start with a number!

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

You can also specify that only specific HTML elements should be affected by a class.

HTML elements can also refer to more than one class.

Example

In this example the <p> element will be styled according to class="center" and to class="large":

Try it Yourself "

Note: A class name cannot start with a number!

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

All CSS Simple Selectors

# data[].attributes.attachment_link.description
A CSS selector selects the HTML element(s) you want to style. CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories: This page will explain the most basic CSS selectors. The element selector selects HTML elements based on the element name.

# data[].attributes.body
Αναβαθμισμένο νέο title-site_divs_css site!

Τρέξτε το title-site_divs_css.html στο chrome broswer και επεξεργαστείτε το ίδιο html αρχείο με το notepad++

# data[].attributes.headline
How to Use Google Sites - Tutorial for Beginners

# data[].attributes.subject
How to Use Google Sites - Tutorial for Beginners

# data[].attributes.attachment_link.title
How to Use Google Sites - Tutorial for Beginners

# data[].attributes.headline
Σύνταξη προγράμματος σε Python

# data[].attributes.subject
Σύνταξη προγράμματος σε Python

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.headline
Μεταβλητές σε Python

# data[].attributes.subject
Μεταβλητές σε Python

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.headline
Πράξεις στην Python

# data[].attributes.subject
Πράξεις στην Python

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.headline
Πρόγραμμα μετατροπής από χιλιόμετρα σε μίλια

# data[].attributes.subject
Πρόγραμμα μετατροπής από χιλιόμετρα σε μίλια