Application of
Information &
Computing
Technologies
Lecture 5
Rana Taimur Khan
Lecturer GCUF
Today is our 2nd Web Dev lecture
During our 1st lecture about the Web …
• We answered various questions about the Web.
• How it works, How it is structured, etc.
• We also commented about the future shape of the
Web: the Semantic Web, and how it is different from
the Web of today.
• Today’s Web is targeted squarely at us, humans.
Whereas, the Semantic Web is being constructed in
such a way that it is easily understandable for the
computers
2
Learning Goals for Today
1. To develop your personal Web page
3
But first …
How I developed my personal Web page
4
URL
page title
link
5
HTML
Hyper Text Markup Language
6
<HTML>
<HEAD> HTML Code
<TITLE>Rana Taimur Khan's Home Page</TITLE>
</HEAD>
<BODY>
<H1>Rana Taimur Khan</H1>
<P><B>Lecturer in Software Engineering Department</B><BR>
<A HREF="http://www.gcuf.edu.pk/">GC University</A><BR>
Department of Software Engineering, GCUF, Faisalabad<BR>
+92 3377460775<BR>
<A
HREF="mailto:
[email protected]">
[email protected]</A
><BR></P>
<P>I teach the Introduction to Computing course. </P>
</BODY> 7
<HTML> 1
<HEAD> 2 HTML Code
<TITLE> Rana Taimur Khan’s Home Page </TITLE>
</HEAD> 3
<BODY> 4
<H1>Rana Taimur Khan</H1>
The ones in yellow, i.e.
<P><B>Lecturer in <HTML>, </HTML>,Department</B><BR>
Software Engineering <HEAD>,
</HEAD>, <BODY>,University</A><BR>
<A HREF="http://www.gcuf.edu.pk/">GC </BODY>
are the
Department of Software six essential
Engineering, HTML
GCUF, tags,
Faisalabad<BR>
+92 3377460775<BR>required in all Web pages
<A
HREF="mailto:[email protected]">[email protected]</A
><BR></P>
<P>I teach the Introduction to Computing course. </P>
</BODY> 5
8
6
<HTML>
<HEAD>
<TITLE>Rana Taimur Khan's Home Page</TITLE>
</HEAD>
<BODY>
<H1>Rana Taimur Khan</H1>
<P><B>Lecturer in Software Engineering Department</B><BR>
<A HREF="http://www.gcuf.edu.pk/">GC University</A><BR>
Department of Software Engineering, GCUF, Faisalabad<BR>
+92 3377460775<BR>
<A
HREF="mailto:
[email protected]">
[email protected]</A
><BR></P>
<P>I teach the Introduction to Computing course. </P>
</BODY> 9
<HTML>
<HEAD>
<TITLE>Rana Taimur Khan's Home Page</TITLE>
</HEAD>
<BODY>
<H1>Rana Taimur Khan</H1>
<P><B>Lecturer in Software Engineering Department</B><BR>
<A HREF="http://www.gcuf.edu.pk/">GC University</A><BR>
Department of Software Engineering, GCUF, Faisalabad<BR>
+92 3377460775<BR>
<A
HREF="mailto:
[email protected]">
[email protected]</A
><BR></P>
<P>I teach the Introduction to Computing course. </P>
</BODY> 10
<HTML>
<HEAD>
<TITLE>Rana Taimur Khan's Home Page</TITLE>
</HEAD>
<BODY>
<H1>Rana Taimur Khan</H1>
<P><B>Lecturer in Software Engineering Department</B><BR>
<A HREF="http://www.gcuf.edu.pk/">GC University</A><BR>
Department of Software Engineering, GCUF, Faisalabad<BR>
+92 3377460775<BR>
<A
HREF="mailto:
[email protected]">
[email protected]</A
><BR></P>
<P>I teach the Introduction to Computing course. </P>
</BODY> 11
<HTML>
<HEAD>
<TITLE>Rana Taimur Khan's Home Page</TITLE>
</HEAD>
Descriptio
<BODY> n of the
<H1>Rana Taimur link
Khan</H1>
<P><B>Lecturer in Software Engineering Department</B><BR>
<A HREF="http://www.gcuf.edu.pk/">GC University</A><BR>
Department of Software Engineering, GCUF, Faisalabad<BR>
+92 3377460775<BR>
<A
HREF="mailto:
[email protected]">
[email protected]</A><BR
></P>
<P>I teach the Introduction to Computing course. </P>
</BODY>
</HTML> 12
<HTML>
<HEAD>
<TITLE>Rana Taimur Khan's Home Page</TITLE>
</HEAD>
<BODY>
<H1>Rana Taimur Khan</H1>
<P><B>Lecturer in Software Engineering Department</B><BR>
<A HREF="http://www.gcuf.edu.pk/">GC University</A><BR>
Department of Software Engineering, GCUF, Faisalabad<BR>
+92 3377460775<BR>
<A
URL of the
HREF="mailto:
[email protected]">
[email protected]</A
><BR></P> link
<P>I teach the Introduction to Computing course. </P>
</BODY> 13
<HTML>
<HEAD>
<TITLE>Rana Taimur Khan's Home Page</TITLE>
</HEAD>
<BODY>
<H1>Rana Taimur Khan</H1>
<P><B>Lecturer in Software Engineering Department</B><BR>
<A HREF="http://www.gcuf.edu.pk/">GC University</A><BR>
Department of Software Engineering, GCUF, Faisalabad<BR>
+92 3377460775<BR>
<A
HREF="mailto:
[email protected]">
[email protected]</A
><BR></P>
<P>I teach the Introduction to Computing course. </P>
</BODY> 14
<HTML>
<HEAD>
<TITLE>Rana Taimur Khan's Home Page</TITLE>
</HEAD>
<BODY>
<H1>Rana Taimur Khan</H1>
<P><B>Lecturer in Software Engineering Department</B><BR>
<A HREF="http://www.gcuf.edu.pk/">GC University</A><BR>
Department of Software Engineering, GCUF, Faisalabad<BR>
+92 3377460775<BR>
<A
HREF="mailto:
[email protected]">
[email protected]</A
><BR></P>
<P>I teach the Introduction to Computing course. </P>
</BODY> 15
<HTML>
<HEAD>
<TITLE>Rana Taimur Khan's Home Page</TITLE>
</HEAD>
<BODY>
<H1>Rana Taimur Khan</H1>
<P><B>Lecturer in Software Engineering Department</B><BR>
<A HREF="http://www.gcuf.edu.pk/">GC University</A><BR>
Department of Software Engineering, GCUF, Faisalabad<BR>
+92 3377460775<BR>
<A HREF="mailto:
[email protected]">
[email protected]</A><BR></P>
<P>I teach the Introduction to Computing course. </P>
</BODY>
</HTML> 16
<HTML>
<HEAD>
<TITLE>Rana Taimur Khan's Home Page</TITLE>
</HEAD>
<BODY>
<H1>Rana Taimur Khan</H1>
<P><B>Lecturer in Software Engineering Department</B><BR>
<A HREF="http://www.gcuf.edu.pk/">GC University</A><BR>
Department of Software Engineering, GCUF, Faisalabad<BR>
+92 3377460775<BR>
<A HREF="mailto:
[email protected]">
[email protected]</A><BR></P>
<P>I teach the Introduction to Computing course. </P>
</BODY>
</HTML> 17
This HTML document was developed
in a plain-text editor called notepad
18
19
After typing the code into notepad, I
saved it as index.html
To check if I have done everything right,
I double clicked on icon of the saved file
index.html
Double clicking on the icon launched the
Web browser displaying my index.html
20
My Web page is done!
21
Enough about mine …
Here is how you can develop your personal Web page
22
Developing Your Own Web Page
Step 1
Open notepad, type in the HTML code,
23
Developing Your Own Web Page
Step 2
Save it as index.html on your PC’s desktop.
Double Click the icon and Page is launched…
24
That is it!
25
Before we finish for the day, a
brief review of the HTML tags …
26
<HTML>
…
…
</HTML>
27
HTML tags that go in
the HEAD portion of
a Web page
28
<HEAD>
…
…
</HEAD>
29
<TITLE> … </TITLE>
30
HTML tags that go in
the BODY portion of
a Web page
31
<BODY>
…
…
</BODY>
32
<P> … </P>
Paragraph
33
<BR>
Line break
34
<B> … </B>
Bold text
35
<A HREF = “action” > label </A>
Anchor
(Anchors are used to embed links in a Web page)
36
<A HREF = “action” > label </A>
• http://
– Displays the Web page specified by the link
– example: “http://www.gcuf.edu.pk”
• mailto:
– Sends an e-mail to the specified address
– example: “mailto:[email protected]”
37
<A HREF = “action” > label </A>
label can be any text string
38
HTML Code
Browser Display
39
End of HTML tag review
40
Homework Assignment
Develop your own Homepage
Among other Things it should contain
•Atleast one link to http://www.gcuf.edu.pk
•Your (Clickable) E-mail address
•A paragraph (50-100 words) on what you
see yourself doing 10 years from now.
41
What have we learned today?
1. We now know how Web pages are
built using HTML
42
