Website Design - Wordpress Tutorials - SEO Tips - Web tutorials for beginner: creating a simple html5 website

What is HTML5 - HTML5 and HTML4.1

<div style="-webkit-text-stroke-width: 0px; background-color: white; color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 16.899999618530273px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKNWx44iiVgy5zRlMDiV_xTcd2oIcWvT5D2jcxfxBw4lShCaYO8STffPmP_PZGWmAIjcprXyK2c0G5stIDvcYGY93_wfBs62eU3iWz5xq5H_BIhCPiCona2RW52RmuljtK2D7hEJD04LP/s1600/html5-css3-rwd.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="What is HTML5 - HTML5 and HTML4.1" border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKNWx44iiVgy5zRlMDiV_xTcd2oIcWvT5D2jcxfxBw4lShCaYO8STffPmP_PZGWmAIjcprXyK2c0G5stIDvcYGY93_wfBs62eU3iWz5xq5H_BIhCPiCona2RW52RmuljtK2D7hEJD04LP/s1600/html5-css3-rwd.png" title="What is HTML5 - HTML5 and HTML4.1" width="320" /></a></div>
<br />
HTML5 is the latest standard for HTML.</div>
<div style="-webkit-text-stroke-width: 0px; background-color: white; color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 16.899999618530273px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
The previous version of HTML, HTML 4.01, came in 1999, and the internet has changed significantly since then.</div>
<div style="-webkit-text-stroke-width: 0px; background-color: white; color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 16.899999618530273px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
HTML5 was designed to replace both HTML 4, XHTML, and the HTML DOM Level 2.</div>
<div style="-webkit-text-stroke-width: 0px; background-color: white; color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 16.899999618530273px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
It was specially designed to deliver rich content without the need for additional plugins. The current version delivers everything from animation to graphics, music to movies, and can also be used to build complicated web applications.</div>
<div style="-webkit-text-stroke-width: 0px; background-color: white; color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 16.899999618530273px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
HTML5 is also cross-platform. It is designed to work whether you are using a PC, or a Tablet, a Smartphone, or a Smart TV.</div>
<h2 style="-webkit-text-stroke-width: 0px; background-color: white; color: black; font-family: verdana, helvetica, arial, sans-serif; font-size: 22px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin-bottom: 10px; margin-top: 10px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
The HTML5 <!DOCTYPE></h2>
<div style="-webkit-text-stroke-width: 0px; background-color: white; color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 16.899999618530273px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
In HTML5 there is only one <!doctype> declaration, and it is very simple:</div>
<div class="code notranslate" style="-webkit-text-stroke-width: 0px; background-color: #f6f4f0; border: 1px solid rgb(212, 212, 212); color: #444444; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin: 0px; orphans: auto; padding: 5px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; width: auto; word-spacing: 0px;">
<div style="font-family: 'courier new'; font-size: 14px;">
<!DOCTYPE html></div>
</div>
<br style="-webkit-text-stroke-width: 0px; background-color: white; color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;" />
<hr style="-webkit-text-stroke-width: 0px; background-color: #d4d4d4; border: 0px; clear: both; color: #d4d4d4; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; height: 1px; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;" />
<h2 style="-webkit-text-stroke-width: 0px; background-color: white; color: black; font-family: verdana, helvetica, arial, sans-serif; font-size: 22px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin-bottom: 10px; margin-top: 10px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
A Minimum HTML5 Document</h2>
<div style="-webkit-text-stroke-width: 0px; background-color: white; color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 16.899999618530273px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
Below is a simple HTML5 document, with the minimum of required tags:</div>
<div class="code notranslate" style="-webkit-text-stroke-width: 0px; background-color: #f6f4f0; border: 1px solid rgb(212, 212, 212); color: #444444; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin: 0px; orphans: auto; padding: 5px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; width: auto; word-spacing: 0px;">
<div style="font-family: 'courier new'; font-size: 14px;">
<!DOCTYPE html><br />
<html><br />
<head><br />
<meta charset="UTF-8"><br />
<title><i>Title of the document</i></title><br />
</head><br />
<br />
<body><br />
<i>Content of the document......</i><br />
</body><br />
<br />
</html></div>
</div>
<br class="Apple-interchange-newline" />
<div style="-webkit-text-stroke-width: 0px; background-color: white; color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 16.899999618530273px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<br /></div>
<h2 style="-webkit-text-stroke-width: 0px; background-color: white; color: black; font-family: verdana, helvetica, arial, sans-serif; font-size: 22px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin-bottom: 10px; margin-top: 10px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
Browser Support for HTML5</h2>
<div style="-webkit-text-stroke-width: 0px; background-color: white; color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 16.899999618530273px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
All major browsers (Chrome, Firefox, Internet Explorer, Safari, Opera) support the new HTML5 elements and APIs, and continue to add new HTML5 features to their latest versions.</div>
<div style="-webkit-text-stroke-width: 0px; background-color: white; color: #404040; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 16.899999618530273px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
The HTML 5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and hundreds of other vendors.</div>

What is HTML5 - HTML5 and HTML4.1

HTML5 is the latest standard for HTML. The previous version of HTML, HTML 4.01, came in 1999, and the internet has changed significant...

9:16 AM

Easy creating a simple HTML5 Website Basic

<div style="-webkit-text-stroke-width: 0px; background-color: white; border: 0px; box-sizing: border-box; color: #555555; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 27.625px; margin: 0px 0px 1.25rem; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizunfIqW3I1hBD3lZbcTGEULmQ8d2JFhPX4knygCtougK65uWnP9sgLHXgqD7dsPgLEHLrhmPOibx7OBRNebbZF0Yylr6gcFhidToYSjJmSonCN28R7SQ68FHIxNP2_XJR36Kib7gJZ28t/s1600/html5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Easy creating a simple HTML5 Website Basic" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizunfIqW3I1hBD3lZbcTGEULmQ8d2JFhPX4knygCtougK65uWnP9sgLHXgqD7dsPgLEHLrhmPOibx7OBRNebbZF0Yylr6gcFhidToYSjJmSonCN28R7SQ68FHIxNP2_XJR36Kib7gJZ28t/s1600/html5.png" title="Easy creating a simple HTML5 Website Basic" /></a></div>
<br />
In this HTML5 tutorial for beginners, we will create a simple, barebones webpage using HTML5.<span id="more-16198" style="border: 0px; box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: baseline;"></span></div>
<h2 style="-webkit-text-stroke-width: 0px; background-color: white; border: 0px; box-sizing: border-box; color: #353535; font-family: proxima_nova_rgregular, Montserrat, sans-serif; font-size: 31.5px; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: 40px; margin: 10px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-rendering: optimizelegibility; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">
What You’ll Need</h2>
<ul style="-webkit-text-stroke-width: 0px; background-color: white; border: 0px; box-sizing: border-box; color: #555555; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 27.625px; list-style: none; margin: 0px 0px 1.625rem; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">
<li style="border: 0px; box-sizing: border-box; line-height: 1.625; list-style-type: disc; margin: 0px 0px 0px 2.5rem; padding: 0px; vertical-align: baseline;">Some familiarity with basic HTML tags such as<div style="border: 0px; box-sizing: border-box; margin: 0px; padding: 0px; vertical-align: baseline;">
,, and.</div>
</li>
<li style="border: 0px; box-sizing: border-box; line-height: 1.625; list-style-type: disc; margin: 0px 0px 0px 2.5rem; padding: 0px; vertical-align: baseline;">A basic knowledge of CSS.</li>
<li style="border: 0px; box-sizing: border-box; line-height: 1.625; list-style-type: disc; margin: 0px 0px 0px 2.5rem; padding: 0px; vertical-align: baseline;">A text editor such as Notepad or Notepad++. You can also use a professional web editor like Adobe Dreamweaver.</li>
</ul>
<h2 style="-webkit-text-stroke-width: 0px; background-color: white; border: 0px; box-sizing: border-box; color: #353535; font-family: proxima_nova_rgregular, Montserrat, sans-serif; font-size: 31.5px; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: 40px; margin: 10px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-rendering: optimizelegibility; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">
Creating a Simple HTML5 Website</h2>
<div style="-webkit-text-stroke-width: 0px; background-color: white; border: 0px; box-sizing: border-box; color: #555555; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 27.625px; margin: 0px 0px 1.25rem; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">
The best way to learn something is by actually doing it. With that in mind, we’ll jump right into this tutorial and create our very own HTML5 website.</div>
<div style="-webkit-text-stroke-width: 0px; background-color: white; border: 0px; box-sizing: border-box; color: #555555; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 27.625px; margin: 0px 0px 1.25rem; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">
First, create a new document in your favorite text editor. We highly recommend Notepad++, a free alternative to Notepad.</div>
<div style="-webkit-text-stroke-width: 0px; background-color: white; border: 0px; box-sizing: border-box; color: #555555; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 27.625px; margin: 0px 0px 1.25rem; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">
In the blank document, copy and paste the following code:</div>
<pre style="-webkit-text-stroke-width: 0px; background-color: whitesmoke; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.14902); box-sizing: border-box; color: #353535; display: block; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; margin: 0px 0px 10px; orphans: auto; overflow: auto; padding: 9.5px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: pre-wrap; widows: auto; word-break: break-all; word-spacing: 0px; word-wrap: break-word;"><!DOCTYPE html>
<html lang=”en”>
<head>
        <meta charset=”utf-8”>
        <title>Awesome HTML5 Webpage</title>
        <meta name=”description” content=”An awesome HTML5 page YOU built from scratch!”>
        <meta name=”author” content=”Udemy”>
        <link rel=”stylesheet” href=”style.css”>
</head>
<body>
        <div id=”wrapper”>
                <header class=”main_headline”>
                        <nav>
                                <ul>
                                        <li><a href=”#”>About</a></li>
                                        <li><a href=”#”>Services</a></li>
                                        <li><a href=”#”>Products</a></li>
                                        <li><a href=”#”>Contact</a></li>
                                </ul>
                        </nav>
                        <h1>Super Duper Awesome Headline! </h1>
                </header>
                <div id=”primary_content”>
                        <section id=”left_column”>
                                <h3>A Hitchhiker’s Guide!</h3>
                                <p>To the Galaxy!</p>
                        </section>

<section id=”right_column”>
                                <article>
<header>
<h3>The Answer to Life?</h3>
<p>Published: 30 August 2013</p>
                                        </header>
                                        <p>Douglas Adams, when asked: “What is the answer to life, universe and everything”, replied:</p>
                                        <blockquote>”42”</blockquote>
                                </article>
                        </section>
                </div>

<footer>
                        <p>The Footer is where all useless info goes!</p>
                </footer>
</div>
</body>
</html></pre>
<div style="-webkit-text-stroke-width: 0px; background-color: white; border: 0px; box-sizing: border-box; color: #555555; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 27.625px; margin: 0px 0px 1.25rem; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">
Confused? Don’t worry. We’ll look at every line of code in detail below.</div>

Easy creating a simple HTML5 Website Basic

In this HTML5 tutorial for beginners, we will create a simple, barebones webpage using HTML5. What You’ll Need Some familiarity with...

9:14 AM

Website Design - Wordpress Tutorials - SEO Tips - Web tutorials for beginner

What is HTML5 - HTML5 and HTML4.1

Easy creating a simple HTML5 Website Basic

Popular Posts

Labels

Blog Archive