M.R.S PRIVATE CENTER: ICT (Chapter-04)

Showing posts with label ICT (Chapter-04). Show all posts

Sunday, July 16, 2017

HSC ICT (Chapter-04, Lecture-15)

mrsprivatecenterJuly 16, 2017ICT (Chapter-04) No comments

31) <IMG> Attributes
ALIGN: used to set the alignment of the text adjacent to the image. It takes the following values:
ALIGN = LEFT - Displays image on left side and the subsequent text flows around the right hand side of that image.
ALIGN = RIGHT - Displays the image on the right side and the subsequent text flows around the left hand side of that image.
ALIGN = TOP - Aligns the text with the top of the image.
ALIGN = MIDDLE - Aligns the text with the middle of the image.
ALIGN=BOTTOM - Aligns the text with the bottom of the image by default, the text is aligned with the bottom of the image.
Example: Using <IMG> tag with attributes
<HTML>
<HEAD>
<TITLE> Use of IMG Tag with its ALIGN Attribute</TITLE>
</HEAD>
<BODY>
<P>
<IMG SRC=shahidminar.jpg ALIGN=TOP>
Aligns the text with the Top of the image
</P>
<P>
<IMG SRC=shahidminar.jpg width="150" height="120" ALIGN=MIDDLE>
Aligns the text with the Middle of the image
</P>
<P>
<IMG SRC=shahidminar.jpg ALIGN=LEFT>
Displays image on left side and the subsequent text flows around the right
hand side of that image.
</P>
<P>
<IMG SRC=shahidminar.jpg width="150" height="120" ALIGN=RIGHT>
Displays image on right side and the subsequent text flows around the left hand side of that image.
</P>
</BODY> </HTML>

Figure : Images with height and width

HSC ICT (Chapter-04, Lecture-14)

mrsprivatecenterJuly 16, 2017ICT (Chapter-04) No comments

29) <IMG> Tag and the SRC Attribute

Images not only add beauty to a web page they also bring life to web page. Images can be sited in a web page by using <IMG> tag and set its SRC attribute equal to the URL of the image. The <IMG> tag is empty, which means that it contains attributes only, and has no closing tag and and is written as:
<IMG SRC = “URL”> Where IMG stands for image, SRC is the – Source of the image file, the source attribute tells the browser where to find the image. And URL – The URL points to the location where to find the image.
Example
<IMG SRC=shahidminar.jpg>
If an IMG tag is enclosed between the opening and closing P tags, the other image will start on a new line. Pictures on the web are usually either in gif or jpg format. The gif format is mostly used for pictures with solid blocks of color such as charts, or when an image requires a transparent background. The jpg format is suitable for pictures with slight color changes such as photos.

30) Attributes <IMG>

HEIGHT AND WIDTH
The height and width attributes enable you to specify the height and width of an image. The attribute values are specified in pixels.
Example
<HTML>
<HEAD>
<TITLE> IMG With Width and Height</TITLE>
</HEAD>
<BODY>
<IMG SRC =shahidminar.jpg width="150" height="120">
</BODY> </HTML>

Figure : image

HSC ICT (Chapter-04, Lecture-13)

mrsprivatecenterJuly 15, 2017ICT (Chapter-04) No comments

28) Nested Order List
One ordered list might contain one or more ordered list that is called as Nested Order lists.
Example: An HTML document nested.html shows the use of Nested Order Lists with attributes.
<HTML>
<HEAD>
<TITLE> Example Nested Ordered Lists</TITLE>
</HEAD>
<BODY>
<OL TYPE = A >
<LI> Programming Language
<OL TYPE = I>
<LI> COBOL
<LI> C
<LI> Java
<LI> C++
</OL>
<LI> Operating Systems
<OL TYPE = i>
<LI> Windows
<LI> Linux
<LI> Unix
</OL>
</OL>
</BODY>
</HTML>

Figure : Nested Ordered Lists with attributes

29) Unordered List <UL>
Unordered List also called as bulleted list, used to present list of items marked with bullets. An unordered list starts with in <UL> followed by <LI> (List Item) tag to delimit each individual list item. Use of <UL> is very similar to <OL> (ordered list).
The following is an example of Unordered List and Various Attributes
<HTML>
<HEAD>
<TITLE> Use of Unordered List </TITLE>
</HEAD>
<BODY>
<UL>
<LI> FRUITS
<UL>
<LI> Apple
<LI> Orange
<LI> Mango
</UL>
<LI> VEGETABLE
<UL>
<LI> Brinjal
<LI> Potato
<LI> Tomato
</UL>
</UL>
</BODY> </HTML>
When you display the page in a browser it will produce like the following figure which Displaying Unordered Lists in browser

Figure : Unordered Lists

HSC ICT (Chpter-04, Lecture-12)

mrsprivatecenterJuly 13, 2017ICT (Chapter-04) No comments

24) Strike through <strike>

To make the text appear strike through, we need to enclose it within <strike> and </strike> tags.
<strike>Strike Through Text</strike>
Output
Strike Through Text

25) Centering The Text <center>

To center the text, simply put your text within <center> and </center> tags.
<center>This Text is Centered </center>
Output
This Text is centered

26) Ordered List <OL>

Typically ordered list is rendered by numbering scheme using Arabic numbers, letters or Roman numbers. Ordered list are suitable for crating simple outlines because the list items are automatically numbered by the browser. Ordered list also called as Numbered list, is used to present a numbered list of item starting with “1”unless changing the <OL> tag type. An ordered list must begin with the <OL> followed by an <LI> list item tag.
Example: An HTML document orderedList.html shows the use of Ordered List
<HTML>
<HEAD>
<TITLE>
An Ordered List
</TITLE>
</HEAD>
<BODY>
<H1><U> An Order List </U></H1>
<OL>
<LI> Item 1
<LI> Item 2
<LI> Item 3
<LI> Item 4
</OL>
</BODY>
</HTML>
After saving the page display it in browser, you should see a numbered list like the following figure- OrderedList.html

27) Attributes of <OL> Tag
The <OL> tag has three basic attributes and these are compact, start and type.
TYPE: Type attributes is used to specify numbers or letters. By default the list Item markers are set to numbers 1, 2, 3… so on. Other values of TYPE attribute are:
Type = A Capital letter eg. A, B, C, D………
Type = a Small letter eg. a, b, c, d ………
Type = I Uppercase Roman Numbers eg. I, II, III, IV……
Type = i Lowercase Roman Numbers eg. i, ii, iii, iv……
Type = 1 eg. 1, 2, 3, 4………….
START: Start attribute is used to begin a list at point other than 1. The start value must be a number. For example if you want to start a list at the number 10, you might write it as follows
< OL type =1 start=10>.

HSC ICT (Chapter-04, Lecturer-11)

mrsprivatecenterJuly 12, 2017ICT (Chapter-04) No comments

21) Font Size and Colors

By using <FONT> Tag you can specify the font size and colors of the text.
FACE: Sets the normal font type, provided it is installed on the user‟s machine.
Example:
<FONT FACE="ARIAL"> the text will be displayed in Arial</FONT>
Example: An HTML document character formatting.html shows the use of Character Formatting Tags.
<HTML>
<HEAD>
<TITLE>
Use of Character Formatting Text Tags
</TITLE>
</HEAD>
<BODY>
<H1><I> Welcome to DCSA program </I></H1>
This is
<FONT COLOR="red" SIZE="6">
<U>Web Designing course</U>
</FONT>
</BODY>
</HTML>

22) Superscript <sup>

In mathematical equations we often need super script text. To add super

script <sup> and </sup> tags are used. Displays text in Superscript
Example
<HTML>
<HEAD><TITLE>
Display text in superscript
</TITLE></HEAD>
<BODY>
Example of superscript is =A<SUP>2</sup> + B<sup>2 </sup>
</BODY>
</HTML>

Figure 3.2 superscript

23) Subscript <sub>

In mathematical equations, like super script text, we also need sub script
text. To add sub script <sub> and </sub> tags are used. Display text in
Subscript.
Example
<HTML> <HEAD>
<TITLE>
Display underlined text
</TITLE> </HEAD>
<BODY>
Example of subscript is = H<SUB>2</SUB>o
</BODY>
</HTML>

Figure 3.3 subscript

HSC ICT (Cahpter-04, Lecture-09)

mrsprivatecenterJuly 11, 2017ICT (Chapter-04) No comments

Figure: Underlined tag

19) Small <small>

Display text in smaller font as compared to normal font
Example
<HTML>
<HEAD>
<TITLE>
Display text in smaller font
</TITLE>
</HEAD>
<BODY>
Smaller font of A is=<SMALL>A</SMALL>
</BODY>
</HTML>

Figure: Smaller font tags

20) Big <big>

Display text in larger font as compared to normal font

Example

<HTML>

<HEAD>

<TITLE>

Display text in larger font

</TITLE>

</HEAD>

<BODY>

Larger font of A is=<BIG>A</BIG>

</BODY> </HTML>

Figure: Larger font tag

HSC ICT (Chapter-04, Lecture-08)

mrsprivatecenterJuly 11, 2017ICT (Chapter-04) No comments

Figure : Boldface tag
The same effect can also be obtained by using <strong> and </strong> tags.

Figure : Italic tag

HSC ICT (Chapter-04, Lecture-07)

mrsprivatecenterJuly 11, 2017ICT (Chapter-04) No comments

15) Horizontal Rule Tag <HR>

Horizontal rules are used to visually break up sections of a document. The <HR> tag creates a line from the current position in the document to the right margin and breaks the line accordingly. So basically places horizontal line on a page. An empty tag <HR> basically used to draw lines and horizontal rules. It can be used to separate two sections of text.
<HR> accepts following attributes:
SIZE: Determines the thickness of the horizontal rule. The value is given as a pixel value.
Example: <HR SIZE="3">
WIDTH: Specifies an exact width of HR in pixels, or a relative width as percentage of the document width.
Example: <HR WIDTH="50%">, horizontal rule a width a 50 percent of the page width.
ALIGN: Set the alignment of the rule to LEFT, RIGHT and CENTER. It is applicable if it is not equal to width of the page.
NOSHADE: If a solid bar is required, this attribute is used; it specifies that the horizontal rule should not be shaded at all.
COLOR: Set the color of the Horizontal rule. Example: <HR COLOR="BLUE">

Example of <HR> with its attribute:
<HTML>
<HEAD> <TITLE>
Use of Horizontal Rule Tag with attributes</TITLE>
</HEAD>
<BODY> Bangladesh Open University <HR size="4" color="red" width="30%" align="left">
School of Science and Technology <HR width="30%" align="left"> Gazipur-1705
</BODY> </HTML>
Open your web page and this is what it should look like:

16) Character Formatting

Dear learners what do you think about the above sentences? Can we do that in HTML? The character formatting tags are used to specify how a particular text should be displayed on the screen to distinguish certain characters within the document. The most common character formatting tags are as follows:

HSC ICT (Chapter-04, Lecture-06)

mrsprivatecenterJuly 10, 2017ICT (Chapter-04) No comments

13) Paragraph tag <P>

In HTML document <P> tag indicates paragraphs, starts with the <P> opening tag and end with </P> closing tag, used to add an extra blank line before and after a paragraph.
Example
<HTML>
<HEAD>
<TITLE>
Line break
</TITLE>
</HEAD>
<BODY>
<P> Para-1Welcome to Bangladesh Open University </P>
<P> Para-2 School of Science and Technology </P>
</BODY>
</BODY>
</HTML>

Figure: Paragraph tag

14) Preformatted Text Tag <PRE>

<PRE> tag is used, where it requires total control over spacing and line
breaks such as typing a poem. Browser preserves your space and line
break in the text written inside the tag.
Example: An HTML document paragraphlinbrandpre.html shows the
use of <P>, <BR> and <PRE>.
<HTML>
<HEAD> <TITLE>
Use of Paragraph, Line break and preformatted text Tag
</TITLE> </HEAD>
<BODY>
HTML Tutorial
<P>
HTML stands for Hypertext Markup Language
It is used for creating web page. It is very simple
and easy to learn.
</P>

<P>
HTML stands for Hypertext Markup Language <BR>
It is used for creating web page. It is very simple <BR>
and easy to learn<BR>
</P>
<PRE>
HTML stands for Hypertext Markup Language
It is used for creating web page. It is very simple
and easy to learn.
</PRE>
</BODY>
</HTML>
Open your web page and this is what it should look like:

Figure : paragraph line break preformatted text

HSC ICT (Chapter-04, Lecture-05)

mrsprivatecenterJuly 09, 2017ICT (Chapter-04) No comments

11) Background

The background attribute of the <body> tag specifies the location of the image file to be displayed in the background of the web page. It takes an absolute or a relative path of the image file (the files with an extension .gif, .jpeg) that will be used as the background of the document. The image file will be tiled across the document.
Example
<BODY BACKGROUND="filename.gif"> </BODY>
Example: An HTML document attribute.html that shows the use of attributes with the <BODY> tag
<HTML>
<HEAD>
<TITLE>
Use of Attributes with the Body Tag
</TITLE>
</HEAD>
<BODY BGCOLOR="yellow">
<BODY TEXT="red">
TOPMARGIN ="50"
LEFTMARGIN="50">
Your document text will be indented 50 pixels from the left hand and 50 pixels from the top of the page.
The body color is yellow and text color is red.
</BODY>
</HTML>

Figure : Viewing HTML document in browser- attribute.html

12) Heading <H1>.............<H6>
The purpose of the heading tag is to indicate different heading levels in a document. HTML has six header tags <H1>, <H2>...........<H6> used to specify section headings. Text with header tags is displayed in larger and bolder fonts than the normal body text by a web browser. Every header leaves a blank line above and below it when displayed in browser. Let‟s write the following HTML code to see how the heading levels will look on a browser.
<HTML>
<HEAD>
<TITLE>
Section Heading
</TITLE>
</HEAD>
<BODY>
<H1> Section Heading Level 1 </H1>
<H2> Section Heading Level 2 </H2>
<H3> Section Heading Level 3 </H3>
<H4> Section Heading Level 4 </H4>
<H5> Section Heading Level 5 </H5>
<H6> Section Heading Level 6 </H6>
</BODY>
</HTML>
Now save the file as headings.html and open the file in your browser.
Figure Six heading levels show you what you would see.

HSC ICT (Chapter 04, Lecture-04)

mrsprivatecenterJuly 09, 2017ICT (Chapter-04) No comments

8) Viewing HTML document

Once you have saved your document it‟s time to see how it looks like. To display the page follow the following steps:
1. Open any web browser (here we will see Mozilla Firefox).
2. Click the file menu.
3. Choose the Open file option.
4. Navigate the file where you saved the file and select it.

5. Click open.

Your file should be displayed in the browser and it should look like as follows:

Figure : Showing HTML document in browser

9) HTML Attributes

HTML elements can have attributes. HTML Attributes are property of the elements which may have values and these attribute values are always be enclosed in quotes. Attributes are used to modify or to customize HTML elements. We may want to change background color, font size and color or perhaps change the width of a table; all of these and more can be done using attributes. Attributes are always specified in the opening tag. Attributes consist of a name and a value separated by an equals (=) sign
(name/value pairs like: name = "value"). For example, consider the tag BODY, which marks as the beginning (or end) of HTML body. This tag can have several attributes; one of them is BGCOLOR, specific the background color of the document. <BODY bgcolor = ”background_color” background =“background_image”>. Double style quotes are the most common, but single style quotes are also allowed.

10) <BODY> Attributes

BGCOLOR: The default background color of a web page is white. We can change the default background color by using the bgcolor attribute of the <body> tag.
Example
<BODY BGCOLOR="green"> </BODY>
The above HTML code will set the background color to green. You can either specify the color name or RGB hexa value of the color. TEXT: used to set the color of the text of the document.
Example
<BODY TEXT="red"> </BODY>
MARGINS: set the left /right margin of the document. LEFTMARGIN: set the left margin of the document.
Example
<BODY LEFTMARGIN="20"> </BODY>
TOPMARGIN: set the top margin of the document.

Example
<BODY TOPMARGIN="20"> </BODY>

HSC ICt (Chapter-04, Lecture-03)

mrsprivatecenterJuly 09, 2017ICT (Chapter-04) No comments

6) Creating HTML Document

Dear learners now let‟s concern ourselves to create our first web page using the above tags that we have learned in the previous lesson.
Follow the steps to create a webpage and view in a browser:
Step-1: First of all we will need a HTML editor for creating html page.
Open text editor Notepad
(Click on Star- All Programs- Accessories- Notepad)

Figure- Notepad
Step-2: Write the following HTML code into your Notepad:
<html>
<head>
<title>
My first Page
</title>

</head>

<body>
WELCOME TO MY FIRST WEB PAGE
</body>

</html>

Figure- HTML document in Notepad

Saving HTML Document

To save your file follows the following steps
Step-1: Click on file
Step-2: Click save
Step-3: Select the location where you want to save (For example H:\HTML Coding)
Step-4: Write file name (as myfirstpage.html)
Step-5: Click save as type and choose All Files
Step-6: Click Encoding and choose UTF-8
Step-7: Click save.

Figure 2.3 Saving the HTML document in Notepad

HSC ICT (Chapter-04, Lecture-02)

mrsprivatecenterJuly 08, 2017ICT (Chapter-04) No comments

3) Structure of HTML Code

i) HTML documents are structured into two parts; one is the HEAD, and another is the BODY.
ii) Both of these are contained within the HTML tags.
iii) The HEAD contains TITLE.
iv) The BODY contains all the content.
v) Elements allowed inside the HEAD, such as TITLE, are not allowed inside the BODY.
The Format is
<HTML>
<HEAD>
.............
.............
</HEAD>
<BODY>
.............
.............
</BODY>
</HTML>
To create a HTML document the essential tags that are required are
<HTML>.............</HTML>
<HEAD>.............</HEAD>
<BODY>.............</BODY>

4) HTML Tag <HTML>

The <HTML> tag encloses all other HTML tags. You can create an HTML document without using the <HTML> tags, and your browser can still read and display it. But it is good practice to start with <HTML> and stop with </HTML> tags.
The format is
<HTML>
</HTML>

5) HEAD Tag <HEAD>

<HEAD> tag comes after the HTML tag. It contains TITLE tag which is used to provide a title to a page that displays at the top of the browsers.
The Format is
<HEAD>
<TITLE>
Desired title write here
</TITLE>
</HEAD>

Sunday, July 16, 2017

Saturday, July 15, 2017

Thursday, July 13, 2017

24) Strike through <strike>

25) Centering The Text <center>

26) Ordered List <OL>

Wednesday, July 12, 2017

21) Font Size and Colors

22) Superscript <sup>

23) Subscript <sub>

Tuesday, July 11, 2017

18) Underlined Tag <u>

19) Small <small>

20) Big <big>

17) Boldface Tag<b>

18) Italic Tag <I>

15) Horizontal Rule Tag <HR>

16) Character Formatting

Monday, July 10, 2017

13) Paragraph tag <P>

Figure: Paragraph tag

14) Preformatted Text Tag <PRE>

Sunday, July 9, 2017

11) Background

9) HTML Attributes

10) <BODY> Attributes

6) Creating HTML Document

Saving HTML Document

Saturday, July 8, 2017

3) Structure of HTML Code

4) HTML Tag <HTML>

5) HEAD Tag <HEAD>

Labels

Blog Archive

Recent Posts

Unordered List

Pages

Theme Support