Scribd
Upload
431 views

HTML Word

HTML is a markup language used to define the structure and layout of web pages. HTML documents are text files that use tags to mark elements like headings, paragraphs, links, and images. The basic structure of an HTML document includes an <html> tag to enclose the entire document, <head> and <body> tags to separate document metadata from visible content, and tags like <h1>-<h6> for headings, <p> for paragraphs, <a> for links, and <img> for images. HTML documents can be created and edited with any basic text editor.

Uploaded by

vinotha kuppusamy
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
431 views

HTML Word

HTML is a markup language used to define the structure and layout of web pages. HTML documents are text files that use tags to mark elements like headings, paragraphs, links, and images. The basic structure of an HTML document includes an <html> tag to enclose the entire document, <head> and <body> tags to separate document metadata from visible content, and tags like <h1>-<h6> for headings, <p> for paragraphs, <a> for links, and <img> for images. HTML documents can be created and edited with any basic text editor.

Uploaded by

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

HTML

 HTML documents are simply text documents with a specific form.

 Documents comprised of content and markup tags

 Content: actual information being conveyed


 The markup tags tell the Web browser how to display the page

 An HTML file can be created using a simple text editor

 HTML is a language for describing web pages.

 HTML stands for Hyper Text Markup Language

 HTML is a markup language

 The tags describe document content

 HTML markup tags are usually called HTML tags

 HTML tags are keywords (tag names) surrounded by angle brackets like <html>

 HTML tags normally come in pairs like <b> and </b>

 The first tag in a pair is the start tag, the second tag is the end tag

 The end tag is written like the start tag, with a forward slash before the tag name

 Start and end tags are also called opening tags and closing tags

 Entire document enclosed within <html> and </html> tags

 Two subparts:

Head

 Enclosed within <head> and </head>

 Within the head, more tags can be used to specify title of the page,
meta-information, etc.

Body

 Enclosed within <body> and </body>

 Within the body, content is to be displayed

 Other tags can be embedded in the body


Creating a Basic Starting Document

 The HEAD of your document point to the part of your browser window. The TITLE of
your document appears in the very top line of the user’s browser. If the user chooses
to “Bookmark” your page or save as a “Favorite”; it is the TITLE that is added to the
list.

 The text in your TITLE should be as descriptive as possible because this is what many
search engines, on the internet, use for indexing your site.

SOME HTML TAGS

 <br> : Defines a single line break. No end tag required.

 <p> </p>: It marks the beginning and end of a paragraph

 <b> </b> : bold

 <u> </u> : underline

 <i> </i> : Italics

 <H1> <H2><H3><H4><H5><H6> :Defines HTML headings

Inside the BODY element, heading elements H1 through H6 are generally used for
major divisions of the document. Headings are permitted to appear in any order, but
you will obtain the best results when your documents are displayed in a browser if
you follow these guidelines:

1. H1: should be used as the highest level of heading, H2 as the next highest, and so
forth.

2. You should not skip heading levels: e.g., an H3 should not appear after an H1, unless
there is an H2 between them.

 <head> : Defines information about the document

 <html> :Defines the root of an HTML document

 <hr> Horizontal Rule, <HR>

The <HR> element causes the browser to display a horizontal line (rule) in your
document.<HR> does not use a closing tag, </HR>.
How to insert an image:

 <img src="smiley.gif" alt="Smiley face" height="42" width="42">

o src stores the name and location of the image file.

o alt shows the alternate text for the image.

o Height and width attributes set the size of the image on the webpage.

Hyperlink

 Hyperlink is a highlighted text or image that stores the address of some other web
page/document. When we click on any hyperlink, the linked document gets opened.

To create a hyperlink <A> tag is used.

 The href attribute of the <A> tag stores the reference of the document that is to be
linked.

 The text that appears on the hyperlink is enclosed between the starting tag <A> and
ending </A>

 <A href=“Welcome.html”>Welcome Page</A>

Body tags

 Left Margin attribute is used to set the left margin of a webpage.

 Right Margin attribute is used to set the right margin of a webpage.

 Bgcolor attribute sets the background color of the webpage.

 <body bgcolor=“Red” topmargin=100 leftmargin=100>

Paragraphs, <P> </P>

Paragraphs allow you to add text to a document in such a way that it will
automatically adjust the end of line to suite the window size of the browser in which
it is being displayed. Each line of text will stretch the entire length of the window.
Alignment

 Some elements have attributes for alignment (ALIGN) e.g. Headings, Paragraphs and
Horizontal Rules.

 The Three alignment values are: LEFT, RIGHT, CENTER.

 <CENTER></CENTER> Will center elements.

Follow the 4 steps below to create your first web page with Notepad.

Step 1: Start Notepad

To start Notepad go to:

Start
    All Programs
        Accessories
            Notepad

Step 2: Edit Your HTML with Notepad

Type your HTML code into your Notepad: (Example given below)
<html>
Try the following HTML code on your computer:
<head>
<title>Title
HTML CODE: of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
<h1> First Heading </h1>
<h2> First Heading </h2>
<h3> First Heading </h3>
<h4> First Heading </h4>
<h5> First Heading </h5>
<h6> First Heading </h6>
Step 3: Save Your HTML
</body>
 Select Save as.. in Notepad's file menu.
</html>
 When you save an HTML file, you can use either the .htm or the .html file extension.
There is no difference, it is entirely up to you.

Save the file in a your folder on the network.

Step 4: Run the HTML in Your Browser

Start your web browser and open your html file from the File, Open menu, or just browse
the folder and double-click your HTML file.
The result on the browser:

HOME WORK: Refer to the above notes and the PPT on HTML tags , copy the
following questions and answer them in your class work.

1. What does this tag do?


<a href="http://www.cnn.com">CNN</a>

a. Creates a link to a web site


b. Displays an image on the page
c. Creates a link to send email
d. Asks the user to provide information

2. Choose the correct HTML tag to make a text italic:


a. <i>
b. <italic>
3. What does this tag do in a web page?
<img src="steve.jpg">
a. Creates a link to a web site
b. Displays an image on the page
c. Creates a link to send email
d. Asks the user to provide information

4. What does HTML stand for?


a. Hyper Text Markup Language
b. Hyperlinks and Text Markup Language
c. Home Tool Markup Language

5. Choose the correct HTML tag for the largest heading


a. <heading>
b. <head>
c. <h1>
d. <h6>

What is the correct HTML for inserting an image?


6.
a. <image src="image.gif" alt="MyImage"/>
b. <img src="image.gif" alt="MyImage"/>
c. <img alt="MyImage">image.gif</img>
d. <img href="image.gif" alt="MyImage"/>

7. What is the correct HTML tag for inserting a line break?


a. <br/>
b. <lb/>
c. <break/>

You might also like