HTML is the foundation for web pages. Your browser parses and translates the HTML code created by web developers and displays the code in the attractive page you see as a web application. HTML5 is the latest iteration of the language's format and syntax. HTML5 deprecates some older standards such as framesets, but the new syntax introduces some useful content tags such as "video" and "audio." This article gives you an introduction to HTML5 and the language in general, so you can get started with web design and programming.
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 type
