Page Title

How to Create a Simple Web Page with HTML

This article was co-authored by wikiHow staff writer, Nicole Levine, MFA. Nicole Levine is a Technology Writer and Editor for wikiHow. She has more than 20 years of experience creating technical documentation and leading support teams at major web hosting and software companies. Nicole also holds an MFA in Creative Writing from Portland State University and teaches composition, fiction-writing, and zine-making at various institutions.

The wikiHow Tech Team also followed the article’s instructions and verified that they work.

This article has been viewed 4,543,027 times.

This wikiHow teaches you how to write a simple web page with HTML (hypertext markup language). HTML is one of the core components of the World Wide Web, making up the structure of web pages. Once you’ve created your web page, you can save it as an HTML document and view it in your web browser. Creating an HTML page is possible using basic text editors found on both Windows and Mac computers.

Adding a Head to Your HTML

Type in and press ↵ Enter . This tells the web browser that this is an HTML document. [1] X Research source

Type in and press ↵ Enter . This is the tag that opens your HTML head. The HTML head information that is not usually displayed on your web page. This information can include, the title, meta data, CSS style sheets, and other scripting languages. [2] X Research source

Type and press ↵ Enter . This is the tag to close your head. Your HTML code should look something like this.

 html> head> title>My Web Pagetitle> head> 

Adding a Body and Text to Your HTML

Type in below the closed «Head» tag. This tag opens the body of your HTML document. Everything that goes in the HTML body displays on the web page.

Type in . This is the tag to add a heading to your HTML document. A Heading is large bold text that typically goes at the top of your HTML document.

Add additional headings as you go. There are six different headings that you can create by using the through tags. These create headings of different sizes. For example, to create three different-sized headings in succession, you might write the following:

h1>Welcome to My Page!h1> h2>My name is Bob.h2> h3>I hope you like it here.h3> 

Type

. This is the tag to open a paragraph. Paragraph text is used to display normal sized text.

Type some text. This can be a description for your web page or any other information you wish to share.

Type

after your text and press ↵ Enter . This the tag to close your paragraph text. The following is an example of paragraph text in HTML:

• You can add multiple paragraph lines in a row in order to create a series of paragraphs under one heading.
• You can change the color of any text by framing the text with the and tags. Make sure to type your preferred color into the «color» section (you’ll keep the quotes). You can turn any text (e.g., headers) into a different color with this set of tags. For example, to turn a paragraph’s text blue, you would write the following code:

  Whales are majestic creatures.

• You can add bolds, italics and other text formats using HTML. The following are examples of how you can format text using HTML tags: [3] X Research source

b>Bold textb> i>Italic texti> u>Underlined textu> sub>Subscript textsub> sup>Superscript textsup> 

Источник

How To Set Up Your HTML Project With VS Code

To explore HTML in practice and begin building an HTML website, we’ll need to set up a new project using a text editor. This tutorial series uses Visual Studio Code, a free code editor available for Mac, Windows, or Linux, but you may use whichever code editor you prefer.

After opening your preferred text editor, open up a new project folder and name it html-practice . We’ll use this folder to store all the files and folders we create in the course of this tutorial series.

To create a new project folder in Visual Studio Code, navigate to the “File” menu item in the top menu and select “Add Folder to Workspace.” In the new window, click the “New Folder” button and create a new folder called html-practice as illustrated in the gif below:

Next, create a new file called index.html inside the html-practice folder. We’ll use this file through the tutorial series to experiment with HTML. If you are using Visual Studio Code, you can create a new file by using Right Click (on Windows) or CTRL + Left Click (on Mac) on the html-practice folder, selecting “New File”, and creating the file index.html as illustrated in the gif below:

You now have a project folder and file for exploring HTML. We’ll return to this file in the tutorials ahead.

Debugging and Troubleshooting CSS and HTML

Before we get started with our HTML exercises, be aware that precision is important when writing HTML. Even an extra space or mistyped character can keep your code from working as expected.

If your HTML code is not rendering in the browser as intended, make sure you have written the code exactly. To troubleshoot errors, check for extra or missing spaces, missing or misspelled tags, and missing or incorrect punctuation or characters. Each time you change your code, make sure to save your file before reloading it in the browser to check your results.

A Quick Note on Automatic HTML Support Features

Some code editors—such as the Visual Studio Code editor that we’re using in this series—provide automatic support for writing HTML code. For Visual Studio Code, that support includes smart suggestions and auto completions. While this support is often useful, be aware that you might generate extra code that will create errors if you’re not used to working with these support features. If you find these features distracting, you can turn them off in the code editor’s preferences.

We are now ready to begin learning how the CSS language works. In the next tutorial, we’ll begin exploring how CSS rules are used to control the style and layout of HTML content on a webpage.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Tutorial Series: How To Build a Website with HTML

This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

Источник

HTML Program Examples with Output [Writing Your First HTML Page]

This is the first tutorial on HTML programming. If you want to learn HTML, you are in the right place.

In this tutorial, you will learn all the basics you require to write and run your first HTML code. I will also explain different HTML program examples with output.

Table of Contents

What is HTML?

HyperText Markup Language is popularly known as HTML. It is the language that the web browser understands. Every web developer should learn this language and it is the basic language to start with.

Every web page you see on the internet is written in the HTML language. Even the page you are reading now uses HTML.

So now it might be clear to you, that running HTML code you don’t require installing any software. You can execute the HTML file in any of your internet browsers.

HTML is the common language that is understood by all web browsers today.

Different Types of Tags in HTML

In HTML, everything is written using tags and elements. It is a markup language that means it is used to mark the content in the web document.

An HTML document provides structural and semantic information of a webpage to the browser.

HTML contains a set of tags and elements that together form markup content. An element defines the purpose of a tag.

Start and end tags are used at the beginning and ending of an element.

For example:

The above is an example of the complete element from starting

tag, the content ‘This is a paragraph’ to the ending tag

.

1. Root element tag

The HTML element represents the root of any HTML document thus, is the root element. The root element is present in all the documents and codes. The root element always contains a and a element.

2. Head element tag

element is like a container that contains the information about the document and how it must be perceived by the browser or search engines.

It includes meta, titles, style, link, script, NoScript, and base. How to include these tags in the head? – we will see that in the latter part of the HTML tutorial.

element is one mandatory element within the element. This title is displayed as the page title in the browser tab and also the search engines identify the page with the help of this title. So, each HTML document should compulsorily have a tag.

3. Body element tag

All the content that is visible in a browser is contained within the element. Each HTML document has a element under which all the content is written using different tags.

There can be only one element in a document.

What is Empty HTML element?

You might have wondered seeing some of the HTML tags do not have an ending tag.

Empty elements are those elements that have no content and can be used without a closing tag.

An example of such an element is
that is a break tag, it defines a break between lines. Empty HTML elements can be closed within the opening tag such as
.

Except for the empty elements, the rest all the elements needs a closing tag.

HTML Program Examples with Output using all the Basic Tags:

A cumulative example of all the elements we have described above is below.

     
Homepage Headline
 
This is before the break tag 
and this after the break tag.
  

Note: DOCTYPE is used to identify the type of document as an HTML file.

Don’t bother about the tags inside the body tag. I will tell you about these tags in the next tutorial in detail (link given below the post).

How to Execute an HTML Program File?

There are two ways you can do that.

1. Create a new file with an extension .html in Notepad (Windows) or Vim (Linux) or any of the text editors. Copy the above code and save it in the file. Open the file in any of the internet browsers.
2. Copy the above code and run it in the online HTML code editor.

By executing HTML code, you can visualize and understand each of the HTML basic tags, in a better way.

In this HTML program examples with output, we have learned about the basic HTML elements and their uses. HTML elements define the structure of the web pages and contain a number of HTML tags.

HTML is a very simple language. And it is widely used to write web pages. HTML was developed in various versions and HTML5 is the latest version.

Источник