# data[].attributes.body
Εβδομάδα 1 - Εισαγωγή στο διαδίκτυο

# data[].attributes.headline
Email Επικοινωνίας

# data[].attributes.subject
Email Επικοινωνίας

# data[].attributes.body
kpraxis@sch.gr

# data[].attributes.headline
Ιστορία του διαδικτύου

# data[].attributes.subject
Ιστορία του διαδικτύου

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

# 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.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.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 Πίνακες

# data[].attributes.subject
HTML Πίνακες

# 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.attachment_link.readable_text
HTML lists allow web developers to group a set of related items in lists.

Example

Try it Yourself "

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the<li> tag.

The list items will be marked with bullets (small black circles) by default:

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

HTML List Tags

# data[].attributes.attachment_link.description
HTML lists allow web developers to group a set of related items in lists. Try it Yourself " An unordered list starts with the tag. Each list item starts with the tag. The list items will be marked with bullets (small black circles) by default: An ordered list starts with the tag.

# data[].attributes.headline
Εβδομάδα 4-5 - Παράδειγμα HTML

# data[].attributes.subject
Εβδομάδα 4-5 - Παράδειγμα 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.attachment_link.readable_text
CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

This tutorial will teach you CSS from basic to advanced.

Start learning CSS now "

Examples in Each Chapter

This CSS tutorial contains hundreds of CSS examples.

With our online editor, you can edit the CSS, and click on a button to view the result.

CSS Example

body {
background-color: lightblue;
}

Try it Yourself "
Click on the "Try it Yourself" button to see how it works.
CSS Examples

Learn from over 300 examples! With our editor, you can edit the CSS, and click on a button to view the result.
Go to CSS Examples!
Use the Menu

We recommend reading this tutorial, in the sequence listed in the menu.

If you have a large screen, the menu will always be present on the left.

If you have a small screen, open the menu by clicking the top menu sign ☰.

CSS Templates

We have created some responsive W3.CSS templates for you to use.

You are free to modify, save, share, and use them in all your projects.
Free CSS Templates!
CSS Exercises

CSS Quiz

Test your CSS skills with a quiz.
Start CSS 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.

CSS References

At W3Schools you will find complete CSS references of all properties and selectors with syntax, examples, 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.attachment_link.title
Εισαγωγή στην Python 12th Grade Quiz | Quizizz

# data[].attributes.attachment_link.description
Εισαγωγή στην Python quiz for 12th grade students. Find other quizzes for Computers and more on Quizizz for free!

# data[].attributes.attachment_link.title
Δελτίο_Παραγγελίας_Βελτιωμένο

# data[].attributes.attachment_link.description
Access Google Drive with a Google account (for personal use) or Google Workspace account (for business use).