Web development Web development for Beginners in HTML (Vickler, Andy [Vickler, Andy]) (Z-Library)

Web Development Web Development for Beginners in HTML

© Copyright 2021 - All rights reserved. The contents of this book may not be reproduced, duplicated, or transmitted without direct written permission from the author. Under no circumstances will any legal responsibility or blame be held against the publisher for any reparation, damages, or monetary loss due to the information herein, either directly or indirectly. Legal Notice: You cannot amend, distribute, sell, use, quote, or paraphrase any part of the content within this book without the consent of the author. Disclaimer Notice: Please note the information contained within this document is for educational and entertainment purposes only. No warranties of any kind are expressed or implied. Readers acknowledge that the author is not engaging in the rendering of legal, financial, medical, or professional advice. Please consult a licensed professional before attempting any techniques outlined in this book. By reading this document, the reader agrees that under no circumstances is the author responsible for any losses, direct or indirect, which are incurred as a result of the use of the information contained within this document, including, but not limited to, —errors, omissions, or inaccuracies.

Table of Contents Introduction Chapter 1: What is HTML? Chapter 2: HTML Building Blocks Chapter 3: HTML Formatting Chapter 4: Headings, Paragraphs, and Phrase Tags Chapter 5: Images, Tables, and Links Chapter 6: HTML Lists Chapter 7: HTML Forms Chapter 8: Classes, Frames, and iFrames Chapter 9: HTML Comments and File Paths Chapter 10: The HTML Head Chapter 11: HTML Layout Chapter 12: HTML Entities, Symbols and Charset Chapter 13: HTML Backgrounds, Colors, and Fonts Chapter 14: Creating an HTML Webpage Conclusion References

Introduction HTML is the primary web language, not surprising given that it is used to write most web pages – learning it well and truly puts you on the right path to creating some pretty amazing websites. What you will learn here is what makes up an HTML document, all the different elements involved, and how to use them. In each chapter, you will find simple code examples showing you how each element works, along with simple explanations on how it all works. At the end of the book, there is one last chapter that runs you through building a simple web page from start to finish using HTML. In 1989, Tim Berners-Lee invented something that would change the world as we knew it and continues to change the world today. That invention was the World Wide Web, and back then, he didn’t have access to fancy programming languages like JavaScript and CSS; all he had was HTML. Over the last 30 years or so, HTML has changed, almost beyond recognition but not quite. It now has well over 120 tags, significantly more than the 18 it started with and is still the central, most important part of any web page. It is, in short, the web’s foundational technology. If your website has its basis in good HTML, you will have a fast-loading site. Browsers will render HTML incrementally, meaning the user sees a partly rendered page while the browser waits for the rest of the files to come from the server. Modern development techniques, fashionable ones like React, need the user to be sent a lot of JavaScript, which, once downloaded, must be parsed by the user’s device and executed. And all that has to happen before the web page can be constructed. If your network is slow, or your device is low-powered or low-end, the load time can be excruciatingly slow and drains the device battery. If your site is based on decent HTML, it will be robust. While scripts and styles may take longer to load, the content will always be available, and HTML is not only backward compatible, but it is also future-proof – it will always work. Who Writes HTML Anymore?

I often hear people saying that there’s no need to learn HTML these days because let’s face it, who writes it by hand anymore? Sure, there is a lot of truth to this – WordPress powers just over 35% of the web these days. This uses templates to assemble web pages, and different themes can be applied to them. Drupal and Joomla work in much the same way. At the same time, other developers use React and other similar frameworks that simply put together a series of components that have already been written. But let’s face it – those components and templates still need to be written. And those developers who use React or WordPress still need some HTML knowledge. Otherwise, they cannot evaluate how good the components and templates are before they use them. And that is why I produced this guide, so that you know how to produce a web page in good old-fashioned HTML and not have to worry about how good, or otherwise, someone else’s work is.

Chapter 1: What is HTML? HTML stands for HyperText Markup Language, and it is the language used to create web applications and web pages. So, what does it all mean? HyperText – this means nothing more than "text in text." Any text that contains a link is known as one of two things – a hyperlink or hypertext. If you click on one of these links, a new web page will open. It is used to link web pages together, ensuring users can easily jump between them. Markup Language – markup languages are computer languages used for applying formatting and layout to a document. These languages ensure that text is more dynamic and interactive and can be used to turn text into links, tables, images, and more. Web Pages – web pages are documents that are usually written in HTML, and a web browser is then used to translate them. We access and identify these web pages using URLs, the address where the web page is located on the internet, and they can be dynamic or static. The only language that can be used to create static web pages is HTML. All of that means that the HTML language is used to create nice-looking web pages by using styling and showing them on a web page in a nice format. HTML documents comprise multiple tags, each tag having different content. Let’s put all this into context by looking at a simple HTML example: <!DOCTYPE> <html> <head> <title>Web page title</title> </head> <body> <h1>Your first heading goes here</h1> <p>Your first paragraph goes here</p>

</body> </html> Running this would display this on your screen: Your first heading goes here Your first paragraph goes here Let's break this example down into its components: <!DOCTYPE> - this defines the type of document or tells the browser what HTML version is being used. <html > this tells the browser an HTML document is being used. Any text in between this tag is describing the document. In other words, it is a container for every other HTML element, with the exception of <!DOCTYPE>. <head> - this is the first element in the <html> tag and it contains details about the document, i.e., the metadata. Before the body tag is opened, the <head> tag must be closed. <title> - the name says it all – this tag adds the title of the web page, the title seen at the top of the window displayed in the browser. It must be inside the head tag, and it should be immediately closed. <body> - this is where the web page content goes, the content the end-user sees. It is the main HTML document content. <h1> - any text in this tag is describing the web page's first-level heading. <p> - the text in this tag is describing the web page's paragraph text. All of this will become clearer as you work through this book. A Brief HTML History Tim Berners-Lee was a physicist in the late 80s, contracted to work at CERN. While he was there, he proposed a system for researchers and, in 1989, he sent a memo containing a hypertext system based on the internet. He has earned the moniker of "the father of HTML." In 1991, he produced a

document called "HTML Tags," the very first HTML description. HTML Versions Since HTML was first invented, several versions have been released: HTML 1.0 – Released in 1991, this was the first version of HTML and was very basic. HTML 2.0 - The next version was released in 1995 and became the website design standard. It provided support for extra features, including form elements, like option buttons, text boxes, etc., and form-based file uploads. HTML 3.2 - W3C released this version early in 1997 and brought support for table creation and more support for new options in form elements. It could also support web pages containing complex math equations. In January 1997, it became the browser standard and, today, it is still supported by most browsers in a practical form. HTML 4.01 – The next HTML version came about in December 1999 and proved incredibly stable – it still is today. It is the official standard we work with currently and provides support for CSS (stylesheets) and scripting ability for different multimedia elements. HTML5 - HTML5 is the latest version and was first announced in January 2008. Two large foundations are involved in HTML 5 development – World Wide Web Consortium (W3C) and Web Hypertext Application Technology Working Group (WHATWG) and, today, it is still being developed. HTML Features So, why use HTML? Why not use one of the newer languages, such as JavaScript? Apart from the fact that HTML supports JavaScript and CSS, it offers users all these features: 1. It is one of the easiest languages to understand and modify 2. Making effective presentations with HTML is easy because it offers tons of formatting tags 3. Because it is a markup language, it gives users a flexible way of

designing web pages with text 4. It allows users to add links on web pages using the anchor tag, thus enhancing the user's browsing interest 5. It is not dependent on any specific platform and can be displayed on Windows Linux, Mac, and all others 6. It allows programmers to easily add sound, videos, and graphics to their pages, ensuring they are more interactive and attractive 7. It is not case sensitive like other languages, so tags can be used both lower and uppercase. However, the recommendation is to use lower-case for readability and consistency HTML Text Editors Because HTML files are text files, they need to be created in a text editor. A text editor is a program that allows you to edit the text to create your web page. There are many different ones available to download, but beginners are urged to use Notepad if they use Windows or TextEdit if they use macOS. Once you have learned the basics, you can move onto other professional editors, such as Vim, Sublime Text, Notepad++, and so on. Using Notepad or TextEdit Step One – Opening Notepad (Windows) If you use Windows 8 or above: Open your Start Screen Type in Notepad If you use Windows 7 or lower: Open Start Click on Programs>Accessories Click on Notepad Opening TextEdit (macOS) Open Finder Click on Applications>TextEdit You will also need to change a few preferences, so the application saves your

files properly: Open Preferences Click on Format>Plain Text Click on Open and Save Check the box beside "Display HTML files as HTML code instead of formatted text." Open a document to put your code in Step Two – Writing Your HTML Code Write the following code into your Notepad or Text Edit document. You can type it in by hand or copy and paste it: <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Step Three – Save the Page To save the file, click on File>Save As Call the file "index.htm" and ensure the encoding is set as the preferred HTML encoding, UTF-8. There are two file extensions you can use - .htm or .html. It doesn't matter which as there is no difference between them. Step Four – View it in Your Browser Open index.htm in your browser by double-clicking the file. Alternatively, you can right-click on the file and click on Open With You should see, on your screen, a web page showing your desktop location as

the URL and the following on the screen: My First Heading My First Paragraph Here's another simple HTML example that you can try out: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html> HTML Basic Examples To finish this chapter, we'll look at some basic examples. These will include tags you will come across throughout this book; don't worry if you don't understand them yet. You will do by the end. HTML Documents Every HTML document must have a declaration stating the document type - <!DOCTYPE html> The document must start with <html> and end up with </body> The part of the HTML document visible to users goes between the <body> and </body> tags Here’s an example: <!DOCTYPE html> <html> <body>

<h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> <!DOCTYPE> Declaration This indicates the type of document, ensuring web browsers can correctly display web pages It should only be in the text once, right at the start of the page, and before any tags The declaration is case-insensitive The HTML5 declaration is: <!DOCTYPE html> HTML Headings There are several tags used to define HTML headings - <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. <H1> is the most important and <h6> is the least important. <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> HTML Paragraphs The <p> tag is used to define HTML paragraphs: <p>This is a paragraph.</p> <p>This is another paragraph.</p> HTML Links The <a> tag is used to define HTML links: <a href="https://www.wikipedia.com">This is a link</a> The href attribute is used to specify the link's destination. We'll talk about attributes in the next chapter but, right now, all you need to know is that they

are used for providing more information about elements. HTML Images The <img> tag is used to define HTML images, and the attributes are src (source file), alt (alternative text), height, and width. <img src="wikipedia.jpg" alt="Wikipedia.com" width="104" height="142"> How to View HTML Sources How many times have you looked at a web page and wondered how it was created? On any HTML web page, all you need to do is right-click the page. In Chrome browser, click on View Page Source or, in Edge, click on View Source. It's much the same in other browsers. A window opens, showing you the page's source code. How to Inspect HTML Elements Simply right-click a blank area or an element and click on Inspect Element or Inspect. This will show you both the HTML and CSS parts of the element, and you can also use the Styles or Elements panel to edit the HTML. In the next chapter, we'll look at the building blocks that go into HTML.

Chapter 2: HTML Building Blocks Let’s dive straight into this – an HTML document is made up of building blocks. The basic ones are: Tags – HTML tags are used to surround content and give it some meaning. All tags are surrounded by <> Attributes – HTML attributes provide additional details about elements, and the start tag is used to apply them. All attributes have two fields, name and value. We’ll also be discussing elements in this chapter. Syntax <tag name attribute_name= “ attr_value”>content</tag name> HTML elements are individual HTML file components and anything written in a tag is known as an element. Here’s an example:

<!DOCTYPE html> <html> <head> <title>The basic HTML building blocks </title> </head> <body> <h2>The building blocks</h2> <p>This is a paragraph tag</p> <p style="color: red">The style is an attribute of the paragraph tag</p> <span>The element contains a tag, an attribute and content</span> </body> </html> The output of this is: The building blocks The style is an attribute of the paragraph tag The element contains a tag, an attribute, and content HTML Table Tags The table tags you are likely to use are: Table tr td th tbody thead tfoot

col colgroup caption HTML Form Tags The form tags are: form input textarea select option optgroup button label fieldset legend HTML Scripting Tags There are two scripting tags: script noscript HTML Tags You can think of HTML tags as being similar to keywords. They define the way a browser formats content and displays it. By using tags, web browsers can distinguish between HTML and simple content. There are three primary parts to a tag – the opening tag, the content, and the closing tag. However, some HTML tags are unclosed. When a browser reads an HTML document, it is read from the top down and

from left to right – the same way you would read the pages in a book. HTML documents are created by HTML tags and render the properties – every tag has its own properties. HTML files need essential tags to allow the browser to tell the difference between HTML and simple text. As per the requirements of your code, you can use as many tags as you need. Every HTML tag should be enclosed between brackets - <> All HTML tags do different things If an open tag is used (<tag>) then, in most cases, there must be a close tag (</tag>.) Syntax <tag> content </tag> HTML Tag Examples All HTML tags should be written in lowercase letters. These are the most basic tags: <p> Paragraph Tag </p> <h2> Heading Tag </h2> <b> Bold Tag </b> <i> Italic Tag </i> <u> Underline Tag</u> Unclosed HTML Tags Not all HTML tags need to be closed. For example: <br> Tag – br is a break line tag, used to break code lines <hr> Tag – hr is a horizontal rule tag, used for inserting a line across the page

HTML Meta Tags The html meta tags are: DOCTYPE title link meta style HTML Text Tags The commonly used text tags are: <p> <h1> <h2> <h3> <h4> <h5> <h6> <strong> <em> <abbr> <acronym> <address> <bdo> <blockquote> <cite> <q>

<code> <ins> <del> <dfn> <kbd> <pre> <samp> <var> <br> HTML Link Tags There are two link tags: <a> <base> HTML Object and Image Tags The main object and image tags are: <img> <area> <map> <param> <object> HTML List Tags The primary list tags are: <ul> <ol>