COMP1223 Web Development Fundamentals

Transcription

1 WEEK 2 COMP1223 Web Development Fundamentals Book: Murach's HTML5 and CSS3 Week: 2 Chapters: 2 and 3 Author/s: Maziar Masoudi L E C T U R E N O T E 2014 External Sources: COURSE NAME: Web Development Fundamentals PAGE: 1

2 Table of Contents Contents Objectives... 3 Syntax... 4 Basic struture of an HTML document... 4 How to code elements and tags... 5 How to code attributes... 5 Empty tag with attributes... 5 Boolean attribute... 5 Common attributes to identify html elements... 6 HTML COMMENT and Withespace... 6 Coding Recommendations... 6 Validation... 7 Chapter 2 Summary... 8 How to code the head section... 9 SEO guidelines for the title tag... 9 How to link to a favicon:... 9 Metadata SEO Guidelines Summary How to code text elements: Common Block elements for heading and paragraphs SEO Guidelines Block elements for special types of text How to code inline elements How to code character entities: How to code the core attributes COURSE NAME: Web Development Fundamentals PAGE: 2

3 Objectives Knowledge 1. Describe the use of the head and body elements in an HTML document. 2. Describe these types of HTML tags: opening, closing, and empty. 3. Describe the use of attributes within HTML tags. 4. Describe the use of HTML comments and whitespace. 5. Describe three ways to run a web page and one way to retest a page after you ve changed the source code for the page. 6. Describe two benefits of validating HTML files. 7. Describe the use of the title and meta elements in the head section of an HTML document. 8. Distinguish between a block element and an inline element. 9. Describe the use of these block elements: h1, h2, h3, and p. 10. Describe the use of these inline elements: br, i, b, sup, em, q, and strong. 11. Describe the use of character entities like or. 12. Describe the use of these core attributes: id, class, and title. COURSE NAME: Web Development Fundamentals PAGE: 3

4 Syntax Every spoken language has a general set of rules for how words and sentences should be structured. These rules are collectively known as the language syntax. In computer programming, syntax serves the same purpose, defining how declarations, functions, commands, and other statements should be arranged. Read More: Basic struture of an HTML document Code html5 in lowercase always code in lowercase (readablitiy) COURSE NAME: Web Development Fundamentals PAGE: 4

5 How to code elements and tags How to code attributes Empty tag with attributes Boolean attribute COURSE NAME: Web Development Fundamentals PAGE: 5

6 Common attributes to identify html elements HTML COMMENT and Withespace Coding Recommendations COURSE NAME: Web Development Fundamentals PAGE: 6

7 Validation Exercise 2-2, 2-3 COURSE NAME: Web Development Fundamentals PAGE: 7

8 Chapter 2 Summary COURSE NAME: Web Development Fundamentals PAGE: 8

9 How to code the head section SEO guidelines for the title tag How to link to a favicon: favicon.ico Generator: COURSE NAME: Web Development Fundamentals PAGE: 9

10 Metadata The Meta elements are used to specify metadata, which provides information about the content of the document. Refresh document every 30 seconds: SEO Guidelines COURSE NAME: Web Development Fundamentals PAGE: 10

11 Summary Links: - Charset: - Content: - http-equiv: - name: - Read More: - Character encoding: How to code text elements: Within the body of a document, you can code two types of element: Block elements: o Are the main building blocks of a web site and can contain other elements. o Each block element begins on a new line. Inline elements Common Block elements for heading and paragraphs The based fount size and the spacing above and below headings and paragraphs are determined by the browsers, but you can change these values by using CSS. COURSE NAME: Web Development Fundamentals PAGE: 11

12 SEO Guidelines Block elements for special types of text How to code inline elements In contrast to a block element, an inline element doesn t starts on a new line. Instead, an inline element is coded within a block element. <p>this text contains ^superscript text.</p> Read More: COURSE NAME: Web Development Fundamentals PAGE: 12

13 How to code character entities: Many of the web pages you develop will require special characters such as copyright symobol and opening and closing curly quotes. To display these special characters, you use character entities. All character entities start with (&) and end with a semicolon (;) How to code the core attributes HTML provides some core attributes that you can use with most elements. id: use the id attribute to uniquely identify an HTML element (CSS to format the element) class: similar to id attribute, except it doesn t have to be unique. title: specifies additional information about an element. (tootip) lang: identifies the language that the content of the element is written in. (<html lang= en >) COURSE NAME: Web Development Fundamentals PAGE: 13

14 Read more on title: Read more on lang: COURSE NAME: Web Development Fundamentals PAGE: 14