Scribd
Upload
50 views

Chapter 2 - HTML

This document provides an overview of HTML (Hypertext Markup Language) and how to develop web pages using HTML tags. It discusses key HTML tags like <html>, <head>, <body>, <p>, <br>, <hr>, <ul>, <ol>, <li>, and <a> and how they are used to structure and style web page content. It also covers how to add links within pages and to external websites using relative and absolute file paths and URLs. The document is part of an Internet Programming course at Assosa University.

Uploaded by

Dafuq Malone
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
50 views

Chapter 2 - HTML

This document provides an overview of HTML (Hypertext Markup Language) and how to develop web pages using HTML tags. It discusses key HTML tags like <html>, <head>, <body>, <p>, <br>, <hr>, <ul>, <ol>, <li>, and <a> and how they are used to structure and style web page content. It also covers how to add links within pages and to external websites using relative and absolute file paths and URLs. The document is part of an Internet Programming course at Assosa University.

Uploaded by

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

ASSOSA UNIVERSITY

COLLEGE OF COMPUTING
DEPARTMENT OF
COMPUTER SCIENCE
Internet Programing
By Seiyfu Yesuf1

ASU/Computing/Computer Scienc Internet Programing


WEB PAGE DEVELOPMENT USING
HTML
2
2

ASU/Computing/Computer Scienc Internet Programing


 Hyper Text Markup Language (HTML) can be thought of as “the
language of the internet”.
 HTML is the standard mark-up language that is used to create web
pages. It was originally designed for sharing scientific
documents.
 Adaptations to HTML over the years made it suitable to describe
several other types of documents that can be displayed as web
pages on the internet.
 HTML gives authors the means to complete
the following tasks:
 Publish online documents with headings, text, tables, lists,
photos, and so on.
 Retrieve online information by using hypertext links at the click
of a button.
ASU/Computing/Computer Scienc Internet Programing 3
 Design forms for conducting transactions with remote services, to be
able to search information.
 Include spreadsheets, video clips, sound clips, and other applications
directly in their documents.
2.2 HTML tags
 The tags are what separate normal text from HTML code. Like the words
between the <angle-brackets>.
 Different tags will perform different functions. The simplest tags do
nothing more than apply formatting to some text, like:
<b>These words will be bold</b>, and these will not.
 The <html> tag tells the browser that this is an HTML document.
Represents the root of an HTML document and is the container for all
other HTML elements.
ASU/Computing/Computer Scienc Internet Programing 4
ASU/Computing/Computer Scienc Internet Programing 5
 All HTML pages follow a pre-defined structure that is used to
differentiate areas of a webpage. The following example
illustrates the basic structure:

ASU/Computing/Computer Scienc Internet Programing 6


 The <!DOCTYPE> is a declaration tag that represents the document
type. The <!DOCTYPE> declaration is not an HTML tag; it is an
instruction to the web browser about what version of HTML the page
is written in.
 The <html> tag is the root element of this tree.
 The <head> element can contain the following tags:
 title ( <title>),
 scripts (<script>),
 style (<style>),
 style sheet links ( <link>),
 meta information (<meta>),
 browser support information and other initialization functions
(<base>).
ASU/Computing/Computer Scienc Internet Programing 7
 Paragraph tag is a very basic and typically the first tag you will
need to publish your text on the web pages. The HTML code for
forcing a paragraph break is: <p> </p>
 Example: <p>This is a paragraph.</p>
 Creating Line Breaks:- The <br> tag is used to insert a line break
on the web page.
 Since the <br> is an empty element, so there is no need of
corresponding </br> tag.
 Example: <p>This is a paragraph <br> with line break.</p>
 Creating Horizontal Rules:- You can use the <hr> tag to create
horizontal rules or lines to visually separate content sections on a
web page. Like <br>, the <hr> tag is also an empty element.
ASU/Computing/Computer Scienc Internet Programing 8
 Here's an example:
<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p>
Insert &nbsp; for creating extra consecutive spaces, while insert
<br> tag for creating line breaks on your web pages.
2.5 HTML style tag
 The HTML <style> tag is used for declaring style sheets
within HTML document.
 Each HTML document can contain multiple <style> tags.
Each <style> tag must be located between the <head>
tags.
 E.g <style class="tagcolor" style="color:mediumblue">
ASU/Computing/Computer Scienc Internet Programing 9
 HTML lists are used to present list of information in well formed
and semantic way. There are three types
Unordered list — Used to create a list of related
items, in no particular order.
Ordered list — Used to create a list of related
items, in a specific order.
Description list — Used to create a list of terms
and their descriptions.
 An unordered list created using the <ul> element, and each list
item starts with the <li> element.
 The list items in unordered lists are marked with bullets.
ASU/Computing/Computer Scienc Internet Programing 10
 Here's an example:
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
 An ordered list created using the <ol> element, and each list item starts
with the <li> element.
 Ordered lists are used when the order of the list's items is important.
 The list items in an ordered list are marked with numbers.

ASU/Computing/Computer Scienc Internet Programing 11


 Here's an example:
<ol>
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li>
<li>Look around and go</li>
</ol>
2.7 Linking between pages
 Linking in HTML code is done with the anchor tag, the <A> tag. The letter "A"
in the tag is then followed by an attribute. For a link to another web page, the
"A" is followed by "HREF".
 Take a look at this example, which is a link to the popular search engine
Google:
<A HREF = "http://www.google.com/">Google Search Engine</A>

ASU/Computing/Computer Scienc Internet Programing 12


 A file path specifies the location of a file inside a web folder
structure. Its like an address of a file which helps the web
browser to access the files. File paths are used to link
external resources such as images, videos, style sheets,
JavaScript, displaying other web pages etc.
 To insert a file in a web page its source must be known. For
example, the syntax (<img src=” ” alt=” “>) is used to insert
an image file, where the path of the file is mentioned in the
source (src).
File paths are of two types:
 Absolute File Paths Relative File Paths
ASU/Computing/Computer Scienc Internet Programing 13
 Absolute File Paths: It describes the full address(URL) to access an internet file.
 <img src=”https://media.geeksforgeeks.org/wp-content/uploads/geek.png”
alt=”My Image”>
 Relative File Path: It describes the path of the file relative to the location of the
current web page file.
<img src="images/geeks.jpg" alt="My Image" style="width:400px">
File present in the same folder
 Link to a Graphic:- The simplest anchor link is to a file in the same
directory/folder as the document that calls it.
<a href="filename.gif">text that responds to link</a>
 where filename.gif is the name of a GIF image file.
 To link a local file the filename must be another HTML file. after the first > and
before the closing </a> symbols will be the "hypertext" that appears underlined
and "hyper."
ASU/Computing/Computer Scienc Internet Programing 14
 Now follow these steps to build an anchor link:
 Open up your template text file. Save inside HTML folder as index.html.
 What we're going to do is to place a hyperlink on our index page. When
this hyperlink is clicked we'll tell the browser to load a page
called about.html.We'll save this new about page in our pages folder.
 Open the index.html page. Insert the following line between the two
BODY tags:
<A HREF="pages/about.html">About this site</A>
 Your code look like this (we've added a TITLE):

ASU/Computing/Computer Scienc Internet Programing 15


 Create a new web page file as about.html and save inside
HTML/pages folder. So, we have a web page in the HTML folder and a
web page in the pages folder.We now need to link them together.
 Open up your code for the about.html page. For the about page, we
need to construct the correct HREF. <A HREF=“../index.html">Go
to the Home Page</A>
 Linking to the world: Internet sites :- The World Wide Web was built
on the principal of hypertext. Prior to hypertext, documents were all
standalone. They might refer to each other in text, but there was no
direct connection between one document and another.
 Links to web pages refer to the address, or URL (Uniform Resource
Locator), of the web page.

ASU/Computing/Computer Scienc Internet Programing 16


 URL's consist of various parts. For example, consider the following URL,
which is the home page for this course curriculum:
 http://www.washington.edu/accessit/webdesign/student/index.ht
m
 This URL consists of four parts, separated by forward slash (/):
 http:// - This is the Internet protocol, and tells the browser how to
connect with the server hosting the URL.
 www.washington.edu - Domain name where the file is located.
 /accessit/webdesign/student/ - folder or directory where the file is
located and index.htm - the filename.
 Open the index.htm file of your portfolio. And add the following line.
 When you link to external websites, you use an absolute path, as in the
following example:
<aASU/Computing/Computer
href ="http://www.asu.edu.et">school's
Scienc
name</a>
Internet Programing 17
 Note that the destination path (contained within quotes)
gives the browser complete directions to locate the web
page.
Address footer and E-mail
 The <address> tag defines the contact information for the
author/owner of a document or an article.
 If the <address> element is inside the <body> element, it
represents contact information for the document.
 If the <address> element is inside an <article> element, it
represents contact information for that article.
 The text in the <address> element usually renders in italic.
Most browsers will add a line break before and after the
address element.
ASU/Computing/Computer Scienc Internet Programing 18
 The <address> element will typically be included along with other
information in a <footer> element.
 The HTML format for the address tag might look like:
<address> <b>Page Title</b> <br>
Last Updated september 31, 2019 <br>
Web Page by My Name Here ([email protected]) <br>
<a href="http://www.abc.edu/">ABC
University</a><br>
</address>
 HTML inside the address tag is legal, so we might modify
it with bold tags, line breaks, and a hypertext link tag:
ASU/Computing/Computer Scienc Internet Programing 19
2.8 FONTS COLORS AND COLORFUL AND TEXTURED BACKG `ROUNDS
 The background-color property sets the background color of an
element.
 The background of an element is the total size of the element,
including padding and border.
 Using a background color and a text color that makes the text easy to
read.
 We can set the background and font color for a page:
<body bgcolor = “#000000”>
<font color = “#ffffff ”>

 HTML elements specify font information.


 Rendering of font style elements depends on the user agent. The
following is an informative description of the fonts used.
ASU/Computing/Computer Scienc Internet Programing 20
 TT: Renders as teletype or monospaced text.
 I: Renders as italic text style.
 B: Renders as bold text style.
 BIG: Renders text in a "large" font.
 SMALL: Renders text in a "small" font.
 STRIKE and S: Render strike-through style text.
 U: Renders underlined text.
 The following sentence shows several types of text:
<P><b>bold</b>,
<i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and
<big>big</big> and <small>small</small> text.
 These words might be rendered as follows:

ASU/Computing/Computer Scienc Internet Programing 21


 tables are common tools for arranging complex layout on a Web page
 a table divides contents into rows and columns
 by default, column entries are left-justified, so provide for alignment

<html>
<!-- comment Internet Programing 2019-->
<table>…</table> specify a table
<head>
<title>Tables</title> element
</head>

<body> <tr>…</tr> specify a row in the


<table>
<tr> table
<td>foo</td> <td>bar</td>
</tr>
<tr>
<td>bizbaz</td> <td>booboo</td>
<td>…</td> specify table data
</tr>
</table>
(i.e., each column entry in the
</body> table)
ASU/Computing/Computer
</html> Scienc Internet Programing 22
can have a border on tables using the
<html> BORDER attribute
<head>
<title>Table Layout</title> <table border=1>
</head> increasing the number makes the border
thicker
<body>
<table border=1> can control the horizontal & vertical
<tr align="center"> layout within cells
<td>foo<br>foo</td> <td align="center">
<td valign="top">bar</td> <td align="right">
</tr> <td valign="top">
<tr>
<td>bizbaz</td> <td valign="bottom">
<td>booboo</td> can apply layout to an entire row
</tr> <tr align="center">
</table>
</body> <tr valign="top">
</html>
ASU/Computing/Computer Scienc Internet Programing 23
<html>
<!-- comment Internet Programing 2008-->
by default, the table is sized
to fit the data
<head>
<title>Table Width</title> can override & specify the
</head> width of a table relative to the
page
<body>  <table width="60%">
<table width="100%"> useful for page footer –
<tr> set table width to 100%
<td>left-most 1st column: left-justified
<td align="right">right-most</td> 2nd column: right-justified
</tr>
</table>
</body>
</html>
ASU/Computing/Computer Scienc Internet Programing 24
<html>
<!-- Dave Reed page14.html 1/16/04 -->
can control the space between cells &
<head>
<title>Table Formatting</title> margins within cells
</head>  <table cellspacing=5>

<body>  <table cellpadding=5>


<table border=1 cellspacing=4 cellpadding=8>
<tr> can add headings
<th>HEAD1</th> <th>HEAD2</th> <th>HEAD3</th>  <th> is similar to <td> but displays
</tr> heading centered in bold
<tr>
can have data that spans more than
<td>one</td> <td>two</td> <td>three</td>
</tr>
<tr> one column
<td rowspan=2 align="center"> four </td>
<td colspan=2>
<td colspan=2 align="center"> five </td>
</tr>
similarly, can span more than one row
<tr>
<td> six </td> <td> seven </td> <td rowspan=2>
</tr>
</table>
</body>
</html>
ASU/Computing/Computer Scienc Internet Programing 25
 An HTML form is a section of a document containing normal content, markup,
special elements called controls (checkboxes, radio buttons, menus, etc.), and labels
on those controls.
 Users "complete" a form by modifying its controls (entering text, selecting menu
items, etc.), before submitting the form to an agent for processing (e.g., to a Web
server, to a mail server, etc.)
<FORM action = “URI” -- server-side form handler
method = (GET|POST) -- HTTP method used to submit the form
enctype = “ContentType” -- "application/x-www-form-urlencoded"
accept = “ContentTypes” -- list of MIME types for file upload
Form element controls
</Form>
ASU/Computing/Computer Scienc Internet Programing 26
 enctype = content-type specifies the content type used to submit the form
to the server (when the value of method is "post").
 The default value for this attribute is "application/x-www-form-urlencoded".
 The value "multipart/form-data" should be used in combination with
the INPUT element, type = "file".
 accept = content-type-list specifies a comma-separated list of content types
that a server processing this form will handle correctly.

ASU/Computing/Computer Scienc Internet Programing 27


HTTP POST

 passes data encoded in the HTTP data stream


 more secure method to pass data,
 can be harder to implement..

<form name="ButtonForm" method="POST" .............>


....................
</form>

ASU/Computing/Computer Scienc Internet Programing 30


 There are many types of input elements. Input elements are defined between the
form tags. To use an input element, use an input tag and specify the type of the
input.
 Text fields  Commonly used form elements
 Radio buttons includes:
 Check boxes  Text fields
 Submit buttons  Text area
 Password field  Radio buttons
 Button
 Checkboxes
 Hidden field
 Submit buttons
 File input type
 Reset buttons  Dropdown list
ASU/Computing/Computer Scienc Internet Programing 31
 Used when you want the user to type letters, number, etc.
<form>
First name: <input type="text" name= "firstname"> <br/>
Last name: <input type="text" name="lastname"> </form>

ASU/Computing/Computer Scienc Internet Programing 32


 When user clicks on the “Submit” button, the content of the form is sent to
server side page.
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user"/><br>
Password: <input type ='password' id ="pwd" name ='pwdd'/><br>
<input type="submit" value="Submit">
</form>

ASU/Computing/Computer Scienc Internet Programing 33


 Used when you want the user to select one or more options of a limited number
of choices.
<form> Mark all you use for travel: <br />
<input type="checkbox" name="bike" value ="bike"> Bike </input>
<br>
<input type="checkbox" name="car" value="car"> Car </input>
<br>
<input type="checkbox" name="Publictrans" value="PublicTrans"> Public Transport
</input>
</form>

ASU/Computing/Computer Scienc Internet Programing 34


 Used when you want the user to select one of a limited number of choices.
<form>
<table>
<tr><td>Gender:</td>
<td>
<input id="Radio1" name ="radio1" type="radio" checked= "checked"> Male</input>
</td>
<td>
<input id="Radio2" name ="radio1" type="radio"> Female </input>
</td></tr></table>
</form>

ASU/Computing/Computer Scienc Internet Programing 35


 Used when you want user to respond with
one specific answer with choices you
given.
Latest Education:<br>
<select id="Edu">
<option value="BSC">BSc</option>
<option value ="BA">BA</option>
<option value ="MSC">MSc</option>
<option value ="MA">MA</option>
<option value ="Certificate">Professional
Certificate</option>
<option value ="oth">others</option>
</select>
ASU/Computing/Computer Scienc Internet Programing 36
 HTML frames are used to divide your browser window into multiple
sections where each section can load a separate HTML document.
 A collection of frames in the browser window is known as a frameset.
The window is divided into frames in a similar way the tables are
organized: into rows and columns.
Disadvantages of Frames
 There are few drawbacks with using frames, so it's never
recommended to use frames in your webpages.
 Some smaller devices cannot cope with frames often because their
screen is not big enough to be divided up.
 Sometimes your page will be displayed differently on different
computers due to different screen resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame technology.
ASU/Computing/Computer Scienc Internet Programing 37
 To use frames on a page we use <frameset> tag instead of <body> tag.
The <frameset> tag defines, how to divide the window into frames.
 The rows attribute of <frameset> tag defines horizontal frames
and cols attribute defines vertical frames. Each frame is indicated by
<frame> tag and it defines which HTML document shall open into the
frame.
 Example
<frameset rows = "10%,80%,10%"> <frame name = "top" src =
"/html/top_frame.htm" /> <frame name = "main" src =
"/html/main_frame.htm" /> <frame name = "bottom" src =
"/html/bottom_frame.htm" />

ASU/Computing/Computer Scienc Internet Programing 38


<html>
 One of the most popular
uses of frames is to place <head>
navigation bars in one <title>HTML Target Frames</title>
frame and then load main </head>
pages into a separate frame.
<frameset cols = "200, *">
 Let's see following example <frame src = "/html/menu.htm" name =
where a test.htm file has "menu_page" />
following code <frame src = "/html/main.htm" name =
"main_page" />
<noframes>
<body>Your browser does not support
frames.</body>
</noframes>
</frameset>
ASU/Computing/Computer Scienc Internet Programing 39
</html>
<html>
 Here, we have created two columns
to fill with two frames. The first <body bgcolor = "#4a7d49">
frame is 200 pixels wide and will <a href = "http://www.google.com" target =
contain the navigation menu bar "main_page">Google</a>
implemented by menu.htm file. <br />
The second column fills in
remaining space and will contain <br />
the main part of the page and it is <a href = "http://www.microsoft.com" target =
implemented by main.htm file. "main_page">Microsoft</a>
 For all the three links available in <br />
menu bar, we have mentioned <br />
target frame as main_page, so
whenever you click any of the links <a href = "http://news.bbc.co.uk" target =
"main_page">BBC News</a>
in menu bar, available link will open
in main page. </body>

 Following is the content of </html>


ASU/Computing/Computer Scienc Internet Programing 40
menu.htm file
 Following is the content of main.htm file

<html>
When we load test.htm file, it produces
<body bgcolor = "#b5dcb3"> following result
<h3>This is main page and
content from any link will be
displayed here.</h3>
<p>So now click any link and see
the result.</p>
</body>
</html>

ASU/Computing/Computer Scienc Internet Programing 41


 Cascading Style Sheets (CSS) describe how documents are
presented on screens, in print, or perhaps how they are
pronounced.
 Cascading Style Sheets (CSS) provide easy and effective
alternatives to specify various attributes for the HTML tags.
 Using CSS, you can specify a number of style properties for
a given HTML element.
 Each property has a name and a value, separated by a colon
(:). Each property declaration is separated by a semi-colon
(;).
 First let's consider an example of HTML document which
makes use of <font> tag and associated attributes to specify
text color and font size
ASU/Computing/Computer Scienc Internet Programing 42
<!DOCTYPE html> We can re-write above example with the help of
Style Sheet as follows.
<html>
<html>
<head>
<head>
<title>HTML CSS</title>
<title>HTML CSS</title>
</head>
</head>
<body>
<body>
<p style = "color:green; font-size:24px;"
<p><font color = "green" size >Hello, World!</p>
= "5">Hello, World!</font></p>
</body>
</body>
</html>
</html>

ASU/Computing/Computer Scienc Internet Programing 43


 Style types mainly include:
• Font
• Color
• Spacing

 The following short style sheet, sets the text color of a paragraph to
green and surrounds it with a solid red border:
P.special {
color : green;
border: solid red;
}
 Authors may link this style sheet to their source HTML document with the LINK
element:
<LINK href="special.css" rel="stylesheet" type="text/css">
ASU/Computing/Computer Scienc Internet Programing 44
 Style Sheet Rules:- CSS has a simple syntax and uses a number of
English keywords to specify the names of various style properties.
 A style sheet consists of a list of rules. Each rule or rule-set consists of
one or more selectors, and a declaration block.
 CSS selectors:- Selectors declare which part of the markup a style
applies to by matching tags and attributes in the markup itself.
 Selectors may apply to the following:
- all elements of a specific type, e.g. the second-level
headers h2
 elements specified by attribute, in particular:
 id: an identifier unique within the document
 class: an identifier that can annotate multiple elements in a
document
ASU/Computing/Computer Scienc Internet Programing 45
You can use CSS in three ways in your HTML document
 External Style Sheet − Define style sheet rules in a separate .css file
and then include that file in your HTML document using HTML <link>
tag.
 Internal Style Sheet − Define style sheet rules in header section of
the HTML document using <style> tag.
 Inline Style Sheet − Define style sheet rules directly along-with the
HTML elements usingstyle attribute.

ASU/Computing/Computer Scienc Internet Programing 46


External Style Sheet
 If you need to use your style sheet to various pages, then its always
recommended to define a common style sheet in a separate file. A
cascading style sheet file will have extension as .css and it will be
included in HTML files using <link> tag.
 Consider we define a style sheet file style.css which has following rules
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}
ASU/Computing/Computer Scienc Internet Programing 47
 Now let's make use of the <html>
above external CSS file in <head>
our following HTML <title>HTML External CSS</title>
document. <link rel = "stylesheet" type =
"text/css" href = "/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is
green</p>
<p class = "thick green">This is thick
and green</p>
</body>
ASU/Computing/Computer Scienc Internet Programing </html> 48
<html>
<head>
Internal Style Sheet <title>HTML Internal CSS</title>

 If you want to apply Style Sheet


<style type = "text/css">
rules to a single document only,
.red {
then you can include those rules in
header section of the HTML color: red; }
document using <style> tag. .thick{
font-size:20px; }
 Rules defined in internal style .green {
sheet overrides the rules defined in color:green; }
an external CSS file. </style>
 Let's re-write above example once </head>
again, but here we will write style <body>
sheet rules in the same HTML <p class = "red">This is red</p>
document using <style> tag <p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
ASU/Computing/Computer Scienc Internet Programing </body> 49
</html>
<html>

Inline Style Sheet <head>


 You can apply style sheet rules <title>HTML Inline CSS</title>
directly to any HTML element </head>
using style attribute of the relevant
tag. This should be done only when <body>
you are interested to make a <p style = "color:red;">This is red</p>
particular change in any HTML
element only. <p style = "font-size:20px;">This is
thick</p>
 Let's re-write above example once
again, but here we will write style <p style = "color:green;">This is
sheet rules along with the HTML green</p>
elements using style attribute of <p style = "color:green;font-
those elements. size:20px;">This is thick and green</p>
</body>
ASU/Computing/Computer Scienc
</html>
Internet Programing 50
 When the user agent wants to render a document, it needs to find
values for style properties, e.g. the font family, font style, size, line
height, text color and so on.
 The exact mechanism depends on the style sheet language, but
the following description is generally applicable:
 The cascading mechanism is used when a number of style rules
all apply directly to an element.
 The mechanism allows the user agent to sort the rules by
specificity, to determine which rule to apply.

ASU/Computing/Computer Scienc Internet Programing 51


 If no rule can be found, the next step depends on whether the style
property can be inherited or not.
 If the property can be inherited, the user agent examines the
immediately enclosing element to see if a rule applies to that.
 This process continues until an applicable rule is found. This
mechanism allows style sheets to be specified compactly.
 For instance, authors may specify the font family for all elements
within the BODY by a single rule that applies to the BODY element.

ASU/Computing/Computer Scienc Internet Programing 52


 XML stands for Extensible Markup Language. It is a text-based markup
language derived from Standard Generalized Markup Language
(SGML).
 XML tags identify the data and are used to store and organize the data,
rather than specifying how to display it like HTML tags, which are used to
display the data.
 XML is not going to replace HTML in the near future, but it introduces
new possibilities by adopting many successful features of HTML.
 There are three important characteristics of XML that make it useful in a
variety of systems and solutions −
 XML is extensible − XML allows you to create your own self-descriptive tags.
 XML carries the data, does not present it − XML allows you to store the data irrespective of
how it will be presented.
 XML is a public standard − XML was developed by an organization called the World Wide
Web Consortium (W3C) and is available as an open standard.

ASU/Computing/Computer Scienc Internet Programing 53


 a markup language is a set of symbols that can be placed in the text
of a document to demarcate and label the parts of that document.
 Following example shows how XML markup looks, when embedded
in a piece of text −
<message>
<text>Hello, world!</text>
</message>
 This snippet includes the markup symbols, or the tags such as
<message>...</message> and <text>... </text>. The tags
<message> and </message> mark the start and the end of the XML
code fragment. The tags <text> and </text> surround the text Hello,
world!.

ASU/Computing/Computer Scienc Internet Programing 54


 The following diagram depicts the syntax rules to write different types of
markup and text in an XML document.

ASU/Computing/Computer Scienc Internet Programing 55


XML Declaration
 The XML document can optionally have an XML declaration. It is written
as follows −
<?xml version = "1.0" encoding = "UTF-8"?>
 Where version is the XML version and encoding specifies the character
encoding used in the document.
Syntax Rules for XML Declaration
 The XML declaration is case sensitive and must begin with "<?xml>"
where "xml" is written in lower-case.
 If document contains XML declaration, then it strictly needs to be the
first statement of the XML document.
 The XML declaration strictly needs be the first statement in the XML document.

ASU/Computing/Computer Scienc Internet Programing 56


Tags and Elements
 An XML file is structured by several XML-elements, also called XML-
nodes or XML-tags. The names of XML-elements are enclosed in
triangular brackets < > like <element>
XML Attributes
 An attribute specifies a single property for the element, using a
name/value pair. An XML-element can have one or more attributes.
For example −
<a href = "http://www.tutorialspoint.com/">Tutorialspoint!</a>

ASU/Computing/Computer Scienc Internet Programing 57


 An XML document is a basic unit of XML information
composed of elements and other markup in an orderly
package. An XML document can contains wide variety of
data. For example, database of numbers, numbers
representing molecular structure or a mathematical
equation.
 A simple document is shown in the following example −
<?xml version = "1.0"?>
<contact-info>
<name>use any name</name>
<company>Company Name</company>
<phone>(011) 123-4567</phone>
</contact-info>

ASU/Computing/Computer Scienc Internet Programing 58

You might also like