Scribd
Upload
13 views

HTML

html csit

Uploaded by

Reeshav Mainali
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views

HTML

html csit

Uploaded by

Reeshav Mainali
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 59

HYPER TEXT MARKUP

LANGUAGE
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 a Web page
 HTML 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
A SIMPLE HTML DOCUMENT

 Example Explained
 <!DOCTYPE html>
  The <!DOCTYPE html> declaration
<html> defines this document to be HTML5

<head>  The <html> element is the root


 element of an HTML page
<title>Page Title</title>
  The <head> element contains meta
</head> information about the document

<body>
 The <title> element specifies a title for
the document
<h1>My First Heading</h1>

 The <body> element contains the
visible page content
<p>My first paragraph.</p>

</body>
 The <h1> element defines a large

heading
 The <p> element defines a paragraph
</html>
HTML TAGS

 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


WEB BROWSERS

 The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to


read HTML documents and display them.
 The browser does not display the HTML tags, but uses them to
determine how to display the document:
HTML PAGE STRUCTURE
This is a visualization of an HTML page structure.

Note: Only the content inside the <body> section (the white
area above) is displayed in a browser.
WRITE HTML USING NOTEPAD

 Step 1: Open Notepad (PC)


 Step 2: Write Some HTML

 Step 3: Save the HTML Page.


You can use either .htm or .html as file extension.

 Step 4: View the HTML Page in Your Browser.


HTML ELEMENTS


HTML ATTRIBUTES

 All HTML elements can have attributes


 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value“.

a) The href Attribute


HTML ATTRIBUTES
 The src Attribute

 The width and height Attributes


HTML HEADINGS

 Headings are defined with the <h1> to <h6> tags.


 <h1> defines the most important heading. <h6> defines the least important heading.

Output:
HTML PARAGRAPHS

Output:

This is a paragraph.
This is another paragraph.
 HTML Rules (Lines)
We use <hr /> tag to create horizontal line.

 HTML Line Breaks


If you want a new line (line break) without starting
a
new paragraph, use <br /> tag.

 HTML Styles
HTML STYLE
HTML STYLE
HTML STYLE
HTML DIVISION (DIV)
 The <div> element defines logical divisions within the document. When
you use a <div> element, you are indicating that the enclosed content is
specific section of the page and you can format the section with CSS
(Cascading Style Sheet). For example,
HTML TEXT FORMATTING
HTML TEXT FORMATTING
 <b>This text is bold</b>

 <i>This text is italic</i>

 <p>This
is <sub>subscripted</sub> text.</p>
HTML TEXT FORMATTING

 <p>This
is <sup>superscripted</sup> text.</p>

 <h2>HTML <small>Small</
small> Formatting</h2>
HTML SPACING
 Pre tag
The <pre> tag defines preformatted text
HTML SPACING
 The <br> tag inserts a single line break.
 The <br> tag is an empty tag which means

that it has no end tag.


FORMATTING TEXT PHRASES
 Span tag <span>

 The <span> tag is used to group inline-elements in a document.


 The <span> tag provides no visual change by itself.
 The <span> tag provides a way to add a hook to a part of a text or
a part of a document.
FORMATTING TEXT PHRASES
 <strong> Tag

<strong>Strong text</strong>

 <tt> Tag (Teletype)

<p><tt>Teletype text</tt></p>

Note: <tt> tag not supported in HTML5.


IMAGE ELEMENTS
 HTML <img> Tag

 The <img> tag defines an image in an HTML page.


 The <img> tag has two required attributes: src and alt.
 We can also use width and height attributes with img tag.
For example, <img src = “photo1.jpg” width = “104” height =
“142” />.
 We can use alt attribute to define an alternate text for an image.
For example, <img src= “photo1.jpg” width = “104” height =
“142” alt = “My best poto”/>.
 The "alt" attribute tells the reader what he or she is missing on a page if the
browser can't load images.
 The browser will then display the alternate text instead of the image. It is
a good
 practice to include the "alt" attribute for each image on a page, to improve the
display
 and usefulness of your document for people who have text-only browsers.
ANCHOR TAG
 <a> Tag
 The <a> tag defines a hyperlink, which is used to link from one
page to another.
 The most important attribute of the <a> element is the href
attribute, which indicates the link's destination.
 Example:
<a href=http://google.com”>Visit our Website</a>

 We can use target attribute to define where the linked


document will be opened. For example, <a href =
“http://www.cdcsit.tu.edu.np” target = “_blank”>cdcsit</a> will
open the document in a new window.
HTML LISTS

 HTML supports ordered, unordered and definition lists.


Ordered lists items are marked with numbers, letter etc. We use
<ol> tag for ordered list and each list item starts with <li> tag. For
example,
HTML LISTS
 Unordered HTML List
 An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
 The list items will be marked with bullets (small black circles) by

default:
UNORDERED HTML LIST

Example:

<ul type="disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
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 numbers by default:
ORDERED HTML LIST

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML DESCRIPTION LISTS

 HTML also supports description lists.


 A description list is a list of terms, with a description of each
term.
 The <dl> tag defines the description list, the <dt> tag
defines the term (name), and the <dd> tag describes each
term:
HTML TABLE
 Tables are defined with the <table> tag. A table is divided into rows (with
the <tr> tag),
 and each row is divided into data cells (with the <td> tag). The letters td
stands for "table
 data," which is the content of a data cell. A data cell can contain
text, images, lists,
 paragraphs, forms, horizontal rules, tables, etc. For example,
HTML TABLE
 We use border attribute to display table with border as
shown in the above example.
 Headings in a table are defined with <th> tag. For
example,

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
HTML TABLE - CELLS THAT SPAN MANY
COLUMNS
 To make a cell span more than one column, use
the colspan attribute:

<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
HTML TABLE - CELLS THAT SPAN MANY ROWS

 To make a cell span more than one row, use


the rowspan attribute:

<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
HTML FRAMES
 We can use frames to display more than one web page in the same
browser window. Each HTML document is called a frame, and
each frame is independent of the others.

 Disadvantages of using frames are:


- The web developer must keep track of more HTML documents.
- It is difficult to print the entire page.

 We use <frameset> tag to define how to divide the window into


frames.

 Each frameset defines a set of rows or columns. Within


frameset, we use <frame> tag to define what HTML document
to put into each frame.

HTML FRAMES
 <!DOCTYPE html>
 <html>

 <frameset cols="25%,*,25%">
 <frame src="frame_a.htm">
 <frame src="frame_b.htm">
 <frame src="frame_c.htm">
 </frameset>

 </html>
THE <FORM> ELEMENT

 The HTML <form> element defines a form that is used to


collect user input:
Syntax:
<form>

form elements

</form>
 An HTML form contains form elements.

 Form elements are different types of input elements, like


text fields, checkboxes, radio buttons, submit buttons, and
more.
THE <INPUT> ELEMENT

• The <input> element is the most important form element.


• The <input> element can be displayed in several ways,
depending on the type attribute.
• Here are some examples:

Type Description

<input type="text"> Defines a one-line text input field

<input type="radio"> Defines a radio button (for selecting one of


many choices)

<input type="submit"> Defines a submit button (for submitting the


form)
TEXT INPUT
 <input type="text"> defines a one-line input field for text
input:

<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
RADIO BUTTON INPUT

 <input type="radio"> defines a radio button.


 Radio buttons let a user select ONE of a limited number of
choices:

 <form>
 <input type="radio" name="gender" value="male" checked> Male<br>
 <input type="radio" name="gender" value="female"> Female<br>
 <input type="radio" name="gender" value="other"> Other
 </form>
THE <SELECT> ELEMENT

 The <select> element defines a drop-down list:


 Example
 <select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

 To define a pre-selected option, add the selected attribute to the


option:
<option value="fiat" selected>Fiat</option>
THE <TEXTAREA> ELEMENT

 The <textarea> element defines a multi-line input field (a


text area):

<textarea name="message" rows="10" cols="30">


The cat was playing in the garden.
</textarea>
THE SUBMIT BUTTON
 <input type="submit"> defines a button for submitting the form
data to a form-handler.
 When the user clicks on the "Submit" button, the content of the
form is sent to the server.
 The form's action attribute defines the name of the file to send
the content to.
 The file defined in the action attribute usually does something
with the received input.

 For example,
 <form name="input" action=" submit.php" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
THE METHOD ATTRIBUTE

 The method attribute specifies the HTTP method


(GET or POST) to be used when submitting the form data:

 The method attribute of <form> tag specifies how to send


form-data (the form-data is sent
 to the page specified in the action attribute). We can use
“get” and “post” as values of
 method attribute. When we use get, form-data can be sent
as URL variables and when we
 use post, form-data are sent as HTTP post.
GET & POST METHOD
 Notes on the "get" method:
 This method appends the form-data to the URL in
name/value pairs
 There is a limit to how much data you can place in a URL
(varies between browsers), therefore, you cannot be sure that
all of the form-data will be correctly transferred
 Never use the "get" method to pass sensitive information!
(password or other sensitive information will be visible in the
browser's address bar)
 Notes on the "post" method:
 This method sends the form-data as an HTTP post
transaction
 The "post" method is more robust and secure than "get",
and "post" does not have size limitations.
HTML INPUT TYPES

Here are the different Input types you can use in HTML:

 <input type="image">
 <input type="month">
 <input type="button">
 <input type="number">
 <input type="checkbox">  <input type="password">
 <input type="color">  <input type="radio">
 <input type="date">  <input type="range">
 <input type="reset">
 <input type="datetime-  <input type="search">
local">  <input type="submit">
 <input type="email">  <input type="tel">
 <input type="file">  <input type="text">
 <input type="time">
 <input type="hidden">
 <input type="url">
 <input type="week">
HTML INPUT TYPES
 Input Type Text
 Input Type Submit

 Input Type Password

<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
HTML INPUT TYPES
 Input Type Reset
 <input type="reset"> defines a reset

button that will reset all form values to their


default values:
<form >
First name:<br>
<input type="text" name="firstname" value="Mickey">
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
HTML INPUT TYPES
 Input Type Radio
 Input Type Button
 Input Type Checkbox
<input type="checkbox"> defines a checkbox.

 <form action="/action_page.php">
 <input type="checkbox" name="vehicle1" value="Bike">I have a bike
 <br>
 <input type="checkbox" name="vehicle2" value="Car">I have a car
 <br><br>
 <input type="submit">
 </form>
HTML INPUT ATTRIBUTES

 The value Attribute


 The value attribute specifies the initial value for an
input field:
 <form action="">
 First name:<br>
 <input type="text" name="firstname" value="John">
 <br>
 Last name:<br>
 <input type="text" name="lastname">
 </form>
HTML INPUT ATTRIBUTES
 The readonly Attribute

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly
>
</form>

 The disabled Attribute


The disabled attribute specifies that the input field is
disabled.
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form>
HTML INPUT ATTRIBUTES
 The size Attribute

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40
">
</form>
HTML THE ID ATTRIBUTE

 The id attribute specifies a unique id for an HTML element


(the value must be unique within the HTML document)
 #(hash) is used to identity ID attribute.

HTML class Attribute


 The class attribute specifies one or more class names for an
element.
 .(dot) is used to identity Class attribute.
HTML <META> TAG

 Metadata is data (information) about data.


 HTML includes a meta element that goes inside the head
element. The purpose of the meta element is to provide meta-
information about the document.
 Meta elements are purely used for search engine’s use and to
provide some additional information about your pages. We use
three attributes (name, content, and http-equiv) with <meta>
tag.
 For Example:
 <head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
</head>
HTML <META> TAG
 We use name = “keywords” to provide information for a search engine. If
the keywords
 you have chosen are the same as the ones they have put in, you
come up in the search
 engine’s result pages. For example,
 <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML,
JavaScript" />

 We use name = “description” to define a description of your page. It is sort


summary of
 the content of the page. Depending on the search engine, this will be
displayed along with
 the title of your page in an index. For example,
 <meta name="description" content="Free Web tutorials on HTML, CSS,
XML, and
 XHTML" />
HTML <META> TAG
 We use name = “generator” to define a description for the
program you used to write
 your pages. For example,
 <meta name="generator" content="Homesite 4.5" />

 We use name = “author” and name = “copyright” for author and


copyright details. For
 example,
 <meta name="author" content="W3schools" />
 <meta name="copyright" content="W3schools 2005" />

 We use name = “expires” to give the browsers a data, after which


the page is deleted from
 the browsers cache, and must be downloaded again. This is useful if
you want to make sure
 your visitors are reading the most current version of a page. For
example,
 <meta name="expires" content="13 July 2008" />
THE HTML <AUDIO> ELEMENT

 To play an audio file in HTML, use the <audio> element:


 <audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

HTML <video> Tag

 The <video> tag specifies video, such as a movie clip or other video
streams.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

You might also like