Scribd
Upload
4 views

HTML Tags and Text Formatting

HTML Tags and Text Formatting

Uploaded by

sanskar26cs114
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

HTML Tags and Text Formatting

HTML Tags and Text Formatting

Uploaded by

sanskar26cs114
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

3.

Markup Languages and Formatting


a. HTML

b. XHTML

c. CSS (Cascading Style Sheets)


2.1
HTML Tags
and
Text Formatting
What is an HTML File?
◼ HTML stands for Hyper Text Markup Language

◼ HTML is not a computer programming language.


 It is simply a set of markup codes that structure and style text and graphics.
 Learning HTML requires learning these markup tags.

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


<html>
<head>
<title>Title of page: DRS</title>
</head>
<body>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>

◼ HTML Editors
 WYSIWYG editor like FrontPage, Macromedia HomeSite, or Adobe PageMill
 To be a skillful Web developer, use a plain text editor!
HTML Tags
◼ HTML tags are used to mark-up HTML elements

◼ HTML tags normally come in pairs like <b> and


</b>

◼ The text between the start and end tags is the


element content

◼ HTML tags are not case sensitive, <b> means


the same as <B>
 W3C recommends lowercase tags in their HTML 4
recommendation, and XHTML (the next generation
HTML) demands lowercase tags
HTML Tags
◼ Tag Attributes
 Tags can have attributes.
 Attributes can provide additional information about
the HTML elements on your page
➢ <body bgcolor="red">
 Attributes always come in name/value pairs like this:
name="value"
 Attribute values should always be enclosed in quotes
General Structure of an HTML File

<html>
<head>
<title>Title of page: DRS</title>
</head>
<body>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>
General Structure of an HTML File

<html>
<head>
<title>Title of page: DRS</title>
</head>
<body bgcolor="red">
This is my first homepage.
<b>This text is bold</b>
</body>
</html>
HTML Container and Empty Tags
◼ There are two basic types of tags that are used in a
HTML document (web page):
 Container tags.
 Empty tags

◼ Container tags are tags that encloses other HTML tags or


text, between their starting and ending tags
 <html>… </html>, <body>…</body>, <b>…</b>

◼ EMPTY tags do not contain any text


 They are used simply as markers
 and in some cases, these are used for whatever is
contained in their attributes
 EMPTY elements are not permitted to have an end-
tag.
➢ Thus <img src="blahblah.gif"></img> is illegal.
HTML Container and Empty Tags
◼ Example EMPTY elements are
 hr Horizonal rule
 br Line break
 img Inline image
 input Input

◼ Container and EMPTY tags can have attributes


The <head> tag
◼ The head element contains general information
(meta-information) about a document
 Using this is optional, but recommended

◼ Head Tags
 <title>: defines the document title
 <base>: defines a base URL for all the links
➢ <base href="http://www.w3schools.com/images/" />
 <link>: defines a resource reference
➢ <link rel="stylesheet" type="text/css" href="theme.css" />
 <meta>: defines meta information about your page,
such as descriptions and keywords for search engines
and refresh rates
… The <head> tag
 metadata is always passed as name/value pairs
 <meta name="keywords" content="HTML, DHTML, CSS,
XML, XHTML, JavaScript, VBScript" />
 <meta http-equiv="refresh" content="5" />
 <meta http-equiv="Content-Type" content="text/html;
charset=windows-1256">
 ISO-8859-6 (Arabic)

Attribute Value Description


http-equiv content-type Connects the content attribute to an HTTP header
expires
refresh
set-cookie
name author Connects the content attribute to a name
description
keywords
generator
revised
others
Basic HTML Tags
◼ Headings
 Headings are defined with the <h1> to <h6> tags

◼ Paragraphs
 Paragraphs are defined with the <p> tag
 HTML automatically adds an extra blank line before and after a
paragraph

◼ Line Breaks
 The <br> tag is used when you want to end a line, but don't
want to start a new paragraph

◼ Horizontal Rule: the <hr> tag

◼ Comments in HTML
 <!-- This is a comment -->

◼ HTML will truncate the spaces in your text. Any number


of spaces count as one
HTML Text Formatting
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<blockquote> Defines a long quotation
<code> Defines computer code text
<pre> Defines preformatted text
HTML Character Entities
◼ Some characters are reserved in HTML.
 If you use the less than (<) or greater than (>) signs in
your text,
 the browser might mix them with tags.

◼ Character entities are used to display reserved


characters and special characters in HTML.

◼ A character entity looks like this:


 &entity_name; OR
 &#entity_number;

◼ To display a less than sign (<) we must write:


 &lt; or
 &#60;
HTML Character Entities
◼ E.g.
 A commonly used entity in HTML is the non-breaking
space: &nbsp;
 A non-breaking space is a space that will not break into a
new line.
➢ 10 km/h or 10 PM

◼ non-breaking space is also preventing browser from


truncating spaces in HTML pages
 If you write 10 spaces in your text, the browser will
remove 9 of them.
 To add real spaces to your text, you can use the &nbsp;
character entity.
HTML Character Entities

Result Description Entity Name Entity Number


non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" quotation mark &quot; &#34;
' apostrophe &#39;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
× multiplication &times; &#215;
÷ division &divide; &#247;
HTML Character Entities
◼ Advantage of using an entity name:
 An entity name is easy to remember.

◼ Disadvantage of using an entity name:


 Browsers may not support all entity names,
 but the support for entity numbers is good

You might also like