What is HTML?
Ans: HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages and web applications.
Features of HTML:
1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of formatting tags.
3) It is a markup language, so it provides a flexible way to design web pages along with the text.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances the interest of browsing of the user.
5) It is platform-independent because it can be displayed on any platform like Windows, Linux, and Macintosh, etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it more attractive and interactive.
7) HTML is a case-insensitive language, which means we can use tags either inl ower-case or upper-case.
Html document structure
Ans:An HTML document is structured with two main elements: HEAD and BODY
Example of HTML.
1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>
Description of HTML Example
<!DOCTYPE>: It defines the document type or it instruct the browser about the version of HTML.
<html > :This tag informs the browser that it is an HTML document. Text between html tag describes the web document. It is a container for all other elements of HTML except <!DOCTYPE>
<head>: It should be the first element inside the <html> element, which contains the metadata(information about the document). It must be closed before the body tag opens.
<title>: As its name suggested, it is used to add title of that HTML page which
appears at the top of the browser window. It must be placed inside the head tag
and should close immediately. (Optional)
<body> : Text between body tag describes the body content of the page that is visible to the end user. This tag contains the main content of the HTML document.
<h1> : Text between <h1> tag describes the first level heading of the webpage.
<p> : Text between <p> tag describes the paragraph of the webpage.
HTML Tags
HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.
When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.
An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.
● All HTML tags must enclosed within < > these brackets.
● Every tag in HTML perform different tasks.
● If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)
Syntax
<tag> content </tag>
HTML Tag Examples
<!DOCTYPE>
<html>
<body>
<p> Paragraph Tag </p>
<h2> Heading Tag </h2>
<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag</u>
</body>
</html>
HTMLAttribute Tags
An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts − a name and a value
● The name is the property you want to set. For example, the paragraph <p>element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.
● The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right.
Syntax
1. <element attribute_name="value">content</element>
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is Style attribute</h1>
<p style="height: 50px; color: blue">It will add style property in element</p>
<p style="color: red">It will change the color of content</p>
</body>
</html>
Explanation of above example:
<p style="height: 50px; color: blue">It will add style property in element</p>
In the above statement, we have used paragraph tags in which we have applied style attribute. This attribute is used for applying CSS property on any HTML element. It provides height to paragraph element of 50px and turns it colour to blue.
<p style="color: red">It will change the color of content</p>
In the above statement we have again used style attribute in paragraph tag, which turns its colour red.
HTML Heading
A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display on the webpage. When you place the text within the heading tags <h1>.........</h1>, it is displayed on the browser in the bold format and size of the text depends on the number of heading.
There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest level h1 (main heading) to the least level h6 (least important heading).
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6 is used for least important.
Example
<!DOCTYPE html>
<html>
<body>
<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>
</body>
</html>
• An attribute align can be used within heading tags to specify the alignment of the text.
• Its values can be:
• Left: text lines are rendered flush left
• Center: text lines are centered
• Right: text lines are rendered flush right
• Justify: text lines re justified to both margins.
• Example: <h1 align="center">Heading no. 1</h1>
HTML Paragraphs
• The HTML <p> element defines a paragraph.
• A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.
HTML Display
• You cannot be sure how HTML will be displayed.
• Large or small screens, and resized windows will create different results.
• With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.
• The browser will automatically remove any extra spaces and lines when the page is displayed.
HTML Line Breaks
• The HTML <br> element defines a line break.
• The <br> tag is an empty tag, which means that it has no end tag
<!DOCTYPE html>
<html>
<head>
<title>space</title>
</head>
<body>
<pre>This paragraph
contains a lot of lines
in the source code,
but the browser ignores it.
</pre>
<p>This paragraph
contains a lot of lines
in the source code,
but the browser ignores it.
</p>
</body>
</html>
Fonts
• 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>
<p style="font-family:courier;">This is a paragraph.</p>
<!DOCTYPE html>
<html>
<head>
<title>font</title>
</head>
<body>
<!-- font size value can be from 1 to 7 and 3 being normal font size-->
<font face = "Times New Roman" size = "5">this is written in Times New
Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5" color="red">Comic Sans MS</font><br
/>
<h3 style="color:green">This is Green Color</h3>
<h3 style="color:red">This is Red Color</h3>
</body>
</html>
How to make form of students using HTML?
<!DOCTYPE html>
<html>
<head>
<title>Form Assignment</title>
</head>
<body bgcolor="Purple">
<h3 align="center"><u>STUDENT REGISTRATION FORM</u></h3>
<form>
<table align="center" bgcolor="Grey">
<tr>
<td>FIRST NAME:</td>
<td><input type="text" name="" placeholder="First Name">(max 30 characters a-z or A-Z)<br></td>
</tr>
<tr>
<td>LAST NAME:</td>
<td><input type="text" name="" placeholder="Last Name">(max 30 characters a-z or A-Z)<br></td>
</tr>
<tr>
<td>DATE OF BIRTH:</td>
<td><input type="date" name"" placeholder="mm/dd/yyyy"><br></td>
</tr>
<tr>
<td>EMAIL ID:</td>
<td><input type="email" name="" ><br></td>
</tr>
<tr>
<td>MOBILE NUMBER:</td>
<td><input type="tel" name="" placeholder="10 digits number"><br></td>
</tr>
<tr>
<td>GENDER:</td>
<td><input type="radio" name="gender" value=""/>MALE
<input type="radio" name="gender" value=""/>Female<br>
</td>
</tr>
<tr>
<td>UPLOAD PHOTO:</td>
<td><input type="file" name=""><br></td>
</tr>
<tr>
<td>ADDRESS:</td>
<td><input type="text" name""><br></td>
</tr>
<tr>
<td>CITY:</td>
<td><input type="text" name""><br></td>
</tr>
<tr>
<td>PIN CODE:</td>
<td><input type="text" name""><br></td>
</tr>
<tr>
<td>STATE:</td>
<td><input type="text" name""><br></td>
</tr>
<tr>
<td>COUNTRY:</td>
<td><input type="text" name""><br></td>
</tr>
<tr>
<td>HOBBIES:</td>
<td>Drawing<input type="checkbox" name"" value="Drawing">
Singing<input type="checkbox" name"" value="Singing">
Dancing<input type="checkbox" name"" value="Dancing">
Sketching<input type="checkbox" name"" value="Sketching">
Others<input type="text" name""><br></td>
</tr>
<tr>
<td>QUALIFICATION:</td>
<td>
<table bgcolor="white" border="1">
<tr>
<th>SL.NO</th>
<th>Examination</th>
<th>Board</th>
<th>Percentage</th>
<th>Year of Passing</th>
</tr>
<tr>
<td>1</td>
<td>Class X</td>
<td><input type="text" name""><br></td>
<td><input type="text" name""><br></td>
<td><input type="text" name""><br></td>
</tr>
<tr>
<td>2</td>
<td>Class XII</td>
<td><input type="text" name""><br></td>
<td><input type="text" name""><br></td>
<td><input type="text" name""><br></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>COURSES APPLIED FOR:</td>
<td><input type="radio" name="course" value=""/>Science
<input type="radio" name="course" value=""/>Management<br>
</td>
</tr>
</table>
</form>
</body>
</html>
Author Spotlight
Santosh Chapagain
Gmail: chapagainsantoshcs@gmail.com
Phone no: +977-9863512955
1 Comments
♥️♥️
ReplyDelete