Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
10 views

HTML Basic

Uploaded by

Lakshya Pal
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
10 views

HTML Basic

Uploaded by

Lakshya Pal
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 32

HTML

[Hyper Text Markup Language]

Dr. Archana B Saxena, Professor,


Department of Information Technology,
Archanab.saxena@jimsindai.org,
archanabsaxena@gmail.com
What is HTML???
 Hypertext markup language
 It is not a programming language
 It is a markup language and uses tags.
 It is an interpreted language
 Browsers are used to view the HTML document.
 Examples: IE , Netscape navigator
 Tags are not case sensitive.
 Editors are used to create a webpage.
 Editors:, Visual studio code, Notepad,wordpad,Visual Interdev, Front
page,
 All HTML files are plain ASCII text file with .htm or .html extension
 Every tag has opening and closing brackets
 There are two types of tags:
 Empty Tag:
Tags that do not require end tag
Example:<br>, <marquee>
 Container Tag
 Tags that has starting and ending tags
 Ex: <body> </body>
 Container tags has attributes
Installation of Visual studio code
 Download and install visual studio code
 https://code.visualstudio.com/download
 Open visual studio code and create new webpage
 Extension required to open html page in browser
 Go to extensions
 Type “Open in browser”
 Install the extension
 Select the page , right click, and select “open in browser/
open in default browser”
HTML 5
 Container Tag:
These tags contain both opening and end tag.
Example:
<html>…………</html>
<head> ………</head>
DOM (Document Object Model)
DOM
Parts Of HTML Document
An HTML document has two distinct parts: a head, a body
Head:
 This a header portion. We can use title, script and meta data tags in this
portion.
Body
 : This is the place where we can enter text, table ,graphics and other
work.
<html>
<head>
<title>
Welcome to JIMS
</title>
</head>
<body>
We are doing HTML. It is very interesting.
tags are not case sensitive. Browser interpret the
tags.

</body>
</html>
Various HTML Tags
Heading Tags
 <h1> </h1> to <h6> </h6>
 <hr> : Horizontal Row
 <center> </center> : Centralized the Text
Formating Tags
<br> : Line Break
<p> </p> : Paragraph
<b> </b> : To Make Contents Bold
Formatting Tags
 <big> </big> :To specify big size & Bold
 <small> </small>: To Specify small size
 <Font size: color: face:> </font>: To specify Size, color &
font face of text
 <pre> </pre>: For Predefine format of text same as in
code.
 <em> </em>: To emphasis a text same as Italic
 <strong> </strong>: Strong Emphasis bold text
 <blockquote> </blockquote>:To quote text different from
rest of the document.
 <i> </i> : To make contents Italic
 <u> </u> : To underline the contents
 <Basefont color: size: face: > </basefont>:Is used to set
standard face, color & size for text of the document.Unless
they are overridden by the another font or basefont
element.
Image
 <img>:Tag used to display image
Attributes are : src, align, alt, border, height, width
Src :Points to the URL of the graphic file to be
displayed.
Align : alignment of the image.
Values:top,bottom,left,right,center
Border: border thickness in pixels.
Alt : alternative text for the users who use text based
browsers.
Hspace : horizontal white space around the image
Vspace : Vertical white space around the image
Hyperlinks

 Links are used to link with different pages with the


current web page.
 <a> </a> is used to link with the web pages
Attributes:
href: Address of the webpage that need to be
adressed.
Name: Used to create lables in a document. It is possible to
link different parts of same document.
Marquee Tag

 <marquee> </marquee>: To scroll text


horizontally on a web page.
Attributes:
Align: aligning the text in marquee. Values:
top,bottom,middle
Behavior: behavior of text, how text scrolls.
Values: slide, alternate, scroll.
Bgcolor: background color of the marquee.
Direction: Specifies the direction in which
the text will scroll . Values: left, right
 Height : height of the marquee.
 width: Width of the marquee
 Hspace: left & right margin outside the
marquee.
 Loop: No. of times marquee will loop when
activated. -1 indicates infinite.
 Scrollamount: The number of pixels move
between each draw.
 Scrolldelay: No of milliseconds between each
sucessive draw of the marquee text.
 Vspace: top & bottom margin outside the
marquee.
Listing

Ordered List
<ol> <li> </li></ol>: To create an ordered list.
Example:1,2,3…… a,b,c….I,II, III
Attributes:
Type: type of listing values(a,A,1,i,I)
Start: Initial value for the list.
Unordered List
<ul> <li> </li></ul>
 Menu List
Menu list is same as unordered list the difference
lies in the fact that this list is used for HTML
identification, means <a > tag can be used with
this listing.
<menu>
<li> </li>
</menu>
Directory List
This tag is intented to display items like file,
directories in a row.
<dir> <li> </li></dir>
 Defination List: This list item can be used as dictionary.
 <dl>
 <dt>
 <dd>
 <dt>
 <dd>
 <dl>
Table
 Table tag is used to create table in HTML
document.
<table> </table>
Attributes:
Border: size of the border around the table.
Cellspacing: value in pixels, its space between
cells in table.
Cellpadding: value in pixels , its space between
celldata & cellwall.
Width: Width of the table
 Height: Height of the table.
 align: Horizontal Positioning of table in respect
of page, values: left, right , center
 valign:vertical positioning of the table in
respect of page. Value: top, bottom
 Bgcolor: background color of table.
 Bordercolor: bordercolor of table.
 Bordercolorlight: used in three dimesion table.
color in top & left
Bordercolordark: used in three dimesion table.
Color in bottom & right
Background: to display image as background of
table.
 <caption> </caption>: specifies caption of table,
appears inside the table but outside rows or cells.
 <th> </th>
 <tr> </tr>
Attributes:
Align:
Valign:
Bgcolor:
Bordercolor:
Bordercolorlight:
Bordercolordark:
 <td> </td>
Attributes:
Align:
Valign:
Width:
Height:
Colspan:No. of columns cell can span
Rowspan:No of rows cell can span
Bgcolor:
MailTo Tag

To open outlook express from link use


<a href=“mailto:archana@jimsindia.org”>

To Connect with any other site:


<a href="http:\\www.yahoo.com">yahoo</a>
Frames

 The basic structure of the FRAME document resembles


the HTML , except that the <body> Container is
replaced by a FRAMESET container that describe the
sub-HTML documents, or frames, that make up the
page.
<html>
<head><title></title></head>
<frameset rows= cols=>
</frameset>
Rows: distribution of rows on page
Cols: distributionof cols on page
<frame src=“” name=“” marginwidth=“” marginheight=“” scrolling=yes/no
noresize frameborder= “” framespacinfvalue=“”>
</frame>
Src=the SRC sttribute takes as its value the URL of the document to be
displayed in the frame. Without this attribute SRC frames are displayed as
a blank space, the size of the frame can be seen.
 Name: the name attribute is used to assign a
name to a frame so that it can be targated by
links in other documents.
 Marginwidth:it is used to contro the margins for
the frame.
 Marginheight : same as marginheight but it
controls upper & lower margins.
 Scrolling: this sttribute decides frames should
have scroll bar or not. value:yes/no/auto
 Noresize: this attribute has no value except
that it informs that the frame is not resizeable
by the user.
 Frameborder: this attribute allows control of
the frame border display.
 Framespacing: This attribute allows the extra
space around the frame.
Forms

 Forma are an effective means of


making web pages user friendly. Forms
are used in HTML for getting inputs
from the user. Before the introduction
of forms, there were no user
interactions possible on the web page.
<form > </form>
Attributes:
Action: this is a URL, specifying the
location to which the contents of the
form are submitted to elicit a
response. If this attribute is missing,
then the URL of the document itself is
assumed.
 Enctype: this specifies the format of the submitted data, in case this
attribute is missing protocol does impose the format itself.
 Method: this select the format in which data is transferred to the server.
It takes two valus:get/Post

Various Form Elements


TextBox: <input type=text name=“” value=“”>
Password:<input type=password name=“” value=“”>
 Checkbox:<input type=checkbox name=“”
value=“” checked>
 Radio:<input type=radio name=“”value=“”
checked >
 Textarea: <textarea rows=“ cols”” name=“”
value=“”> </textarea>
 Button: <input type=button name=“” value=“”>
 Submit: <input type=submit value=“” name=“”>
 Reset: <input type=reset value=“” name=“”>
 Hidden:<input type=hidden name=“” value=“”>
 <select name=“” multiple>
 <option value=“” selected> </option>

 </select>
 Style Tag
 The <style> tag in HTML helps us to modify our
text, viewed in the page. This modification
includes changing font size, font family, font color
etc. Not only the texts but also we can change the
style of a body ar part of a page. Now let’s look at
various attributes of style and what else the tag
supports.
 Syntax

You might also like