HTML Layout and Sub Meun
Website layout coding tutorial from PSD into XHTML and CSS https://youtu.be/kjNKo9UelBs
Website Layout
Make 2 files. Layout.html and aboutme.html And upload your server. (stuhtml/####/)
Layout.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>WEB PAGE TITLE GOES HERE</title> </head> <body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;"> <table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0"> <tr> <!-- ============ HEADER SECTION ============== --> <td colspan="3" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr> <!-- ============ NAVIGATION BAR SECTION ============== --> <tr><td colspan="3" valign="middle" height="30" bgcolor="#a9ae9f"><a href="layout.html">Home</a></td></tr> <!-- ============ LEFT COLUMN (MENU) ============== --> <td width="20%" valign="top" bgcolor="#999f8e"> <a href="aboutme.html">About Me</a><br> <a href="#">Menu link</a><br> <a href="#">Menu link</a> </td> <!-- ============ MIDDLE COLUMN (CONTENT) ============== --> <td width="55%" valign="top" bgcolor="#d2d8c7"> <h2>Page heading</h2> A three column layout with header, navigation bar and footer sections. The first, second and fourth table rows create the header, navigation bar and footer respectively and contain a single table cell each. All these table cells use colspan="3" attribute-value pair. <br> <br> The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).<br> <td width="25%" valign="top" bgcolor="#999f8e"> </td> </tr> <!-- ============ FOOTER SECTION ============== --> <tr><td colspan="3" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr> </table> </body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <title>WEB PAGE TITLE GOES HERE</title> </head> <body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;"> <table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0"> <tr> <!-- ============ HEADER SECTION ============== --> <td colspan="3" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr> <!-- ============ NAVIGATION BAR SECTION ============== --> <tr><td colspan="3" valign="middle" height="30" bgcolor="#a9ae9f"><a href="layout.html">Home</a></td></tr>
<tr> <!-- ============ LEFT COLUMN (MENU) ============== --> <td width="20%" valign="top" bgcolor="#999f8e"> <a href="aboutme.html">About Me</a><br> <a href="#">Menu link</a><br> <a href="#">Menu link</a> </td> <!-- ============ MIDDLE COLUMN (CONTENT) ============== --> <td width="55%" valign="top" bgcolor="#d2d8c7">
<h2>Page heading</h2> A three column layout with header, navigation bar and footer sections. The first, second and fourth table rows create the header, navigation bar and footer respectively and contain a single table cell each. All these table cells use colspan="3" attribute-value pair. <br> <br> The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).<br> </td> <td width="25%" valign="top" bgcolor="#999f8e"> </td> </tr> <!-- ============ FOOTER SECTION ============== --> <tr><td colspan="3" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr> </table> </body> <html>
http://bus2226w16.com/stuhtml/3207/layout.html http://bus2226w16.com/stuhtml/3207/aboutme.html http://bus2226w16.com/stuhtml/3207/resume.html
aboutme.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>WEB PAGE TITLE GOES HERE</title> </head> <body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;"> <table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0"> <tr> <!-- ============ HEADER SECTION ============== --> <td colspan="3" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr> <!-- ============ NAVIGATION BAR SECTION ============== --> <tr><td colspan="3" valign="middle" height="30" bgcolor="#a9ae9f"><a href="layout.html">Home</a></td></tr> <!-- ============ LEFT COLUMN (MENU) ============== --> <td width="20%" valign="top" bgcolor="#999f8e"> <a href="aboutme.html">About Me</a><br> <a href="#">Menu link</a><br> <a href="#">Menu link</a> </td> <!-- ============ MIDDLE COLUMN (CONTENT) ============== --> <td width="55%" valign="top" bgcolor="#d2d8c7"> <h2>Page heading</h2> A three column layout with header, navigation bar and footer sections. The first, second and fourth table rows create the header, navigation bar and footer respectively and contain a single table cell each. All these table cells use colspan="3" attribute-value pair. <br> <br> The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).<br> <td width="25%" valign="top" bgcolor="#999f8e"> </td> </tr> <!-- ============ FOOTER SECTION ============== --> <tr><td colspan="3" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr> </table> </body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <title>WEB PAGE TITLE GOES HERE</title> </head> <body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;"> <table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0"> <tr> <!-- ============ HEADER SECTION ============== --> <td colspan="3" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr> <!-- ============ NAVIGATION BAR SECTION ============== --> <tr><td colspan="3" valign="middle" height="30" bgcolor="#a9ae9f"><a href="layout.html">Home</a></td></tr>
<tr> <!-- ============ LEFT COLUMN (MENU) ============== --> <td width="20%" valign="top" bgcolor="#999f8e"> <a href="aboutme.html">About Me</a><br> <a href="#">Menu link</a><br> <a href="#">Menu link</a> </td> <!-- ============ MIDDLE COLUMN (CONTENT) ============== --> <td width="55%" valign="top" bgcolor="#d2d8c7">
<h2>Page heading</h2> A three column layout with header, navigation bar and footer sections. The first, second and fourth table rows create the header, navigation bar and footer respectively and contain a single table cell each. All these table cells use colspan="3" attribute-value pair. <br> <br> The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).<br> </td> <td width="25%" valign="top" bgcolor="#999f8e"> </td> </tr> <!-- ============ FOOTER SECTION ============== --> <tr><td colspan="3" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr> </table> </body> <html>
Add more menu Image button menu
<!-- ============ LEFT COLUMN (MENU) ============== --> <td width="20%" valign="top" bgcolor="#999f8e"> <a href="aboutme.html">About Me</a><br> <a href="#">Menu link</a><br> <a href="#">Menu link</a> </td> <!-- ============ LEFT COLUMN (MENU) ============== --> <td width="20%" valign="top" bgcolor="#999f8e"> <a href="aboutme.html">About Me</a><br> <a href="resume.html"><img src="https://crunchbase-production-res.cloudinary.com/image/upload/c_limit,h_600,w_600/v1422480063/h0fvargheeyaybm4oyyt.jpg" width="100px" height="50px“></a> <br> <a href="#">Menu link</a><br> <a href="#">Menu link</a> </td>
You can change any menu, Before make a html file