HTML and Web Page
HTML means Hyper. Text Markup Language which is used for organizing, formatting and linking pages of Text , graphics and other information.
Hypertext means text (including graphics etc.) stored in electronic form which has cross-links between pages.
Markup means that it provides tags mostly in pairs that marks the start and end of the effect.
Before 1990, it was a difficult job to access the information through the Internet. But HTML has made this access very simple and fast. HTML pages are the interface to the Internet. Graphics, Sound,Video,Interactive Programs etc. can be added to HTML pages.
Requirements for web pages _
(1). Computer with Windows.
You can also use Macintosh or UNIX machine.
(2). For accessing the web pages, modem should be of atleast 28.8 KBPS standard. A 56 KBPS standard modem is good.
(3). Internet connection.
(4). A Web Browser Program to retrieve and display HTML web pages. Microsoft Internet Explorer, Mozilla Firefox and Google Chrome are the popular web Browser Programs.
What is a Web Browser ?
A Web Browser is a computer programm which interprets HTML commands written in an HTML document to collect, arrange and display the parts of a web page. It enables the user to display and interact with text, images, videos, music, games and other information.
Microsoft Internet Explorer is the most popular web browser program. this program can read the HTML text files and make the web page from the collection of these commands.
How to Write HTML Text and Commands in File ?
Windows Notepad and Macintosh simple text Editor are the popular editiors to create HTML web pages.
You can type HTML text in any of these editiors.
Notepad saves files as plain text.
You have to save the file with .htm or .html extension after selecting Save As option. If you save the file without .htm extension , the editior will save it with .doc or .txt extension. This file cannot be opened with web Browser. You can write the text with HTML commands. These commands are called tags. These commands are written within <> and </>.
Sof
ptware for Editing HTML _
1. Windows Notepad.
2. Microsoft FrontPage.
3. Macintosh simple Text.
4. MS Works, Claris Works.
5. HotDog, HTMLed.
6. Macromedia Dreamweaver.
7. Adobe Golive.
8. Hotmetal Pro 6.
9. Microsoft Word.
For starting, you can type a passage of text and try to format it. For a simple HTML document ,,, you have to do the following steps;
(i). <html/>
<head>
<tittle>Give Tittle Here </title>
</head>
<body>
........
..........
</body>
</html>
(For a title name you can write Practice Page or something else).
(ii). Between <body>....</body> tag, the text is written.
The document is always ended with </html> tag.
(iii). If you have to type a paragraph, write <P> tag at the beginning of the paragraph and </P> tag at the end of the paragraph.
(iv). For single-spaced line breaks you can use <br> tag at the point where you want the line break.
(v). <hr>tag is used to draw horizontal rules.
(vi). save the file with .htm or .html extension.
(vii). Open the file with Netscape Navigstor or Microsoft Internet Explorer . This will be your web page.
(viii). If you find something wrong with the page, you can make the correction by going back to the HTML text (Notepad file) and again open that page by the web Browser by saving the text file.
Structure of a Web Page_
The complete document is written between <html>and</html>tags. The <html> tag is a start tag whereas </html> tag is ending tag. Other main tags which are used in between these tags are; <head>, <body> and <title>.
<html>
<head>
.........
.........
</head>
<body>
.........
</body>
</head>
Tags can be written in any case; lower case or mixture of both.
The head tag is used for providing header information. This tag is a container tag. The document title is written in <head>tags.
Body tag is used to represent the body of the document. It is a container tag. The whole text to be represented as body of the document is written in between <body> and </body> tags.
Creating a Web Page_
1. Open Notepad by clicking start> All Programs > Accessories > Notepad. Notepad window will open on the screen.
2. Type the HTML commands and your text to be displayed as web page.
<html>
<head>
<title>MY FIRST WEB PAGE
</title>
<body>
This is my First Web Page
</body>
</html>
Simple HTML Commands Typed in Notepad.
Click File>Save. Save As dialog box will appear on the screen. Give the name to your file (with .html extension) in File name rectangular box.
From Save as type drop down list, select All Files option. select the location from Save in drop-down list where you have to save the file.
Finally click on save button. The file will be saved in the selected folder.
Lokking at The Web Page_
The HTML file created by you will be displayed as web page.
Steps:
1. Double clicking the icon of Internet Explorer present on desktop. Microsoft Internet Eplorer window will open.
2. Click File>Open. Open dialog box will appear on the screen.
 |
| Open Dialog Box |
3. Click Browse button from the Open dialog box. Another dialog box will appear .
4. Select the location or folder where your Notepad file with .html extension exists.
 |
| Locating a File |
5. After selecting the file, click on Open button. The file will open as a web Page on the screen.
.jpg) |
| File Opened By Internet Explorer |
HTML Tags_
HTML tags and their respective attributes are used to create HTML documents so that you can view them in browsers and other user agents.
There are two types of tags in HTML:
- Container tags
- Empty tags
Container Tags_
Container Tags are those tags which are used in pairs. One part is used as starting tag and the other part is used as closing tag. For example;
<font>and</font>tag is a container tag.
Empty Tags_
Empty tag is a solo tag(single tag). It does not have any tag. For example; <br> tag which is used for line break, is an empty tag.
Heading_
Heading styles are used to provide uniformity to various heading and subheading in terms of font and size.
Mostly the heading at the top of a web page appears in bold and larger size as compared to rest of the text.
Use of Headings_
For a big level heading, the text is enclosed within <h1>...</h1>tag.
For a slightly smaller heading, the text is enclosed within <h2>...</h2>tag.
For a little more small heading, the text is enclosed within <h3>...</h3>tag.
Mostly the above 3 tags are used for headings.
The following example shows the use of various heading tags.
HTML provides 6 level headings.
<h1>..</h1> First level headings
<h2>..</h2> Second level headings
<h3>..</h3> Third level headings
<h4>..</h4> Fourth level headings
<h5>..</h5> Fifth level headings
<h6>..</h6> Sixth level headings
An illustration has been given to show the use of headings in the documents.
 |
| Use of Heading Tags |
 |
| Web Page Showing Headings |
Centering Headings_
You can center the headings by the following methods:
By using <hn div align="center">
where n has the value from 1 to 6.
or
By using <center>tag.
The use of these two methods has been shown in the following illustration:
 |
| HTML File for Centering Headings |
Presenting and Arranging Text_
Line Break Tag_
To create a line break, type <br/> (br, a space and a forward slash).
The space and forward slash are the special closing portion of the line break tag. Now type a few more sentences.
 |
| Using Line Break Tag |
Paragraphs_
Paragraph tags (<p> and <p/>) are used to separate the text by leaving a space equivalent to one line between previous line and the next line. The break tag is used to start the text from the next new line. It does not leave a blank line space as the paragraph tag does.
 |
| Use of Paragraph Tag |
Text Formats : Working with Text_
Text can be shown in different styles and attractive looks in web pages. HTML supports various text formatting elements. Let us study them.
<font>Tag Pair_
Introducing the <font>tag and, of course, its sidekick, the </font>tag.
You use this tag pair to control the look of your text.
To control the size, color and typeface of your text, type <font>...</font>.
<html>
<head>
<title>Font Tag</title>
</head>
<body>
<font>This is the use of Font Tag.
</font>
</body>
</html>
Size Attribute_
You add attributes to the <font> tag in exactly the same way as you have added attributes to tags in earlier tasks.
<font size="value">
You can specify an absolute or relative size for text. To specify an absolute sixe, type <font size="X">, where x is a number from 1 to 7.
The default value of font size is 3. If you do not specify the size attribute, then the size of the font displayed will be 3.
Color Attribute_
This attribute sets the colour of fonts.
Type <font color="value">...</font> where value is specified using either the name of the colour or its hexadecimal value.
face Attribute_
Another importa CV nt attribute of the <font> tag is the face attribute. Add it just as you add any other attribute. Type <font face="value"> where value is the desired typeface.
Naming the Font_
You can specify the name of any font you desire in the face attribute. For instance, to specify the typeface Comic Sans MS, type <font face="comic sans ms">...</font>.
Bold Text_
You can create bold text on your page by specifying a bold-faced font in the attribute of the <font> tsg. For example, instead of choosing Trebuchet MS as your font, choose Trebuchet MS Bold . Another way is to use either the strong (<strong>...</strong>) or bold *<b>...</b>) tag pairs. The strong tag is a logical tag; the bold tag is a physical tag.
Italic Text_
To create italic text, use either the emphasis tag pair (logical) or the italic tag pair (physical). Type either
Comments
Post a Comment
—. . . . Article to be yet another "Top Influencers article" . . . . Your blog https://influencersarticle.blogspot.com/?m=1 is one of the most popular site. . . . 💯🔥📖