Q What is HTML ? Who develop HTML ?
HTML stands for Hyper Text Markup Language, which is used to develop web pages.
HTML was created by Berners-Lee in late 1991.
HTML is tag based language.
HTML tags are predefined.
HTML tags are not case sensitive
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Hello World!</p>
</body>
</html>
Q2. Define the structure of HTML page.
Structure of HTML document:
There are two part of HTML Document head and body. Head part contain the title of document and Body part contain all other tags to display the html page
Define html tag or HTML element ?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
HTML tags are
<TITLE> : This tag is used to add title of the webpage. This tag is always nested in <head> tag.
<BR>: this tag is used to insert a line break in text
<OL>: This tag is used to create ordered list in a webpage.
<UL>: This tag is used to create unordered list in a webpage.
<LI> : This tag is used to create list item in a ordered or unordered list.
<DL>: This tag is used to create definition list in a webpage.
<HR> add horizontal ruler in page
<H1>: It is the largest heading tag. It is used to give heading in a webpage
<H6>: It is the smallest heading tag. It is used to give heading in a webpage
<B>: This tag is used to make text bold in a webpage
<U>: This tag is used to make text Underline in a webpage
<I>: This tag is used to make text Italic in a webpage
<A>: This tag is used to hyperlink one webpage to another webpage
<IMG> : This tag is used to insert image in a webpage
<TABLE>: This tag is used to insert table in a webpage
<P> : This tag is used to insert Paragraph in a webpage
The <html> tag represents the root of an HTML document.
The <html> tag is the container for all other HTML elements<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 1</h1>
<h5>This is heading 2</h2>
<h6>This is heading 3</h3>
Explain the tag <HEAD> and <TITLE>
The <head> tag is a container for all the head elements.
Title tag is always nested in head tag
It can include a title for the document, scripts, styles, meta information, and more.
This tag is placed between the <html> tag and the <body> tag.
Explain <body> tag
The <body> element defines the document body.
The <body> tag in HTML is used to define the main content present inside an HTML page. It is always enclosed within <html>tag.
It has a start tag <body> and an end tag </body>.
Attributes:
background: It contains the URL of background image. It is used to set the background image.
bgcolor: It is used to specify the background color of an image.
alink: It is used to specify the color of active link.
link: It is used to specify the color link.
text: It specify the color of text in a document.
vlink: It specify the color of visited links.
Explain font tag with all its attributes
<FONT> tag was used in HTML 4 to Specify the font size, font face and color of text in a web page. HTML 5 version not support this tag.
Color : Specifies the color of text
Size: Specifies the size of text
Face: Specifies the font of text
<HTML>
<HEAD>
<TITLE>Base Font</TITLE>
</HEAD>
<BODY>
<FONT size=7 color=”blue”> U </FONT>
<FONT size=14 color=”red”> sing the largest font </FONT>
<FONT size=18 color=”red”> sing the largest font </FONT>
<FONT size=24 color=”red”> sing the largest font </FONT>
</BODY>
</HTML>
it is recommended that you use CSS properties such as font, font-family, font-size and color to format the text in the document.
<p style="font-size:40px">This is a paragraph.</p>
<p style="font-size:11px">This is another paragraph.</p>
<p style="color:red">This is a paragraph.</p>
<p style="color:blue">This is another paragraph.</p>
<p style="font-family:verdana">This is a paragraph.</p>
<p style="font-family:'Courier New'">This is another paragraph.</p>
Define <basefont> tag
It is used to set the default text-color, font-size, font-family of all the text in the browser. It is not supported in HTML 5.
size attribute's value determines the document’s base font size. It have value between 1 and 7.
style is used in place of basefont
<html>
<head>
<style>
body {
color: red;
font-family: courier;
font-size: 50px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Explain IMG tag with all its attributes
<img> tag is used to insert image in html page
<img> tag is empty, it contains attributes only, and does not have a closing tag.
attributes
src attribute specifies the URL (web address) of the image. It specify the name of image file with location
alt attribute provides an alternate text for an image . If a browser cannot find an image, it will display the value of the alt attribute:
width and height attributes always defines the width and height of the image in pixels.
The border attribute specifies the width of the border around an image in pixels. Note: An image has no border by default.
You must then include the folder name in the src attribute if image file in another folder :
<img src=/images/smiley.gif" alt="Smiley face" height="42" width="42">
<img src="computer.jpg" alt="Picture not available" width="500" height="600">
Explain Scripting tags sub and sup
Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O.
H<sub>2</sub> O
The <sup> tag defines superscript text.
Superscript text appears half a character above the normal line, and is sometimes rendered in a larger font.
2<sup>3</sup>
html>
<body>
<P> 2<SUP>5</SUP> </P>
<P> H<SUB>2</SUB> O </P>
<P> H<SUB>2</SUB> SO<SUB>4</SUB> </P>
</body>
</html>
Define table and its nested tags
<table> tag is used to define table is html.
<tr> tag is used to define each row in table.
<th> tag is used to define table header. By default, table headings are bold and centered.
<td> tag: is used to define table data/cell.
Define the term hyperlink.
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
<a href="url">link text</a>
e.g
<a href="https://www.meraprayas.com/html/">Visit meraprayas</a>
e.g code
<html>
<body>
<a href="https://www.meraprayas.com/2020/06/html-basics.html">click here to Visit HTML tutorial on meraprayas </a><br>
<a href="https://www.google.com">Click here to visit google website</a> <br>
<a href="https://navodaya.gov.in">Click here to visit Navodaya website</a> <br>
<a href="http://www.cbse.nic.in/">Click here to visit cbse website</a> <br>
<a href="http://www.meraprayas.com">Click here to visit meraprayas.com</a> <br>
<a href="mailto:meraprayas2020@gmail.com">Click here to e mail meraprayas</a><br>
</body>
</html>
What is the use of mailto attribute ?
mailto: Used to create a link that opens a link that opens in the user's email program. it is used inside the href attribute
<a href="mailto:someone@example.com">
Define HR tag
The <HR> tag produces a horizontal line spread across the width of the browser window.
Size attribute allows you to set the size of the horizontal rule.
<P> This is conventional document text. </P>
<HR>
The next three horizontal rules are of different sizes.
<HR size=12>
<HR size =36>
width Attribute allow you to set the length of horizontal rules.
<P>
The following two rules have widths of 100 and 200 pixels respectively
<HR width=100><br><br>
<HR width=200>
</BODY>
Define audio tag
<audio> TAG is used to embed audio in a web page.
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
<audio controls>
<source src="horse.ogg"
type="audio/ogg">
<source src="horse.mp3"
type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Define video tag with attributes
To show a video in HTML, use the <video> element:
|
Tag |
Description |
|
Defines a video or movie |
|
|
Defines multiple media resources for media elements, such as <video> and <audio> |
|
|
Defines text tracks in media players |
<video width="320"
height="240" autoplay>
<source src="movie.mp4"
type="video/mp4">
<source src="movie.ogg"
type="video/ogg">
Your browser does not support the video tag.
</video>
Why form tag is used in HTML ?
The <form> tag in HTML is used to create form for user input.
There are many elements which are used within form tag. For example: <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>.
input: It is used to specify the input field for user.
textarea: It is used to specify for multi-line text input field for user.
button: It is used to perform an operation in a form by the user.
button may be submit button or reset button
label: It is used to give label to any tag like button, input etc.
<html>
<body style="font-size:160%;" bgcolor="red">
<form>
Enter Your name:<br>
<input type="text" name=" name"><br>
Enter Your email id:<br>
<input type="text" name="emailid"><br>
Enter Your mobile No:<br>
<input type="text" name="mobileno"> <br>
ENTER your address:<br>
<input type="textarea" name="textarea"> <br>
Select Your gender:<br>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br>
Select Your class:<br>
<input type="checkbox" name="class" value="XII" >
<label for="vehicle1"> XII CLASS</label><br>
<input type="checkbox" name="class" value="XI" >
<label for="vehicle1"> XI CLASS</label><br>
<input type="checkbox" name="class" value="X" checked>
<label for="vehicle1"> X CLASS</label><br>
<input type="submit" name="submit">
<input type="reset" name="reset">
</form>
</body>
</html>
What is CSS ?
CSS stands for Cascading Style Sheets
CSS is a language that describes the style of an HTML document.
CSS describes how HTML elements should be displaye
CSS can
be added to HTML documents in 3 ways:
- Inline - by using
the style attribute inside HTML
elements
- Internal - by using
a <style> element in
the <head> section
- External - by using
a <link> element to
link to an external CSS file
1. Inline CSS :
An
inline CSS is used to apply a unique style to a single HTML element.
An
inline CSS uses the style attribute
of an HTML element.
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
Example
The CSS color property defines the text color for an HTML element
<h1 style="color:blue;">A Blue Heading</h1>
The text color of the <p> element to red
<p style="color:red;">A red paragraph.</p>
The CSS font-size property defines the text size for an HTML element:
<p style="font-size:160%;">This is a paragraph.</p>
The CSS text-align property defines the horizontal text alignment for an HTML element:
<p style="text-align:center;">Centered paragraph.</p>
The CSS font-family property defines the font to be used for an HTML element
<h1 style="font-family:verdana;">This is a heading</h1>
The CSS background-color property defines the background color for an HTML element.
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Set background color for two different elements:
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
2.Using style tag in head section
An internal style sheet may be used if one single HTML page has a unique style.The internal style is defined inside the <style> element, inside the head section.
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
3. using CSS File(External )
step 1 : create HTML file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Step 2 : Create a css file named mystyle.css in same folder
An external style sheet can be written in any text editor, and must be saved with a .css extension.The external .css file should not contain any HTML tags.
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Comments
Post a Comment