Web Programming with HTML, CSS, Bootstrap, JavaScript, React.JS, PHP, and MySQL Fourth Edition

By Larry Sanchez

Welcome to this beginner's guide tailored with college students in mind. Prior familiarity with concepts like file extensions, Web URLs, and major browsers is recommended. This comprehensive textbook serves as your gateway into the world of web programming, equipping you with foundational knowledge to embark on your coding journey.

Coverin

• Language: English
• Publisher: LS Independent Publishing
• Release date: Aug 17, 2023
• ISBN: 9781088293591

Book preview

Chapter 1: Introduction to the Web and HTML

Chapter Learning Outcomes:

1.1 Recognizing basic HTML tags

1.2 Summarizing how the World Wide Web works

1.3 Explaining HTML elements, tags, and attributes

1.4 Implementing HTML structure elements

1.5 Implementing HTML

element

1.1 The World Wide Web

The World Wide Web (abbreviated as 'the web' for the rest of the book) is an information system that allows users to utilize client software to request documents stored on server software through Uniform Resource Locators (URLs). Examples of client software include Firefox, Edge, Chrome, and Safari, while server software examples encompass Apache, IIS (Internet Information Server), and Nginx. An example of a URL is www.google.com. Users can type the URL of the server directly into the browser's address field or click on a hyperlink containing the URL. Requested documents can encompass files, images, songs, videos, and other resources.

Users can use the client software at any time to request information. The server software will either respond with the requested documents or a 404 Error (File not found Error). Thus, the server must always be on so that the client can access it at any time. Such an arrangement is often referred to as the client-server architecture.

Even with the client and server in place, you still cannot use the web without the Internet. The machines hosting the client and server must be connected to the Internet before any information exchange can occur. The Internet is a vast complex of computer networks that include server machines, desktops, and cell phones.

In this book, you will install the server and client on the same computer for the convenience of learning. In this case, you don't need the Internet because both the client and server software are on the same computer.

Review Question 1.1

The _______ is an information system that allows the users to use client software to request documents stored in a server through the Uniform Resource Locators.

A) web

B) computer

C) Internet

D) website

Review Question 1.2

Firefox, Internet Explorer/ Edge, Chrome, and Safari are examples of ___________.

A) server software

B) client software

C) Internet

D) website

Review Question 1.3

www.google.com is an example of ___________.

A) web

B) client software

C) Internet

D) URL.

Review Question 1.4

Apache, IIS (Internet Information Server), and Nginx are examples of ___________.

A) server software

B) client software

C) Internet

D) website

1.2 Web Programming

Computer programs are sets of instructions that computers follow. In the context of the web, these instructions are encapsulated within a Web Program, providing guidance for both client and server software. As a result, web programming encompasses the act of writing instructions for either the client, the server, or both. It serves as an umbrella term that covers various languages used for this purpose.

Throughout this book, we will explore several essential web programming languages, including HTML, CSS, JavaScript, PHP, and MySQL. Learning the syntax of these languages will empower you to command the client and server to collaborate effectively.

Specifically, this book will equip you with the skills to utilize HTML, CSS, and JavaScript to interact with client browsers and PHP and MySQL to work with server software. Through hands-on practice and guided examples, you will gain a comprehensive understanding of web programming, enabling you to create dynamic and interactive web applications..

Review Question 1.5

The ________ contains instructions for client and server software to follow.

A) web

B) web programming

C) Internet

D) website

Review Question 1.6

According to the author, which of the following is a server-side language?

A) HTML

B) CSS

C) PHP

D) Bootstrap

Review Question 1.7

According to the author, which of the following is a client-side language?

A) HTML

B) PHP

C) Laravel

D) MySQL.

1.3 HTTP (Hypertext Transfer Protocol)

In the realm of the web, browsers and web servers are often geographically distant from each other. To facilitate seamless communication between them, the Hypertext Transfer Protocol (HTTP) comes into play. HTTP consists of a set of standards or protocols that govern the exchange of requests and responses between the client and server. An analogy can be drawn to the guidelines you must follow when writing an address on an envelope for mailing – where to place your name and address and where to specify the recipient's name and address. A small error, like swapping the recipient's name and address, could lead to delays or non-delivery of the mail.

It is essential to recognize that HTTP communication is stateless, meaning that the server does not retain any memory of previous client requests. To address this limitation, cookies are utilized to maintain session information and track user interactions.

HTTP supports various types of requests, such as HTTP GET and HTTP POST, each serving distinct purposes. You will delve deeper into these concepts in a later chapter when you explore PHP. While detailed coverage of HTTP is usually found in telecommunication books, we mention it here to avoid any confusion between HTML and HTTP.

By understanding HTTP and its role in web communication, you will grasp the fundamental mechanics behind how information is exchanged between clients and servers, a crucial aspect of navigating the web effectively.

Review Question 1.8

HTTP communication is ________ which means a server does not keep track of the client requests.

A) trackless

B) stateless

C) serverless

D) free request

Review Question 1.9

Which of the following is NOT a type of HTTP request?

A) HTTP GET

B) HTTP POST

C) HTTP MAIL

D) All of the options are HTTP requests

Review Question 1.10

The __________ is a standard for the browsers and the Web servers to communicate with each other.

A) HTML

B) web programming

C) Internet

D) HTTP

1.4 HTML (Hypertext Markup Language)

HTML serves as a fundamental language used to create web pages, enabling the specification of content and structure. An HTML document is essentially a text file with a .xhtml file extension. While HTML itself is not intended for direct user consumption, web browsers interpret the HTML instructions, presenting the final product to users in the form of a web page.

The essence of HTML lies in its Markup capability, which involves annotating a document with additional information. These annotations define various elements such as paragraphs, headings, and more. Angle brackets (< and >) are employed to differentiate these annotations, or tags, from the regular text within the document.

Review Question 1.11

The HTML is a markup language that specifies _____ and _____ of a web page.

A) structure, format

B) content, format

C) content, markup

D) structure, content

Review Question 1.12

The major part of HTML is the Markup. It means to ______ a document with extra information.

A) sum up

B) annotate

C) create

D) edit

Review Question 1.13

How does HTML distinguish annotations (tags) from regular text within a document?

A) By using square brackets [ ] around the annotations.

B) By using angle brackets < > around the annotations.

C) By using parentheses ( ) around the annotations.

D) By using curly brackets { } around the annotations.

Review Question 1.14

What role do web browsers play in relation to HTML documents?

A) Web browsers convert HTML documents into executable programs.

B) Web browsers interpret HTML instructions to create web pages for users.

C) Web browsers prevent HTML documents from being accessed by users.

D) Web browsers modify HTML documents to add security features.

Review Question 1.15

What is the primary purpose of HTML in web development?

A) To enable direct user interaction with web pages.

B) To specify content and structure of web pages.

C) To create web browsers that interpret HTML instructions.

D) To define complex algorithms for data processing.

1.5 Preparing for Coding

Before delving into HTML coding, it is essential to have a text editor to write your code. Any program source code is essentially a plain text file with varying file extensions. For this purpose, you can use simple text editors like Notepad for Windows or TextEdit for Mac.

However, in this book, we will utilize Visual Studio Code (VS Code), a powerful and free text editor built on open source technology, equipped with numerous extensions to enhance your coding experience. To get started, search for Visual Studio Code download and visit the download website. Choose the appropriate version for your operating system (e.g., Windows user installer or system installer for sole users).

The installation process is straightforward, and you can generally accept all default settings. Once the program launches, you can close the Get Started page.

Next, identify a folder where you will save your files. Click on File, then select Open folder, and choose a suitable location like your Desktop. If you intend to manually write the code yourself, select Yes, I trusted the authors.

In the EXPLORER window, navigate to the DESKTOP line and click on the New File icon. This action will create a new HTML file with a blank canvas to start coding.

Figure 1.1: Adding a new HTML file.

Feel free to give your new file any desired name and use the .xhtml file extension, which is standard for HTML files. With this setup, you are now all set and ready to begin your HTML coding journey.

Figure 1.2: A new blank HTML file called page1.xhtml is created.

Review Question 1.16

An HTML file ______:

A) can only be created with a website editor

B) can be created with any text editor, such as Notepad

C) is basically a text file with HTML elements

D) can be created with any text editor and is basically a text file with HTML elements

Review Question 1.17

What is the primary purpose of a text editor in HTML coding?

A) To convert HTML code into executable programs.

B) To provide a platform for sharing HTML files with others.

C) To write and edit HTML code in plain text format.

D) To generate interactive visual representations of HTML code.

1.6 HTML Basic Structure

It is time for your first html file. Start a new HTML file named basicStructure.xhtml and open it with your text editor. Type in the code as shown in Figure 1.3 HTML basic structure.

Figure 1.3 HTML basic structure

Explanation:

Line 1: Informs the browser that the following content is an HTML5 file. This line itself is not considered as an HTML element.

Lines 2 and 10: Define the opening and closing tags for the element. All other HTML elements should be placed between these lines. It is the largest container of an html file.

Lines 3 and 6: Define the opening and closing tags for the element. The element contains metadata for the webpage, such as character encoding, and is utilized by browsers, servers, and search engines.

Lines 4: The element, placed within the , specifies the document's character encoding for the browser to interpret the content correctly.

Line 5: It is the . This element is used to name the web page and will appear in the title bar of the browser, located at the top left of the browser window or in the status bar when minimized. As this information is specifically intended for the browser, the

Line 7 and 9: Define the opening and closing tags for the element. The element contains the information you want to display to the viewers of the webpage.

Line 8: Contains the

element, which indicates a paragraph in the web document. The content inside the

element will be visible to the viewers and is therefore a child element of .

The white circle next to the file name on VS Code indicates that the file has not been saved. To save the file, click on File, then choose Save or use the keyboard shortcut Ctrl+S (Windows).

To view the HTML file in a browser:

1. Go to the folder where you saved the HTML file.

2. Double-click on the HTML file to open it in a browser.

3. The browser will display the content according to the defined structure and metadata.

Review Question 1.18

Which of the following tags marks the beginning of an HTML file?

A)

B)

C)

D)

Review Question 1.19

The _____ element contains the metadata of the webpage file. Information inside this element is for browsers, servers, and search engines.

A)

B)

C)

D)

Review Question 1.20

What will the following HTML line of code do?

utf-8>

A) It defines the document’s character encoding.

B) It limits the number of characters in the document.

C) It inserts a line break every 8 lines of text in the document.

D) It makes the browser more secure.

Review Question 1.21

The _____ element will appear in the title bar of the browser (located at top left of a browser or at the status bar when the browser is minimized).

A)

B)

C)

D)

Review Question 1.22

The _____ element includes all information you want to show to the viewers of the web page.

A)

B)

C)

D)

Review Question 1.23

A paragraph in a web document is typically included in the _____ element.

A)

B)

C)

D)

1.7 The Importance of HTML Tags

In your basicstructure.xhtml file, if you remove the

and

tags and save the file, you may notice only a slight change, perhaps in the spacing above the line of text. At first glance, it might seem that there's no significant difference. However, HTML tags play a crucial role in providing meta-information to your webpage, which can have a significant impact on its appearance and behavior, even though the tags themselves are not visible in the final document.

While HTML tags do not directly appear in the finished document, they have essential functions that affect how your webpage looks and interacts with visitors. The primary purpose of HTML markup is to define the content and structure of the page, not its presentation. During coding, the focus should be on content and structure, determining whether a particular element is a paragraph or a heading, and its relative importance on the page. This understanding helps you choose the appropriate HTML element tags.

One key function of HTML markup is to provide accessibility features. Screen reader software for the visually impaired relies on HTML tags to read and interpret the webpage correctly. Additionally, HTML markup enhances search engine optimization, ensuring that your page is displayed accurately in search results.

HTML provides the fundamental structure and content for webpages. While technologies like Cascading Style Sheets (CSS, a topic you will learn about in Chapter 2) and JavaScript (a topic covered in Chapter 4) add styling and interactivity, they rely on the underlying HTML elements to function. For example, CSS rules target HTML tags and ids to style the page's appearance. Likewise, JavaScript code manipulates HTML elements to enable dynamic interactions. Without the semantic HTML markup, CSS and JavaScript would have no hooks to access and modify.

Review Question 1.24

Even though the HTML tags don’t show up in your finished document, they provide ______.

A) necessary browser supports

B) references to other documents

C) document update information

D) meta information of the document

Review Question 1.25

Which of the following is NOT the purpose of using HTML elements?

A) It allows screen reader software to read the page for the blind or visually impaired.

B) It helps the search engines display your page more accurately in the search result.

C) Cascading Style Sheet and JavaScript depends on it.

D) It speeds up the webpage downloading

Review Question 1.26

What is the main focus during HTML coding for webpages?

A) Styling and presentation of the webpage.

B) Determining