Scribd
Upload
37 views

Web Engineering: Internet

The document discusses the history and evolution of markup languages from their origins in publishing to modern standards like HTML and XML. It notes that the idea of markup languages was first presented in 1967 and describes several early markup languages and standards that influenced those still in use today, including GenCode, TeX, Scribe, SGML, HTML, and XML.

Uploaded by

meer_online
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
37 views

Web Engineering: Internet

The document discusses the history and evolution of markup languages from their origins in publishing to modern standards like HTML and XML. It notes that the idea of markup languages was first presented in 1967 and describes several early markup languages and standards that influenced those still in use today, including GenCode, TeX, Scribe, SGML, HTML, and XML.

Uploaded by

meer_online
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

12/22/2010

Internet
• The Internet is a massive network of networks, a
networking infrastructure.
Web Engineering • It connects millions of computers together globally.
• Forming a network in which any computer can
communicate with any other computer.
• Information that travels over the Internet through
protocols.
Hassan Khan

12/22/2010 Hassan Khan 1 12/22/2010 Hassan Khan 2

Difference
World Wide Web
z Internet z WWW
• A system of internet servers that support specially
formatted documents. The documents are formatted in a Network of networks, in WWW is a way of
markup language called HTML that supports links to which millions of accessing information
other documents, as well as graphics, audio, and video computers are connects over the medium of the
files.
files together globally,
globally forming Internet.
e e
• Web Browser like “Netscape Navigator” and “Microsoft's a network in which any The Web uses the HTTP
Internet Explorer” make it easy to access the World Wide computer can protocol.
Web. communicate with other
computer.

12/22/2010 Hassan Khan 3 12/22/2010 Hassan Khan 4

1
12/22/2010

Markup Language History of Markup Language


• A markup language gives extra information about a The term markup is derived from the traditional
piece of text. For example <B> means bold in the HTML publishing practice of "marking up" a manuscript, that is,
language. <B> is a markup tag. adding symbolic printer's instructions in the margins of a
paper manuscript.

12/22/2010 Hassan Khan 5 12/22/2010 Hassan Khan 6

GenCode 1967 TeX 1970s and 80s

The idea of markup languages was apparently first Another major publishing standard is “TeX”, created and
presented by publishing executive William W. Tunnicliffe continuously refined by Donald Knuth.
at a conference in 1967, although he preferred to call it
"generic coding." Tunnicliffe would later lead the
• TeX concentrated on detailed layout of text and font
descriptions.
development of a standard called GenCode for the
publishing industry. • This required Knuth to spend considerable time
investigating the art of “Typesetting”.
• TeX requires considerable skill from the user.
• A TeX macro package known as “LaTeX”.

12/22/2010 Hassan Khan 7 12/22/2010 Hassan Khan 8

2
12/22/2010

Scribe 1980 SGML (Standard Generalized Markup Language) 1986

The first language to make a clear and clean distinction A metalanguage in which one can define markup
languages for documents.
between structure and presentation, developed by Brian
Reid. SGML itself does not specify any particular formatting,
but it specifies the rules for tagging elements.
• It introduced the idea of styles separated from the
z SGML was originally designed to enable the sharing of
marked up document . machine-readable documents in large projects in
• Scribe influenced the development of Generalized government, legal and industry.
Markup Language (later SGML). z It has also been used extensively in the printing and
publishing industries.
z HTML, which is one way of defining and interpreting tags
according to SGML rule.
z Because it is a large and complex system, it is not yet
12/22/2010 Hassan Khan 9
widely used on personal Hassan
12/22/2010
computers.
Khan 10

HTML (Hyper Text Markup Language) 1991 XML (Extensible Markup Language)

z HTML was originally designed based on SGML tagging z XML is a simplified rework of SGML, which is designed
but without SGML's emphasis on rigorous markup. so to make the XML parser much easier to implement,
compared to an SGML parser.
z XML is used for general-purpose applications, such as
th XHTML,
the XHTML SOAP and d etc.
t

12/22/2010 Hassan Khan 11 12/22/2010 Hassan Khan 12

3
12/22/2010

What is an HTML File? Example:


z HTML stands for Hyper Text Markup Language <html>
z An HTML file is a text file containing small markup tags
z The markup tags tell the Web browser how to display
the page <head>
z An HTML file must have an htm or html file extension <title>Title of page</title>
p g
z An HTML file can be created using a simple text editor </head>
z An HTML tags are case-insensitive

Note: If you want to follow the latest web standards, you <body> This is my first homepage.
should always use lowercase tags. <b>This text is bold</b>
</body>

12/22/2010 Hassan Khan 13 </html>


12/22/2010 Hassan Khan 14

Example Explanation Tags Attributes


z The first tag in your HTML document is <html>. This tag tells Tags can have attributes. Attributes provide additional information to
your browser that this is the start of an HTML document. The last an HTML element. e.g. <table border="0">
tag in your document is </html>. This tag tells your browser that z Attributes always come in name/value pairs like this:
this is the end of the HTML document. name="value".
z The text between the <head> tag and the </head> tag is header z Attributes are always specified in the start tag of an HTML
information Header information is not displayed in the browser
information. element.
element
window. z Attributes and attribute values are also case-insensitive.
z The text between the <title> tags is the title of your document. z Attribute values should always be enclosed in quotes. Double
The title is displayed in your browser's caption. style quotes are the most common, but single style quotes are
z The text between the <body> tags is the text that will be also allowed.
displayed in your browser. z In some rare situations, like when the attribute value itself
z The text between the <b> and </b> tags will be displayed in a contains quotes, it is necessary to use single quotes:
bold font. z name='John "ShotGun" Nelson'

12/22/2010 Hassan Khan 15 12/22/2010 Hassan Khan 16

4
12/22/2010

Headings Paragraphs
Headings are defined with the <h1> to <h6> tags. Paragraphs are defined with the <p> tag.
<h1> defines the largest heading. <h6> defines the
smallest heading.
<p>This is a paragraph</p>
<h1>This is a heading</h1>
<p>This
p is another paragraph</p>
p g p p
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4> HTML automatically adds an extra blank line before and
<h5>This is a heading</h5> after a paragraph.
<h6>This is a heading</h6>
HTML automatically adds an extra blank line before and
after a heading.
12/22/2010 Hassan Khan 17 12/22/2010 Hassan Khan 18

Line Breaks Comments in HTML


The <br> tag is used when you want to end a line, but don't The comment tag is used to insert a comment in the HTML
want to start a new paragraph. source code. A comment will be ignored by the browser.

<p>I <br> Love <br>Pakistan</p> <!-- This is a comment -->

Note: The <br> tag is an empty tag. It has no closing tag.

12/22/2010 Hassan Khan 19 12/22/2010 Hassan Khan 20

5
12/22/2010

HTML Backgrounds Linking to Another Web-Page


The <body> tag has two attributes where you can specify backgrounds. The
background can be a color or an image. Anchor Tag and href attribute
Bgcolor The <a> tag is used to create an anchor to link from and
href attribute is used to address the document to link to,
The bgcolor attribute specifies a background-color for an HTML page. The
value of this attribute can be a hexadecimal number
number, an RGB value
value, or a and the words between the open p and close of the anchor
color name: tag will be displayed as a hyperlink.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
<a href="url">Text to be displayed</a>
Background Example:
The background attribute specifies a background-image for an HTML page. <a href="http://www.gmail.com/">Visit G-Mail</a>
<body background="clouds.gif">

12/22/2010 Hassan Khan 21 12/22/2010 Hassan Khan 22

Linking to Another Web-Page Linking Within Documents

Anchor Tag and target attribute Anchor Tag and Name attribute
With the target attribute, you can define where the linked The name attribute is used to create a named anchor.
document will be opened. When using named anchors we can create links that can
The line below will open the document in a new browser jjump p directly
y into a specific
p section on a p
page,
g , instead of
window: letting the user scroll around to find what he/she is
looking for.
<a href="http://www.google.com/" target="_blank">
Visit Google
</a>

12/22/2010 Hassan Khan 23 12/22/2010 Hassan Khan 24

6
12/22/2010

Linking B/W Your Own Page E-Mail Link on Your Page


z If you want to create a link from one page to another You can add your E-Mail address on your web-page, so
page on the same computer. that your reader can reply/feed-back while visiting your
<a href=“text.html">Text File is Here.</a> page. This is the simply way to enable readers of your
web-pages to “talk back” to you.
z You can also use an image as a link:

<a href="lastpage.htm"> <a href=“mailto:[email protected]”> Send me an E-Mail


</a>
<img border="0" src="buttonnext.gif" width="65“></a>

12/22/2010 Hassan Khan 25 12/22/2010 Hassan Khan 26

Text Alignment HTML Lists


z The align attribute allows you to left-justify, right-justify or center Unordered Lists
text. An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.
<p align=“left”> <ul>
I love Pakistan.<br
Pakistan <br /> <li>Coffee</li>
I love Pakistan.<br /> <li>Milk</li>
I love Pakistan.<br /> </ul>
</p>
Output:
• Coffee
• Milk

12/22/2010 Hassan Khan 27 12/22/2010 Hassan Khan 28

7
12/22/2010

HTML Lists HTML Lists


Ordered Lists Definition Lists
Definition lists are indented lists without any number or symbol in front of
An ordered list starts with the <ol> tag. Each list item starts each item.
with the <li> tag. <dl>
<dt>Coffee</dt>
<ol>
<dd>Black hot drink</dd>
<li>Coffee</li> <dt>Milk</dt>
<li>Milk</li> <dd>White cold drink</dd>
</dl>
</ol>
Output:
Output:
1. Coffee
Coffee
2. Milk Black hot drink
Milk
White cold drink

12/22/2010 Hassan Khan 29 12/22/2010 Hassan Khan 30

Text Formatting Font Size and Color


<b>This text is bold</b>

<strong> This text is strong </strong>


The <big>, <small> and etc. gives you some rudimentary
control over the size and appearance of the text on your
<big> This text is big </big> page.
<em>This text is emphasized</em> For more control and size on the appearance of your text
you can use <font>
<f t> iin HTML
HTML.
<i>This text is italic</i>

<small>This text is small</small>


<font size=“5” face= “arial” color=“purple” >This
This text contains <sub>subscript </sub> text will be big and purple </font>
This text contains <sup> superscript
</sup>

12/22/2010 Hassan Khan 31 12/22/2010 Hassan Khan 32

8
12/22/2010

HTML Character Entities Most Common Character Entities


Some characters have a special meaning in HTML. If we
want the browser to actually display these characters we
must insert character entities in the HTML source. A
character entity has three parts:
1. an ampersand (&)
2 an entity
2. tit name
3. # and an entity number, and finally a semicolon(;).

To display < in an HTML document we write: &lt; or


&#60;
Name instead of a number is easier to remember.
Not all browsers support the newest entity names.
Note: that the entities are case sensitive.
12/22/2010 Hassan Khan 33 12/22/2010 Hassan Khan 34

Commonly Used Character Entities Tables

z Tables are defined with the <table> tag. A table is divided into
rows (with the <tr> tag), and each row is divided into data cells
(with the <td> tag). The letters td stands for "table data," which is
the content of a data cell. A data cell can contain text, images,
lists, paragraphs, forms, horizontal rules, tables, etc.

12/22/2010 Hassan Khan 35 12/22/2010 Hassan Khan 36

9
12/22/2010

Example Tables and the Border Attribute


<table border="1">
<tr> If you do not specify a border attribute the table will be
<td>row 1, cell 1</td> displayed without any borders. Sometimes this can be
<td>row 1, cell 2</td> useful, but most of the time, you want the borders to
</tr>
<tr>
show.
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr> <table border=“0">
</table>
<table border="1">

12/22/2010 Hassan Khan 37 12/22/2010 Hassan Khan 38

Headings in a Table Spans two columns


Headings in a table are defined with the <th> tag. <table border="1">
<table border="1"> <tr>
<th>Name</th>
<tr> <th colspan="2">Telephone</th>
<th>Heading</th> </tr>
<th>Another Heading</th> <tr>
</tr> <td>Bill Gates</td>
<tr> <td>555 77 854</td>
<td>555 77 855</td>
<td>row 1, cell 1</td> </tr>
<td>row 1, cell 2</td> </table>
</tr>
</table>

12/22/2010 Hassan Khan 39 12/22/2010 Hassan Khan 40

10
12/22/2010

Spans two Rows Other attributes of Table


<table border="1"> z <table border="1" bgcolor="red">
<tr>
<th>First Name:</th>
<td>Bill Gates</td> z <table border="1" background=“clouds.jpg">
</tr>
<tr>
z <td bgcolor="red">First</td>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr> z <td background=“clouds.jpg">First</td>
<tr>
<td>555 77 855</td>
</tr> z <td align="left">
</table>
12/22/2010 Hassan Khan 41 12/22/2010 Hassan Khan 42

Forms Input --- Text Fields


A form is an area that can contain form elements. The most used form tag is the <input> tag. The type of input is
specified with the type attribute.
Form elements are elements that allow the user to enter
Text fields are used when you want the user to type letters, numbers,
information (like text fields, text area fields, drop-down etc. in a form.
menus, radio buttons, checkboxes, etc.) in a form.
<form>
First name: <input type="text" name="firstname">
<form> <br>
--------- Last name: <input type="text" name="lastname">
--------- </form>

</form>
12/22/2010 Hassan Khan 43 12/22/2010 Hassan Khan 44

11
12/22/2010

Input --- Hidden Fields Radio Button


The most used form tag is the <input> tag. The type of input is Radio Buttons are used when you want the user to select
specified with the type attribute. one of a limited number of choices.
Text fields are used when you want the user to type letters, numbers,
etc. in a form.
<form>
<input type="radio" name=“gender" value="male"> Male
<form>
<br>
First name: <input type=“hidden" name="firstname"> <input type="radio" name=“gender" value="female"> Female
</form> </form>

12/22/2010 Hassan Khan 45 12/22/2010 Hassan Khan 46

Checkboxes Drop Down Box


Checkboxes are used when you want the user to select one or more options <select name="country">
of a limited number of choices. <option value="pakistan">Pakistan</option>
<option value="india">India</option>
<form> </select>
I have a bike: <input type="checkbox" name="vehicle" value="Bike" /><br >
I have a car: <input type="checkbox" name="vehicle" value="Car" /><br >
I have an airplane:<input type="checkbox" name="vehicle" value="Airplane"
>
</form>

12/22/2010 Hassan Khan 47 12/22/2010 Hassan Khan 48

12
12/22/2010

Text Area File Upload


<textarea rows="10" cols="30">
The cat was playing in the garden. <input type="file" name="uploadedfile" >
</textarea>

12/22/2010 Hassan Khan 49 12/22/2010 Hassan Khan 50

Button
<form >
<input type=“button" value="Submit!">
<input type=“submit" value="Submit!">

</form>

12/22/2010 Hassan Khan 51

13

You might also like