Hello World!

This is the first HTML code

Fig. 1.1: First code 1.3 Basic tags • The Table 1.1 shows the list of tags which are required for writing the basic ‘HTML’ codes i.e. without any style e.g. bold, italics and numbering etc. Table 1.1: List of basic tags Tag Description Example h1, . . . , h6 Header tag h1 to h6

Hi

p paragraphs (Line changes at the end)

Hi

span No line change after span Hi Bye. div make division between contents

. . .

a hyperlink see Section 1.9 center Move content to center Hi br Line break (no closing tag)
or
hr horizontal line (no closing tag)

---

or

---

pre preserve formatting

 . . . . 

table insert table 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 added codes are shown in the tutorial.

Heading 2

Heading 6

(continues on next page) 2 PythonDSP Chapter 1. HTML (continued from previous page)

This is paragraph

This is span. The 'br' tag is used after span to break the line

The 'div' tag can be used for formatting the tags inside it at once using 'style' and 'classes'␣ ˓→etc.

This paragraph is inside the 'div' tag

This span is inside the 'div' tag

Heading 3 is centered

Centered span inside the paragraph.

Two horizontal line is drawn using two 'hr' tag.

---

---

 'pre' tag preserve the formatting (good for writing codes)
# Python code
x = 2
y = 3
print(x+y)

• 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’ tag 3 Meher Krishna Patel 1.4. Attributes 1.4 Attributes In Fig. 1.2, we saw an example of attribute (i.e. style) which changed the color of all the elements to ‘blue’ inside the ‘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.

• An attribute has two parts i.e. ‘name’ and ‘value’. For example, in the above code, name and value of the attribute are ‘style’ and ‘blue’ respectively. 1.4.2 Core attributes Below 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 the element with other elements.

This is paragraph with id 'para1'

This is paragraph with id 'para2'

• class : The attribute ‘class’ can be used with multiple tags. This is very useful in making groups in HTML design.

This is paragraph with class 'blue'

This is span with class 'blue' • style : We already see the example of style attribute, which can be used to change the formatting of the text in HTML design. We can specify various styles which are discussed in Chapter 2.

Style attribute is used to bold and color

Note: Above three attributes are used with ‘CSS (cascading style sheet)’ and JavaScript/jQuery, which are the very handy tools to enhance the look and functionalities of the web-page respectively. The CSS is discussed in Chapter 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,

Multiple attributes

• The other useful attributes are listed in Table 1.2 Table 1.2: List of attributes Name Values Description id user defined names

Hi

class user defined names

Hi

style CSS styles

Hi

align left, right, center horizontal alignment width numeric value or % value width of images and tables etc. height numeric value height of images and tables etc. 4 PythonDSP Chapter 1. HTML 1.5 Tables In this section, we will learn to draw tables along with some attributes which are discussed in Table 1.2. Table 1.3 shows the list of tags available to create the table, which are used in Listing 1.1. Table 1.3: Tags and attributes for creating tables Tag Description table beginning and end of table tr row of table th header cell td data cell Attributes rowspan number of rows to merge colspan number of columns to merge border width of border cellpadding width of whitespace between two border cellspacing width of whitespace within a border bgcolor background color bordercolor color of border width width of table (numeric or %) height height of table (numeric) caption caption for table • Some of the attributes of Table 1.3 are used in below example, Listing 1.1: Table with border and color 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Table 1 : Various tags of table

Column 1	Column 2	Column 3
Data 1	Data 2	Data 3
New Data 1		New Data 2

21 22 23 24 25 26 27 28 29 30 31 32 (continues on next page) 5 Meher Krishna Patel 1.6. Text formatting (continued from previous page) 33 34 35 36 37 38 39

Table 2 : Width is 80%

Column 1	Column 2	Column 3
Data 1	Data 2	Data 3

• Fig. 1.3 is the output of above code, Fig. 1.3: Table generated by Table 1.3 1.6 Text formatting In this section, we will see some of the text formatting options (see Table 1.4) e.g. bold, italic, subscript and strike etc. Table 1.4: Text formatting Tag Description b bold i italic u, ins underline strike, del strike sup superscript sub subscript big big size text small small size text • Below are the some of the examples of text formatting, whose results are shown in Fig. 1.4,

This is bold text

This is striked text

This is _subscript text

1.7 Images Image tag has two important attribues i.e. ‘src’ and ‘alt’ as described below, • src : tells the location of ‘image’ file e.g. in Line 2 the image ‘logo.jpg’ will be searched inside the folder ‘img’. 6 PythonDSP Chapter 1. HTML Fig. 1.4: Text formatting • alt : is the ‘alternate text’ which is displayed if image is not found. For example, in Line 6, the name of the image is incorrectly written i.e. ‘logoa’ (instead of ‘logo’), therefore the value of ‘alt’ i.e. ‘Missing Logo.jpg’ will be displayed as shown in Fig. 1.5. 1 2 3 4

5 6 Fig. 1.5: Images Note: We can use other attributes as well e.g. ‘height’, ‘align’ and ‘border’ etc. 7 Meher Krishna Patel 1.8. Lists 1.8 Lists There are three type of lists in HTML, • Unordered list : bullet are used in it (see Lines 2 and 9) • Ordered list : numbers are used in it (see Lines 15, 22 and 28) • Definition list : This can be used for writing definitions in HTML (see Line 35) 1 2 3

Unordered List 4
• Pen
5
• Pencil
6
• Eraser
7

8 9

Change bullets : 'square', 'circle' or 'disc' 10
• Pen
11
• Pencil
12
• Eraser
13

14 15 16

Ordered List 17
1. Pen
18
2. Pencil
19
3. Eraser
20

21 22

Change style : 'i', 'I', '1', 'a' or 'A' 23
1. Pen
24
2. Pencil
25
3. Eraser
26

27 28

Start from 'v' 29
5. Pen
30
6. Pencil
31
7. Eraser
32

33 34 35

36

HTML Definition List

37

HTML is easy

38

HTML is good

39

The outputs of above codes are shown in Fig. 1.6, 1.9 Links

Go to paragraph with id='para1'

PythonDSP

JavaScript Tutorial in same window.

JavaScript Tutorial in new Window.

(continues on next page) 8 PythonDSP Chapter 1. HTML Fig. 1.6: Lists 9 Meher Krishna Patel 1.10. Forms (continued from previous page)

Download PDF, DOC or Zip Files

Email me

Feeback email

Note: We can change the color of the links using ‘alink (active link)’, ‘link’ and ‘vlink (visited link’, by defining these attributes in the ‘body tag’ as shown below, 1.10 Forms Forms can have different types of controls to collect the input-data from users, which are listed below and shown in Table 1.5, • Text input • Text area • Radio button • Checkbox • Select box • File select • Buttons • Submit and reset buttons • Hidden input 10 PythonDSP Chapter 1. HTML Table 1.5: List of control inputs and their attributes Control Attributes Values Description Input : text type text, password value user-defined initial value in the area name user-defined name send to server size numeric value width of the text area maxlength numeric value maximum number of characters Input : radio type radio name user-defined name send to server value user-defined value value of the button if selected checked check the button by default Input : check box type checkbox name user-defined name send to server value user-defined value value of the box if selected checked check the box by default Input : button type button trigger client side script submit submit the form and run ‘action’ reset reset form image create image button method get, post get or post method action user-defined action to perform on submit Input : hidden type hidden will not display on html, but can be used for sending information to server Selection box name user-defined name send to server size numeric value enables scroll (default dropdown) multiple numeric value select multiple items value user-defined value value of the item if selected selected select item by default Text area rows, cols numeric value number of rows and cols name user-defined name send to server • Below are the exmaple of the control inputs described in Table 1.5

Text input

Name :
Password :

Radio button: name should be same

Male Female Infant

Check box : name should be different

Male Female Infant

Select box : drop-down

Male Female Infant

Select box : scroll

(continues on next page) 11 Meher Krishna Patel 1.10. Forms (continued from previous page) Male Female Infant 1 Infant 2 Infant 3 Infant 4

Text area

Initial Text x = 2 y = 3

Fig. 1.7 is the output of above code, • Below is the code which shows the working of various buttons. Note that method and action are defined in this form, which will be triggered on ‘submit’ button. Lastly, ‘hidden’ option is used in this example.

Buttons and Hidden

Name :
Password :

Fig. 1.8 is the output of above code, 12 PythonDSP Chapter 1. HTML Fig. 1.7: Various control inputs for creating form 13 Meher Krishna Patel 1.10. Forms Fig. 1.8: Various buttons and hidden-input in the form