Video 3: HTML: History and Philosophy

Loading...

From the course by University of New Mexico

Web Application Development: Basic Concepts

113 ratings

University of New Mexico

Web Application Development: Basic Concepts

113 ratings

This is the first course in a Coursera Specialization track involving Web Application Architectures. This course will give you the basic background, terminology and fundamental concepts that you need to understand in order to build modern full stack web applications. A full stack web developer is familiar with each "layer" of the software technologies involved in a web application, including data modeling and database technologies, the web server environment and middleware components, network protocols, the user interface and basic visual design and user interaction concepts. In this course we will learn by doing. We will start by learning the major components of web application architectures, along with the fundamental design patterns and philosophies that are used to organize them. You will build and continually refine a fully functional full-stack web application as we progress through the modules in this course. Along the way you will be exposed to agile software development practices, numerous tools that software engineers are expected to know how to use, and a modern web application development framework. This course is also available in Spanish. To join the Spanish version, visit this page: https://www.coursera.org/learn/apliweb.

From the lesson

Module #5 - The User Interface

In our final module we will discuss the User Interface. We will touch on CSS and JavaScript, and how these are used to add style to layout and design of HTML documents. We will also learn about Ajax and how it improves user requests.

Presentation Tier Overview - An Overview0:53

Video 1: The Presentation Tier3:51

Video 2: Layout and Design8:01

Video 3: HTML: History and Philosophy5:12

Video 4: HTML CSS and JavaScript3:23

Meet the Instructors

Greg Heileman
Professor and Associate Provost
Electrical and Computer Engineering
Manel Martínez-Ramón
Professor
Electrical and Computer Engineering

[MUSIC]

In this video, I'll provide a brief historical perspective of HTML.

And we'll also talk about some of the basic design philosophies

that you should have in mind when you work with it.

In order to motivate this study, let's start with a quote from Tim Berners-Lee,

who is considered the father of the world wide web.

In this quote he's reminiscing about the early days of the world wide web.

And here's what he said.

I just had to take the hypertext idea and

connect it to the TCP and DNS ideas and ta-da, the World Wide Web.

So we've already studied TCP and DNS.

In this video, let's start to talk about the hypertext idea.

So first let's start with the background history of hypertext.

The hypertext markup language, or HTML, was present in the document sharing system

that Berners-Lee developed while he was working at CERN in the early 1990's.

In 1995, the HTML working group created by the Internet Engineering Task Force

released the HTML 2.0 standard.

This was a very important standard.

It had very widespread use.

Additional versions of the standard were created under the auspices of

the World Wide Web Consortium and this is W3C for short.

The most recent is HTML5 the big, big improvement.

It was released in 2008, it incorporates many new features such as video playback,

some drag and drop capabilities that add a lot of interactivity to HTML.

So many websites now are using the HTML 5 Standard.

Markup languages such as HTML are examples of

a declarative programing language style.

So with this programing paradigm you express the logic of a computation without

describing its control flow.

Prolog and SQL are other examples of declarative programming languages,

although SQL also has some procedural constructs.

The program flow so therefore is not actually specified with markup language.

You specify what, not how, in the computation.

In the case of markup languages such as HTML,

this means you specify what should appear on the webpage, not how it should look.

Not how it's styled or how it should behave.

And what I mean by behavior is when the item might be visible on the page and

how it's animated, these types of things.

If created properly, HTML documents should follow the separation of content and

presentation principle.

I'll get to that in just a second, but

first I want to show you an example of HTML.

So here is a div element in a HTML.

And this is the beginning of the div element and here's the end.

The div element is used to specify the major divisions or sections in a document.

And here's an h1 HTML element.

This is a level one heading and

the title of this heading is going to be introduction.

So notice that we're specifying things but

not saying how anything should be computed or how these things should look.

Now let's talk about this separation of content and presentation.

And I'm going to make the same point.

What this says is the specification of how content is presented should

be separated from the content itself.

By the way, this is a special case of the more general concept

of separation of concerns used quite often in computing.

For instance, in programming, the separation of concerns is achieved by

encapsulating information inside modules with well defined interfaces.

This principle was also used in the design of the Internet protocol stack.

So again, the meaning or the semantics of the document should be separated from

how it's presented to readers.

Many web 1.0 applications did not follow the separation of content and

presentation principle.

They jumbled the two together making it really,

really difficult to maintain these types of web pages.

Here are some advantages associated with using this.

The same content can be rendered differently

depending upon the needs of the user.

For example, you could render text or you could render that same text as braille.

The more important thing is there's a meaning of the content and

then how you represent it could be different.

Another advantage is if this design principle is followed,

you can change the styling of section headings and

other things, and they'll be reflected throughout the entire document.

Indeed, you could even update or change the entire graphic design of a document in

this way without changing the actual content, just changing the styling.

Also, by capturing the meaning or the semantics of a document,

further intelligent machine processing of the document is possible.

For example, you could write a script that finds all of the emphasized

words in a a document, all of the level one headings, etc.

So again this is supported by specifying meaning but

not the styling of the content.

In the next video we'll talk about how we can integrate styling and

behavior into the overall document.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play