Scribd
Upload
16 views

HTML_Notes

computer

Uploaded by

rudra rajput
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

HTML_Notes

computer

Uploaded by

rudra rajput
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

https://www.knowledgeboat.

com/learn/class-10-cbse-code-165-sumita-computer-
applications/solutions/P3j4Q/basic-html#theoretical-questions

html

HTML is the standard markup language for creating Web pages. HTML is a global
markup language for web. You can create any a webpage using HTML and any
browser can open that HTML file.

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.

Features of HTML
 It is easy to learn and easy to use.
 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to the text.
 It is a markup language.
HTML Page Structure
The basic structure of an HTML page is shown below. It contains the essential
building-block elements (i.e. doctype declaration, HTML, head, title, and body
elements) upon which all web pages are created.
A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

 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

Advantages of HTML
 HTML is used to build websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript, etc.
Disadvantages of HTML
 HTML can only create static web pages. For dynamic web pages, other
languages have to be used.
 A large amount of code has to be written to create a simple web page.
 The security feature is not good.

We can Run HTML program using Editor.

What is an HTML editor?


An HTML editor is a tool/software that can create, edit, and manage HTML code.
They provide various features to simplify the process of writing HTML code.One can
write HTML code in any text editor and save the file with an extension “.html” or
“.htm” to see the working of that file.
HTML Editors List
 Notepad
 GeeksforGeeks IDE
 Brackets
 Sublime Text Editor
 Atom
 Visual Studio Code

What is an HTML Element?


Some key points about HTML elements
1. Tag
 An opening tag indicates where the content begins: <tagname>.
 A closing tag indicates where the content ends: </tagname>.
 The actual content resides between the opening and closing tags.
2. Case Sensitivity:
 HTML tags are not case-sensitive. For example, <B> and <b> both
represent bold text.
 However, it’s a best practice to use lowercase tags for consistency.

HTML Element Descriptions

It is used to tell the browser where the content


Opening tag(<tagname > )
material starts.

It is used to tell the browser where the content


Closing tag(</tagname>)
material ends.

It is the actual content material inside the opening


Content
and closing tags.

Comments are enclosed within <!– and –>.


Anything written inside these tags is treated
Comment as a comment and is not displayed by the
browser. They enhance the readability of the
code, making it easier to understand the
structure and purpose.

Different Ways to Comment in HTML


There are two ways to comment in HTML. Each type of comment can be used to
add comments in HTML.
Comment Descriptions Syntax

Single- The single-line comment is given inside the ( <!-


<!-- comment -->
line - comment --> ) tag.
Comment Descriptions Syntax

<!-- Multi
It follows the syntax of a single-line comment by
Multi-line Line
adding multiple lines in the comment.
Comment -->

Heading Style : By default 6 type of Heading Style

H1, H2,H3,H4,H5,H6 font size decrease

HTML Lists :
An HTML list is a structured record of related information used to display data or
information on web pages in an ordered or unordered form. Lists are fundamental
for organizing content in a clear and readable way.

Types of HTML Lists :


There are three main types of lists in HTML:

1. Unordered Lists : using <UL/> </UL> tag with <li>


2. Ordered Lists : using <OL/> </OL> tag with <li>
3. Description Lists : The <dl> tag is used to represent the description list.
This tag is used with <dt> and <dd> tag.
Code and Output
<body>
<h2>Welcome To Computer Learning Zone</h2>
<h5>List of available courses</h5>
<ul>
<li>Data Structures & Algorithm</li>
<li>Web Technology</li>
<li>Aptitude & Logical Reasoning</li>
<li>Programming Languages</li>
</ul>
<h5>Data Structures topics</h5>
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
<li>Queues</li>
<li>Trees</li>
<li>Graphs</li>
</ol>
<h3>Description Lists</h3>
<dl>
<dt>Computer</dt>
<dd>A Computer is an Electronic Device.</dd>
<dt>Protocol</dt>
<dd>Protocol is a set of Rules.</dd>
</dl>
</body>
OUTPUT:
The HTML <img> tag is used to embed an image in a web 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 is empty, it contains attributes only, and does not have a
closing tag.

The <img> tag has two required attributes:

 src - Specifies the path to the image


 alt - Specifies an alternate text for the image

Syntax
<img src="url" alt="alternatetext">
Image Size - Width and Height
<img src="D:\Flower3.JPG" alt="Flower" style="width:500px;height:600px;">
HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a
server for processing.

The <form> Element

The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements, such as:
text fields, checkboxes, radio buttons, submit buttons, etc.
The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on


the type attribute.

Here are some examples:

Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting
one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or
more of many choices)
<input type="submit"> Displays a submit button
(for submitting the form)
<input type="button"> Displays a clickable button
Code
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Shubhanshu"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Shukla"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"</p>
</body>
</html> OUTPUT
The <label> Element
Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <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.

Radio Buttons
The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

<html>

<body>

<h2>Radio Buttons</h2>

<p>Choose your favorite Web language:</p>

<form>

<input type="radio" id="html" name="fav_language" value="HTML">

<label for="html">HTML</label><br>

<input type="radio" id="css" name="fav_language" value="CSS">

<label for="css">CSS</label><br>

<input type="radio" id="javascript" name="fav_language"


value="JavaScript">

<label for="javascript">JavaScript</label>
</form> </body>

</html>

Checkboxes
The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<!DOCTYPE html>
<html>
<body>

<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Jeep">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>
The Submit Button
The <input type="submit"> defines a button for submitting the form data to a form-
handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

<!DOCTYPE html>

<html>

<body>

<h2>The name Attribute</h2>

<form action="/action_page.php">

<label for="fname">First name:</label><br>

<input type="text" id="fname" value="Deepesh"><br><br>

<input type="submit" value="Submit">

</form>

<p>If you click the "Submit" button, the form-data

will be sent to a page called "/action_page.php".</p>

<p>Notice that the value of the "First name" field will


not be submitted, because the input element does

not have a name attribute.</p>

</body>

</html>

The Name Attribute for <input>


Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

OUTPUT

Table Tag

Definition and Usage


Creating tables in HTML involves several elements that define the structure and
content. The primary tags used are <table>, <tr>, <td>, and <th>.

 HTML <table> Tag: This tag is used to create the table that wrap the rows and
columns within it.
 HTML <tr> Tag: Stands for "table row" and is used to create a row within the
table.
 HTML <td> Tag: Represents "table data" and is used to create standard cells
within a row.
 HTML <th> Tag: Represents "table header" and is used to create header cells
within a row.
Example :
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>Electronics</td>
<td>$800</td>
</tr>
<tr>
<td>Bookshelf</td>
<td>Furniture</td>
<td>$150</td>
</tr>
<tr>
<td>Coffee Maker</td>
<td>Appliances</td>
<td>$50</td>
</tr>
</table>
</body>
</html>

Output :

Table Background Color & Image


We can use CSS to set the background color or image or we can use the HTML
attributes for the same, here in both the example we will use the HTML attribute.

 HTML bgcolor Attribute: We can set background color for whole table or just for one cell.
 HTML background Attribute: We can set background image by using the HTML
background attribute.

You can also set border color also using bordercolor attribute.

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background Color</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Output :

You might also like