Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design

Transcription

1 Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design

2 Contents HTML Quiz Design CSS basics CSS examples CV update

3 What, why, who? Before you start to create a site, it s vital that you have clear in your mind What type of site you are creating? Why you are creating the site? Who the site is for? Plan your layout and menus (navigation) Pen and paper Whiteboard Mockups (closer to final) Use special mockup programs Graphic editor as Paint.NET Powerpoint or whatever you got Design rules Menu to the left and content to the right Try to follow standars and content visible

4 Balsamiq Mockups

5 Writing For The Web 1 Think about who you re writing for? Don t start with a long "welcome" intro... Don t assume that everyone reading your Web site will have an enormous screen or a fast internet connection Keep paragraphs short and columns narrow Line spacing of 1.5 or 2 is good Never use blue or underlined text Stick to the various conventions Don t arrange text in columns such that the reader has to scroll the screen up and down Don t waste too much above-the-fold Check the spelling of your pages Swedish characters problem å, ä, ö <meta charset="utf-8"> or set charset=iso

6 Writing For The Web 2 Fonts Fonts are important. Some are more readable on screens, don t use non-standard fonts that your readers are unlikely to have installed on their computer Colors Readers will use your site s color scheme to form a subconscious opinion about you :-) Hyperlinks Those 1 or 2 words, normally in blue and underlined, which your visitor can click on to move to another local page or another site on internet. <a href="more.html">more local stuff</a> <a href=" Mailto links <a href="mailto:someone@example.com?subject=hello!">send Mail</a>

7 Repetition basics of HTML 1 An HTML file contains a mixture of page content and formatting commands HTML tags generally occur in pairs

8 Repetition basics of HTML 2 Tags: <tag> your content </tag> The <head> tag contains information about the page as a whole The <title> tag which is where your page s title gets put The </ > tag means "close the previous tag" The paragraph <p> tag starts each new block of text The <b> tag makes text bold and <i> makes it italic 6 heading levels, the main heading on your page may be <h1> or <h2> Meta tags Meta-tags are a way for a web page to supply information about itself to the web browser that is displaying the page <meta name="description" content="latest availability for the Grand Hotel"> <meta name="keywords" content="availability, late bookings, vacant rooms"> HTML visibility Everyone that can view your page can read and copy your code HTML validation ensure that your code is correct Built-in in some tools or use

9 Accessibility design Build accessibility (people with sight and mobility problems) in as early as possible in the overall design process since it can be very very time-consuming to retrofit as an afterthought Provide alternative ALT text for every picture or image that you use Don t create information which can t be understood by those who can t see colours properly Ensure that there is sufficient contrast between text and background colours Avoid scrolling text and other dynamic effects Avoid any technique which may produce flickering effects on-screen Use the clearest and simplest language for site content Keep paragraphs short, and include some white space between them Do not use frames, screen readers don t like them. Dark text on a light background works better that light text on a dark background Use a line spacing of around 1.5 to ensure that the text on a page doesn t look too "heavy"

10 Cascading Style Sheets CSS enable separation of apperance and content Old way to do styles <p><font face=verdana size=12pt> Your content </font><p> Tag style p { font-family: Verdana; size: 12; } All your pages which are linked to the specific CSS file will be changed according to the configuration Pre HTML5 DOCTYPEs and DTD (Document Type Definition) The two main document types are XHTML 1.0 Strict and XHTML 1.0 Transitional Transitional is the version that allows both new-style CSS as well as old-fashioned <font> tags "Strict" mode doesn't allow <font> tags

11 The style element/attribute The style= attribute can be used on most tags but is not recommended to use Defines features for a single HTML element, e.g. <p style= text-align: center >Center me.</p> The <style> element: <style type= text/css >... </style> The <style> tag always goes in the <head> section Defines style information for the whole HTML page Requires the type= text/css attribute if using XHTML or HTML < HTML5 Example style for the selected element: body <style type="text/css"> body { background-image: url(image.jpg); font-family: Verdana,sans-serif; font-size: 20px; color: green; } </style>

12 The style element/attribute CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations: CSS font properties: h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */ Use a Combination of Percent and Em may work best!

13 CSS Reference Have many great resources!

14 CSS and the link tag To link to a external separate CSS style sheet, use the link tag instead <link rel= stylesheet type= text/css href= string > rel= relation between the page and the destination resource Requires the type= text/css attribute if using XHTML or HTML < HTML5 body { More about CSS later! font-family: verdana, sans-serif; } div { position: relative; left: 30px; } p,ul,li { font-size: 10pt; } .boldtext{ font-weight: bold; } #content { margin-left: 140px; border-left: 1px solid gray; }

15 CSS cascading style sheets CSS is an extension to basic HTML that allows you to style your web pages apperance Style separates content from apperance of your page CSS can be used to specify fonts, colors, image background, the looks of your links and many other attributes CSS can be embedded into your webpage (head or inline) or stored in an external text file that you can then link to your web page Precedence

16 Class based styles A class is a style that you can use anywhere on a web page, rather than for a particular HTML tag You can customise and create styles to the way you want and reuse them anywhere .mystyle { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 20px; color: red; } <body> <p class="mystyle">hello World </p> </body>

17 Basics of CSS Format > Style Sheets > Link option to enable CSS file in Amaya old doctype

18 Basics of CSS Fonts and CSS Sans-serif fonts are Arial, Verdana etc. Serifs fonts are Courier New, Times New Roman etc. with embellishments on the ends of the characters Serifs fonts works best for body text and sans-serif fonts for headlines and picture captions Fixed with fonts versus different width fonts Usually different width fonts looks best Making Styles work for you Keep the number of styles (tag and class) to a minimum Choose your class names with care. Pick names based on what the class is used for, not what it looks like Use a better CSS editor Topstyle Lite etc.

19 Fonts

20 HTML Markup Tags Names To make the most of HTML and CSS you need to know what tag names are available to you You can find a complete list on the internet, but here are a few to get you started

21 HTML markup cheat sheets

22 ID-based styles HTML allows you to assign a unique name, or id, to any tag on a page. The only stipulation is that a name must be unique on that page <h2>about Cheddar Cheese</h2> We can give this heading a unique id by changing the opening h2 tag thus <h2 id="about-cheese">about Cheddar Cheese</h2> Unless you say otherwise, this heading will appear as any h2 heading would, according to the h2 entry in your style sheet. But because this particular heading has its own id, we can do something rather clever in the css file, like this #about-cheese { color: navy; } Notice that ID have # and class have. as first character in the style name

23 TopStyle CSS editor CSS size %, px, em or xx-small - xx-large The unit em is relative to the users selected size for elements as font etc. If the users selected font size is 16px, 0.75em is equal to 12px. % works similar. In design with absolute layouts and many graphical effects pixels are simpler to work with.

24 Extreme CSS

25 More about CSS CSS can be very complex to set up There are 600 pages+ books in the subject! It is advised to begin with a ready-made design from resources as: or One of the most important concept in css-based layout is the css box model It explains how padding, spacing, justification (left, right, centred, etc.) and margins interact to affect the final position of an item on a page From:

26 Page layouts and div tags Many web sites typically use a top section that uses the whole width of the page and a 2 or 3 column layout below Having the the title, logo etc. at top, the menu in the left column, and the content in the other column and perhaps a footer CSS in combination with <div> tags can achive this layout Div stands for division or divider and is used to specify its position on the page, relative to the top left hand corner or to other divs

27 ID based CSS

28 Page layouts in HTML5 Doing the same layout in HTML5 works in a similar way Using the markup that is suited for layouts like below CSS is of course still needed

29 HTML5 page layout elements 1 The WHATWG spec. defines the elements as follows: The header element is a group of introductory or navigational aids. The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

30 HTML5 page layout elements 2 The WHATWG spec. defines the elements as follows: The nav element should be reserved for navigation that is of primary importance. The aside element represents a part of the page that s tangentially related to the content around the aside element, and which could be considered separate from that content. A footer element, according to the spec, represents a footer for the section of content that is its nearest ancestor. The section of content could be the entire document, or it could be a section, article, or aside element.

31

32 Debug: Chrome Ctrl-shift-I

33 Debug: Internet Explorer - F12

34 Debug: Firefox Ctrl-shift-I

35 Firefox - Web developer toolbox and Firebug plugin