Shewa Berhan College
Web Development and Database
Administration
Level I
Module Title: Creating a Simple Markup
Language Document
Prepared by:
Anteneh Assress (BSc in computer science)
Debre Birhan, Ethiopia.
Acronym
HTML-------------------HyperText Markup Language
CSS-------------------Cascading Style Sheets
XHTML-------------------Extensible HyperText Markup Language
XML-------------------eXtensible Mark-up Language
WML -------------------Wireless Mark-up Language
DHTML-------------------Dynamic HyperText Markup Language
SGML -------------------Standard Generalized Mark-up Language
SVG-------------------Scalable Vector Graphics
XBRL-------------------eXtensible Business Reporting Language
i
Unit One
Review Requirements
After completion of this learning guide, you will be able to:
Review the requirements of the document
Select the appropriate Mark-up language based on organizational standards
Review document structure
The first step in building a simple website is to clarify why the website is needed and what
functions it needs to perform.
Web site:
It is the public face of an organisation; its quality is seen to reflect the quality of the
organisation itself.
Project documentation:
It is developed in conjunction with the client and it outlines what the client wants and the
product should exist on completion.
Project brief :
It is used to work out, define and clarify the client’s needs, and it is devised once a contract is
in place to develop a web site.
It is the starting point for a final check of the site.
Style guide:
Describes the desired ‘look and feel’ of the web site and lists the elements needed to
consistently produce the desired effect.
Set out requirements for design elements such as:
colours, fonts and page layout, placement of logos or other significant graphics
1
Technical specifications
Describe the technology the web site requires or should work on.
Table 1.1: Examples of requirements for technical specifications
Security model for
Client requirements Server requirements
system
Preferred web browsers Software User profiles
Operating systems Hardware Roles
Memory Backup Permission lists
Internet connection speeds (min) Administration Operating system
Preferred resolution Redundancy and security
Plug-ins recovery
Programming tools Programming languages
Microsoft Visual Studio Cold fusion
Sun Microsystems’ Java Studio Visual basic
Cascading style sheets
JavaScript
Markup Languages for the Web
Markup Languages for the Web are: HTML, XML, XHTML, and like.
A markup language
It is a combination of text and information describing the text.
A. HTML (HyperText Markup Language)
It is a very simple language used to describe the logical structure and layout of a web
document.
Describes which parts of the text the web browser should emphasize, which text should be
considered body text and which text should be headings.
Used to format and display the data.
B. XML (Extensible Mark-up Language)
It is very versatile Meta language (a language that describes another language) is used to
describe what data is rather than just the way it looks.
2
Used to describe the data.
Languages for handheld devices such as mobile phones are based on XML.
C. XHTML (Extensible HyperText Markup Language)
It is a combination of HTML and XML.
World Wide Web Consortium (W3C) defines XHTML as the latest version of HTML.
D. DHTML(dynamic Mark-up Language)
It is actually a combination of HTML (or XHMTL), JavaScript and Cascading Style Sheets.
Used to create dynamic content such as animation, pop-up windows and drop down menus.
Produce a response to a user’s action (such as a mouse click) without having to communicate
with the server to have the page resent to the user’s browser.
E. WML (Wireless Mark-up Language)
It is used for handheld devices such as mobile phones and PDAs (Personal Digital
Assistants).
F. SGML (Standard Generalized Mark-up Language)
It is a metalanguage – perhaps ‘the’ metalanguage, as all web mark-up languages are based
on it. HTML.
G. Other mark-up languages
MathML XBRL (eXtensible Business
DocBook Reporting Language)
SVG (Scalable Vector Graphics) MusicXML
Open eBook RSS
To building a simple website you need to understand purpose of website, audience and design
element.
Factors that affect your choice of mark-up language may be:
website purpose, stoke holders, audience need, standards, project constraints, technology & skill
Standards for the web are developed by the World Wide Web Consortium (W3C).
website storyboard:
It is best practice to create website storyboard before you start creating individual web
pages.
The home page should be called [Link] or [Link].
3
Figure ፡ Simple Site Structure
Figure ፡ Web Page Layout
Folder structure:
Before starting out on a website project, you should create a folder structure to contain
all files.
Minimum best practice for website development is that you have a 'root' folder to store your pages
and a separate folder under the 'root' folder, usually called images or graphics.
Absolute address:
File can be located from anywhere on the Web.
<a href="[Link]
Relative address:
File can be located in the same folder as the originating page.
<a href="[Link]"> or <img src="images/picture_01.gif">
4
Figure: Folders within a website folder
Naming your files፡
Simple rules which you must follow when creating or naming your files and folders for
websites:
Use underscores or remove spaces No special characters
Use lowercase Less than 32 characters
5
Unit-2
Create Document Structure
After completion of this learning guide, you will be able to:
Create and assign the basic elements of the document
Markup sections of the document to depict the structure
Write simple markup language
Figure: webpage structure
HTML stands for Hypertext Markup Language.
Hypertext:
Text that you click to jump from document to document.
This is a reference to the ability of Web pages to link to one another.
Markup:
Tags that apply layout and formatting conventions to plain text.
Language:
Reference to the fact that HTML is considered a programming language.
You identify your file as being HTML by saving it with a special extension on the end of the file
name .htm or .html.
Most tags in HTML are also completed with a similar tag with a forward slash in it to specify an
end to the formatting.
<html> is an opening tag, but </html> is a closing tag.
6
HTML tags:
Is a keyword or given name that is defined to text editor.
Are not case-sensitive it's a good idea to get in the habit of using lowercase.
Any document should recommended to starts with a heading.
<br> tag : is a Line break tag, anything following it starts from the next line.
Examples of empty element :< img.../>, <hr > and <br > elements. These are known as void
elements (empty elements). Where you do not need opening and closing tags, as there is nothing
to go in between them.
<hr> tag: is a Horizontal lines that used to visually break-up sections of a document.
<hr> tag creates a line from the current position in the document to the right margin and breaks
the line accordingly.
The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the
HTML used in the document. <!DOCTYPE html>
The <head> tag is a container of various important tags like፡
<title> <link>
<base> <style>
<script> <meta> <noscript>tas.
The <title> tag is used for specifying the title of the HTML document. <title>HTML Title Tag
Example</title>
The <base> tag is used for specifying the base URL for all relative URLs in a page. <base
href="[Link] />
The <link> tag is used to specify relationships between the current document and external
resource. <link rel="stylesheet" type="text/css" href="/css/[Link]" />
The <style> tag is used to specify style sheet for the current HTML document. <style
type="text/css">
.myclass{
background-color: #aaa;
padding: 10px; }
</style>
7
The <script> tag is used to include either external script file or to define internal script for the
HTML document. <script type="text/JavaScript">
function Hello(){
alert("Hello, World"); }
</script>
The <meta> tag is used to provide such additional information. This tag is an empty element and
so does not have a closing tag but it carries information within its attributes.
<meta> tag is used to define such document properties as the author, the expiration date,
document keywords, and descriptions.
A meta tag can have following attributes in addition to core attributes:
You can use <meta> tag to specify important keywords related to the document and later
these keywords are used by the search engines while indexing your webpage for searching
purpose.
You can use <meta> tag to give information about when last time the document was updated.
A <meta> tag can be used to specify a duration after which your web page will keep
refreshing automatically.
You can use <meta> tag to store cookies on client side and later this information can be used
by the Web Server to track a site visitor. Good night with sweet dreams
You can use <meta> tag to specify character set used within the webpage.
To break text, you should use a nonbreaking space entity ( ) instead of a normal space.
Comment:
It is a piece of code which is ignored by any web browser. Comments help you and others
understand your code and increases code readability. <!-- ... --> tags.
An HTML element is defined by a starting tag. <p> it is paragraph</p>.
An attribute
It is used to define the characteristics of an HTML element and is placed inside the opening
tag.
All attributes are made up of two parts: a name and a value:
The name is the property you want to set.
8
The value is what you want the value of the property to be set and always put within
quotations.
Attribute names and attribute values are case-insensitive.
A. Core attributes
The four core attributes that can be used on the majority of HTML elements (although not all)
are:
Id Class
Title Style
a. Id Attribute
Can be used to uniquely identify any element within an HTML page.
b. Title attribute
Is displayed as a tooltip when cursor comes over the element or while the element is loading.
<h3 title="U">Underline</h3>
c. Class attribute
Used to associate an element with a SS, and specifies the class of element. class="className "
d. style attribute
Allows you to specify Cascading Style Sheet (CSS) rules within the element. <p style="font-
family: Times New Roman; color:#FF0000;">database</p>
B. Internationalization attributes
The Three internationalization attributes, which are available for most (although not all)
XHTML elements.
dir lang xml:lang
a. Dir attribute
Allows you to indicate to the browser about the direction in which the text should flow.
Ltr : Left to right (the default value). <html dir="ltr">
Rtl : Right to left (that are read right to left). <html dir="rtl">
b. lang attribute
Allows you to indicate the main language used in a document. <html lang="en">
c. xml:lang attribute
9
Is the XHTML replacement for the lang attribute.
C. Generic Attributes
Table 2.1: Attributes that are readily usable with many of the HTML tags.
Attribute Options Function
align right, left, center Horizontally aligns tags
Vertically aligns tags within an HTML element.
valign top, middle, bottom
numeric, hexidecimal, RGB Places a background color behind an element
bgcolor
values
Places a background image behind an element
background URL
Names an element for use with Cascading Style
id User Defined
Sheets.
Classifies an element for use with Cascading Style
class User Defined
Sheets.
Specifies the width of tables, images, or table cells.
width Numeric Value
Specifies the height of tables, images, or table cells.
height Numeric Value
title User Defined "Pop-up" title of the elements.
Bgcolor attribute: Places a background color behind an element. <body bgcolor=”#0033FF” >
Background attribute: Places a background image behind an element. <body
background=”images/[Link]”>
Shouldn’t start page titles with words like “The”. And any keyword that appears in the text of your
document shouldn’t be repeated more than seven times in that page.
The <body> tag has following attributes which can be used to set different colors:
bgcolor - sets a color for the background of the page.
text - sets a color for the body text.
alink - sets a color for active links or selected links.
link - sets a color for linked text.
10
vlink - sets a color for visited links - that is, for linked text that you have already clicked on.
All the browsers does not support rgb() property of color.
To view source code using Google Chrome: Right-Click on the Page ➪ Select View Page Source
or ctr+u.
To view source code using Internet Explorer: Right-Click on the Page ➪ Select View Source
Character entities are rendered numerically, beginning with an ampersand (&) and pound sign (#)
and ending with a semicolon.
type attribute: used to modify the style of list items.<ol type=”A”>
The default bullet style for ordered lists is typically a Arabic numerals.
The default bullet style for unordered lists is typically a small filled-in disc.
Start attribute: you define to specify the starting number or character in an ordered list.
src attribute: used to insert image file into webpage.
The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the
image cannot be displayed.
<embed> tag: easiest way to add video or sound to your web site .
<noembed> tag for the browsers which don't recognize the <embed> tag.
<bgsound> tag to play a soundtrack in the background of your webpage.
This tag is supported by Internet Explorer only.
This tag is having only two attributes loop and src.
Both these attributes have same meaning as explained above.
<bgsound src="/html/[Link]">
<noembed><img src="[Link]" ></noembed>
</bgsound>
The classid attribute: identifies which version of Java Plug-in to use on object tag.
HTML table
The border attribute: is an attribute of <table> tag and it is used to put a border across all the
cells.
background attribute; You can set background image for whole table or just for one cell.
bgcolor attribute: You can set background color for whole table.
cellspacing attribute: defines the width of the table border.
11
cellpadding attribute: represents the distance between cell borders and the content within a cell
on table.
colspan attribute: used to merge two or more columns into a single column.
rowspan attribute: used to merge two or more rows.
caption tag: used to define a title or explanation for the table and it shows up at the top of the
table.
<thead>tag: used to create a separate table header.
<tbody> tag: used to indicate the main body of the table.
<tfoot> tag: used to create a separate table footer.
[Link] : is the best file name for the homepage of a website.
12
Unit – 3
Validate Documents
After completion of this learning guide, you will be able to:
Validate markup language document against requirements
Validate markup language document in different browsers
Validate simple markup language document
There are a number of tests that can be performed to validate mark-up documents and web
sites:
Functional test Performance test
Compatibility test Regression test
Functional test : Confirming that the site meets client specifications.
Meeting client specifications: style or formatting, structure, position of web page.
Validation tools : The easiest and most thorough way to check that your mark-up code is correct
is to use one of the free validation tools available on the internet.: [Link], [Link],
and [Link]/tools/validator/.
Common validation errors : No DTD, Missing alt tags, Improper nesting of elements, Not
closing tags, Using spaces in document titles, Missing title, Missing title, Using upper case tags,
and Missing quotes.
All of these testing phases are part of the larger process of Quality Assurance (QA).
QA documentation allows testers and developers to accurately ensure that all concerns have been
addressed and avoids unnecessary and time-consuming double-checking.
Compatibility testing looks at a product to ensure that it will perform as expected in a range of
computing environments. For web developers this often means testing in a range of:
Browsers: Different bowsers can interpret mark-up code in different ways: Internet Explorer -
87%
Page margins - IE places the H1 text 2 pixels right and 7 pixels down from where Firefox
places the same text.
13
Paragraphs - paragraphs are spaced further apart in IE than Firefox.
Tables- table borders display slightly differently and table cells are more widely spaced in
IE.
Operating Systems (OS): Windows XP - 80%, …..
Display Resolutions: Computer resolution is measured in pixels. 1024 x 768 - 55%
Standards
Document Type Definition (DTD): All SGML and XML documents (including HTML and
XHTML) should include a Doctype reference to a DTD.
W3C: The recommendations from the World Wide Web Consortium (W3C): [Link] are
widely accepted as the international standards for web mark-up languages.
Performance testing is required for larger and more complex websites.
Performance testing may focus on:
Server capacity Database functions
Network capacity and connection speed Scalability
Regression testing is the cycle of testing that continues throughout a product's development.
Regression bugs are a common problem in multimedia and web development.
14
Basic tags
<!DOCTYE html>: Defines a document type and tells a document to the browser.
<html> : Root element of html page.
<head> : Contains metadata/ page information for the document.
<meta> : defines meta data about an HTML element.
<base> : Used to specify the base URL/target for all relative URLs in the document.
<title> : Used to define title of the page.
<body> : Represents the content of an HTML document.
<h1> to < h6> : Defines an heading levels from highest to lowest font size.
<p> : Defines the paragraph.
<img> : Embeds/inserts an image in the HTML document.
<br> : Inserts a single line break.
<hr> : Defines a horizontal line in the content.
<!-- --> : Defines a comment. And this comment is used to code readability.
Src=”url” : Source path ( URL/file name)
: Used to give a blank space in text line.
Formatting Text
<b> : Used to Bold text.
<i> : Used to Italic text.
<u> : Used to Underline text.
<del> : Used to Deleted text.
<mark> : Used to marked/highlight text.
<sub> : Used to subscript text.
<sup> : Used to superscript text.
<abbr> : Used to Abbreviation text.
15
<acronym> : Used to define acronym. But not supported in HTML5. Use <abbr> instead.
<address> : Used to define content information for the author of a document.
<bdo> : Used to overrides the current text direction.
<big> : Used to define big text. But not supported in HTML5. Use CSS instead.
<strong> : Used to define important text.
<small> : Used to define smaller text.
<samp> : Used to define simple output from a computer program.
<kbd> : Used to define keyboard input.
<pre> : Used to define preformatted text.
<q> : Used to define a short quotation.
<blockquote> : Used to define a section that is quoted from another source.
<cite> : Used to define the title of a work.
<code> : Used to define a piece of a computer code.
<dfn> : Used to specify a term that is going to be defined within the content.
<em> : Used to define emphasized text.
<ins> : Used to define a text that has been inserted in to a document.
<embed> : Used to embed/insert external content at the specified point in the document.
<object> : Used to define an embedded objects, such as audio, image, and video.
<marquee> : Used to define animation or slayed show the content.
Listing Text
<ol> : Used to ordered list.
<ul> : Used to unordered list.
<li> : Used to list items.
<dl> : Used to define description list.
<dt> : Used to define terms.
<dd> : Used to describe each term.
Style and Semantics
<style> Used to define style information for a document.
<div> : Used to define a division or a container.
<footer> : Used to define a footer for a document.
Table
<table> : Used to define a table.
16
<th> : Used to define a header cell in a table.
<tr> : Used to define a row in the table.
<td> : Used to define a cell in the table.
<caption> : Used to define a table caption.
<thead> : Used to group the header content in the table.
<tbody> : Used to group the body content in the table.
<tfoot> : Used to group the footer content in the table.
Audio/Video
<audio> : used to define a sound.
<video> : used to define a video or movie.
Links
<a> : Creates an hyperlink.
<link> : Used to define the relationship between a document and an external resource.
:mostly used to link to style sheet.
17
Task1: Heading level
18
Task 2:
19
Task 3: Special Characters.
20
Task 3: List items
21
Task 4: insert image, audio, and videos
22
Task 5. Insert table
Task 6: Trainers contact
23
24