Scribd
Upload
7 views14 pages

3. WT Unit 1 (HTML)

This document provides an overview of HTML, covering its definition, elements, tags, lists, color coding, fonts, hyperlinks, images, and forms. It explains the structure of HTML documents, including essential elements like <html>, <head>, <title>, and <body>, as well as various input types for forms. Additionally, it details how to create lists, style text, and incorporate images and links into web pages.

Uploaded by

chaudharydanish1111
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views14 pages

3. WT Unit 1 (HTML)

This document provides an overview of HTML, covering its definition, elements, tags, lists, color coding, fonts, hyperlinks, images, and forms. It explains the structure of HTML documents, including essential elements like <html>, <head>, <title>, and <body>, as well as various input types for forms. Additionally, it details how to create lists, style text, and incorporate images and links into web pages.

Uploaded by

chaudharydanish1111
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

UNIT 2

Web Page Designing: HTML: List, Table, Images, Frames, forms, CSS, Document type definition, XML:
DTD, XML schemes, Object Models, presenting and using XML, Using XML Processors: DOM and SAX,
Dynamic HTML

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 thatstands for Hypertext Markup Language.
 We can apply this markup language to your pages to display text, images, sound and movie
files, andalmost 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 theweb 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>
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 thetop of a viewer's browser.
<html><head><title>My WebPage!</title></head></html>

3. 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 ofthe 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 textdepends 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 lineyou are currently on and resumes on the next line.
<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.

<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 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.

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 hashad 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. Usethe 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/
HTML – Images
o Use the <img /> tag to place an image on your web page.
<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
.htmlfile
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

<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
methodattribute 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 sizeof 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.

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.

<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, andthe 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.
o Another attribute to be aware of is the wrap. Wrap has 3 values.

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


<textarea rows="5" cols="20" name="comments"> Enter Comments Here
</textarea>
</form>

HTML Tables
o The <table> tag is used to begin a table. Within a table element are the <tr> (table rows)
and
<td> (table columns) tags.

<table border="1">
<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>

Row 1 Cell 1 Row 1 Cell 2


Row 2 Cell 1 Row 2 Cell 2
o Content is placed within tables cells. A table cell is defined by <td> and </td>.The
borderattribute defines how wide the table's border will be.

Spanning Multiple Rows and Cells


o Use rowspan to span multiple rows and colspan to span multiple columns.
o Note: if you would like to place headers at the top of your columns, use the <th> tag
as shownbelow. By default these headers are bold to set them apart from the rest of
your table's content.

<table border="1"><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>


<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>

Column 1 Column 2 Column 3


Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

Cell Padding and Spacing


o With the cellpadding and cellspacing attributes you will be able to adjust the white space
on your tables. Spacing defines the width of the border, while padding represents the
distance between cell borders and the content within. Color has been added to the table
to emphasize these attributes.

<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">


<tr><th>Column 1</th><th>Column 2</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>

o And now we will change the cellpadding of the table and remove the cellspacing
from the previous example.

<table border="1" cellpadding="10" bgcolor="rgb(0,255,0)">


<tr><th>Column 1</th><th>Column 2</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>

What is an HTML Form? Discuss different form attributes


 Form is a data collection mechanism within HTML that allows the design of various styles
of inputto suit most types of information.
 An input element can vary in many ways, depending on the type attribute. An input
element canbe of type textfield, checkbox, password, radiobutton, submit button, and
more.
 Following are attributes of <form>.

1. Name:
 Thename attribute specifies
thenameofaformwhichisusedtoreferenceelementsinaJavaScript.

<form action="URL"> Value : URL


Description : Where to send the form
data.

2. Action:
 The required action attribute specifies where to send the form‐data when
a form issubmitted.
<form action="URL"> Value : URL
Description : Where to send the form
data.

3. Method :
 The method attribute specifies how to send form‐data (the form‐data is
sent to thepagespecified in the action attribute).

<form
method="get|post">
Value : get
Description : Default. Appends the form‐data to the URL in
name/value pairs:URL?name=value&name=value
Value : post
Description : Sends the form‐data as an HTTP post transaction.

4. Target
 The target attribute specifies a name or a keyword that indicates where to
display the response that is received after submitting the form.
<form target="_blank|_self|_parent|_top|framename">

Value Description
_blank Theresponseisdisplayedinanewwindowortab
_self Theresponseisdisplayedinthesameframe(thisisdefault)
_parent Theresponseisdisplayedintheparentframe
_top Theresponseisdisplayedinthefullbodyofthewindow
framename Theresponseisdisplayedinanamedframe
What is CSS?
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files

Importance of CSS
CSS defines HOW HTML elements are to be displayed.
Styles are normally saved in external .css files. External style sheets enable you to
change theappearance and layout of all the pages in a Web site, just by editing one single
file.

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the
process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the
style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background
images or colors are used, layout designs,variations in display for different devices and screen sizes as
well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML
document. Most commonly, CSS is combined with the markup languages HTML or XHTML.
Advantages of CSS

 CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. You
can define a style for each HTML element and apply it to as many Web pages as you want.
 Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time.
Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means
faster download times.
 Easy maintenance − To make a global change, simply change the style, and all elements in all the
web pages will be updated automatically.
 Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a
far better look to your HTML page in comparison to HTML attributes.
 Multiple Device Compatibility − Style sheets allow content to be optimized for more than one
type of device. By using the same HTML document, different versions of a website can be
presented for handheld devices such as PDAs and cell phones or for printing.
 Global web standards − Now HTML attributes are being deprecated and it is being recommended
to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to
future browsers.

You might also like