Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Web Design Fundamentals is a survey of Web design and development techniques and technologies, fundamental concepts, terms, and best practices involved in professional web design. Instructor James Williamson examines popular web development tools, server-side software solutions, content management solutions, and cloud-based software, providing a high-level overview of the world of Web publishing.
Although various versions have been released over the years, the basics of HTML remain the same. Being a Markup language, HTML consists of a series of tags that identify the types of elements within a document. Most tags feature an opening and a closing tag that surround the tag's content. To identify tag as belonging to a paragraph, for example, one simply needs to encase the text within a paragraph tag. The structure of HTML documents is easy to learn and the tag set is small enough to learn within a day or two.
To help you become more comfortable with HTML, I'm going to take a few moments to discuss the basic structure of HTML documents. Learning this structure, as well as a few of the most common HTML tags, is all you really need to learn before writing your own basic HTML files. Now the best analogy I've ever heard used to describe the structure of an HTML document is to compare it with a sandwich. That stuck with me so I'm going to use it here. To have a sandwich, you need to have two slices of bread. Without those, you don't have a sandwich. You have a salad.
To have an HTML document, you need to have an opening and a closing HTML tag. These tags, like the bread of a sandwich, surround everything else. Immediately after the opening HTML tag, you'll find the head of the document, identified by an opening and a closing head tag. The head of an HTML file is much like the condiments, lettuce, or tomato of a sandwich. They help make the sandwich better, but they aren't really necessary. The head of an HTML file contains all of the non-visual element that help make the page work.
Here you'll find elements such as meta tags that might contain keywords or page descriptions to help identify the document's contents, links to external resources like CSS files and external script libraries that can control the page's presentation, layout and functionality. It could also contain internal CSS or a script content if the designer wishes to embed those elements within the page. Things inside the head tag are not necessarily visual or structural elements. They just help to make the page look and function the way you want it to.
After the head tag, you'll find the body tag. The body tag is like the meat of the sandwich, the ham, the roast beef, the cheese, whatever else you like in there. All visual, structural elements are contained within the body tag. Headings, paragraphs, lists, quotes, images and links are just a few of the elements that can be contained within the body tag. Simply stated, if it's a visual element, it appears in the body tag, in the order in which you want it to appear. There are other syntaxual rules you must learn.
You might've noticed, for example, that if one tag is open inside of another tag, that tag must close before its parent tag can close. Other rules govern things such as which tags can be contained inside of other tags, which attributes are allowed to modify or extend the meanings of certain tags and things like that. Overall, however, the structure I presented here is the same in every single HTML document. If you learn this basic structure, you are well on your way to writing clean, valid HTML and making a great sandwich.
There are currently no FAQs about Web Design Fundamentals (2010).
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.