AMAN Computer Institute. HTML Lesson

Size: px

Start display at page:

Download "AMAN Computer Institute. HTML Lesson"

Margery Morgan
5 years ago
Views:

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

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?

1 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" - Branch - River View Colony, Adityapur-1, Mob Page 60

2 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. Branch - River View Colony, Adityapur-1, Mob Page 61

3 <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 Branch - River View Colony, Adityapur-1, Mob Page 62

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.

It now should say "Hurrah! This is my first website." in your browser. Congratulations!

4 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: Branch - River View Colony, Adityapur-1, Mob Page 63

5 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. Branch - River View Colony, Adityapur-1, Mob Page 64

6 Name Comment  <title> <title>title of your HTML page</title> <head> <body> <h1> <h2> <h3> <h4> <h5> <h6> <head>contains elements describing the document</head> <body>the content of your HTML page</body> <h1>heading 1 Example</h1> <h2>heading 2 Example</h2> <h3>heading 3 Example</h3> <h4>heading 4 Example</h4> <h5>heading 5 Example</h5> <h6>heading 6 Example</h6> Italic <i> <i>example</i> Example Browser View Nothing will show Title of your web page will be viewable in the title bar. Nothing will show 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> H 2 SO 4 Superscript <sup> A<sup>2</sup>+B<sup>2</sup> A 2 +B 2 Line Break Center Anchor <br> The contents of <br>your page <center> <a> Mailto Link <a> Image Menu <img> <menu> <center>this will center your contents</center> <a href=" Visit Our Site</a> <a href="mailto:you@yourdomain.com"> Link</a> <img src="earth.gif" width="41" height="41" border="0" alt="text describing the image" /> <menu> <li type="disc">list item 1</li> <li type="circle">list item 2</li> <li type="square">list item 3</li> Contents of your web page The contents of your page This will center your contents Visit Our Site Link List item 1 o List item 2 List item 3 Branch - River View Colony, Adityapur-1, Mob Page 65

7 </menu> Numbered <ol> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ol> Numbered Special Start <ol start="5"> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ol> Lowercase Letters type="a"> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ol> 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 Ordered List <ol> Capital Letters type="a"> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ol> Capital Letters A. List item 1 B. List item 2 C. List item 3 D. List item 4 Lowercase Roman Numerals type="i"> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ol> Lowercase Roman Numerals i. List item 1 ii. List item 2 iii. List item 3 iv. List item 4 Capital Roman Numerals type="i"> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ol> Capital Roman Numerals I. List item 1 II. List item 2 III. List item 3 IV. List item 4 Capital Roman Numerals Special Start type="i" start="7"> <li>list item 1</li> <li>list item 2</li> Capital Roman Numerals Special Start VII. List item 1 VIII. List item 2 Branch - River View Colony, Adityapur-1, Mob Page 66

8 Definition Description <dd> Definition Term <dt> HTML Font <font> Form <form> Horizontal Rule <hr> Input Field <input> <li>list item 3</li> <li>list item 4</li> </ol> <dl> <dt>definition Term</dt> <dd>definition of the term</dd> <dt>definition Term</dt> <dd>definition of the term</dd> </dl> <dl> <dt>definition Term</dt> <dd>definition of the term</dd> <dt>definition Term</dt> <dd>definition of the term</dd> </dl> <font face="times New Roman" size="7" color="red ">Example</font> <form Name: <input name="name" value="" size="10"><br> <input name=" " value="" size="10"><br> <center><input type="submit"></center> </form> <hr /> <hr width="50%" size="3" /> <hr width="50%" size="3" noshade /> <hr width="75%" color="red" size="4" /> <input type="text" size="10" maxlength="30"> IX. List item 3 X. List item 4 Definition Term Definition of the term Definition Term Definition of the term Definition Term Definition of the term Definition Term Definition of the term Example Name: 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 Branch - River View Colony, Adityapur-1, Mob Page 67

9 Input (Checkbox) Scrolling Text <input> <marquee> (Internet Explorer) 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"> <marquee bgcolor="#cccccc" loop="-1" scrollamount="2" width="100%">example Marquee</marquee> <table border="4" cellpadding="2" cellspacing="2" width="100%"> <td>column 1</td> <td>column 2</td> </table> Select an option: Selection 1 Selection 2 Selection 3 pl. see the effect. Column 1 Column 2 Table <table> <table border="2" bordercolor="#336699" cellpadding="2" cellspacing="2" width="100%"> <td>column 1</td> <td>column 2</td> </table> Column 1 Column 2 <table cellpadding="2" cellspacing="2" width="100%"> <td bgcolor="#cccccc">column 1</td> <td bgcolor="#cccccc">column 2</td> <td>row 2</td> <td>row 2</td> </table> Column 1 Column 2 Row 2 Row 2 Table Data <td> <table border="2" cellpadding="2" cellspacing="2" width="100%"> <td>column 1</td> <td>column 2</td> </table> Column 1 Column 2 Table Header <th> <div align="center"> <table> Column 1 Column 2 Column 3 Branch - River View Colony, Adityapur-1, Mob Page 68

10 <th>column 1</th> <th>column 2</th> <th>column 3</th> <td>row 2</td> <td>row 2</td> <td>row 2</td> <td>row 3</td> <td>row 3</td> <td>row 3</td> <td>row 4</td> <td>row 4</td> <td>row 4</td> </table> </div> Row 2 Row 2 Row 2 Row 3 Row 3 Row 3 Row 4 Row 4 Row 4 Table Row <table border="2" cellpadding="2" cellspacing="2" width="100%"> <td>column 1</td> <td>column 2</td> </table> Column 1 Column 2 Assignment 1 WEB DESIGN 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. Branch - River View Colony, Adityapur-1, Mob Page 69

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.

11 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. Branch - River View Colony, Adityapur-1, Mob Page 70

12 Assignment 5 Design the form using HTML tags. Assignment 6 Design the following web page using HTML Tags: Branch - River View Colony, Adityapur-1, Mob Page 71

13 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 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 Branch - River View Colony, Adityapur-1, Mob Page 72

14 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 Branch - River View Colony, Adityapur-1, Mob Page 73

Tag Name Code Example Browser View.  <a href=" Visit Our Site</a>

Tag Name Code Example Browser View Visit Our Site Nothing will show Visit Our Site