Internet & Web
The Internet is a global network of networks that connects computers all around the world. It is a vast network infrastructure that enables the transmission of data and information across different devices and locations. The internet makes it possible for people to access and share information, communicate with others, and perform various tasks online.
The web, on the other hand, is a subset of the internet, consisting of various web pages and resources that can be accessed through a web browser. It is a collection of interconnected documents and other resources, linked by hyperlinks and URLs. These web pages can contain multimedia elements, such as images, videos, and audio files, and can be interactive, allowing users to interact with the web page through forms, buttons, and other user interface components.
In summary, the internet is the physical network infrastructure that connects different devices and locations, while the Web is a subset of the Internet that consists of interconnected documents and resources that can be accessed through a web browser.
Development
Web development refers to the process of creating dynamic and interactive websites and web applications. It is a broad term that includes various disciplines such as web design, client-side scripting, server-side scripting, network security, content management systems, and database management systems.
Web development involves a combination of multiple programming languages, such as HTML, CSS, JavaScript, PHP, Ruby, Python, and many more. It also requires a range of tools and frameworks for code editing, debugging, testing, and deployment.
Web developers work on creating user-facing interfaces as well as server-side components that power web applications. They use various techniques and technologies to ensure efficient communication between web servers and web clients, optimize website speed and performance, and handle user requests and responses.
Overall, web development is an exciting and ever-evolving field, and has become an integral part of modern-day business operations, communications, and entertainment.
Web Skills
To become a web developer, you need to have the following fundamental skills:
HTML: It's essential that you know how to work with HTML, the language that structures web content.
CSS: Understanding of CSS is a must to style and align web content, and create visually appealing layouts.
JavaScript: This language is used to add interactivity, dynamic features, and behavior to web pages.
Server Technologies: Knowledge of server-side languages such as PHP, Ruby, Go, Julia or Python, and how to work with databases are essential to creating dynamic web applications.
Web Design: Understanding of design principles is vital for creating websites that are visually appealing, user-friendly, and meet client expectations.
Responsive Design: Creating websites that are mobile responsive to reach a wider audience is very important.
Version Control: Knowing how to use version control systems like Git can help you collaborate with other developers and keep track of code changes.
Problem-Solving: Having the ability to troubleshoot problems efficiently is vital in web development as it involves debugging code and fixing technical issues.
Communication: Good communication skills are required to work collaboratively with other developers, designers, and clients.
With these fundamental skills, you can start learning and experimenting with various web development technologies and tools to become a successful web developer.
Dynamic/Static
A Static Website is a website where the content is fixed and doesn't change unless the developer manually edits it. The content is hardcoded into HTML, CSS and JavaScript files, and these files are stored in the server where the website is hosted. The HTML content is sent to the client browser, which then renders the webpage. These websites are easier to develop and host as there is no need for a database, separate server-side code or advanced programming knowledge. However, making changes to the content can be difficult, especially if there are a lot of pages, and you need to manually edit every page.
On the other hand, Dynamic Website is a website that generates content and changes in real-time, based on user interactions, inputs or other sources of data. It is built using server-side languages like PHP, Ruby, Python or Javascript Framework such as React, Angular, Vue etc. These websites use databases (such as SQL, MongoDB, Firebase) to store data, and server-side languages/scripts to interact with and retrieve data from the database. Content can be created using server-side code, which means that the developer can change the website content without having to modify the HTML/CSS code manually. Dynamic websites can have many features such as user registration, login, e-commerce and much more, making them more interactive and engaging.
In summary, Static website contents are fixed and do not change while Dynamic website content is constantly changing based on user interaction, inputs or other sources of data.
Web Hosting
Website hosting refers to the process of storing and serving files, web pages, and other digital content for a website on a remote server that can be accessed by Internet users.
When a website is created, it consists of files such as HTML, CSS, JavaScript, images, and other digital content. These files need to be stored somewhere so that they can be made available to internet users who want to access the website. Website hosting companies provide a server or a cluster of servers that are dedicated to storing these files and making them available to anyone who wants to access the website.
When a user types a website URL into their web browser, the browser sends a request to the hosting server to retrieve the website files. The server then retrieves these files and delivers them to the user's browser, which renders them as a web page.
Website hosting can range from basic static hosting, which is simply a server that stores files and delivers them on request, to more advanced hosting solutions that provide dynamic content, scalability, security, and other features.
Different types of website hosting services include shared hosting, VPS hosting, dedicated hosting, and cloud hosting.
Web Domain
A domain is a unique name that identifies a website or a group of related websites on the internet. It is used to address web pages and find resources on the internet. In simpler terms, a domain is the address of a website that people type in their web browser's address bar to access it.
Domains are composed of two parts, the domain name and the domain extension. For example, in the domain name "example.com", "example" is the domain name and ".com" is the domain extension.
Domain names can be purchased from domain name registrars, which are companies that sell and manage domain names. When you purchase a domain name, you are essentially leasing the rights to that name for a specified period, usually between 1 and 10 years.
Domain names can be used for various purposes, such as creating a website, setting up a professional email address, or creating branded web links for social media profiles. It is important to choose a domain name that is easy to remember, easy to spell, and relevant to your website or business.
What is HTTPS?
HTTPS stands for Hypertext Transfer Protocol Secure. It is a protocol for securing communication over the Internet. The basic function of HTTPS is to encrypt the data sent between a web server and a web browser, making it difficult for hackers to intercept and read the data being transmitted.
In HTTPS, the data is encrypted using SSL/TLS encryption (Secure Sockets Layer/Transport Layer Security). SSL/TLS encryption works by creating a secure connection between the web server and the web browser. This secure connection ensures that any data transmitted between the two is private and cannot be intercepted by third-party attackers.
In order to establish an HTTPS connection, a website must have an SSL/TLS certificate installed on its server. These certificates are issued by trusted third-party companies called Certificate Authorities (CAs) and can be obtained by website owners for a fee.
By using HTTPS, websites can ensure that user data, such as login credentials, credit card information, and personal details, are kept safe and secure from attackers. It is recommended that all websites use HTTPS to protect user data and maintain the integrity of online communications.
What is URL?
URL stands for Uniform Resource Locator, and it's the unique address that identifies a resource on the internet. In simpler terms, a URL is the web address of a webpage, file, or online resource, which can be accessed using a web browser or other software applications.
Typical URL
A typical URL consists of the following components:
Protocol - The protocol specifies the method by which the resource will be accessed. Examples of protocols include HTTP, HTTPS, FTP, and SSH.
Domain Name - The domain name specifies the server where the resource is hosted. For example, sagecode.net
Path - The path is the location of the resource on the web server. For example, /html/index.html
Query Parameters - The query parameters are additional information that is sent to the server as part of the URL. For example,
?search=something.
Here's an example of a URL:
https://www.youtube.com/results?search_query=%22elucian+moise%22+%22golang+fundamentals%22
In this URL, "https://" specifies the protocol, "youtube.com" is the domain name, "/result" is the path, and "?search_query=" are the query parameters.
Relative URL
A relative URL is a URL that specifies a path to a file or resource relative to the current document's path. This means that a relative URL does not include the full URL for a resource, only the path to the resource relative to the document that is being viewed. Relative URLs are shorter and more flexible than absolute URLs. They also make it easier to move files and web pages around within a website without having to update all of the links.
Relative URLs are important for several reasons. First, they make it easier to organize and maintain a website because they allow you to avoid hard-coding the URLs for each resource. Second, they make it easier to move a website from one server to another or to change the structure of a website without having to update every single URL. Finally, they make it easier to debug a website because you can quickly see which resources are being loaded and where they are located.
Special Characters
We need to encode special characters in a URL using URL encoding. URL encoding replaces special characters with "%" followed by their ASCII value in hexadecimal format. Here are a few examples of URL-encoded characters:
Space - %20
Double quote - %22
Slash - %2F
Question mark - %3F
After the symbol? you can use many query parameters, separated by symbol +. You can use a single question mark in a URL. The second question mark should be encoded.
Bookmarks
In a URL, the "#" (hash or pound sign) character is used to introduce a "fragment identifier" or "bookmark link". The fragment identifier helps web browsers identify a specific section within a web page.
Fragment:
A fragment identifier comes after the URL's path and query portions and usually starts with a "#" character followed by an identifier that specifies the target section of the page.
Example:
https://sagecode.net/fortran/control.html#while
This URL is an example of a bookmarked URL or URL fragment. The URL consists of two parts: the base URL and the fragment identifier.
The base URL is the main URL that identifies a specific web page on the server. In this example, the base URL is "https://sagecode.net/fortran/control.html". This URL identifies a web page on the server called "control.html" in the Fortran directory.
The fragment identifier is the part of the URL that specifies a specific section or location within the web page. In this example, the fragment identifier is "#while". This identifies a specific section within the "control.html" web page that is marked with the HTML anchor tag <a name="while">...</a>.
When a user clicks on this bookmarked URL, the web browser will load the "control.html" web page and automatically scroll down to the section that is marked with the <a> tag having name attribute while. This is useful for directing the user's attention to a specific section of a web page.
Note: the fragment identifier is not sent to the server as part of an HTTP request. It is only used by the web browser to identify a specific section within the web page.
Organize
Organizing an Internet website project requires careful planning and attention to detail, and typically involves the following steps:
Define your goals: Before you start your website project, you should define your goals, such as what you want to accomplish with your website, who your target audience is, what features and functionality you need, and how you will measure success.
Create a sitemap: A sitemap is a visual representation of the pages and content that will be on your website. It helps you organize your content, identify missing pages, and plan your website's structure.
Design mockups and wireframes: Mockups and wireframes are visual representations of your website's layout and functionality. They help you refine your ideas, get feedback from stakeholders, and make sure your design meets your goals.
Develop content: Your content should reflect your goals and target audience, and be well-organized and easy to read. You should develop content for all pages, including text, images, videos, and other media.
Choose a technology stack: You need to choose a technology stack that suits your needs and budget. This includes the programming language, server software, database, and web development framework.
Develop your website: This involves creating and coding your web pages, adding functionality, and testing your website to make sure everything works as expected.
Test and launch: You need to test your website thoroughly to make sure it is free of errors and works on different devices and browsers. Once everything is working properly, you can launch your website and make it available to the public.
Maintain and update: Once your website is launched, it's important to maintain and update it regularly. This includes monitoring performance, fixing errors, adding new content, and updating your technology stack when needed.
Organizing a website project requires a methodical approach and attention to detail, but it's an essential part of creating a successful website that meets your goals and engages your audience.
Structure
The typical structure of a web project may vary based on the type and complexity of the project, as well as the development process followed by the team. However, most web projects generally follow a common structure that includes the following components:
Project planning and requirements gathering: This includes defining the goals and scope of the project, determining the target audience, identifying the requirements, and creating a detailed project plan.
Website design and user interface (UI) development: This includes creating the user interface (UI) design, wireframes, and mockups for the website.
Front-end development: This includes developing static and dynamic web pages using HTML, CSS, and JavaScript.
Back-end development: This includes developing the server-side code using a programming language (such as PHP or Python) and a web development framework (such as Ruby on Rails or Django).
Database design and development: This includes designing and developing the data model and database schema for the website, and implementing the database using a database management system (such as MySQL or PostgreSQL).
Quality assurance and testing: This includes testing the website to ensure that it meets all the requirements, is compatible with different browsers and devices, and performs well under different traffic loads.
Deployment and maintenance: This includes deploying the website to a production server, configuring the server environment, monitoring website performance, and maintaining the website (adding new features, fixing bugs, updating content, etc.) over its lifetime.
Overall, the typical structure of a web project involves planning, design, development, testing, deployment, and maintenance. Each phase needs to be carefully executed to ensure the successful delivery of the project.
Folders
Here's a possible folder structure that you can use for a simple static website with the Bootstrap framework:
.
+-- index.html
+-- css/
| +-- bootstrap.min.css
| +-- style.css
+-- js/
| +-- jquery.min.js
| +-- bootstrap.min.js
| +-- main.js
+-- img/
+-- logo.png
+-- background.jpg
In this structure, index.html is the main HTML file for your website. The css/ folder contains the Bootstrap CSS file (bootstrap.min.css), as well as your custom CSS styles (style.css) that overrides or extends the default Bootstrap styles.
The js/ folder contains the required JavaScript files for BootStrap (jquery.min.js and bootstrap.min.js), as well as your custom JavaScript file (main.js) that adds interactivity to your website.
Finally, the img/ folder stores all of the images used in your site such as your logos, background images, and any other images used.
By using this folder structure, you can easily maintain your static website and keep your files organized.
HTML5 Description
HTML5 (Hypertext Markup Language version 5) is the latest iteration of the HTML standard used for creating web pages and applications. It is an improvement over previous HTML versions like HTML4 and XHTML. HTML5 was released in 2014, and since then, it's become more widely used by developers to create modern web applications that are rich, interactive, and mobile-friendly.
When we refer to HTL5 we refer to a combination of 3 languages:
HTML - descriptive document oriented
CSS - descriptive language
JavaScript - interpreted, hosted language
What is HTML?
HTML (Hypertext Markup Language) is a standard markup language used for creating web pages and web applications. It is the foundation of building any website on the internet. HTML is a markup language that specifies the structure and content of a webpage.
HTML consists of a series of elements or tags that define the structure of the webpage content. An HTML document is made up of elements, such as headings, paragraphs, images, links, and other objects, each of which is represented by a specific tag. These tags are enclosed in angled brackets like < and >, and contain attributes (name-value pairs) that define specific properties of each element.
HTML can be used with other web technologies such as Cascading Style Sheets (CSS) and JavaScript to create interactive and dynamic web pages. CSS is used to add style, layout and formatting to the HTML content, while JavaScript is used to add interactivity, animations and dynamic effects.
Overall, HTML is an essential programming language for creating web pages and web-based applications and is one of the core technologies used on the internet.
What is CSS?
CSS (Cascading Style Sheets) is a style sheet language used for designing the presentation or the appearance of web pages written in HTML or XML. CSS allows developers to separate the presentation of web pages from their content, making it easier to maintain and update.
CSS works by attaching style rules to HTML elements using selectors. A CSS rule set consists of a selector and a declaration block. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.
CSS properties can be used to define various styles and formatting options for HTML elements, such as font size, color, margins, padding, borders, background images, and more.
CSS also allows developers to create responsive designs for web pages, using media queries to apply different styles based on the browser viewport size. With CSS, developers can create visually appealing and dynamic web pages that are optimized for different devices and screen sizes.
Overall, CSS is a fundamental technology for web development and plays an essential role in creating beautiful and functional websites. It works hand-in-hand with HTML and JavaScript to create visually engaging and interactive web pages.
What is JavaScript?
JavaScript is a programming language that was initially developed for web browsers, but now it is used for server-side programming, mobile application development, game development, and more. JavaScript works together with HTML and CSS to create interactive and dynamic web pages.
JavaScript is a client-side scripting language, which means it executes on the client side or the browser of a website visitor's computer. JavaScript can be used to add interactivity, dynamic effects, and animations, and to manipulate the content of web pages. For example, JavaScript can be used to create slide-in menus, pop-up windows, form validation, and more.
In addition to its use on the client side, JavaScript can also be used on the server side, using technologies such as Node.js. Server-side JavaScript allows developers to write server-side scripts and web applications using JavaScript syntax.
JavaScript is a powerful and versatile language that continues to evolve and improve over time, with new features and enhancements being introduced regularly. Many popular web frameworks, libraries, and tools have been developed based on JavaScript, making it a cornerstone of modern web development.
HTML Example
Here's an example of an HTML document that uses relative URLs:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<h1>Welcome to My Website</h1>
<p>We are a company that specializes in creating websites that meet your business needs.</p>
<img src="images/homepage.jpg" alt="A picture of our homepage">
<p>Check out our recent work:</p>
<ul>
<li><a href="portfolio/project1.html">Project 1</a></li>
<li><a href="portfolio/project2.html">Project 2</a></li>
<li><a href="portfolio/project3.html">Project 3</a></li>
</ul>
</main>
<footer>
<p>© My Website 2022.</p>
</footer>
</body>
</html>
In this example, the link and img elements use relative URLs to refer to the style.css file and the homepage.jpg image, respectively. The navigation links also use relative URLs to refer to the index.html, about.html, and contact.html pages. Finally, the links to the portfolio projects also use relative URLs to refer to the project1.html, project2.html, and project3.html pages, which are located in a portfolio/ directory.
Using relative URLs in this way makes it easy to maintain and modify this website. Even if you change the root directory or move the entire website to another server, the links will still work as intended.
Publish
Publishing a web page on the internet typically involves a few key steps:
Create or design the web page: You can use a text editor or a web development platform (e.g. WordPress, Wix, Squarespace, etc.) to design and create your web page.
Choose a domain name: This is the web address that people will use to access your page. You'll need to purchase a domain name from a registrar like GoDaddy, Namecheap, or Bluehost.
Choose a hosting provider: You'll need a web host to store your web page files and make them available on the internet. There are many hosting providers to choose from, such as Bluehost, HostGator, and SiteGround.
Upload your files: Once you've created your web page and chosen a domain name and hosting provider, you'll need to upload your web page files to your web host using FTP (File Transfer Protocol) or a web-based file manager.
Configure your DNS settings: You'll need to point your domain name to your hosting provider's servers by updating your DNS settings.
Test your web page: Check that your page loads correctly and looks as designed.
Submit your page to search engines: To make it easier for people to find your page, submit it to search engines like Google and Bing.
Once these steps are complete, your web page will be publicly available on the internet and accessible using your chosen domain name.
Reference:
You can study more and find external references on my website. I have shared articles and videos to teach you Web Design. This is part of my free Software Engineering class:
https://sagecode.net/web/index.html
Conclusion.
These are the most important topics you need to study to become a web developer. I have to ask ChatGPT several questions and these are the answers. I guess you could have done the same. If you find any error, report below in the comments.
Thank you for reading. Have fun, learn and prosper.๐๐๐๐๐ผ