DCA BOOK NEW BOOK.pdf · AMAN Computer Institute Head Office - Kadir Complex, Naya Bazar, Jugsalai, Jamshedpur -6, Mob.-9234710576 Branch - River View Colony, Adityapur-1, Mob.- 9431329397

AMAN Computer Institute

Head Office - Kadir Complex, Naya Bazar, Jugsalai, Jamshedpur -6, Mob.-9234710576

Branch - River View Colony, Adityapur-1, Mob.- 9431329397 Page 60

HTML Lesson In this first lesson, you will get a brief presentation of the tools you need to make a website. What is needed? Most likely you already have everything you need.

You have a "browser". A browser is the program that makes it possible to browse and open websites. Right now you are looking at this page in your browser. Example : Microsoft Internet Explorer, Opera and Mozilla Firefox. You need a simple text editor. If you are using Windows you can use Notepad, which is usually found in the start menu under Programs in Accessories:

Do I need to be online? You do not need to be connected to the Internet while making your websites. What is HTML? HTML is the "mother tongue" of your browser.

To make a long story short, HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different universities to gain access to each other's research documents. The project became a bigger success than Tim Berners-Lee had ever imagined. By inventing HTML he laid the foundation for the web as we know it today. HTML is a language, which makes it possible to present information (e.g. scientific research) on the Internet. What you see when you view a page on the Internet is your browser's interpretation of HTML. To see the HTML code of a page on the Internet, simply click "View" in the top menu of your browser and choose "Source".

What can I use HTML for?

If you want to make websites, there is no way around HTML. Even if you're using a program to create websites, such as Dreamweaver, a basic knowledge of HTML can make life a lot simpler and your website a lot better.

What does H-T-M-L stand for? HTML is an abbreviation of "Hyper Text Mark-up Language" -




Elements and tags

Elements give structure to a HTML document and tells the browser how you want your website to be presented. Generally elements consists of a start tag, some content, and an end tag.

"Tags"? Tags are labels you use to mark up the beginning and end of an element. All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">". Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag. HTML is all about elements. To learn HTML is to learn and use different tags. The elements h1, h2, h3, h4, h5 and h6 is used to make headings (h stands for "heading"), where h1 is the first level and normally the largest text, h2 is the second level and normally slightly smaller text, and h6 is the sixth and last in the hierarchy of headings and normally the smallest text.

Example 2: <h1>This is a heading</h1> <h2>This is a subheading</h2> Will look like this in the browser: This is a heading This is a subheading So, I always need an opening tag and a closing tag?

As they say, there's an exception to every rule and in HTML the exception is that there are a few elements which both open and close in the same tag. These so-called empty elements are not connected to a specific passage in the text but rather are isolated labels, for example, a line break which looks like this: <br />.

Should tags be typed in uppercase or lowercase?

Most browsers might not care if you type your tags in upper, lower or mixed cases. <HTML>, <html> or <HtMl> will normally give the same result. However, the correct way is to type tags in lowercase. So get into the habit of writing your tags in lowercase.

Where do I put all these tags?

You type your tags in an HTML document. A website contains one or more HTML documents. When you surf the Web, you merely open different HTML documents.

Create your first website How? Open Notepad (in Accessories under Programs in the Start menu): What can I do?

HTML is simple and logical. The browser reads HTML like you read English: from the top down and from left to right. Thus, an simple HTML document begins with what should come first and ends with what should come last. The first thing you need to do is to tell the browser that you will "talk" to it in the language HTML. This is done with the tag <html> (no surprises there). So before you do anything else type "<html>" in the first line of your document in Notepad.




<html> is an opening tag and must be closed with a closing tag when you are finished typing HTML. So to make sure you don't forget the HTML close tag now type "</html>" a couple of lines down and write the rest of the document between <html> and </html>. The next thing your document needs is a "head", which provides information about your document, and a "body", which is the content of the document. Since HTML is nothing if not logical, the head (<head> and </head>) is on top of the body (<body> and </body>).

Your document should now look like this: <html> <head> </head> <body> </body> </html> How do I add content to my website? As you learnt earlier, your HTML document has two parts: a head and a body. In the head section you

write information about the page, while the body contains the information that constitutes the page.

So in the body section, type the following: <p>Hurrah! This is my first website.</p> The p in <p> is short for "paragraph" which is exactly what it is - a text paragraph. Your HTML document should now look like this: <html> <head> <title>My first website </title> </head> <body> <p>Hurrah! This is my website.</p> </body> </html> Done! You have now made your first real website! Next all you have to do is to save it to your hard drive and then open it in your browser: In Notepad choose "Save as..." under "File" in the top menu.

Choose "All Files" in the "Save as type" box. This is very important - otherwise, you save it as a text document and not as an HTML document. Now save your document as "page1.htm" (the ending ".htm" indicates that it is an HTML document. ".html" gives the same result. I always use ".htm", but you can choose whichever of the two




extensions you prefer). It doesn't matter where you save the document on your hard drive - as long as you remember where you saved it so you can find it again.

Now go to the browser: In the top menu choose "Open" under "File" (or press CTRL+O). Click "Browse" in the box that appears. Now find your HTML document and click "Open".

It now should say "Hurrah! This is my first website." in your browser. Congratulations! Always start with the basic template we made in the previous lesson: <html> <head> <title></title> </head> <body> </body> </html> In the head section, always write a title: <title>The title of your page</title>. Notice how the title will be

shown in the upper left corner of your browser:




The title is especially important because it is used by search engines (such as Google) to index your website and is shown in the search results.

In the body section, you write the actual content of the page. You already know some of the most

important elements: <p>Is used for paragraphs.</p> <em>Emphasis text.</em> <h1>Heading</h1> <h2>Subhead</h2> <h3>Sub-subhead</h3> So what's next? Try to create a few pages yourself. For instance, make a page with a title, a heading, some text, a

subhead and some more text.




HTML Tags

Name HTML

Tag HTML Code Example Browser View

Comment  Nothing will show

Document Title <title> <title>Title of your HTML page</title>

Title of your web page

will be viewable in the

title bar.

Heading <head> <head>Contains elements describing the

document</head> Nothing will show

Body <body> <body>The content of your HTML

page</body>

Contents of your web

page

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

<h1>Heading 1 Example</h1>






Italic <i> <i>Example</i> Example

Bold <b> <b>Example</b> Example

Underline <u> <u>Example</u> Example

Big (Text) <big> <big>Example</big> Example

Small (Text) <small> <small>Example</small> Example

Deleted Text <strike> <strike>Example</strike> Example

Strong <strong> <strong>Example</strong> Example

Subscript <sub> H<sub>2</sub>SO<sub>4</sub> H2SO4

Superscript <sup> A<sup>2</sup>+B<sup>2</sup> A2+B

2

Line Break <br> The contents of <br>your page The contents of

your page

Center <center> <center>This will center your

contents</center>

This will center your

contents

Anchor <a> <a href="http://www.domain.com/">

Visit Our Site</a> Visit Our Site

Mailto Email Link <a>

<a

href="mailto:[email protected]">Email

Link</a>

Email Link

Image <img>

<img src="Earth.gif" width="41"

height="41" border="0" alt="text describing

the image" />

Menu <menu>

<menu> <li type="disc">List item 1</li>

<li type="circle">List item 2</li>

<li type="square">List item 3</li>

• List item 1

o List item 2

� List item 3




</menu>

Ordered List <ol>

Numbered

<ol> <li>List item 1</li>

<li>List item 2</li>



</ol>

Numbered Special Start

<ol start="5"> <li>List item 1</li>




</ol>

Lowercase Letters

<ol type="a"> <li>List item 1</li>




</ol>

Capital Letters

<ol type="A"> <li>List item 1</li>




</ol>

Lowercase Roman Numerals

<ol type="i"> <li>List item 1</li>




</ol>

Capital Roman Numerals

<ol type="I"> <li>List item 1</li>




</ol>

Capital Roman Numerals Special Start

<ol type="I" start="7"> <li>List item 1</li>


Numbered 1. List item 1

2. List item 2

3. List item 3

4. List item 4

Numbered Special

Start 5. List item 1

6. List item 2

7. List item 3

8. List item 4

Lowercase Letters a. List item 1

b. List item 2

c. List item 3

d. List item 4

Capital Letters A. List item 1

B. List item 2

C. List item 3

D. List item 4

Lowercase Roman

Numerals i. List item 1

ii. List item 2

iii. List item 3

iv. List item 4

Capital Roman

Numerals I. List item 1

II. List item 2

III. List item 3

IV. List item 4

Capital Roman

Numerals Special Start VII. List item 1

VIII. List item 2






</ol>

IX. List item 3

X. List item 4

Definition Description <dd>

<dl>

<dt>Definition Term</dt>

<dd>Definition of the term</dd> <dt>Definition Term</dt>

<dd>Definition of the term</dd> </dl>

Definition Term

Definition of the term Definition Term

Definition of the term

Definition Term <dt>

<dl>

<dt>Definition Term</dt> <dd>Definition of the term</dd>

<dt>Definition Term</dt> <dd>Definition of the term</dd>

</dl>

Definition Term Definition of the term

Definition Term Definition of the term

HTML Font <font> <font face="Times New Roman" size="7"

color="red ">Example</font> Example

Form <form>

<form

action="mailto:[email protected]">

Name: <input name="Name" value=""

size="10"><br>

Email: <input name="Email" value=""

size="10"><br>

<center><input type="submit"></center>

</form>

Name:

Email:

Horizontal Rule <hr>

<hr />

<hr width="50%" size="3" />

<hr width="50%" size="3" noshade />

<hr width="75%" color="red" size="4" />

Input Field <input> <input type="text" size="10"

maxlength="30">

Input Password <input> <input type="password" size="10"

maxlength="30">

Input

(Comment Box) <input>

<textarea wrap="virtual"

name="Comments" rows=3 cols=20

maxlength=100></textarea><br>

Input

(Radio Button) <input>

Select an option:<br>

<input type="radio" name="option">

Option 1

<input type="radio" name="option"

checked> Option 2

<input type="radio" name="option">

Option 3

Select an option:

Option 1

Option 2

Option 3




Input

(Checkbox) <input>

Select an option:<br>

<input type="checkbox"

name="selection"> Selection 1

<input type="checkbox" name="selection"

checked> Selection 2

<input type="checkbox"

name="selection"> Selection 3

<input type="Submit" value="Submit">

Select an option:

Selection 1

Selection 2

Selection 3

Scrolling Text

<marquee>

(Internet

Explorer)

<marquee bgcolor="#cccccc" loop="-1"

scrollamount="2" width="100%">Example

Marquee</marquee>

pl. see the effect.

Table <table>

<table border="4" cellpadding="2"

cellspacing="2" width="100%">

<tr>

<td>Column 1</td>

<td>Column 2</td>

</tr>

</table>

<table border="2" bordercolor="#336699"

cellpadding="2" cellspacing="2"

width="100%">

<tr>

<td>Column 1</td>

<td>Column 2</td>

</tr>

</table>

<table cellpadding="2" cellspacing="2"

width="100%">

<tr>

<td bgcolor="#cccccc">Column 1</td>

<td bgcolor="#cccccc">Column 2</td>

</tr>

<tr>

<td>Row 2</td>

<td>Row 2</td>

</tr>

</table>

Column 1 Column 2

Column 1 Column 2

Column 1 Column 2

Row 2 Row 2

Table Data <td>



<tr>

<td>Column 1</td>

<td>Column 2</td> </tr>

</table>

Column 1 Column 2

Table Header <th> <div align="center">

<table> Column

1

Column

2

Column

3




<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th> </tr>

<tr>

<td>Row 2</td>

<td>Row 2</td>

<td>Row 2</td>

</tr>

<tr>

<td>Row 3</td>

<td>Row 3</td>

<td>Row 3</td>

</tr>

<tr>

<td>Row 4</td>

<td>Row 4</td>

<td>Row 4</td>

</tr>

</table>

</div>

Row 2 Row 2 Row 2

Row 3 Row 3 Row 3

Row 4 Row 4 Row 4

Table Row <tr>



<tr> <td>Column 1</td>

<td>Column 2</td>

</tr> </table>

Column 1 Column 2

WEB DESIGN Assignment – 1 Web Page Development -HTML Create a basic web page using Notepad. The topic of the web page is up to you (within

acceptable use). � Create a web page containing information about you, your family and friends. Enter a suitable title for your page. Add some sub-titles for different sections of your text. For

example, you could have a subheading for where you live, your family, your interests etc. � Format the text of your web page in different Font, Alignment styles. Move the cursor to a

sub-title and set it to Heading2.

Experiment with the different heading styles to see what each one does .Which of these styles do you think is useful? Which are less useful? Why? Experiment with the font size, color, style (bold, italic, underline, etc.) and alignment (left, center, right or indented.




� See the HTML that is generated by Browser by selecting View Page source. � Add a picture to your web page. � Experiment with different sizes of picture and different locations within your web page. Also,

experiment with different alignment and text wrappings. � Your HTML documents should have the following characteristics: - a) Use of paragraphs. b) Use of 1 or more levels of section headers. c) Use of highlighting (bold, italics, etc.) d) Use of lists. e) Use of internal links (to other parts of your document) commonly used for a document table

of contents. f) Use of links to graphic images and alternate text, in case the image could not be found or is

not loaded (alternatively). By using the above items one should be able to create his/her own home page. Assignment – 2 Create a document with two links to an external document. The first link should lead to the beginning of the external document. The second link should lead to a particular section in the external document. Assignment – 3 Prepare a "resume.html" that might include such information as:

a) distinguishing marks b) special interests c) work history d) education and training e) job objective f) relevant skills and experience

Assignment – 4

Create the following HTML page

The keywords for the page are travel, recreation, and flight reservations.




Assignment – 5

Design the form using HTML tags.

Assignment –6

Design the following web page using HTML Tags:




Assignment –7

Design the above webpage in which the links for courses should be in the same page with the following details: Short term Courses. Doeacc Center offers following short-term courses

a) Use of Personal Computer b) 'C' Language c) 'C++" Language d) Visual Basic e) Oracle/Dev. 2000 f) AutoCAD g) Internet and Web Designing

Long term courses Aman Computer Institute Center offers following long-term courses

a) O' Level b) A' Level c) B' Level d) C' Level

Corporate courses Aman Computer Institute Center offers following corporate courses

a) Use of Personal Computer b) Courses according to their requirement

Assignment – 8

a) Make a table with your friend’s details in it. b) Column One, your friends names c) Column Two, Address of your friends d) Column Three, Mobile No of your friends e) Column Four, Birth-Date of your friends

Assignment – 9 a) Create a 4x3 table b) Within each table, place 12 images of Indian Tourist Spots, in each box c) Each image link to the corresponding site of Tourist Spot d) Each Image must be at least 100x100 in size




Assignment – 10 � Create a page with two frames � The left frame of page contains the list of names & Images of the Indian National Hero’s.. � On the left frame when you click on name or image, the details will be shown on the right

frame. Assignment – 11 create a job application form � Create an area called section one and place text boxes that receives details -

a) Name b) Age c) Gender d) High School e) Qualifications

� Create an area called section two and place text boxes that receives details - a) Previous Employment b) References c) Qualification � At the end place a submit button Assignment – 12

a) Take the picture of the motherboard b) Place an image map on each item that is pointed out on the picture c) Have them link to some information that you know about them. d) There should be some sort of navigation or a back button on each page

Documents

DCA BOOK NEW BOOK.pdf · AMAN Computer Institute Head Office - Kadir Complex, Naya Bazar, Jugsalai, Jamshedpur -6, Mob.-9234710576 Branch - River View Colony, Adityapur-1, Mob.- 9431329397