Scribd
Upload
106 views

Basic of HTML: Name Enrollment Number

This document provides an overview of HTML basics including: - Three students - Patel Jainil, Satani Chirag, and Patel Shreyash - and their enrollment numbers. - Key HTML topics covered include what HTML is, HTML editors, page structure, HTML tags, hyperlinks, lists, tables, images, forms, and XHTML. - HTML is the standard markup language used to create web pages. It uses tags to describe the structure of pages and elements like headings, paragraphs, links, lists, and more.

Uploaded by

Shreyash Patel
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
106 views

Basic of HTML: Name Enrollment Number

This document provides an overview of HTML basics including: - Three students - Patel Jainil, Satani Chirag, and Patel Shreyash - and their enrollment numbers. - Key HTML topics covered include what HTML is, HTML editors, page structure, HTML tags, hyperlinks, lists, tables, images, forms, and XHTML. - HTML is the standard markup language used to create web pages. It uses tags to describe the structure of pages and elements like headings, paragraphs, links, lists, and more.

Uploaded by

Shreyash Patel
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 29

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

You might also like