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

Источник

2 Ways to Make HTML Table Rows Clickable

In this tutorial, we’ll describe two quick ways to make table rows clickable. We’ll start with an HTML/CSS approach. Then, we’ll continue with another one.

HTML (Hypertext Markup Language)

HTML is the structural coding language we use to build web pages. Some people refer to HTML as being the “building blocks of the web”.

HTML Element: details

The HTML details element represents a “disclosure widget” from which the user can obtain additional information or controls. It allows you to create.

HTML Element: canvas

The HTML canvas element allows you to create interactive graphics on a web page using JavaScript. It provides a drawing surface for JS code to create dynamic.

HTML Element: table

table is an HTML element that displays data in tabular format. HTML tables use rows and columns to make data and relationships easy to interpret.

Vertical and Horizontal Scrolling With fullPage.js

These days more and more sites are designed based on the single-page approach (known as single-page or one-page sites). In this tutorial, we’ll explore how.

HTML Element: col

The HTML col element defines a column within a table, and is often used in combination with the colgroup element. It is used to apply properties to all cells.

HTML Element: bdo

The HTML bdo element is used to override the current directionality of text, which can be helpful in cases where content needs to be displayed in a direction.

HTML Element: colgroup

The HTML colgroup element defines a group of columns within a table. It is used to specify properties for a column or a group of columns in a table using the.

HTML Element: caption

The HTML caption element represents the title of a table and must be the first child of a table element. A caption can introduce context for a table, making.

Make A FullScreen Button with JavaScript (for Video and Other HTML Elements)

In this tutorial, you’ll learn how to make an element enter fullscreen mode on any browser using the JavaScript FullScreen API.

17+ Best New HTML Templates for Your Blog

Looking for blog website templates to start your next project? In this roundup I’ll show you some of the best new HTML templates for your blog, available.

Источник

Create a Ladybug Icon With CSS and a Single Div Element

It’s possible to build a surprising amount of graphics with CSS alone. Let’s create a cute ladybug icon with just a single div element!

Building a 5-Star Rating System With jQuery, AJAX, and PHP

This tutorial will teach you how to create a five-star rating system with the help of jQuery, AJAX, and PHP.

Input Element Pseudo-Classes to Improve User Experience

This tutorial will show you how to use pseudo classes available for form input elements. You can use these classes to select valid, invalid, required, or.

How to Create Diagonal Lines With CSS

This tutorial will teach you three different ways of creating diagonal lines in CSS. We will also discuss which of these methods you should use in different.

Infinite Scroll Pagination With JavaScript and a REST API

Learn how to implement Infinite Scroll pagination in JavaScript. Handle the scroll event in the front-end of your application to load the next page from a.

Extend HTML With Custom Tags and the Shadow DOM

This is a continuation in our custom tags series. Learn all about the Shadow DOM and how you can use it to create custom elements in HTML.

HTML & CSS for Beginners (MEGA Free Course!)

In this free course, you’ll learn how to code with modern HTML and CSS, the main building blocks of any website. If you want to become a successful web.

JavaScript Form Validation (Practical Tutorial)

In this tutorial, we’ll build a simple login form and add front-end validation with vanilla JavaScript. The overarching goal is to provide helpful feedback.

Create a Dismissible Alert With JavaScript (and localStorage)

Creating an eye-catching alert is a great way to warn your website’s readers of an issue or a good promotion they shouldn’t miss. Today, we’ll build one from.

The Easiest Way to Create Vertical Text With CSS

Earlier this morning, I needed to create vertical text for a project I’m working on. After trying out a couple of ideas, I took to Twitter to find what sorts.

30 Web Development Best Practices for Beginners

HTML, CSS and JavaScript are the three key web languages. In this post, I’ll share 30 tips for best practices when you’re coding you webpages or web apps.

HTML5 Audio and Video: What You Must Know

One of the major advantages of the HTML5 video element is that, finally, video is a full-fledged citizen on the Web. It’s no longer shunted off to the.

Источник

HTML Tutorial

In this HTML tutorial, whether you’re a beginner or a professional, this tutorial covers everything you need to know to learn HTML, from the basics to advanced. Providing step-by-step instructions for easy learning, it will help you become proficient in HTML.

HTML stands for HyperText Markup Language. It is used to design the web pages. With the help of HTML, you can create a complete website structure. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages and markup language defines the text document within the tag that define the structure of web pages.

Why HTML is used?

HTML is used to create the structure of web pages and website that are displayed on the Internet. HTML basically contains Tags and Attributes that are used to design the web pages. Also, we can link multiple pages using Hyperlinks.

HTML Basic Structure of Web Page

The basic structure of an HTML page is laid out below. It contains the essential building-block elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all web pages are created.

HTML Basic Tags

Example: This is the basic example of HTML that display the heading and paragraph content.

HTML

         
Welcome to GeeksforGeeks
 
A computer science portal for geeks
   

Complete References

HTML Interview Questions

HTML Practice Quiz Sets

HTML Cheat Sheet

HTML Cheat Sheet is a simple, and quick reference list of basic HTML elements and attributes. The purpose of this Cheat Sheet is to provide you with some quick accurate ready-to-use code snippets and necessary HTML tags and attributes.

HTML Examples

HTML examples contains a wide collection of HTML programming examples. The HTML examples are categorized based on the topics including hyperlinks, forms, tables, frames, and many more.

Learn more about HTML

• Introduction
• HTML5 Introduction
• HTML Hex Color Codes
• HTML Charsets
• HTML URL Encoding
• Most commonly used HTML tags
• Structure of HTML Document
• HTML Form Design
• Design your First Website in Just 1 Week
• Simple Portfolio Website Design
• Design a Portfolio Gallery
• Design a web page
• Top 10 Projects For Beginners
• 10 Best HTML Coding Practices You Must Know
• Design a Login Form to an Image using HTML and CSS

Источник