eBook - ePub
Creating Data-Driven Web Sites
An Introduction to HTML, CSS, PHP, and MySQL
Bob Terrell
This is a test
Share book
- 138 pages
- English
- ePUB (mobile friendly)
- Available on iOS & Android
eBook - ePub
Creating Data-Driven Web Sites
An Introduction to HTML, CSS, PHP, and MySQL
Bob Terrell
Book details
Book preview
Table of contents
Citations
About This Book
The purpose of this book is to provide an introduction to this set of technologies to teach a new programmer how to get started creating data-driven websites and to provide a jumping-off point for the reader to expand his or her skills.
Today's modern world is heavily dependent on the World Wide Web. It affects the way we communicate, how we shop, and how we learn about the world. Every website, every page, consists of four fundamental elements: the structure, the style, the programming, and the data. These correspond to four different "languages, " respectively: HTML, CSS, PHP, and MySQL.
After learning the necessary components, users will have the understanding required to use the above technologies to create a working website. This book is aimed at the programmer or student who understands the basic building blocks of programming such as statements and control structures but lacks knowledge of the syntax and application of the above-mentioned technologies.
Frequently asked questions
How do I cancel my subscription?
Can/how do I download books?
At the moment all of our mobile-responsive ePub books are available to download via the app. Most of our PDFs are also available to download and we're working on making the final remaining ones downloadable now. Learn more here.
What is the difference between the pricing plans?
Both plans give you full access to the library and all of Perlegoâs features. The only differences are the price and subscription period: With the annual plan youâll save around 30% compared to 12 months on the monthly plan.
What is Perlego?
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 1000+ topics, weâve got you covered! Learn more here.
Do you support text-to-speech?
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more here.
Is Creating Data-Driven Web Sites an online PDF/ePUB?
Yes, you can access Creating Data-Driven Web Sites by Bob Terrell in PDF and/or ePUB format, as well as other popular books in Computer Science & Web Programming. We have over one million books available in our catalogue for you to explore.
Information
CHAPTER 1
HTML
HTML is not, strictly, a programming language. HTML stands for hypertext markup language. It is a way of marking text, so that a web browser knows how to display it. It can be considered the most basic âbuilding blockâ of a web page, and as such, it is where we begin.
It is customary when teaching a new language to begin with a simple program that simply outputs Hello, world! With HTML, it couldnât be simpler. Open a new document in your editor and type in âHello, world!â, as seen below (Figure 1.1).
Figure 1.1. Desc: âHello, world!â in a text editor window
Save the file to your web root with the name hi.html (Figure 1.2).
Figure 1.2. Desc: file âhi.htmlâ visible in a folder
View the results in your web browser of choice. Enter in the URL for your web root, and add hi.html to the end (Figure 1.3).
Figure 1.3. Desc: âHello, world!â displayed in a web browser
Youâre done!
FUNDAMENTALS
So whatâs really going on here? The short answer is it is the browserâs job to make as much sense of an HTML file as it can. We can see what it has done by inspecting the web page. In Chrome: View -> Developer -> Developer Tools. In the window or pane that opens, select the Elements tab. We see that the browser has taken our file, which the web server has told it is an HTML file (thanks to the.html extension) and added to it. We should see something like the following (Figure 1.4):
Figure 1.4. Developer Tools window in Chrome
The document is located on the left. We see our Hello, world! text on the left. Whatâs the rest of that?
An HTML file is rendered by the browser into a document with elements. Note the three elements in document: the <html> element, which encompasses the entire document; the <head> element, which is currently empty and provides information about the document; and the <body> element, which contains the part of the document that the web browser is intended to render. Because our file contained only plain text, the browser created enough elements for our document to make sense. It put the contents of our file into the <body> element.
Revisit the document in the text editor and add in some of the elements the browser filled in on its own. Change the document to be as such:
Save the file and refresh the browser window. It should look pretty much the same! Only this time, the browser is reading our file and parsing (making sense of) it.
TAGS AND ELEMENTS
An html file is made up of markup contained in tags. An HTML tag consists of an open angle bracket (less than sign), certain characters to denote the type of tag, and a closing angle bracket (greater than sign). Tags may not have a space between the opening angle bracket and the letters. In the file above, note that we have three tags: <html>, <head>, and <body>. These correspond to the html, head, and body elements that the browser renders in its document.
HTML tags usually come in sets. There is an opening tag, as described above, and there is a closing tag, telling the browser when the element in question should end. A closing tag is an angle bracket, followed by a slash, followed by the same characters used in the opening tag. In the file above, every opening tag has a corresponding closing tag. A more correct description of our file would be that there are three opening tags: <html>, <head>, and <body>; and three closing tags: </head>, </body>, and </html>.
Also note that HTML is hierarchical: Elements can contain other elements when tags of another element are found in between the opening and closing tags. The head and body elements are contained within the html element because the <head> and <body> tags appear between the opening <html> and closing </html> tags.
While itâs possible to not close tagsâif our file above was missing the closing tags, the browser would still render it correctlyâsome tags must be closed, and the browser will always try to render a document as if it were well-formed. Itâs also possible to close tags not in reverse order: For example, the following would most likely render correctly:
but it is not well-formed. The following is well-formed:
Note the differences. The </u> closing tag closes the <u> element, which was the last one opened, followed by </b> to end the <b> opening tag. We also properly closed the <p> tag with the closing </p> tag. Donât worry if you arenât familiar with what these tags do! Theyâll be explained soon enough. For now, simply note what it means to have well-formed HTML: that tags are closed in reverse order that they are opened.
BEST PRACTICE
Although web browsers give their best effort to make sense of an HTML file, throughout this book we will endeavor to generate well-formed documents. A...