A simple web page for beginners in html

rajesanthu -3 808 Views

SIMPLE HTML PROGRAM FOR BEGINNERS
NB:Excuse me experts,,this is for beginners

1.Copy the file
2.paste it in a new notepad
3.save it with .html/.htm extension
4.chose file type as all type
5.after saving you will find an internet explorer symbol with the name that you'v given
while saving,,double click it.
6.Your page will be opened...

Points to ponder
1.Set the url for background image and other images.....
2.Set your own title for the page
3.change the contents of the body

Try it/............
Thanks....
This is your Friend.........
Rajeesh.N.Santhu

Arkinder commented: deprecated attributes, lack of doctype, lack of explanations, encourages browser testing with IE, and is relatively useless. +0
ndeniche commented: Why use a span tag when you can operfectly use a div? Besides, I was epecting to find something more of a layout than a disappointing tutorial. -2 
<html>/*Page starts here*/
<head>
<title>My Example</title>/*The content of this tag is displayed as page name*/
<style>/*start of internal style definitions*/
.heading/*defining class heading*/
{
font-family:Comic Sans Ms;
font-size:30pt;
color:orange;
text-align="center";
}
.subheading/*Defining class subheading*/
{
font-family:Courier New;
font-size:20pt;
color:blue;
text-align="left";
}
.details/*defining class details*/
{
font-family:Courier New;
font-size:13pt;
color:black;
text-align="justify";
}
</style>/*Style definitions ended*/
</head>
/*web page body starts from here*/
<body background="url of your image">/*Please provide the exact url of image*/
<span style='position:absolute:left:120px;top:5px;width:990px;height:1156px;'>
<p class="heading">HOME PAGE</p>
<hr/>/*Horizantal rule...just a horizontal line covers the entire width*/
<br/>/*leaves a new line*/
<p class="subheading">/*uses the style of class subheading*/
WELCOME TO MY PAGE</p>
<p class="details">/*Uses the style of class details*/
Hello this is the demonstrational webpage for beginners in HTML
</p>
<img src="url of some image"/>/*inserts an image*/
<table width="200" height="100">/*Inserts a table*/
<tr>/*Inserts a new row in table*/
<td>Hello</td>
<td>Welcome</td>
</tr>
</table>/*Table ends here*/
</span>/*Span ends here*/
</body>/*End of body*/
</html>/*End of HTMl*/

Dani AI

Generated

A few practical fixes and a tiny, modern template to make the posted example valid, accessible and easier to learn. Thanks for the starter — the suggestions from , and point in the right direction. Below are the most important corrections, then a minimal HTML5 skeleton you can save and open in a browser.

  • Always start with a proper HTML5 doctype plus meta charset and viewport so browsers render predictably.
  • Use HTML comments <!-- ... --> (not /* ... */) and keep CSS inside a <style> block or external file.
  • Fix CSS syntax: properties use colons and semicolons (for example text-align: center;).
  • Avoid deprecated attributes like background="..." on <body> and avoid absolutely positioning the whole page with a <span>. Use a centered container and background-image in CSS.
  • Use semantic tags (<h1>, <h2>, <p>) and screen-friendly units (px, rem) rather than pt. Tables belong to tabular data.
  • Always include alt text for images and check image paths in the browser DevTools Network tab if they fail to load.

Here is a compact, corrected example to drop into a file named example.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>My Example</title>
<style>
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
     margin:0;padding:1rem;background:#fff}
.container{max-width:900px;margin:0 auto;padding:1rem}
h1{font-size:1.875rem;color:orange;text-align:center}
h2{font-size:1.25rem;color:blue}
p.details{font-size:1rem;line-height:1.6;text-align:justify}
img{max-width:100%;height:auto;display:block}
</style>
</head>
<body>
<div class="container">
<h1>Home Page</h1>
<hr>
<h2>Welcome to my page</h2>
<p class="details">Hello — this is a demonstrational webpage for beginners in HTML.</p>
<img src="images/example.jpg" alt="Example graphic">
<table><tr><td>Hello</td><td>Welcome</td></tr></table>
</div>
</body>
</html>

Quick tips: for a single learning file an internal <style> is fine; move styles to an external CSS file as soon as you have multiple pages (). Use DevTools (F12) to spot parse errors or missing files (), and avoid Comic Sans for production pages as advised — use a clean system font stack.

Member Avatar for adver2
adver2 0 Newbie Poster

use your style in external css file

Member Avatar for FutureWebDev
FutureWebDev 0 Light Poster

use your style in external css file

Why would he use an external styles sheet to set styles for just one page that will never be used?

FWD

Member Avatar for chriswelborn
chriswelborn 63 ...

Why would you use Comic Sans? :P

P.S. - All those CSS style comments in the body?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview