Share

Welcome to My HTML5 Tutorial-2! 

If you have already studied my HTML5 Tutorial-1 then this tutorial is nothing complex. We will use the codes from the previous tutorial to continue our HTML5 tutorial. In this tutorial I have add a new <div> tag to incorporate flexible box model. This flexible box model will give your website a kind of elastic property. Flexible box model is supported by most the latest featured browsers like Google Chrome and Microsoft Edge. For this flexible box model your website will get some flexibility to get the shape of your current window and it will shrink and enlarge its shape towards your defined direction.
HTML5 Flexible Box Model


tutorial.html
  1.  <!doctype html>
  2. <html lang="en">
  3. <head>
  4.                 <meta charset="utf-8"/>
  5.                 <title>Luin's Website</title>
  6.                 <link rel="stylesheet" href="main.css">
  7. </head>
  8. <body>
  9.                 <div id="big_wrapper">
  10.                                 <header id="top_header">
  11.                                                 <h1>Luin's HTML5 Tutorial</h1>
  12.                                 </header>
  13.                                 <nav id="top_menu">
  14.                                                 <ul>
  15.                                                                 <li>Home</li>
  16.                                                                 <li>About</li>
  17.                                                                 <li>Contact</li>
  18.                                                 </ul>
  19.                                 </nav>
  20.                                 <div id="new_div">
  21.                                 <section id="main_section">
  22.                                                 <article>
  23.                                                                 <header>
  24.                                                                                 <h2>The First Article</h2>
  25.                                                                 </header>
  26.                                                                 This is the very first article of my website. This article is just a demo of articles I am going to post in future.
  27.                                                                 <footer>
  28.                                                                                 Written by-Mohammad Luin | Date-15/12/15
  29.                                                                 </footer>
  30.                                                 </article>
  31.                                                 <article>             
  32.                                                                 <header>
  33.                                                                                 <h2>The Second Article</h2>
  34.                                                                 </header>
  35.                                                                 This is the very second article of my website. This article is just a demo of articles I am going to post in future.
  36.                                                                 <footer>
  37.                                                                                 Written by-Mohammad Luin | Date-15/12/15
  38.                                                                 </footer>
  39.                                                 </article>
  40.                                 </section>
  41.                                 <aside id="recent_post">
  42.                                                 <h2>Recent Posts</h2>
  43.                                                 The First Article <br/>
  44.                                                 The Second Article
  45.                                 </aside>
  46.                                 </div>
  47.                                 <footer id="the_footer">
  48.                                                 Copyright Luin 2015
  49.                                 </footer>
  50.                 </div>
  51. </body>
  52. </html>

Description:
20. Introducing new <div> tag for creating flexible box.
46. Closing the new <div> tag.


main.css
*{
                margin: 0px;
                padding: 0px;
}

h1{
                font: bold 20px Tahoma;
}

h2{
                font: bold 14px Tahoma;
}

header, section, footer, aside, article ,nav, hgroup{
                display: block;
}

body{
                width: 100%;
                display: -webkit-box;             /* You have to alter display type to "-webkit-box" to insert body within the flexible box  */
                -webkit-box-pack: center;     /* Use this property to pack your boxes in the center of the website  */
}

#big_wrapper{
                max-width: 1000px;
                margin: 20px 0px;
                display: -webkit-box;              /*  Display type to insert flexible boxes */
                -webkit-box-orient: vertical;  /* This property indicates where and how the block elements will be placed in times of window enlargement and shrinking  */
                -webkit-box-flex: 1;              /* This property means the box is flexible and if we would use '0' instead of '1' then it would be fixed  */
}

#top_header{
                background: yellow;
                border: solid 3px black;
                padding: 20px;
}

#top_menu{
                border: red;
                background: blue;
                color: white;
}

#top_menu li{
                display: inline-block;
                list-style: none;
                padding: 5px;
                font: bold 14px Tahoma;
}

#new_div{
                display: -webkit-box;                  /* Display type to insert flexible boxes  */
                -webkit-box-orient: horizontal;  /* Elements within this box will be placed horizontally */
}

#main_section{
                border: 1px solid red;
                -webkit-box-flex: 1;           /* This property means the box is flexible and if we would use '0' instead of '1' then it would be fixed  */
                margin:20px;
                padding: 20px;
}

article{
 background: #B6B3B2;  /* Background color of each article */
 border: 1px solid red;     /* Article border size and color */
 padding: 20px;
 margin-bottom: 15px;
}

#recent_post{
                border: 1px solid red;
                width: 220px;
                margin: 20px 0px;
                padding: 20px;
                background: #66CCCC;
}

#the_footer{
                text-align: center;
                padding: 20px;
                border-top: 2px solid green;
}

Result:

If you are looking for a way to practice MySql query creating a database for free then this post hopefully be helpful for you. You can create database in your own PC by creating server. It is very simple to turn a computer into a server. There are several way to do it but I will show you the most simple one. I will show you how to create a portable server by the help of XAMPP software. This software is totally free. By the help of this software you can create MySql server and you can practice MySql in your own PC. Here I have shown a few steps of the overall process and for your simplicity I have attached a sample SQL table which you can collect for your database.

Steps:


1. At first you have to download and install the suitable version of XAMPP for your PC from here.
2. After completing the installation run the programme. The UI should look like this-
XAMPP UI

3. Now, click on start button of Apache and MySql. Result-
Start Apache and MySql

4. Minimize the XAMPP window and open your browser and type- http://localhost and hit enter.
localhost

5. To create a MySql database click on phpMyAdmin tab. From the left panel click on new to create a new database.
phpMyAdmin

6. Now from the right panel give a name to your database and select the Collation as- utf8mb4_unicode_ci then press Create. Example-
Name DB

7. Your new database is created and ready to create a table. To create a table click on new under the name of your database.
Create Table


8. In the new window create number of columns as required, name them, select their type, set length and set a primary key for your table. An example is shown below-
Make column
9. Now, click on Save button at the below right corner. Then a new will appear where you will find your newly created table structure. Now, if you have any sql file import that or insert your table data clicking on Insert tab.
Insert Data

10. From the new window insert as many data as you want and press go. Example-
Insert Data

11. Every time you want to add data go to insert tab. You are done creating a database. Now you can practice MySql query going to the SQL tab.
Sql Query Window

Notice:

Some of you might face a problem after installing XAMPP. You might see an error notification like this-
XAMPP Error
In this case, press on Windows+R button and write- services.msc, run that. From the new window look for World Wide Web Publishing Service. Stop that service from running and close your XAMPP.
World Wide Web Publishing Service
Now, re-open the XAMPP.  I hope there won't be any problem now.



Welcome to My HTML5 Tutorial-1! 

Index: Creating a Basic Template | Setting up The Body | Styling The Website Layout

Before jumping into the deep I would like to suggest you to go through my post on Basics of HTML for the better understanding of this tutorial. We will use the below sample HTML5 website codes for this "HTML5 Tutorial-1". Before going to the description I would like to suggest you to open two new tabs in your notepad or two files naming html5.html and main.css, and keep them in the same directory. Do not copy-paste the whole file/codes at the beginning that I have mentioned below. I have described each part of html5.html and main.css below, understand them first and then write those codes in your notepad part by part for execution.

html5.html

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>Luin's Website</title>
 <link rel="stylesheet" href="main.css">
</head>
<body>
 <div id="big_wrapper">
 <header id="top_header">
 <h1>Luin's HTML5 Tutorial</h1>
 </header> <nav id="top_menu">
 <ul>
 <li>Home</li>
 <li>About</li>
 <li>Contact</li>
 </ul>
 </nav>
 <section id="main_section">
 <article>
 <header>
 <h2>The First Article<h2>
 </header>
 This is the very first article of my website. This article is just a demo of articles I am going to post in future.
 <footer>
 Written by-Mohammad Luin | Date-15/12/15
 </footer>
 <header>
 <h2>The Second Article<h2>
 </header>
 This is the very second article of my website. This article is just a demo of articles I am going to post in future.
<footer> Written by-Mohammad Luin | Date-15/12/15
</footer>
</article>
 </section>
 <aside id="recent_post">
 <h2>Recent Posts</h2>
 The First Article <br/> The Second Article
 </aside>
 <footer id="the_footer"> Copyright Luin 2015 </footer>
 </div>
</body>
</html>

main.css

*{
 margin: 0px; padding: 0px;
}
h1{
 font: bold 20px Tahoma;
}
h2{
 font: bold 14px Tahoma;
}
header, section, nav, footer, aside, article, hgroup{
 display: block;
}
body{
 text-align: center;
}
#big_wrapper{
 border: 1px solid black; width: 1000px; margin: 20px auto; text-align: left;
}
#top_header{
 background: yellow; border: 1px; padding: 20px;
}
#top_menu{
 background: blue; color: white;
}
#top_menu li{
 display: inline-block; list-style: none; padding: 5px; font: bold 14px Tahoma;
}


Creating a Basic Template



html5.html
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.                 <meta charset="utf-8"/>
  5.                 <title>Luin's Website</title>
  6.                 <link rel="stylesheet" href="main.css">
  7. </head>
  8. <body>
  9.                 <div>
  10.                                 <header ></header>
  11.                                 <nav></nav>
  12.                                 <section></section>
  13.                                 <aside></aside>
  14.                                 <footer></footer>
  15.                 </div>
  16. </body>
  17. </html>


Description:
1. HTML5 must start with this tag to let browsers know that this is a HTML5 website.
2. You have to define the language of your website using lang attribute.
3. Every website possess <head> portion. This head portion contains title of the website, css styles, scripts. The elements that remain inside the head remain hidden ie, the users cannot see only the developer can see.
8. <body> is the website's visual portion. It contains texts, images, paragraphs and all the visual elements that a user can see.
4. Meta character set for the website.
5. Title of the website.
6. Here link is the reference to outside file. The rel attribute here means relative which defines how it is related with the website. The file main.css is our seperate css file where we will write css codes for the website.
10. to 14. are different parts of body.
10. This is header of your website where the logo and the title, sub title will stay.
11. This is your website's navigation tag. You need it create navigation bar.
12. Contents of a website goes to the section.
13. <aside> tag is the sidebar of your blog. It holds the contents that you want to keep in the left-side or right-side of your blog.

Setting up The Body


html5.html
  1. <body>
  2.     <div>               
  3.                 <header>
  4.                                 <h1>Welcome to My Website!</h1>
  5.                 </header>
  6.                 <nav>
  7.                                 <ul>
  8.                                                 <li>Home</li>
  9.                                                 <li>About</li>
  10.                                                 <li>Contact</li>
  11.                                 </ul>
  12.                 </nav>
  13.                 <section>
  14.                                 <article>
  15.                                                 <header>
  16.                                                                 <h5>About HTML5</h5>
  17.                                                 </header>
  18.                                                 HTML means Hyper Text Markup Language. We use this language to develop website.
  19.                                                 <footer>
  20.                                                                 Writer: Mohammad Luin | Date:14-12-15
  21.                                                 </footer>
  22.                                 </article>
  23.                 </section>
  24.                 <aside>
  25.                                 <h4>Updates</h4>
  26.                                 Luin has bought a new car.
  27.                 </aside>
  28.                 <footer>Copyright Luin 2015</footer>
  29.                 </div>
  30.  </body>
Description:
4. Our title, subtitle goes to header. Here <h1> is the header tag.
7. Unordered list.
8. to 10. are lists of navigation tab.
13. All the important stuffs like articles goes in between the <section> tag.
14. This is the article tag where your will articles will go.
16. This is the header of your article.
18. This is your article.
19. This is the footer of your article. This section will contain who wrote the article and when.
25. You aside contains will go in between the <aside> tag.
28. This is the footer of your website.

main.css

 *{
margin: 0px;
padding: 0px;
}
h1{
font: bold 20px Tahoma;   /* Styling the header text */
}
h2{
font: bold 14px Tahoma;   /* Styling the header text */
}
header, section, nav, footer, aside, article, hgroup{
display: block;      /* Display type for all sections of body */
}
body{
text-align: center;   /* Placement of websites body */
}
#big_wrapper{
border: 1px solid black;
width: 1000px;  /* Total width of the website */
margin: 20px auto;
text-align: left;
}
#top_header{
background: yellow;
border: 1px;
padding: 20px;
}
#top_menu{
background: blue;
color: white;
}
#top_menu li{
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px Tahoma;
}

Result:
Layout without styling


Styling The Website Layout

Now, we will work with both the tab html5.html and main.css to give our website a nice look. To give different look to different parts of website you have to set unique id for each part of your website's body. For example-

html5.html
  1. <body>
  2.                 <div id="big_wrapper">
  3.                                 <header id="top_header">
  4.                                                 <h1>Luin's HTML5 Tutorial</h1>
  5.                                 </header>
  6.                                 <nav id="top_menu">
  7.                                                 <ul>
  8.                                                                 <li>Home</li>
  9.                                                                 <li>About</li>
  10.                                                                 <li>Contact</li>
  11.                                                 </ul>
  12.                                 </nav>
  13.                                 <section id="main_section">
  14.                                                 <article>
  15.                                                                 <header>
  16.                                                                                 <h2>The First Article<h2>
  17.                                                                 </header>
  18.                                                                 This is the very first article of my website. This article is just a demo of articles I am going to post in future.
  19.                                                                 <footer>
  20.                                                                                 Written by-Mohammad Luin | Date-15/12/15
  21.                                                                 </footer>
  22.                                                 </article>
  23.                                                 <article>             
  24.                                                                 <header>
  25.                                                                                 <h2>The Second Article<h2>
  26.                                                                 </header>
  27.                                                                 This is the very second article of my website. This article is just a demo of articles I am going to post in future.
  28.                                                                 <footer>
  29.                                                                                 Written by-Mohammad Luin | Date-15/12/15
  30.                                                                 </footer>
  31.                                                 </article>
  32.                                 </section>
  33.                                 <aside id="recent_post">
  34.                                                 <h2>Recent Posts</h2>
  35.                                                 The First Article <br/>
  36.                                                 The Second Article
  37.                                 </aside>
  38.                                 <footer id="the_footer">
  39.                                                 Copyright Luin 2015
  40.                                 </footer>
  41.                 </div>
  42. </body>


 The "id" that we have set for each section is needed for css styling. Now, go to your main.css tab and write the below codes.
main.css
 *{
margin: 0px;
padding: 0px;
}
h1{
font: bold 20px Tahoma;  /* Styling the header text */
}
h2{
font: bold 14px Tahoma;  /* Styling the header text */
}
header, section, nav, footer, aside, article, hgroup{
display: block;  /* Display type for all sections of body */
}
body{
text-align: center;  /* Placement of websites body */
}
#big_wrapper{
border: 1px solid black;
width: 1000px; /* Total width of the website */
margin: 20px auto; /* Here 'auto' means 20px in both left and right side  */
text-align: left; /* All text contents will be placed at left side   */
}
#top_header{
background: yellow;
border: 1px;
padding: 20px;
}
#top_menu{
background: blue;
color: white;
}
#top_menu li{
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px Tahoma; /* Using the font type Tahoma */
}
#main_section{
float: left;
width: 660px;
margin: 30px; /* Total 720px utilized out of 1000px, 280px left to use */
}
#recent_post{
float: left;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
clear: both; /*This command let the footer place itself free ie, neither in left or nor in right */
text-align: center; /* Place the footer in the center of website */
padding: 20px;
border-top: 2px solid black;
        background: green;
}
article{
background: #B6B3B2; /* Background color of each article */
border: 1px solid red;  /* Article border size and color */
padding: 20px;
margin-bottom: 15px;
}

Result:
Styling The Website Layout


Copyright © 2014-2016 MLuin | Designed by VeeThemes.com | Powered by Blogger