Overview of Web Development

 

 404 Status Code

 

 

How Do Browsers Work?

All of the following steps happen in a split second:

1. When a user types in a URL and presses enter, the server processes the request and sends the HTML file back to the client. HTML files hold the content of a website and they also contain links for any additional assets or code that are needed to display the site properly.
2. The browser will begin to search for elements in the HTML file and it will start to make additional HTTP requests for any other external resources used by the HTML file. This often includes:

• One or more CSS stylesheets. CSS stands for cascading style sheets; CSS creates the style and layout of a web page. The browser will request the CSS stylesheet, and when the server sends it back, the browser analyzes the CSS and starts applying the visual styles to the content of the site.
• The request-response cycle also sends website assets, like images and videos, from the server to the browser. If these files are large, there might even be a noticeable delay before they are rendered by the browser.
• One or more JavaScript files. JavaScript makes the webpage interactive. This programming language functions as the “behavior” of the web page. A webpage that does not use JavaScript is known as a static webpage.

Web 2.0

Now that we’ve covered some of the basics of how the internet works, let’s check out some trends that are fundamental to the emergence of modern web development and modern JavaScript.

The earliest static websites were composed of text, images, and links, with very little interactivity beyond browsing from one page to another. These websites are called static, which means lacking in movement because they do not change based on user behavior. As internet connection speeds and web technologies progressed, more complex interactions became possible on the web.

A collection of advances in the early 2000s created a cluster of web applications that are often called “Web 2.0”. In comparison to early static websites, Web 2.0 applications are often defined by:

• Providing a dynamic user experience by offering content that responds to user input without forcing the page to reload. In the early web, user input would typically take the user to a new page — and they would have to wait for the new page to load. In Web 2.0, websites could just update selected regions of the page, avoiding the interruption caused by reloading.
• Emphasizing user-generated content and social sharing. In the early web, content was generally authored by a single source. The rise of blogging, social media, and wikis in web 2.0 meant that users could generate content and share it with their friends.

There were important technical advances that enabled each of these advances in the user interface of the internet. For example:

• jQuery was the first JavaScript framework that could fetch data while the web page is running.
• The rise of web frameworks that connected to databases, like Spring, Django, and Ruby-on-Rails, enabled user-generated content to effectively be created, stored, and displayed.

What are the differences between Web 1.0 and Web 2.0 pages? The answers are in these screenshots.

On the left, the Web 1.0 page is static: it does not respond to user behavior and the content is the same for all users.

On the right, the Web 2.0 page is:

• Interactive — you can Like and Comment on the page
• Dynamic — the time since posting (currently “12 hrs”) updates without reloading the whole page
• Allows social interaction — a lot of friends liked this image!

What is Web Development

The four main languages that Alejandra needs to learn include:

• HTML — structures website content
• CSS — applies styling to websites
• JavaScript — adds interactivity to websites
• SQL — allows your web application to store and retrieve data

What is HTML(hypertext markup language)?

HTML is the skeleton of all web pages. It provides structure to the content on a website, including text, images, buttons, videos, and more.

HTML is a practical place to start learning to code. You can build basic websites after learning just a little HTML, with text, images, and videos. You can always open up your work-in-progress website with your browser and see what you’re building.

HTML stands for hypertext markup language. 

HTML Markup

The ML in HTML stands for markup language. Markup refers to a way of annotating text that is distinguishable from the text itself. The same way that a teacher might “markup” a student essay by underlining topic sentences and circling spelling errors, HTML annotates the content within a web page.

 HTML Elements

HTML tags are the “markup” for HTML. They are annotations that provide information about the type of content they contain. 

 

let’s quickly review each part of the element pictured:

• HTML element — a unit of content in an HTML document formed by HTML tags and the text or media it contains.
• Opening Tag — the element name used to start an HTML element. The tag type is surrounded by opening and closing angle brackets.
• Content — The information (text or other elements) contained between the opening and closing tags of an HTML element.
• Closing tag — the second HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them, directly after the left angle bracket.

Common Tags

<h1>Jetsetter Travel Agency</h1>
<p>With over 25 years of experience in concierge, high-end travel planning, we'll provide you with the highest quality services. Every vacation is unique, custom, and tailored to your tastes.
Click here!</p>
<button>This is a button</button>

Hypertext and the World Wide Web

The H and T in HTML stands for hypertext. Hypertext is text that is linked to other text. This diagram shows different websites that are connected to each other through links, which are represented by arrows.

What’s so hyper about hypertext? The prefix hyper indicates that the text expands beyond the traditional constraints of the written word. Instead of reading documents from beginning to end, like you would read a book, someone going through hypertext can browse. By clicking on links from one document to another, the user can navigate to whatever page they find the most interesting and carve their own unique path through the web.

Adding Hyperlinks

Links are created in HTML with something called the href attribute, which stands for hyperlink reference. The href attribute allows us to specify the URL, or address on the web, that a link should take users to.

<img src="img_chair.jpg" alt="Oak desk chair">
The src attribute here specifies the path to the image, and the alt attribute provides a text description of the image.

The href attribute is used to specify the path of a hyperlink.

<a href="/book/5">More information</a> about this book is available from the publisher.

What is CSS?

CSS is the language that provides style to the content of an HTML page. This includes colors, fonts, positioning, layout, and more!

Applying CSS

 What is JavaScript?

Any website that provides more than just static information probably utilizes JavaScript in some way. Here are some familiar examples of website features most often built with JavaScript:

• popup ads
• animated graphics (2D or 3D)
• interactive audio and video
• maps and other features access the user’s geographic location
• and much more!

One of the defining features of JavaScript is its ability to respond to browser events. These events happen in real time and can be triggered by a wide variety of user interactions, including:

• the user clicking on a button
• the user pressing enter on their keyboard
• a video file finishing loading
• the user re-sizing their window
• the user hovering over text on the webpage

 JavaScript Functions

• Functions allow us to write a chunk of code once that can be reused over and over.
• Events allow JavaScript to respond to user behaviors, like the user hovering their mouse over an HTML element or resizing their window.

Events and functions combine to give JavaScript the ability to create interactive experiences. When an event is fired, a function is executed. This pattern is used again and again in web development to create interactive websites.

<!--
 * @Author: Maxwell Pan
 * @Date: 2022-10-23 22:03:28
 * @LastEditTime: 2022-10-23 22:03:35
 * @FilePath:\code\JavaScriptFunctions.html
 * @Description: 
 * Software:VSCode,env:
-->
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">

  </head>

  <body>
      <button onclick="changeColor()">Repaint!</button>
  </body>
  
      <script>
        function getRandomColor(){
          let letters = '0123456789ABCDEF';
          let color = '#';
          for (let i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
          }
          return color;
        }
        function changeColor(){
          let newColor = getRandomColor();
          document.body.style.backgroundColor = newColor;
        }
    </script>
  
</html>

What is SQL?

SQL, which stands for structured query language.

You might be familiar with SQL as a language that Data Analysts and Data Scientists use to query and analyze data.

SQL stores information in tables, which is simply a collection of information organized into rows and columns.

Web developers and software engineers also use SQL to build apps that can save, modify, and access data. There’s even a growing field of data engineering, which is a specialized subset of software engineers who ensure that the applications they are working with accurately and efficiently record all of the required data.

In building out the features that she needed for her business’s application, she learned about the four languages that form the core of the World Wide Web today:

• HTML — structures website content
• CSS — applies styling to websites
• JavaScript — adds interactivity to websites
• SQL — allows your web application to store and retrieve data