Scribd
Upload
25 views14 pages

HTML

Uploaded by

dr.shashiprabha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
25 views14 pages

HTML

Uploaded by

dr.shashiprabha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Basics of HTML

By: Dr. Shashi Prabha


HTML
• HTML stands for Hypertext Markup Language, and it is the most widely
used language to write Web Pages.
• Hypertext refers to the way in which Web pages (HTML documents) are
linked together. Thus, the link available on a webpage is called Hypertext.
• As its name suggests, HTML is a Markup Language which means you use
HTML to simply "mark-up" a text document with tags that tell a Web
browser how to structure it to display.
• HTML stands for Hyper Text Markup Language, which is the most
widely used language on Web to develop web pages. HTML was created by
Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML
specification which was published in 1995.
HTML
• HTML is the primary building block of creating a website. HTML is a
basic markup language and requires memorization of a few dozen
HTML commands that structure the look and layout of a web page.
Before writing any HTML code or designing your first web page, you
must decide on an HTML editor or text editor, such
as Notepad or WordPad.
How to Design a Web Page in HTML?

Creating an HTML document : The first step of creating a <head>


web page is to create an HTML document. An HTML
document can be created in any text editor even on a notepad. <title>My first web page</title>
So any text editor can be used to make an Html file. We just
need to add extension .html /.htm . Let us create the first basic </head>
HTML program.
To create an HTML document follow the following steps: <body>
Step 1: Open your text editor such as Notepad, Sublimetext,
etc. Hello Everyone!
Step 2: Write the code given below in the text editor.
Step 3: Save this file with the .html/.htm extension. </body>
Step 4: Open that file with any browser. The output will be
displayed. </html>
Designing Web Page

• To design a webpage in HTML we need to learn about tags and attributes available in HTML. In
HTML, tags are some instructions that are enclosed in angle braces. With the help of these tags,
we can design a more attractive HTML page. Some of the important tags to be used are as follows:
1. <h1> … </h1> to <h5> … </h5>: These tags are called header tags and they are used to give
heading to your webpage of different sizes.<h1>…</h1> being the Largest Heading to <h5>
…</h5> being the Smallest Heading.
2. Bold Tag (<strong>…</strong> or<b>…</b>): These tags are used to make text look bold.
3. Italic Tag (<i> …</i> or <em>… </em>): These tags are used to make text look italics. The only
difference between <i> and <em > is that <em>semantically emphasis on important text or word
whereas <i> tag is used to make is just used to make text italics.
4. Ordered List ( <ol> … </ol>): The HTML <ol> tag defines an ordered list. An ordered list can
be numerical or alphabetical ., An ordered list starts and ends with a <ol> tag. Each list item starts
with <li> tag. We can use the type attribute to define type of ordered list we need to make:
Basic Tags
Heading Tags HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that
heading.
Paragraph Tag The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text
should go in between an opening <p> and a closing </p> tag.
Line Break Tag Whenever you use the <br /> element, anything following it starts from the next line. This tag is an
example of an empty element, where you do not need opening and closing tags, as there is nothing
to go in between them.
Centering Content You can use <center> tag to put any content in the center of the page or any table cell.

Horizontal Lines Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line
from the current position in the document to the right margin and breaks the line accordingly.
Preserve Sometimes, you want your text to follow the exact format of how it is written in the HTML document.
Formatting In these cases, you can use the preformatted tag <pre>. Any text between the opening <pre> tag and
the closing </pre> tag will preserve the formatting of the source document.
HTML - Attributes

• An attribute is used to define the characteristics of an HTML element and is placed inside the
element's opening tag. All attributes are made up of two parts − a name and a value
• The name is the property you want to set. For example, the paragraph <p> element in the example
carries an attribute whose name is align, which you can use to indicate the alignment of paragraph
on the page.
• The value is what you want the value of the property to be set and always put within quotations.
The below example shows three possible values of align attribute: left, center and right.
• Attribute names and attribute values are case-insensitive. However, the World Wide Web
Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4
recommendation. Core Attributes
HTML - Formatting

Bold Text Anything that appears within <b>...</b> element, is displayed in bold.
Italic Text Anything that appears within <i>...</i> element is displayed in italicized.
Underlined Text Anything that appears within <u>...</u> element, is displayed with underline.
Strike Text Anything that appears within <strike>...</strike> element is displayed with strikethrough,
which is a thin line through the text.
Monospaced Font The content of a <tt>...</tt> element is written in monospaced font. In a monospaced font,
however, each letter has the same width.
Superscript Text The content of a <sup>...</sup> element is written in superscript.
Subscript Text The content of a <sub>...</sub> element is written in subscript;
Inserted Text Anything that appears within <ins>...</ins> element is displayed as inserted text.

Deleted Text Anything that appears within <del>...</del> element, is displayed as deleted text.

Larger & Small Text The content of the <big>...</big> or<small>...</small> element is displayed one font size larger
or smaller than the rest of the text surrounding.
Grouping Content The <div> and <span> elements allow you to group together several elements to create sections
or subsections of a page.
HTML - Lists

• HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists
may contain −
• <ul> − An unordered list. This will list items using plain bullets.
• <ul type = "square">
• <ul type = "disc"> (by default)
• <ul type = "circle">
• <ol> − An ordered list. This will use different schemes of numbers to list your items.
• <ol type = "1"> - Default-Case Numerals.
• <ol type = "I"> - Upper-Case Numerals.
• <ol type = "i"> - Lower-Case Numerals.
• <ol type = "A"> - Upper-Case Letters.
• <ol type = "a"> - Lower-Case Letters.

• <dl> − A definition list. This arranges your items in the same way as they are arranged in a dictionary.
HTML - Phrase Tags
Emphasized Text Anything that appears within <em>...</em> element is displayed as emphasized text.
<em>…..</em>
Marked Text Anything that appears with-in <mark>...</mark> element, is displayed as marked with yellow ink.
<mark>……</marks>
Strong Text Anything that appears within <strong>...</strong> element is displayed as important text.
<strong>...</strong>
Text Abbreviation You can abbreviate a text by putting it inside opening <abbr> and closing </abbr> tags. If present,
<abbr> ……</abbr> the title attribute must contain this full description and nothing else.
Acronym Element The <acronym> element allows you to indicate that the text between <acronym> and </acronym>
<acronym></acronym> tags is an acronym.
Text Direction The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to override the
<bdo>...</bdo> current text direction.
Special Terms The <dfn>...</dfn> element (or HTML Definition Element) allows you to specify that you are
introducing a special term. It's usage is similar to italic words in the midst of a paragraph.
Quoting Text When you want to quote a passage from another source, you should put it in
between <blockquote>...</blockquote> tags. Text inside a <blockquote> element is usually
indented from the left and right edges of the surrounding text, and sometimes uses an italicized
font.
HTML - Meta Tags

• HTML lets you specify metadata - additional important information


about a document in a variety of ways. The META elements can be
used to include name/value pairs describing properties of the HTML
document, such as author, expiry date, a list of keywords, document
author etc.
• The <meta> tag is used to provide such additional information. This
tag is an empty element and so does not have a closing tag but it
carries information within its attributes.
Other commands HTML ……

• Insert Image :You can insert any image in your web page by using <img> tag. Following is the simple syntax
to use this tag.
• HTML comments are placed in between <!-- ... --> tags. So, any content placed with-in <!-- ... --> tags will
be treated as comment and will be completely ignored by the browser.

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "C:\Users\shash\OneDrive\Desktop\baby.jpg" alt = "Test
Image" width = "250" height = "300“ “border=3“ align=“left”/>
</body>
</html>
Other commands HTML ……
• The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows
and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default.
• Table Heading: Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which
is used to represent actual data cell.
• Cellpadding and Cellspacing Attributes: The cellspacing attribute defines space between table cells, while
cellpadding represents the distance between cell borders and the content within a cell.
• Colspan and Rowspan Attributes: You will use colspan attribute if you want to merge two or more columns
into a single column. Similar way you will use rowspan if you want to merge two or more rows.
• Table Caption :The caption tag will serve as a title or explanation for the table and it shows up at the top of
the table.
• Table Height and Width: We can set a table width and height using width and height attributes.
Example
<!Doctype HTML>
<html>
<head><title> Example of table </title></head>
<body><table border="2" cellpadding = "5" cellspacing = "5">
<tr> <th>Name</th>
<th>Salary</th>
<th>Profession</th>
</tr>
<tr> <td>Shreya</td>
<td>1000000</td>
<td>Engineer</td>
</tr>
<tr> <td>Surbhi</td>
<td>100000</td>
<td>Engineer</td>
</tr>
</table>
</body>
</html>

You might also like