WIXLIB

HTML, CSS, Bootstrap, Javascript andjQueryMeher Krishna PatelCreated on : Octorber, 2017Last updated : May, 2020More documents are freely available at PythonDSP

Table of contentsTable of contents1 HTML1.1 Introduction . . . . . . . . .1.2 First code . . . . . . . . . .1.3 Basic tags . . . . . . . . . .1.4 Attributes . . . . . . . . . .1.4.1 Attribute ‘name’ and1.4.2 Core attributes . . .1.5 Tables . . . . . . . . . . . .1.6 Text formatting . . . . . . .1.7 Images . . . . . . . . . . . .1.8 Lists . . . . . . . . . . . . .1.9 Links . . . . . . . . . . . . .1.10 Forms . . . . . . . . . . . .i. . . . . . . . . . . . . . . . .‘value’ . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2 Cascading Style Sheets (CSS)2.1 Introduction . . . . . . . . . .2.1.1 Inline CSS . . . . . . .2.1.2 Embedded CSS . . . .2.1.3 External CSS . . . . .2.2 Basic CSS Selectors . . . . .2.3 Hierarchy . . . . . . . . . . .2.4 More selectors . . . . . . . . .2.4.1 Attribute selector . . .2.5 More properties . . . . . . . .11124445668810.151515151617182020213 Bootstrap3.1 Introduction . . . . . . . . . . . . .3.2 Setup . . . . . . . . . . . . . . . .3.2.1 Download and include files3.2.2 Add CDN . . . . . . . . . .3.2.3 Check setup . . . . . . . . .3.3 Grid system . . . . . . . . . . . . .3.3.1 Example . . . . . . . . . . .3.3.2 Nested columns . . . . . . .3.3.3 Offset . . . . . . . . . . . .3.4 Components . . . . . . . . . . . . .3.4.1 Labels . . . . . . . . . . . .3.4.2 Buttons . . . . . . . . . . .3.4.3 Forms . . . . . . . . . . . .3.4.4 Horizontal form . . . . . . .3.4.5 Form elements . . . . . . .22222222232324252626272829293033.i

3.4.63.4.73.4.83.4.9Control size . . . . . . .More buttons . . . . . .Input group . . . . . . .Navigation bar (navbar).353739424 JavaScript4.1 Introduction . . . . . . . . . . . . . . . . . . . .4.2 First code . . . . . . . . . . . . . . . . . . . . .4.2.1 JavaScript in HTML file . . . . . . . . .4.3 Keywords, Datatypes, Variables and Operators4.3.1 Keywords . . . . . . . . . . . . . . . . .4.3.2 Datatypes . . . . . . . . . . . . . . . . .4.3.3 Variables . . . . . . . . . . . . . . . . .4.3.4 Operators . . . . . . . . . . . . . . . . .4.3.5 String to number conversion . . . . . . .4.3.6 Convert to integer . . . . . . . . . . . .4.3.7 Convert to float . . . . . . . . . . . . . .4.3.8 Math . . . . . . . . . . . . . . . . . . .4.3.9 String . . . . . . . . . . . . . . . . . . .4.3.10 Arrays . . . . . . . . . . . . . . . . . . .4.4 Control structure, loops and functions . . . . .4.4.1 If-else . . . . . . . . . . . . . . . . . . .4.4.2 Switch-case-default . . . . . . . . . . . .4.4.3 For loop . . . . . . . . . . . . . . . . . .4.4.4 While loop . . . . . . . . . . . . . . . .4.4.5 do-while . . . . . . . . . . . . . . . . . .4.4.6 for-in loop . . . . . . . . . . . . . . . . .4.4.7 Continue and break . . . . . . . . . . .4.4.8 Functions . . . . . . . . . . . . . . . . .4.5 Event handling . . . . . . . . . . . . . . . . . .4.6 Conclusion . . . . . . . . . . . . . . . . . . . 4555 jQuery5.1 Introduction . . . . . . . . . .5.1.1 Requirements . . . . .5.1.2 Add contents . . . . .5.2 jQuery examples . . . . . . .5.2.1 Add jQuery code . . .5.2.2 jQuery in separate file5.2.3 Get input from user .5.3 Selectors . . . . . . . . . . . .5.3.1 Select elements . . . .5.3.2 Filters . . . . . . . . .5.4 Operations . . . . . . . . . .5.5 Event handling . . . . . . . .56565657585860616464676969.

Chapter 1HTML1.1 IntroductionIn this chapter, various component of HTML are discussed to design a web page.The basic structure for an HTML page is shown below. Entries inside the / . . . / are known as tags. Most of the tags has an opening and closing e.g. head (opening head) and /head (closing head). Some of the tags do not have closing tags e.g. !DOCTYPE. . . and br / . We need to write the HTML codes inside the tags. The comments are written between ‘ !–’ and ‘– ’. Here Line 1 gives the details of the ‘HTML version’ to the web-browser. The ‘html’ tells it is version 5. The ‘head’ tag (Lines 3-5) contains the header related tags e.g. ‘title for the page’ and ‘links for the css files’etc. The ‘body’ tag (7-11) contains the actual HTML code which is displayed on the web-browser. Also, we addall the JavaScript related codes just before the closing body tag ( /body ).12345 !DOCTYPE html !-- tells browser above the html version -- html !-- beginning of the html document -- head !-- header related tags e.g. title, links etc. -- /head 67 body 8 !-- actual html document here -- 9101112 /body /html !-- add JavaScript files here -- 1.2 First codeIn below code, the message “Hello World” is displayed on the HTML page. The Fig. 1.1 is the resultant HTMLpage. The title (Line 4) appears on the top of the browser. The tag h1 is called ‘header’ tag, which has the larger size than the normal text (see the size of ‘HelloWorld!’). The tag p is called the ‘paragraph’ tag, which can be used to write the paragraphs. !DOCTYPE html html (continues on next page)1

HTML, CSS, Bootstrap, Javascript and jQuery(continued from previous page) head title HTML Tutorial /title /head body h1 Hello World! /h1 p This is the first HTML code /p /body /html Fig. 1.1: First code1.3 Basic tags The Table 1.1 shows the list of tags which are required for writing the basic ‘HTML’ codes i.e. without anystyle e.g. bold, italics and numbering etc.Table 1.1: List of basic tagsTagh1, . . . , h6pspandivacenterbrhrpretableDescriptionHeader tag h1 to h6paragraphs (Line changes at the end)No line change after spanmake division between contentshyperlinkMove content to centerLine break (no closing tag)horizontal line (no closing tag)preserve formattinginsert tableExample h2 Hi /h2 p Hi /p span Hi /span Bye. div . . . /div see Section 1.9 center Hi /center br / or br hr / or hr pre . . . . /pre see Section 1.5 Let’s see the example of each of these tags,Note: All the new codes are added below the previous codes in the ‘body’ tag. Therefore only newly addedcodes are shown in the tutorial. h2 Heading 2 /h2 h6 Heading 6 /h6 (continues on next page)1.3. Basic tags2

HTML, CSS, Bootstrap, Javascript and jQuery(continued from previous page) p This is paragraph /p span This is span. /span span The 'br' tag is used after span to break the line /span br/ div style "color:blue;" The 'div' tag can be used for formatting the tags inside it at once using 'style' and 'classes' etc. p This paragraph is inside the 'div' tag /p span This span is inside the 'div' tag /span br/ /div center h3 Heading 3 is centered /h3 p span Centered span inside the paragraph. /span p /center Two horizontal line is drawn using two 'hr' tag. hr / hr pre 'pre' tag preserve the formatting (good for writing codes)# Python codex 2y 3print(x y) /pre Fig. 1.2 is the output of above code. Read the text to understand each tag,Fig. 1.2: Basic tags : Attribute ‘style’ is used in ‘div’ tag1.3. Basic tags3

HTML, CSS, Bootstrap, Javascript and jQuery1.4 AttributesIn Fig. 1.2, we saw an example of attribute (i.e. style) which changed the color of all the elements to ‘blue’ insidethe ‘div’ tag.1.4.1 Attribute ‘name’ and ‘value’ Attribute is defined inside the opening part of a ‘tag’. For example, in the below code, the attribute ‘style’is defined inside the ‘div’ tag. div style "color:blue;" /div An attribute has two parts i.e. ‘name’ and ‘value’. For example, in the above code, name and value ofthe attribute are ‘style’ and ‘blue’ respectively.1.4.2 Core attributesBelow are the three core attributes which are used frequently in web design. id : The ‘id’ is the unique name which can be given to any tag. This is very useful in distinguishing theelement with other elements. p id 'para1' This is paragraph with id 'para1' /p p id 'para2' This is paragraph with id 'para2' /p class : The attribute ‘class’ can be used with multiple tags. This is very useful in making groups in HTMLdesign. p class "c blue" This is paragraph with class 'blue' /p span class "c blue" This is span with class 'blue' /span style : We already see the example of style attribute, which can be used to change the formatting of thetext in HTML design. We can specify various styles which are discussed in Chapter 2. p style "font-weight:bold; color:red;" Style attribute is used to bold and color /p Note: Above three attributes are used with ‘CSS (cascading style sheet)’ and JavaScript/jQuery, which are thevery handy tools to enhance the look and functionalities of the web-page respectively. The CSS is discussed inChapter 2, whereas JavaScript and jQuery are discussed in Chapter 4 and Chapter 5 respectively. Also we can define multiple attributes for one tag as shown below, p class "my class" id "para with class" style "color:green" Multiple attributes /p The other useful attributes are listed in Table 1.2Nameidclassstylealignwidthheight1.4. AttributesTableValuesuser defined namesuser defined namesCSS stylesleft, right, centernumeric value or % valuenumeric value1.2: List of attributesDescription p id ’p 1’ Hi /p p class ’p class’ Hi /p p style ”color:red; font-weight:bold;” Hi /p horizontal alignmentwidth of images and tables etc.height of images and tables etc.4

HTML, CSS, Bootstrap, Javascript and jQuery1.5 TablesIn this section, we will learn to draw tables along with some attributes which are discussed in Table 1.2. Table 1.3shows the list of tags available to create the table, which are used in Listing 1.1.Table aptionTags and attributes for creating tablesDescriptionbeginning and end of tablerow of tableheader celldata cellnumber of rows to mergenumber of columns to mergewidth of borderwidth of whitespace between two borderwidth of whitespace within a borderbackground colorcolor of borderwidth of table (numeric or %)height of table (numeric)caption for table Some of the attributes of Table 1.3 are used in below example,Listing 1.1: Table with border and color12345678 !-- border - color, width and height -- table border "1" bordercolor "black" width "450" height "100" caption Table 1 : Various tags of table /caption tr bgcolor "red" !-- row -- th Column 1 /th !-- header -- th Column 2 /th th Column 3 /th /tr 91011121314 tr bgcolor "cyan" !-- background color -- td Data 1 /td !-- data -- td Data 2 /td td Data 3 /td /tr 151617181920 tr bgcolor "yellow" !-- row -- td colspan "2" New Data 1 /td !-- column span -- td New Data 2 /td !-- data -- /tr /table 2122232425262728293031 !-- width in % -- table border "1" bordercolor "black" width "80%" height "100" caption Table 2 : Width is 80% /caption tr bgcolor "red" th Column 1 /th th Column 2 /th th Column 3 /th /tr 32(continues on next page)1.5. Tables5

HTML, CSS, Bootstrap, Javascript and jQuery(continued from previous page)3334353637 tr bgcolor "cyan" !-- row -- td Data 1 /td !-- data -- td Data 2 /td td Data 3 /td /tr 3839 /table Fig. 1.3 is the output of above code,Fig. 1.3: Table generated by Table 1.31.6 Text formattingIn this section, we will see some of the text formatting o

HTML,CSS,Bootstrap,JavascriptandjQuery 1.4Attributes InFig.1.2,wesawanexampleofattribute(i.e. e’inside