Computer Concepts and Applications – Introduction to HTML

DIAGNOSTIC RADIOGRAPHY · NTA LEVEL 4 · SEMESTER TWO

Computer Concepts and Applications – Introduction to HTML

CRT04207 · Radiology Informatics

Study Computer Concepts and Applications – Introduction to HTML using the sections below. Use the topic navigation to continue through Radiology Informatics.

Computer Concepts and Applications – Introduction to HTML

4 Introduction to HTML:

HTML stands for Hypertext Markup Language, it is the 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 are called Hypertext.

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 was developed with the intent of defining the structure of documents like headings, paragraphs, lists, etc.

HTML is being widely used to format web pages with the help of different tags available in HTML.

Create An HTML Document
Open notepad (Editor) and write the following code
<html>
<head></head>
<body>This is my first html application
</body>

</html>

Then Save this code clicking on file

save with name “first.html” in D:\ drive . .html extension is important

This will create an html file. After that Open Internet Explorer (browser).

Click on file

open

D:\first.html.

It will load the document in web browser.
HTML Document Structure

A typical HTML document will have following structure:

<!DOCTYPE>

<html>
<head>
<Title>TITLE OF WEB PAGE</Title>

SCRIPT AND STYLE TAGS HERE…

</head>

<body>

DOCUMENT BODY RELATED TAGS..

</body>
</html>

<!DOCTYPE html>

The < !DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document.

<html>

This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>…</head> and document body which is represented by <body>…</body> tags.

<head>

This tag represents the document's header which can keep other HTML tags like <title>, <link>, <script> etc.

<title>
The <title> tag is used inside the <head> tag to mention the document title.

<body>

This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc.

Ex.

<HTML> <HEAD>

<TITLE>HTML demo</TITLE>

</HEAD>

<BODY>

This is First HTML Program

</BODY>

<HTML>

Stand alone tags:

Container tag :

A container tag has a beginning (opening) tag and an ending (closing) tag. Eg. <p></p> Stand Alone Tags:

An empty tag has only the opening tag. All of the data represented by an empty tag is contained in the tags attributes. Eg. <Br/> List of Stand alone tags:

<LINK …>

This tag is a stand-alone tag that can be used to denote relationships between documents.This is used to manage several documents in large website. The attributes for this tag are href, name, rel, title, etc.

The <LINK> tag also has a role in providing style sheet information in HTML documents. If style information is in a separate

<META …>

The META tag is used within the HEAD tag to embed Meta information. Such information can be extracted by servers/clients for use in identifying, indexing and cataloguing documents. The attributes for this tag are HTTP-EQUIV,name, content,etc.

Http-equiv: Provides an HTTP header for the information/value of the content attribute This attribute can have values content-type, default-style, refresh.

NAME

Meta-information name. It can have values application-name, author, description, generator, keywords.

CONTENT

The meta-information content to be associated with the given name and/or HTTP response header. Typically, the META tag would be used to introduce Client Pull into HTML documents, or to specify keywords that may be used by search engines to determine a documents relevance to the current search (although some are stopping using this method).

Ex.
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">

</head>

III. <HR>

A <HR> or Horizontal Rule element is a divider between sections of text such as a full width horizontal rule or equivalent graphic. Attributes which allow the document author to describe how the horizontal rule should look are;

< HR SIZE=number>

The SIZE attributes lets the author give an indication of how thick they wish the horizontal rule to be. A pixel value should be given.

< HR WIDTH=number|percent>

The default horizontal rule is always as wide as the page. With the WIDTH attribute, the author can specify an exact width in pixels, or a relative width measured in percent of document width.

< HR ALIGN=left|right|center>

Now that horizontal rules do not have to be the width of the page it possible to specify the horizontal alignment of the rule.

< HR NOSHADE>

For those times when a solid bar is required, the NOSHADE attribute specifies that the horizontal rule should not be shaded at all.

Example:
<p>HTML is a language for describing web pages.</p>
<hr>
<p>CSS defines how to display HTML elements.</p>
It will appear in browser as:
HTML is a language for describing web pages.

CSS defines how to display HTML elements.

<IMG …>

This tag adds images into the web browser. Attributes of <img> tag are align, src, alt, height, width etc.This is also a stand alone tag as t doesn’t have closing tag. Ex. <img src="smiley.gif" alt="Smiley face" height="42" width="42"> It will display an image smiley.gif with height 42 & width 42.

<INPUT>

The Input element represents a field whose contents may be edited by the user.

<BR>

The Line Break element specifies that a new line must be started at the given point. A new line indents the same as that of line-wrapped text. Example :

< P>
Line 1 of text<BR>
Line 2 of text<BR>
Formatting tags:
Bold Text(<b>…</b>)
Anything that appears within <b>…</b> element, is displayed in bold as shown below
Ex.
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p> </body>
</html>
The result is :
The following word uses a bold typeface.

Italic Text(<i>…</i>)

Anything that appears within <i>…</i> element is displayed in italicized as shown below:

Ex. <p>The following word uses a <I> Italicized </I> typeface.</p>
The result is :
The following word uses a Italicized typeface.
Underlined Text (<u>…</u>)
Anything that appears within <u>…</u> element is displayed in underined as shown below:
Ex. <p>The following word uses a <U>Underlined</U> typeface.</p>
The result is :
The following word uses a Underlined typeface.

Strike Text(<strike> tag):

Anything that appears within <strike>…</strike> element is displayed with strikethrough, which is a thin line through the text as shown below:

Ex. <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
Result is:
The following word uses a strikethrough typeface.

Superscript Text (<sup> tag):

The content of a <sup>…</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters.

Ex.	<p>The following word uses a <sup>superscript</sup> typeface.</p>

Result is:
The following word uses a superscript typeface.

Subscript Text(<sub> tag):

The content of a <sub>…</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters

Ex.	<p>The following word uses a <sub>subscript</sub> typeface.</p>

Result is:
The following word uses a subscript typeface.
Inserted Text (<ins> tag):
Anything that appears within <ins>…</ins> element is displayed as inserted text.

Ex.	<p>I want to drink <del>cola</del> <ins>wine</ins></p>

Result is:
I want to drink cola wine
Deleted Text (<del> tag)
Anything that appears within <del>…</del> element, is displayed as deleted text.

Ex.	<p>I want to drink <del>cola</del> <ins>wine</ins></p>

Result is:
I want to drink cola wine

Larger Text (<big> tag)

The content of the <big>…</big> element is displayed one font size larger than the rest of the text surrounding it as shown below:

<p>The following word uses a <big>big</big> typeface.</p> The following word uses a big typeface.

Smaller Text (<small> tag) :

The content of the <small>…</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below:

<p>The following word uses a <small>small</small> typeface.</p> The following word uses a small typeface.

Grouping Content (<div> & <span> tags):

The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page.

For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You can then attach a style to this <div> element so that they appear using a special set of style rules.

Ex.
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here…..</p>
</div>
</body>
</html>

Result is:

HOME | CONTACT | ABOUT

Content Articles

Actual content goes here…..

The <span> element, on the other hand, can be used to group inline elements only. So, if you have a part of a sentence or paragraph which you want to group together, you could use the <span> element as follows

Ex.	<p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div tag</span> alongwith CSS</p>

Result is:
This is the example of span tag and the div tag alongwith CSS
Other HTML Tags
<center> tag:
The content enclosed within <center>..</center> will appear to be centered.
Ex.
<center> This is my first application</center>
Result

This is my first application

OTHER TAGS:

Heading Tags

Any document starts with a heading. You can use different sizes for your headings. HTML also have 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.

Example
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

Result:

<Font > Tag:

The <font> tag specifies the font face, font size, and color of text.
Ex.
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

Attribute

Description

Specifies the color of text. It can be color= rgb(x,x,x) or #xxxxxx color
or colorname

face

Specifies the font of text size

Specifies the size of text

List tags:

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.
<ol> – An ordered list i.e a numbered list

Unordered Lists <UL> tag:

An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.

<ul> have type attribute to display different bullets shapes. It can have values as disc, square, circle. Default is disc.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
This will produce following result:
Beetroot
Ginger
Potato
Radish
For <ul type="circle">
This will produce following result:

Beetroot o

Ginger o

Potato o

Radish HTML Ordered Lists

It will display numbered list instead of bullets. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce following result:
Beetroot
Ginger
Potato
Radish

The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like. By default it is a number. Following are the possible options:

<ol type="1"> – Default-Case Numerals.
<ol type="I"> – Upper-Case Numerals.
<ol type="i"> – Lower-Case Numerals.
<ol type="a"> – Lower-Case Letters.
<ol type="A"> – Upper-Case Letters.
Following is an example where we used <ol type="I">
<ol type="I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li> </ol>
This will produce following result:
Beetroot
Ginger
Potato
Radish

The start Attribute

You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the possible options:

<ol type="1" start="4"> – Numerals starts with 4.
<ol type="I" start="4"> – Numerals starts with IV.
<ol type="a" start="4"> – Letters starts with d.
Ex.
Following is an example where we used <ol type="i" start="4" >
<ol type="i" start="4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li> </ol>
This will produce following result:
Beetroot
Ginger
Potato
Radish

Adding Images into the documents:

I. <IMG …>

This tag adds images into the web browser. Attributes of <img> tag are;

Attributes Description

Ex. <img src="smiley.gif" alt="Smiley face" height="42" width="42">
It will display an image smiley.gif with height 42 & width 42.

Creating Hyperlinks:

<A > tag:

Using an anchor tag one document can be linked to the other documents. Anchor elements are defined by the <A> element. The <A> element accepts several attributes but HREF is required.

Attributes of the <A> element :

Attributes Description

Example : <A NAME=“info”>IMG</A> is a frequently used tag.

An example of this is <A HREF=“#info”>IMG</A>.

Another document can then make a reference explicitly to this anchor by putting the identifier after the address, separated by a hash sign :

< A HREF=“new.html#info”>

Creating Tables:

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

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 Ex.

<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

This will produce following result:

Border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border then you can use border="0".

Table Heading (<th> tag):

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. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row.

Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
This will produce following result:
Attributes of Table tag:
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>

<body>

<th>Name</th>
<th>Salary</th>
</tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

This will produce following result:

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. This tag is depracated in newer version of HTML/XHTML.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td>
<td>row 1, columnn 2</td>
</tr>
<td>row 2, column 1</td>
<td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>
This will produce following result:
Attributes of <td> tag:
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr> </table>
</body>
</html>
This will produce following result:

Table Header, Body, and Footer

Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are:
<thead> – to create a separate table header.
<tbody> – to indicate the main body of the table.

<tfoot> – to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data.

But it is notable that <thead> and <tfoot> tags should appear before <tbody>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>

This will produce following result:

Nested Tables

You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag <td>.

Example

Following is the example of using another table and other tags inside a table cell. <!DOCTYPE html> <html>

<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
<table border="1" width="100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
This will produce following result:
Sending mail through web page:
Open your Gmail account by clicking on the gmail link on the Google search page.
Type the email subject. The subject lets people know what the email is going to be about.
Click the send button, which is located above the 'To' box.

o	You have completed your email. Now you can wait until the person you sent the email replies.

Sample web page:
<html>
<head><title>My first web page</title></head>
</html>
<body>
<center>
<h2>Student Inf0rmation</h2>
<Table border=1>
<tr>
<th>Roll Number</th>
<th>Name</th>
<th>Class</th>
</tr>
<td>1</td>
<td>Priya</td>
<td>MCA I</td>
</tr>
<td>2</td>
<td>Riya</td>
<td>BCA I</td>
</tr>
<td>3</td>
<td>Rina</td>
<td>MCA I</td>
</tr>
<td>4</td>
<td>Tina</td>
<td>MCA II</td>
</tr>
</Table>
</center>
</body>
</html>

Result: