Easiest Way To Learn HTML5 and CSS3 Coding

Section 1: Cheat Sheet for global family.html

<!DOCTYPE html>

<html>

<head>

<title>Global Family</title>

<link href="global family stylesheet.css" rel="Stylesheet" type="text/css" >

</head>

<body>

<header style="align:left;" font-size:60pt;" ><strong>Global Family</strong></header>

<nav><table style="width:100%" cellspacing="2" cellpadding="6" text-align="center" background-color="#ffcc33" color="white">

<tr><td style="width:25%;"><a href="Home.html">Home</a></td> <td style="width:25%;"><a href="Members.html">Members</a></td>

<td style="width:25%"><a href="About Us.html">About Us</a></td> <td style="width:25%"><a href="Contact US.html">Contact Us</a></td>

</tr>

</table>

</nav>

<h1 style="color:red; text-align:center;">Global Family</h1>

<p style="text-align:center;"> A family that keeps together</p>

<p style="text-align:center;"> <img src="pix/Old Couple.png" rel="Old Couple" width="10%"<br> Old Couple</p>

<p style="text-align: center;"> <img src="https://i.pinimg.com/originals/b0/98/01/b09801e517bb55371ef5358205e831c0.jpg" width="5%" /> </p>

<video controls>

<source src="pix/clap.mp4" type="video/mp4" width="50%" rel="Woman Clapping">

</video>/p>

<p>Woman Clapping</p>

<!-- Adding Table to My Web Page -->

<table class="table2" table border="1" cellspacing="0" cellpadding="4" align="center" >

<tr><th>Author</th> <th>Quotes</th><th>Image</th> </tr>

<tr><td>Desmond Tutu</td><td>You don’t choose your family. They are God’s gift to you, as you are to them</td></tr>

<tr><td>Desmond Tutu</td><td>You don’t choose your family. They are God’s gift to you, as you are to them</td></tr>

<tr><td>Richard Bach</td><td>The bond that links your true family is not of blood, but of respect and joy in each other’s life</td></tr>

<tr><td>Steve Jobs</td><td>Sometimes life hits you in the head with a brick. Don’t lose faith</td></tr>

<tr><td>Mark Twain</td><td>Good friends, good books and a sleepy conscience: this is the ideal life</td></tr>

</table>

<p><iframe width="320" height="245" src="https://www.youtube.com/embed/0iYsBnj2BUk"&gy;</p>

<p></iframe></p>

<p>Lou Clip</p>

<p>I changed the video to "Lou Clip" as "Family of Chickens" is not available on YouTube anymore. Regardless of the content, the idea is to learn how to embed a YouTube video in your program.</p>

<h2 style="color:green;text-align:center;">

What Is A Global Family? </h2>

<p>We are living in an era of<strong>quantum change;<em> <strong> leaving behind old patters of being in institutions that no longer serve our needs or support our emerging consciousness.<p>

<p style="text-align:center;"> <img src="pix/sunset.jpg" alt="Sunset" width="5%"<br>A Beautiful Sunset</p> At this pivotal time inhumanity’s evolution.we need <font color=”green”>courage, commitment&</font> and a supportive community of like-hearted souls to guide the way in transforming society.</p>

<div id="wrapper" style="text-align:center;">

<h2 style="color:green;text-align:center;">Global Family Mission</h2>

<ul style="text-align:center;">

<li>All the World is a family</li>

<li>Charity begins at home</li>

<li>Family builds character</li>

</ul>

<h2 style="color:green;text-align:center;">

Global Family Unit </h2>

<ol>

<li>Individual</li>

<li>Support Group</li>

<li>Symbiosis</li>

</ol>

<a href="http://www.google.com">Go to Google

<!-- Adding Footer to My Web Page -->

<div class="footer">

<table class="table3" table border="0" cellspacing="0" cellpadding="0" align="center" > <tr>

<td>Copyright © 20XX, TheThinkClub, All Rights Reserved</td> <td style="text-align:right">Designer:Anil Shrivastava</td>

</tr></table>

</div>

</body>

</html>

Section 2: Cheat Sheet for global family stylesheet.css

/* Stylesheet for Header */

Header{height:100px;

/* Font Size, line-heigh, and family */

Font: 40px/80px Sans-Serif,Gadget,Fantasy; text-align:center;

/* Background color, image, position */

background-color: teal;color: white; background-image: URL(pix/kautilaya.png);background-repeat: no-repeat; background-position: 10px center;

/* Round the top corners */

border-top-left-radius: 18px;border-top-right-radius: 18px;

}

/*======== Styling for the nav section (nav) */

table.table1{background-color:silver;font: 20pt Sans-Serif,Gadget, Fantasy; }

/* Styling for the sidebar section (aside) */

aside{

width:130px;

padding:10px;

float:left;

background-color:#f9c6b3;

}

/* Stylesheet for Article */

article{padding:10px;

/* Left margin shoulde match neighboring column full width */

margin-left:150px;

border-left:solid 1px #d0ae8e

}

/*Stylesheet for h1 and h2 headers */

h1{color:red;text-align:center

}

h2{color:green;font-size:15pt; padding:10px;font:15pt San-Serif, Arial, Helvetica;text-align:center

}

/* Stylesheet for paragraph */

{color:black;font:10pt San-Serif, Arial, Helvetica;

}

/* Stylesheet for Body */

body{background-color:#ffeec6;text-align:center;color:maroon; padding:10px; font:15pt San-Serif, Arial, Helvetica; }

/* Stylesheet for Table Font */

Table.table2{color:black;font:10pt San-Serif, Arial, Helvetica;

}

/* Stylesheet for Table */

Table.table2 tr:nth-child(odd){background-color:#cef;

}

/* Stylesheet for Highlight table row on hover */

Table.table2 tr:hover{background-color:yellow; cursor:default;

}

/* Align Table Columns Differently */

table.table2 td:nth-child(even){text-align:left;

}

/* Stylesheet for Footer */

/* Font Size, line-heigh, and family */

.footer{height: 35px; padding: 10px; background-color: teal; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px;

}

/* Styling for table in footer */

table.table3{ width: 70%; margin: 5px auto; color:white; background-position: 10px center; font:15px Sans-Serif, Gadget, Fantasy;

}

Final Look of the Webpage

Section 3: CSS3 Supplementary Materials References

Color Names

http://www.colorsontheweb.com/colornames.asp

Colors and hex values

https://www.w3schools.com/colors/colors_names.asp

CSS Selectors

https://www.w3schools.com/css/css_selectors.asp

CSS Reference

http://www.w3schools.com/cssref/default.asp