Hello!

HTML Getting started with HTML Hello World

HTML (Hypertext Markup Language) uses a markup system composed of elements which represent specific content. Markup means that with HTML you declare what is presented to a viewer, not how it is presented. Visual representations are defined by Cascading Style Sheets (CSS) and realized by browsers. Still existing elements that allow for such, like e.g. font , «are entirely obsolete, and must not be used by authors» [1] .

HTML is sometimes called a programming language but it has no logic, so is a markup language. HTML tags provide semantic meaning and machine-readability to the content in the page.

An element usually consists of an opening tag ( ), a closing tag ( ), which contain the element’s name surrounded by angle brackets, and the content in between: . content.

There are some HTML elements that don’t have a closing tag or any contents. These are called void elements. Void elements include , , and .

Element names can be thought of as descriptive keywords for the content they contain, such as video , audio , table , footer .

A HTML page may consist of potentially hundreds of elements which are then read by a web browser, interpreted and rendered into human readable or audible content on the screen.

For this document it is important to note the difference between elements and tags:

Elements: video , audio , table , footer

Element insight

The

tag represents a common paragraph.

Elements commonly have an opening tag and a closing tag. The opening tag contains the element’s name in angle brackets (

). The closing tag is identical to the opening tag with the addition of a forward slash ( / ) between the opening bracket and the element’s name (

).

Content can then go between these two tags:

This is a simple paragraph.

.

Creating a simple page

The following HTML example creates a simple «Hello World» web page.

HTML files can be created using any text editor. The files must be saved with a .html or .htm [2] extension in order to be recognized as HTML files.

Once created, this file can be opened in any web browser.

      
Hello World!
 
This is a simple paragraph.
   

Simple page break down

These are the tags used in the example:

Tag	Meaning
	Defines the HTML version used in the document. In this case it is HTML5. See the doctypes topic for more information.
	Opens the page. No markup should come after the closing tag ( ). The lang attribute declares the primary language of the page using the ISO language codes ( en for English). See the Content Language topic for more information.
	Opens the head section, which does not appear in the main browser window but mainly contains information about the HTML document, called metadata. It can also contain imports from external stylesheets and scripts. The closing tag is .
	Gives the browser some metadata about the document. The charset attribute declares the character encoding. Modern HTML documents should always use UTF-8, even though it is not a requirement. In HTML, the tag does not require a closing tag. See the Meta topic for more information.
	The title of the page. Text written between this opening and the closing tag ( ) will be displayed on the tab of the page or in the title bar of the browser.
	Opens the part of the document displayed to users, i.e. all the visible or audible content of a page. No content should be added after the closing tag .
	A level 1 heading for the page. See headings for more information.
	Represents a common paragraph of text.

1. ↑ HTML5, 11.2 Non-conforming features
2. ↑ .htm is inherited from the legacy DOS three character file extension limit.

PDF — Download HTML for free

Источник

Hello, World!

Welcome to Learn HTML, the easiest way to learn HTML & CSS online, interactively.

Learning HTML & CSS is essential for any web developer, and does not require to know how to program using JavaScript.

Before you begin, I would recommend that you start out by downloading an HTML & CSS IDE. My personal preference is to use an IDE by JetBrains. You can download the PyCharm Community Edition for free, which has really good HTML, CSS and JavaScript development support built-in, along with all the goodies that a good IDE provides — source code integration, code refactoring, automatic indentation, syntax highlighting, comparison tool, etc.

Here is a list of HTML, CSS and JavaScript editors you can choose from:

• VS Code (free, recommended) — https://code.visualstudio.com/
• Atom (Free) — https://atom.io/
• JetBrains WebStorm (Commercial) — https://www.jetbrains.com/webstorm/
• Sublime Text (Commercial) — https://www.sublimetext.com/
• Notepad++ (Windows only) — https://notepad-plus-plus.org/download/v7.html

In this tutorial you won’t actually need an IDE, because all coding is done online.

Introduction

HTML (HyperText Markup Language) is a standard developed over the years to convey information over the internet by using «hyperlinks» — or just links as we know them today. As opposed to a PDF, an HTML page is much more dynamic in nature, letting you browse the web by clicking on links and interacting with the page. Links could take you either to a different location within the current page, or to a different page over the internet.

The last version of HTML is HTML 5.0, which has a LOT more capabilities than what the web originally had in mind. HTML 5 is an extremely comprehensive platform that allows creating a high-end user interface together with the power of CSS and JavaScript. HTML 5 is so powerful that it has managed to deprecate Adobe Flash, Microsoft’s Silverlight, and just about all HTML plugins such as video players, Java applets, and more.

So what is the difference between HTML, CSS, and JavaScript? First of all, they can all be encapsulated within an HTML page, meaning that the browser starts by loading an HTML page, and only then it knows what to load from there.

• An HTML page is an HTML document that defines the content of the page by using a special markup similar to XML.
• A CSS stylesheet defines the style of the HTML elements in the page. It is either embeeded within an HTML page or loaded using the
• tag.
• JavaScript is the programming language used to interact with the HTML page through an API called the DOM (Document Object Model) Bindings. In other words, the DOM Bindings are the glue between the programming language and the HTML page that was initially loaded into the browser.

The basics of this tutorial cover HTML and CSS. The advanced sections also assume knowledge in programming and JavaScript. To learn JavaScript, go to https://www.learn-js.org.

We will be using a CSS framework called Bootstrap by Twitter, the most common CSS library out there today. The basic principles of a CSS library is pretty much the same — they are all based on the «grid system», which is an easy way to define the layout of an HTML page — a methodology that was developed over the years in web development.

Your first HTML Page

Let’s start by creating a simple HTML page. An HTML page has the following basic layout:

Let’s start by creating a simple page that contains the phrase «Hello, World!» in the body. The page will also have a title — that thing that shows up in the title of the tab in your browser. The element defines the title of the HTML page.

The tag defines the document type that the browser is going to render. This is used for legacy reasons. If you want to get to the latest version of HTML (HTML5) then it’s recommended to use this tag.

The

element defines a «paragraph», a block of text that has a small amount of spacing in between its top and bottom.

Notice how the tags have a start tag and an end tag denoted with a slash (

). Everything in between is the content of the tag. The content of a tag can usually have additional HTML tags within them.

     
This is an example of a simple HTML page with one paragraph.
   

You may also copy and paste this code into a new file in your text editor or IDE, and save the file as «index.html». The «index.html» file is the default file that a web server will look for when accessing a website. After saving the file, you can double click it to open it with your browser.

Now that we know the basic structure of an HTML page, let’s try it out.

Exercise

1. Add an HTML tag with the text «Hello, World!»
2. Add a paragraph (

   tag) to the body with the text «Hello, World!»

Источник