Skip to main content

HTML BASIC

Fundamentals of HTML

  • HTML stands for Hypertext Markup Language,and it is the most widely used language to write Web Pages.
  • Hypertext refers to the way in which Web pages(HTML  documents) are linked together. Thus the link available on a webpage are called Hypertext.
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head> 
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>


As told earlier, HTML is a markup language and makes use of various tags to
format the content. These tags are enclosed within angle braces <Tag Name>.
Except few tags, most of the tags have their corresponding closing tags. For
example <html> has its closing tag </html> and <body> tag has its closing tag
</body> tag etc.
A typical HTML document will have following structure:
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
The <!DOCTYPE> declaration tag is used by the web browser to understand the
type and version of the HTML used in the document. Current version of HTML is 5
and it makes use of the following declaration:
<!DOCTYPE html>
Heading Tags
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.
Line Break Tag
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.
NB: 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:
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>HELLO<br />
COLLEGETAK<br />
NOTES<br />
WEB DEVELOPMENT </p>
</body>
</html>
You can use <center> tag to put any content in the center of the page or any
table cell.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>Welcome to COLLEGETAK</p>
<center><p>Welcome to this Blog</p></center>
</body>
</html>
The <p> tag offers a way to structure your text into different paragraphs.
Each paragraph of text should go in between an opening <p> and a closing
</p> tag as shown below in the example:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title><
/head>
<body>
<p>Here is a first paragraph of text.</p>
<p><h2>Here is a second paragraph of text.</h2></p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Centering Content
You can use <center> tag to put any content in the center of the page or any table
cell.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>Welcome to COLLEGETAK</p>
<center><p>Welcome to this Blog</p></center>
</body>
</html>
Horizontal Lines
Horizontal lines are used to visually break up sections of a document. The <hr>
tag creates a line from the current position in the document to the right margin
and breaks the line accordingly.
For example you may want to give a line between two paragraphs as in the given
example below:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr >
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
Sometimes you want your text to follow the exact format of how it is written
in the HTML document. In those cases, you can use the preformatted tag
<pre>.
Any text between the opening <pre> tag and the closing </pre> tag will
preserve the formatting of the source document.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>function testFunction( strText )
{
alert (strText)
}
</pre>
</body>
</html>
An HTML element is defined by a starting tag. If the element contains other
content, it ends with a closing tag, where the element name is preceded by a
forward slash as shown below with few tags:
Start Tag Content End Tag
<p> This is paragraph content. </p>
<h1> This is heading content. </h1>
<div> This is division content. </div>
NB: There are some HTML elements which don't need to be closed, such as<img.../>, <hr /> and <br /> elements. These are known as void elements.
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.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>
The four core attributes that can be used on the majority of HTML elements are:
  • id
  • title
  • class
  • style
The id attribute of an HTML tag can be used to uniquely identify any element
within an HTML page. There are two primary reasons that you might want to use
an id attribute on an element:
  • If an element carries an id attribute as a unique identifier it is possible to identify just that element and its content.
  • If you have two elements of the same name within a Web page (or style sheet),        you can use the id attribute to distinguish between elements that have the same name.
Example:
<p id="html"> Simple HTML Text</p>
<p id="css">HTML with Cascading Style Sheet properties</p>
The title attribute gives a suggested title for the element.
The behavior of this attribute will depend upon the element that carries it,
although it is often displayed as a tooltip when cursor comes over the element or
while the element is loading.
Example:
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title><
/head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
The class attribute is used to associate an element with a style sheet, and
specifies the class of element.
The value of the attribute may also be a space-separated list of class names.
For example:
class="className1 className2 className3"
The style Attribute
The style attribute allows you to specify Cascading Style Sheet (CSS) rules
within the element.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body><p style="font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>
Anything that appears within <b>...</b> element, is displayed in bold as shown
below:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>Welcome to <b>COLLEGETAK</b> WEB DEVELOPMET NOTES</p>
</body>
</html>
Anything that appears within <i>...</i> element is displayed in italicized as
shown below:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>Welcome to <i>Collegetak</i>Blog</p>
</body>
</html>
Anything that appears within <u>...</u> element, is displayed with
underline as shown below:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>Welcome to <u>Collegetak</u>blog</p>
</body>
</html>
Anything that appears within <strike>...</strike> element is displayed
with strikethrough, which is a thin line through the text as shown below:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>This is completely <strike>bad</strike>idea</p>
</body>
</html>
The content of a <sup>...</sup> element is written in superscript; the font
size used is the same size as the characters surrounding it but is displayed half a
character's height above the other characters.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>An example of <sup>superscript</sup> formatting tag</p>
</body>
</html>
The content of a <sub>...</sub> element is written in subscript; the
font size used is the same as the characters surrounding it, but is displayed
half a character's height beneath the other characters.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>An example of <sub>subscript</sub> formatting tag</p>
</body>
</html>
Anything that appears within <ins>...</ins> element is displayed as inserted
text.
Anything that appears within <del>...</del> element, is displayed as deleted
text.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>This is an example of <del>HTML</del> and <ins>JavaScript</ins>
</p>
</body>
</html>
The content of the <big>...</big> element is displayed one font size
larger than the rest of the text surrounding it as shown below:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>Welcome to <big>LPU</big> Jalandhar</p>
</body>
</html>
The content of the <small>...</small> element is displayed one font
size smaller than the rest of the text surrounding it as shown below:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>Example of <small>small</small> formatting tag</p><
/body>
</html>
The <div> and <span> elements allow you to group together several elements
to create sections or subsections of a page.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div align="middle" >
<p> Welcome to HTML</p>
<p> Welcome to JavaScript</p>
<p> Welcome to CSS</p>
</div>
</body>
</html>
The <span> element, on the other hand, can be used to group inline elements
only. So, if you have a part of a sentence or paragraph which you want to group
together, you could use the <span> element as follows
Example:
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style="color:green">span tag</span> and the
<span style="color:red">div tag</span> alongwith CSS</p>
</body>
</html>
Anything that appears within <em>...</em> element is displayed as
emphasized text.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>This is an example of <em>emphasized</em> tag</p>
</body>
</html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>This is an example of <mark>marked</mark> tag</p>
</body>
</html>
The <bdo>...</bdo> element stands for Bi-Directional Override and it is used
to override the current text direction.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
</body>
</html>
The <q>...</q> element is used when you want to add a double quote
within a sentence.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Welcome to <q>COLLEGETAK</q>Web Develment Notes</p>
</body>
</html>
Any programming code to appear on a Web page should be placed inside
<code>...</code> tags. Usually the content of the <code> element is
presented in a monospaced font, just like the code in most programming
books.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>
HTML Forms are required when you want to collect some data
from the site visitor. For example during user registration you
would like to collect information such as name, email address,
credit card, etc.
A form will take input from the site visitor and then will post it to a
back-end application such as CGI, ASP Script or PHP script etc.
The back-end application will perform required processing on the
passed data based on defined business logic inside the application.
There are various form elements available like text fields, text area
fields, drop-down menus, radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has
following syntax:
<form action="Script URL" method="GET|POST">
form elements like input, textarea etc.
</form>
There are different types of form controls that you can use to collect data using
HTML form:
  •  Text Input Controls
  •  Checkboxes Controls
  •  Radio Box Controls
  •  Select Box Controls
  •  File Select boxes
  •  Clickable Buttons
  •  Submit and Reset Button
There are three types of text input used on forms:
Single-line text input controls - This control is used for items that require
only one line of user input, such as search boxes or names. They are created using
HTML <input> tag.
Password input controls - This is also a single-line text input but it masks the
character as soon as a user enters it. They are also created using HTML <input>
tag.
Multi-line text input controls - This is used when the user is required to give
details that may be longer than a single sentence. Multi-line input controls are
created using HTML <textarea> tag.
Single-line text input controls
This control is used for items that require only one line of user input, such as
search boxes or names. They are created using HTML <input> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type="text" name="first_name" /> <br>
Last name: <input type="text" name="last_name" />
</form>
</body>
</html>
Following is the list of attributes for <input> tag for creating text field.
.
Attribute Description
Type:- Indicates the type of input control and for text input control
it will be set to text.
Name:- Used to give a name to the control which is sent to the server
to be recognized and get the value.
Value:- This can be used to provide an initial value inside the control.
Size Allows to specify the width of the text-input control in terms
of characters.
Maxlength:- Allows to specify the maximum number of characters a user
can enter into the text box.
This is also a single-line text input but it masks the character as soon as a
user enters it. They are also created using HTML <input> tag but type
attribute is set to password.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type="text" name="user_id" /> <br>
Password: <input type="password" name="password" />
</form>
</body>
</html>
This is used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here... </textarea>
</form>
</body>
</html>
Following is the list of attributes for <textarea> tag.
Attribute Description
name:- Used to give a name to the control which is sent to the
server to be recognized and get the value.
rows:- Indicates the number of rows of text area box.
cols:- Indicates the number of columns of text area box.
Checkboxes are used when more than one option is required to be selected. They
are also created using HTML <input> tag but type attribute is set to checkbox.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type="checkbox" name=“cprog" value=“on” checked=“checked”> C Programming
<input type="checkbox" name=“htm“ value=“on”> HTML
</form>
</body>
</html>
Attributes
Following is the list of attributes for <checkbox> tag.
Attribute Description
Type:- Indicates the type of input control and for checkbox input
control:- it will be set to checkbox.
Name:- Used to give a name to the control which is sent to the server to be recognized and get the value.
Value:- The value that will be used if the checkbox is selected.
checked:- Set to checked if you want to select it by default.
Radio buttons are used when out of many options, just one option is required to be
selected. They are also created using HTML <input> tag but type attribute is set
to radio.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type="radio" name=“gender" value="male"> Male
<input type="radio" name=“gender" value=“female"> Female
</form>
</body>
</html>
Following is the list of attributes for radio button.
Attribute Description
Type:- Indicates the type of input control and for radio input control it will be set to radio.
Name:- Used to give a name to the control which is sent to the server to be recognized and get the value.
Value:- The value that will be used if the radio box is selected.
checked Set to checked if you want to select it by default.
Select Box Control
A select box, also called drop down box which provides option to list down various
options in the form of drop down list, from where a user can select one or more options.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<select name="dropdown">
<option value="Java">Java</option>
<option value="C" selected>C</option>
<option value="C#">C#</option>
<option value="Python">Python</option>
</select>
</body>
</html>
Following is the list of important attributes of <select> tag:
Attribute Description
name:- Used to give a name to the control which is sent to the server to be recognized and get the value.
size:- This can be used to present a scrolling list box.
multiple:- If set to "multiple" then allows a user to select multiple items from the menu.
Following is the list of important attributes of <option> tag:
value:- The value that will be used if an option in the select box box is selected.
selected:- Specifies that this option should be the initially selected value when the page loads.
label:- An alternative way of labeling options.
If you want to allow a user to upload a file to your web site, you will need to use a
file upload box, also known as a file select box. This is also created using the
<input> element but type attribute is set to file.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="file" name="fileupload" accept="image/*" />
</form>
</body>
</html>
Following is the list of important attributes of file upload box:
Attribute Description
name:- Used to give a name to the control which is sent to the server to be recognized and get the value.
accept:- Specifies the types of files that the server accepts.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src=“a.png" />
</form>
</body>
</html>
There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input> tag by setting its type attribute to button. The type
attribute can take the following values:
Attribute Description
submit:- This creates a button that automatically submits a form.
reset:- This creates a button that automatically resets form controls to their initial values.
button:- This creates a button that is used to trigger a client-side script when the user clicks that button.
image:- This creates a clickable button but we can use an image as background of the button.

Comments

Post a Comment

Popular posts from this blog

Industry Ethics and Legal Issues MCQ Questions With Answer

ETHICS ALL POSSIBLE QUESTION - SET 1 Q1. Before 16 Jan, How many states were already working in Startup India policies? a) 1 b) 3 c) 4 d) 7 Q2. Which of the following is not a part of Funding Innovation? a) Incubation Center b) Startup Yatra Funds c) Research Parks d) Manak Q3. For R& D, human resource started a new scheme for students a) Tinkering labs b) Manak c) Avishkar yojana d) Uchhatar Avishkar yojana Q4. Startup India Scheme? 1. Age should not be more than 3 years 2. Should develop innovative product. 3. Must be Private Limited Company/ Registered Partnership firm/ Limited Liability Partnership 4. Has patent granted in areas affiliated with the nature of business being promoted a) 1, 3 6) 1,2 and3 c) 2, 3 and 4 d) All of the above Q5. The period of business when an entrepreneur must position the venture in a market and make necessary adjustments to assure survival is called the: a) pre-Startup stage b) Startup singe
Post a Comment
Read more

SET 2

ETHIC MCQ- SET 2 Q101. SISHU stage of MUDRA loan scheme provides maximum amount of? a) RS 10 Thousand b) RS 20 Thousand c) RS 30 Thousand d) RS 50 Thousand Q102. A criminal activity within the information technology infrastructure. a) Digital crime b) Intellectual property c) Cyber-crime d) All of them Q103. Law is the system of rules of conduct established by the government of a society to maintain a) Justice b) Consistency c) None of these d) Both A & B Q104. ln which year Pradhan Mantri MUDRA Yojana was launched? a) 2015 b) 2016 c) 2014 d) 2013 Q105. Minimum how many numbers of directors required in Public company a) 9 b) 8 c) 3 d) 10 Q106. Which of the following is not considered while selecting the region? a) Law and order b) Price of land c) Availability of raw materials d) Proximity to the product market Q107. A genetic term that is concerned to the legal and regulatory aspects of Internet and computer technolo
2 comments
Read more

DIGITAL MARKETING

DIGITAL MARKETING END TERM PRACTICAL PAPERS:
8 comments
Read more