Scribd
Upload
9 views

HTML

Basic note on hyper text markup language

Uploaded by

Endale
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

HTML

Basic note on hyper text markup language

Uploaded by

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

Chapter 2

Hyper Text Markup Language (HTML)


What is Markup language?
 A markup language is a programming language that is used to make text more interactive and
dynamic. It can turn a text into images, tables, links etc.
What is Hyper Text Markup Language (HTML)?
 It is the standard markup language for creating Web pages.
 It is a language for describing web pages.
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages
 It consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements are represented by tags
 HTML tags label pieces of content such as heading, paragraph, table, and so on
 Browsers do not display the HTML tags, but use them to render the content of the page What
is HTML Tag?
 HTML tags are element names surrounded by angle brackets:
<tagname> content goes here...</tagname>
 HTML tags normally come in pairs like <p> and </p>
 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, but with a forward slash inserted before the tag name
The structure of an HTML element
The minimal structure of HTML documents:
1. Identifies the document as written in HTML.
2. The head provides information about the document.
3. A descriptive title is required.
4. The body contains the content that displays in the browser.
HTML Element
 The <!DOCTYPE html> declaration defines this document to be HTML version 5
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph
Heading Tags
 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.
Example
<!DOCTYPE html>
<html>
<head> <title>Heading Example</title> </head>
<body>
<h1>this is heading 1</h1>
<h2>this is heading 2</h2>
<h3>this is heading 3</h3>
<h4>this is heading 4</h4>
<h5>this is heading 5</h5>
<h6>this is heading 6</h6>
</body>
</html>

Paragraph Tag
 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:
<!DOCTYPE html>
<html>
<head> <title>Paragraph Example</title> </head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
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. If you omit this space, older browsers will have trouble rendering the line break.
Example <!DOCTYPE html>
<html>
<head> <title>Line Break Example</title> </head>
<body>
<p>Hello<br />
You delivered your assignment on time. <br />
Thanks<br />
Mahnaz</p>
</body>
</html>

Centering Content
 You can use <center> tag to put any content in the center of the page or any table cell.
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title> </head>
<body> <p>This text is not in the center.</p>
<center> <p>This text is in the center.</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:
<!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>
 Again <hr /> tag is an example of the empty element, where you do not need opening and
closing tags, as there is nothing to go in between them. The <hr /> element has a space
between the characters hr and the forward slash. If you omit this space, older browsers
will have trouble rendering the horizontal line. Nonbreaking Spaces
 In cases, where you do not want the client browser to break text, you should use a
nonbreaking space entity &nbsp; instead of a normal space.

 For example, when coding the "12 Angry Men" in a paragraph, you should use something
similar to the following code:
<!DOCTYPE html>
<html>
<head> <title>Nonbreaking Spaces Example</title> </head>
<body>
<p>An example of this technique appears in the movie
"12&nbsp;Angry&nbsp;Men."</p>
</body>
</html> HTML
Links
 HTML links are defined with the <a> tag: <a href="url">link text</a>. The link's
destination is specified in the href attribute. Attributes are used to provide additional
information about HTML elements.
Example: -<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
HTML image
 HTML images are defined with the <img> tag.
 The source file (src), alternative text (alt), width, and height are provided as attributes.
Example: -<img src="smiley.gif" alt="Smiley face" height="42" width="42"> HTML
Lists
 HTML lists are defined with the <ul> (unordered/bullet list) or the <ol>
(ordered/numbered list) tag, followed by <li> tags (list items): Example
<!DOCTYPE html>
<html>
<head> <title>HTML list Tag</title> </head>
<body>
<h1>this is first group</h1>
<p>Following is a list of vegetables</p> <ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
<h2>this is second group</h2>
<p >Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</body>
</html> HTML
Comments
 Comment is a piece of code which is ignored by any web browser. It is a good practice to
add comments into your HTML code, especially in complex documents, to indicate
sections of a document, and any other notes to anyone looking at the code. Comments help
you and others understand your code and increases code readability.
 HTML comments are placed in between <!-- ... --> tags. So, any content placed with-in
<!-- ... --> tags will be treated as comment and will be completely ignored by the browser.
In HTML there are three types of comments those are described as follows:
Single comment Example
<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts --> <title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here .... </p>
</body>
</html>
Multiline Comments
 So far we have seen single line comments, but HTML supports multi-line comments as well.
You can comment multiple lines by the special beginning tag <!-- and ending tag -> placed
before the first line and end of the last line as shown in the given example below. Example
<!DOCTYPE html>
<html>
<head> <title>Multiline Comments</title> </head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->
<p>Document content goes here .... </p>
</body> </html>
Conditional Comments
 Conditional comments only work in Internet Explorer (IE) on Windows but they are ignored
by other browsers. They are supported from Explorer 5 onwards, and you can use them to
give conditional instructions to different versions of IE. Example
<!DOCTYPE html>
<html>
<head> <title>Conditional Comments</title>
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
</head>
<body>
<p>Document content goes here .... </p>
</body>
</html>
HTML Frames
 HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document. A collection of frames in the browser window
is known as a frameset. The window is divided into frames in a similar way the tables are
organized: into rows and columns. Disadvantages of Frames
 There are few drawbacks with using frames, so it's never recommended to use frames in
your webpages. Some smaller devices cannot cope with frames often because their screen
is not big enough to be divided up. Sometimes your page will be displayed differently on
different computers due to different screen resolution.
 The browser's back button might not work as the user hopes. There are still few browsers
that do not support frame technology.
Creating Frames
 To use frames on a page we use <frameset> tag instead of <body> tag.
 The <frameset> tag defines how to divide the window into frames.
 The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines
vertical frames.
 Each frame is indicated by <frame> tag and it defines which HTML document shall open
into the frame.
Following is the example to create three horizontal frames:
<!DOCTYPE html>
<html>
<head> <title>HTML Frames</title> </head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
Let's put the above example as follows, here we replaced rows attribute by cols and changed their
width. This will create all the three frames vertically:
<!DOCTYPE html>
<html>
<head> <title>HTML Frames</title> </head>
<frameset cols = "25%, 50%, 25 %">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
HTML Tables
 HTML Tables is used to preset data in rows and columns format. A Table is the collection
of rows and rows is the collection of columns. <tr> stands for table rows. To add a row in
a table <table row> tags are used. <td> or <th> is used to put the column inside the row.
Whereas <td> means table data and <th> means table head.
Syntax: <table>
<tr>
<td>row1col1</td>
<td>row1col2</td>
</tr>
</table>
Example
<table border="1">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>phptpoint</td>
<td>[email protected]</td>
</tr>
<tr>
<td>phptpoint blog</td>
<td>[email protected]</td>
</tr>
</table>
 In the above example a table is created have 3 rows and 6 columns where each
row contains 2 column. <tr> tag is used to create a row while <td> or <th> is
used to create column. <tr> comes in between <table> tag while <td> or <th>
comes in between <tr>.
How to merge table column
 When you want to merge 2 or more than 2 column (cell), use colspan property
of <td colspan="2″> or <th colspan=”2″>. Example
<table border="1">
<tr>
<th colspan="2"> User Details</th>
</tr>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>phptpoint</td>
<td>[email protected]</td>
</tr>
<tr>
<td>phptpoint blog</td>
<td>[email protected]</td>
</tr>
</table>

How to merge
table rows
 When you want to merge 2 or more than 2 rows in a single row, use rowspan property of
<td rowspan=”2″> or <th rowspan=”2″>

 Example
<table border="1">
<tr>
<td rowspan="2">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
Nested Table
 Nested table means how to use table inside a table. Multiple times you
need to use table inside a table. When you want to use a table inside a
table write the syntax of table in between your cell i.e either <td> or <th>.
 Example
<html>
<body>
<table border="1" bgcolor="gray" width="200" height="200">
<tr>
<th>
<table align="center" border="1"
bgcolor="#F8F8F8" width="100"
height="100">
<tr>
<th>Inner Table</th>
</tr>
</table>
</th>
</tr>
</table>

</body>
</html> Definition and Usage
 The <table> tag defines an HTML table. An HTML table consists of the
<table> element and one or more <tr>, <th>, and <td> elements.
 The <tr> element defines a table row, the <th> element defines a table header,
and the <td> element defines a table cell. A more complex HTML table may
also include <caption>,
<col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements. HTML Buttons
 HTML buttons are defined with the <button> tag. The <button> tag defines
a clickable button. Inside a <button> element you can put content, like text
or images. This is the difference between this element and buttons created
with the <input> element.
 Example: -Two button elements that act as one submit button and one reset
button (in a form):
HTML Forms
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br> Last
name: <input type="text" name="lname"><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button> </form>
 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 Attributes
</form>
 Apart from common attributes, following is a list of the most frequently used form
attributes
S.No Attribute Description
1 Action Backend script ready to process your passed data.
2 Method Method to be used to upload data. The most frequently used are GET
and POST methods.

3 Target Specify the target window or frame where the result of the script will
be displayed. It takes values like _blank, _self, _parent etc.

4 Enctype You can use the enctype attribute to specify how the browser encodes
the data before it sends it to the server. Possible values are:
 application/x-www-form-urlencoded − This is the standard
method most forms use in simple scenarios.
 mutlipart/form-data − This is used when you want to upload
binary data in the form of files like image, word file etc.

HTML Form Controls


 There are different types of form controls that you can use to collect data using HTML
form:
1. Text Input Controls
 There are three types of text input used on forms:
A. Single-line text input controls: 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. Here is a basic example of a single-line text input used to take
first name and last name

<!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>
Attributes: -Following is the list of attributes for <input> tag for creating text field.
S.No Attribute Description
1 Type Indicates the type of input control and for text input control it will be
set to text.

2 Name Used to give a name to the control which is sent to the server to be
recognized and get the value.

3 Value This can be used to provide an initial value inside the control.
4 Size Allows specifying the width of the text-input control in terms of
characters.

5 maxlength Allows specifying the maximum number of characters a user can


enter into the text box.

B. 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. Here is a basic example of a single-line password input used to
take user password:
<!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>
Attributes: -Following is the list of attributes for <input> tag for creating password
field.
S.No Attribute Description
1 Type Indicates the type of input control and for password input
control it will be set to password.

2 Name Used to give a name to the control which is sent to the server
to be recognized and get the value.

3 Value This can be used to provide an initial value inside the control.

4 Size Allows specifying the width of the text-input control in terms of


characters.

5 maxlength Allows specifying the maximum number of characters a user


can enter into the text box.

C. Multi-line text input controls: This is used when the user is required to give
details that may be longer than a single sentence. They are created using
HTML <textarea> tag. Here is a basic example of a multi-line text input used
to take item description:
<!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>
Attributes: -Following is the list of attributes for <textarea> tag.

S.No Attribute Description


1 Name Used to give a name to the control which is sent to the server
to be recognized and get the value.

2 Rows Indicates the number of rows of text area box.


3 Cols Indicates the number of columns of text area box
2. Checkbox Control
 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.Here is an example HTML code for a form with two checkboxes:
<!DOCTYPE html>
<html>
<head> <title>Checkbox Control</title> </head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>

Attributes: -Following is the list of attributes for <checkbox> tag.


S.No Attribute Description
1 Type Indicates the type of input control and for checkbox input
control it will be set to checkbox.
2 Name Used to give a name to the control which is sent to the server
to be recognized and get the value.

3 Value The value that will be used if the checkbox is selected.


4 Checked Set to checked if you want to select it by default.

3. Radio Button Control


 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. Here is example HTML code for a form with two
radio buttons
<!DOCTYPE html>
<html>
<head> <title>Radio Box Control</title> </head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>
Attributes: -Following is the list of attributes for radio button.
S.No Attribute Description
1 Type Indicates the type of input control and for checkbox input
control it will be set to radio.

2 Name Used to give a name to the control which is sent to the server
to be recognized and get the value.

3 Value The value that will be used if the radio box is selected.
4 Checked Set to checked if you want to select it by default.
4. 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. Here is example HTML code for a form with one drop
down box
<!DOCTYPE html>
<html>
<head> <title>Select Box Control</title> </head>
<body>

<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value =
"Physics">Physics</option>
</select>
</form>
</body>
</html>
Attributes: -Following is the list of important attributes of <select> tag
S.No Attribute Description
1 Name Used to give a name to the control which is sent to the server to
be recognized and get the value.

2 Size This can be used to present a scrolling list box.


3 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


S.No Attribute Description
1 Value The value that will be used if an option in the select box box is
selected.

2 Selected Specifies that this option should be the initially selected value
when the page loads.

3 Label An alternative way of labeling options

5. File Upload Box


 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. Here is example HTML
code for a form with one file upload box
<!DOCTYPE html>
<html>
<head><title>File Upload Box</title></head>
<body>
<form>
<input type = "file" name = "file upload" accept = "image/*"
/>
</form>
</body>
</html>
Attributes: -Following is the list of important attributes of file upload box
S.No Attribute Description
1 Name Used to give a name to the control which is sent to the server to
be recognized and get the value.

2 Accept Specifies the types of files that the server accepts.


6. Button Controls
 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
S.No Attribute Description
1 Submit This creates a button that automatically submits a form.
2 Reset This creates a button that automatically resets form controls
to their initial values.

3 Button This creates a button that is used to trigger a client-side script


when the user clicks that button.

4 Image This creates a clickable button but we can use an image as


background of the button.

Here is example HTML code for a form with three types of buttons
<!DOCTYPE html>
<html>
<head> <title>File Upload Box</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 = "/html/images/logo.png"
/>
</form>
</body>
</html>
7. Hidden Form Controls
 Hidden form controls are used to hide data inside the page which later on can
be pushed to the server. This control hides inside the code and does not appear
on the actual page. For example, following hidden form is being used to keep
current page number. When a user will click next page then the value of
hidden control will be sent to the web server and there it will decide which
page will be displayed next based on the passed current page. Here is example
HTML code to show the usage of hidden control
<!DOCTYPE html>
<html>
<head> <title>File Upload Box</title> </head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset” value = "Reset" />
</form>
</body>
</html>

You might also like