Well, I’m gonna continue the post before about HTML. I’m going to tell and show you what’s a structure of a HTML web page look like and also the tags that are used in making HTML.
Structure of HTML
A HTML program begins by the tag <HTML>. This tag tells the browser that this is the start of the HTML program. The closing tag in the HTML program is </HTML>. This tag tells the browser that this is the end of the HTML document.
The head tag is opened and closed by the <Head> and </Head>. The browser won’t display this header information.
The title tag specifies the title of the web page. It is opened and closed by the <Title> and </Title> tags. This title appears in the title bar of the browser window.
The body contains the main content of a document. It is opened and closed by the <Body> and </Body> tags. It contains all the text and images that make up the page, together with the HTML element that control/format page.
Attributes of Body Tag
Tags can have attributes . Attributes can provide additional information about the HTML elements on the web page.
Bgcolor attribute gives the specified background color to the document.
To set an image in the background of the file that will be tiled across the browser window. Image with gif and jpeg extension can be used.
Heading are defined with the <h1> to <h6> tags. The <h1> tag defines the largest heading. The <h6> tag defines the smallest heading. HTML automatically adds an extra blank line before and after a heading.
Paragraphs are defined with the opening tag <p> tag and closing tag </p>. HTML automatically adds an extra blank line before and after a paragraph.
<p> A physiological sensation received by the ear is called Sound</p>
<p> Sound is produced when an object vibrates</p>
The <br> tag is used when you want to end a line, but don’t want to start a new paragraph. The <br> tag forces a line break wherever you place it.
The <hr> tag inserts horizontal lines in the web page. The size attributes give thickness to the horizontal ruler value, specified in terms of pixels. The default horizontal rule is always as wide as the page. With the width attributes, one can specify an exact width in pixel. With the align attribute, it is possible to specify the horizontal alignment of the rule as right, left, or centre.
<hr size=5 width=800 align=“center” color=“purple”>
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. The comments won’t appear on the screen (on the web page). Comments must be entered as shown:
<!–This is a comment–>
Character Formatting Tags
HTML Code :
<b>bold</b> = bold
<u>underline</u> = underline
<i>italic</i> = italic
<center>center</center> = center
Font is used to apply different font styles and sizes to the text in a web page. Font element tag is a paired tag. Font attributes :
Is represented as <font size=value>. Its valid values ranges from 1-7 and default size is 3
To changes the color of the text that will appear on the screen.
<font color=#FF0000>this is for red color</font>
<font color=red>this is for red color</font>
To sets the font face type face that will be used to display the text on the screen.
<font face=“century gothic” size=3 color=“red”> Set the font face to Century Gothic, the font size to 3, and font color to red </font>
Images can be embedded inside the documents using <img> tag. The <img> tag is empty, which means that it contains only attributes and no closing tag. To display an image on a page, you need to use the scr attribute. Src stands for “source”. The URL points to the location where the image is stored.
Image’s alignment can be set using the ALIGN-TOP/MIDDLE/BOTTOM/RIGHT /LEFT field. All browsers support GIF and JPEG file formats for images and either of them can be used. The border attribute:
– specifies the width of the border around an image.
– The value should be specified in terms of pixels
<img src=”url” align=”bottom” border=1>
The Alt Attribute is used to define an alternate text for an image. The value of the Alt Attribute is an author-defined text.
<img src=“colachreachus.gif ” alt=“Reach Us”>
It tells the reader what is missing on a page if the browser cannot load images. The browser will then display the alternate text instead on the image.
The text that’s placed within this tag can be scrolled in the specified direction. The direction of scrolling should be specified with the direction attribute.
<marquee direction=right>Welcome to JPS</marquee>
This tag makes the text to scroll from right to left by default
- Direction attribute: right/left/up/down
<marquee direction=right>Welcome to JPS</marquee>
This attribute can be set to SCROLL, SLIDE or ALTERNATE. SCROLL means the text will start completely off on one side, scroll all the way across and completely off the screen and then start again. SLIDE means that it will start completely off on one side, scroll in and stop as soon as it touches the other margin. ALTERNATE means the text will bounce back and forth within the marquee.
<marquee bgcolor=“red” width=293 height=115 behavior=“alternate”> Welcome to JPS</marquee>
So this is how you design HTML. Now you can try it by yourself and create a web page. In the next post of HTML, I will show and tell you about link,list, and table. Hope this post can help you.