Web Design and Application Development

Size: px

Start display at page:

Download "Web Design and Application Development"

Randall McDaniel
5 years ago
Views:

1 Yarmouk University Providing Fundamental ICT Skills for Syrian Refugees (PFISR) Web Design and Application Development Dr. Abdel-Karim Al-Tamimi Lecture 02 A. Al-Tamimi 1

2 Lecture Overview HTML Page Structure Basic Document Structure Attribute Groups Basic Text Formatting Presentational Elements Lists Comments <font> element Block and inline elements <div> and <span> elements Lecture 02 A. Al-Tamimi 2

3 The Basic Structure of HTML All elements are enclosed inside <html> element All information about the document and resources needed to be loaded before the actual contents are present inside the <head> element The actual contents of the document are inside the <body> element Lecture 02 A. Al-Tamimi 3

The <html> Element The <html> element can carry the following attributes: id, dir, lang, xml:lang Will be discussed later (Attribute Groups) Sometimes you will come across

4 The <html> Element The <html> element can carry the following attributes: id, dir, lang, xml:lang Will be discussed later (Attribute Groups) Sometimes you will come across the following: <html xmlns= ></html> xmlns is the name space identifier that indicates the version of the XHTML used Lecture 02 A. Al-Tamimi 4

5 The <head> Element The <head> element should contain <title> element at least. It may also contain any number of the following elements: <object>, include objects like images, JavaScript objects, Flash animation, MP3 files etc <link>, links to external files, such as style sheets or JavaScript files <style>, to include CSS rules inside the document <script>, for including script in the document <meta>, which includes information about the document such as keywords and a description, which are helpful for identifying your site for search engines Lecture 02 A. Al-Tamimi 5

6 The <title> Element When writing your web pages, choose the title of the page wisely. Do not just type: web page 1 etc The default name for a bookmark in browser is the title of the page Search engines uses the contents of the title to index your page, so better title gives better viewing share Can you readers tell what they will find on the page by just reading the title? Lecture 02 A. Al-Tamimi 6

7 The <body> Element The <body> element contains the body contents It also may carry all the attributes from the attribute groups (similar to <title> and <head>) There are several attributes that are specific to a certain browser Be careful when designing your HTML website to make sure that it works well across different web browsers and their different versions Lecture 02 A. Al-Tamimi 7

8 Attribute Groups There are three groups of attributes that many of the XHTML elements can carry Core Attributes: class, id, and title attributes Internationalization Attributes: dir, lang, and xml:lang attributes UI Events: onclick, ondoubleclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup Lecture 02 A. Al-Tamimi 8

9 The id Attribute The id attribute is used to uniquely identify an element within a page or a style sheet Name attribute used before, but became obsolete It must begin with a letter (A-Z or a-z) No two attributes may have the same value within that XHTML document Lecture 02 A. Al-Tamimi 9

10 The title Attribute The title gives a suggested title for the element It is often displayed as a tooltip or while the element is loading Lecture 02 A. Al-Tamimi 10

11 The class Attribute Used to associate an element with a style sheet and specifies the class of the element The unique class name allows all elements that associated with this certain style class to have the same style One element can be associated to multiple classes Lecture 02 A. Al-Tamimi 11

12 The style Attribute The style attribute allows you to specify CSS rules within the element It is not recommended to use this attribute as it is considered a hack instead of a valid solution Instead use class attribute when you want to grant a specific element special CSS rules Lecture 02 A. Al-Tamimi 12

13 In Class Assignment 1- Change your html file and use style attribute instead of using CSS classes Lecture 02 A. Al-Tamimi 13

14 Internationalization We will be discussing two internationalization attributes: The dir attribute The lang attribute Lecture 02 A. Al-Tamimi 14

15 The dir Attribute The dir attribute allows you to indicate to the browser the direction in which the text should flow Latin languages flow from left-to-right (ltr) Arabic language flow from right-to-left (rtl) If you want to apply the dir to the entire document use it with <html> element Lecture 02 A. Al-Tamimi 15

16 The lang Attribute Used to indicate the main language used in a document Has been replaced with xml:lang attribute in the new XHTML document It is recommended to set both lang and xml:lang for the <html> element to indicate the language of the document The lang attribute is set using two-character language codes: lang[-dialect] Examples: ar en en-us Lecture 02 A. Al-Tamimi 16

17 In Class Assignment 1- change your html file to allow right-to-left alignment and change the entire language to ar-jo Lecture 02 A. Al-Tamimi 17

18 Whitespaces and Flow White space collapsing: consecutive spaces, and different spaces (new line, tab ) are displayed as one space Lecture 02 A. Al-Tamimi 18

19 Creating Headings Using <hn> Elements <hn> element is used to indicate or emphasis piece of information like page title/section title etc There are six levels of headings : <h1>, <h2>, <h3>, <h4>, <h5>, <h6> By default, most browsers display the contents of the<h1>, <h2>,and <h3> elements larger than the default size of text in the document. The content of the <h4> element would be the same size as the default text, and the content of the <h5> and <h6> elements would be smaller Lecture 02 A. Al-Tamimi 19

20 Creating Headings Lecture 02 A. Al-Tamimi 20

21 The align Attribute (deprecated) The align attribute indicates if the element should be rendered to the left, center or right of the page The align attribute has been replaced with textalign property in CSS Example: <h1 align= right >This is a right headline</h1> Lecture 02 A. Al-Tamimi 21

22 Creating Paragraphs Using <p> Element The <p> element offers another way to structure your text. Each paragraph of text should go in between an opening <p> and closing</p> tag When a browser displays a paragraph it usually inserts a new line before the next paragraph and adds a little bit of extra vertical space The <p> element can carry all of the universal attributes and the deprecated align attribute Lecture 02 A. Al-Tamimi 22

23 Creating Line Breaks Using the <br /> Element Whenever you use the <br />element {an empty element}, anything following it starts on the next line Try to use <p> element whenever is possible to avoid any unexpected behaviors. Since the amount of space created when use <br /> depends on the size of the font Lecture 02 A. Al-Tamimi 23

24 In Class Assignment 1- Create a new html file under the name Heading_Formatting.html 2- Create the next page HTML file using what you have learned so far Lecture 02 A. Al-Tamimi 24

25 In Class Assignment Lecture 02 A. Al-Tamimi 25

26 Presentational Elements There are many presentational elements available, we are going to discuss some: <b> : bold <i>: italic <u> (deprecated) : underlined <s> and <strike> (deprecated) : strikethrough <sup>: superscript <sub> : subscript <hr />: horizontal rule/line Lecture 02 A. Al-Tamimi 26

27 Presentational Element Lecture 02 A. Al-Tamimi 27

28 Useful Character Entities Lecture 02 A. Al-Tamimi 28

29 Lists Lists are categorized in HTML to : Unordered Lists: similar to bullet points Ordered Lists: sequence of numbers or letters instead of bullet points Definition Lists: allows you to specify a term and its definition (will not discuss in this class) Lecture 02 A. Al-Tamimi 29

30 Unordered Lists with <ul> Element You write your unorderd list inside a <ul> element (unordered list) Each bullet point is contained inside <li> element (list item) Lecture 02 A. Al-Tamimi 30

31 Ordered lists with <ol> Element You write your unorderd list inside a <ol> element (ordered list) Each bullet point is contained inside <li> element (list item) Use type attribute to select number, letter, or Roman numerals in ordered lists type= 1 Arabic Numerals {1,2,3,4, } type= A Capital Letters {A, B, C, D, } type= a Small Letters {a, b, c, d. } type= I Large Roman Letters {I, II, III, IV, } Type= i Small Roman Letters {i, ii, iii, iv, } Use start attribute to change the starting number Lecture 02 A. Al-Tamimi 31

32 Ordered Lists with <ol> Element Lecture 02 A. Al-Tamimi 32

33 Ordered Lists with <ol> Element Lecture 02 A. Al-Tamimi 33

34 Nesting Lists Lecture 02 A. Al-Tamimi 34

35 Comments You can put comments between any tags in your XHTML document  Lecture 02 A. Al-Tamimi 35

36 The <font> Element The <font> element is a deprecated element It is not used anymore, and it is not recommended to use it Lecture 02 A. Al-Tamimi 36

37 Black and Inline Elements Elements that lives inside the <body> element are categorized into: Block level elements Inline elements Lecture 02 A. Al-Tamimi 37

38 Block Level Elements Block-level elements appear on the screen as if they have <br /> before and after them For example: <p>, <h1> ~ <h6>, <ul>, <ol>, <hr /> They all start in their own line, and anything that follows them appears on its own line too Lecture 02 A. Al-Tamimi 38

39 Inline Elements Inline elements can appear within sentences and do not have to appear on new line of their own Examples: <b>, <i>, <u>, <sup>, <sub>, <li> Lecture 02 A. Al-Tamimi 39

40 Grouping Elements with <div> and <span> Elements These two elements are used to group elements to create sections or subsections inside the web page You can use them to attach a specific style to a group of elements <div> is a block-level element, and it is usually used to group block-level elements <span> is an inline elements, and it is usually used to group inline elements Lecture 02 A. Al-Tamimi 40

41 In Class Assignment Write HTML snippet to replicate the following text: Lecture 02 A. Al-Tamimi 41

42 In Class Assignment Write HTML snippet to replicate the following text: Lecture 02 A. Al-Tamimi 42

43 Resources Jon Duckett, Beginning Web Programming with HTML, XHTML, and CSS, Wrox Lecture 02 A. Al-Tamimi 43

44 Questions Lecture 02 A. Al-Tamimi 44

Web Design and Application Development

Yarmouk University Providing Fundamental ICT Skills for Syrian Refugees (PFISR) Web Design and Application Development Dr. Abdel-Karim Al-Tamimi altamimi@yu.edu.jo Lecture 04 A. Al-Tamimi 1 Lecture Overview