About html web page

How TO — Make a Website

Learn how to create a responsive website that will work on all devices, PC, laptop, tablet, and phone.

Create a Website from Scratch

A «Layout Draft»

It can be wise to draw a layout draft of the page design before creating a website:

Navigation bar

Side Content

Main Content

Footer

First Step — Basic HTML Page

HTML is the standard markup language for creating websites and CSS is the language that describes the style of an HTML document. We will combine HTML and CSS to create a basic web page.

Example

My Website

A website created by me.

Example Explained

• The declaration defines this document to be HTML5
• The element is the root element of an HTML page
• The element contains meta information about the document
• The element specifies a title for the document
• The element should define the character set to be UTF-8
• The element with name=»viewport» makes the website look good on all devices and screen resolutions
• The element contains the styles for the website (layout/design)
• The element contains the visible page content
• The element defines a large heading
• The

  element defines a paragraph

Creating Page Content

Inside the element of our website, we will use our «Layout Draft» and create:

• A header
• A navigation bar
• Main content
• Side content
• A footer

Header

A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name:

Then we use CSS to style the header:

.header <
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c; /* green background */
color: white; /* white text color */
>

/* Increase the font size of the element */
.header h1 font-size: 40px;
>

Navigation Bar

A navigation bar contains a list of links to help visitors navigating through your website:

Use CSS to style the navigation bar:

/* Style the top navigation bar */
.navbar overflow: hidden; /* Hide overflow */
background-color: #333; /* Dark background color */
>

/* Style the navigation bar links */
.navbar a float: left; /* Make sure that the links stay side-by-side */
display: block; /* Change the display to block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center; /* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none; /* Remove underline */
>

/* Right-aligned link */
.navbar a.right float: right; /* Float a link to the right */
>

/* Change color on hover/mouse-over */
.navbar a:hover background-color: #ddd; /* Grey background color */
color: black; /* Black text color */
>

Content

Create a 2-column layout, divided into a «side content» and a «main content».

We use CSS Flexbox to handle the layout:

/* Ensure proper sizing */
* box-sizing: border-box;
>

/* Column container */
.row <
display: flex;
flex-wrap: wrap;
>

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side flex: 30%; /* Set the width of the sidebar */
background-color: #f1f1f1; /* Grey background color */
padding: 20px; /* Some padding */
>

/* Main column */
.main <
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
>

Then add media queries to make the layout responsive. This will make sure that your website looks good on all devices (desktops, laptops, tablets and phones). Resize the browser window to see the result.

/* Responsive layout — when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) .row <
flex-direction: column;
>
>

/* Responsive layout — when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) .navbar a float: none;
width: 100%;
>
>

Tip: To create a different kind of layout, just change the flex width (but make sure that it adds up to 100%).

Tip: Do you wonder how the @media rule works? Read more about it in our CSS Media Queries chapter.

Tip: To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.

What is box-sizing?

You can easily create three floating boxes side by side. However, when you add something that enlarges the width of each box (e.g. padding or borders), the box will break. The box-sizing property allows us to include the padding and border in the box’s total width (and height), making sure that the padding stays inside of the box and that it does not break.

You can read more about the box-sizing property in our CSS Box Sizing Tutorial.

Footer

At last, we will add a footer.

.footer <
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd; /* Grey background */
>

Congratulations! You have built a responsive website from scratch.

W3Schools Spaces

If you want to create your own website and host your .html files, try our website builder, called W3schools Spaces:

Источник

HTML Introduction

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

My First Heading

My first paragraph.

Example Explained

• The declaration defines that this document is an HTML5 document
• The element is the root element of an HTML page
• The element contains meta information about the HTML page
• The element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
• The 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 element defines a large heading
• The

  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
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:

This is a heading

This is another paragraph.

Note: The content inside the section will be displayed in a browser. The content inside the 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:

Year	Version
1989	Tim Berners-Lee invented www
1991	Tim Berners-Lee invented HTML
1993	Dave Raggett drafted HTML+
1995	HTML Working Group defined HTML 2.0
1997	W3C Recommendation: HTML 3.2
1999	W3C Recommendation: HTML 4.01
2000	W3C Recommendation: XHTML 1.0
2008	WHATWG HTML5 First Public Draft
2012	WHATWG HTML5 Living Standard
2014	W3C Recommendation: HTML5
2016	W3C Candidate Recommendation: HTML 5.1
2017	W3C Recommendation: HTML5.1 2nd Edition
2017	W3C Recommendation: HTML5.2

This tutorial follows the latest HTML5 standard.

Источник

Introduction to HTML

At its heart, HTML is a language made up of elements, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand HTML.

Looking to become a front-end web developer?

We have put together a course that includes all the essential information you need to work towards your goal.

Prerequisites

Before starting this module, you don’t need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up (as detailed in Installing basic software), and understand how to create and manage files (as detailed in Dealing with files). Both are parts of our Getting started with the web complete beginner’s module.

Note: If you are working on a computer/tablet/other device where you don’t have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

Guides

This module contains the following articles, which will take you through all the basic theory of HTML and provide ample opportunity for you to test out some skills.

Covers the absolute basics of HTML, to get you started — we define elements, attributes, and other important terms, and show where they fit in the language. We also show how a typical HTML page is structured and how an HTML element is structured, and explain other important basic language features. Along the way, we’ll play with some HTML to get you interested!

The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page , links to CSS (if you want to style your HTML content with CSS), links to custom favicons, and metadata (data about the HTML, such as who wrote it, and important keywords that describe the document).

One of HTML’s main jobs is to give text meaning (also known as semantics), so that the browser knows how to display it correctly. This article looks at how to use HTML to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.

Hyperlinks are really important — they are what makes the web a web. This article shows the syntax required to make a link and discusses best practices for links.

There are many other elements in HTML for formatting text that we didn’t get to in the HTML text fundamentals article. The elements here are less well-known, but still useful to know about. In this article, you’ll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.

As well as defining individual parts of your page (such as «a paragraph» or «an image»), HTML is also used to define areas of your website (such as «the header», «the navigation menu», or «the main content column»). This article looks into how to plan a basic website structure and how to write the HTML to represent this structure.

Writing HTML is fine, but what if something goes wrong, and you can’t work out where the error in the code is? This article will introduce you to some tools that can help.

Assessments

The following assessments will test your understanding of the HTML basics covered in the guides above.

We all learn to write a letter sooner or later; it is also a useful example to test out text formatting skills. In this assessment, you’ll be given a letter to mark up.

This assessment tests your ability to use HTML to structure a simple page of content, containing a header, a footer, a navigation menu, main content, and a sidebar.

Found a content problem with this page?

This page was last modified on Jun 30, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Our Team