HTML5 AND CSS3 COURSE
ELEMENTS
The tags and the code written between them are called "elements." Here is a diagram that shows this:
USING ENCODING AS A DEVELOPER
As a developer, you can assign which encoding system you're using. The default encoding system for HTML5 is UTF-8. Understanding char sets and encoding is also useful in debugging data that isn't displaying correctly.
TESTING CODE
It is wise to regularly test your code as you're writing it. One way to do this with HTML is to save and run the code every few minutes, even if you aren't done with the website yet. Failure to test code can often result in your website not displaying properly and you're left sifting through a large amount of code attempting to locate the error(s). By running your code every couple/few lines, you can spot any errors as they come up.
DECODING
Have you ever opened a file and the document was displayed incorrectly? In order to properly display characters when opening a file, a program (like a text editor) must know which encoding system was used. In most browsers and programs, you can choose which encoding system to use. You can also typically specify the encoding type when saving a file. One of the encoding options for Notepad documents is UTF-8. ]
HEADINGS
Heading elements allow for placement of heads (titles) of sections. They're broken into sizes <h1> through <h6>. <h1> = largest <h6> = the smallest
REAL TIME
Real time: This refers to a transmission of data or signal as soon as it is generated. This is best illustrated by the concept of watching a sporting event on TV. The cameras at the event are capturing the game play and broadcasting it to televisions around the country. In one scenario, there is little to no time lag between when an event occurs at the game, and when the viewers at home see that event. This is "real time." In another scenario, the events of the game are recorded, and then viewed at another time. This can be called "delayed playback." The delay can be a few seconds, an hour, a day or any other length of time. This applies in any situation where the stream of information that is produced can be accessed as it is produced - that is, in "real time." EXAMPLE: If the Super Bowl is happening, and you watch it as it happens, that is real time. If, instead, you record the game and watch it later, that is delayed playback.
RUBY ON RAILS
Ruby on Rails: Ruby on Rails is a web application framework (set of tools for making web-based programs) that is written in Ruby. It is popular, and has been used to create many different web sites and web-based software. EXAMPLE: Groupon, Shopify and Airbnb are built on the Ruby on Rails framework.
STATIC VS DYNAMIC
Static website: "Static" in this sense means "rigid; unchanging." Static web sites are delivered to the browser exactly how they were stored originally on the web server. Static web pages don't change. No matter who is accessing the web site, it looks the same. Most web sites nowadays are dynamic, meaning that the appearance and content of the web pages can be changed on the web server before the web page is sent back to the browser, or it can be changed by the browser on the user's computer before being displayed on the screen. EXAMPLE: In the 1990s, most websites were static.
CODE POINT
Technically, when speaking of character encoding, the numerical value assigned to a specific character or format is called a "code point." For example: ASCII has 128 code points. In the chart below, you can see some of the code points in the ASCII character set (032-127):
GOOGLE CHROME
We recommend utilizing Google Chrome as your web browser because it works with all major programming and markup languages. If you don't have it installed on your machine yet, download and install it now.
ASCII VS. UNICODE
Whereas the standard ASCII character set can only support 128 characters, Unicode can support about 1,000,000 characters. Another difference between Unicode and ASCII is that ASCII utilizes one byte (8 binary digits) to represent each character. Unicode utilizes between one and four bytes to represent characters.
Main
MAIN The HTML <main> element represents the most important content of the <body> of a document or portion of a document. It consists of content that is directly related to or expands upon the central topic of a document. On a blog post, the <main> element would be where the article is placed. There should only be one "main" element per HTML page.
ID ATTRIBUTE
"Id" is short for "identification". One of the most popular attributes is the id attribute. The id attribute specifies a name for an HTML element. For example, you can assign a specific <p> element the id (name) "paragraph" Now that you have that id, you can later reference (bring up; refer to) it in your code later. You will learn exactly how to do this and why it's useful in an upcoming step. Ids are specific and you can only utilize one id per element. For example: you cannot assigned the same <h1> element two different ids. Also, you cannot use the same id name for two different elements. Ids must be specific to one element. As a note: ids cannot contain any spaces.
CHARACTER SETS VS ENCODING SYSTEMS
A character set (called "char set" for short) is a standardized set of characters. An encoding system is a standardized way to translate characters into binary. In the UTF-8 encoding system the character A is assigned 01000001 in binary, and in UT-16 it is assigned 00000000 01000001. Char sets are transformed into binary by encoding systems. Unicode primarily defines two things: 1. A character set (Unicode includes the characters needed for nearly all of Earth's languages). 2. Several encoding systems (as covered earlier, the most popular are UTF-8 and UTF-16).
INTERFACES
An interface is a device or program that enables a user to communicate with a computer, or enables one computer to communicate with another computer. A user interface is something that someone using a computer can view and interact with that makes the interaction with the computer easier or smoother.
STATE 2
A computer program that runs within one of these distributed systems is called a distributed program or a distributed application. In this type of application, there are usually several individual computer programs installed on the various computers in the network. These programs are designed to work together. Each program will perform some function that relates to the overall purpose of the distributed application. Together, this system of networked computers and programs will accomplish the overall purpose of the distributed application. The use of the term "state" that we will examine here revolves around a distributed application structure called "client/server". In this structure, one or more of the computers in the network are arbitrarily designated as the servers, and one or more other computers are designated as clients. A server acts as the provider of a resource or a service; a client acts as a requester of that resource or service. The server can do things like sending files and images or processing some data the client gave it. The primary factor that applies when computers are communicating and passing data is the concept of a protocol - a precise description of how to structure, send, receive and process data of a specific type. Distributed applications need a protocol that governs how the various elements in the system communicate and coordinate their actions.
CLASS ATTRIBUTE
Another one of the most popular HTML attributes is the "class attribute". This is similar to but different than the id attribute. The class attribute is used to assign names for elements as well but differs from the id attribute because with the class attribute, you can assign multiple names to a specific element. Class and id attributes will be covered in more detail in upcoming steps but are mentioned here as two of the most popular HTML attribute
CLI
CLI: Stands for command-line interface. An interface is a device or program that enables a user to communicate with a computer. The command line is an interface where you can type commands into a computer. The command line allows you to perform many actions, including: moving files, deleting files, copying files, starting computer programs, etc. While these actions are typically done with a mouse, they can also be handled by typing words into a command line. As opposed to GUI (Graphical User Interface; a representation of the various objects in a computer - files, programs, etc. - in a visual form), CLI is where you control a computer and interact with it by simply reading and typing text onto the computer screen. EXAMPLE: If you type: copy schedule.txt "2016/August" "2016/September" into a CLI, you can copy the file "schedule.txt" from a location called "2016/August" to another location called "2016/September".
SYNTAX
Every spoken language has a general set of rules for how words and sentences should be structured. These rules are known as the syntax of that particular language. In programming languages, syntax serves the same purpose. Syntax is the rules you must follow when writing computer programs. Each language has its own syntax. Failing to use the syntax of a particular language correctly can mean that whatever program you are designing will not work at all. For example: If a computer language required you write "cmd:" (meaning "command") at the beginning of each instruction, that would be part of the syntax of that language. And if you didn't write "cmd:" at the beginning of an instruction, the computer would not be able to process and execute the instruction because you violated syntax. If you wrote the <title> tag like this: <ttle>, there would be a syntax error and your web page wouldn't display properly (in this case, the title wouldn't display).
ASCII
In addition to the nearly 100 symbols used to represent the letters, numbers and punctuation of the language, ASCII also includes control characters - symbols that aren't meant to represent printable characters, but instead represent instructions to control the various pieces of electronic equipment that would use the ASCII characters - printers and monitors, for example. These are instructions such as "backspace" (to delete the character immediately to the left of the current position of the printing mechanism) and "carriage return" (to move down to the next line of printing and return to the far left of the page). Since computers operate in binary, the characters in character sets must each be translated into binary. This is done through character encoding. This typically goes through this process: Character (CONVERTED TO →) Hexadecimal (CONVERTED TO →) Binary
JAVASCRIPT
JavaScript is a computer language that is able to work on most computers. It is useful in making websites. JavaScript is used mainly to make websites more dynamic (describing websites that have content that changes based on user action or other factors, rather than being static in appearance and content). There are many other uses for JavaScript; it is used in the creation of many different types of computer programs. EXAMPLE: JavaScript can be used to make videos that start to play as soon as a user moves their mouse over the video.
PARSE
Parse: To break something up into its parts and analyze it. In computing, it means that the program code is analyzed and read. EXAMPLE: If you write code for a web site, the web server parses the code and then outputs the correct HTML code to the browser. Parsing can also refer to breaking up ordinary text. For example: Search engines typically parse search phrases entered by users so that they can more accurately search for each word.
RUBY
Ruby: Ruby is a popular programming language. Some of the main features of the language are the fact that it is suitable for writing scripts as well as robust object-oriented programs. It was created in the early 1990's in Japan, and started to become popular in America in the late 2000's. EXAMPLE: Sass (a popular set of technologies for beautifying websites) was created in Ruby.
CREATING AN ELEMENT
To define an element on the HTML document, we need to use an opening and closing tag. For example: to create a paragraph, we would write: <p> This is a paragraph. </p> Which would simply display: This is a paragraph. If we fail to include either the opening or the closing tag for our element, we will create errors within the document. There are exceptions to this rule; there are a few elements that do not require closing tags. However, for the sake of simplicity, assuming all tags require a closing tag is a good rule to follow.
UNIVERSAL CODED CHARACTER SET (UCS)
UCS is a standard set of characters defined by the International Organization for Standardization (ISO) - an organization composed of representatives from various standards organizations across the world. The ISO exists to monitor and promote international industrial and commercial standards. Under the umbrella of the UCS, the ISO created the UTF character encoding systems - including UTF-8 and UTF-16. UCS-2 is a character encoding standard where characters are represented by a fixed length of 16 bits (2 bytes). UCS-2 allows for a maximum of 65,536 characters. For example: in UCS-2, an uppercase A is represented by 0041. It should be noted that in 2017 the ISO stated "UCS-2 should now be considered obsolete. It no longer refers to an encoding form in... the Unicode Standard." UTF-16 is an extension of (improvement upon) UCS-2.
UTF-16
UTF-16 is another popular Unicode encoding. UTF-8 is used far more on the web - UTF-16 is used by less than 0.01% of web pages. The main reason UTF-16 is used less in websites is due to the fact that the official documentation on HTML 5 strongly discourages the use of UTF-16 for websites, mainly because it wasn't originally created with web use in mind (that was left for UTF-8) and it is considered less secure for online use. UTF-16 is used by Microsoft Windows and Mac OS X's file systems. It's also used in the programming language Java. UTF-16 is capable of utilizing all 1,112,064 code points of Unicode. Here is a website that shows the full character list for UTF-16: https://www.fileformat.info/info/charset/UTF-16/list.htm
UNICODE
Unicode is another standard for representing letters and symbols in computers. Unicode is intended to represent all languages across the world, not just English. Each letter and symbol of the various languages of the world has a specific number in the Unicode system. This is important because computers are much more useful if they can display data in the language of the user. Developers needed a way to clarify what letters or symbols to use in their programs if the user wanted the data displayed in another language. It was necessary that all computer manufacturers agree on this system so that computers could be used globally. For example: in Unicode the letter "A" could be represented as 0041.
STATE 3
When we look at the Web, the protocol at work is the Hypertext Transfer Protocol (HTTP). When a client establishes a connection to a server using this protocol, a "session" is begun. Here, a session is a temporary and interactive exchange of information between two computers using HTTP. Once the server sends the requested data, the session is ended. This illustration sets the stage for examining the use of the term "state" in the web and web development. Often, the server is the central place used to store information that can change over time. An example might be a list of customers. This list could change at any moment, as new customers are added to the list, or existing customers are removed. The contents of that list at any given point in time are called the "state" of the list.
XML HTTP REQUEST
XHR: Stands for XML Http Request. XHR is a set of APIs that can be used by some scripting languages (such as JavaScript). It is used to transfer XML (and other such data) to and from a web server using HTTP. XHR works by establishing a communication path between a web page's client-side and server-side and can be used to transmit many different types of data accurately (including HTML, XML, JSON, etc.) EXAMPLE: Google Maps uses XHR in transmitting data (maps, directions, etc.) to and from your computer.
SCRIPTING
A script is a set of computer instructions that automates a task, so that a multi-part task can occur without your involvement. Scripting refers to the creation of scripts. A scripting language is a computer language used to make scripts. Often the tasks these scripts accomplish are valuable to automate, so that the task steps don't have to be entered into the computer again every time you want to do those tasks. The origin of the term was similar to its meaning in "a movie script tells actors what to do": a scripting language controlled the operation of a normally-interactive program, giving it a sequence of work to do all in one batch. For instance: one could put a series of editing commands in a file, and tell an editor to run that "script" as if those commands had been typed by hand. Another example could be a script that checks for new orders created at a manufacturing company every ten minutes, and prints them off on a printer.
ATTRIBUTES
An attribute is a word or phrase used inside an element's opening tag that controls the element's behavior. For example: the image <img> tag allows you to place images inside your webpage. While the src (source) attribute gives the location of the image (where the image is being displayed from). The image tag tells the browser where to put the image, while the src attribute gives the URL to pull the image from.
CHARACTER ENCODING
Character encoding: This is a system where numbers, letters, etc. are represented by codes. The codes used are in a form that computers can easily understand. The system used for each type of code depends on how that code is going to be used. EXAMPLE: The letter "A" could be represented by the code "65". Usually, the actual codes for a letter, number, etc. are in binary (a number system that uses only 1s and 0s). Every letter or symbol has a unique number so that the computer knows what letter or symbol you mean, and this is called character encoding. EXAMPLE: The letter "B" might have 1000010 as its character encoding.
BODY AND TITLE ELEMENTS
The <body> element is used to house all of the content (text, images, links, videos, etc.) in an HTML document. The body of an HTML document is contained within the <body> and </body> tags. The title element is where you write the title of the document (in between the <title> and </title> tags).
BODY ELEMENTS
The content placed between <body> and </body> make up most of the content on the page. It consists of nearly anything the developer can dream of, such as: embedded video, images, text, animation, tables of data, advertisements, even music. The sky's the limit, but within the body tag is where you'll place it. We use charset to set the exact character set we're using and as mentioned earlier, UTF-8 is used for over 90% of websites. The W3C actually recommends using UTF-8 for all websites.
USING ELEMENTS TO CREATE AN HTML PAGE
The first tag contained in an HTML document is the <html> tag and at the end of the document you end it with the closing html tag </html>. These tags are required to produce a web page - the text and markup tags placed between the <html> and </html> tags form the overall web page. You can specify the language being used in your code within the <html> tag. For English, you would write: <html lang="en" Virtually any language can be specified this way. For example: Spanish is abbreviated "es" and French is abbreviated "fr".
UNDERSCORES AND SPACES
The underscore symbol "_" is a short horizontal line. Occasionally you'll see file names with underscores in them, like: Bird_Picture_1 It is a common practice of developers to use _ (underscores) and - (dashes) to represent spaces in file names. Why is that? Here are some reasons: 1. In some original command-line interfaces, spaces were represented by underscores or dashes. Some CLIs and operating systems wouldn't even allow the use of spaces in file names and doing so would cause errors. 2. In URLs, spaces are represented with the characters "&20". This is because the space character is character number 20 in the ASCII character encoding system. Using underscores can result in a cleaner address. For example: learncodinganywhere.com/the&20tech&20academy versus learncodinganywhere.com/the_tech_academy. And so some use underscores as spaces because using spaces can occasionally cause issues and due to how they affect the appearance of URLs.
STATE
A key technology term is "state". It basically means, "the condition or status of a thing at a specific point in time". This concept of state is used in various ways in technology, and it has more precise meanings in those contexts - but it usually means "what's the state of this thing at this exact time?". We're going to examine the way this concept applies to the Web and web development. To start, let's review some basic elements that apply to communication between connected computers, or networks. One reason to create computer networks in the first place is to allow for the design and operation of what is called a distributed system. A distributed system is a computing system in which the various elements of the system are located on different computers on a network. In this system, the various computers communicate and coordinate their actions by passing messages to each other.
AJAX
AJAX: Stands for Asynchronous JavaScript and XML. XML is an acronym for extensible markup language. This means that computer programmers can create their own document structure, and then use XML to specify markup instructions for the data in those documents. Asynchronous means broken down into separate pieces/occurrences without a set pattern. AJAX is a set of tools that can be used in creating asynchronous functions for web sites. AJAX is best understood by relating it to the way a normal web page is accessed by a user. With a web browser, a user issues a "request" to see a specific web page. That request is sent to the web server. That server gathers those requested files and sends them to the user's computer as a "response" to the "request", and the browser then converts them to a visual form and displays them for the user. If the creator of that web page wants to make it so that some content on the web page can change based on a user action, they have a number of different options. One method is to just send a new request for the web page, along with some instruction to provide the new content that is desired. This can take a long time, though, as every file needed to display that web page has to be sent back to the user's computer by the web server. This is where AJAX can come in. Instead of requesting that the entire page be recreated, the creator of the web site can make it so that just the new content is requested from the web server. The way this works is that user action triggers an asynchronous request to the web server for JUST a specific section of the web page. It is asynchronous in that it is not tied to the full "request" - "response" - "page display" process used for a full web page. The technologies used to accomplish this feature are JavaScript and XML - hence the name "AJAX," or Asynchronous JavaScript And XML. EXAMPLE: If you are viewing a web page, AJAX can make it so that when you click on a video, the video is sent over from the server - as opposed to the video and the rest of the entire web page.
API
API (Application Program Interface): An API is a collection of methods that allow different programs to communicate with each other. It is basically a way that a computer program can tell other programs, "If you want to give or get information, here is the exact way you'll need to ask me." The reason programs would have an API is so there is a description of the standard way other programs can access that program. That way, any programmer who has a description of the API for a particular program can make another program connect to the API. If there is no API for a program, other programs can't access that program easily. While the concept of APIs applies to any type of computer program, it is most often used to describe a function that websites can implement. Here, a website can have a specific computer program on the web server that can send and receive data to other websites, without any human interaction. The only thing needed for this system to work would be a description of how to ask for or give data to that program, and a description of what the data you might receive from the program might look like. Here is an example of what a request for information from an API might look like: GET www.learncodinganywhere.com/students/studentId=435 Here, an external website wants to request data about a specific student from the website www.learncodinganywhere.com. The request includes a unique identification code for the student: 435 When the web server for www.learncodinganywhere.com receives this request, it gives it to the API on that web server - the program that knows how to interpret the request, perform the task requested, format any data that is required as a response, and send that response to the program that requested it. The people who create the API would write a description of the way to use the API (create requests) and a description of what the data in the responses will look like. This is called an API specification. EXAMPLE: If there was a software program that kept track of the inventory for a bicycle manufacturer, that program might have an API that would allow the company's dealers to connect to the program and find out how many of a certain type of bicycle were available at the manufacturer. In this case, the dealers could have a software program of their own, which would connect to the API of the software at the manufacturer and request that inventory data.
AMERICAN STANDARD CODE FOR INFORMATION INTERCHANGE
As computers are often used to represent data in written form, they must be configured to represent the various characters for written languages. Early computers were primarily created by engineers whose primary language was English, so their efforts in this direction concerned the representation of English characters using computers - specifically, representing the nearly 100 characters described earlier. In the 1960s, the ASCII (American Standard Code for Information Interchange) was created in order to standardize a system to represent English characters using computers. It contains 127 symbols, including numbers and letters. ASCII was designed for languages that use the English alphabet only. In simple terms, each character in the ASCII character set has an associated unique number. When that number is given to a device meant to use written characters - such as a monitor or a printer - the computer can look that number up in the ASCII tables, get the specific symbol it represents from that table, and then print or display that character. For example, the ASCII code for an upper case "S" is the decimal number 83, while the code for a lower-case "s" is 115. Here is a website that contains the full ASCII table: http://www.asciitable.com/
WHAT IS HTML?
Before writing HTML code, we are going to cover some of the basic terms associated with the language. HTML is a computer language that describes the appearance, content, and behavior of web pages. The web page files that are served up by a web server are written in HTML. There are two main concepts in HTML: "hypertext" and "markup." As a recap: "hypertext" is a system for linking electronic documents. In an HTML document, hypertext is words, images, videos, etc. that link to other HTML documents. When a user selects the hypertext, the linked document is retrieved and displayed on the computer screen. Markup is the action of adding instructions to a document to control the format, style, and appearance of the content of the document. This applies to physical printed documents as well as to electronic documents that are displayed on a computer screen. A markup language is a type of programming language that is used to specify markup instructions for the data in a document. In other words, markup instructions aren't the data in the document; they are data about the data in the document. HTML is a markup language. There are other markup languages. HTML is used to create web pages. A computer programmer uses HTML to put markup instructions before and after the content of a web page. These markup instructions give the computer data about the elements of the document—text, images, video, etc. When the document is actually displayed on a screen, those markup instructions aren't displayed on the screen; instead, they are used to control how the actual content of the document is displayed.
TAGS
HTML utilizes tags. Tags are how the markup of the content in the HTML document is specified. The basic principle is this: If you put special instructions before and after the content you want to affect, another program can tell the difference between the instruction and the content, and can then present the data in a specified manner. Because of this, tags usually have two parts: an opening tag and a closing tag. The content would go in between these two tags. Opening tags indicate the beginning of a markup instruction and closing tags indicate the end. Opening tags are written as a "less than" angle bracket (<), followed by the markup instruction, and then a "greater than" angle bracket (>). An example would be the tag used to make text bold. The actual instruction is the word "strong", meaning "make the text controlled by this tag stand out", usually by making it bold. The opening "strong" tag would look like this: <strong> You need to specify a closing tag, so the computer program knows when to stop making text bold. That's where the closing tag comes in. Closing tags use the same instruction as the opening tag, but with a forward slash (/) placed before the instruction (</>). The closing "strong" tag would look like this: </strong>
STATE4
How does this work? Like this: When a client computer wants to get a list of all customers, it will send a request for that information to the server. The server will gather together the list of customers AS IT EXISTS AT THAT EXACT POINT IN TIME and send that list back to the client computer. If, moments after the server sends that list to the client computer, a customer is added to or removed from the server, that data will not be accounted for in the list the client now has. How could it? The server didn't have that data at the time it formatted and sent the response to the client. Meanwhile, the client computer could be modifying the information related to one or more of the customers in the list it got - and the server will have no way of knowing that the information has changed on the client.
ANATOMY OF HTML
Hypertext Markup Language (HTML) is used to instruct browsers on how to present content to the user's screen. The open and closed tags used in HTML denote web elements. Each element works together to form a web document, and a web browser, like Chrome or Firefox, is required to parse and display the HTML and JavaScript as intended by the author. HTML can be further enhanced when teamed with other web-related languages - most commonly: Cascading Style Sheets (CSS) and JavaScript. HTML builds out the skeleton of the website, while CSS and JavaScript can be used to beautify it. The standards of HTML are governed by The World Wide Web Consortium (W3C) which is a group of individuals and organizations that work together in creating the standards for the world wide web.
UTF
If you look closely at some URLs, you may see the characters "UTF". "UTF" stands for "Unicode Transformation Format." UTF is a character encoding format that is able to utilize all of the code points in Unicode. This is needed to allow for the encoding of languages other than English. The most popular type of Unicode encoding is UTF-8. Here, the 8 means that each Unicode character is represented by one or more 8-bit binary numbers (a set of 8 binary digits is called a byte). Other UTF encodings exist, such as UTF-16, where each Unicode character is represented by one or more 16-bit binary numbers. In UTF-8, only one byte is used to represent common English characters. Hebrew, European, and Arabic characters are represented with two bytes. Three bytes are used to represent Chinese, Korean, Japanese, and other Asian characters. There are other Unicode characters that can be represented with four bytes. Another useful aspect of UTF-8 is that it is backwards compatible (able to be used with an older piece of hardware or software without special adaptation or changes) with ASCII. UTF-8 is used in the operating system Linux by default, and is commonly used for the exchange of data on the internet. Around 90% of websites in existence utilize UTF-8. Here is a website that shows the full character list for UTF-8: https://www.fileformat.info/info/charset/UTF-8/list.htm And so, many websites contain "UTF-8" in the URL which means that was the character encoding used when writing that website. You can specify the character encoding you want used within your HTML code.
CHARACTER SETS
In HTML (and all coding) you will be dealing with characters. In the written form of a language, a character is a written symbol that represents one of the various parts of that language - the various letters, punctuation marks and symbols that are used to lay out that language in written form. As an example, the English sentence "Speed limit 65 MPH!" makes use of upper-case letters such as "S" and "M", lower-case letters such as "p" and "t", punctuation marks such as " " (a space between characters) and "!", and the numbers "6" and "5". Character sets are fixed collections of these various symbols, usually containing all needed symbols for a specific language. If we took the English alphabet as an example, it is a character set containing almost 100 symbols. This includes 26 upper-case letters of the English alphabet, 26 lower-case characters of the English alphabet, the numeric digits 0 through 9, and a collection of punctuation marks.
JAVASCRIPT OBJECT NOTATION
JavaScript Object Notation - abbreviated JSON (pronounced "Jay-son"). JSON is a way to represent a specific object, using the JavaScript language. This can be useful in exchanging data between different computers or computer programs. In fact, JSON is what is known as a "data-interchange format" - a method of formatting data in a manner that is easily exchanged between different computers. This is done by using JavaScript language instructions, in a specific format, to describe the various characteristics of the object that is to be exchanged. There are two main elements in JSON that are used to describe the format of data: collections of "key/value pairs" and "ordered lists of values." A "key/value pair" is a set of two pieces of data. The first, the "key," can be text data or numeric data. It might be something like "Age" or "Name." It is used to uniquely identify a particular key/value pair, so it must be unique within a collection of key/value pairs. The second, the "value," is the actual data associated with that key. It can be any type of data that the language JavaScript can represent. This is data like text, decimal numbers, integers, true/false data, etc. In JSON, key/value pairs are written in this manner: key: value In our earlier example Student, some of the key/value pairs are: "Age": 15 "Name": "Angela Smith" An "ordered list of values" is just that - a collection of values. Again, these values can be any type of data that the language JavaScript can represent. This is data like text, decimal numbers, integers, true/false data, etc. In JSON, ordered lists of values are written in this manner: name of ordered list: [value1, value2,value3, ...] In our example Student, the only ordered list of values we have is the list of major areas of study: "MajorAreasOfStudy": ["Physics", "Computer Science"] Using our example of the Student "Angela Smith" from above, the JSON for that object would look like this: An advantage of the JSON format is that it is relatively easy for people to read and write while also being able to be understood and handled by computers.
METADATA
Meta" comes from the word "beyond". Metadata is data that gives data about, or describes, other data. Simply put, metadata means: data about data. In HTML, the <meta> tag is usually used to convey data to browsers and search engines that isn't displayed to the user. Meta elements can be used to describe pages, provide keywords to help categorize the type of information in the content of the page, note the author of the document, and more.
OBJECTS
Often in computer programming, there will be part of a computer program that defines the concept of a thing. When the program needs to create one of those things, it looks to the definition and uses it in creating one of them. Another term for these things that can be created is "Objects". EXAMPLE: A computer program for use in a school might have a definition for a thing called a Student. The program instructions in that definition are essentially answers to the question, "If I were a student, what characteristics and actions are available to me?" Characteristics of a Student object might be things like: Name Age Grade Point Average Areas of Study Actions available to a student might include things like: Calculate new Grade Point Average Add a new area of study Remove an area of study This type of definition is often called an "Object definition" or a "Class". Here, we have an Object definition for an Object called a "Student". Until the computer program is directed to create an actual "Student" object, there aren't any in the program. When the program is directed to create an actual Student object, the program looks to the Object definition of a Student and creates an actual Student. To do so, the program will need the data for that actual Student - their name, their age, their GPA. It will then create a "Student". This "Student" is a collection of data, stored in the computer memory, that defines an INSTANCE of a Student. That is, it is a single occurrence of the type of thing defined by the Object definition called "Student". EXAMPLE: If a 15-year-old student named Angela Smith enrolled at a school to study Physics and Computer Science, and her Grade Point Average was 3.25, the Student Object created in the computer program might look like this: Object type: Student Name: Angela Smith Age: 15 Grade Point Average: 3.25 Major areas of study: Physics, Computer Science The computer program will now maintain all the data about this instance of a Student object in computer memory, as long as it is instructed to do so.
CACHE
Pronounced "cash." A cache is a collection of items stored somewhere for use at a later time. For example, a weapons cache is a place where weapons are kept until they are needed. In computers, a cache is a set of computer memory where data can be stored for later use. One of the most common uses for a cache in computers relates to situations where there is a significant time delay in acquiring certain data. In order to provide a faster user experience, the computer will store the data in a cache after the first time that data is used in order to avoid having to read the data from a slower device or without having to dig around in the computer to find the information again. Files that you view from a cache may only take 2 or 3 seconds to display on your screen, while something new could take 30 seconds to be acquired, prepared for display and then displayed.
FOOTER
The <footer> tag defines a footer for a document or section. A footer element typically contains: authorship information, terms and conditions, copyright information, contact information and links to a company's social media accounts. The bottom of most websites is the footer. It is an important part of a webpage because it is usually used to give the user information needed to contact the primary owner or manager of the website.
HEAD ELEMENTS
The <head> element is a container for metadata pertaining to the HTML document itself, and should be placed between the opening <html> tag and the opening <body> tag. Head elements can contain: 1. Titles 2. Scripts (code that automates a task, so that a multi-part task can occur without your involvement) 3. File attachments (such as CSS files, JavaScript files or even custom fonts) 4. Character encoding 5. Meta data It is typically placed near the top of an HTML file.
NAV
The <nav> tag defines a set of navigation links. Navigation links are typically included on nav bars (a rectangular strip that includes links to the main pages on a website) To create the above pictured navigation links, we would write our HTML code as follows: <nav> <a href="home page file name or URL">HOME</a> | <a href="about page file name or URL">ABOUT</a> | <a href="FAQs page file name or URL">FAQs</a> | <a href="contact page file name or URL">CONTACT</a> </nav> Typically the nav element contains implicit links - meaning links on most nav bars on websites don't usually take you to another website altogether.
HTML STRUCTURE
The HTML code at the top of most webpages is the <!DOCTYPE html> declaration. This is an instruction to the browser that states the version of HTML being used. As of 2019, HTML5 is the latest version. In the HTML document, the code <!DOCTYPE html> tells the browser that the code that follows is written in HTML5. Please note that in HTML5 there is no need to specify the version number explicitly. Also, the <!DOCTYPE html> declaration is not a tag (note there is no closing tag [</>])- it is an instruction to the browser. There are different doctype declarations for earlier versions of HTML and for other web development languages. You should always include the <!DOCTYPE html> declaration at the top of all HTML code.
ANCHOR TAGS
The anchor <a> element is the HTML code used to create a link to another page. It instructs the browser to display content from another document (typically a web page). As a note, by default, most browsers display such links as follows: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red here is what it would look like: <a href="https://learncodinganywhere.com/">Check out the Tech Academy!</a> With the anchor element, it is common to include the "href attribute". "Href" is an attribute and is short for "hypertext reference". This attribute contains the name of the resource or document that the author intends to link to.
THE BASIC HTML TEMPLATE
The code we just laid out is actually the recommended template for all HTML web pages (meaning, regardless of what you add to the webpage, start with that code). Here it is again for reference: <!DOCTYPE html> <html lang="en"> <head> <title>Write title here.</title> <meta charset="utf-8"> </head> <body> </body> </html> Glancing at the basic HTML example structure, you will notice that there are opening tags and, further down the page on the same indentation level, there are the corresponding closing tags. It is good practice, as you develop your HTML skills, to use indentation. Although an HTML document does not require any indentation, it will certainly make your code easier to read and more manageable to work with.
HYPERTEXT REFERENCE
There are two kinds of href attributes: 1. Implicit 2. Explicit In English, "implicit" means "implied, though not plainly stated". And "explicit" means "stated clearly and in detail". Implicit href attributes are used to create a link to another webpage that is located in the same folder as the page the <a> tag is in. If we use the "HTML documents" folder on your desktop as an example, an implicit link would link to a file within that folder. An anchor element with an implicit href attribute would be written as follows: <a href="yourfilename.html">Whatever link title you choose</a> Whereas an explicit href attribute links to a file not contained within the folder(s) associated with your website. Typically explicit href attribute links are to external websites (other websites). The href attribute from the previous step (<a href="https://learncodinganywhere.com/">Check out The Tech Academy!</a>) is an example of an explicit link. Both of these will be clarified further in the next two assignments.
STATELESS
This situation comes about because of the nature of the Hypertext Transfer Protocol. HTTP is what is called a "stateless" protocol. More precisely, this means that neither the client nor the server are aware of the state of the other at any particular point in time. When the Web was first being created and used, this wasn't much of an issue, because the various web pages that were stored on servers didn't change based on which client was accessing the web page. Now, however, the web pages that are served up to clients often need to be stateful - that is, the web page content needs to be modified to reflect the state of the client and/or the server. The "list of customers" example above should illustrate this. Because of this fact, various systems have been devised that seek to keep the state of the client and the server synchronized. In other words, they try to make the HTTP protocol, which is inherently stateless, into a "stateful" protocol - meaning, the various actions that take place on the server and the client are remembered and accounted for. One approach, for instance, is to create a persistent connection from the client to the server, so that changes in one can be immediately communicated to the other. In our example above, this could mean that, in the event a customer is deleted from the server after a client has been given a list of customers, then the client is notified of the change and changes its list to reflect the change. As you work in web development (and other development where a client/server system is in place), you will see various tools and systems in use that revolve around this concept of state.
EMBEDDED CONTENT
To embed means to fix something firmly. Content that is included as part of a page is referred to as "embedded content". This typically refers to content that exists on another website. A common example is an embedded video. This would be like taking a video from YouTube and displaying it on your website.
ASCII -2
Using the ASCII codes, the earlier sentence "Speed limit 65 MPH!" would be represented in decimal numbers in this manner: 83 112 101 101 100 32 108 105 109 105 116 32 54 53 32 77 80 72 33 Using the ASCII codes, that same sentence would be represented in binary numbers in this manner: 01010011 01110000 01100101 01100101 01100100 00100000 01101100 01101001 01101101 01101001 01110100 00100000 00110110 00110101 00100000 01001101 01010000 01001000 00100001 Those binary numbers are the actual data that would be given to the computer in order to create the sentence "Speed limit 65 MPH!". ASCII does not contain symbols or characters like: è, ñ, ü, ©, or characters from other languages like Chinese or Arabic. As there are many different written languages in use on Earth, a system was needed that accommodated more than just the English language. As a developer, in creating software and web sites, you will utilize various character sets and character encoding, so it is important you understand these subjects and their various types.
CLEARING THE CACHE
Whenever you enter a URL into the browser's address bar, you are making a request to the web server that is hosting the website for a specific file. This file may be an HTML document or a combination of files. It takes time for the browser to load this content (it often downloads many files in order to reconstruct the webpage). To reduce the load time for future visits, the browser may store some these pages as snapshots into its memory. This action is called "caching" and each snapshot is called a "cache" file. The next time you visit the same website, your browser may attempt to load up the cached files to reduce the load time. While this is useful for speed, occasionally websites do not display correctly due to corrupted or outdated data in the cache. You may run a file or visit a site and see errors. To ensure you're viewing the correct and newest version of a website, you can clear your cache. There are different ways to clear the cache, depending on the browser you're using. Simply Google "clear cache ______(browser name)". For Google Chrome, you can click F5. This is mentioned here as a troubleshooting tip for web pages that aren't displaying properly.
