[Q1] What is Html ? list and explain any 10 tags in html? [5 marks] or [4 marks] [note: explain 10 tags in this just explain tag and syntax no need to write example. Example is for your understanding ]
What is HTML? HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
The <!DOCTYPE html> declaration defines that this document is an HTML5 document The <html> element is the root element of an HTML page The <head> element contains meta information about the HTML page The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. The <h1> element defines a large heading The <p> element defines a paragraph. HTML PAGE STRUCTURE
BASIC TAGS
1. HTML tag
An HTML tag is a piece of markup language used to indicate the beginning and end of an HTML element in an HTML document. It starts with <html> and ends with backslash </html> Everything else in your web page then goes between these 2 tags.
<html> (all other page elements go here) </html>
2. HEAD tag
The head element contains information about the web page, as opposed to the web page content itself. There are many elements that you can put inside the head element, such as: Syntax : <head> </head> title (described below) link, which you can use to add style sheets and favicons to your page Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading. For example:
<html>
<head> <title>Title of the document</title> </head>
</html>
3.Title tag
The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
The <title> tag is required in HTML documents!
The <title> element:
efines a title in the browser toolbar
provides a title for the page when it is added to favorites displays a title for the page in search-engine results You can NOT have more than one <title> element in an HTML document.
For example:
<html> <head> <title>HTML Elements Reference</title> </head>
</html>
4.Body Tag
The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Note: There can only be one <body> element in an HTML document.
For example:
A simple HTML document:
<html> <head> <title>Title of the document</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body>
</html>
5. paragraph Tag ( <p> </p>)
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening and a closing tag as shown below in the example: The <p> tag defines a paragraph. Browsers automatically add a single blank line before and after each <p> element.
<body>
<p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p>
</body>
Output: 6. anchor Tag [<a></a>]
The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
Href attribute
The HTML <a> href Attribute is used to specify the URL of the page that the link goes to. When the href attribute is not present in the <a> an element that it will not be a hyperlink. This attribute is used to specify a link to any address. This attribute is used along with <a> tag.
the <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.
Tip: To link an image to another document, simply nest the <img> tag inside an <a> tag (see example below).
Syntax:
<img src = "Image URL" ... attributes-list/>
EXAMPLE:
Example To try following example, let's keep our HTML file test.htm and image file test.png in the same directory − Live Demo
Simple Image Insert
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html> This will produce the following result –
8. Line break tag [ <br> </br> ]
Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.
The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use
<br> it is not valid in XHTML.
Example 9. <DIV> </DIV>
An element which is mostly used to group elements and to act as a template for new controls. The div HTML tag is an element you will use to divide a significant part of an HTML document from other parts. For examplle, let’s say you have a list of products on your web page, you will use a div for each product.
10. Italics style fontt<I> </I>
If you have a lot of text, then you need to emphasise some words to let the reader know what is
important. Rather, with italics you can present text that is a little tilted to the right.
Example:
<i>CodeBrainer</i> has a lot of good courses.
Output:- 11. <STRONG> </STRONG>
Text is emphasised strongly - usually appears in bold, most of the time it looks like bold too. But it
has an additional meaning, that this text should be emphasised.
Example:
CodeBrainer has a lot of <strong>good</strong> courses.
[Q2.] Explain Table tag in detail The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. The HTML tables are created using the tag in which the tag is used to create table rows and tag is used to create data cells.
Syntax:
<table> <tr> <td> </td> </tr> </table>
1.table row <tr>,/tr>
The <tr> tag defines a row in an HTML table.
A <tr> element contains one or more <th> or <td> elements
2.Table heading <th></th>
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the <th> element) Data cells - contains data (created with the <td> element)
The text in <th> elements are bold and centered by default.
The text in <td> elements are regular and left-aligned by default.
3.Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.
3.Tables Backgrounds
You can set table background using one of the following two ways – ● bgcolor attribute − You can set background color for whole table or just for one cell. ● background attribute − You can set background image for whole table or just for one cell. You can also set border color also using bordercolor attribute. Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use these attributes. Example of html tables: [Q3.] what is list? Explain different types of list with example:
HTML lists allow web developers to group a set of related items in lists.
There are three types of list
1.Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output:
An ordered HTML list
1. Coffee 2. Tea 3. Milk 2.Unordered HTML List An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Output:
An unordered HTML list
Coffee Tea Milk 3.HTML Description Lists HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Description List Coffee - black hot drink Milk - white cold drink
