Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
12 views

HTML Notes

Uploaded by

creatorcoder268
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views

HTML Notes

Uploaded by

creatorcoder268
Copyright
© © All Rights Reserved
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