CLASS-01
How The Web Works
It is important to understand how the web works since we are going to be working on it. When we visit a website, the web server hosting that site can be anywhere in the world. Our browser connects to a Domain Name System (DNS) server to find the location of the hosting server.
- We connect to the web through an Internet Service Provider (ISP)
- We type a web address into a browser.
- The computer contacts a DNS and they provide an IP address for the requested site.
- Th browser uses the IP address to contact the web server hosting the site.
- The web server sends back the page requested to the browser.
STRUCTURE
HTML (Hypertext Markup Language) is what describes the structure of pages. Basically a text document.
- Elements: Characters between angled brackets that tell browsers how to structure a part of the web page. Elements consist of the opening and closing tags, plus its content.
- Tags: Containers that provide a special meaning to the information they wrap. They usually come in pairs:
- Opening Tags: Denotes the start of a piece of content.(e.g.) <body>
- Closing Tags: Denotes the end. (e.g.) </body>
- Attributes: Provide additional info about the contents of an element. They require a name and a value. Attributes go in the opening tag.
Markup
There are many different types of elements that tell browsers important information about an HTML document. For example:
- <DOCTYPE> Indicates which version of HTML we are using.
- <meta> Provides all kinds of important info to the the web page.
- <title> Defines the document’s title that appears in the browser’s title bar or page’s tab.
Click HERE for more examples.
HTML5 Layout introduced a new set of elements that indicate the purpose of different parts of a web page and help define its structure. (e.g.) <header> <footer> <nav>
Process & Design
It is very important to understand the target audience that will be visiting our site, the reasons why they would come visit and the information they are seeking so we can determine the likelihood of their return.
We use site maps to plan the structure and wireframes to organize the information that will go on each page.
Design is about communication. Visual hierarchy helps visitors understand what we are trying to tell them. We can use size, color, style and grouping to differentiate pieces of information.
THE ABC OF PROGRAMMING
What is a script?
A script is a series of instructions that a computer can follow step by step to achieve a goal. Computers solve tasks programmatically so we must write the instructions that way. In order to write a script we need to:
- Define the goal
- Design the script
- Code each step
Computers use data to create models of the world using objects that represent physical things. Objects can have properties that tell us info about them, methods that perform tasks using those properties and events that are triggered by user interaction.
Programmers write the code to indicate when to run it. To make pages more interactive, the code is written to interact with the HTML markup that browsers use.
How to write script for a web page?
We use JavaScript, a programming language for the web. We create a text file with .js extension. We use the HTML element <script> to tell the browser to load the JavaScript file.
Things I want to know more about
- Programming with JavaScript