Login

Web Page Design and Programming Languages: HTML, XHTML, XML, CSS & JavaScript

An error occurred trying to load this video.

Try refreshing the page, or contact customer support.

Coming up next: Internet Communication: Twitter, Email, IM, Blogging, RSS & Newsgroups

You're on a roll. Keep up the good work!

Take Quiz Watch Next Lesson
 Replay
Your next lesson will play in 10 seconds
  • 0:05 Website Design Defined
  • 0:43 Planning Your Website
  • 2:15 Building Your…
  • 5:59 Decorating Your Website
  • 9:45 Finalizing Your Website
  • 10:34 Lesson Summary
Add to Add to Add to

Want to watch this again later?

Log in or sign up to add this lesson to a Custom Course.

Login or Sign up

Timeline
Autoplay
Autoplay
Create an account to start this course today
Try it free for 5 days!
Create An Account

Recommended Lessons and Courses for You

Lesson Transcript
Instructor: Jill Heaney

Jill has taught college-level business and IT. She has a Doctorate in Business Administration and an M.S. in Information Technology & Leadership.

Web design is the creation and visual design of documents displayed on the World Wide Web. It is important to create engaging and visually appealing websites to attract and retain customers. Many factors must be considered when designing a website. This video will explore the steps in Web design and the programming languages needed to create a dynamic and interactive website.

Website Design Defined

How many websites do you visit daily? Have you ever thought about creating your own website? Many people and organizations create websites to share information, educate, and buy and sell products and services.

Web design is the creation and visual design of documents displayed on the World Wide Web. Organizations rely on websites with engaging and visually stimulating content to attract and retain consumers. The quality of the Web design is a key factor when creating or revising a website. Anyone preparing to develop a website must consider several factors to plan for success. What factors do you think would be important? Consider some of the websites you have visited recently. Were there things that you really liked or disliked about those websites?

Planning Your Website

Building a website is like building a house. The first step requires proper planning. With a house, you will need an architect to design the home, a contractor to build the home and an interior designer to decorate the home. While you can build a website on your own, many organizations hire professionals who have the skills and talent to make an appealing and well-functioning website. To build a website, you will need a creative director who acts as an architect, a Web director who acts as a contractor, and a content director who acts as the interior designer.

When planning a website, you must know your audience and design a website that will suit their needs, interests, and viewing preferences. When designing websites, it is important to keep in mind that they will be viewed on a computer screen. They should be designed appropriately for that medium. Content should be organized in such a way that it is meaningful and easy to navigate. It is important to leverage the power of hypertext. One way to accomplish this is by providing links within the content of webpages for users to create their own paths to information.

Website designers must consider users with different Web browsers, operating systems, and computer platforms to ensure accessibility. Pages should also be planned with connection speeds in mind. It's beneficial to design for low bandwidth. Bandwidth is the amount of data that can be transmitted in a set period of time. No one wants to wait for a page to slowly download due to large graphics or complicated animations. In fact, the average user will only wait 10-20 seconds for a page to load before navigating away. That could be a potential customer lost to a competitor!

Building Your Website's Foundation

Once the planning is complete and the architectural plans are finalized, building can begin. Whether working on a new home or a new website, we start with the foundation. Web programming languages like HTML, XML, and XHTML provide the tools to build the foundation just as framing provides the basic yet essential structure in which to build and design the entire house.

An example of the HTML code for a website.
HTML Code Example

Hypertext Markup Language (HTML) is a programming tool that uses hypertext to establish dynamic links to other documents. It is known as the Web's programming language and provides a general structure for creating webpages. All webpages are actually HTML files. HTML documents are simply text documents that contain the content of your webpage as well as special instructions called tags. Tags provide instructions on how to display text or graphics and control user inputs. Tags are enclosed in brackets: < >. Typically, there is a starting and ending tag around text. For example, if we wanted to bold a heading, our starting tag is a 'b' in brackets followed by the heading and concluding with the end tag '/b' in brackets: <b>'Heading'</b>. All HTML documents begin with HTML in brackets and end with the forward slash and HTML in brackets: <html> and </html>. These tags tell the Web browser that the content between the tags should be assembled into an HTML document. There are programs such as Dreamweaver designed to help you create HTML code for a webpage. The application provides a graphical user interface that enables one to click, drag and copy parts of the webpage. The application generates the HTML code for the user. But if you're interested in actually learning HTML, it is probably better to open a simple text editor program, like Notepad, and type the HTML code yourself.

Extensible Markup Language (XML) is a markup programming language like HTML without predefined elements. It cannot replace HTML but complements it. Whereas HTML governs the appearance of information in a Web browser, XML complements HTML by adding tags to describe data. XML is what we call a metalanguage. Metalanguage means about a language, or in other words, XML allows a user to describe a markup language to meet specific needs. XML allows you to create or invent customized tags and attributes that suit your needs for the type of document you are writing. XML provides greater flexibility for adding new elements and attributes that will extend HTML capabilities. It also provides the ability to design new browsers or applications.

HTML was first introduced in 1993 as the Internet standard. Over the years, many versions have been released with added features. Today, Extensible Hypertext Markup Language (XHTML) is replacing HTML as the Internet standard. XHTML is a markup programming language that is similar to HTML but written using XML. Essentially, by using XHTML, you are writing XML code with restrictions based on a set of predetermined elements. It combines the best parts of HTML and XML to create a powerful and flexible programming language. XHTML is basically a reformulation of HTML using XML syntax. The main difference between these programming languages is XHTML documents must be well formed or developed according to specific rules in order for them to be considered XHTML documents. XHTML is case sensitive, whereas HTML is not. XHTML works smoothly with database and workflow applications. XHTML makes it easier for designers to be creative and add new elements. It provides a more structured and conceptual way of thinking about content.

Decorating Your Website

Presentation is important since there is only one chance to make a good and lasting impression. Consumers will make assumptions about the business and its products or services based on the website. Think about buying a house. Not only is it important to have structural soundness, but you are also concerned about the outward appearance and the visual appeal. The way in which the house is laid out, the type of floors, the color on the walls, and even the shrubs outside can make a difference in how you feel about the house and its worth.

Two tools used in website design that can assist in decorating a website are cascading style sheets and JavaScript.

Cascading style sheets (CSS) use a simple style language that provides users with familiar desktop publishing terminology to alter the appearance of websites. CSS describes how webpages should look in a browser. You can think of CSS as the decorations for your house. Without any decorations, it is pretty bland and boring, but when you add décor it really spices up the environment and makes it more inviting. CSS was developed by the World Wide Web Consortium (W3C). It can control typography, colors, backgrounds and other design characteristics.

A style sheet contains all the style rules for a website.
Stylesheet Contains Style Rules

CSS uses syntax that is easy to read and write. It is composed of two parts: a selector and a declaration. The selector decides upon the element to which a rule is applied, while the declaration specifies exactly what should be done to that element. If you wanted to set your heading to purple, your style rule would look like: h1 {color: purple;}. 'H1' is the selector, and 'color: purple' is the declaration. The declaration may be broken down into two sections: the property and the value. The property is the quality or characteristic, such as color; the value is the precise specification of the property, such as purple. The style rules are housed in a style sheet. The style sheet is an external, stand-alone document, shared by several webpages. It conveniently controls styles throughout the website. An alternative is to contain a style sheet in a single webpage for that page's use only. CSS rules can be combined with HTML code. CSS must be used to render presentation information in XHTML.

To unlock this lesson you must be a Study.com Member.
Create your account

Register for a free trial

Are you a student or a teacher?
I am a teacher
What is your educational goal?
 Back

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back

Earning College Credit

Did you know… We have over 95 college courses that prepare you to earn credit by exam that is accepted by over 2,000 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it free for 5 days!
Create An Account
Support