How do I make a container box in HTML? — example

 
 
 
 
 
 

 
 
 
your container title here
 
Your text here
 
 
Another text : - Grape silver beet collard 
greens avocado quandong fennel gumbo black-eyed 
pea watercress potato tigernut corn groundnut. 
Chickweed okra pea winter purslane 
coriander yarrow sweet pepper radish garlic 
brussels sprout groundnut summer purslane 
earthnut pea tomato spring onion azuki bean gourd. 
Gumbo kakadu plum komatsuna 
black-eyed pea green bean zucchini gourd 
winter purslane silver beet rock melon 
radish asparagus spinach. -
 
 
 

 
 
 
 
 
 

 
 
 
your container title here
 
This is a paragraph
 
under the containe box
 
Your text here
 
 
Another text : - Grape silver beet 
collard greens avocado quandong fennel gumbo black-eyed 
pea watercress potato tigernut corn groundnut. 
Chickweed okra pea winter purslane 
coriander yarrow sweet pepper radish garlic 
brussels sprout groundnut summer purslane 
earthnut pea tomato spring onion azuki bean gourd. 
Gumbo kakadu plum komatsuna 
black-eyed pea green bean zucchini gourd 
winter purslane silver beet rock melon 
radish asparagus spinach. -
 
 
 

with a The container will affect all your_text under

> your_text

.

Also, we have container tags what it is:

Example — How do «containers» work in HTML?
This is an editor and you can change parameters in the box below

 
 
 
 
 
 

 
 
 
your container title here
 
This is a paragraph
 
under the containe box
 
Your text here
 
 
Another text : - Grape silver beet collard 
greens avocado quandong fennel gumbo black-eyed 
pea watercress potato tigernut corn groundnut. 
Chickweed okra pea winter purslane 
coriander yarrow sweet pepper radish garlic 
brussels sprout groundnut summer purslane 
earthnut pea tomato spring onion azuki bean gourd. 
Gumbo kakadu plum komatsuna 
black-eyed pea green bean zucchini gourd winter 
purslane silver beet rock melon 
radish asparagus spinach. -
 
 
 

container class, fluid, tags, elements, box, border, template, row padding, responsive, size, width, center, table, background color
HTML container — html tutorial

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

Find here examples of creative and unique website layouts.

Find here examples of creative and unique website CSS HTML menu.

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

Find here examples of creative and unique website layouts.

Find here examples of creative and unique website CSS HTML menu.

Источник

W3.CSS Containers

This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown.

The Container Class

The w3-container class adds a 16px left and right padding to any HTML element.

The w3-container class is the perfect class to use for all HTML container elements like:

Containers Provides Equality

The w3-container provides equality for all HTML container elements:

• Common margins
• Common paddings
• Common alignments
• Common fonts
• Common colors

To use a container, just add a w3-container class to any element:

Example

To add a color, just add a w3-color class:

Example

Headers and Footers

The w3-container class can be used to style headers:

Header

Example

Example

Header

There is no difference in the way W3.CSS treats and elements.

The w3-container class can be used to style footers:

Footer

Footer information goes here

Example

Example

Many web pages use elements instead of and elements.

Articles and Sections

The w3-container class can be used to style and elements:

Example

Paris

The Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.

Tokyo

Tokyo is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.

Many web pages uses elements instead of and elements.

Web Page Example

Header

A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)

Footer

Example using HTML elements

Example using HTML semantic elements

Header

A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)

Container Padding

The w3-container class has a default 16px left and right padding, and no top or bottom padding:

Example

Normally you will not have to change the default padding of a container, because paragraphs and heading provide margins that will simulate padding.

I am a Heading

Example

Источник

Container and Empty Tags in HTML

HTML uses predefined tags that tell the browser how to display the content. Tags are nothing but some instructions that are enclosed in angle braces(i.e., <>). Tags are used in many places of the webpage but many users are often confused about some tags whether it is a container or an empty tag. They get this confusion because they don’t know for what tag there should be an ending tag along with the opening tag or not. There are two types of tags in HTML:

Now, let us see the definitions and examples of the most commonly used HTML container and empty tags.

Container tags

Container tags are generally divided into three parts, i.e., opening tag, content(which will display on the browser), and closing tag. In the content part, they can also contain some other tags. These opening and closing tags are used in pairs which are start tag and end tag, which is often called ON and OFF tags. If you forget to close the container tag, the browser applies the effect of the opening tag until the end of the page. So be careful while working with container tags. The majority of tags present in HTML are container tags.

Some commonly used container tags are:

1. Essential Tags: Following tags are used to create the structure of the webpage:

• ….: This marks the beginning and ending of the webpage also it tells that the document is an HTML document. This contains all other tags in between these tags which are considered for making a webpage.
• …: This tag is used to define the head part of the document which contains the information related to the webpage.
• : This tag stores the description of the web page, whatever given in these tags appears on the tab name while opened by the browser. It is described in the head tag.
• ….: This tag is used to display all the information or data, i.e, text, images, hyperlinks videos, etc., on the webpage to the user.

2. Headings: Following tags are used for headings:

….

to

…

: It is used for including headings of different sizes ranging from 1 to 6.

3. Text formatters: Following tags are used for text formatting:

• ….

  : When paragraphs are needed to be included, this tag is used

• ….: Makes the contained text to bold.
• …: Makes the contained text to italic.

4. HyperLinks: Following tag is used to define a hyperlink in the webpage:

…: When we link some other webpages we add the hyper links to other webpages using this …tag.

5. Button tag: Following tag is used to create a click button:

…: This is used in many ways but mainly used to manipulate done by adding events and many more.

6. Division tag: Following tag is used to create a division:

….

: This defines a section in a document. The webpage can be divided to different sections using the

….

tag.

7. Iframe tag: Following tag is used for inline framing:

: When some other document is to be embedded like some video or image into HTML we use this tag.

8. Navigation tag: Following tag is used to set a navigation link:

: Defines a navigation bar that contains a set of menu or a menu of hyperlinks.

9. Script tag: Following tag is used to add JavaScript code to the webpage:

: This contains the javascript code that adds interactivity to the webpage.

10. Lists: Following tags are used to write data in the form of ordered and unordered lists:

Empty Tags

The tags that do not contain any closing tags are known as empty tags. Empty tags contain only the opening tag but they perform some action in the webpage.

Some commonly used empty tags are:

1. 
   : Inserts a line break in a webpage wherever needed.
2. 
   

   ---

   : Inserts a horizontal line wherever needed in the webpage.

3. : This tag is used to display the images on the webpage which were given in the src attribute of the tag.
4. : This is mainly used with forms to take the input from the user and we can also define the type of the input.
5. : When we store our CSS in an external file this can be used to link external files and documents to the webpage and it is mainly used to link CSS files.
6. : Contains all metadata of the webpage. Metadata is the data about data and is described in the head tag.
7. : When an external media source is needed to be included in the webpage. source tag is used to insert any media source like audio, video etc… in our webpage.

This example demonstrates the use of container and empty tags:

Источник

Читайте также:  Null character in php