Scribd
Upload
38 views

IMP Web Technology Notes

Uploaded by

mamidwarishu67
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

IMP Web Technology Notes

Uploaded by

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

WEB TECHNOLOGIES [J.B.

INSTITUTE OF ENGINEERING AND TECHNOLOGY]

UNIT-I
HTML
What is HTML?
 Stands for Hypertext Markup Language.
 Most documents that appear on the World Wide Web were written in HTML.
 HTML is a markup language, not a programming language. In fact, the term HTML is an acronym that
stands for Hypertext Markup Language.
 We can apply this markup language to your pages to display text, images, sound and movie files, and
almost any other type of electronic information.
 We use the language to format documents and link them together, regardless of the type of
computer with which the file was originally created.

HTML Elements
 An element consists of three basic parts: an opening tag, the element's content, and finally, a closing
tag.
<p> - opening paragraph tag
Element Content - paragraph words
</p> - closing tag

 Every (web) page requires four critical elements: the html, head, title, and body elements.

1. <html> Element...</html>
o <html> begins and ends each and every web page.
o Its purpose is to encapsulate all the HTML code and describe the HTML document to the
web browser.
<html></html>

2. <head> Element
o The <head> element is "next" as they say. As long as it falls somewhere between your <html>
tag and your web page content (<body>).
o The head functions "behind the scenes." Tags placed within the head element are not directly
displayed by web browsers.
o We will be placing the <title> element here.
o Other elements used for scripting (JavaScript) and formatting (CSS) will eventually be introduced
and you will have to place them within your head element.
<html>
<head>
</head>
</html>
WEB TECHNOLOGIES [J.B.INSTITUTE OF ENGINEERING AND TECHNOLOGY]

3. The <title> Element


o Place the <title> tag within the <head> element to title your page.
o The words you write between the opening and closing <title></title> tags will be displayed at the
top of a viewer's browser.
<html><head><title>My WebPage!</title></head></html>

4. The <body> Element


o The <body> element is where all content is placed. (Paragraphs, pictures, tables, etc).
o The body element will encapsulate all of your webpage's viewable content.
<html>
<head><title>My WebPage!</title></head>
<body>
Hello World! All my content goes here!
</body>
</html>

HTML Tags
o A web browser reads an HTML document top to bottom, left to right.
o Each time the browser finds a tag, it is displayed accordingly (paragraphs look like paragraphs,
tables look like tables, etc).
o Tags have 3 major parts: opening tag(s), content(s), and closing tag(s).
o Recall that a completed tag is termed an element.

1. Paragraph Tag <p>


o The <p> tag defines a paragraph. Using this tag places a blank line above and below the text of
the paragraph.

<p>Avoid losing floppy disks with important school...</p>


<p>For instance, let's say you had a HUGE school...</p>

2. HTML - Headings 1:6


o A heading in HTML is just what we might expect, a title or subtitle.
o By placing text inside of <h1> (heading) tags, the text displays bold and the size of the text
depends on the number of heading (1-6).
o Headings are numbered 1-6, with 1 being the largest heading and 6 being the smallest.

<html><body>
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3>
<h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>
</body></html>

3. Line Breaks
o Line breaks are different then most of the tags we have seen so far. A line break ends the line
you are currently on and resumes on the next line.
WEB TECHNOLOGIES [J.B.INSTITUTE OF ENGINEERING AND TECHNOLOGY]

<p>Darshan<br />
Computer<br /></p>

HTML Lists
o There are 3 different types of lists.
o A <ol> tag starts an ordered list, <ul> for unordered lists, and <dl> for definition lists.
1. <ul> - unordered list; bullets
2. <ol> - ordered list; numbers
3. <dl> - definition list; dictionary

1. HTML Ordered Lists


o Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag between your opening <ol>
and closing </ol> tags to create list items.
o Ordered simply means numbered, as the list below demonstrates.

<ol>
<li>Find a Job</li>
<li>Move Out</li>
</ol>

o Start your ordered list on any number besides 1 using the start attribute.
<ol start="4" >
<li>Buy Food</li>
<li>Get a Degree</li>
</ol>

o There are 4 other types of ordered lists. Instead of generic numbers you can replace them with
Roman numerals or letters, both capital and lower-case. Use the type attribute to change the
numbering.

<oltype="a">
<oltype="A">
<oltype="i">
<ol type="I">
</ol>

2. HTML Unordered Lists


o Create a bulleted list with the <ul> tag. The bullet itself comes in three subtypes: squares, discs,
and circles.
o The default bullet displayed by most web browsers is the traditional full disc.
WEB TECHNOLOGIES [J.B.INSTITUTE OF ENGINEERING AND TECHNOLOGY]

<ul>
<li>Milk</li>
<li>Chocolate</li>
</ul>

o There are 3 other types of unordered lists.

<oltype="square">
<ol type="disc">
<oltype="circle">
</ol>

3. HTML Definition Term Lists


o Make definition lists as seen in dictionaries using the <dl> tag. These lists displace the term word
just above the definition itself for a unique look. It's wise to bold the terms to displace them
further.
 <dl> - defines the start of the list
 <dt> - definition term
 <dd> - defining definition

<dl>
<dt><b>Fromage</b></dt>
<dd>French word for cheese.</dd>
<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dl>
4. HTML Nested Lists
o You can also nest one list within another, so you could make an unordered list inside a
<html>
<ol>
<li> Clear out garage</li>
<ul>
<li> Tomatoes</li>
</ul>
<li> repair fence </li>
</ol>
</html>
numbered one:

HTML - Formatting Elements


o Several tags exist to further amplify text elements. These formatting tags can make text bold,
italic, sub/superscripted, and more.
WEB TECHNOLOGIES [J.B.INSTITUTE OF ENGINEERING AND TECHNOLOGY]

Tag Description Example


<b> The <b> tag specifies bold text. <b>Bold Text</b>
<i> The <i> tag specifies italic text. <i>Italic Text</i>
<em> The<em> tag specifies emphasis text <em>Emphasized Text</em>
<sup> The <sup> tag defines superscript text. Superscript <p>This text contains
text appears half a character above the baseline. <sup>superscript</sup> text.</p>
Superscript text can be used for footnotes, like
WWW [1].
<sub> The <sub> tag defines subscript text. Subscript <p>An example of
text appears half a character below the baseline. <sub>subscripted Text</sub></p>
Subscript text can be used for chemical formulas,
like H2O.
<tt> The <tt> tag defines teletype text. <p><tt>This text is teletype
text.</tt></p>
<blink> The <blink> tag is used for blinking the text. <blink> blinking text tag</blink>

HTML Color Coding System - Color Names


There are 3 different methods to set color.

o We can set color using three methods.


a. Using color name

<body bgcolor=”red”>
<font color=”red”>

b. Using RGB(Red, Green, Blue) value

<body bgcolor=”rgb(72,0,0)”>
<font color=”rgb(72,0,0)”>

c. Using Hexadecimal value

<body bgcolor=”#ffff00”>
<font color=”#ffff00”>

HTML - Font and Basefont


o The <font> tag is used to add style, size, and color to the text on your site. Use the size, color,
and face attributes to customize your fonts.
o Use a <basefont> tag to set all of your text to the same size, face, and color.
WEB TECHNOLOGIES [J.B.INSTITUTE OF ENGINEERING AND TECHNOLOGY]

1. Font Size
o Set the size of your font with size. The range of accepted values is from 1(smallest) to
7(largest).The default size of a font is 3.

<p><font size="5">Here is a size 5 font</font></p>

2. Font Color
o Set the color of your font with color.

<font color="#990000">This text is hexcolor #990000</font><br />


<font color="red">This text is red</font>

3. Font Face
o Choose a different font face using any font you have installed.

<p><font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph has


had its font...</font></p>

4. Basefont - Set a Solid Base


o With the basefont tag you will be able to set the default font for your web page.

HTML Code:
<html><body>
<basefont size="2" color="green"><p>This paragraph has had its font...</p>
</basefont>
</body></html>

HTML - Hypertext Reference (href) or Hyperlinks


o The href attribute defines reference that the link refers to. Basically this is where the user will be
taken if they wish to click this link.
o Use the <a></a> tags to define the start and ending of an anchor.
o Decide what type of href attribute you need and place this attribute into the opening tag.
o The text you place between the opening and closing tags will be shown as the link on a page. Use
the demonstration below as a reference.
o Hypertext references can be Internal, Local, or Global.
o Internal - Links to anchors on the current page
o Local - Links to other pages within your domain
o Global - Links to other domains outside of your site

Internal - href="#anchorname"
Local - href="../pics/picturefile.jpg"
Global - href=http://www.xyz.com/
WEB TECHNOLOGIES [J.B.INSTITUTE OF ENGINEERING AND TECHNOLOGY]

<a href="http://www.google.com/" target="_blank" >Google Home</a>


<a href="http://www.espn.com/" target="_blank" >ESPN Home</a>
<a href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a>

Link Targets
o The target attribute defines whether to open the page in a separate window, or to open the link
in the current browser window.

HTML Code:
target=" _blank" Opens new page in a new browser
window

target=" _self" Loads the new page in current window

target=" _parent" Loads new page into a frame that is


superior to where the link lies

target=" _top" Loads new page into the current


browser window, cancelling all frames

Anchors
o To link to sections of your existing page a name must be given to the anchor.
o In the example below, we've created a mini Table of Contents for this page.
o By placing blank anchors just after each heading, and naming them, we can then create
reference links to those sections on this page as shown below.
o First, the headings of this page contain blank, named anchors. They look like this.

<h2>HTML Links and Anchors<a name="top"></a></h2>


<h2>HTML Text Links<a name="text"></a></h2>
<h2>HTML Email<a name="email"></a></h2>

o Now create the reference links, placing the # symbol followed by the name of the anchor in the
href of the new link.

<a href="#top">Go to the Top</a>


<a href="#text">Learn about Text Links</a>
<a href="#email">Learn about Email Links</a>

HTML – Images
o Use the <img /> tag to place an image on your web page.
WEB TECHNOLOGIES [J.B.INSTITUTE OF ENGINEERING AND TECHNOLOGY]

<imgsrc="sunset.gif" />

1. Image src
o Above we have defined the src attribute.
o Src stands for source, the source of the image or more appropriately, where the picture file is
located.
o There are two ways to define the source of an image. First you may use a standard URL.
(src=http://www.Xyz.com/pics/htmlT/sunset.gif) As your second choice, you may copy or upload
the file onto your web server and access it locally using standard directory tree methods.
(src="../sunset.gif")
o The location of this picture file is in relation to your location of your .html file.

URL Types:
Local Src Location Description
src="sunset.gif" picture file resides in same directory as .html file

src="../sunset.gif" picture file resides in previous directory as .html


file

src="../pics/sunset.gif" picture file resides in the pic directory in a


previous directory as .html file

o A URL cannot contain drive letters


o Therefore something like src="C:\\www\web\pics\" will not work. Pictures must be uploaded
along with your .html file to your web server.

2. Alternative Attribute
o The alt attribute specifies alternate text to be displayed if for some reason the browser cannot
find the image, or if a user has image files disabled.

<imgsrc="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" />

3. Image Height and Width


o To define the height and width of the image, rather than letting the browser compute the size,
use the height and width attributes.

<imgsrc="sunset.gif" height="50" width="100">

4. Vertically and Horizontally Align Images


o Use the align and valign attributes to place images within your body, tables, or sections.
1. align (Horizontal)
1. right 2. left 3. center
2. valign (Vertical)
1. top 2. bottom 3. center
o Below is an example of how to align an image to the right of a paragraph
WEB TECHNOLOGIES [J.B.INSTITUTE OF ENGINEERING AND TECHNOLOGY]

<p>This is paragraph 1, yes it is...</p>


<p><imgsrc="sunset.gif" align="right">The image will appear along the...isn't it? </p>

5. Images as Links
o Images are very useful for links and can be created with the HTML below.

<a href="http://www.xyz.com/"><imgsrc="sunset.gif"></a>

HTML Forms
o A form will take input from the viewer and depending on your needs, you may store that data
into a file, place an order, gather user statistics, register the person to your web forum, or
maybe subscribe them to your weekly newsletter.

Making a Form
o <form> is main tag to build a form.
o It has a few optional attributes too. Below is an example of the form element.

<form action=”processform.php” method=”post”>


</form>

o The action attribute tells the HTML where to send the collected information, while the method
attribute describes the way to send it.

Type of Input
o The main tag for collecting information from the user is <input>.
o The tag itself contains a name attribute, so that we can refer to the input by a name, and the size
of the entry box in characters.
o There are quite few different types of input to choose from:
o <input type=”text”/> this is the default input type and accepts characters and numbers into a
text box. It can also have a value attribute attached to it, which will give it an initial value.
o <input type=”password”/> this is similar to the above text box but anything that is typed cannot
be seen; instead an asterisk is printed to cover up the entry. As the name suggests, this is used
for password entry.
o <input type=”checkbox”/> this gives a box that can be toggled between checked and unchecked.
It can initially be set to one or the other with checked=”checked”.
o <input type=”radio”/> this is similar to checkbox but in group of radio buttons only one can be
selected at a time. This can also have an initial checked state on one of the radio buttons.
o <input type=”file”/>This will give a box to allow you to choose a file similar to when you open or
save files usually on your machine. It can be used to select a file on the local machine for upload
to a server.
WEB TECHNOLOGIES [J.B.INSTITUTE OF ENGINEERING AND TECHNOLOGY]

o <input type=”submit”/> this allows a form to be submitted. When pressed, the information will
be passed on for processing, usually to a script mentioned in the action attribute option of the
form.
o <input type=”image”/> this will also submit the form when selected and, like the img tag,
requires the src attribute to specify an associated image.
o <input type=”button”/> this makes a button available.
o <input type=”reset”/> this will reset the form to its initial state when selected.
o <input type=”hidden”/> this allows hidden data(not seen by the user) to be passed along with
the form.

HTML Text Fields


o The <input> has a few attributes that you should be aware of.
o type - Determines what kind of input field it will be. Possible choices are text, submit, and
password.
o name - Assigns a name to the given field so that you may reference it later.
o size - Sets the horizontal width of the field. The unit of measurement is in blank spaces.
o maxlength - Dictates the maximum number of characters that can be entered.

<form method="post" action="mailto:[email protected]">


Name: <input type="text" size="10" maxlength="40" name="name"><br />
Password: <input type="password" size="10" maxlength="10"
name="password">

HTML Radio Buttons


o Radio buttons are a popular form of interaction. You may have seen them on quizzes,
questionnaires, and other web sites that give the user a multiple choice question. that relate to
the radio button.

<form method="post" action="mailto:[email protected]">


What kind of shirt are you wearing? <br />
Shade:
<input type="radio" name="shade" value="dark">Dark
<input type="radio" name="shade" value="light">Light <br />
</form>

HTML Check Boxes


o Check boxes allow for multiple items to be selected for a certain group of choices. The check
box's name and value attributes behave the same as a radio button.
WEB TECHNOLOGIES [J.B.INSTITUTE OF ENGINEERING AND TECHNOLOGY]

<form method="post" action="mailto:[email protected]">


Select your favorite cartoon characters.
<input type="checkbox" name="toon" value="Goofy">Goofy
<input type="checkbox" name="toon" value="Donald">Donald
<input type="checkbox" name="toon" value="Bugs">Bugs Bunny
</form>

HTML Drop Down Lists


o Drop down menues are created with the <select> and <option> tags. <select> is the list itself and
each <option> is an available choice for the user.

<form method="post" action="mailto:[email protected]">


College Degree?
<select name="degree">
<option>Choose One</option>
<option>Some High School</option>
<option>High School Degree</option>
</select>
</form>

HTML Selection List


o Yet another type of form, a highlighted selection list. This form will post what the user highlights.
Basically just another type of way to get input from the user.
o The size attribute selects how many options will be shown at once before needing to scroll, and
the selected option tells the browser which choice to select by default.

<form method="post" action="mailto:[email protected]">


Musical Taste
<select multiple name="music" size="4">
<option value="emo" selected>Emo</option>
<option value="metal/rock" >Metal/Rock</option>
<option value="hiphop" >Hip Hop</option><option value="ska" >Ska</option>
<option value="jazz" >Jazz</option>
</form>

HTML Text Areas


o Text areas serve as an input field for viewers to place their own comments onto forums and the
like use text areas to post what you type onto their site using scripts. For this form, the text area
is used as a way to write comments to somebody.
o Rows and columns need to be specified as attributes to the <textarea> tag.

You might also like