Web pages in html examples

HTML Examples

A valid HTML document with no A valid HTML document with no element The element defines the document title The element contains style information The element defines a relationship to an external resource The element defines special meta information The element defines client-side JavaScripts The element defines the base URL for all URLs

HTML Scripts

HTML Computercode Elements

HTML Forms

HTML Form Elements

HTML Input Types

HTML Input Attributes

HTML Canvas Graphics

HTML SVG Graphics

HTML Media

HTML Geolocation

HTML Local Storage

HTML Media

More HTML Examples

COLOR PICKER

SUBSCRIBE!

Contacts

If you want to report a bug, as well as make an offer for the site, add an ad or advertisement on the site, do not hesitate to send an email to the admin:

Top Tutorial

Top References

Top Examples

Web Certificates

This site is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
You can also use the Ukrainian version of the site W3Schools українською.
Copyright 1999-2024 by Refsnes Data. All Rights Reserved.
W3Schools is Powered by W3.CSS.

Источник

HTML Basic Examples

In this chapter we will show some basic HTML examples.

Don’t worry if we use tags you have not learned about yet.

HTML Documents

All HTML documents must start with a document type declaration: .

The HTML document itself begins with and ends with .

The visible part of the HTML document is between and .

Example

My First Heading

My first paragraph.

The Declaration

The declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The declaration is not case sensitive.

The declaration for HTML5 is:

HTML Headings

HTML headings are defined with the to tags.

defines the most important heading. defines the least important heading:

Example

This is heading 1

This is heading 2

This is heading 3

HTML Paragraphs

HTML paragraphs are defined with the

tag:

Example

This is a paragraph.

This is another paragraph.

HTML Links

HTML links are defined with the tag:

Example

The link’s destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images

HTML images are defined with the tag.

The source file ( src ), alternative text ( alt ), width , and height are provided as attributes:

Example

How to View HTML Source

Have you ever seen a Web page and wondered «Hey! How did they do that?»

View HTML Source Code:

Right-click in an HTML page and select «View Page Source» (in Chrome) or «View Source» (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose «Inspect» or «Inspect Element» to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.

Источник

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:

Источник

Web pages in html examples

A random photo. (The Hudson River at 125th Street about 2002)

Frank da Cruz
Updated in 2019 and 2021 for HTML5 and «fluidity».

CONTENTS

1. Creating a Web Page
2. HTML Syntax
3. Special Characters
4. Converting Plain Text to HTML
5. Effects
6. Lists
7. Links
8. Tables
9. Viewing your Web page
10. Installing your Web Page on the Internet
11. Where to go from here
12. Postscript: Cell Phones

You can create a Web page on your desktop computer but nobody can see it but you. If your want other people to be able to see your Web pages, you need an account on a computer that has a Web server. Nowadays most people have their own computers on their desks, but normally they don’t have Web servers and anyway you don’t want the whole world coming into your desktop computer to see your web page because (a) it’s not designed for that, and (b) who knows what else they might see. And (c) for security reasons, Web servers should be managed by professionals. Most institutions have big central shared computers for this purpose, which usually have a Unix-like operating system such as Linux. You need an account on one of these so you can put your web pages there. If you don’t have access to such a computer, you can get a low-cost account on a service like Panix.com.

You can still create Web pages on your own computer and look at them with your computer’s Web browser, but for other people to see them, you have to upload them to the «big» computer that has the Web browser. The rest of this document is about how to create your first Web page.

1. Creating a Web Page

This page was typed by hand. Anybody can do this, you don’t need any special «web creation» tools or HTML editors, and the pages you make can be viewed from any browser. To see how this page was made, choose View Source (or View Page Source, or View Document Source) in your browser’s menu (or — in at least Chrome and Firefox — Ctrl-U on your keyboard). A simple web page like this one is just plain text with HTML commands (markup) mixed in. HTML commands (properly called «tags») themselves are plain text.

When you’re just learning and want to experiment, you can do everything on your PC. Create a new directory («folder») for your website, and then put the web-page files (HTML plus any pictures) in it. Use NotePad or other plain-text editor (not word processor) on your PC to create your «home page», a file named index.html , which you can view locally with your Web browser. (You can also use a word processors such as Word or WordPad if you save in «plain text», «text», «text document», or «text document MS-DOS format».) Later I’ll explain how you can install your web site on the Internet.

Once you’ve made your «home page» (index.html) you can add more pages to your site, and your home page can link to them.

2. HTML Syntax

Web pages are written in Hyper Text Markup Language (HTML). HTML has three special characters: < , & , >. An HTML command is enclosed in <. >, for example

, which is a paragraph separator, or («begin bold») and («end bold»). So the following HTML text:

This sentence contains bold text.

A Web page starts with a series of HTML commands, and ends with a few more. The contents go in between:

Источник