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.

Читайте также:  Gui для windows на java

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

PDF — Download HTML for free

Источник

Html Tutorial Hello World

In this tutorial, you will learn how to create a simple hello world page with HTML. Firstly, let explains some of the HTML basics.

  1. HTML is stands for Hyper Text Markup Language
  2. HTML is a text file which consists a set of markup tags like ( ).
  3. Almost all of the markup tag has start tag and close tag . Close tag is start with a “/”.
  4. The markup tags is just like a command to tell web browser (Firefox or Internet Explorer) what should do.
  5. HTML file must have htm or html as file extension.
  6. HTML file is not case sensitive. , or are all same tag.
  7. HTML file can be edit with any text editor like notepad or wordpad in windows , vi or emacs in unix or linux.

Steps to create HTML page

Let start to create a classic “Hello world” HTML file.

1. Text Editor

Open your favorite text editor, e.g Notepad. Create an empty text file.

2. HTMP Code

Copy and paste the following HTML code into your newly open text file.

  
Hello world

html-tutorial-hello-world-notepad

3. Save It

Click File, Save it with a HTML file extension, e.g “anynameyoulike.html”

html-tutorial-hello-world-save-as

4. Demo

Double click to view it. (Or open the newly saved HTML file with your favor Internet browser).

html-tutorial-hello-world-view-it

Explanation of code

  1. tag is tell internet browser this file is a start and end of the HTML file document.
  2. Text between tag is for HTML header information, which is not display in internet browser.
  3. Text between will display in left-up corner in internet browser, it’s web page title.
  4. Text between will display as content in internet browser.
mkyong

Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Источник

Hello World in HTML

This simple tutorial presents «Hello World» in HTML code as a starting point for a web page. Getting a system to display the Hello World message is considered the basic starting point when writing code. It is used to prove a system is up and running. From the Hello World starting point more useful code can be written. When hand coding a web page write it with the latest HTML standard in mind, widely referred to as HTML5. The Hello World example web page given here is for HTML5 and later versions.

An HTML Hello World Example, the Basic HTML Web Page

The basic Hello World web page is a template to be used to start any HTML page. Because this example is so straightforward the complete HTML Hello World page is shown and then each part explained.

Using a text editor (e.g. Notepad on Windows) add the following to a file and save it, giving it the name hello-world.html. Some text editors, for example Notepad++ for Windows, color code the text to make it easier to read.

     Hello World! 

Open the new HTML file in a web browser.

Hello World in HTML

Understanding the Hello World HTML Code

What does the first line mean?

This tells the browser, or other software or system, processing the web page that it is a standard HTML5 web page. Using a different setting for !DOCTYPE other than html tells the browsers or system that the web page should be processed as it would have been in older browsers, this is refered to as Quirks Mode. For ease of future maintenance write web pages to support the standard HTML5 mode, hence use !DOCTYPE html.

Everything between the second line, the html start tag:

And the last line, the end tag for the start tag:

Is the actual web page. The web page is made up of content and tags. Tags tell the browser how to process the web page content. A tag starts with (the less than character) and ends with > (the greater than character) and usually come as a pair. The html pair are the tags to wrap the whole web page. You can spot an end tag because it starts with . There are many types of HTML tags. How many HTML tags are there? There are over 100 HTML tags available to control what is displayed on a web page, some used a lot more than others.

Within the html tags the web page has two major parts, the head and the body. The head has items that support how the content is processed, whilst the body will hold the actual information to be displayed on the web page.

In the basic web page in this tutorial the head only has a title which is displayed at the top of the browser (usually on the tab displaying the page). Other things that can appear in head include links to other files, data tags called metadata (added with meta tags) and script tags (for JavaScript code that is run by a browser when the web page is displayed).

All web page content is placed in between body tags, here simply the words Hello World!. These are then displayed in the browser. Other types of content can be displayed such as images, videos and lists.

Whitespace Handling

When authoring an HTML5 web page it is worth learning about how spacing works in HTML. It is not the same as writing a document in a text editor or word processor. For example this content:

 Hello World! And Hello Again! 

HTML Removes Whitespace

This is because any whitespace before and after content is removed and multiple whitespace between content is reduced to single spaces, so all newlines and tabs get removed. To get this effect:

HTML Simple Positioning

You could separate the content with p (paragraph) tags and then position the paragraphs using a style. Like this (other ways to achieve the same effect are possible):

     

Hello World!

And Hello Again!

The HTML5 Specifications

HTML5 web pages work well on all modern browsers and systems, whilst still displaying content in older web browsers (where the latest HTML5 features are ignored). The HTML specification is available as a continuously evolving document, a living standard, by the Web Hypertext Application Technology Working Group (WHATWG). Alternatively the HTML spec from the World Wide Web Consortium (W3C) is a point release, currently at version 5 (hence HTML5), with the next version of HTML5, HTML version 5.1, in the pipeline. The WHATWG version intends to reflect what is, or should be, happening in the latest browsers. Whilst the W3C spec provides a stake in the ground HTML version. There are differences between the specs but either can be used. Here’s the HTML5 logo:

Summary

This article shows you the most basic of web pages, copy the sample code when you need to create a new web page. There is a plenty to learn on HTML coding and plenty of resources available from which to learn, try Web Development at the Mozilla Developer Network or w3schools.com. For a Hello World HTML example that displays an image and list see hello-world.html, use the browser’s context menu (normally right-click) and select the option to view the source code.

Author: Daniel S. Fowler Published: 2013-04-09 Updated: 2016-03-22

ShareSubmit to TwitterSubmit to FacebookSubmit to LinkedInSubmit to redditPrint Page

Do you have a question or comment about this article?

(Alternatively, use the email address at the bottom of the web page.)

↓markdown↓ CMS is fast and simple. Build websites quickly and publish easily. For beginner to expert.

Free Android Projects and Samples:

Источник

Оцените статью