BASIC OF HTML
NAME ENROLLMENT NUMBER
PATEL JAINIL 160280116063
• WHAT IS HTML?
• HTML EDITORS
• PAGE STRUCTURE
• HTML TAGS
SATANI CHIRAG 160280116081
• HYPERLINK
• LIST
• TABLE
PATEL SHREYASH 160280116072
• IMAGES IN HTML
• FORMS
• XHTML
What is HTML ?
HTML IS THE STANDARD MARKUP LANGUAGE FOR CREATING
WEB PAGES.
HTML STANDS FOR HYPER TEXT MARKUP LANGUAGE
HTML
DESCRIBES THE STRUCTURE OF WEB PAGES USING
MARKUP
HTML ELEMENTS ARE THE BUILDING BLOCKS OF HTML PAGES
HTML ELEMENTS ARE REPRESENTED BY TAGS
HTMLTAGS 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
HTML Editors
Write HTML Using Notepad or TextEdit
Web pages can be created and modified by using
professional HTML editors.
However, for learning HTML we recommend a simple text
editor like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way to
learn HTML.
C:\Users\Admin\Desktop\tutorialpoints.html
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML TAGS
Tags Description
1. <!DOCTYPE...> This tag defines the document type and HTML version.
2. <html> This tag encloses the complete HTML document and mainly
comprises of document header which is represented by
<head>...</head> and document body which is represented by
<body>...</body> tags.
3. <head> This tag represents the document's header which can keep other
HTML tags like <title>, <link> etc.
4. <title> The <title> tag is used inside the <head> tag to mention the
document title.
5. <body> This tag represents the document's body which keeps other HTML
tags like <h1>, <div>, <p> etc.
6. <h1> This tag represents the heading.
7. <p> This tag represents a paragraph.
HTML Tags:
Hyperlink | List |Table
Hyperlinks
Why links are needed?
So the links are found in nearly all web pages. links allow
user to click their way from page to page .
Html links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link , the mouse arrow
will turn into a little hand.
Syntax
In HTML links are defined with the <a> tag .
Syntax:
<a href =“URL”> link text</a>
Example:
<a href= “www.google.com”>google</a>
The href attribute specifies the destination address
(https://www.google.com) of the link .
The link text is the visible part .
Clicking on the link text will send you to the specified address.
HTML Links-The target Attribute
The target attribute specifies where to open the linked
document.
the target attribute can have one of the following value :
• _blank: opens the linked document in the new window
or tab .
• _self : opens the linked document in the same window/
tab as it was clicked (this is default )
• _parent :Opens the linked document in the parent frame
.
• _top : Opens the linked document in the full body of the
window
HTML links-Image as Link
It is common to use images as links.
Example :
<a href=“path”><img src=“path_of_image”
alt=“HTML Image”></a>
HTML list
An Unordered list :
-An unordered list start with the <ul> tag each list items start with the
<li> tag .
-the list items will be marked with the bullets (small black circle ) by
default .
Example :
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
Unordered Html List choose list item
marker
The style attribute is used to define the style of the list item marker .
Value Description
disc Sets the list item marker to a bullet(default )
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
Ordered HTML list
An ordered list starts with the <ol> tag . Each list item starts with the
<li> tag .
the list items will be marked with the number by default .
Example :
<ol>
<li>coffee</li>
<li> tea</li>
</ol>
Ordered HTML List-The Type
Attribute
Type Description
type=“1” The list items will be numbered with
numbers (default)
type=“A” The list item will be numbered with
uppercase letters
type=“a” The list item will be numbered with
lowercase letters
type=“I” The list item will be numbered with
uppercase roman numbers
type=“i” The list item will be numbered with
lowercase roman numbers
HTML Table
Anhtml table is defined with the <table>
tag.
Each table row is defined with the<tr> tag.
A table header is defined with the <th >
tag. By default ,table headings are bold
and centered .
A table data/cell is defined with the <td>
tag .
Example:
<table>
<tr>
<th>Firstname </th>
<th>lastname</th>
</tr>
<tr>
<td>Chirag</td>
<td>Satani</td>
</tr>
HTML Images
1. The “img” tag is used to add images on a webpage.
The “img” tag is an empty tag, which means it can
contain only a list of attributes and it has no closing tag.
Syntax :
<img src=“url” alt=“some text”>
‘src’ attribute :
‘alt’ attribute :
2. Setting width and height of Image :
The width and height attributes are used to specify
the height and width of an image. The attribute
values are specified in pixels by default.
3. Adding animated Image :
4. Adding titles to Image :
Along with the images, titles can also be added to
images to provide further information related to
the inserted image. For inserting a title, the title
attribute is used.
5. Setting a border to Image :
6. Aligning a Picture :
By default an image is aligned at the left side of
the page, but it can be aligned to center or right
using the align attribute.
7. Adding Image as a Link :
An image can work as an link with a url
embedded in it. It can be done by using the “img”
tag inside an “a” tag.
8. Using Image as a background :
More beyond basic
9. Image Maps
The <map> tag defines an image-map. An image-map is
an image with clickable areas.
HTML forms
The <form> tag in HTML is used to create form for
user input. There are many elements which are
used within form tag. For example: <input>,
<textarea>, <button>, <select>, <option>,
<optgroup>, <fieldset>, <label>.
Syntax:
<form> Form Content... </form>
Attributes: There are many attributes which are
associated with <form> tag. Some of them are
listed below:
input: It is used to specify the input field for
user.
textarea: It is used to specify for multi-line text
input field for user.
button: It is used to perform an operation in a
form by the user.
label: It is used to give label to any tag like
button, input etc.
FORM elements
Button
Checkbox
Radio button
Select element
Reset
Textarea
etc…
XHTML
What Is XHTML?
1. XHTML stands for
EXtensible HyperText Markup Language
2. XHTML is almost identical to HTML
3. XHTML is stricter than HTML
4. XHTML is HTML defined as an XML application
5. XHTML is supported by all major browsers
Document Structure
1. XHTML DOCTYPE is mandatory
2. The xml attribute in <html> is mandatory
3. <html>, <head>, <title>, and <body> are mandatory
XHTML Elements
1. XHTML elements must be properly nested
2. XHTML elements must always be closed
3. XHTML elements must be in lowercase
XHTML Attributes
1. Attribute names must be in lower case
2. Attribute values must be quoted
3. Attribute minimization is forbidden
How to Convert from HTML to XHTML
Add an XHTML <!DOCTYPE> to the first line of every page
Add an xml attribute to the html element of every page
Change all element names to lowercase
Close all empty elements
Change all attribute names to lowercase
Quote all attribute values
