Scribd
Upload
18 views

HTML Tags and Text Formatting

HTML Tags and Text Formatting

Uploaded by

sanskar26cs114
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

HTML Tags and Text Formatting

HTML Tags and Text Formatting

Uploaded by

sanskar26cs114
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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