Scribd
Upload
19 views

HTML Notes

Uploaded by

creatorcoder268
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views

HTML Notes

Uploaded by

creatorcoder268
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML

HTML stands for Hyper Text Markup Language . It is the standard markup language for creating Web
pages . It creates the structure of a Web page .

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

Example :-
Syntax - <!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph.</p>
</body>
</html>

Explaination :-
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

Note: The content inside the <body> section will be displayed in a browser. The content inside the <title>
element will be shown in the browser's title bar or in the page's tab.

Headings :-
headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h1> defines the least important heading .

Syntax - <h1> Heading </h1>

<h2> Heading </h2>

<h3> Heading </h3>

<h4> Heading </h4>

<h5> Heading </h5>

<h6> Heading </h6>

Output -

Heading
Heading
Heading
Heading

Heading

Heading

Paragraphs :-
paragraphs are defined with the <p> tag:

<p>Paragraph.</p>

Links :-
links are defined with the < a >(anchor) tag , it is used to go to respective page of link . The link's
destination is specified in the href attribute.

Syntax - <a href="file_name or file_path or page_link want to see">This is a link</a>

Attributes are used to provide additional information about its tag..

Images :-
Images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

<img src="image_path" alt="image_description" width="image_width" height="image_height">


<br> tag defines a line break, and is an empty element without a closing tag .

Syntax - <p>This is a <br> paragraph with a line break.</p>

title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the element .

Example :-
Syntax - <p title="I'm a tooltip">This is a paragraph.</p>

Formatting Elements :-
Formatting elements were designed to display special types of text:

 <b> - Bold text


 <i> - Italic text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <u> - underline text
 <sub> - Subscript text
 <sup> - Superscript text
 <bdo> - bi-direction

<bdo dir="rtl">This text will be written from right to left</bdo>

Table:-
A table consists of cells inside rows & columns. Each table cell is defined by a <td> and a </td> tag. td
stands for data . Each row starts with a <tr> and ends with a </tr> tag. tr stands for row.th stands for
heading . <th> elements are bold and centered,

Syntax - <table>
<tr>
<th>Roll no :</th>
<th>Name</th>
<th>Course</th>
</tr>
<tr>
<td>01</td>
<td>XYZ</td>
<td>Maths</td>
</tr>
</table>

To make a cell span over multiple columns, use the colspan attribute . The value of the colspan attribute
represents (the number of columns to span + 1)

To make a cell span over multiple rows, use the rowspan attribute . The value of the rowspan attribute
represents ( the number of rows to span + 1 )
Form:-
form is used to collect user input. The user input is most often sent to a server for processing. <form>
element is used to create an form for user input . <form> element is a container for different types of input elements,
such as: text fields, checkboxes, radio buttons, submit buttons, etc.

HTML <form> Elements


form element use for create different type data entry field and as per needs

 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>

<input> element is the most used form element. An <input> element can be displayed in many ways,
depending on the type attribute. Placeholder attribute set a default text inside enter space .

Text Fields - <input type="text"> defines a single-line input field for text input.

The <label> Element


The <label> tag defines a label for many form elements . <label> element is useful for screen-reader users,
because the screen-reader will read out loud the label when the user focuses on the input element . The
<label> element also helps users who have difficulty clicking on very small regions (such as radio buttons
or checkboxes) because when the user clicks the text within the <label> element, it toggles the radio
button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them
together.

The <select> element defines a drop-down list . The <option> element defines an option that can be
selected . By default, the first item in the drop-down list is selected . Use the size attribute to specify the
number of visible values . Use the multiple attribute to allow the user to select more than one value:

The <textarea> element defines a multi-line input field (a text area) . The rows attribute specifies the visible
number of lines in a text area . The cols attribute specifies the visible width of a text area.

The <button> element defines a clickable button .

Note: Always specify the type attribute for the button element. Different browsers may use different
default types for the button element.

The <fieldset> element is used to group related data in a form . The <legend> element defines a caption for
the <fieldset> element.

The <datalist> element specifies a list of pre-defined options for an <input> element . Users will see a drop-
down list of the pre-defined options as they input data . The list attribute of the <input> element, must refer
to the id attribute of the <datalist> element.
List -
lists allow web developers to group a set of related items in lists.

An Unordered list:

 Item
 Item
 Item
 Item

An Ordered list:

1. First item
2. Second item
3. Third item
4. Fourth item

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 .

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 .

Block and Inline Elements -


A block-level element always starts on a new line .A block-level element always takes up the full width
available (stretches out to the left and right as far as it can).

Two commonly used block elements are <p> and <div>.

The <p> element defines a paragraph , The <div> element defines a division or a section

Inline Elements -
An inline element does not start on a new line. An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.

Note: An inline element cannot contain a block-level element.

Span - The <span> element is an inline container used to mark up a part of a text, or a part of a
document. The <span> element has no required attributes, but style, class and id are common. When used
together with CSS, the <span> element can be used to style parts of the text

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy