Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!---<!DOCTYPE html>


<html lang="en">
  
  


<head>
    
    <meta charset="UTF-8">
    
    
    <title>WEB PAGE STRUCTURE 1</title>
    
    
    <link rel="stylesheet" href="style.css">
    
    
    
    </head> --->

    
    <body>
       <h2>BODY</h2>
    
        
        <header>
          <h1>HEADER<br/>WEB PAGE STRUCTURE</h1>
        
        
        
        </header>
        
        
        <nav>
            
            <ul>
            
              <li><span>NAV</span></li>
              <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">CONTACT</a></li>
                        
                    
            </ul>
            
            
        
        </nav>
        
        <main>
            
        <h2>MAIN</h2>
        
        <article>
            <h2>ARTICLE</h2>
            
            <p>This artice is about Web Page Structure. I have given each elements colours to understand easily how the web page structure works.</p>
            
            <p>All these Elements and Attributes are in fact Containers of other Elements and Attributes and contents we write.</p>
            
            <p>Correct Web Page Structure is very important because an entire web page depends on it or you can say that Web Page Structure is a foundation of Web Page. So, if the web page structure is not correct then the styling of web page will be difficult and out of control, means it will not display as you want it to.</p>
            
            
            <aside>
                <h2>ASIDE</h2>
                <p>This is Aside. Aside is to use for the contents which are related to the topic we currently writing but not the part of the contents which is written.</p>
                <p>This Web page Structure consists of following parts:</p>
                
                <ol>
                
                
                    <li>HEADER</li>
                    <li>NAV</li>
                    <li>MAIN</li>
                    <li>ARTICLE</li>
                    <li>SECTION</li>
                    <li>ASIDE</li>
                    <li>FOOTER</li>
                
                </ol>
            
            
            
            
            </aside>
            
            <p>The colours of these Attribute are:
            </p>
            <ul>
            
            <li><b>BODY=</b> Black Background, White Text and Purple Border.</li>
                <li><b>HEADER=</b> White Background, Black Text and Yellow Border.</li>
            
            <li><b>NAV=</b> Yellow Background, Black Text and Blue Border.</li>
                <li><b>MAIN=</b> Sandybrown Background, Black Text and White Border.</li>
                <li><b>ARTICLE=</b> Aqua Background, Black Text and red Border.</li>
                
                <li><b>SECTION=</b> Blue Background, Black Text and Orange Border.</li>
                
                <li><b>ASIDE=</b> Crimson Background, Black Text and Black Border.</li>
                
                <li><b>FOOTER=</b> Black Background, white Text and Gold Border.</li>
                
            
            
            </ul>
            
            <p>All these colours I gave them to see the behaviour of these attributes and elements when changing their postions, changing their sizes and stylying them with CSS.</p>
            
            <p>I used CSS for all the Stylying such as background colours, Text colours and Borders and positioning the contents.</p>
            
            <p>As my Teacher MR LAWRENCE SVEKIS says that " CSS IS WHERE ALL THE MAGIC HAPPENS ", it is true. Since I started learning CSS I realized that CSS is a real fun and I believe that learning HTML will make you Wizard and when you became a Wizard you need magic spell and that magic spell you get from learning CSS and finally you need a Wand being Wizard so, you will get the Wand after learning JavaScript. </p>
          
            
            <p>MR Lawrence Svekis is my teacher in Udemy. I am learning HTML, CSS and JAVASCRIPTS from him. He is indeed a very good teacher. All I have done in this Web Structure Example I learnt from him. I haven't completed the course as yet as I am very busy. But what ever I have learnt so far I am proud of it.</p> 
                 
            
            <section id=section1> 
                
                <h2>SECTION 1</h2>
                <p class="seperatecontent">This is a block of section. It is similar to Article. We can add as many as sections we want by using ID and Class attributes.</p>
           
                <p>Udemy is an online courses institute where you can learn many thousands of different courses like Website Designing, computer codings,Languages, 3d and 2d games. There are lots of more different courses in Udemy. I really love this Udemy.</p>
                    
            </section>
            
            <section id="section2">
                <h2>SECTION 2</h2>
               <p>This is another section which I have added to see how more than one section works.</p>
                
                <p>Well, to keep these sections separate we need to give IDs or CLASS to them otherwise all the separate sections will merge together and looks like as one section. Therefore, I have given them two different IDs to keep them separate as two different sections. </p>
                <p>This Section 2 Background colour is Brown and Text colour is White. I kept it on its original default position to Left and I pushed the Section 1 to Right.</p>
            
                
            </section>
            
            <p>I have controlled their width, height and position by CSS. This content paragraph you seeing has not given any postion, it is displayed in its original postion side by side of Section 1 and Section 2 because this paragraph is added after the section 2. Therefore, this paragraph started from first available empty space after Section 2.</p>
            
            <p>In order to floating postioning  ASIDE, SECTION 1 and SECTION 2 correctly, I have added DISPLAY:INLINE; to ARTICLE in CSS. Witout adding this INLINE element, all the contents of ASIDE, SECTION 1 and SECTION 2 will overflow from ARTICLE. </p>
                  
                
            </article>
        
        
        
        
        </main>
    
    <footer>
        <h2>FOOTER</h2>
        <p>This is all rights reserved copywrite structure and contents.</p>
        
        
        
        
        </footer>
    
    
    
    
    </body>















</html>
              
            
!

CSS

              
                
body {
/* display: flex; */
  
    background-color: black;
    color: white;
    border: 3px solid purple;
  width: 700px;
}

main {

  padding: 20px 20px 20px 20px;
    background-color:sandybrown;
    color: black;
    border: 3px solid white;
    
}

header {
  padding: 20px 20px 20px 20px;
    background-color:white;
    color: black;
    text-align: center;
    border: 3px solid yellow;
    
    
}

nav {
    padding: 20px 20px 20px 20px;
    background-color:yellow;
    border: 3px solid blue;
    
    
}

nav li {
    
    display: inline;
  padding: 10px;
    

    
 
}

span {
  color: blue;
  font-size:25px;
  font-style: italic;
  font-weight: bold;
  
  
 
  
}

article {
  display: flex;
    display: inline-block;
    background-color:aqua;
    color: black;
    border: 3px solid red;
   width: 600px;
    padding: 20px 20px 20px 20px;
    
    
}

#section1 {
    background-color:blue;
    color: black;
    border: 3px solid orange;
    padding: 5px 5px 5px 5px;
    width: 300px;
    float: right;
}
#section2 {
   float: left;
    width:265px;
    padding: 5px 5px 5px 5px;
    background-color:brown;
    color: white;
    border: 3px solid sandybrown;
}

section .seperatecontent {
    border: 5px solid white;
padding: 5px 5px 5px 5px;
    text-align: center;
}

aside {
    background-color: crimson;
    color: black;
    border: 3px solid black;
    padding: 5px 5px 5px 5px;
    float: right;
    width:300px;
}
footer {
  padding: 20px 20px 20px 20px;
    border: 4px  solid gold;
}
              
            
!

JS

              
                
              
            
!
999px

Console