Online Class: Learn HTML - Create Webpages Using HTML5

Courses Frequently Bought Together:

Ultimate Excel Training Bundle

Introduction to CSS

Introduction to SQL

Course Motivation

How the Web Works

The Internet is one large network of computers. These computers mostly serve web-based content (HTML pages), but there are other types of computers networked on the Internet. Each computer (or server) is given an IP address. The Internet works with IP addresses to identify your website's server from millions of others. However, typing IP addresses into a browser isn't user-friendly. The friendly URL or website address you type into your browser is translated to an IP address using servers called name servers or domain name systems (DNS). Once the address is found on the Internet, the web server sends back an HTML-formatted page. This HTML code is translated using a web browser, and that's how you can view images, layouts, content, and videos on the Internet.

The Difference between the Internet and Web Browsing

When you first start out in web design, the Internet, web browsing, and the technical side to networking can be confusing. The Internet, as we said, is a network of computers. These computers can be servers, printers, routers, switches, and other forms of hardware (both virtual and physical) to communicate. You can also keep computers private behind a firewall to protect Internet traffic from entering a private network.

The Internet is sometimes called "the Web," but web browsing is different than the actual Internet. Web browsing is the term given to a web server providing browsers (Chrome, Internet Explorer, Firefox, for example) with content. You can think of the Internet as a library of content disbursed throughout the world. A web browser is the reader that lets you read the content stored on the Internet. Using HTML, you create that content in a presentable format. If that format is broken, the web browser cannot determine how to format and display content. For this reason, it's important that you write proper syntax when you create your web page HTML5 whether it's created dynamically through a back-end language or you write static pages that do not change.

Web Page URLs

Now that you understand how web pages are displayed in a web browser, you should also understand how a URL works. A URL is the address you type into the address bar. The domain is the basic address for your site (remember, the domain name is translated into an IP address). Your domain contains directories and files. The directories categorize and organize your site, and the pages are the physical files that contain your content.

URLs can also contain querystring variables. A querystring variable is a dynamic value that helps you display content dependent on input. When you see website URLs that contain a question mark ( "?" ) in the address, the variables contained after the question mark are querystring values. For instance, you might only want to show blue widgets after the visitor clicks a specific link. You could use a querystring variable such as "color=blue" after the question mark in the URL. The following is an example of a URL with this querystring variable.

yourdomain.com/products?color=blue

You can use multiple querystring variables using the ampersand ( "&" ) to combine them. The following URL uses both the color variable and the size variable to determine what widgets to display to the reader.

yourdomain.com/products?color=blue&size=small

HTML does not parse these values, but you can use JavaScript or your back-end language of choice to parse and display page content based on these values.

What Does a Web Designer Do?

A web designer creates the layout for your web pages. Most websites use the same layout throughout the entire site with slight variances depending on the page. For instance, a home page would use the same color scheme and logo, but product pages would have a slightly different layout than the home page. Web designers are in the business of making sites attractive, easy to navigate for users, and search engine friendly for bots to properly read and parse content. Web designers must know HTML to work with design, but other languages that are good to add to your toolbox are jQuery or JavaScript, CSS, and a backend language such as PHP or C#.

What Do You Need for Web Design?

There are several tools on the market for web designers. You should first learn to recognize and work with HTML syntax before using any kind of tools that automatically create syntax. There are two major web design software on the market: Visual Studio and Dreamweaver. Visual Studio is a Microsoft product and is mainly used with .NET websites. Dreamweaver is a visual tool that helps designers create websites, and it's mostly used with PHP. Of course, there are other tools on the market, but these are the most popular. Most designers have a copy of Adobe Photoshop for editing images. You should also have a CSS editor handy. Notepad++ is great for editing several languages including CSS.

When you choose a designer, look for one that allows you to build CSS scripts, works with JavaScript, doesn't interfere with any back-end coding on the pages, and helps build responsive, mobile friendly designs.

What Should You Learn?

This class focuses on HTML5, which is the basic syntax and language of the web. However, you should learn several other languages when you want to work in the web design world. First, a dynamic back-end language is useful. If you prefer to work in a Linux environment (Apache), it's best to learn languages that are native to Linux such as PHP. PHP is also used with pre-package software such as Joomla and WordPress, so knowing this language will help you build designs for these types of sites. C# and VB.NET are the languages for Microsoft websites.

You'll need to add CSS to your languages, because CSS is the design language for the web. HTML5 displays the content, but CSS is the language that lays out the content in specific areas of the site.

JavaScript is another necessary language for the web. JavaScript (JS) is a client-side language that integrates with the browser and web page to create dynamic front-end designs. For instance, when a user clicks a button, you can open a menu item from which the user chooses another input option. These drop-down menus are controlled by JavaScript. JavaScript makes dynamic user interfaces (UIs) faster because the user does not need to wait for another web page to load as he navigates through your website.

The Need for Speed and Responsive Design

Speed should always be a consideration when designing your website. Since Internet speeds have improved through the years, users expect websites to serve content quickly. Mobile apps have increased the need for faster UI and user experiences. Mobile devices such as phones and tablets still don't support the bandwidth, storage and memory that desktops support. The success of a website is dependent on support of mobile devices, which means you need to design code and images for slower bandwidth and smaller screens.

Responsive design works with your desktop design. Responsive design uses HTML5 and CSS3 to respond to the screen sizes of your visitors. For instance, if a visitor on an iPhone opens your site, the design "responds" to the screen size, and the layout is readjusted to make it easier for the iPhone user to read your pages. If the same user opens your site on a desktop web browser, the site then readjusts again for the larger screen. The design is said to be responsive since it caters to different screen sizes without changing much code.

Responsive design works through variables called media queries. These queries speed up the load times of your pages. Your images should be reduced in size, text should be larger, and the layout should cater to the screen size. The HTML content on the site is generally the same. The only difference is that the content readjusts for smaller screens and lower bandwidth speeds.

Responsive design is a step up from standard HTML5. It takes a bit more skill to work with responsive designs, because you need to also understand how CSS works. You can incorporate responsive design with some tools. For instance, Twitter Bootstrap is a CSS and JavaScript download that helps you make responsive designs without too much coding. Before you use these tools, it's important to first understand how the CSS and HTML code works. This will help you work with the tools and edit the code where appropriate.

With HTML5, CSS, and responsive design, you can make a fully functional website that caters to visitors as well as bots. HTML5 is the foundation for web pages, so it's a good place to start when you want to learn web design. You might just want to understand your website better, redesign your own site, or take your development to a different level. Whatever your goals, this class is a good place to get started.