Featured

How to Create Website Using HTML? Creating Website BY HTML | Web development project 1 | Create site



Published
How to Create Website Using HTML? Creating Website BY HTML | Web development project 1 | Create site
How to Create Website Using HTML? Creating Website BY HTML | Web development project 1 | Create site
How to Create Website Using HTML? Creating Website BY HTML | Web development project 1 | Create site
Learning objectives
In this module, you'll learn how to:

Create a basic web page using HTML
Apply styles to page elements using CSS
Create themes using CSS
Add support for switching between themes using JavaScript
Inspect the website using browser developer tools
Start

Save
Prerequisites
Microsoft Visual Studio Code
Familiarity with one or more programming languages and a markup language such as HTML
A computer that's running one of the following operating systems:
Windows: Windows 7, 8, 10
Mac: macOS 10.9 or later
Linux: Ubuntu, Debian, Red Hat, Fedora, or SUSE
Exercise - Add basic HTML to your web app
Completed
100 XP
10 minutes
At the moment, your website has an empty HTML file. Let's add some code! The goal is to use hypertext markup language (HTML) to describe the web page your customers' browsers should display. Wouldn't it be nice to have a starting template? Editors can conveniently fill in some of the typical boilerplate or HTML structure for you.

In this unit, you add basic HTML content, open the HTML page in a browser, and get your first look at the developer tools.

Add some HTML code
Visual Studio Code provides basic support for HTML programming out of the box. There is syntax highlighting, smart completions with IntelliSense, and customizable formatting.
There have been different versions of HTML. The document type indicates this is HTML5 code.

While we aren't going to delve deeply into the meaning of all the HTML elements, we will point out a few important items. The meta tag indicates metadata information that won't typically be visible to the viewer unless they view the source code in their browser. Meta elements or tags provide descriptive information about the webpage. For example, they help search engines process which information in your webpages to return in search results.

The character set (charset) for UTF-8 may seem insignificant, but is crucial for establishing how computers interpret characters. If the metadata for the character set is missing, that can lead to compromised security. There's quite a bit of history and technical information behind the charset attribute, but important takeaway from this exercise is that the VS Code boilerplate provides some sensible defaults.

Edit the head
The metadata defines data about the HTML document, such as character set, scripts, and which browser the webpage opens in.

The title of a webpage appears at the top of a browser window, and is significant in many ways. For example, the title is used by and displayed in search engines. Let's add a title.

Open your website in Visual Studio Code, then open the index.html file by selecting the index.html file in Explorer.

In the index.html page, type html:5, and then select Enter. HTML5 template code is added to the file.

Note
Category
Web design
Be the first to comment