Web Design. Lecture 1. Instructor : Cristina Mîndruță Site : Cristina Mindruta - Web Design

Transcription

1 Web Design Lecture 1 Instructor : Cristina Mîndruță Site :

2 Bibliography Jennifer Niederst Robbins, Learning Web Design, Fourth Edition, O Reilly Media, 2012 Ian Pouncey and Richard York, Beginning CCC Cascading Style Sheets for Web Design, Third Edition, Wiley Publishing, Inc., 2011 Robin Nixon, Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition A Step-by-Step Guide to Creating Dynamic Websites, Publisher: O'Reilly Media, 2012 Adam Freeman, A Definitive Guide to HTML 5, Apress Janice Redish, Letting Go of the Words, Second Edition, Morgan Kaufmann Publishers (an imprint of Elsevier), Books can be obtained in electronic format from the instructor!!!

3 HTML HTML STRUCTURE and SEMANTIC markup Text Links Images Tables Forms

4 HTML HTML HyperText Markup Language Hypertext = text - displayed on a computer display or other electronic devices - that contains references (hyperlinks) to other text which the reader can immediately access, or where text can be revealed progressively at multiple levels of detail. Hypermedia = extension of the term hypertext, representing a nonlinear medium of information which includes graphics, audio, video, plain text and hyperlinks.

5 HTML Markup elements Uses TAGs to semantically mark the CONTENT. ex0 Semantic markup => content available and accessible in browsing environments and to non-human readers (ex.search engine, indexing programs,...). Content is made of ELEMENTs surrounded by tags. Adding meaning and structure to the content. Not intended to provide instructions for how the content should look (its presentation). Example: <title>web Design Course at UVT</title> ex1

6 HTML Basic page structure 1. root element 2. HTML document 3. descriptive information 4. metadata 5. document title 6. visible content ex1

7 HTML - Attributes <div class="intro" id="summary"> <h1>objectives:</h1> <p>provide students with concepts and main issues in web design.</p> <p>developping skills for approaching web sites development.</p> </div> after the element name, in the opening tag only (never in the end tag). several attributes can be applied to an element, separated by spaces. attribute names: global specific to each element are defined in the HTML specifications: attribute value follows an equals sign (=) OBS. Straight (") quotation marks are the convention, but not necessary value types : number, word, string of text, URL, measurement some attributes are required (ex. src and alt in the img element). ex2

8 HTML - Images <img > = empty element no content mandatory attributes : src, alt ex3

9 HTML - Style Style - Look&Feel declarations Inline Separated from the content Embedded in the head of the document In a different file, of CSS (Cascading Style Sheet) type ex4

10 HTML Document validation Document validation = checking the markup against standards. Valid documents : are more consistent on a variety of browsers display more quickly are more accessible.

11 HTML Document validation Validator = software that checks the source against the specified HTML version. Examples: or checks for: the DOCTYPE declaration, an indication of the character encoding for the document, the inclusion of required rules and attributes, non-standard elements, mismatched tags, nesting errors, typos and other minor errors.

12 HTML Block-level element - starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Rendered as blocks of information Examples: paragraph, hr, list, div, blockquote/q. Text-level semantic (inline) element (phrasing content) - does not start on a new line and only takes up as much width as necessary. Examples: anchor, b, br, cite, em, u, sub, sup Not all block-level elements can contain other block-level elements. Block-level elements can contain text-level semantic elements.

13 HTML HTML STRUCTURE markup Text Links Images Tables Grouping content Sections Text-level semantics Edits Forms

14 HTML Grouping content Grouping content Sections Text-level semantics Edits Paragraph <p>...</p> and <hr> paragraph-level thematic break Heading <h1>...</h1>, 2,3,4,5,6 Document outline for the page, interpreted by assistive devices, searching engines, Has default rendering, modifiable using style definitions. Heading group: <hgroup> HTML5 code <h1>creating a Simple Page</h1> <h2>(html Overview)</h2> </hgroup> Rendering in browsers complaining HTML5 Creating a Simple Page (HTML Overview)

15 HTML Lists Grouping content Sections Text-level semantics Edits Unordered (bulleted) only <li> blocks List block <ul>...</ul> List item block <li>...</li> Ordered (numbered) any type of flow element List block <ol>...</ol>, attribute start=[first number] List item block <li>...</li> Description : pairs term - description List block <dl>...</dl> Term block <dt>...</dt> only <dt>...</dt> or <dd>...</dd> pair of blocks Description block <dd>...</dd> Obs. Lists can be nested. Example: ex5

16 HTML grouping content Grouping content Sections Text-level semantics Edits Quotations <blockquote>...</blockquote> : long quotations <q>...</q> : short quotations Pre-formatted text <pre>...</pre> Self-contained unit Displayed exactly as it is typed (including all the carriage returns and multiple character spaces) and in monospaced (characters are the same width). <figure>...</figure> Can contain: image, video, code snippet, pre-formatted text, table,... <figcaption>...</figcaption> ex6

17 HTML grouping content Grouping content Sections Text-level semantics Edits Semantic (meaning) can be defined with generic elements, that can be customized to describe the content (perfectly). Generic elements are given meaning and context with the ID and CLASS attributes. The generic element for grouping content: <div>...</div> - division of content Creates a logical grouping of content or elements on the page Conceptual unit; should be treated as a unit by CSS or JavaScript Creates a context to the elements in the grouping <div class="intro" id="summary"> <h1>objectives:</h1> <p>provide students with concepts and main issues in web design.</p> <p>developing skills for approaching web sites development.</p> </div>

18 HTML organizing page Grouping content Sections Text-level semantics Edits <body>...</body> Page content <section>...</section> Example: Thematic group of content Can contain more <article> elements <article>...</article> Self-contained, reusable composition (could be extracted for external use) can be broken into a number of <section> elements. <aside>...<aside> Tangentially related material (sidebars) no default rendering; appearance and layout defined with style sheet rules

19 HTML organizing page Grouping content Sections Text-level semantics Edits <h1>...</h1>, 2,3,4,5,6 6 levels of headings <nav>...</nav> primary navigation links useful for different rendering devices and software engines <header>...</header> introductory material for page, section, or article <footer>...</footer> footer for page, section, or article <address>...</address> contact information at the end of the document, section, or article.

20 HTML text-level semantic elements (inline elements) Grouping content Sections Text-level semantics Edits Text-level semantic elements in HTML5 <em>...</em> Stressed emphasis <strong>...</strong> Strong importance <b>...</b> Keywords or visually emphasized text (bold) <i>...</i> Alternative voice (italic) <s>...</s> Incorrect text (strike-through) <u>...</u> Annotated text (underline) <small>...</small> Legal text; small print (smaller type size) <q>...</q> Short inline quotation <abbr>...</abbr> Abbreviation or acronym <cite>...</cite> Citation <dfn>...</dfn> Defining term

21 HTML text-level semantic elements (inline elements) Grouping content Sections Text-level semantics Edits Text-level semantic elements in HTML5 (cont.) <code>...</code> Program code elements <var>...</var> Variable <samp>...</samp> Program sample <kbd>...</kbd> User-entered keyboard strokes _... Subscript ^... Superscript <mark>...</mark> Contextually relevant text (highlighted) <time>...</time> Time data <data>...</data> Machine-readable data <ins>...</ins> Inserted text, <del>...</del> Deleted text <br> Line break, <wbr> Word break

22 HTML generic elements Grouping content Sections Text-level semantics Edits Semantic can be defined with generic elements, that can be customized to describe the content (perfectly). Generic elements are given meaning and context with the ID and CLASS attributes. The generic element for text-level semantics: <span>...</span> word or phrase for which no text-level element currently exists inline element, can only contain text and other inline elements

23 HTML Edits Grouping content Sections Text-level semantics Edits Parts of a document that have been inserted or deleted (respectively) <ins>...</ins> inserted text <del>...</del> deleted text

24 HTML special characters Identified by name or by code &name &#code Example: &copy or &#169 for copyright symbol

25 HTML HTML STRUCTURE markup Text Links Images Tables Forms

26 HTML LINKS Link - conceptual construct that represents a connection between two resources, one of which is the current document. Kinds of links in HTML: Links to external resources - used to augment the current document, generally automatically processed by the user agent. Hyperlinks - links to other resources that are generally exposed to the user by the user agent so that the user can cause the user agent to navigate to those resources, e.g. to visit them in a browser or download them.

27 HTML LINKS Anchor element (hypertext link) : Mandatory attributes : <a> </a> href - URL to the destination (points to web resources: HTML, images, audio, video files,...) <a href="url"> linked text or element </a> Example: <a href=" Faculty Web Page</a> <a href=" src="uvt.gif" alt="uvt logo"></a> ex7

28 HTML LINKS URL (Uniform Resource Locator) Absolute = links to external pages: protocol ( ), the domain name, and the pathname as necessary. ex. Relative = links to a page on the current site: Tree structure and expressing paths relative to the current directory and to the root directory (see next slides). To a fragment identify the destination fragment with a value for ID attribute use this value, preceded by #, in the href attribute

29 HTML LINKS

30 HTML LINKS

31 HTML LINKS

32 HTML LINKS

33 HTML LINKS

34 HTML LINKS

35 HTML LINKS

36 HTML LINKS mailto link The browser opens a new mail message pre-addressed to that address in a designated mail program. Example: <a href="mailto:cristina.mindruta@e-uvt.ro">contact instructor</a> tel link ex8 <a href="tel: ">call us free at (004) </a> Supported on most mobile devices: ios, Android, Blackberry, Symbian, Internet Explorer, Opera Mini. The ipad and ipod Touch can t make a call, but they will offer to create a new contact from the number. Nothing happens when desktop users click the link. A CSS rule can be used to hide the link for non-mobile devices.

37 HTML HTML STRUCTURE markup Text Links Images Tables Forms

38 HTML IMAGES <img src= url > empty element: has attributes but no content inline element; if browser window is resized then images reflows to fill the new width. replaced element - replaced by an external file when the page is displayed. by default, the bottom edge of an image aligns with the baseline of text Examples: <img src="icon.gif" alt=""> Local images, organized into special directories. <img src="/images/arrow.gif" alt=""> Images from other websites: absolute URL: <img src=" alt=""> OBS. File types automatically supported by the browser: GIF, JPEG(JPG), PNG For other types: use anchor element and browser will try to use an appropriate helper applications to display media.

39 HTML IMAGES Attributes: src mandatory, URL of the file containing the image alt - alternate text that should serve as a substitute for the image content serving the same purpose and presenting the same information. Alternative text benefit users with special devices. width and height - indicate the dimensions of the image in number of pixels.

40 HTML Windows and Frames target attribute in the anchor element. Open document in (new) window: new window <a href="url" target="_blank">text or image</a> new/existing window called display ex9 <a href="url" target="display">text or image</a> iframe element embed a separate HTML document or other resource in a document. Example: <h1>inline (floating) Frames</h1> <iframe src="list.html" width="800" height="250"> Your browser does not support inline frames. Read the <a href="list.html">list</a>. </iframe> ex10 ex11 ex12

41 HTML HTML STRUCTURE markup Text Links Images Tables Forms

42 <table>...</table> Structure : rows, columns HTML TABLES <tr>...</tr> Containers for data : cells (may contain text, graphic, other table). <th>...</th> <td>...</td> : row : header : data

43 HTML TABLES Supports all global attributes: Specific attributes for table Border : Specifies whether or not the table is being used for layout purposes Value = 0 or 1 Specific attributes for td / th colspan / rowspan : stretch a cell to the right / downward to span over the subsequent columns/rows. scope : associates a table header with the row, column, group of rows (such as tbody ), or column group in which it appears. header : associates a table data cell with its respective header. padding : space between the content and the edge of the cell ex13

44 HTML TABLES Optional elements for table <caption> - a caption or the name of the table. <col> - used to control certain properties of each table column (ex. width); are not displayed and have no content. <colgroup> - enclose <col> elements; are not displayed. <thead> - column headers, at the top of each page. <tbody> - the main table data. <tfoot> - summary or footnote content; at the bottom of each page; sometimes used to repeat column headers in long tables. Very useful in styling tables. tables

45 HTML HTML STRUCTURE markup Text Links Images Tables Forms

46 Form in the browser HTML Forms mechanism collects information from the user. Content : form controls, used to collect information from the user. text and other elements. Script/application on the server - processes the information collected by the form returns an appropriate response.

47 HTML Form element <form>...</form> - interactive form Basic structure: To the script/application on the server <form action="url" method="post">... </form> Examples of server-side languages: PHP (.php) : open source scripting language most commonly used with the Apache web server. Microsoft s ASP.NET (Active Server Pages) (.asp) : programming environment for the Microsoft Internet Information Server (IIS). Ruby on Rails : programming language used with the Rails platform. JavaServer Pages (.jsp) : Java-based technology similar to ASP. Python : scripting language for web and server applications.

48 HTML Form controls Form control - collects one bit of information from a user. Acts as a variable that takes the value put in the form by the user. name attribute (the name of the variable) unique value inside a form simple and descriptive well documented Example: <textarea name="opinion" rows="4" cols="45" placeholder="leave us your opinion about our site."></textarea>

49 HTML Form controls Text entry controls Specialized text entry controls Submit and reset buttons Radio and checkbox buttons Pull-down and scrolling menus File selection and upload control Hidden controls Dates and times (HTML5) Numerical controls (HTML5) Color picker control (HTML5)

50 HTML input control <input>...</input> element. General element used to define more types of input controls. Attribute type : defines the meaning (semantics) and the appearance of the input element. HTML5 has 23 different types of input controls. Attributes common to all types: disabled and readonly

51 HTML text entry <input type="text"> : Single-line text entry control Example: <label>city <input type="text" name="city" id="form-city" value="your Hometown" maxlength="50"></label> <datalist>...</datalist> element (HTML5) drop-down menu of suggested values (user can still type in a text) input element can be associated with a datalist using the list attribute Example: <p>education completed: <input type="text" list="edulevel" name="education"> <datalist id="edulevel"> <option value="high School"> <option value="bachelors Degree"> <option value="masters Degree"> </datalist>

52 HTML text entry <textarea>...</textarea> : Multiline text entry control Attributes: title, placeholder : hint on content rows, cols : text dimensions wrap = soft/hard maxlength : max number of characters Example: <p>official contest entry:<br> <em>tell us why you love the band. Five winners will get backstage passes!</em><br> <textarea name="contest_entry" rows="5" cols="50" placeholder="50 words or less"> </textarea> </p>

53 HTML text entry Specialized text entry fields <input type="password"> password text control. The form does not encrypt the information!!! <label for="form-pswd">log in:</label><br> <input type="password" name="pswd" maxlength="8" id="form-pswd">

54 HTML buttons <input type="submit"> OR <input type="image" src="url" alt="submit"> Submits the form data to the server Attribute: value= text on the button <input type="reset"> Resets the form controls to their default settings <input type="button"> No predefined function; function will be defined using JavaScript <button>...</button> Flexible element for creating custom buttons similar to those created with the input element.

55 HTML choices Choose from a number of provided options. Attributes: name : name of the group of options value : value to be sent to the server when the related item is selected. <input type="radio"> Radio button : mutually exclusive options. Example: <p>what specialization are you registered?</p> <ol> <li><input type="radio" name= spec value= IR > Informatica </li> <li><input t ype="radio" name= spec value= IA > Informatica aplicata</li> <li><input type="radio" name= spec value= IE checked> Informatica engleza</li> </ol> <input type="checkbox"> Checkbox button : Multiple selection options Example: <p>what optional courses do you prefer?</p> <ol> <li><input type="checkbox" name= opt value= ADS > Advanced Data Structures </li> <li><input type="checkbox" name= opt value= LP > Logic Programming</li> <li><input type="checkbox" name= opt value= WD checked> Web Design</li> </ol>

56 HTML menus <select>...</select> - menu control <option value= val >content</option> an option within a menu <optgroup>...</optgroup> a logical grouping of options within a menu Attributes: Sent to the server when option selected size : the number of options displayed at once value : sent to the server instead of content multiple : multiple selections are allowed selected : option selected by default Example: <p>what optional courses do you prefer?</p> <select name= opt size= 3 multiple> <option value= ADS >Advanced Data Structures</option> <option value= LP >Logic Programming</option> <option value= WD selected>web Design</option> </select>

57 HTML file selection <input type="file"> File selection field Allows to select a document from the hard drive to be submitted with the form data. Example: <form action="/client.php" method="post" enctype="multipart/form-data"> <label>send a photo to be used as your online icon <em>(optional)</em><br> <input type="file" name="photo"><label> </form> OBS. Most data types can be transferred between pages in hidden input controls. <input type="hidden"> Hidden control field Passes a name/value pair, not visible to the user, to the server

58 HTML date and time Date input control <input type="date" name="name" value="yyyy-mm-dd"> Time input control <input type="time" name="name" value="hh:mm:ss"> Date/time control with time zone <input type="datetime" name="name" value="hh:mm:ssyyyy-mm- DDThh:mm:ssTZD"> Date/time control with no time zone <input type="datetime-local" name="name" value="hh:mm:ssyyyy-mm- DDThh:mm:ss"> A month in a year <input type="month" name="name" value="yyyy-mm"> A particular week in a year <input type="week" name="name" value="yyyy-w#">

59 HTML other form controls Numerical input <input type="number"> Slider input <input type="range"> Attributes: min, max, step (numerical value or any) Color picker <input type="color"> State of an ongoing process <progress>...</progress> Attributes : max State of an ongoing process measured within a known range (between min and max) <meter>...</meter> Attributes : min, max, low (trigger), high (trigger), optimun (prefered value) Calculated output value, associated with inputs that affected the calculation. <output>...</output> Key pair generator (private key is stored locally, and the public key is packaged and sent to the server) <keygen>

60 FORMS accessibility features For users without the benefit of visual browsers. <label>...</label> element Implicit association : associates descriptive text with its respective form field <label><input type=...>descriptive text</label> explicit association: matches the label with the control s id reference <label for="id">...</label> <input type=... id="id"> Example <label for="form-login-username">login account</label> <input type="text" name="login" id="form-login-username">

61 FORMS accessibility features Logical group of form controls Caption for the enclosed fields <fieldset>...</fieldset> <legend>...</legend> Example: <fieldset> <legend>mailing List Sign-up</legend> <ul> <li><label>add me to your mailing list <input type="radio" name="list" value="yes" checked="checked"> </label></li> <li><label>no thanks <input type="radio" name="list" value="no"> </label></li> </ul> </fieldset> <fieldset> <legend>customer Information</legend> <ol> <li><label>full name: <input type="text" name="username"></label></li> <li><label> <input type="text" name=" "></label></li> <li><label>state: <input type="text" name="state"></label></li> </ol> </fieldset>

62 FORMS layout and design guide Avoid unnecessary questions try to detect information Ex. Detect the type of credit card from the first 4 numbers Consider impact of label placement above their respective fields : faster reading left : a little slower reading Choose input types carefully Group related inputs Clarify primary and secondary actions and apply different styles Primary action : visually dominant and easy to find button Consider adding UNDO and BACK buttons More information: Web Form Design (Rosenfeld Media,2008); Mobile First (A Book Apart, 2011);

63 HTML5 HTML5 specification: Elements, attributes, and attribute values in HTML are defined to have certain meanings (semantics). Tagged semantics allow HTML processors, (ex. Web browsers, search engines) to present and use documents and applications in a wide variety of contexts. Examples: The same page can also be used by a small browser on a mobile phone, without any change to the page, to represent information adapted to a small screen size. Assistive device reads the page to the user: the speech browser might use a different volume or a slower voice. Browsers can create a document outline based on header markups. Search engines can use the headings to more effectively index a page, or to provide quick links to subsections of the page from their results. Tools can use the headings to create a table of contents.

64 HTML5 Principle : Separate content from presentation. Requirement: Avoid in-line style definitions. New elements added by HTML5 article, aside, audio, bdi, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, track, video, wbr color, date, datetime, datetime-local, , month, number,range, search, tel, time, url, week new form input types new global attributes - can be applied to any element.