Overview Recap HTML. Recap What is cloud computing? What are application service providers...

Overview

Recap HTML

Recap

What is cloud computing? What are application service providers

(ASPs)? Describe major functions of operating

systems (OS) Name and explain several generations of

programming languages

Software Alternatives

Cloud Computing – a recent advance in computing and software delivery; software and virtualized hardware are provided as a service over the Internet; “cloud” is a metaphor for the Internet

Application Service Providers (ASPs) – provide necessary applications for a fee (rather than a firm developing or purchasing the software)

Operating Systems – programs that run the computer operations (Recap)

Operating Systems Functions – User Interface – how the user communicates

with the computer Resource Management – manages the

hardware and network resources File Management – controls the creation,

deletion, and access of files of the data and programs

Task Management – manages which tasks are performed and when

Programming Languages (Recap)

Machine Languages – first generation language – instructions written in binary (0’s and 1’s); runs directly on the computer

Assembler Languages – second generation language – uses symbols/mnemonics to represent operational codes; converted into binary by an Assembler

High-Level Languages – third generation language – BASIC, COBOL, FORTRAN; converted into binary by Compliers and Interpreters; users tell the computer What results they want and How to get there

Programming Languages (Recap)

Fourth-Generation Languages (4GL) – non-procedural languages; users tell the computer What results they want, but the computer decides How to get there

Fifth Generation Languages (5GL) – natural languages, very close to English, conversational

Object-Oriented Languages (5GL) – combine the data elements and the programs that act on them into Objects; Reusability

Web and Internet Languages and Services


HTML (Hypertext Markup Language) – a page description language (markup languages are NOT programming languages)

XML (eXtensible Markup Language) – describes the Content of Web pages by applying contextual labels to the data


Web Services – software that electronically links applications of different users and different platforms

Hypertext Markup Language (HTML)

HTML Basics

Hypertext Markup Language A format of documents for Internet Displayed by Web browsers Simple text or complex multimedia

History of HTML

1960s – General Markup Language (GML – IBM) 1980s – the first draft of Standard General Markup

Language (SGML - ANSI) Mosaic browser (NCSA) HTML – an application of SGML 1994 – HTML version 2.0 1996 – HTML version 3.2 1997 – 1999 – HTML version 4.0 2000 – Present – HTML Version 5.0

Tags

Tags – HTML formatting Example: <h1>Text in an H1 style</h1> Delimited by angled brackets: <h1> Not case sensitive: <HEAD>, <head>, and

<hEaD> are equivalents Styles must be switched off by an end tag Space, tabs, and new lines are ignored by the

browser

Tags

If a browser doesn’t understand a tag it will usually ignore it.

Tags working with any browsers Tags working with any hardware platform Most widely used to create Web pages

HTML Source Code

Uncover HTML Source Code Open Web Browser - Internet Explore (IE) as the

de facto browser for this class Select View followed by Source Examine the tags Example: http://qcao.ba.ttu.edu

What to Use

Any word processing program or text editor Notepad is the choice of this course

Tags are not case-sensitive. Save as .html file

Structure of an HTML Document

Entire document is surrounded by <html>…</html> tags.

Head – contains control info used by the browser, sever, and a large body

Body – contains the content that display on the screen and tags which control how that content is formatted by the browser

Title – All HTML documents have just one title which is displayed at the top of the browser window

Example

<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b><H1>This is Font H1</H1><H6>This is Font H6</H6></body> </html>

Document Body - Blocks

Documents – blocks of text Each block – formatted independently

Paragraph and heading<p [align="left"|"center"|"right"]>...</p><h1 [align="left"|"center"|"right"]>...</h1><h6 [align="left"|"center"|"right"]>...</h6> <h1> is the largest heading and <h6> is the

smallest one. Alignment – default to the left

Lists

HTML provides three types of list: The basic bulleted list A numbered list A definition list

Lists - Unordered

List – <li>…</li> A unordered list

<ul [type="disc"|"square"|"circle"]>…</ul> Everything between the tags must be encapsulated within

<li>…</li> Example

<html><ul type="disc"><li>Disc</li></ul> <ul type="square"><li>Square</li></ul><ul type = “circle”><li>Circle</li></ul></html>

Another Example

HTML Code<html>

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul> </html>

Here is how it looks in a browser• Coffee• Milk

Lists - Ordered

An ordered list <ol [type="1"|"a"|"A"|"I"|"i"]>…</ol> Default type "1" Everything between the tags must be encapsulated within

<li>…</li> Example

<html><ol type="1"><li>Numbers</li></ol><ol type="a"><li>Small letters</li></ol><ol type="1"><li>Numbers</li><li>Second line</li></ol></html>

Lists - Definition

Definition List <dl>…</dl> <dt>…</dt> - definition <dd>…</dd> - provide conventionally indented text dl tags

Example

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

How It Looks

Coffee

Black hot drink

Milk

White cold drink

Spacing, Lines, and Background Colors

Text Line break – <br>…</br>

Horizontal line<hr [align="left"|"center"|"right"][size="n"][noshade][width="nn%">

The <hr> does not require an end tag. Alignment – default to the left

bgcolor = {Color} inside the <body> tag

Example

<html>

<body bgcolor="yellow">

<h2>Look: Colored Background!</h2>

</body>

</html>

Hyperlinks

Hyperlinks are created using anchor tags <a href="insert location of file">…</a> Three types of links

Link to another spot within your own document Link to a URL or Web page anywhere on the WWW Link to Email

Hyperlinks to Your Document

A pair of anchor tags The first anchor tag creates a hypertext link to a

location within your document i.e. <br> <a href="#POWERFUL">Powerful

Lines</a></br> The second tag identifies the exact location of

your document you want to link to i.e. <p><a name="POWERFUL">Powerful

Lines</a></p>

Hyperlinks to Your Document (Example)

<html> <br> <a href="#POWERFUL">Powerful Lines</a></br> <br>... </br> <br>... </br> <br>... </br> <br>... </br> <br>... </br> <br>... </br> <br>... </br> <br>... </br> <br>... </br> <br>... </br> <br>... </br> <br>... </br> <br>... </br> <br>... </br> <br>... </br> <br>... </br> <p><a name="POWERFUL">Powerful Lines</a></p></html>

Hyperlinks to the Web

Hyperlink <br><a href="Web Address"><Address Name></a>

Examples <br><a href="http://www.yahoo.com">Yahoo</a> <br><a href="http://www.ttu.edu">TTU</a> <br><a href="http://www.cnn.com">CNN</a>

Hyperlinks to Email

Hyperlink <br><<a href="mailto:email address">><Email Address

Name></a>

Examples <br><a href=“mailto:[email protected]">Dr. Qing Cao</a> <br><a href=“mailto:[email protected]">Qing Yahoo</a>

Homework 2

Design a webpage which includes Head, Body, Title (Bold font), at least three type of lists, three type of hyperlinks, and a background of color of your choice.

Webpage content is up to you. Please save the assignment as YourNameHW2.html. Send the webpage file(s) to Dr. Cao at [email protected]

before or at 11 p.m. on Feb. 18, 2015.

Overview Recap HTML. Recap What is cloud computing? What are application service providers...

Documents

Transcript of Overview Recap HTML. Recap What is cloud computing? What are application service providers...