Skip to content

Resources for MCTC Students

Continuing Education: Web Design and Development

Recommended Reading:


Tools

  • Text Editors: Atom, Sublime, Brackets, Visual Studio Code, Notepad++ (Windows only, works well for screen-reader users)
  • GitHub is a web-based hosting service for version control using Git
  • CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It functions as an online code editor and open-source learning environment, where developers can create code snippets, creatively named “pens”, and test them.
  • Extract All Links from a web page with a Chrome Extension called Link Klipper
  • URL status checkers: https://httpstatus.io/ & http://www.urlitor.com/
  • In most programming languages, quotation marks have very specific meanings. Straight quotes and backticks in software code should never be converted to curly quotes. Those marks are, of course, part of the code syntax and must be reproduced literally.

Common Terms

Accessibility: Refers to designing devices, products, and environments such that individuals with disabilities or sensory impairments can successfully use the device or product. The concept of accessible web design and development ensures easy access online—be it unassisted or through assistive technologies—for people of all abilities. “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” —Sir Tim Berners-Lee See also: Universal Design.

Alt text: Text description of a graphic that appears before the graphic is loaded into the browser. After an image has been downloaded on the browser, the alt text may briefly appear over the graphic as you rollover the mouse over the graphic.

Anchor: The anchor tag is used to define a hypertext link.

Angle brackets: Less than (< ) and greater than (>) symbols used to surround an element to create a tag.

Attribute: A property of an HTML element used to provide additional instructions to a given HTML tag. The attribute is specified in the start of HTML tag.

Broken links: Those links that do not work because the destination has been deleted or the path has been changed. Example, an http site has had an SSL certificate installed so the path now begins with https instead.

Browser: A program used to access and display HTML documents. Common examples: Internet Explorer, Netscape, and Mozilla Firefox.

CGI (Common Gateway Interface): A programming standard that defines how programs communicate with each other and with the web server. Generally, a CGI-complaint program is called a script.

Clickable map: Another name for an image map.

Closing tag: An HTML instruction that tells the browser to turn off a specific feature of an opening tag.

Comments: Information added to the code for future reference. The information may include a brief explanation for what a complex code does. Comments are ignored by the browsers but are visible in the source code. HTML comments start with .

Deprecated element: An element that will be obsolete in the future is referred to as deprecated. The element can be used today, however, it needs to be removed sometime in the future to avoid a situation where newer browsers would ignore that element.

Document content: Parts (such as text and graphics) of a web document that you want the user to see.

Document Type Definition (DTD): A specification for a mark-up language.

Domain name: The alphabetic name for a computer host mapped to a computer’s numeric IP (Internet Protocol) address.

Elements: An element in HTML refers to a tag (such as head, body, img) or element of structure of a document (such as body, title, and paragraph).

Entities: Those characters that do not appear on the keyboard (i.e., ™ ©, ®, etc.) or characters that have special meaning in HTML (i.e., < , >, &, etc.).

Form: A mechanism that enables a user to supply input to the web page author, like in a Call To Action (CTA).

Footer text: The text that is not specifically related to the content of the webpage and that appears on every webpage is referred to as footer text. The most notable example of footer text is the copyright statements at the bottom of webpages.

Frames: HTML supports frames to divide a web page into independent and scrollable sections. Having two frames on a web page is like loading three separate pages in the browser. A common use for frames is to place the navigation on the left, and content on the right.

FTP: Stands for File Transfer Protocol. FTP is a robust method for transferring files between computers using TCP/IP. TCP stands for Transmission Control Protocol and IP stands for Internet Protocol. TCP is responsible for transporting data and IP is responsible for making sure data goes to the correct address.

GIF (Graphics Interchange Format): A file format (commonly used for web pages) used for storing image files.

Hotspot: A defined area on an image that acts as a hyperlink.

HTML (Hypertext Markup Language): A web scripting language used for creating web page documents.

<html>...</html> Standard opening and closing tags for any HTML page. Enclose everything else in these. Container tag.

HTML converter: Software that converts text to HTML code.

HTML editor or Text editor: A software that inserts HTML code as you work to create an HTML file.

Hypermedia: Hypertext that may include multimedia like text, images, sound, and video.

Imagemap: A graphic that has clickable areas (or hotspots) defined to allow a user to move to another URL. A more modern approach is to overlay links on an image using CSS absolute positioning; however, this only supports rectangular clickable areas. This CSS technique may be suitable for making an image map work properly on iPhones, which can fail to rescale pure HTML image maps correctly.

Inline: Elements those that are supported directly by HTML are known as inline. Also, another characteristic of inline element is that their output can be seen or heard without the user taking any additional action (such as clicking, and installing of a plug-in) because the output is directly placed on the webpage. Inline elements include, for instance, animated graphics, graphics, and sound.

JPEG or JPG (Joint Photographic Experts Group): A common cross-platform image format that is used on the web.

Line break: Simply refers to stop of the current line and continuation to the next line. In HTML documents, the <br> tag is used to end a line.

Link: A hypertext link used to connect one document with another document or file.

Media Queries: A media query is a CSS technique introduced in CSS3. It uses the media rule to include a block of CSS properties only if a certain condition is true.

Mirror site: A mirror site is a copy of a publicly available website.

Nesting/nested tags: Nesting occurs when you place tags within other tags. Anytime you create an HTML document, you will end-up using nested tags. , and <body>, tags are nested inside the root <html> tag. The <body> tag is likely to also nest inside of itself other tags.</body></html></body>

Navigating: The act of observing the content of web for some purpose.

Opening tag: An HTML instruction that tells the browser to turn on the feature and apply it to the document content that follows.

Out-of-line: Refers to those elements that require the user to take some additional action to see or hear the output of the element. The additional action could consist of clicking or installing of a plug-in. Examples of out-of-line elements include video, 3-D models, animations, etc.

Pixel: A collection of dots that make up a screen’s display. On color monitors, a pixel contains three dots: red, green, and blue. On monochrome monitors, a pixel contains only one dot.

Robot: Software that automatically explores the web. Also known as a spider or a crawler.

Robots.txt: A text file, hosted on a web server, providing instructions to a robot or crawler about how it is allowed or disallowed to crawl a site.

Server: A software application that serves requests initiated by client programs.

Sitemap: An XML sitemap lists a website’s important pages, making sure Google and other crawlers can find and crawl the pages, and helping crawlers understand the website’s structure.

Strict (used at the top of a web page to specify HTML version): The strict version indicates that the web document does not use frames or any deprecated elements. If a web document is based on a strict definition, it must have clean HTML (meaning all opened tags must be closed, attribute values surrounded by double quotation marks, etc.)

Style sheet: A style sheet includes styling syntax (rules) that dictates how your web page will look. Style sheets are very useful as they help web developers create uniform (or consistent) presentation of web pages. Also called Cascading Style Sheets or CSS.

Syntax: Refers to the rules a computer language uses to perform a task. Without syntax, a computer language would not be functional or useful at all. HTML syntax dictates what and how a web page will display.

Syntax error: A syntax error basically refers to a situation in which the rules (or a rule) of the computer language are (is) broken. In HTML, depending on the syntax error you produce, the web page may look completely different than what you had intended.

Tags: The HTML code that controls the appearance of an HTML document’s content.

Transitional (used at the top of a web page to specify HTML version): A document defined as transitional may include deprecated elements and all the new HTML elements. However, the document cannot contain frames.

Universal Design: The design and composition of an environment so that it can be accessed, understood and used to the greatest extent possible by all people regardless of their age, size, ability or disability. An environment (or any building, product, or service in that environment) should be designed to meet the needs of all people who wish to use it. This is not a special requirement, for the benefit of only a minority of the population. It is a fundamental condition of good design. If an environment is accessible, usable, convenient and a pleasure to use, everyone benefits. By considering the diverse needs and abilities of all throughout the design process, universal design creates products, services and environments that meet peoples’ needs. Simply put, universal design is good design.

Uploading: Think of uploading as the opposite of downloading. While uploading simply means moving/sending files to the server, downloading means getting/receiving files from the server.

Viewport: The browser’s viewport is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.

World Wide Web Consortium (W3C): An organization consisting of representatives from member companies and responsible for making rules for the World Wide Web.