Scribd Logo
Upload

Welcome to Scribd!

  • HTML Tags and Its Uses

    Uploaded by

    Akriti Kc
    24 views21 pages

    Original Title

    HTML tags and its uses

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    24 views21 pages

    HTML Tags and Its Uses

    Uploaded by

    Akriti Kc

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    of 21
    Chapter 1 HTML 1.1 Introduction In 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. (opening head) and (closing head). Some of the tags do not have closing tags e.g. . We need to write the HTML codes inside the tags. «The comments are written between '" ‘¢ Here Line I gives the details of the ‘HTML ve ‘+ The ‘bead! tag (Lines 3-5) contains the header related tags e.g. ‘title for the page’ and ‘links for the ess files’ te ‘« The ‘body! tag (7-11) contains the actual HTML code whick is displayed on the web-browser. Also, we add ‘body>) sion’ to the web-browser. ‘The ‘himl’ tells itis version 5. all the JavaScript related codes just before the clasing body tag ( choml> ead> cto header related tegs e.g. title, Links ete 1.2 First code In below code, the message “Hello World” is displayed on the HTML page. The Fig. 1.1 i age ‘+ The title (Line 4) The tag < World!) ‘+ The tag

    is called the ‘paragraph’ tag, which ean be used to write the paragraphs. .e resultant HTML appears on the top of the browser. h1> is called ‘header’ tag, which has the larger size than the normal text (see the size of ‘Hello TRE TT AT 13, Basic tags (continued from previous page) MTML Tutorial Helle Werta!

    This is the first HTML code

    € B file://basic.html Hello World! This is the first HTML code Fig. 1.1: First code 1.3 Basic tags ‘¢ The Table 11 shows the list of tags which are required for writing the basic ‘HTML’ codes ic. without any style eg. bold, italics and numbering ete Table 1.1: List of basic tags [re Description Example BL, = BO | Header tag bl to HO ha> Wi =phe P ‘paragraphs (Line changes at the end) |

    Ti

    Spam 'No line change after span span> Hix /span> Bye div Tmake division between contents adivs
    a Typerlink see Section 19 conten Move coi coater center> i by Tine break (no closing tag) TS oF
    or
    De preserve formatting 
     DS
[liable insert table 300 Section 15,

 

 

 

 

‘* Let's soe 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 ate showa in the tutorial.

 

 

 

 Heading 2 
Heading 6 Chapter HTML

 

 

inved 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 inaide it at once using ‘atyle! and ‘classe:

   

 


     This paragraph is inside the ‘div! tag 
    

 This span is inside the ‘div’ tag 

eer/>



     Heading 3 is centered


    cspan> Centered span inside the paragraph.
    


 

Two horsgontal Line ia drawn using two ‘hr’ tag
er >


     ‘pre! tag preserve che formatting (good for writing codes)

 

4 Python code

x22
yrs
print (x+y)


    

 

‘* Fig, 1.2 is the output of above code, Read the text to understand each tag,

Heading 2

eading 8

‘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 ‘lv’ tag

 

Heading 3 is centered
Centered span inside the paragraph.

‘Two horizontal line is drawn using two ‘hr’ tag.

 

‘pre! tay preserve the formatting (good for writing cofesd
 Pythan cote

 

Fig, 1.2: Basic tags : Attribute ‘style’ is used in ‘div’ tag1a, Attributes

 

1.4 Attributes

In Fig. 12, we saw an example of attribute (Le. 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 insid
is defined inside the ‘div’ tag.

 

10 opening part of a ‘tag’. For example, in the below code, the attribute ‘st

 

 

  


     This is span vith 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 wo can define multiple attributes for one tag as shown below,

 


     Multiple attributes 
    

 

 

‘+ The other useful attributes ate listed in Table 1.2

Table 1.2: List of att

 

 

 

 

 

 

 

Name] Values Description
id wer defined names =pid—p_l> Mi 
    
class [user defined names =p cass="p_class'> Hi <]p>

CSS sty Pp siyle— color-red; Tont-weight-boldy'> Hi 
    

 

 

align —[Teft, right, comer Thorizontal alignment
width | numeric value or % value [ width of images and tables ete
Taeight_[ numeric value eight of images and tables etcChapter 1 HTML

1.5 Tables

sributes which are discussed in Table 1.2, ‘Table 1.3

 

In this se

 

mn, we will learn to draw tables along with some a
shows the list of tags available to croate the table, which are used in Listing 1.1

‘Table 1.3: Tags and attributes for ereating tables

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Tee Description ]
Table Beginning and end of table

ow of fable

th header cell

ta data coll

‘Attributes

Towspan | number of rows fo marge

‘olspan | number of columns to merge

order “width of border

cellpadding | width of whitespace between two border
‘allspacing | width of whitespace within « border
Dgcolor background color

Tordercalor_| color of horder

width width of table (wamerie or 7) |
height height of table (numeric) |
‘caption | caption Tor table j

 

 

'* Some of the attributes of Table 1.3 are used in below example,

Listing 1.1: Table with border and color

 



      

 

   

 

    
 

2 [cable border="1" bordercoler="slack” width="450" height="100">
» |ccaption>Table 1 : Various tags of table
4 | ste bgcolorstred" > 
.  
> Colunn 3¢/¢h>
a] cee
. tr bgcolor="cyan"> 
. eeaodata 2¢
> cea>Data 3¢/ea>
ap
|  
" New Data 1 
* New Data 2 / data >
2] 

ne [sto width an >
ws [ Table 2 : Width is 80Z

 

hesght="100">

 

 

a | 
” 
» ehoColunn 2
* eehoColunn 3¢/th>
‘  
ceapData 1e/ed> 




 

 



 

 

‘« Pig. 1.3 is the output of above code

 

Fig. 1.8: 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
ote

 

 

 

 

 

 

 

 

Table 1: ‘Text formatting
Tag Deseriation

B ‘kd

i italic
ims__[anderine
strike, de strike |
aap supencript —]
ub subseript_——]
Tig big eine tazt
small [small size text

 

 

 

 

 

‘+ Below are the some of the examples of text formatting, whose results are shown in Pig. Ll,

 

 


beldc/o> vext
    

striked
subseript text
    

 

xt
    

  

 

 

 

1.7 Images

Innage tag has two important attribues Le. ‘sre’ and ‘alt’ as described below,

 

‘* sre : tells the location of ‘image’ file e.g. in Line 2 the image 'logo.ipg’ will be searched inside the folder
‘imgChapter HTML

This is bold text
This is striked text
This is subscript text

Fig. 14: Text formatting

found. For example, in Line 6, the name of the
‘Missing Logo.jpg”

 

‘salt ; is the ‘alternate text? which is displayed if image is not
image is incorrectly written i.e. “logoa’ (instead of ‘logo’), therefore the value of ‘alt’ ie

 

will be displayed as shown in Fig. 1.5

 

<= Twages >
ing src=" ing/1ogo. jpg"

 


     

e="tMissing Loge. jpg" width="20%"/>

 

 

@ [ing sre="ing/logoa. Jpg"

 

30 MASTERY &

T

 

Fig. 1.5: Images

 

 

Note: We can use other attributes as well e.g. ‘height’, ‘align’ and ‘border’ etc18. 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)
clos unordered List ==>