Scribd
Upload
28 views

HTML Ppt New

Uploaded by

Chiliveri Ajay
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
28 views

HTML Ppt New

Uploaded by

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

What is html?

HTML is a markup language used to describing the simplest form


of webpages. It is the main markup language for webpages.
HTML is an abbreviation and stand for Hypertext Markup
Language. When a web browser such as Internet Explorer, Firefox
or Chrome displays a webpage, what it is actually doing is
reading and interpreting a HTML document.
•An HTML element starts with a opening tag
•An HTML element ends with a closing tag
•A HTML tag starts with a < and ends with a >
•The letters between the < and > are
abbreviations
•The element content is everything between the
start tag and the end tag
•Some HTML elements are empty
•Empty elements are closed in the start tag
•Make it a habbit to type all your tags in
lowercase - it is considered good practice
What is Tags and Elements?
<hr/> <br /> <img/> these are empty tags
The Structure of HTML
How to Download Visual Studio Code
Editor?
 https://code.visualstudio.com/Download

 Sites to reference
 https://www.tutorialrepublic.com/
 https://www.w3schools.com/
HTML Elements Types

 There are two display


values: block and inline A block-level element
always starts on a new line and takes up the full
width available. An inline element does not start
on a new line and it only takes up as much width
as necessary The element is a block-level
and is often used as a container for
other HTML elements
Most common elements used:

The most commonly used block-level elements are <div>, <p>, <h1> through <h6>, <form>,
<ol>, <ul>, <li>, and so on.
Whereas, the commonly used inline-level elements are <img>, <a>, <span>,
<strong>, <b>, <em>, <i>, <code>, <input>, <button>, etc.
Working with HTML Lists

 HTML offers three ways for specifying lists of information. All lists
must contain one or more list
elements .The types of lists that can be used in HTML are :
 ul : An unordered list. This will list items using plain bullets.
 ol : An ordered list. This will use different schemes of numbers to list
your items.
 dl : A definition list. This arranges your items in the same way as they
are arranged in a dictionary.
Example:
<!DOCTYPE html>
<html>
<body>
<ul>
<li>coffee</li>
<li>tea
<ul>
<li>black tea</li>
<li>green tea</li>
</ul>
</li>
<li>milk</li>
</ul>
</body>
</html>
HTML | Text Formatting
 Making text Bold or Strong: We can make the text bold using
the <b> tag. The tag uses both opening and closing tag. The text that
needs to be made bold must be within <b> and </b> tag.
We can also use the <strong> tag to make the text strong, with added
semantic importance. It also opens with <strong> and ends with
</strong> tag.

 Making text Italic or emphasize: The <i> tag is used to italicize the
text. It opens with <i> and ends with </i> tag.
The <em> tag is used to emphasize the text, with added semantic
importance. It opens with <em> and ends with </em> tag.
Text Formatting:

 Highlighting a text: It is also possible to highlight a text in HTML using


the <mark> tag. It has a opening tag <mark> and a closing tag
</mark>.
 Striking through the text: The <del> element is used to strike
through the text marking the part as deleted. It also has an opening
and a closing tag.
 Adding a text: The <ins> element is used to underline a text marking
the part as inserted or added. It also has an opening and a closing tag.
HTML | Images
 Adding images on a webpage :
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.
 <img src=“path of an image” alt=“alt name”>
 Attribute:
 src:
src stands for source. Every image has a src attribute which tells the browser
where to find the image you want to display. The URL of the image provided
points to the location where the image is stored.
 alt:If the image cannot be displayed then the alt attribute acts as an
alternative description for the image. The value of the alt attribute is an
user-defined text.
HTML | Links

 It is a connection from one web resource to another . A link has two ends ,An
anchor and direction. The link starts at the “source” anchor and points to the
“destination” anchor, which may be any Web resource such as an image, a
video clip, a sound bite, a program, an HTML document or an element within
an HTML document.
 <a href=“ url link” >text link</a>
 href : The href attribute is used to specify the destination
address of the link used.
 Text link : The text link is the visible part of the link.
HTML | Tables

 A table is an arrangement of data in rows and columns, or possibly in a more


complex structure. Tables are widely used in communication, research, and
data analysis.
 Defining Tables in HTML
An HTML 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 border="5" cellpadding="5" cellspacing="6" align="center">

<tr><td colspan="3">table</td></tr>
<tr>
<th>sno</th>
<td rowspan="5">break</td>
<th>name</th>
<tr>
<td>1</td>
<td>ammu</td>
</tr>
</table>
HTML | <font> Tag

 The font tag has basically three attributes which are given below:
 Size
 Face/Type
 Color
 font Size: This attribute is used to adjust the size of the text in the HTML
document using font tag with size attribute. The range of size of the font in HTML
is from 1 to 7 and the default size is 3.
 Font Type: Font type can be set by using face attribute with font tag in HTML
document. But the fonts used by the user needs to be installed in the system first.
 Font Color: Font color is used to set the text color using font tag with color
attribute in HTML document. Color can be specify either with its name or with its
hex code.
HTML Forms

HTML Forms are required to collect different kinds of user inputs,


such as contact details like name, email address,
phone numbers, or details like credit card information, etc.
Forms contain special elements called controls like inputbox, checkboxes, radiobuttons,
submit buttons, etc. Users generally
complete a form by modifying its controls e.g. entering text, selecting items, etc.
and submitting this form to a web server for further processing.
The <form> tag is used to create an HTML form. Here's a simple example of a login
form:
Form Syntax :

 <form>
 <label for="username">Username:</label>
 <input type="text" name="username" id="username">
 </form>
Audio ang Video tags
 HTML5 supports <video> and <audio> controls. The Flash, Silverlight and similar
technologies are used to play the multimedia items.
 HTML audio tag is used to define sounds such as music and other audio clips. Currently
there are three supported file format for HTML 5 audio tag.1.Mp3 2.wav 3.ogg
Example: <audio controls autoplay loop>
<source src="koyal.mp3" type="audio/mpeg">
</audio>

 HTML 5 supports <video> tag also. HTML video tag is used for streaming video files such as a movie
clip, song clip on the web page.
 Currently, there are three video formats supported for HTML video tag:1.mp4 2.webM 3.ogg
Example: <video width="320" height="240" controls autoplay loop>
<source src="movie.mp4" type="video/mp4">
</video>
HTML Iframe

The HTML <iframe> tag specifies an inline frame.


An inline frame is used to embed another document within the
current HTML document .

 <iframe src="batch19.html" height="200" width="300" title="Iframe Example"></ifra


me>
 <iframe src="batch19.html" name="myFrame"></iframe>
 <p><a href="https://www.tutorialrepublic.com" target="myFrame">Open
TutorialRepublic.com</a></p>

 <p>When the target attribute of a link matches the name of an iframe, the link
will open in the iframe.</p>

marquee

 In HTML, a marquee is a small section of the browser window that


displays text that rolls across the screen. You use the element to create
this scrolling section.
 Syntax:
<marquee behavior="alternate" scrollamount="5" scrolldelay="500" loop="2" di
rection="right">Nirmaan</marquee>

<marquee behavior="alternate" direction="right" scrolldelay="400"


scrollamount="10" loop="2"><img src="C:\Users\NIRMAAN\Desktop\images\th.j
pg" alt=""></marquee>
EXAMPLE:
<!doctype html>
<html>
<head>
<title>Registration Form </title>
</head>
<body>
<h2> Registration Form </h2>
<hr>
<form> <!-- holds all the form controls -->
<table>
<tr>
<td> Enter your name </td>
<td> <input type="text" id="txtName"></td>
</tr>
<tr>
<td> Enter password </td>
<td> <input type="password" id="txtPwd"></td>
</tr>
<tr>
<td> Enter your address </td>
<td> <textarea id="txtAddress" rows="5" cols="16"> Provide the address...
</textarea>
</td>
</tr>
<tr>
<td> Select your gender </td>
<td> <input type="radio" name="gender" id=”M” value="m" checked>
<label for="M">Male<br>
<input type="radio" name="gender" id=”F” value="f">
<label for="F"> Female<br>
</td>
</tr>
<tr>
<td> Select City </td>
<td> <select name="cities">
<option value="H"> Hyderabad </option>
<option value="B"> Bangalore </option>
<option value="P"> Pune </option>
<option value="M"> Mumbai </option>
</select>
</td>
<tr>
<td> Select your skills </td>
<td> <select name="skills" size="3" multiple>
<option value="NET"> MS.NET </option>
<option value="RD"> RDBMS </option>
<option value="UI"> UI </option>
<option value="Java"> Java </option>
<option value="TS"> Testing </option>
<option value="Network"> Networking </option>
</select>
</td>
</tr>
<tr>
<td> Select your hobbies </td>
<td> <input type="checkbox" name="hobby" value="sleeping">Sleeping
<input type="checkbox" name="hobby" value="reading">Reading
<input type="checkbox" name="hobby" value="Movies">Watching Movies
</td>
</tr>
<tr>
<td> Enter your birthday </td>
<td>
<input type="date" name="bday" max="2015-12-31" min="1990-01-01">
</td>
</tr>
<tr>
<td> Upload your resume </td>
<td><input type="file" name="my resume"> </td>
</tr>
<tr>
<td> Enter Percentage scored </td>
<td> <input type="number" name="percent" min="1" max="100"> </td>
</table>
<input type="button" name="agree" value="I Agree">
<input type="submit"> <input type="reset">
</form>
</body>
</html>
HTML DOM

 The HTML DOM (Document Object Model) is an Object Model for HTML. It
defines:
 HTML elements as objects
 Properties for all HTML elements
 Methods for all HTML elements
 Events for all HTML elements
 When a web page is loaded, the browser creates a Document Object Model of
the page. The HTML DOM model is constructed as a tree of Objects:
HTML DOM tree of Objects

You might also like