Working with HTML 5 DIV Structures CSS Webfonts

Working with HTML 5 & DIV Structures, CSS, Webfonts and Templates MAhmed Web Development and Interactive Media

DIV Structures (used before HTML 5) • Elements within a webpage are contained in DIVs (divisions) • Think of a DIV as a “box” • Wireframe indicates layout of all DIVs • Identify DIVs by custom-named IDs: eg. : <div id=“logo”>Logo goes here </div> • Begin a web project by creating your DIV structure • Nest DIVs correctly • DIVs appear in your HTML in their layout order – starting from top left

DIV Structures (used before HTML 5) <body> <div id="container"> <div id="header"> <div id="nav"> </div> <div id="wrapper"> <div id="content"> <div id="subcontent 1"> </div> <div id="subcontent 2"> </div> <div id="sidebar"> </div> <div id="footer"> </div> </body>

HTML 5 Structures • HTML 5 replaced the most-used DIVs with semantic elements: • • • Header Nav Section Article Aside Footer • You can still assign custom-named IDs: eg. : <section id=“ad 1”>Ad 1 goes here </section> <section id=“ad 2”>Ad 2 goes here </section> • Use DIVs for all other elements • Nest elements correctly

HTML 5 Structures <body> <div id="container"> <header> <nav> </header> <section id=“hero”> <article> <header> </header> <section> </article> </section> <aside> <section id=“ad 1”> </section> <section id=“ad 2”> </section> </aside> <footer> </div> </body>

Indenting HTML Tags <body><div id="container"><header><nav> <div id="container"> </nav><header> <section id=“hero”><article><header> <nav> </header><section> </section> <section id=“hero”> </article></section><aside> <article> <header> </header> <section> </article> </section> <section id=“ad 1”> </section><section id=“ad 2”> </section></aside><footer> </div></body> <aside> <section id=“ad 1”> </section> <section id=“ad 2”> </section> </aside> <footer> </div> </body> Tabbing/structuring code, and putting line breaks between block elements (eg. on the left) makes it easier to read, easier to locate items, easier to identify nested tags, and easier to spot errors

Using CSS • CSS must be in a separate file, external to your HTML , and linked to the HTML using the “Attach stylesheets” dialogue • Style each DIV using #id-of-div, or style each HTML 5 element • Open and close styles with { } • Remember semi-colons ; after each style • Indent and separate your CSS styles to make it easier to read, find items, and spot errors

Web-safe Fonts (Fonts that are universally installed on every machine across the globe) Limitation of Web-safe Fonts • Browsers are dependent on fonts installed on users’ local computers. If you design a webpage using a font not installed on the viewers’ machine, the intended font will not be displayed. Instead, the browser will substitute a font which is installed on the user’s local machine. • This is a DESIGN issue since it affects how the website looks and feels. Displaying a webpage in a different, unintended font will change the look that the designer had in mind. • There are very few web-safe fonts. Previously, websites were designed with only these websafe fonts. Having to use only these fonts was a huge limitation on design. COMMON WEB-SAFE FONTS: Arial Times New Roman Trebuchet Georgia Verdana Comic Sans Tahoma Lucida Courier

Font-serving Solution to the issue of Web-safe Fonts • Type foundries and others have begun to serve font files off their own web servers. Most charge subscription fees for this service. • You can link to these served fonts in your HTML and the browser will display the designated webpage text in those served fonts • Google webfonts (google. com/fonts) is a free font-serving service, offering 804 typefaces • Instructions for implementing Google webfonts into your HTML and CSS are at google. com/fonts • WIX recently gave users the ability to upload fonts to their server for use on their WIX websites

Templates • Provide a standard or guide for page layout • Contain editable and uneditable (locked) regions • Allow fast, easy creation of multiple HTML pages with the same layout • Allow fast, easy editing of HTML elements and DIV structures: If you need to change an element in ALL your HTML pages, simply make the change in the template file, and DW will update all of your HTML pages as long as they were created from the template.

Using Templates Create templates by defining EDITABLE regions • After finishing your HTML 5 structure and CSS, but before inserting content into pages: • • • Select the element/ DIV/ content that will be editable on each page Insert> Template Objects> Editable Region Provide a descriptive name for the region Repeat for each editable region Save AS TEMPLATE (DW will automatically store the template file into the “templates” folder which you MUST have previously created in your root. If you haven’t previously created the “templates” folder, you will have errors in your website!) • Then create each of your HTML pages from the template: • File> New from template