 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome to KTL's HTML and CSS tutorials. Today we will study lesson 13.
In our previous lesson, we studied description list and nesting of lists.
Today we will study div tag and span tag.
HTML Div tag
<div> tag is used to define divisions in a web page. For example, we can define elements in a web page in two groups. We can define style for all elements in a group by mentioning style in <div> tag. We need not mention style for each and every element separately.Let us begin to write our coding. Copy our text from Lesson-12. There are two sections in our web page. One is description list and another is nested list.
Let us create first division for description list. Give tag <div> below <body> tag. Give </div> after </dl>. Create second section. Give <div> before <ol type="1"> and give </div> after </ol>.
Save this file as Lesson-13. Save same file as Lesson-13.html. Double click on HTML Document. Our two sections are displayed.
Now let us style these two sections. For the first div tag write
<div style="color:red;background-color:yellow">
For the second div tag write
<div style="color:yellow;background-color:black">
 |
| Figure 13-1. HTML div tag, HTML divisions |
Once again save file as "Lesson-13" and save same file as "Lesson-13.html". Click on the above figure for PDF file of source code. Double click on HTML document and see the output.
Text in the first list is displayed in red color and its background color is yellow. Second list has text in yellow and background color is black.
Thus, <div> tag is very powerful. We can style several elements in a web page by specifying style once in <div> tag. We can create a bi-color page using div tags.
HTML Span tag
<span> tag is used to format part of text. Let us specify colors of words using <span>. we can specify color of specific words in a sentence. Let us consider our script of Lesson-13. Go into our Notepad file and copy before </body> tag text from lesson-8. Copy from<! specifying color using color name> till end of second paragraph </p>.
Now let us use <span> here. Add following line just before word "blue".
<span style="background-color:blue">
Similarly add <span> tags for green, red, and yellow.
 |
| Figure 13-2 HTML span tag |
Again save this file as "Lesson-13". Save this same as "Lesson-13.html". Click on figure 13-2 for PDF file of source code. From Windows explorer double click on HTML document. See the output. Click on the following figure to see actual output in web page.
 |
| Figure 13-3 HTML div tag and HTML span tag |
Words for which we have used <span> tag are displayed in color.
Important Points:
1. <div> tag is used to group elements in a division or section.2. We can style all elements in a section by defining style attribute for that <div> tag.
3. <div> plays important role in designing layouts of a web page.
4. <span> is used to color a small part of text.
Lesson-12 Lesson-14
