Scribd
Upload
9 views

HTML Project

The document provides examples of HTML code to create various elements like lists, tables, forms, and frames. Code samples are given to create ordered and unordered lists, tables with headers and rows, forms with different field types, and frames in various layouts.

Uploaded by

hiyaloverh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

HTML Project

The document provides examples of HTML code to create various elements like lists, tables, forms, and frames. Code samples are given to create ordered and unordered lists, tables with headers and rows, forms with different field types, and frames in various layouts.

Uploaded by

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

1.

Create an HTML document example with the following formatting


options:
I. Bold
II. Italics
III. Underline
IV. Heading (Using H1 to H6 heading styles)
V. Font
VI. Background (Colored background/Image in background)
VII. Paragraph
VIII. Line Break
IX. Horizontal Rule
X. Pre tag

Ans: To create a HTML document, first open the Notepad and type the
following codes:
<html>

<head>

<title>HTML Formatting Example</title>

</head>

<body bgcolor="lightblue" background="background-image.jpg">

<!-- Heading (Using H1 to H6 heading styles) -->

<h1>This is an H1 heading</h1>

<h2>This is an H2 heading</h2>

<h3>This is an H3 heading</h3>

<h4>This is an H4 heading</h4>

<h5>This is an H5 heading</h5>

<h6>This is an H6 heading</h6>

<!-- Bold -->

<p>This is a <b>bold</b> text.</p>

<!-- Italics -->

<p>This is an <i>italicized</i> text.</p>

<!-- Underline -->


<p>This is an <u>underlined</u> text.</p>

<!-- Font -->

<p><font face="Arial" color="red">This text is in Arial font and red color.</font></p>

<!-- Paragraph -->

<p>This is a paragraph of text. It contains multiple sentences that form a cohesive block of
text.</p>

<!-- Line Break -->

<p>This is the first line.<br>This is the second line after a line break.</p>

<!-- Horizontal Rule -->

<hr>

<!-- Pre tag -->

<pre>

This is preformatted text.

It preserves whitespace and

line breaks.

</pre>

</body>

</html>

Now save the file as .html and run on any browser.

Here is the outcome of the following code:-


2. Create an HTML document which consists of

I. Ordered List

II. Unordered List

III. Nested List

IV. Image

Ans: Here are the HTML codes for the following documents:-
<html>

<head>

<title>List and Image Example</title>

</head>

<body>

<h1>My Shopping List</h1>

<h2>Groceries (Ordered by priority):</h2>

<li>Milk</li>

<li>Bread</li>

<li>Eggs</li>

<li>Fruits</li>

<h2>Stationery (Unordered):</h2>

<li>Pens</li>

<li>Notebooks</li>

<li>Highlighters (optional)</li>

<h2>Weekend Activities:</h2>

<<li>Go hiking</li>

<li>Visit a museum

<li>Art museum</li>

<li>Science museum</li>

</ul>
</li>

<li>Relax at home (watch movies, read books)</li>

<h2>Cute Cat Picture:</h2>

<img src="cat.jpg" alt="A cute cat">

</body>

</html>

Save the code as .html extension on your computer and open with any browser.

3. Create an HTML document which implements Internal linking as well as


external linking.

Ans: Open the Notepad in the computer, to create the following HTML
document:-

<head>

<title>Document with Internal and External Links</title>

</head>

<body>

<h1>Welcome to My Website!</h1>
<p>This website provides a brief introduction to HTML. To learn more about
HTML elements and attributes, you can visit the official <a
href="https://www.w3schools.com/html/">W3Schools HTML
Tutorial</a>.</p>

<p>HTML documents are typically structured with a heading section, body


content, and optional navigation menus. For a detailed explanation of HTML
document structure, refer to the <a href="about_html_structure.html">About
HTML Structure</a> page on this website.</p>

<p>Feel free to explore other sections of this website using the navigation
menu below.</p>

<hr>

<ul>

<li><a href="about_html_structure.html">About HTML Structure</a></li>

<li><a href="html_examples.html">HTML Examples</a></li>

<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN
Web Docs - HTML</a> (external link)</li>

</ul>

</body>

</html>

Here is the final result of the following code:


4. Create a table using HTML which consists of columns for Roll No.,
Student's name and grade.

Ans: To create a HTML table, open the MS Word and type the following codes-
This code defines a simple HTML document with a title "Student
Information". Inside the body, it creates a heading "Student Information"
followed by a table element.

The table consists of:

 Header Row (th): The first row defines the table headers using the <th>
tag. It includes "Roll No.", "Student's Name", and "Grade".
 Data Rows (td): Each subsequent row (using <tr>) represents a student.
Within each row, individual data points (like roll number, name, and
grade) are specified using the <td> tag.

5. Create a Table with the following view:

Paste an Image here

Ans: First open the MS Word to create an HTML file that contains a table
structured similar to the given table. The table will have cells arranged to match
the layout, with a placeholder for an image.
This HTML creates a table with three rows. The first two cells in each
row span two columns, and the last cell spans four columns and three rows,
providing space for an image. Adjust the style and dimensions as needed. Save
this code in a file with a `.html` extension, and open it in a web browser to view
the table.

6. Create a form using HTML which has the following types of controls:

I. Text Box

II. Option/radio button

III. Check boxes

IV. Reset and submit button

Ans: To create a form using HTML, we have to open the MS Word to write the
following code-
This code creates a form with:

 A title: "Product Feedback Form"


 A text box for users to enter their name.
 Radio buttons for users to rate the product.
 Check boxes for users to select features they liked.
 A reset button to clear the form.
 A submit button to submit the form

7. Create HTML document (having multiple frames) in the following two


formats:

Frame 1
Frame 2

Ans: Here is the simple code of the following format:


 The <frameset> tag defines three rows for the frames.
 The rows attribute specifies the proportions of each row. In this case, the
header and footer will each take 10% of the height, and the content frame
will take up the remaining 80%.
 Each <frame> tag defines a frame with its corresponding source file
(header.htm, content.htm, and footer.htm).
 The scrolling="no" attribute prevents scrollbars from appearing in the header
and footer frames, keeping them fixed-size.

8. Create HTML documents (having multiple frames) in the following three


formats:

Frame1
Frame2 Frame3

Ans: To create an HTML document with multiple frames, we need to use a


combination of nested `<frameset>` elements. The image depicts a layout with
three frames: "Frame1" on the top, and "Frame2" and "Frame3" side by side
below "Frame1". Here’s how you can create this layout:
Save these files in the same directory as your main HTML document.
When you open the main HTML document in a browser, it will display the
frames layout as depicted in the image.

You might also like