WEB DEVELOPMENT CYCLE

Transcription

1 WEB DEVELOPMENT CYCLE There are numerous steps in the web site design and development process. From gathering initial information to the creation of your web site, and finally to maintenance to keep your web site up to date and current. 1. Information Gathering 2. Planning 3. Design 4. Development 5. Testing and Delivery 6. Maintenance Phase

2 Types of Website Content - Static and Dynamic Static Web Site: A static web page (sometimes called a flat page) is a web page that is delivered to the user exactly as stored in contrast to dynamic web pages which are generated by a web application. Dynamic Web Sites: A dynamic web page is a kind of web page that has been prepared with fresh information (content and/or layout), for each individual viewing. It is not static because it changes with the time (ex. A news content), the user (ex. preferences in a login session),the user interaction (ex. web page game), the context (parametric customization), or any combination of the foregoing.

3 HTML HTML is an abbreviation of "Hyper Text Mark-up Language. What is HTML? HTML is a language, which makes it possible to present information (e.g. scientific research) on the Internet. What you see when you view a page on the Internet is your browser's interpretation of HTML. To see the HTML code of a page on the Internet, simply click "View" in the top menu of your browser and choose "Source". HTML is a language for describing web pages. 1. HTML stands for Hyper Text Markup Language 2. HTML is a markup language. (Document Format of WWW) 3. A markup language is a set of markup tags 4. The tags describe document content 5. HTML documents contain HTML tags and plain text 6. HTML documents are also called web pages.

4 HTML Tags 1. HTML markup tags are usually called HTML tags. 2. HTML tags are keywords (tag names) surrounded by angle brackets like <html> 3. HTML tags normally come in pairs like <p> and </p> 4. The first tag in a pair is the start tag, the second tag is the end tag 5. Start and end tags are also called opening tags and closing tags Ex: <tagname>content</tagname> Web Browsers The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented/displayed to the user:

5 HTML Page Structure Below is a visualization of an HTML page structure:

6 HTML Versions Version Year HTML 1991 HTML HTML HTML HTML XHTML 2000 HTML HTML Example <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph.</p> </body> </html>

7 The <!DOCTYPE> Declaration The <!DOCTYPE> declaration helps the browser to display a web page correctly. 1. The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. 2. 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. 3. In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML (Standard Generalized Markup Language Tagset). Example: <!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN "

8 Write HTML Using Notepad or TextEdit HTML can be edited by using a professional HTML editor like: 1. Adobe Dreamweaver 2. Microsoft Expression Web 3. CoffeeCup HTML Editor

9 HTML Headings HTML headings are defined with the <h1> to <h6> tags. <h1>this is a heading</h1> <h2>this is a heading</h2> <h3>this is a heading</h3> HTML Paragraphs <p>this is a paragraph.</p> <p>this is another paragraph.</p> HTML Links <a href=" is a link</a> HTML Images <img src="w3schools.jpg" alt="w3schools.com" width="104" height ="142 >

10 HTML Lines The <hr> tag creates a horizontal line in an HTML page. Example: <p>this is a paragraph.</p> <hr> <p>this is a paragraph.</p> <hr> <p>this is a paragraph.</p> HTML Line Breaks The <br> tag inserts a single line break. The <br> tag is an empty tag which means that it has no end tag. Example: <p>this is<br>a para<br>graph with line breaks</p>

11 HTML Text Formatting This text is bold This text is italic This is computer output This is subscript and superscript HTML uses tags like <b> and <i> for formatting output, like bold or italic text. All major browsers render strong as bold and em as italics. The <sub> tag defines subscript text. Subscript text appears half a character below the normal line. <p>this text contains <sub>subscript</sub> text.</p> The <sup> tag defines superscript text. Superscript text appears half a character above the normal line. <p>this text contains <sup>superscript</sup> text.</p>

12 HTML Comment Tags Comment tags  are used to insert comments in HTML. The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers. Ex:

13 HTML Hyperlinks (Links) The HTML <a> tag defines a hyperlink. 1. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. 2. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. 3. The most important attribute of the <a> element is the href attribute, which indicates the link's destination. By default, links will appear as follows in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red Example: <a href="url">link text</a>

14 The HTML <head> Element The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>. The HTML <title> Element The <title> tag defines the title of the document. The <title> element is required in all HTML/XHTML documents. The <title> element: defines a title in the browser toolbar provides a title for the page when it is added to favorites displays a title for the page in search-engine results

15 A simplified HTML document: <!DOCTYPE html> <html> <head> <title>title of the document</title> </head> <body> The content of the document... </body> </html>

16 HTML <style> Tag The <style> tag is used to define style information for an HTML document. Inside the <style> element you specify how HTML elements should render in a browser. Each HTML document can contain multiple <style> tags. <html> <head> <style> h1 {color:red;} p {color:blue;} </style> </head> <body> <h1>a heading</h1> <p>a paragraph.</p> </body> </html>

17 HTML <meta> Tag <head> <meta charset="utf-8"> <meta name="description" content="free Web tutorials"> <meta name="keywords" content="html,css,xml,javascript"> </head> Metadata is data (information) about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

18 HTML <script> Tag <script> document.getelementbyid("demo").innerhtml = "Hello JavaScript!"; </script> The <script> tag is used to define a client-side script, such as a JavaScript. The <script> element either contains scripting statements, or it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

19 HTML <link> Tag <head> <link rel="stylesheet" type="text/css" href="theme.css"> </head> The <link> tag defines the relationship between a document and an external resource and Specifies the location of the linked document. The <link> tag is most used to link to style sheets.

20 HTML <base> Tag <html> <head> <base href=" target="_blank"> </head> <body> <img src="stickman.gif" width="24" height="39" alt="stickman"> <a href=" </body> </html> Specify a default URL and a default target for all links on a page The <base> tag specifies the base URL/target for all relative URLs in a document. There can be at maximum one <base> element in a document, and it must be inside the <head> element.

21 HTML <noscript> Tag <script> document.write("hello World!") </script> <noscript>your browser does not support JavaScript!</noscript> The <noscript> tag defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support script. The <noscript> element can be used in both <head> and <body>.

22 HTML Images <img src="url" alt="some_text"> HTML Images - The Alt Attribute The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The value of the alt attribute is an author-defined text: <img src="smiley.gif" alt="smiley face"> HTML Images - Set Height and Width of an Image The height and width attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default: <img src="smiley.gif" alt="smiley face" width="42" height="42">

23 HTML Lists HTML Unordered Lists An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles). <ul> <li>coffee</li> <li>milk</li> </ul>

24 HTML Ordered Lists An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers. <ol> <li>coffee</li> <li>milk</li> </ol>

25 HTML Description Lists A description list is a list of terms/names, with a description of each term/name. The <dl> tag defines a description list. The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name): <dl> <dt>coffee</dt> <dd>- black hot drink</dd> <dt>milk</dt> <dd>- white cold drink</dd> </dl>