coap2000 fall 1 2012 week 1 lesson introduction to html & the web development cycle (dave hallmon)

7/31/2019 Coap2000 Fall 1 2012 Week 1 Lesson Introduction to HTML & The Web Development Cycle (Dave Hallmon)

1/48


2/48


3/48


4/48

The Internet began with a connection of computers and computer networks. As we all know the Internet has changed the way we live our lives and interact with each other.

To get us started. Lets talk about what some things are that we use the internet for?

Search for informationCommunicate with other people Pay billsEtc.

How has the Internet has revolutionized the way business and industries function?

Companies now need websitesCustomers look for companies on the net

Talk about Tops Ur Way


5/48

There are a lot of things shared on the Internet. The first three bullets here can really be one bullet called code, but more specifically, HTML, CSS, scripts, text, images, files , etc. Files like images, documents, audio, videos , etc. can be thought of as content.

Browsers interpret this information for the user into the webpages we have just been

discussing. Browsers then allow the user to do something, seek something anything that they want on the Internet if they have permission or know how to find it.

You will find out in this course that I will harp on how important it is to understand your user. Have you ever heard the saying, The customer is always right? Well, for the purposes of this course, the user is always right. And they know what they want. It is all about them.

If you learn one thing in this course please learn that it is always about the user. I have a close friend who is a web designer at a firm over in Illinois and he is asked daily to design something that he knows will not work for the user. Him realizing this allows him to ask the sales department to contact the client and get things corrected. What would you think would happen if my friend didnt notice things like this?

Bad websiteCustomer unhappyEtc.


6/48

Does anyone know how much the textbook costs?


7/48

One of the reasons we chose this textbook for this course was because of the sentence found on page 14 It is worth its weight in gold!

Comprehensive planning and analysis ensures that designers and developers will provide what their users want. If you start to code your Web pages without thorough planning and

analysis, you run the risk of missing pertinent information. It is much less expensive to make corrections to a Web site in the early phases of a project development that it is to alter Web pages that are completed.

Its all about the user. Always about the user. The web site if for the user. Not for the designer or the client. Amazons website is not for the company Amazon. It is for their customers the users.


8/48

In this course we will utilize a process called the Web Development Life Cycle as a framework to create our term projects, i.e., the websites that we will be creating.

As web designers/developers, we need (should) to follow a process when we are creating

pages and

sites

for

ourselves

as

a "hobbyist"

or

a "opportunist"

freelance

web

designer.

More on that next week.

The diagram represents that process. I truly hope that you will utilize this process for any further web sites that you will ever make as a designer or developer. Be sure to pay special close attention to the discussion of this cycle in your textbook and the corresponding weekly lectures.


9/48

This is a really cool photo of the Emerson Library. The photo is hear to help remind us that the internet began as a way for university students like yourself to share research content. In 1969 there needed to be a way for a computer at one university to connect with another university. This simple network has now evolved into billions of users accessing and sharing content.

Like I was saying earlier. Content could be text, graphics, sound, video, etc. In the case of the 1969 users I am guessing it was simple text files of research content. Modern university users are sharing larger files like music and videos.

Now in the present day, if users want to access content on the Internet, they must have an account with an Internet Service Provider (ISP). I dont know who Webster gets their internet from, but at our homes if we have the internet, we all have an ISP. What ISPs do we have represented tonight?

CharterAT&TEtc.

While it might feel like it sometimes, these companies dont own the Internet. They provide us access to the Internet through a DSL or Cable connection lines so their users can access content. and as we know they charge a premium for this.


10/48

When you hear WWW or World Wide Web, think of it as a collection of web content. To support these pages, documents, files, or multimedia for users, there needed to be some sort of protocol for how they could access them. This is where we get the Hyper Text Transfer Protocol you know, (HTTP) which is a set of rules for exchanging the content, e.g., images, audio, video, text, etc. that are found often found on web pages .


11/48

Discuss hierarchy


12/48

This is an example of a website which is a collection of web pages maintained by web designers and developers like ourselves.

Each has a home (i.e., index page ) which their users will navigate to first and then navigateto other areas of the web site (if it is well designed).

Each of these pages are stored on a web server somewhere. These are sometimes called a host , because they host the space for the site.

For the purposes of this course, will create a local host which just means that our computers will be hosting our sites. We will eventually be uploading or FTPing these to Websters student server called Labwebs.

Once a site is set up, their users essentially make requests to these servers which serve the user.

Remember, a user can only make a request to the server if they have the appropriate permissions and know the location of the content that you want, i.e., a Universal Resource Locator or (URL).

Oh wait. They also need an ISP and a browser. What browsers do you like to use?

IE


13/48

FirefoxCromeSafari


14/48

Like I was saying, in order for a user to make a request with a URL, they must have an ISP that can access the WWW and a browser to interpret the content. There are protocols for this get the joke?

So a browser interprets the HTML, CSS, scripts, etc. to display the content for the user.


15/48

Lets go under the hood of Websters website.

Notice here, as we are now under the hood or Websters website. This is the HTML used to create this webpage. It is filled with special instructions called elements that are marked up with tags and define the structure and layout as it is displayed in the browser.


16/48

Before we go any further, lets watch two short clips from one of our Lynda training courses that I have listed on the syllabus.

Watch XHTML and HTML Essential Training

*Introducing HTML and XHTML*Understanding versions of HTML and XHTML


17/48

We can create documents like this using a text editor which allows a user to enter, change, save, and print HTML.

On PC you will most likely use Notepad ++ and on Mac, TextEdit. There are others out

there. Some

free,

some

not.

Feel

free

to

find

one

that

you

like

to

use.


18/48

Lets code our first page in NotePad++. To get started:

1. First we need to locate our text editor that we will use.

2. Enable Word Wrap3. Copy these initial HTML Tags and content from your handout into your text editor4. Save the page as hello_world.html in a folder called week1 on the desktop. Make

sure you add the HTML extension. This will tell your computer to open the file in your default browser.


19/48


20/48


21/48

Remember what HTML stands for? It is a markup language which means that raw content, e.g., text. is marked up with elements and tags (sometimes called document containers). Various elements markup the content as elements e.g., headings, paragraphs, links, lists , etc.

These tags are open and closed with angle brackets. Sometimes an element will enclose the content with a start and end tag (often called open and close) and sometimes there are whats called an empty element because it is not marking up content.

For example an image is an empty element because all it is doing is providing a window to the content and not actually marking it up.

The w3 consortium mandates that all elements close so for our pages to be fully XHTML compliant we have to use
but notice the difference in the use of the backslash.


22/48

A block level element is an element that creates large blocks of content like paragraphs or page divisions. Using them often starts a new line in the document and they can contain other block elements as well as inline elements.

How many

block

level

elements

do

you

see?


23/48

Five


24/48

An inline element is an element that define content within a block level element, e.g., strong makes the enclosed text (not) strongly emphasized and em will italicise the text (markup language). They don't start new lines when you use them. They can contain other inline elements but you have to watch your syntax.


25/48

Which of these is has an error in syntax?


26/48


27/48


28/48

There is also a third type of element in HTML those that aren't displayed at all. These tags are the ones that provide information about the page but don't necessarily show up in the visible portion of the page. This represents the content on our simple HTML page.


29/48

For example in the

STYLE to define styles and stylesheets, META to define meta data, and HEAD to hold those elements.

There are many different documents on the web. A browser can only display a document correctly, if it knows what kind of document it is.

There are also many different versions of HTML, and a browser can only display an HTML page 100% correctly if it knows the exact HTML version used in the page. This is what is used for.


30/48

Attributes often tell the browser how to visually render the content of the element. For example lets say that we wanted to center a heading. We first have to attach the align attribute and then give the attribute a value, i.e., center. The syntax is very specific and must be in double quotes.

Remember our empty image element? In this case, the value of the src attribute tells the browser the location of the image.


31/48


32/48

We can also create styles for various web page elements using Cascading Style Sheets. These rules define how all paragraphs or lists might look on a page. These deal more with the appearance of a webpage. CSS is not content.

For example, HTML is what is under the hood of a web site. CSS is the color of the car. You

can take the car, what is under the hood, the body and add color to it. Add leather seats, chrome wheels, convertible top, color it red, etc. But on the slip it still says its a Ford Mustang. Now matter what cosmetic things you do to it, it is still a Mustang and functions like a Mustang. While it looks different, it is still a Mustang.

To illustrate this point, lets all check out CSS Zen Garden .com


33/48


34/48

XHTML is a stricter and cleaner version of HTML.

XHTML is supported by all major browsers.

XML is a markup language where documents must be marked up correctly and "well formed".

Therefore by combining the strengths of HTML and XML, XHTML was developed. XHTML is HTML redesigned as XML.


35/48

Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret a "bad" markup language. More on this next week.


36/48

Before we go any further, lets watch two short clips from one of our Lynda training courses that I have listed on the syllabus.

Watch XHTML and HTML Essential Training

*Exploring a simple XHTML page

*Understanding the structure of an XHTML document (only watch first part)


37/48

To get started coding fully XHTML compliant:


2. Enable Word Wrap3. Copy these initial HTML Tags and sample content from your handout into your text

editor

4. Save the page as sample.html in a folder called week1 on the desktop. Make sure you add the HTML extension. This will tell your computer to open the file in your default browser.

5. Now we can use this sample.html page to develop other pages.


38/48

Lets use our sample page to create some new content.


2. Enable Word Wrap3. Open your sample.html page4. Add new content.

5. Save the page as xhtml_intro.html in a folder called week1 on the desktop. Make sure you add the HTML extension. This will tell your computer to open the file in your default browser.


39/48


40/48


41/48


42/48


43/48

Your text mentions other text editors, but please do not ever use a program like MS Word to create a web page. While it can do this, it adds lots of additional or erroneous useless code that can interfere how the web page looks in different browsers.

DEMO Creating

A

Web

Page

In

MS

Word

Some browsers are more forgiving than others. The main thing to remember, we do not ever want code that doesnt need to be there. Our code should always be simple and easy to read.


44/48

A WYSIWYG Editor or what you see is what you get editor allows the user to preview the published view of the HTML. Some even allow the user to edit the published view. In other courses in this program you may hear about IDEs or an Integrated Development Environment. These are programs like DreamWeaver which I use on a daily basis for designing web pages or Visual Basic to develop programming and graphical user interfaces

(GUI) for a web pages. Depending on which track you take in our program here you might go one way or the other or maybe both.

Needless to say, before you get into creating web pages in an IDE, you need to know the basics. The best way to do that is to use a Text Editor.


45/48


46/48

This brings us to the end of Ch 1. The only things that are left to cover, which is a lecture in it self are the Web Development Cycle and being an Observant Web User. Be sure that you read about these two concepts as we will be utilizing these through out the course and there will be questions on the quiz next week dedicated to these and how important they are. So make sure you read these sections carefully. If you do not have your text yet, you

can get the chapters in the Textbook eReserves folder on our courses homepage.

We will also be utilizing the Web Development Life Cycle to walk us through the creation of our web sites for our term projects and I hope any further web sites that you will ever make as a designer or developer. In this first week we will be in the planning phase of the cycle for your term project, i.e., the web site that you will create during this term.


47/48


48/48

coap2000 fall 1 2012 week 1 lesson introduction to html & the web development cycle (dave hallmon)

Documents