Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.



No description

Junaid Nazir

on 8 April 2016

Comments (0)

Please log in to add your comment.

Report abuse


 W W W – World Wide Web.
 HTML – HyperText Markup Language –The Language of Web Pages on theWorld Wide Web.
HTML is a text formatting language.
HTTP -- HyperText Transport Protocol, layered on top of TCP.
URL – Uniform Resource Locator.
 Browser – A software program which isused to show web pages.
Training Overveiw
Are you new to Web design? Not sure how to update your Web site? Join your peers in this introductory workshop that explains the Web design process at Sacramento State and contains useful tips to guide you as you create and implement your Web pages. Topics include: how browsers display Web pages, the Web guidelines and process at Sacramento State, how to
organize your Web site, ways to evaluate your Web site, and resources available to you.

Training Prerequisites

Individuals taking this workshop should have basic computer skills, knowledge of the Web, basic Web browser skills, and the ability to effectively work in the Windows environment.

Why Web Accessibility is Important
The Web is an increasingly important resource in many aspects of life: education, employment, government, commerce, health care, recreation, and more. It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with disabilities. An accessible Web can also help people with disabilities more actively participate in society.
The Web offers the possibility of unprecedented access to information and interaction for many people with disabilities. That is, the accessibility barriers to print, audio, and visual media can be much more easily overcome through Web technologies.
The document "Social Factors in Developing a Web Accessibility Business Case for Your Organization" discusses how the Web impacts the lives of people with disabilities, the overlap with digital divide issues, and Web accessibility as an aspect of corporate social responsibility.

Training Objectives

Participants attending this workshop will:
▪ Review the Sacramento State Web guidelines.
▪ Attain a beginning understanding of the Web publishing process.
▪ Organize a sample Web site.
▪ Learn how to evaluate a Web site.
▪ Discover where to find Web design resources.

What is WebSite

A website is a collection of Web pages, images, videos or other digital assets that is hosted on one or several Web server(s), usually accessible via the Internet, cell phone or a LAN.
The definition of web page is a document, typically written in HTML, which is almost always accessible via HTTP, a protocol that transfers information from the Web server to display in the user's Web browser.Web accessibility encompasses all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities. The document "How People with Disabilities Use the Web" describes how different disabilities affect Web use and includes scenarios of people with disabilities using the Web.

“Normal text” surrounded by bracketed tags that tell browsers
how to display web pages Pages end with “.htm” or “.html”
 HTML Editor – A word processor that has been specialized to make the writing of HTML documentsmore effortless.

Codes enclosed in brackets
 Usually paired

<TITLE>My Web Page</TITLE>
 Not case sensitive
<TITLE> = <title> = <TITLE>
Choosing Text Editor
HTML Editors are excellent tools forexperienced web developers; however; itis important that you learn and understand the HTML language so that you can editcode and fix “bugs” in your pages.
 For this Course, we will focus on using thestandard Microsoft Windows text editors,NotePad. We may use also textpad.
Starting Notepad
NotePad is the standard text editor thatcomes with the microsoft windowsoperating system. To start Notepad in windows 9x,
window XP or 7 follow the steps bellow:
 Click on the “Start” button located onyour Windows task bar.
 Click on “Programs” and then click on the directory menu labeled
 Locate the shortcut “NotePad” and clickthe shortcut once.
HTML Page Creation & Editing
In this chapter you will learn to create HTML
pages with a standard text editor.
Upon completing this section, you should
be able to
1. Choose a Text Editor.
2. Create a Basic Starting Document.
3. Understand and set Document Properties.
4. View Your Results in a Browser.
Creating a Basic Starting Document
<TITLE>Federal Urdu University</TITLE>
This is what is displayed.
Creating a Basic Starting Document
The HEAD of your document point to above
window part. The TITLE of your document
appears in the very top line of the user’s
browser. If the user chooses to “Bookmark”
your page or save as a “Favorite”; it is the
TITLE that is added to the list.
The text in your TITLE should be as
descriptive as possible because this is what
many search engines, on the internet, use for
indexing your site.
Previewing Your Work
Once you have created your basic starting
document and set your document properties it
is a good idea to save your file.
 To save a file, in NotePad, follow these steps:
1. Locate and click on the menu called “File”.
2. Select the option under File Menu labeled
“Save As”.
3. In the “File Name” text box, type in the entire
name of your file (including the extension
name .html).
Headings, Paragraphs, Breaks & Horizontal Rules
In this chapter you will add headings to your page, insert
paragraphs, add some breaks, and add horizontal
Upon completing this section, you should be able to
1. List and describe the different Heading elements.
2. Use Paragraphs to add text to a document.
3. Insert breaks where necessary.
4. Add a Horizontal Rule.
Headings, <Hx> </Hx>
Inside the BODY element, heading elements
H1 through H6 are generally used for major
divisions of the document. Headings are
permitted to appear in any order, but you will
obtain the best results when your documents
are displayed in a browser if you follow these
1. H1: should be used as the highest level of heading, H2
as the next highest, and so forth.
2. You should not skip heading levels: e.g., an H3 should
not appear after an H1, unless there is an H2 between
Headings, <Hx> </Hx>
<TITLE> Example Page</TITLE>
<H1> Heading 1 </H1>
<H2> Heading 2 </H2>
<H3> Heading 3 </H3>
<H4> Heading 4 </H4>
<H5> Heading 5 </H5>
<H6> Heading 6 </H6>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraphs, <P> </P>
Paragraphs allow you to add text to a
document in such a way that it will
automatically adjust the end of line to suite
the window size of the browser in which it
is being displayed. Each line of text will
stretch the entire length of the window.
Paragraphs, <P> </P>
<TITLE> Example Page</TITLE>
<BODY></H1> Heading 1 </H1>
<P> Paragraph 1, ….</P>
<H2> Heading 2 </H2>
<P> Paragraph 2, ….</P>
<H3> Heading 3 </H3>
<P> Paragraph 3, ….</P>
<H4> Heading 4 </H4>
<P> Paragraph 4, ….</P>
<H5> Heading 5 </H5>
<P> Paragraph 5, ….</P>
<H6> Heading 6</H6>
<P> Paragraph 6, ….</P>
Heading 1
Paragraph 1,….
Heading 2
Paragraph 2,….
Heading 3
Paragraph 3,….
Heading 4
Paragraph 4,….
Heading 5
Paragraph 5,….
Heading 6
Paragraph 6,….
Line Break, <BR>
Line breaks allow you to decide where the text
will break on a line or continue to the end of the
 A <BR> is an empty Element, meaning that it
may contain attributes but it does not contain
 The <BR> element does not have a closing tag.
Break, <BR>
<TITLE> Example Page</TITLE>
<H1> Heading 1 </H1>
<P>Paragraph 1, <BR>
Line 2 <BR> Line 3 <BR>….
Heading 1
Paragraph 1,….
Line 2
Line 3
Horizontal Rule, <HR>
The <HR> element causes the browser to display a horizontal line (rule) in your document.
<HR> does not use a closing tag, </HR>.

Horizontal Rule, <HR>
Horizontal Rule, <HR>
<TITLE> Example Page</TITLE>
<H1> Heading 1 </H1>
<P>Paragraph 1, <BR>
Line 2 <BR>
<HR>Line 3 <BR>

Character Formatting
In this chapter you will learn how to enhance your page with Bold, Italics, and other character formatting options.

Upon completing this section, you should be able to Change the color and size of your text.
Use Common Character Formatting Elements.
Align your text.
Add special characters.
Use other character formatting elements.

Bold, Italic and other Character Formatting Elements
<FONT SIZE=“+2”> Two sizes bigger</FONT>
The size attribute can be set as an absolute value from 1 to 7 or as a relative value using the “+” or “-” sign. Normal text size is 3 (from -2 to +4).
<B> Bold </B>
<I> Italic </I>
<U> Underline </U>
Color = “#RRGGBB” The COLOR attribute of the FONT element. E.g.,
<FONT COLOR=“#RRGGBB”>this text has color</FONT>
<PRE> Preformatted </PRE>
Text enclosed by PRE tags is displayed in a mono-spaced font. Spaces and line breaks are supported without additional elements or special characters.

Bold, Italic and other Character Formatting Elements
<P> <FONT SIZE=“+1”> One Size Larger </FONT> - Normal –
<FONT SIZE=“-1”> One Size Smaller </FONT> <BR>
<B> Bold</B> - <I> italics</I> - <U> Underlined </U> -
<FONT COLOR=“#FF0000”> Colored </FONT> <BR>
<EM> Emphasized</EM> - <STRONG> Strong </STRONG> - <TT> Tele Type </TT> <BR>

Some elements have attributes for alignment (ALIGN) e.g.
Headings, Paragraphs and Horizontal Rules.

The Three alignment values are :
Will center elements.

In this chapter you will learn about images and how to place images in your pages.
Upon completing this section, you should be able to
Add images to your pages.


<IMG>This element defines a graphic image on the page.
Image File (SRC:source): This value will be a URL (location of the image) E.g. http://www.domain.com/dir/file.ext or /dir/file.txt.
Alternate Text (ALT): This is a text field that describes an image or acts as a label. It is displayed when they position the cursor over a graphic image.
Alignment (ALIGN): This allows you to align the image on your page.

Width (WIDTH):
is the width of the image in pixels.
Height (HEIGHT):
is the height of the image in pixels.
Border (BORDER):
is for a border around the image, specified in pixels.
is for Horizontal Space on both sides of the image specified in pixels. A setting of 5 will put 5 pixels of invisible space on both sides of the image.
is for Vertical Space on top and bottom of the image specified in pixels. A setting of 5 will put 5 pixels of invisible space above and bellow the image.

Some Examples on images
1) <IMG SRC=“jordan.gif“ border=4>
2) <IMG SRC=" jordan.gif" width="60" height="60">
3) <IMG SRC=“jordan.gif" ALT="This is a text that goes with the image">
4) <IMG SRC=" jordan.gif “ Hspace="30" Vspace="10" border=20>
5) < IMG SRC =" jordan.gif“ align="left">
blast blast blast blast blast

Anchors, URLs and Image Maps
In this chapter you will learn about Uniform Resource Locator, and how to add them as Anchor or Links inside your web pages.
Upon completing this section, you should be able to.
Insert links into documents.
Define Link Types.
Define URL.
List some commonly used URLs.
Plan an Image Map.

1) The tags used to produce links are the
. The <A> tells where the link should start and
indicates where the link ends. Everything between
these two will work as a link.
2) The example below shows how to make the word
Here work as a link to yahoo.
Click <
go to yahoo.

1) The tags used to produce links are the <A>
and </A>. The <A> tells where the link should start and
the </A> indicates where the link ends. Everything between
these two will work as a link.
2) The example below shows how to make the word
Here work as a link to yahoo.
Click <A HREF="http://www.yahoo.com">here</A> to
go to yahoo.

Internal Links
Internal Links : Links can also be created inside large documents to simplify navigation. Today’s world wants to be able to get the information quickly. Internal links can help you meet these goals.
Select some text at a place in the document that you would like to create a link to, then add an anchor to link to like this:
<A NAME=“bookmark_name”></A>
The Name attribute of an anchor element specifies a location in the document that we link to shortly. All NAME attributes in a document must be unique.
Next select the text that you would like to create as a link to the location created above.
<A HREF=“#bookmark_name”>Go To Book Mark</A>

E-Mail (Electronic Mail)
E.g. mailto:kmf@yahoo.com
The type of service is identified as the mail client program. This type of link will launch the users mail client.
The recipient of the message is kmf@yahoo.com
<A HREF=“mailto:kmf@yahoo.com”>Send me
More Information </A>

In this chapter you will learn that tables have many uses in HTML.
Upon completing this section, you should be able to:
Insert a table.
Explain a table’s attributes.
Edit a table.
Add a table header.

The <TABLE></TABLE> element has four sub-elements:
Table Row<TR></TR>.
Table Header <TH></TH>.
Table Data <TD></TD>.
The table row elements usually contain table header elemen
ts or table data elements.

Tables Attributes
Some browsers support background colors in a table.
you can specify the table width as an absolute number of pixels or a percentage of the document width. You can set the width for the table cells as well.
You can choose a numerical value for the border width, which specifies the border in pixels.
Cell Spacing represents the space between cells and is specified in pixels.
Cell Padding is the space between the cell border and the cell contents and is specified in pixels.
tables can have left, right, or center alignment.

Table Caption
A table caption allows you to specify a line of text that will appear centered above or bellow the table.


The Caption element has one attribute ALIGN that can be either TOP (Above the table) or BOTTOM (below the table).

Table Header
Table Data cells are represented by the TD element. Cells can also be TH (Table Header) elements which results in the contents of the table header cells appearing centered and in bold text.

Basic Table Code
<TABLE BORDER=1 width=50%>
<CAPTION> <h1>Spare Parts <h1> </Caption>
<TR><TH>Stock Number</TH><TH>Description</TH><TH>List Price</TH></TR>
<TR><TD bgcolor=red>3476-AB</TD><TD>76mm Socket</TD><TD>45.00</TD></TR>
<TR><TD >3478-AB</TD><TD><font color=blue>78mm Socket</font> </TD><TD>47.50</TD></TR>
<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR>

Full transcript