Post on 10-Jul-2015
Hyper Text Markup Language A markup language designed for the creation
of web pages and other information viewable in a browser
The basic language used to write web pages File extension: .htm, .html
If we have some text e.g. “This is my first day of work, I’m so excited!”
If we want to display the Text as :“This is my first day of work, I’m so excited!” Then we need to mark “first day of work” as
Bold.
“This is my first day of work, I‟m so excited!”
To be marked in Bold letters.
first day of work“This is my , I‟m so
excited!”
<B> </B>
Result is :
“This is my first day of work, I‟m so excited!”
1. Open Notepad2. Click on File -> Save as…3. In the File name pull-down box, type in
webpage.html4. Click on Save5. Type in content for your file6. Once you finished the content, click on File -
> Save
Select “All Files” from the “Save as type” drop down list
box.
There are 3 ways to view the web page generated by the HTML file.
Go to Start -> Run
Click on Browse button.
Select the location of the HTML file (Where it is stored on your PC)
Select “All Files” option from the “Files of Type” Drop Down Menu.
Select the required HTML file from the list of all files in that location.
Click on the Open button after selecting the file.
The Web Page appears according to the HTML formats provided.
Open any browser e.g. IE, Mozilla Firefox, Opera , Netscape Navigator etc.
Click Open -> Browse to the location of the File. Select the file and click Open.
Go to My Computers. Navigate to the actual
location of the HTML file.
Select the HTML file. Double click to open it.
We use HTML tags to mark the elements of a file for the browser, in other words, we use tags to denote the various elements in an HTML document. HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>). Tags are usually paired (e.g., <H1> and </H1>) to start and end the tag instruction. The end tag looks just like the start tag except a slash (/) precedes the text within the brackets.
For example: <b>, <font>,<title>, <p> etc. Tag usually goes with pair: an open tag (<b>) and
an end tag (<\b>)
Single tag: <hr>,<br> Tags are NOT case sensitive
Effect Code Code Used What It Does
Bold B <B>Bold</B> Bold
Italic I <I>Italic</I> Italic
Each HTML tag has certain additional options for providing more information to the final output.
These options are called ATTRIBUTES. E.g. : <BODY BGCOLOR=“Red”>…..</BODY> Here BODY is the Tag and BGCOLOR is the
Attribute.
<html> <head>
<title> Page Title Goes Here </title></head>
<body> content goes here
</body></html>
<HTML><HEAD>
<TITLE>My First Web Page</TITLE></HEAD>
<BODY>Today is my first day at my new job, I’m so
excited!</BODY>
</HTML>
<center>….Text….</center> <left>….Text….</left> <right>….Text….</right> <B>….Text….</B> <I>….Text….</I> <U>….Text….</U>
For aligning the text towards the center of the web page.
For aligning the text towards the left of the web page.
For aligning the text towards the right of the
web page.For applying BOLD font style to the enclosed text.
For applying ITALIC font style to the enclosed text.
For applying Underline font style to the enclosed text.
The heading tag is used to format the enclosed text as large bold characters for displaying the heading of the web page content.
For Example
This is the application of <h1>….</h1> tag on the text.
There are 6 levels of the heading tag :
<h1>……….Text…………</h1><h2>……….Text…………</h2><h3>……….Text…………</h3><h4>……….Text…………</h4>
<h5>……….Text…………</h5><h6>……….Text…………</h6>
Each level of the heading tag formats the enclosed heading text with different font sizes beginning from the largest <h1> to <h6>.
We can also apply the various formatting tags on it too.
<HTML><HEAD>
<TITLE>My First Web Page</TITLE></HEAD>
<BODY><h1>My First Day of Work!</h1>Today is my first day at my new job, I’m so
excited!</BODY>
</HTML>
Hyper Text Markup Language
Web authoring software language
Specifically created to make World Wide Web pages
Created by Tim Berners-Lee in 1993 from SGML
BGCOLOR
Specifies a background-color for an HTML page.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
Using the Color Code : „#000000‟ or „RGB(0,0,0)‟ or „black‟ gives
the black color in the background.
Method I -- Simple Language Codes
• Using the name of the color : e.g. Red, Black, Blue, Yellow, Pink, Orange etc.
Orange color in the background.
<html><head>
<title>My First Web Page</title></head>
<body bgcolor=“Orange"><h1>My First Day at Work!</h1>
</body></html>
Method II -- Hexadecimal Codes
• Using any arbitrary combination of alphabets and numbers preceded by a „#‟ symbol.
• Like : <body bgcolor = “#abc123”>
A random(green) color in the background.
<html><head>
<title>My First Web Page</title></head>
<body bgcolor=“#abc123"><h1>My First Day at Work!</h1>
</body></html>
Method III -- Using RGB function
• Using the RGB() function in the following manner : RGB(r,g,b) where :
r = red color componentg = green color componentb = blue color component
• Example : <body bgcolor = rgb(3,4,5)>
A random(violet) color in the background.
<html><head>
<title>My First Web Page</title></head>
<body bgcolor=RGB(150,44,100)><h1>My First Day at Work!</h1>
</body></html>
Background Attribute in the Body tag.
Specifies a background-image for a HTML page<body background="clouds.gif"> <body background="C:\Windows\FeatherTexture.bmp">
<html><head>
<title>My First Web Page</title></head>
<body background="C:\Windows\FeatherTexture.bmp"><h1>My First Day at Work!</h1>
</body></html>
Some simple tips :
Step 1• Search for some pictures available on your PC.
You can provide the image type (*.jpg,*.gif,*.bmp,*.png) etc. to narrow your search.
Select any image and browse to its location.
Copy the actual location of the image.
The location copied is :“C:\Documents and Settings\new user\My Documents\My Pictures”
Select “Properties”.
Select and copy the filename from the Properties Dialog Box and check its type also.
The Complete path to the image is :“C:\Documents and Settings\new user\My Documents\My Pictures\Giraffe.jpg”
<html><head><title>My First Web Page</title></head>
<body background= “C:\Documents and Settings\new user\My Documents\My Pictures\Giraffe.jpg” ><h1>My First Day at Work!</h1></body></html>
Background image is applied at the back