CFT2111 Introduction to Website Development Module Leader: Matthew Mantle

1. CFT2111 Introduction to Website Development Module Leader: Matthew Mantle e-mail: m.e.mantle@hud.ac.uk

2. The <div> element <div> <h2>Euismod Ipsum</h2> <p>Qui a non euismod ipsum, impedit scelerisque sed, massa id, a velit, integer nec ullamcorper pharetra aenean aptent. Integer tortor montes porttitor, sapien dictum, non adipiscing libero ut in ac. Nam elit sollicitudin nulla lectus. Porta pharetra interdum massa. consequat. </p> </div> <div> <h2>Impedit Scelerisque</h2> <p>Qui a non euismod ipsum, impedit scelerisque sed, massa id, a velit, integer nec ullamcorper pharetra aenean aptent. Integer tortor montes porttitor, sapien dictum, non adipiscing libero ut in ac. Nam elit sollicitudin nulla lectus. Porta pharetra interdum massa. Nisl semper urna ridiculus luctus rerum suspendisse, ut lectus sit ac mus turpis sollicitudin, hendrerit et, neque lacus augue eleifend. Tempus mauris fusce velit. Erat morbi ligula tincidunt etiam, saepe rutrum nec vitae dis felis libero, suspendisse augue elit consequat. </p> </div> • The div element has no semantic purpose i.e. it doesn’t describe the content of the page. • It is used for page layout • We nest several different elements inside a <div> and then use CSS to target the div element • Often we use the float property

3. The Float Property Qui a non euismod ipsum, impedit scelerisque sed, massa id, a velit, integer nec ullamcorper pharetra aenean aptent. Integer tortor montes porttitor, sapien dictum, non adipiscing libero ut in ac. Nam elit sollicitudin nulla lectus. Porta pharetra interdum massa. Nisl semper urna ridiculus luctus rerum suspendisse, ut lectus sit ac mus turpis sollicitudin, hendrerit et, neque lacus augue eleifend. Tempus mauris fusce velit. Erat morbi ligula tincidunt etiam, saepe rutrum nec vitae dis felis libero, suspendisse augue elit consequat. Qui a non euismod ipsum, impedit scelerisque sed, massa id, a velit, integer nec ullamcorper pharetra aenean aptent. Integer tortor montes porttitor, sapien dictum, non adipiscing libero ut in ac. Nam elit sollicitudin nulla lectus. Porta pharetra interdum massa. Nisl semper urna ridiculus luctus rerum suspendisse, ut lectus sit ac mus turpis sollicitudin, hendrerit et, neque lacus augue eleifend. Tempus mauris fusce velit. Erat morbi ligula tincidunt etiam, saepe rutrum nec vitae dis felis libero, suspedisse augue elit consequat. Qui a non euismod ipsum, impedit scelerisque sed, massa id, a velit, integer nec ullamcorper pharetra aenean aptent. Integer tortor montes porttitor, sapien dictum, non adipiscing libero ut in ac. Nam elit sollicitudin nulla lectus. Porta pharetra interdum massa. Nisl semper urna ridiculus luctus rerum suspendisse, ut lectus sit ac mus turpis sollicitudin, hendrerit et, neque lacus augue eleifend. Tempus mauris fusce velit. Erat morbi ligula tincidunt etiam, saepe rutrum nec vitae dis felis libero, suspedisse augue elit consequat. Qui a non euismod ipsum, impedit scelerisque sed, massa id, a velit, integer nec ullamcorper pharetra aenean aptent. Integer tortor montes porttitor, sapien dictum, non adipiscing libero ut in ac. Nam elit sollicitudin nulla lectus. Porta pharetra interdum massa. Nisl semper urna ridiculus luctus rerum suspendisse, ut lectus sit ac mus turpis sollicitudin, hendrerit et, neque lacus augue eleifend. Tempus mauris fusce velit. Erat morbi ligula tincidunt etiam, saepe rutrum nec vitae dis felis libero, suspedisse augue elit consequat. • Just the same as when we did this last week with a paragraph div{ width : 400px; float : left; } Qui a non euismod ipsum, impedit scelerisque sed, massa id, a velit, integer nec ullamcorper pharetra aenean aptent. Integer tortor montes porttitor, sapien dictum, non adipiscing libero ut in ac. Nam elit sollicitudin nulla lectus. Porta pharetra interdum massa. Nisl semper urna ridiculus luctus rerum suspendisse, ut lectus sit ac mus turpis sollicitudin, hendrerit et, neque lacus augue eleifend. Tempus mauris fusce velit. Erat morbi ligula tincidunt etiam, saepe rutrum nec vitae dis felis libero, suspendisse augue elit consequat. Qui a non euismod ipsum, impedit scelerisque sed, massa id, a velit, integer nec ullamcorper pharetra aenean aptent. Integer tortor montes porttitor, sapien dictum, non adipiscing libero ut in ac. Nam elit sollicitudin nulla lectus. Porta pharetra interdum massa. Nisl semper urna ridiculus luctus rerum suspendisse, ut lectus sit ac mus turpis sollicitudin, hendrerit et, neque lacus augue eleifend. Tempus mauris fusce velit. Erat morbi ligula tincidunt etiam, saepe rutrum nec vitae dis felis libero, suspendisse augue elit consequat.

4. New Section Elements in HTML 5 • Most web page designs have common features • A header section, a main content area, a footer, a navigation bar • In previous version of HTML there was no way to define these sections using HTML tags • Instead we has to use a <div> element to mark out a header section or footer section and give it a suitable id attribute <div id="header"> <img src="logo.gif"> <h1>Welcome to the Site</h1> <ul> <li>About Us</li> <li>Products</li> <li>Contact Us</li> </ul> </div> #header{ width:800px; float:left; }

5. New Section Elements in HTML 5 <header> <hgroup> <h1>CFT2111</h1> <h2>Introduction to Web Programming</h2> </hgroup> <nav> <ul> <li>Module Overview</li> <li>Term 1</li> <li>Assignment 1</li> </ul> </nav> </header> <section> <h1>Module Overview</h1> <p>This course is about developing basic web programming skills and applying these skills to the creation of interactive web pages. The course has two parts. The first introduces HTML and CSS, and the techniques necessary for basic web page construction. The second explores JavaScript and the fundamental programming concepts needed to build interactive web pages. </p> </section> • The header, hgroup, nav, section, article, aside and footer tags allow us to split pages up into different sections • We still need the <div> element but we should use these as well

6. New Section Elements in HTML 5 <header> <hgroup> <h1>CFT2111</h1> <h2>Introduction to Web Programming</h2> </hgroup> <nav> <ul> <li>Module Overview</li> <li>Term 1</li> <li>Assignment 1</li> </ul> </nav> </header> <section> <h1>Module Overview</h1> <p>This course is about developing basic web programming skills and applying these skills to the creation of interactive web pages. The course has two parts. The first introduces HTML and CSS, and the techniques necessary for basic web page construction. The second explores JavaScript and the fundamental programming concepts needed to build interactive web pages. </p> </section> • <hgroup> • Is used to group headings • Used when we have a heading and a sub heading • <nav> • Navigation bar • <section> • Is the most generic and simply used to define a section of the page • <aside> • Separate but related content • <article> • Is a self contained section of the page

7. New Section Elements in HTML 5 • Most browsers won’t recognise these new elements! • i.e. can’t apply CSS to them • There are ways for us to make the most popular web browsers recognise the section elements • Even Internet Explorer 6.0 (but this relies on JavaScript so wait until term 2) • For Firefox • We simply need to declare the section tags as block level elements header, section, nav, hgroup{ display:block; }

8. CSS Techniques • There are commonly used CSS techniques e.g. • Creating columned layout • Centering a page • Creating navigation bars from lists

9. How to go about implementing a CSS Design • Possible workflow for building your website • Design interface • Mark-up pages using basic HTML • Mark out distinct areas of the page using section tags • Create basic layout using CSS • Add finishing CSS touches • Test! E.g. imagine I am going to re-design the university web site…

10. Step 1 • Design the Interface – • Use PhotoShop, Fireworks etc. or can be hand drawn sketches • Need a plan to work towards

11. Step 2 – Mark-up the pages using basic HTML … <a href="#">school staff</a> </p> <h1>Welcome to the school</h1> <p> <img src="jimyip2.jpeg" alt="jim yip"/> </p> <p> I am pleased to welcome you to the School of Computing and Engineering at the University of Huddersfield - thank you for 'switching on' to our website and a successful future with us! </p> <p> Our School is an exciting place in which to study. We believe strongly in the supportive environment we offer to all our students with friendly, helpful staff able to offer expertise in a wide range of subjects supported by state of the art facilities. </p> Professor Jim Yip </p> … • Just using <p>, <h?>, <li>, <a> etc. • Don’t care what the page looks like at this point • Validate!!!!!! • Fixing errors at the end may ruin later work

12. Step 3 – Mark-up the page using section elements • Think about distinct areas of the page • headers, footers, navigation bars, columns etc. • Mark up these areas using section elements • Add appropriate id attributes • Validate the page again !!!!!!!!!!!! • You should then not need to add any more HTML! <header> <img src="logo.gif" alt="university logo"/><h1>COMPUTING & ENGINEERING</h1> <h2>University of Huddersfield</h2> </header> <nav> <a href="#">school home</a> <a href="#">about the school</a> <a href="#">course finder</a> <a href="#">research</a> <a href="#">business support</a> <a href="#">school staff</a> </nav> <section id="maincontents"> <h1>Welcome to the school</h1> <img src="jimyip2.jpeg" alt="jim yip"/> <p> I am pleased to welcome you to the School of Computing and Engineering at the University of Huddersfield - thank you for 'switching on' to our website and a successful future with us! </p> <p> Our School is an exciting place in which to study. We believe strongly in the supportive environment we offer to all our students with friendly, helpful staff able to offer expertise in a wide range of subjects supported by state of the art facilities. </p> <p> We aspire to excellence in all our activities having achieved the highest possible QAA quality ratings as a university and in every subject area review that we have had. </p>…

13. Step 4 - Create the basic layout using CSS • Add borders on your section elements so you can see them • Specify the layout properties - float, width, positioning etc. header, nav, section, footer{ border-color:red; border-width:1px; border-style:solid; }

14. Step 4 - Create the basic layout using CSS • I have set widths first for each section element header{ width:700px; } nav{ width:140px; } #maincontents{ width:390px; } #news{ width:140px; } footer{ width:700px; }

15. Step 4 - Create the basic layout using CSS … header{ width:700px; } nav{ width:140px; float:left; } #maincontents{ width:390px; float:left; } #news{ width:140px; float:left; } footer{ width:700px; clear:both; } • I then use floats and/or positioning to position the different columns next to each other • This example uses floats • The clear property prevents the footer from wrapping onto the same line as the three columns

16. Step 5 - Add finishing CSS touches … nav a{ display:block; margin-top:10px; margin-left:10px; padding-left:10px; border-bottom: 1px dotted #aaaabb; } nav a:hover{ border-bottom: 1px solid #aaaabb; background-image:url("tri.gif"); background-repeat:no-repeat; background-position:center left; } img{ float:left; margin-right:10px; } • Add finishing CSS touches • Properties for colour, fonts, background images etc.

17. Step 6 - Test • There are bound to be differences in different browsers • May need to go back and make some adjustments

18. Centering a Page • Designing for the web poses unique problems • Don’t know how big the end users monitor will be • Have to design for when they re-size the browser window • There are two basic approaches for solving this problem • Fixed width webpage design – e.g. bbc • Fluid webpage design – e.g. amazon

19. Fixed Width Webpage design <body> <div id="wholepage"> <header> <img src="logo.gif" alt="university logo"/><h1>COMPUTING & ENGINEERING</h1> <h2>University of Huddersfield</h2> </header> …. Through integrated study and industrial experience, our graduates leave </footer> </div> </body> </html> • Using the previous example • A div element encloses the entire contents of the page • Opening <div> immediately after the opening <body> tag • Closing <div> immediately before the closing <body> tag

20. Fixed Width Webpage design <body> <div id="wholepage"> <header> <img src="logo.gif" alt="university logo"/><h1>COMPUTING & ENGINEERING</h1> <h2>University of Huddersfield</h2> </header> …. Through integrated study and industrial experience, our graduates leave </footer> </div> </body> </html> #wholepage{ width:800px; margin-left:auto; margin-right:auto; } • The div element needs to be given a width • The auto values for the margin means they will be re-calculated as the browser windows re-sizes

21. List Based Navigation bars • Many of the navigation bars we see on the web are constructed using HTML lists • The CSS changes them visually to look like the navigation bar • Use section elements to mark out content and navigation areas <nav> <ul> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> </ul> </nav> <section id="content"> <h1>Ut enim ad minim veniam</h1> <p> Lorem ipsum … cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </section>

22. List Based Navigation bars • Remove the bullets points by targeting the <ul> element that is nested inside the navigation <nav> <nav> <ul> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> </ul> </nav> <section id="content"> <h1>Ut enim ad minim veniam</h1> <p> Lorem ipsum … cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </section> nav ul{ list-style-type:none; margin:0px; padding:0px; }

23. List Based Navigation bars • Wrap all the list elements onto the same line using the float property <nav> <ul> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> </ul> </nav> <section id="content"> <h1>Ut enim ad minim veniam</h1> <p> Lorem ipsum … cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </section> nav li{ float:left; }

24. List Based Navigation bars nav a{ display:block; width:100px; padding:10px; text-align:center; text-decoration:none; margin-right:10px; background-color:rgb(59,114,44); } nav a:hover{ background-color:rgb(166,155,3); } #navigation #chosen { background-color:rgb(166,155,3); } • Give the hyperlinks a background colour • We need to convert them into ‘block level’ elements first • So we can set their width • Again note the use of the contextual selector • Affect the hyperlinks nested inside a list that is nested inside the nav <nav> <ul> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> </ul> </nav> <section id="content"> <h1>Ut enim ad minim veniam</h1> <p> Lorem ipsum … cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </section>

25. Other CSS Techniques • There are other approaches to controlling page layout with CSS e.g. absolute positioning • Have a look in the recommended reading for the module or on one of these websites • http://www.alistapart.com/ • http://www.csszengarden.com/