interactive web design 1
Post on 14-Feb-2017
17 Views
Preview:
TRANSCRIPT
تصميم صفحات الويب التفاعلية
By Eng. Aws Nabeel
Email: aws@du.edu.om
http://www.aws-nabeel.com
2
TOPICS OF THE COURSEo Fundamentals of HTML (Hypertext Markup Language).
o CSS (Cascade Style Sheet).o PHP (PHP: Hypertext Preprocessor).o Database Fundamentals.o Xampp and its Purpose.o MySQL (Structure Query Language).o PHPMyAdmin.o Adobe Dreamweaver CS5.
3
WHAT IS THE INTERNET ?Internet is a network of computer networks
4
WHAT IS A WEB PAGE ?A Document Written in Plain Text with Formatting Instruction of HTML (Hypertext Markup Language).
5
WEB BROWSERS
Web pages are then displayed in web browsers with the correct formatting and content
6
WEB SITES
7
HTML
ImagesSWF, FLV
ADOBE DREAMWEAVER
8
PUBLISH TO A WEB SERVER
9
ACCESS YOUR WEB SITE
10
ACCESS YOUR WEB SITE
11
FIRST THING YOU NEED TO START A WEBSITE
12
PLANNING AND DESIGNING A WEBSITE. What is the goal of your website ?
Depending on the goal, result will be the content of the website.
Can the user find the website ?
Is the website easy to use ?
Does it deliver the information expected ?
13
NAVIGATION OF THE WEBSITE
• About your website
Easy to Learn
• Hyperlink and the Buttons from content
Clearly differentiate
• to arrive at the next destination
Minimal Clicks
15
THE BEST WAY TO LEARN HTMLThe best way to learn HTML (or any programming language) is by Examples.
You can read many books but practice, i.e. writing your own HTML pages and learning from example WWW pages online, is the best way to learn tips and constructs.
16
BASIC HTML PROGRAMMINGHTML stands for Hypertext Markup Language.HTML files are basically special text files:• Contain special control sequences or tags that control how text isto be formatted.• HTML files are the “source code” for Web Browsers
A browser reads the HTML file and Tries to display it using the tags to control layout.
• Text file created by:– Any text editor : Notepad– Special HTML editors : Dreamweaver
17
BASIC HTML PROGRAMMINGHTML source document
A text-only documentConsists of (1) actual text, and (2) tags
A tag is an html code that is enclosed in angel brackets <>; used to layout the web page.
XHTML is a simple, more standardized version of HTMLXHTML/HTML can be created using a simple text editor like notepad
File extension must be .html or .htm
18
HTML DOCUMENT
Head : provides page title and general page formatting commandsBody : put the main HTML text in this part.
19
HTML TAGSAll HTML commands or tags have the following form:
<name of tag>...</name of tag>
Tags control the structure, formatting and hypertext linking or HTML pages.
Tags are made active by <name of tag> and must be made inactive by an associated </name of tag>.
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
... <title>…</title></head><body>…</body></html>
21
BASIC HTML CODINGHead elements• <head>....</head> tag delimits head part of document.• <title>....</title> Defines the title of the Web page.• Every Web page should have a title
– Displayed as Title of Web Browser Window– Used in Bookmarks or Hot lists to identify page– Only one title per page
22
THE BODY ELEMENTo <body>....</body> tag for body part of document.
o All other commands that constitute web
page nested inside body.
o Body must follow head.
23
HTML TAGS/ELEMENTSTags are also called elementsAn attribute is a special code that can enhance or modify a tag. They are generally located in the starting tag after the tag name.
Basic syntax for xhtml tags and attributes<tag attribute="value"> </tag> All tags must be lower caseall values of attributes need to surrounded by quotes
24
EXAMPLE<strong>This is bold text…</strong><p style ="text-align:center">This is Center…</p>
25
META TAG USED FOR SEO (SEARCH ENGINE OPTIMIZATION)<meta> tagis used to specify keywords that describe a document’s contents as well as a short description.Two necessary attributes – "name" & "content"<meta name="keywords" content="baseball, soccer, tennis"/>
<meta name="description" content="Sports information page"/>
26
HEADINGSHeadings are used to title sections and subsection of a document.
HTML has 6 levels of headings labelled h1, h2, ..., h6.
The first heading should be <h1> item In most documents the first heading is the same as the page title.
Headings are displayed in larger/bolder fonts than normal body text.
Increment headings linearly—do not skip.
27
HEADINGS EXAMPLE<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6> This is a heading</h6>
28
HTML COMMENTS Comments delimited by:
<!-- ......... --> Ignored by browser – No formatting function Like all good programming practice:
Use meaning comments in your HTMLSimple comment example:
<!-- THIS IS A COMMENT -->
29
PARAGRAPHS<p> ....</p> tag used for a paragraph. Paragraphs can be aligned — LEFT, CENTER, RIGHT – with
the ALIGN attribute via<p align=center>
Demonstration
30
LINKS AND ANCHORS Linking to Other Documents — The Bread and Butter of the Web
Regions of text can be linked to other documents via the anchor,<a>, tag which has the following format:
<a href=‘‘filename or URL’’> link text </a> The opening <a> tag has a href attribute that is used to specify
the link to URL or local file. Text between the <a> and </a> (closing tag) is highlighted by
the browser to indicate the hyperlink. Depending on browser and web page configuration highlight style can differ.
31
LISTSHTML supports a variety of lists.Unordered or Bulleted lists<ul> ... </ul> delimits list.<li> indicates list items.Closing using </li>. <ul> <li> HTML. </li> <li> PHP.</li> </ul>
32
LISTSOrdered or Numbered lists<ul> ... </ul> delimits list.<li> indicates list items.Closed with </li>.For Example: <ol> <li> One.</li> <li> two.</li> </ol>
33
PREFORMATTED TEXTThe<PRE> tag generates text in a fixed width font and causes spaces, new lines and tabs to be significant. Often used for program listings.Example:
<pre>This is preformatted text.New lines, spaces etc. aresignificant.</pre>
34
EXERCISES We will do some exercises using HTML on Text Editors before Dreamweaver.
top related