HTML/CSS Learning Records (5)

HTML < div > and < span >

HTML elements can be combined by <div> and <span>.

HTML Block Elements

Most HTML elements are defined as block-level elements or inline elements.
Block-level elements usually start (and end) with new lines when displayed in browsers.
Examples: <h1>, <p>, <ul>, <table>

HTML inline elements

Inline elements usually do not start with new lines when they are displayed.
Examples: <b>, <td>, <a>, <img>

HTML < div > element

HTML < div > elements are block-level elements, which are containers that can be used to combine other HTML elements.
& l; div > elements have no specific meaning. In addition, because it belongs to block-level elements, browsers display folds around it.
If used with CSS, <div> elements can be used to set style attributes for large content blocks.
Another common use of < div > elements is document layout. It replaces the old-fashioned way of defining layout with tables. Document layout using < Table > elements is not the correct use of tables. The < Table > element is used to display tabulated data.

HTML < span > element

HTML < span > elements are inline elements that can be used as text containers.
<span> Elements have no specific meaning.
When used with CSS, the < span > element can be used to set style attributes for some text.

HTML class

Classifying HTML (setting classes) enables us to define CSS styles for classes of elements.
Set the same style for the same class, or different styles for different classes.

For example:

<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
}   
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>

<p>London is the capital city of England.</p>


</div> 

</body>
</html>

Classified Block Level Elements

HTML < div > elements are block-level elements. It can be used as a container for other HTML elements.
Setting the classes of < div > elements enables us to set the same classes for the same < div > elements:

<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
}   
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>

<p>London is the capital city of England. </p>

</div> 

<div class="cities">
<h2>Paris</h2>

<p>Paris is the capital and most populous city of France.</p>

</div>

<div class="cities">
<h2>Tokyo</h2>

<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>

</div>

</body>
</html>

Categorizing Intra-line elements

HTML < span > elements are in-line elements that can be used as containers for text.
Setting the class of < span > element can set the same style for the same < span > element.
For example:

<html>
<head>
<style>
span.red {
    color:red;
}
</style>
</head>

<body>

<h1>One of mine<span class="red">Important</span>Title</h1>

</body>
</html>

"Important" will be displayed in red font.

HTML Layout

Websites often display content in multiple columns.

HTML layout using < div > elements

Note: <div> elements are often used as layout tools because they can be easily positioned through CSS.

Example: (This example uses four < div > elements to create a multi-column layout)

<html>

<head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;          
}
#section {
    width:350px;
    float:left;
    padding:10px;        
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;      
}
</style>
</head>

<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Welcome to London!
</div>

</body>
</html>

Site Layout Using HTML5

The new semantic elements provided by HTML5 define different parts of the Web page:

HTML5 Semantic Elements

element	Explain
header	Define the header of a document or section
nav	Containers that define navigation links
section	Define sections in a document
article	Define independent self-contained articles
aside	Define content other than content (such as sidebars)
footer	Define the footer of a document or section
details	Define additional details
summary	Define the title of the details element

HTML layout using tables

Note: <table> elements are not designed as layout tools.
The < Table > element is used to display tabulated data.
Using < Table > elements can achieve layout effect, because you can set the style of table elements through CSS.

Keywords: html5

Added by Stoker on Sat, 15 Jun 2019 03:58:11 +0300

Programming VIP