2.2 Setting
up a Webpage and Use of html tags
Using notepad for coding
Notepad is a Microsoft
default word processing application which can
use for text editing and also for coding.
In this case, we will b using notepad to show the various functions of
html tags and saving it as a web document with .html extension.
Procedures on how to Create and Run HTML codes
·
Open Notepad on your computer
·
Lunch
it and typed in the following just for a start
<html>
<head>
<title>
MDEELINK | Your online Download site </title>
</head>
<body>
<h3>Introduction
to programming </h3>
·
After typing the above codes save it
as Homepage.html in an empty
folder
Example 1: Codes for html, head, title. Favicon
and bodyColor element add Together
<! DOCTYPE html>
<html
lang="en-USs">
<html>
<head>
<link rel="icon"
type="image/png"
href="myFavicon.png">
<title> Introduction to Web
Design |
This is the title bar </title>
</head>
<body>
<p> This is written in the
body of the webpage <p>
<body
bgcolor="violet">
</body></html>
Output
Example
2: Codes for paragraph, line break, center, h1-h6 tags put together
<! DOCTYPE html>
<html lang="en-US">
<html><head>
<link rel="icon"
type="image/png"
href="myFavicon.png">
<title> Introduction to Web Design | This
is the title bar </title>
</head><body>
<p> This is written in the body of the webpage
<p>
<h1> Heading 1 tag </h1>
<h2>Heading 2 tag</h2>
<h3>Heading 3 tag</h3>
<br/>
<h4>Heading 4 tag</h4>
<center><h5>Heading 5 tag will be
display in the center </h5></center>
<body bgcolor="violet">
</body>
</html>
Output
Example
3: Codes for Images, Linking, Ordered & Unordered list, and Marquee tag put Together
<!DOCTYPE html>
<html lang="en-US">
<html><head>
<link rel="icon"
type="image/png"
href="myFavicon.png">
<title> Introduction to Web Design | This
is the title bar </title>
</head><body><img
src="web-design.jpg" width="350" height=""
alt="image in webpage body"><body
bgcolor="violet">
<marquee dir="left"><font
face="Brush Script MT"><h2>Marquee tag enable scrolling
text..............</h2></marquee>
<a
href="http://www.fudmapalz.blogspot.com">This will link you to
FUDMITE BLOG</a>
<h2>Ordered list ------ My favorite
website</h2>
<ol
type="A"><li>Google.com</li><li>Nairaland.com</li><li>Ask.com</li>
</ol>
<h2>Unordered list ------ My favourite
websites:</h2>
<ul><li>Google.com</li><li>Nairaland.com</li><li>Ask.com</li>
</ul>
</body>
</html>
Output
0 comments:
Post a Comment