Page 175 - Webapplication11_C11_Flipbook
P. 175

Output:
                 Welcome                                                                  This content has been styled differently
                                                                                          than the rest of the web page by using
                                                                                                   the <div> tag.
                             Hello! I am Sammy. I study in class 12.

                                       I love to eat pizza and burgers!

                 I like to get up early in the morning and go for a walk.

                 Any kind of content can be placed inside the <div> tag!
                   2.9 THE <SPAN> TAG

                 The <span> tag is an inline container used for marking up a section of a text. It can be easily styled by using CSS or
                 controlled with JavaScript using the class or id attribute. The <span> tag is much like the <div> element, however, <div>
                 is an element at the block-level while <span> is an inline element. For example:

                 <html>
                 <body>
                 <h1> Me and My Sister </h1>
                 <p>My sister has long hair. She coloured it <span style="color:  blue; font-
                 weight: bold;"> blue. </span>
                 I have <span style="color:  brown; font-weight:  bold;"> brown </span> hair. I
                 didn't colour it. </p>

                 </body>
                 </html>
                 Output:

                 Me and My Sister


                 My sister has long hair. She coloured it blue. I have brown hair. I didn't colour it.



                                                   Lab Assignment ‘n Activity                   #Experiential Learning




                    Let us use both tags in HTML code to further understand the difference between the two.

                    <html>
                    <head>
                    <title>Simple HTML Example</title>
                    </head>
                    <body>
                    <div style="color: red; font-weight: bold; border: 2px solid blue;">
                    <h1>Artificial Intelligence</h1>
                    <p>Artificial  intelligence  (AI)  in  its  broadest  definition  refers  to  the
                    intelligence displayed by machines, particularly computer systems. <span
                    style="color: green; font-weight: bold;">It is a branch of computer science



                                                                                Website Building Using HTML and CSS  173
   170   171   172   173   174   175   176   177   178   179   180