Professional Documents
Culture Documents
HTML Tags and Its Uses
HTML Tags and Its Uses
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
This is the first HTML code Ti
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’ tag1a, 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 ‘stThis 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> Miclass [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 etcChapter 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 color2 [cable border="1" bordercoler="slack” width="450" height="100"> » |ccaption>Table 1 : Various tags of table 4 | ste bgcolorstred" > . -- header ~ . > Colunn 3¢/¢h> a] cee . tr bgcolor="cyan"> . eeaodata 2¢ > cea>Data 3¢/ea> ap | -- row => " New Data 12a> -- colunn span > * 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> -- date -— ceabData 2 ‘« 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 ‘imgChapter 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’ etc18. 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 ==> Unerdered List ‘<1ipPenc/1i>
Change bullets : ‘square’, ‘eixele! er ‘aise!
<1Pencil1i> <> ches ordered test = Ordered List
cel type="i? start Start from *<1pPencil13> <1pEraser1> <> col type='s'> Change style > 4", ch Definition list > ‘ HTML Definition List HTML 48 easy - HTML is good The outputs of above codes are shown in Fig, 1.6, 1.9 Links
Go to paragraph with id='paral' PythonDSP JavaScript Tutorial in same window. JavaScript Tutorial in new Window. Download PDF, DOC or Zip Files Email me Feeback email Note: We can change the color of the links using ‘alink (active link)’, ink’ 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 arca Radio button Checkbox Select box File select Buttons Submit and reset buttons Hidden inputChapter 1. HTML Table 1.5: List of control inputs and their attributes Contral Aetributes | Values Description Tupat : text wpe text, password value user-defined: inital value ia the area name user-defined name send to serv size numeric value | width of the text area maxlength | mumeric vale imaximnim number of characters Tapat + radio ‘type radio name user-defined ame send to serve user-defined value | value of the button i selected checked ‘heck the button by default Tapat check box | type check, name user-defined name send to Sova value user-defined value | value of the box if sel checked chock the box by default Tnpat button | type bation trigger client side script submit ‘Submit the form and run “action” reset reset form image create image button method | get, post Ect of post method action user-defined. action to perform on submit Tapat hidden | type hidden will not display on html, but can be used Tor sending information to server ‘tion box Tame wserdeined ame send to serve 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 mame user-defined name sond to s0rver * Below are the exmaple of the control inputs described in ‘Table 1.5 Fig, L7 is the output of above code, rious buttons. Note that method and action are defined ‘* Below is the code which shows the working of in this form, which will be triggered on ‘submit’ button. Lastly, ‘hidden’ option is used in this example “ Fig. L' is the output of above code,Chapter 1. HTML Text input Name : | e.g. meher21 Password : Radio button: name should be same Male “ Female © Infant Check box : name should be different Male () Female (1) Infant Select box : drop-down Female v Select box : scroll o fanned oe men Text area Initial Text x=2 Fig. 1.7: Various control inputs for creating form110. Forms Buttons and Hidden Name : | Meher Password : Say Hello Goto jQuery || Reset Fig. 1.8: Various buttons and hidden-input in the formChapter 2 Cascading Style Sheets (CSS) 2.1 Introduction le’, which is used for CSS is used to enhance the look of the web page. In Section 1.4.2, we saw the attribute ‘sty! changing the color of the text, Let's rewrite the example of ‘style’ as shown in next section, 2.1.1 Inline CSS '* Below code is an example of ‘inline CSS’, where the styles are defined inside the individual tags. <1D0CTIPE hemt> crimin new Window CoRR BHT PETChapter 1. HTML Unordered List * Pen ° Pencil « Eraser Change bullets : 'square'’, ‘circle’ or ‘disc’ o Pen 9 Pencil © Eraser Ordered List 1. Pen 2. Pencil 3. Eraser Change style : ‘i’, 'T', '1', 'a' or 'A' i. Pen ii. Pencil iii. Eraser Start from ‘v' v. Pen vi. Pencil vii. Eraser ML Definition List HTML is easy HTML is good Fig. 16: Lists110. Forms (continued from previous page) Go to paragraph withea href="iparal JavaSeript Tutorial in same uindow.
epee hres target="_blank"> JavaScript Tutorialca href='inailto:pythondsptgmail .con?subject=Feedbacktbody=Your feedback here”>Feeback email
yle="color:blue"> Heading 1 ev"color:blue"> Heading 3 (color:blue"> Heading 3 In the above code, we have three ‘headings sith font-color as ‘blue’. Suppose, we want to change the color to red, ‘then we must go to to individual ‘h3' tag and then change the color. ‘This is easy in this ease, but if we have 100 headings in 5 different ‘htznP files, then this process is uot very handy. In such eases, CS$ can be quite useful as shown in next section 2.1.2 Embedded CSS In the below code, the style is embedded inside the ‘style’ tag as shown in Lines 8-17. Here, we have defined two classes ie. 'a3_blue (Lines 21-23)’ and ‘h3_red (Lines 26-28)'. Then, the selectors at Lines 9 and 13 targets the class ‘h3_blue’ & ‘b8_2ed?, and change the color to blue and red xespectively. In this chapter, we will discuss the selectors (e.g. h3h3_blue) in more details Note! ‘* CSS, the comments are written between /* and *2.1. Introduction ‘¢ CSS has three parts, = Selectors e.g. p, h3.h3_blue ~ Properties ¢.g. color = Values of properties e.g. red <1D0CTIPE hemt> head WB.n3 blue /+change color to bluee/ color: blue; > BB.nared{ ——/+change color to rede/ coler:red; > ce class='ho_biue'> Heading 1 <3 clase='h3_biue!> Heading 3 hd class='h3_blue'> Heading 3 - Heading 1
a3 clase='h3 red!> Heading 3 ho_ved!> Heading 3 23 class= ‘* Below is the output of above code, 2.1.3 External CSS in this section, We can write the ‘CSS! code in different file and then import the file into ‘html’ document as show In this way, we can manage the files easily. ‘# The ‘CSS" code is saved in the file ‘my_css.css' which is saved inside the folder ‘asset /ess" 7+ asset/ess/my_cas.css +/ n3.n3_biuet ‘coler: blue; n3.n3. reat ‘coler:red ‘¢ Next, we need to import the CSS file into the ‘html’ file as shown in Line 7.Coates wa TEA ETChapter 2. Cascading Style Sheets ( Heading 1 Heading 3 Heading 3 Heading 1 Heading 3 Heading 3 Fig. 2.1: Embedded CSS (continued from previous page) cpeml>, ‘ css Tuterial Heading 1 zen'hi ding 3 hd class='h3 blue'> Heading 3 <3 classe!h3.red!> Heading 1 a3 clase='nd red!> Heading 3 ho_ved!> Heading 3 23 class=2.2 Basic CSS Selectors There are three types of selectors in CSS, * Element : can be selected using it’s name eg. ‘p!, ‘div’ and ‘hl! ete. ‘# Class : can be selected using ‘className’ operator e.g. ‘h3_blue’. TD : can be selected using ‘j/idName’ e.g. ‘j/my_para’ We will use following HTML. for understanding the selectors,23. Hierareby <= eas him <1D0CTIPE hemt> eo cheaa> Paragraph with class ‘c_head’ Paragraph with id '< head"
'* Bolow code shows the example of differen: selectors, and the output is shown in Fig. 2.2 7+ asset/esa/ny_cas. cee +/ /relement selections/ ns € ‘color: blue; /eclass selectione/ head font-family: cursive coler: orange; [eid selections/ #5 neaat font-variant: snall-capss coler: red: CSS Selectors Paragraph with class 'c_head’ PARAGRAPH WITH ID 'l_HEAD' Fig, 2.2; Selectors : element, class and id 2.3 Hierarchy In previous » the styling-operations ction, we saw the example of se sctors. In this section, we will understand the hierarchy Important: Below is the priority level for the CSS,Chapter 2. Cascading Style Sheets ( ‘* Priority level — ID (highest priority) = Class = Blement ‘# Iftwo CSS has same priority, then CSS rule at the last will be applicable. ‘+ Below is the btml code with following t = ‘p tag = ‘p’ tag with class ‘e_head” = ‘p’ tag with class ‘e_head? and id ‘i_head’ ES, <1D0CTIPE hemi> ens“ Paragraph with class ‘choad’
Paragraph with class ‘e head! and id ‘head!
Below is the CSS code. Let's understand the formatting of all three ‘p' tags individually. The results are shown im Fig. 23 ‘ ‘p' tag at Line 13 of html : Since, ‘id’ has highest priority, therefore CSS rule for #i_head’ (Line 12) will not be overridden by Line 24; hence the color is red. Line 13 has ‘p' tag, therefore ‘font-variant’ rule will be applied by Line 17. Also, this tag has class ‘c_head’, therefore ‘font? will be set to ‘cursive’, Hence, the line is “all-caps with font-cursive in red color”. * ‘p’ tag at Line 12 of html : Similarly, th her priority this line is oranage and font-family is ‘cursive’ 7 will make it alll caps ‘ ‘p’ tag at Line 10 of html : Color defined at Line 18 will be overridden by Line 24; hence the color will be blue. Also, Line 17 will make it all eaps. 7 [> asset /ese/ny_ces 6 /eclass selectione/ c head font-family: cursive; color: orange; /roverride the blue colore/ [eid selections/ #5 haat element selection: pt font-variant: seall-caps; coler: blue; Coa aE BT AT2.4, More selectors inued fom previous page) pt color: green; PARAGRAPH PARAGRAPH WITH CLASS 'C_HEAD PARAGRAPH WITH CLASS 'C_HEAD' AND ID 'I_HEAD' Fig. 2.3: Priority level for C88 rule 2.4 More selectors Table 2.1 shows the combinations of selectors to target the various clements of the HTML. Also, some of the ‘example of ‘Attribute selector’ is shown in this section. Table 2.1: List of selectors Selectors Description Mi, p, span ete clement selectorspan child selector (Span which is direct descendant of aT, Bz p ‘group selection (select hl, hZ and p] spanjny id] seloct ‘span’ with attribute ‘way_id” Span|my_id—m_span] | select "span" with attribute ‘my_id—m_span’ 2.4.1 Attribute selector 's Add below code at the end of the html fle, In these lines ‘custom attributes’ are added (ie. my_id) fan'> Span vith attribute ‘my id’ with value ‘m_span’ You might also like
The Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good LifeFrom EverandThe Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good LifeRating: 4 out of 5 stars4/5 (5834) The Gifts of Imperfection: Let Go of Who You Think You're Supposed to Be and Embrace Who You AreFrom EverandThe Gifts of Imperfection: Let Go of Who You Think You're Supposed to Be and Embrace Who You AreRating: 4 out of 5 stars4/5 (1093) Never Split the Difference: Negotiating As If Your Life Depended On ItFrom EverandNever Split the Difference: Negotiating As If Your Life Depended On ItRating: 4.5 out of 5 stars4.5/5 (852) Grit: The Power of Passion and PerseveranceFrom EverandGrit: The Power of Passion and PerseveranceRating: 4 out of 5 stars4/5 (590) Hidden Figures: The American Dream and the Untold Story of the Black Women Mathematicians Who Helped Win the Space RaceFrom EverandHidden Figures: The American Dream and the Untold Story of the Black Women Mathematicians Who Helped Win the Space RaceRating: 4 out of 5 stars4/5 (903) Shoe Dog: A Memoir by the Creator of NikeFrom EverandShoe Dog: A Memoir by the Creator of NikeRating: 4.5 out of 5 stars4.5/5 (541) The Hard Thing About Hard Things: Building a Business When There Are No Easy AnswersFrom EverandThe Hard Thing About Hard Things: Building a Business When There Are No Easy AnswersRating: 4.5 out of 5 stars4.5/5 (350) Elon Musk: Tesla, SpaceX, and the Quest for a Fantastic FutureFrom EverandElon Musk: Tesla, SpaceX, and the Quest for a Fantastic FutureRating: 4.5 out of 5 stars4.5/5 (474) Her Body and Other Parties: StoriesFrom EverandHer Body and Other Parties: StoriesRating: 4 out of 5 stars4/5 (824) The Sympathizer: A Novel (Pulitzer Prize for Fiction)From EverandThe Sympathizer: A Novel (Pulitzer Prize for Fiction)Rating: 4.5 out of 5 stars4.5/5 (122) The Emperor of All Maladies: A Biography of CancerFrom EverandThe Emperor of All Maladies: A Biography of CancerRating: 4.5 out of 5 stars4.5/5 (271) The Little Book of Hygge: Danish Secrets to Happy LivingFrom EverandThe Little Book of Hygge: Danish Secrets to Happy LivingRating: 3.5 out of 5 stars3.5/5 (405) The World Is Flat 3.0: A Brief History of the Twenty-first CenturyFrom EverandThe World Is Flat 3.0: A Brief History of the Twenty-first CenturyRating: 3.5 out of 5 stars3.5/5 (2259) The Yellow House: A Memoir (2019 National Book Award Winner)From EverandThe Yellow House: A Memoir (2019 National Book Award Winner)Rating: 4 out of 5 stars4/5 (98) Devil in the Grove: Thurgood Marshall, the Groveland Boys, and the Dawn of a New AmericaFrom EverandDevil in the Grove: Thurgood Marshall, the Groveland Boys, and the Dawn of a New AmericaRating: 4.5 out of 5 stars4.5/5 (266) A Heartbreaking Work Of Staggering Genius: A Memoir Based on a True StoryFrom EverandA Heartbreaking Work Of Staggering Genius: A Memoir Based on a True StoryRating: 3.5 out of 5 stars3.5/5 (231) Team of Rivals: The Political Genius of Abraham LincolnFrom EverandTeam of Rivals: The Political Genius of Abraham LincolnRating: 4.5 out of 5 stars4.5/5 (234) On Fire: The (Burning) Case for a Green New DealFrom EverandOn Fire: The (Burning) Case for a Green New DealRating: 4 out of 5 stars4/5 (74) The Unwinding: An Inner History of the New AmericaFrom EverandThe Unwinding: An Inner History of the New AmericaRating: 4 out of 5 stars4/5 (45) Computer NetworkingDocument34 pagesComputer NetworkingAkriti KcNo ratings yet ProjectDocument62 pagesProjectAkriti KcNo ratings yet CN PresentationDocument11 pagesCN PresentationAkriti KcNo ratings yet ProjectDocument9 pagesProjectAkriti KcNo ratings yet Lab WorkDocument5 pagesLab WorkAkriti KcNo ratings yet CN ReportDocument3 pagesCN ReportAkriti KcNo ratings yet EC ReportDocument15 pagesEC ReportAkriti KcNo ratings yet Graphics ReportDocument20 pagesGraphics ReportAkriti KcNo ratings yet Egov LabDocument21 pagesEgov LabAkriti KcNo ratings yet AI ReportDocument43 pagesAI ReportAkriti KcNo ratings yet ComputerDocument4 pagesComputerAkriti KcNo ratings yet MathematicaDocument7 pagesMathematicaAkriti KcNo ratings yet