Home Software Development Guide Web Development Basics

Web Development Basics

by wforbes

These are notes taken from my study for the CIW: Site Development Associate certification exam. They’ll be used to make my own full lesson pages, along with many other resources. Each section will get a page/post. These pages/posts will be available by the end of 2020.

Section 1.0 – Introduction

  • Creating Webpages (Intro)
    • Webpage creating skills are useful
    • Webpages are viewed on any devices that read Markup Languages
    • Responsive design helps make webpages usable on smaller screens
  • HTML – Hypertext Markup Language
    • Creating webpages requires knowledge of HTML
    • The standard markup language of the web, and elsewhere
    • HTML standard is administered by the W3C (w3.org)
    • HTML defines page structure, links, graphics and more
    • You can create HTML in tools like an average text editor, a GUI editor, or an Integrated Development Environment (IDE).
  • CSS – Cascading Style Sheets
    • The current version is CSS3
    • Made up of text files of rules that determine how your HTML is displayed on your webpage in the browser, these are known as style sheets
    • Defines things like font, color, alignment, and where things are placed on the page.
    • One style sheet can be linked to multiple HTML pages. Changing something in the stylesheet may affect all those pages at once. This saves time and provides consistency.

Section 1.1 – Brief History Lesson

  • Brief History Lesson
    • SGML – ‘Standard Generalized Markup Language’, made in 1986 by IBM.
      • Describes documents, separates concepts from presentation. Difficult to learn.
      • It doesn’t format appearance.
      • You have to define your own language rules.
      • DTD – ‘Document Data Type’ describes the language rules. Located in another file you reference in SGML.
    • HTML – HyperText Markup Language
      • Invented by Tim Berners-Lee and colleagues from MIT at CERN to distribute their work
      • Uses Hyperlinks, which are embedded instructions in a text file that call another location in the file or a separate file located elsewhere, usually by clicking your mouse.
      • These links between documents grew into the World Wide Web
      • HTML is much simpler than SGML.
      • HTML used to use a DTD in older versions. Now as of 2010, that’s not required.

1.2 – Tools and Editors

  • Text Editors
  • GUI Editors
    • Create code for you. Saves time but sometimes it produces illegible code.
    • Sometimes called WYSIWYG editors.
    • Then… why learn to code?GUI editors don’t stay up to date with the newest advances.
      • You can add your own code in the GUI editor.
      • You can only make basic websites, without much JavaScript.
      • Overall, you won’t be as dependent on someone else’s tech. Fees, licenses, capability.
  • IDEs (Integrated Development Environments)
    • (need content)
    • Microsoft: Visual Studio, Jetbrains: WebStorm and PhpStorm, etc.

1.3 – XML and XHTML – Extensible Markup Language

  • XML – Extensible Markup Language
    • Used to describe data elements on a webpage, and elsewhere. It structures data to form hierarchies between types of data and can provide data values.
    • Not used to format the page’s appearance.
    • It can be formatted into print documents, Web documents, PDF documents, comma-separated values, Braille, text-to-speech, a textbook, or more.
    • Often used to transmit data from one application to another. It’s human-readable, but not always nice on the eyes.
    • W3C governs the development of the XML standard
  • XHTML – Extensible Hypertext Markup Language
    • XHTML conforms to HTML standards yet is compatible with XML apps.
    • Due to the large difference between HTML and XML, an intermediary language was created to bridge the gap.
    • Meant as an upgrade to HTML.
    • Not incredibly important to know, as the last version XHTML2.0 was abandoned in 2009. There are only working drafts of an XHTML5 to be included with the HTML5 specification eventually, so it’s important to be aware of it for the future.
    • You may encounter webpages built with XHTML2.0, in which case I suggest shutting down your computer and fleeing immediately. Just kidding. Kind of.

1.4 – HTML5 – Three languages in one

  • HTML5 – The latest version of HTML
    • Includes HTML5, CSS3, and JavaScript. Together these are considered the HTML5 standard.
      • HTML5 – Structures and presents webpage content
      • CSS3 – Provides formatting and ‘look’ of a webpage or markup document
      • JavaScript – Scripting language that provides dynamic, interactive capabilities to webpages
    • This is what the modern web is built on today. It standardized and expanded many features of the previous version (HTML4.01), as well as adding many new ones:
      • <video> element to replace the use of Adobe Flash and Microsoft Silverlight
      • <audio> element to improve the incorporation of music players and radio/podcast web sites
      • Drag-and-drop capability for webpages without the need for addons
      • Native tools like download progress indicators, image captioning options, and form validation tools.
      • Options for offline storage which lets web apps run even if there are issues with the network connection
      • Geolocation feature to use GPS data from a mobile device and tie in that functionality for desktop/laptop users as well
      • and much more…

1.5 – Code Validation and Consistency

  • Markup Code Validation
  • Universal Markup Creation
    • Good coding involves ensuring that content is rendered as intended on all browsers. To ensure that, web developers can use certain practices in their coding that result in universal markup: Follow W3C standards carefully
    • Choose one standard version of the language you use and apply that consistently throughout your site
    • Creating universal markup is important because: Your pages will render in future versions of most browsers
    • Your pages will be scalable. You can add new content and improve on old content without having to revise the code.
    • Your pages will be more accessible to disabled users and meet certain legal requirements we will cover later (ADA and s508)
    • Consistent use of proper HTML5 can improve your page’s search engine ranking

Section 1 Assignments

Writing/Exploration assignment :
STEP 1 – Review W3C standards and browse the internet on some of the topics discussed. Theorize some interesting things you might do with these markup languages. It’s ok if you don’t know the details of how they would work, just brainstorm. Some examples might be:
“We could make a new language with SGML that can organize a <XYZ> app (or site)”
“We could use XML to send messages from a <XYZ> mobile app to a <XYZ> website”
(Fill in the <XYZ> with the types of apps you like).
Consider all that HTML5 can do, between video and GPS – and think about all the websites and apps you use today.
STEP 2 – Then try to figure out how the data of the app might be put into the language or technology you’re thinking about. A To-Do app might need some “Tasks”, so what types of information are important for a “Task”? “Name”, “Description”, “Time” ?
Have fun and daydream for a second!

Freeform Research Assignment:
HTML Living Standard – scroll through and learn more about HTML elements and HTML’s relationship to SGML
Extensible Markup Language (XML) at W3C – scroll through and learn more about XML
XHTML 1.0 and XHTML 1.1 at W3C – scroll through and read more about what XHTML
Check out the W3C home page and read about their mission, browse the site.
Read more about W3C Markup Validation
STEP 1 – Google/Bing search these topics now and refer back to the W3C standards: HTML, XML, XHTML, HTML5, CSS3, JavaScript, and find 5 terms from Section 1 you’re interested in.
STEP 2 – Find 2 credible and highly ranked sources (NOT ADS!), for each of these terms.
STEP 3 – Take some notes on the information they share. Skim through, Read interesting stuff, This is for YOUR benefit.
Ideas: Find something that is critical of XML or XHTML and talk badly about it. Find something that praises or explains something else. Just find new information!

Present your findings in an informal paper in your Google Docs containing:
1. Your full name (and nickname/handle), your experience in web development and your goals for the future.
2. Your Writing/Exploration assignment in 2-3 paragraphs (hint: use bullet-point lists too).
3. Your Freeform Research assignment in 11 small paragraphs (include reference links and at least 1 funny meme).

Section 1 Terminology

  • Markup Language Definitions:
    • HTML5 (Hypertext Markup Language version 5)
      • A language that requires few plug-ins and standardizes how video and audio are presented on a Web page.
    • SGML (Standard Generalized Markup Language)
      • A metalanguage that is used to create other languages
    • HTML (Hypertext Markup Language)
      • A language that describes a document’s visual layout
    • XML (Extensible Markup Language)
      • A language that describes the function and context of the information contained in a document
    • XHTML (Extensible Hypertext Markup Language)
      • A language that organizes data in a document and formats the page’s appearance in a Web browser
  • Other definitions:
    • CSS3 (Cascading Style Sheets version 3)
      • A language that allows greater style definition and formatting control of HTML elements. Formatting can be placed within the HTML or called remotely from an external style sheet.
    • Responsive Design
      • An approach to Web development that uses a series of techniques to make Webpages dynamic and accessible on all device screen sizes.
    • MIME (Multipurpose Internet Mail Extensions)
      • A protocol that enables operating systems to map file name extensions to corresponding applications. Also used by applications to automatically process files downloaded from the Internet.
    • GUI (Graphical User Interface)
      • A program that provides visual navigation with menus and screen icons, and performs automated functions when users click command buttons.
    • Metalanguage
      • A language used for defining other languages
    • DTD (Document Type Definition)
      • A set of rules contained in a simple text file that defines the structure, syntax, and vocabulary as it relates to tags and attributes for a corresponding document.
    • Hyperlinks
      • Embedded instructions within a text file that link it to another point in the file or to a separate file.
    • client
      • An individual computer connected to a network. Also, a system or application (such as a Web browser or user agent) that requests a service from another computer (the server) and is used to access files or documents.
    • geolocation
      • An HTML5 Application Programming Interface that allows developers to retrieve the geographical location information for a client-side device.

Section 2 – HTML5 Coding

Section 3 – Cascading Style Sheets (CSS3) and Graphics

Section 4 – Hyperlinks

Section 5 – HTML Tables

Section 6 – Web Forms

Section 7 – Video, Audio, and Image Techniques

Section 8 – Extending HTML

This section contains information about server-side and client-side programming languages, something they call Dynamic HTML (DHTML), then goes into further detail about features of JavaScript like HTML5 APIs, Canvas, Offline functionality, geolocation, drag-and-drop, Web app frameworks, and finally connecting to a database.

I don’t think introducing the programming side of Web Development this late in the sections is a good idea. Programming JavaScript is a major part of becoming a good web developer, so having some use of it earlier can help ease into more and more difficult topics as the course goes.

Section 9 – GUI HTML Editors and Mobile Websites

Section 10 – Web Development for Business