0% found this document useful (0 votes)
5 views20 pages

HTML Static Web Page Creation Guide

HTML
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
0% found this document useful (0 votes)
5 views20 pages

HTML Static Web Page Creation Guide

HTML
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

1

INDEX
[Link]. Topic

1. Creation of Static web pages using HTML


1.1. Basic tags of HTML
1.2. Formatting tags
1.3. Character Entities
1.4. Different types of Lists
1.5. Hypertext Links
1.6. Frames 1.6.1 dividing frames with links
1.7. Tables
1.8. Forms
1.9. Cascading Style sheets
1.10. CSS in hyper Links
1.11. CSS using selectors

[Link] of Static web pages using HTML


1.1 Basic Tags of HTML
<html>
<head><title>Basic Tags</title></head>
<body bgcolor="chartreuse"><font color="red" size="9">
<h1>"My first web page"</h1>
<h2>Basic tags are demonstrated in this page</h2>
<h3><font size="5">Basic tags are headings,paragraphs</font></h3>
<h4><font size="5">break,horizontal rules</font></h4>
<h5><font size="5">Let us start!</font></h5>
<h6><font size="5">Demonstration</font></h6>
</font>
<font color="purple" size="7">
<hr color="blue"/>
<p align="center">Hello!This is first para</p>
<hr color="blue"/>
<p align="center">This is second para
<br/>
second line
</p>
<hr color="blue"/>
</font>
</body>
</html>
Output:-
2

1.2 Formatting Tags

<html>
<head><title>Formatting tags</title></head>
<body bgcolor="yellow"><font color="purple" size="9">
<p align="center"><b>This is bold text</b></p>
<p align="center"><i>This text is in italic font</i></p>
<p align="center"><u>This is underlined text</u></p>
<p align="center"><em>This text is emphasized</em></p>
<p align="center"><big>This text is big</big></p>
<p align="center"><small>This text is small</small></p>
<p align="center">This is <sub>subscript</sub> and This is
<sup>superscript</sup></p>
<hr color="red"/>
<h1 align="center">"PREFORMATTED TEXT"</h1>
<p align="left">This is<sub>subscript</sub></p>
<p align="center"><pre><font color="purple" size="9">This
is</font></pre><sup>superscript</sup></p>
</font>
</body>
</html>

Output:-
3

1.3 Character Entities

<html>
<head><title>Character Entities</title></head>
<body bgcolor="orange">
<h1 align="center"><font color="purple"><u>CHARACTER
ENTITIES</u></font></h1>
<p><h3>The special characters which can not be rendered by the
[Link] special characters are called [Link] entity in a document is
replaced by its associated character by the browser.</h3></p>
<table border="1" color="orange" align="center">
<th><font color="green" size="5">Meaning</font></th><th><font
color="green" size="5">Entity</font></th><th><font color="green"
size="5">Character</font></th>
<tr><td>nonblank space</td>
<td>& nbsp</td>
<td>&nbsp</td></tr>
<tr><td>less than</td>
<td>& lt</td>
<td>&lt</td></tr>
<tr><td>greater than</td>
<td>& gt</td>
<td>&gt</td></tr>
<tr><td>ampersand</td>
<td>& amp</td>
<td>&amp</td></tr>
<tr><td>double quote</td>
<td>& quot</td>
<td>&quot</td></tr>
4

<tr><td>single quote</td>
<td>& apos</td>
<td>&apos</td></tr>
<tr><td>one half</td>
<td>& frac12</td>
<td>&frac12</td></tr>
<tr><td>copyright</td>
<td>& copy</td>
<td>&copy</td></tr>
<tr><td>registered</td>
<td>& reg</td>
<td>&reg</td></tr>
</table>
<p><h3>Note:There should be no space between & and keyword(nbsp,copy,reg
etc.,) in the entity.</h3></p>
</body>
</html>

Output:-

1.4 Lists
<html>
<head><title>lists</title></head>
<body bgcolor="skyblue">
<h1 align="center"><font color="red"><u>LISTS</u></font></h1>
<p><h3>The primary supported list types are those with which most people are
already familiar:unordered lists such as grocery lists and ordered lists such as
the assembly instructions for a new [Link] lists can also be
defined.</h3></p>
<h2><font color="red">Unordered Lists</font></h2>
5

<p><h3><font color="purple">Common languages used to write web


documents are:</font></h3></p>
<ul>
<li>HTML</li>
<li>XHTML</li>
<li>XML</li>
</ul>
<h2><font color="red">Ordered Lists</font></h2>
<p><h3><font color="purple">Sequence of tags to be followed in writing a
web document:</font></h3></p>
<ol type=I>
<li>Include &lthtml&gt&lt/html&gt</li>
<li>Next tag is &lthead&gt&lt/head&gt with title tag inside it.</li>
<li>Then comes &ltbody&gt&lt/body&gt tag in which entire content of the
document is specified.</li>
</ol>
<h2><font color="red">Definition Lists</font></h2>
<dl>
<dt>B.E.</dt>
<dd>Civil</dd>
<dd>CSE</dd>
<dd>ECE</dd>
<dd>EEE</dd>
<dd>Mech</dd>
<dd>IPE</dd>
<dt>[Link]</dt>
<dd>Chemical</dd>
<dd>Bio-Tech</dd>
</body>
</html>

Output:-
6

1.5 Hypertext Links

<html>
<head><title>Hypertext links</title></head>
<body bgcolor="pink">
<h1 align="center"><font color="green"><u>HYPERTEXT
LINKS</u></font></h1>
<p><h3><font color="red">A link that points to a different document specifies
the address of that [Link] an address might be a filename,a directory
path and a filename or a complete URL.</font></h3></p>
<p><h2><font color="green">Mail Service Providers</font></h2></p>
<a href="[Link]"><img src="C:\NAVIN\WPS -
8100\yahoo_logo.jpg" width="50" height="50"/>Yahoo</a>
<br/>
<a href="[Link]"><img src="C:\NAVIN\WPS - 8100\[Link]"
width="50" height="50"/>Gmail</a>
<br/>
<a href="[Link]"><img src="C:\NAVIN\WPS -
8100\rediffmail_logo.gif" width="50" height="50"/>Rediff Mail</a>
<br/>
<a href="[Link]"><img src="C:\NAWPS - 8100\rocketmail-
[Link]" width="50" height="50"/>Rocket Mail</a>
<p><h2><font color="green">Educational Websites</font></h2></p>
<a href="[Link]"> <img src="C:\NAV\WPS - 8100\[Link]"
width="300" height="300"/>CBIT website</a>
<p><h2><font color="green">HTML Pages</font></h2></p>
<a href="[Link]">Basic Tags</a>
<br/>
<a href="[Link]">Character Entities</a>
<br/>
7

<a href="[Link]">Formatting Tags</a>


<br/>
<a href="[Link]">Lists</a>
</body>
</html>

Output:-

1.6 Frames

<html>
<head><title>Frames</title></head>
<frameset rows="70%,30%">
<frame src="[Link]"/>
<frameset cols="50%,50%">
<frame src="[Link]"/>
<frame src="[Link]"/>
</frameset>
</frameset>
</html>
8

Output:-

1.6.1 Creating hyperlink and display in other frame in the same window

[Link]
<html>
<head>
<frameset cols="50%,*">
<frame name="left" src="[Link]">
<frame name="right" src="[Link]">
</frameset>
</head>
</html>
Output:-
9

[Link]
<a href="[Link]" target="right">cse</a>
<a href="[Link]" target="right">IT</a>
<a href="[Link]" target="right">cme</a>
Output:-

[Link]
<body bgcolor=pink>
10

[Link]

[Link]
11

[Link]

1.7 Tables

<html>
<head><title>Tables</title></head>
<body bgcolor="olive">
<h1 align="center"><font color="blue"><u>TABLES</u></font></h1>
<p><h3>Tables are common fixtures in printed documents,books,and of course
web [Link] provide a highly readable way of presenting many kinds
of information.</h3></p>
<table border="1"><caption><font color="cyan" size="5">Fruit Juice
Drinks</font></caption>
<tr>
<th></th>
<th>Apple</th>
<th>Orange</th>
<th>Screwdriver</th>
</tr>
<tr>
<th>Breakfast</th>
<td>0</td>
<td>1</td>
<td>0</td>
</tr>
<tr>
<th>Lunch</th>
<td>1</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th>Dinner</th>
<td>0</td>
<td>0</td>
<td>1</td>
</tr>
</table>
12

<br/>
<table border="1"><caption><font color="cyan" size="5">Fruit Juice Drinks
and Meals</font></caption>
<tr>
<td rowspan="2"></td>
<th colspan="3">Fruit Juice Drinks</th>
</tr>
<tr>
<th>Apple</th>
<th>Orange</th>
<th>Screwdriver</th>
</tr>
<tr>
<th>Breakfast</th>
<td>0</td>
<td>1</td>
<td>0</td>
</tr>
<tr>
<th>Lunch</th>
<td>1</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th>Dinner</th>
<td>0</td>
<td>0</td>
<td>1</td>
</tr>
</table>
<br/><br/>
<table border="5" cellspacing="10" cellpadding="30">
<tr>
<td>small spacing,</td>
<td>large padding</td>
</tr>
</table>
<br/><br/>
<table border="5" cellspacing="30" cellpadding="10">
<tr>
<td>large spacing,</td>
<td>small padding</td>
</tr>
</table>
</body>
</html>
13

Output:-

1.8 Forms

<html>
<head><title>Forms</title></head>
<body bgcolor="salmon">
<h1 align="center"><font color="purple"><u>STUDENT REGISTRATION
FORM</u></font></h1>
<form action="[Link]" method="get">
<label><font size="4"><b>Name</b></font></label>
<input type="text" name="Name" size="25" value="FirstName"/>
<input type="text" name="Name" size="25" value="LastName"/>
<br/><br/>
<label><font size="4"><b>Password</b></font></label>
<input type="password" name="Password" size="25" value="Password"/>
<br/><br/>
<label><font size="4"><b>Gender</b></font></label>
<input type="radio" name="r1" value="Male"/>Male
<input type="radio" name="r2" value="Female"/>Female
<br/><br/>
<label><font size="4"><b>Course</b></font></label>
<input type="checkbox" name="c1" value="BE"/>BE
<input type="checkbox" name="c2" value="BTech"/>BTECH
<br/><br/>
<label><font size="4"><b>Branch</b></font></label>
14

<select>
<option selected="selected">Select One</option>
<option>Civil</option>
<option>CSE</option>
<option>ECE</option>
<option>EEE</option>
<option>Mech</option>
<option>IPE</option>
<option>Chemical</option>
<option>Bio-Tech</option>
</select>
<br/><br/>
<label><font size="4"><b>Roll No.</b></font></label>
<input type="text" name="Name" size="25" value="Roll No"/>
<br/><br/>
<input type="submit"/>
<input type="reset"/>
</form>
</html>
Output:-
15

1.9 Cascading Style Sheets

<html>
<head><b>Cascading Style Sheets<b></head>
<body style="background-color:#FFCCCC"><p>There are 3 ways of
inserting a style sheet</p>
<p><a href="[Link]">External Style Sheets<a/>
<br/><a href="[Link]">Internal Style Sheets<a/>
<br/><a href="[Link]">Inline Styles<a/>
<p/>
<body/>
<html/>

Output:-
16

i) External Style Sheets

<html>
<head>
<link rel="stylesheet" type="text/css" href="[Link]" />
</head>
<body>
<h1>I am formatted with an external style sheet</h1>
<p>this is an example to include External Style Sheets</p>
</body>
</html>

Output:-
17

ii) Internal Style Sheets

<html>
<head>
<style type="text/css">
h1 {color:red;}
h2 {color:blue;}
p {color:green;}
</style>
</head>
<body style="background-color:#FFCCCC">
<h1>All header 1 elements will be red</h1>
<h2>All header 2 elements will be blue</h2>
<p>All text in paragraphs will be green.</p>

</body>
</html>

Output:-
18

iii) Inline Style Sheets

<html>
<head >This is a heading
</head>
<body style="background-color:#FFCCCC">
<p style="color:red;margin-center:20px">This is a paragraph.</p>
<p style="color:blue;margin-left:20px">This is a another paragraph.</p>
</body>
</html>

Output:-
19

1.10 CSS in Hyperlinks(<a>)


<html>

<head><title>sample</title>

<style type="text/css">

a:link{color:green}

a:visited{ color:red}

a:hover{ color:blue;text-decoration:none}

a:active{ color:yellow}

</style>

</head>

<body>

<a href="[Link]" target="new" >hyperlink</a>

</body></html>

Output:-
20

1.11 [Link]
<html>

<head>

<style type="text/css">

#demo {color:red;} <!--id based selector-->

.name1 {color:blue;} <!--class based selector-->

p ,h3{color:green;} <!--grouping based selector-->

</style>

</head>

<body style="background-color:#FFCCCC">

<h1 id="demo" >All header 1 elements will be red</h1>

<h2 class="name1">All header 2 elements will be blue</h2>

<h3>All header 2 elements will be blue</h2>

<p>All text in paragraphs will be green.</p>

<p>All text in paragraphs will be green.</p>

</body>

</html>

Output:-

Common questions

Powered by AI

Hyperlinks are essential to web interconnectedness by allowing documents to reference other content through URLs. They enable seamless navigation across related topics and resources, fundamentally shaping how information is retrieved and accessed online. Hyperlinks break down data silos, making diverse information accessible and thus facilitate discovery and learning. This interconnected web structure boosts search engine optimization by increasing page relevance and authority through linking strategies, although it can complicate user experience and website maintenance if not managed properly .

Character entities in HTML represent special characters that the browser cannot render directly because they may be reserved for HTML syntax or are not present on a standard keyboard. These entities begin with an ampersand (&) and end with a semicolon (;). For instance, to display a greater-than sign, which is used for tag closure, one uses '&gt;'. They are important for accurately displaying such characters without causing issues in the HTML code .

Character entities ensure HTML document compatibility across different browsers and devices by standardizing how special characters are displayed. This standardization is crucial because different platforms may have different default code interpretations and character sets. Character entities provide a consistent and universally understood code that renders correctly regardless of browser discrepancies or device-specific character support, preventing rendering errors and improving user experience across various contexts .

CSS can be integrated into HTML documents in three ways: inline styles, internal styles, and external style sheets. Inline styles are added directly within HTML tags using the style attribute, affecting only the specific tag where it's applied. Internal styles are defined within a <style> element in the head section of the HTML document, allowing styles to be applied throughout the document. External style sheets are separate .css files linked to the HTML document, providing a way to apply styles across multiple pages, offering the most flexibility and maintainability .

HTML tables structure data into rows and columns, making it easily readable in a tabular format. CSS is used to style these tables through properties like border, padding, and color to enhance visual appeal. However, using tables for layout is limited by their rigidity in adjusting to different screen sizes and complex design needs, leading to less responsive designs. Today, tables are mainly used for data presentation, and CSS flexbox or grid is preferred for layout .

Ordered and unordered lists are important in HTML for organizing content into readable, structured formats. Ordered lists <ol> are used where sequence and hierarchy are important, with items numbered automatically, such as in instructions or steps. Unordered lists <ul> are for items without particular order, marked with bullet points, useful for lists where sequence isn't critical, like feature lists. They enhance presentation by making content easier to scan and understand, improving user experience .

An HTML form is structured using input elements such as textboxes, checkboxes, radio buttons, and submits buttons to capture user input. It begins with a <form> tag, which specifies attributes like the action URL for form submission and the method (GET or POST). Inside the form, <input>, <select>, and <textarea> elements are used for data entry, and <button> or <input type='submit'> are used to send the data. Forms facilitate user interaction by enabling data collection and server-side processing .

CSS selectors are patterns used to select the elements to which a set of CSS rules apply. Class selectors use a period (e.g., .classname) to style elements that share a class attribute, allowing multiple elements to share the same style. ID selectors start with a hash (#), targeting a unique element with a specific id. Element selectors target HTML elements based on the tag name (e.g., p, h1). For instance, .greenText targets all elements with the class 'greenText', #header targets the single element with the id 'header', and h1 targets all <h1> elements. They provide flexibility in applying styles to different elements .

The HTML frameset structure divides a browser window into multiple sections where each can load a separate HTML document. Unlike modern responsive designs which use CSS and media queries for flexibility across devices, framesets create fixed layouts without flexibility and can cause usability issues such as navigation problems and challenges for search engines indexing contents. Its decline is due to these technical limitations and the rise of responsive design, which is more suited for the diverse range of modern devices .

HTML tags <h1> to <h6> are used to define headings of various sizes and importance levels, with <h1> being the largest and most important and <h6> the smallest. These tags contribute to the semantic structure by indicating the hierarchy and organization of the content, improving readability, accessibility, and SEO by allowing search engines to understand the relative importance of content sections .

You might also like