Home
I am a Zak student
Zak
Zak has been researching, designing, and developing for the Web since 1995. He holds a bachelor's degree from San Diego State University and a Master of Science in Instructional Technology from National University in San Diego.
He served as Creative Director with EPIC Solutions until 1998. His expertise in developing Web applications led him to a position as Manager of Web Development at SkyDesk, Inc., where he developed Web solutions for such companies as Gateway, HP, Toshiba, IBM, Intuit, Peachtree, Dell, Covad Communications, and Microsoft. He has worked at ADCS Inc. and Wireless Knowledge as a software engineer, developing .NET solutions for Mellon Financial, Goldman Sachs, TV Guide, Healthbanks, The Gartner Group, and Commerce One.
Zak's skill set includes technologies and languages from HTML, XHTML, XML/XSLT, WML, ASP, ASP.NET, Visual Basic.NET, Web Services, JavaScript, CSS, SQL, and ActionScript. Utilizing these technologies he is the founder and president of Module Media, a new media development and training firm in San Diego.
Aside from teaching and holding design lectures on various technologies and tools, including Dreamweaver MX, Flash MX, and ASP.NET for the San Diego Community College District, Zak is the author of the 10 Minute Guide to Dreamweaver 4 by Que Publishing, and is a Macromedia Certified Professional.
* Click Here to Show/Hide Zak's Background *
I am enrolled in Zak's HTML5 and CSS3 class at SDCCD.
This site is inspired by material presented in Zak's class and from the class companion book, Murach's HTML5 and CSS3. Written by Zak and co-authored by Anne Boehm, this book is a well-designed and written comprehensive training and reference guide. It is written both for those learning HTML and CSS for the first time, as well as for experienced users wanting to learn and utilize the powerful new features of the HTML5 and CSS3 standards.
This web site is not meant as a standalone tutorial, but as a resource for Zak's students and those learning HTML5 and CSS3 from his book. Instead of going into detailed explanations, this site reinforces important syntax and structure and presents coding for creating memorable web sites.
This site contains knowledge learned from my class and from the book, but contains no copyrighted material from either.
We Remember...
10% of what we read20% of what we hear
30% of what we see
50% of what we see and hear
70% of what we discuss with others
80% of what we personally experience
95% of what we teach others
- Edgar Dale
"Hide / Show" Accordian effect above
oops... actually this is for the tab box... still need to do accordian effect
This tabs box illustrates the coding needed for a tab box :-)
This tab box utilizes JavaScript and CSS and is a great way to add content to your pagewhile conserving real estate
Murach's HTML5 and CSS3 book explains this tab box in detail and provides downloads including all coding involed along with along with practice files.
Place this coding in the html <HEAD>
<script src="tabs_llibrary.js"></script><script src="tabs.js"></script>
Place this coding in the html <BODY>
<section><h1>Place title here</h1><br>
<ul id="tab_list">
<li><a href="" id="tab1" class="active">Tab 1 label</a></li>
<li><a href="" id="tab2" class="">Tab 2 label</a></li>
<li><a href="" id="tab3" class="">Tab 3 label</a></li>
<li><a href="" id="tab4" class="">Tab 4 label</a></li>
</ul>
<div id="tab_contents">
<div class="">
<h2>About the Description</h2>
<p>The descriptive text for this tab.</p>
</div>
<div class="hide">
<h2>About the Header coding</h2>
</div>
<div class="hide">
<h2>About the Body coding</h2>
</div>
<div class="hide">
<h2>About the CSS Coding</h2>
</div>
</div>
</section>
Include in the CSS style sheet
section { background-color: white; }/* the styles for the tabs */
#tab_list { margin:0; padding: 3px 6px; border-bottom: 1px solid black; }
#tab_list li { list-style: none; display: inline; }
#tab_list li a { padding: 3px 1em; margin-left: 3px; text-decoration: none; font-weight: bold; background: #ccffff; border: 1px solid black; }
#tab_list li a:hover { background: silver; border-color: black; }
#tab_list li a.active { background-color: white; border-bottom: 1px solid white; }
#tab_contents div { padding: 5px 10px 10px; border: 1px solid black; border-top: 0; height: 100px; overflow:auto; }
.hide { display: none; }
Clearing Method
Because all the columns are floated, this layout uses a clear:both declaration in the footer rule. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a <br class="clearfloat" /> or <div class="clearfloat"></div> after your final floated column (but before the .container closes). This will have the same clearing effect.