Loading...
Menu

HTML & CSS In A Week ...Or Less

HTML & CSS IN A WEEK …OR LESS

 

www.fullstackstudent.com

 

 

 

 

 

 

 

 

 

[
**]

  • *

Introduction

 

HTML & CSS are the building blocks of the web and without these two core technologies, there wouldn’t be any websites or web apps. This book, HTML & CSS In A Week …Or Less, intends to do exactly what the title implies. You will learn the core web technologies in less than one week, or less. In our digital age today, it is quickly becoming an important requirement to be digitally well versed. In fact, many jobs require you to be “tech savvy” and learning how to code with HTML & CSS can do wonders for our personal and career development. Even if you don’t intend to become a web designer or web developer, learning how to code with HTML & CSS will no doubt add a fantastic tool to your skillset.§

 

My name is Abdi Cagarweyne, and I have been in the field of Software Development for the best part of my life. Currently, I ‘m a full-stack JavaScript developer based in London, UK. I know that there are many excellent programming books available and all have their place. But, I wrote this book because it is written in a way that I feel makes understanding these two core technologies easier from a beginner’s perspective. Essentially, the book is comprised of two parts, the first part focuses on the HTML only without any CSS. The second part focuses entirely on how to apply styles to the HTML using CSS.

I enjoyed writing this book very much and I sincerely hope that it enables you to learn an excellent tool and that you enjoy reading it!

 

[
**]

  • *

How to use this book& exercise files

 

The book is organized into seven days, meaning that we will tackle different topics on each given day. I would like to emphasize the importance of practically typing out the HTML and CSS code using a code editor and following along. I go through the most popular code editors in use today – so be sure to download one and use it as the editor to write your code. Accompanying this book are working exercise files, one for the HTML section and the other CSS. I would highly encourage you to download the files, as I will be referring to them extensively throughout the book.You can download the files from here:

 

fullstackstudent.com/html-css-in-a-week-exercise-files/

 

When you download the exercises files, you will see two folders. One titled css-section and the second html-section. The CSS folder contains all of the sections for each topic that is covered, and the names of the folderscorrespond with each heading in the book in the CSS section. It is important that you download these files, as you will get the starter code for the landing page that we will build in the CSS section.All of the exercises files in the css-section are organised into ‘start’ and ‘final’ code. The code in the start folder contains all of the HTML & CSS code that we will start with in that section. The final folder contains all of the code that is written for that section once we have covered all of the tasks for the topic in question.

 

Day One

How the web works

In order to surf the World Wide Web, you need an application called a web browser. You’re probably familiar with this, as you might already be using one already such as Google’s Chrome, Microsoft’s Internet Explorer, Mozilla’s Firefox, or Apple’s Safari. To fully appreciate how the web works, we’ll briefly talk about URLs, domain names, IP addresses, the domain name system, and the HTTP protocol to be fully prepared for web development.

The World Wide Web

A domain name is part of a URL, which is just a human-friendly IP address. Domain name servers connect domain names with IP addresses so you don’t have to. Clients and servers communicate using the HTTP protocol over an application called a web browser.

The big picture

What actually happens in between typing in google.com and seeing Google’s website? In short, there are a lot of complex things happening and I’ll describe this process briefly. In between each browser request and server response are one or multiple pieces of software, most of them speaking to each other using a common protocol called HTTP, or the Hypertext Transfer Protocol. Let’s start with an overview of how the Web works, and then explore each step individually. Every website you’ve visited started with a client sending a request to a server. A client is anything that can request a resource on the web and these include desktop computers, laptops, phones, and tablets. But even software programs themselves can be clients.

Be it a human user or a software program, the entity making the request is called a client. When you type a URL into the address bar, you are sending a request to a computer server, in particular, a web server. The Internet is a network of computers all connected together by various cables. It’s made up of wires, routers, switches and satellites that connect the network of servers together. These servers can perform a lot of tasks. Web servers host web sites, domain name servers connect domain names with IP addresses, and mail servers send and accept email messages.

All of these things are considered part of the Internet. The files, folders and media that make up webpages are housed on the servers. These files, folders and media are all software and are what we’re talking about when we say the web. The web is the software that makes up websites, applications, games, wikis and videos that you can access on a web browser. As I’ve already mentioned, there are a lot of different web browsers out there. There are also many types of clients, mobile phones, apps, and games. In order for everyone to play nicely together, they have to speak the same language, and that language is called HTTP, or Hypertext Transfer Protocol.

Nearly all HTTP requests start with you typing in a domain name like google.com. Servers however, use numbers to locate each other, not words. These numbers are called IP addresses and work similarly to how phone numbers work, with each IP address pointing to a particular server on the Web. The service in the middle, between the domain name you type in and the IP address used by the server, is called a Domain Name Server, or DNS. Once the DNS finds the IP address you asked for with the domain name, it rushes your request along to the server hosting the website.

For now, we can think of this request as a stamped, self-addressed envelope sent to the website’s IP address with a return address of your computer’s IP address. When the envelope is delivered to the server hosting the website, the server sends the envelope back to you with the website you wanted. When this happens, the HTTP trip is over and you have the thing you asked for, which is the web page of the website that you requested. In our example, it is the Google home page but this could be anything such as an image, text, application or video.

That took a long time to explain! But this happens so quickly that you don’t even realize that the website you just visited has its server located on the other side of the planet! When you request a web page, it usually takes less than a couple of seconds and it’s getting faster all the time. Now that we’re somewhat familiar with the process of what happens when we surf the web, let’s break down each step in more detail.

URLs

URL’s, domain names, IP addresses and DNS are all quite closely tied to one another. The web consists of so many interconnections and we will discuss each of the main parts in more detail. The term URL stands for Uniform Resource Locator. Back in the late 1980s, Sir Tim Berners Lee invented the concept of the World Wide Web and in doing so, he standardized many of the processes needed to make computers talk to each other. A URL is one of those processes and it is the way that the web is interconnected. Whenever you want to access something on the web, be it on your mobile device or desktop, you will need to provide a URL for that resource. This resource could be text, audio, video etc.

For instance, you might want to watch some videos on YouTube and to get there, you will type http://www.youtube.com in the address bar in your browser. This is a URL. It shows the method that your browser will use to retrieve this resource, which is the http protocol. It also shows the network location, in human friendly form, of the resource that you wish to access. One of the most wonderful parts of the web is how everything is connected. Web pages are connected using what’s called hyperlinks, and behind every hyperlink is a URL. Hyperlinks often look like the blue, underlined words on the page, but they can also look like a lot of things these days, such as images or buttons.

If the URL starts with http, the next bit in the URL, after the colon and two slashes, is the domain name. Like http://www.youtube.com. Everything after a domain name describes the full path to the resource. However, more and more URLs are becoming shorter. Nowadays, nearly everything is omitted in the address bar, including the http://, and you are left with what is often called the ‘naked’ URL or clean URLs. However, just because you can’t see these details, it doesn’t mean that they’re not there. Modern browsers have built in features that hide these details from you, but in actuality, they are needed to access any resource on the web. The one detail that’s always left is the domain name, like youtube.com. While this domain name will help users find resources on the web, computers don’t use names to find things. They use numbers, and these numbers are called IP addresses.

IP Addresses

Since the Internet is comprised of a global network of computers, there needs to be a way to identify each computer and device connected the Internet. This is where the Internet Protocol address (or IP) comes into play. Everything connected to the Internet has an IP address. This includes computers, servers, cell phones and any other equipment that is connected to the Internet.

All of these devices have a unique IP address that identifies them and enables them to connect to the Internet. Think of an IP address like your home address, so if someone wants to send you a letter, they need to know your full address to post the letter to you. Likewise, all devices that communicate with each other on the Internet use an IP address to send and receive data. An IP address takes the form of four sets of numbers. Each of these numbers must be between 0 and 255 – for example, 77.121.147.234.

The Domain Name System

A domain name system is a special type of server that connects domain names with IP addresses, in other words it’s like a giant telephone book that connects an IP address with a domain name. This means that you don’t have to keep your own address book of IPs to your favorite websites. Instead, all you have to do is remember the domain name and you just connect through DNS, which manages a massive database that maps domain names to IP addresses. As you might be aware, there are millions and millions of websites and it is impossible for one computer server to contain the entire list of websites and their respective IP addresses. The DNS system is a distributed database. This means that portions of the database are divided and spread to many different servers on the Internet. So, if a DNS server does not contain the domain requested, it will redirect the request to another server.

As we’ve already seen, a web address is referred to as a URL, and this URL is divided up into various levels. These levels are: the top-level domain, domain name and host name. So, if you wanted to go to the Wikipedia website, you would type in www.wikipedia.org – the .org part is the top-level domain, the Wikipedia is the domain and the www is the host name. There are several top-level domain names that you’ve probably come across before, these include: .com, .edu, .gov, .me etc. The inner workings of the DNS system is quite complex, but what is important to understand is that the DNS is the address book for the Internet, and it’s what connects domain names with IP addresses.

 

[
**]

  • *

HTTP and HTTPS

Every request that you make on the web is sent using the HyperText Transfer Protocol or more commonly called HTTP. HTTP is like the language that clients and servers use to speak to each other. This is a standard way for all devices to communicate, because there are so many different types of clients and servers. HTTP defines the rules that every device, be it a client or server, must conform to in their communication. In every HTTP communication, there are two pieces of information that are sent back to the client. The first is the status code, and then the requested resource such as a web page or a file. The status code helps identify the cause of the problem when a web page or other resource doesn’t load properly. There are a whole host of status code numbers, each with a different meaning. When you request a web page and that page loads into your browser, the server would have a sent a status code equal to 200. This means that everything is OK and the resource requested has been sent. You can get a detailed breakdown of all the different status codes here on the Wikipedia page.

Sometimes, in your travels around the web, you’ll see a lock icon in the address bar. The lock will usually be all the way to the left and the URL will start with https not http. The s stands for secure and it means that communication between the client and the server is private and encrypted. When surfing the web, don’t use sites that require sensitive information, like medical records, banking details or even just username and passwords if they don’t have the lock.

[
**]

  • *

What is HTML & CSS?

As you have seen from how the web works, whenever you access a website, the webserver will send you the resource that you requested. This means that you will receive at a bare minimum two documents, a HTML and CSS file. The HTML file contains the structure of the website, just like you would give any document structure such as a title, heading, and paragraphs, while a HTML document contains the same structure that tells your browser how to render the web page.

The second file that you will most certainly receive when you make a request for a website is a CSS file. Whilst the HTML file species the structure of the document, the CSS file tells the browser how that documents looks like from colors to layout. Many years ago, it was quite normal to receive just one file that contained both the HTML and CSS, but those days are long gone and it is best practice to separate the structure of a webpage from its styling. This means that whenever you are looking at a website, your browser has received both HTML and CSS files from a web server that hosts the site being accessed.

The web browser, this could be any web browser such as Google Chrome, Internet Explorer, Firefox etc, interprets the HTML and CSS code to create the page that you see. Small websites are created using just HTML and CSS, but larger websites make use of other technologies such as databases and advanced server side programming languages. However, HTML and CSS are the gateway to any website or app online, as without these two technologies, no one will be able to use the website.

 

HTML Tags, Attributes and Elements

As I’ve mentioned already, HTML is the structure of a website. Think of it like a house, the bricks that form the structure and its shape. HTML describes the structure of web pages and HTML stands for Hyper Text Mark-up Language. As the name suggests, it’s a markup language that dictates how the information is marked up on a web page. If you have ever used word processing software such as Microsoft Word, you will be familiar with headings, subheadings, lists, and paragraphs.

When you want to add any of these features in word processing software, for example a heading, you can simply highlight the text that you wish to use as a heading and select the appropriate heading such as heading 1 from the dropdown menu and the text you selected will now be a heading 1. With a word processor, there is an underlying program that interprets your selections and makes the changes that you can see on the screen. You can replicate the same structure on a web page, but you don’t have the luxury of drop down menus, instead you have to tell the browser how to structure the web page using HTML code.

[
**]

  • *

HTML terms

Whilst creating your first web page, you will likely encounter a few terms being used constantly. Once you understand what they are, you will become familiar with all of them, but the most common terms that you will hear about all the time are elements, tags, and attributes.

Elements

Elements are the backbone of any web page, and you’ll see these elements in the source code for all web pages after the<!DOCTYPE html>declaration, we’ll learn about the<!DOCTYPE html>soon. Elements define the structure and content of objects within a page. Some of the more frequently used elements include multiple levels of headings, identified as <*h1*>through<*h6*>elements, and paragraphs identified as the<*p*>element. Elements are identified by the use of less-than and greater-than angle brackets,<>, surrounding the element name. Thus, an element will look like:<*body*>.

Tags

When you use the less-than and greater-than angle brackets and surround them over an element, this creates what is known as a tag. Tags most commonly occur in pairs of opening and closing tags. Opening tags mark the beginning of an element, this consists of a less-than sign followed by an element’s name, and then ends with a greater-than sign; for example, <*body*>. The content that falls between the opening and closing tags is the content of that element. For example, a paragraph will have an opening tag of<*p*>and a closing tag of <*p*>. What falls between these two tags will be the content of the paragraph.

Attributes

Elements can have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet a certain criteria. The most common attributes include theid _]attribute, which identifies an element; the[_classattribute, which is used for styling a group of elements using CSS; thesrc _]attribute, which specifies a source for embeddable content such as the source for an image; and the[_hrefattribute, which provides a hyperlink reference to a linked resource. Attributes are defined within the opening tag, after an element’s name, and include a name and a value. The format for these attributes consists of the attribute name followed by an equals sign and then the attribute value surrounded by quotes.

For example, an<*a*>element including anhrefattribute would look like:<*a*href=“http://fullstackstudent”>Fullstackstudent. This piece of HTML code will display the text “link” on the web page and will take users to http://fullstackstudent.com/ upon clicking the “link” text. The anchor element is declared with the opening<a>and closinga>tags encompassing the text, along with the hyperlink reference attribute and value that are declared withhref=“http://fullstackstudent”in the opening tag. The following figure puts all of the different parts that we have just looked at into perspective:

Tools of the trade

 

HTML documents are plain text documents saved with an .html file extension rather than a .txt file extension.  So, really, almost any text editing tool will suffice. However, authoring websites is an iterative process, and you will be running multiple languages like HTML, CSS, and later on, JavaScript. Therefore, writing everything by hand will be very time consuming. A good text editor will help you speed up the development process and catch any syntax errors, (these are typos and characters or strings incorrectly placed) that you might miss.

 

Text or code editors, as they are sometimes called, come in all shapes and sizes and you have many different options both paid and free. However, at minimum, you will need a text editor that has:

  • Line Numbers
  • Formatting options
  • Syntax highlighting
  • Code support for other languages – HTML, CSS, and JavaScript

 

If you’re new to web development, and you don’t have experience with text editors, I highly recommend that you try out several different types of text editors before settling on a favorite. This is because choosing a text editor is an important decision that will impact your workflow and productivity when it comes to building websites. It’s worth mentioning that a text editor that works for one developer might not be the best solution for another, so it really comes down to personal, workflow, and productivity factors in choosing a text editor.

 

When you’re starting out in web development, it is highly recommended to start with a code editor that is easy to set up and use. Not only will this allow you to be productive from the very start, but it also means that you don’t have to spend a tremendous amount of time learning the specifics of the text editor. With text editors, nothing is set in stone and as you gain more experience, you can always move to a more complex text editor if you find that your current one is limited in features that you need.

 

In web development, speed is an integral part of the creation process, and this is something that you will need to consider when choosing a text editor. Text editors should be lightweight and fast. This is an important feature that you should carefully look for. So, in your quest to find your ideal text editor, if you find that the text editor feels sluggish and unresponsive at times, then this is a sign that it might not be a suitable text editor for you. Slow and sluggish text editors can add hours or even days to your development time.

 

Now we’ve talked a lot about the different features that a text/code editor should have and you’re probably wondering what are some of the popular text editors that are in use in the industry since there are so many to choose from. The most popular text editors, not in any order, are:

 

  • Sublime Text – sublimetext.com
  • Brackets – brackets.io
  • Atom – atom.io
  • Coda – panic.com/coda
  • Notepad++ – notepad-plus-plus.org
  • BBEdit – barebones.com/products/bbedit

 

Most of these text editors are available on all major operating system platforms, Windows, Mac, and Linux/Ubuntu except for Coda, BBEdit which are only on MAC, and Notepad++ which is only for Windows. Atom, Brackets and Notepad++ are fully free and open source text editors that you can download and use without paying anything. Sublime Text is also free, however, the unregistered version will have a constant pop up that will ask you to purchase a license. The other text editors all have trial periods, which means that you can download them and try out the text editor for free.

 

Personally, I use a combination of text editors depending on the project that I am working on. So, go ahead and try out a few text editors and see which one you feel the most comfortable using.

 

 

[
**]

  • *

HTML Foundations: your first web page

 

 

Coding up your first web page is a straightforward process, and we can get this done in less than 15 lines of HTML code. The following is all you need to construct your first web page using HTML. This might look a little different to anything you’ve seen before, but we’ll go through each line in detail.

   

[_<!DOCTYPE html> _]

[_<*html* _][_lang=“en”> _
_<*head*> _]

[_<*meta*charset=“utf-8” /> _]

[_<*title*>My First Web Page _]

[_ _
_<*body*> _]

[_<*h1*>Hello World _]

[_<*p*>My first web page. _]

[_ _
]

 

The first line <!DOCTYPE html> informs the browser about the type of HTML version that is being used and is called the document type declaration. This simple statement means that HTML5 is the version of the markup that will be used for the rest of this document. The document declaration is always placed at the beginning of the file before writing any HTML markup. 

 

HTML Tag

 

The next piece of HTML code is the [_<*html* _][_lang=“en”> _]and this signifies the beginning of the document. As you will soon see, most elements come in pairs.

The <*html*> element comes in a pair and encapsulates all the other elements. The pairs of elements have an opening, and this element is closed right at the end of the document with .  The opening <*html*> element has an attribute that specifies the language of the document; in our case we are setting the language as English with en.

 

This is not something that you have to do to every single HTML document, but it is one of those things that strictly specify which language will be used. It’s also useful for screen readers in terms of how they enunciate the text, and is also very helpful for online translators, so that they know which language they’re dealing with. You can find all the ISO language codes here:http://www.html.am/reference/iso-language-codes.cfm. 

 

 

[
**]

  • *

Head Tag

 

The next element is the <*head*>, which is inside <*html*>. This is a required tag that should only be used once on the web page. The elements that reside inside the head tag aren’t displayed on the web pages and are hidden from visitors. 

Inside this element, you can place metadata – this is accompanying information about the page. In our web page, the <*meta*> element has an attribute called charset that is set to utf-8. 

 

This simply specifies the character encoding for the HTML document.This is something you should do for each of your HTML documents. You always want to set the character encoding, and unless you’re going to be using Russian, Japanese, and the Persian alphabet, or other types of characters, you’re probably going to use utf-8. What this doesis inform the browser which encoding to use – that way, it’s going to use the proper characters when rendering content to the page. You also want to set this encoding as the very first thing after the head tag, so it’s immediately set.

 

Meta tags don’t actually do anything to the content that is presented in the browser window, but they are used by the likes of search engines to catalogue information about the web page. You will notice that the <*meta*> tag doesn’t have a corresponding closing tag. In HTML there are some tags that are self-closing, and the <*meta*> tag is one of them.

  

Title Tag

 

The next element that sits inside <*head*> is the <*title*>. This element sets the title of the document. The text inside the pair of opening and closing tags of the <*title*> element doesn’t actually appear in the main body of the document, instead the title appears in the tab or window of the browser:

 

 

 

The closing tag for the  element comes after closing the title tag, and this just closes the corresponding tag that was opened. 

 

Body Tag

 

The next element in the document is the <*body*> element, and inside this tag is where the main content of the document will actually be viewable to the user when the file is opened in a browser. Most of the markup tags will actually go inside the body element. There are two elements inside the main body element, h1, which specifies the type of heading – much like the heading 1 selection from a Word document, and the p element that signifies the beginning of a paragraph.

 

You could simply just write your text out inside the body element, but to follow good semantics and to make it easier to style different elements, it is best practice to wrap all paragraph text inside a p element. Finally, the body and html elements are closed off with closing tags.  

           

Save as a HTML document

 

Now that we have coded our first web page, we can save this as an HTML file. First, make sure that you save the file with an appropriate name. I’m saving mine as first-web-page.html. Please note it is important to save your file with an.html file extension, otherwise you won’t be able to open the file as a web page in your browser. Once you have saved the file, just navigate to its location in your computer and double click it to open – it should open in your default browser:

 

 

While it may not look exciting, you have just created your first web page! HTML is the building blocks of all websites on the web, and without HTML, there wouldn’t be any websites.

 

[
**]

  • *

Comments in HTML

 

In HTML, and generally in software development, we have the ability to leave comments within our code, and any content wrapped within a comment will not be displayed on the web page. Comments play an important role in helping us organize our code, allow us to convey our thinking and reasoning behind what we have written to others, and provide a way for us to more effectively manage our code. Comments become especially useful when there are multiple people working on the same files. In HTML, comments start with . If you create a new file in your chosen text editor and enter the following markup:

 

<!DOCTYPE html>

<*html* _][_lang=“en”>

<*head*>

[]<*meta*charset=“utf-8” />

<*title*>Comments in HTML

<*body*>

[_ _]

<*h1*>Comments in HTML

<*p*>Comments are really useful in HTML web pages and also in Software Development in general

 

Then save the file as comments.html. When you open the file in the browser, you will see that we have a simple web page along with some comments:

 

[]

 

As you can see, comments are ignored by the browser and not displayed to the users. In most code editors, you can use a keyboard shortcut to add comments into your code, simply highlight the text that you wish to turn into a comment, on a Mac, simply hold down the command button and press the forward slash key on your keyboard. For Windows, or Linux users, hold down the Ctrl key and then press the forward slash key, and the editor will automatically make the highlighted text a comment for you. This works in Atom, Sublime, and pretty much most code editors.

[
**]

  • *

Headings

 

Just like in Word processed documents, headings play an important role in the structure of your web page. Users can see what the headings are for your document and can skim your pages according to its headings. Search engines use the headings to index the structure of the web page. In HTML, there are six levels of headings. The h1 heading should be used for main headings, h2 is used for subheadings, and if there are further sections under the subheadings, then you can use h3 up to h6. In your code editor, type up the following and save as headings.html:

 

[_<!DOCTYPE html> _]

[_<*html* _][_lang=“en”> _
_<*head*> _]

<*meta*charset=“utf-8” />

[_<*title*>HTML Headings _]

[_ _
_<*body*> _]

<*h1*>Main Heading – level 1

<*h2*>Subheading – level 2

<*h3*>level 3 Heading

<*h4*>level 4 Heading

<*h5*>level 5 Heading

[_<*h6*>level 6 Heading       _]

[_ _
]

 

Browsers will display the sizes of the headings slightly differently from others. However, what you should see is that content of the h1 should be the largest of the six and as the level goes up, the size of the contents should decrease in size:

 

 

 

[
**]

Paragraphs

 

Paragraphs are one of the most basic tags that you will use in HTML. The following is a simple HTML document that I’ve created with two paragraphs. You can type up the following markup to get the same file, and then save as paragraphs.html:

 

[_<!DOCTYPE html> _]

[_<*html* _][_lang=“en”> _
_<*head*> _]

[_<*meta*charset=“utf-8” />              _]

[_<*title*>Hello World _]

[_ _
_<*body*> _]

<*h1*>Understanding HTML

_ HTML is the building blocks of web pages_

_ It specifies the structure of documents. _

 

_HTML plays an important part in web documents along with Cascading Style Sheets. _

[_ _]

[_ _
]

 

However, when you view this in the browser, it is formatted differently:

 

 

The browser has clumped together the two paragraphs into one, so the visual structure that we see in the code is not what is reflected in the output from the browser. For us to get the desired effect, we have to tell the browser that each sentence is a single paragraph. We can do that by wrapping each sentence with an opening and closing tag:

 

[_<!DOCTYPE html> _]

[_<*html* _][_lang=“en”> _
_<*head*> _]

[_<*meta*charset=“utf-8” /> _]

[_<*title*>Hello World _]

[_ _
_<*body*> _]

<*h1*>Understanding HTML

 

<*p*>HTML is the building blocks of web pages

[_ It specifies the structure of documents._]

 

<*p*>HTML plays an important part in web documents along with Cascading Style Sheets.

[_ _]

[_ _
]

 

Now when we save the document and reload the web page in the browser, we get our desired effect:

 

 

We have the same code as before, but only this time we have wrapped our sentences with the p tag. Pretty much all browsers will display each paragraph on a new line with some space between it and any other paragraphs that are on the page.

 

White Space

 

Web developers use white space liberally to help make the code easier to read and understand. White space does not affect the rendering of web pages in the browser. In fact, you can have as much space between elements and content and the browser will ignore the extra spaces. Using our paragraphs from the last example, we can add white space:

 

 

 

<*p*>HTML is the building blocks of web pages

[_ It specifies the structure of documents._]

 

HTML plays an important part in web documents along with Cascading Style Sheets .

 

Let’s save this and refresh the browser to see if anything changed:

 

 

As you can see, this has no effect on the output. The browser has collapsed all extra white space in the output. When the browser sees two or more spaces next to each other, it will simply collapse the space into just one space. You can also have a line break and the browser will also treat that as a single space on output. This means that web developers can make use of this to add indentations and extra white space where necessary to make the code tidier and easier to comprehend.

 

Line Breaks & Horizontal rules

 

As we just saw, the browser will ignore any line breaks and collapse the extra white space into a single one. However, what if you wanted a line break within your paragraph? You can use the <*br*/> tag to achieve this. Notice that the <*br*/> tag is self-closing just like the meta tag we saw previously. Let’s place a line break after the first word in our first paragraph:

 

<*p*>HTML <*br*/> is the building blocks of web pages

[_ It specifies the structure of documents._]

 

Save your changes and then refresh the browser to see the changes:

 

 

As you can see, the line break has been inserted exactly where we specified in the HTML. The line break tag is useful when you want to add a line break inside a paragraph.

 

Horizontal lines

 

Horizontal lines have been used as separation between items both in print and on web documents. In HTML, you can use the <*hr*[* /*]> tag to add a simple horizontal line in your web page. Let’s add a line between the two paragraphs that we currently have:

 

<*p*>HTML is the building blocks of web pages

[_ It specifies the structure of documents._]

<*hr*[* /*]>

<*p*>HTML plays an important part in web documents along with Cascading Style Sheets.

 

Now, let’s save this change in our text editor then switch over to the browser and see the result:

 

 

A solid horizontal line has now been added to the web page between the two paragraphs. You can use this tag to separate different areas of the page which can be useful in structuring your documents.

 

Emphasis & Strong Emphasis

 

In writing, we generally emphasize certain words, sentence and headings to make them stand out, or to help the reader to understand a point of emphasis. You can do the same with web pages using four different tags: bold, strong, italic and the emphasis tag.

 

I have created a page with four short paragraphs about the HTML tags that are used to format text. Let’s say that we want to make the words represents and emphasis bold. We can achieve this using either bold or strong, we will discuss the difference soon – let’s first make the words bold using the <*b*> tag:

 

<*p*>HTMLis the building blocks of web pages

[_ It specifies the structure of documents._]

<*hr*[* /*]>

<*p*>HTMLplays an important part in web documents along with Cascading Style Sheets.

 

<*h2*>The Bold Tag

 

<*p*>The bold tag (⟨b⟩) <*b*>represents a span of text that you wish to highlight from the rest of the text without inferring any type of special relevance or meaning. As you would expect, browsers typically bold this text.

 

<*h2*>The Strong Tag

 

<*p*>By using the strong tag (⟨strong⟩) <*b*>represents a string of text as having strong importance. The text should be considered to be more important than the text surrounding it. This is displayed as bold, just like the using the bold tag.

 

<*h2*>The Italic Tag

 

<*p*>Like the bold tag, the italic tag (⟨i⟩) <*b*>represents a string of text that is highlighted from the text around it. No particular meaning is attached to the text when you use the (⟨i⟩) tag, it is just rendered in italics. Helpful for phrases, terms, or any text that is normally displayed in italics.

 

<*h2*>The Emphasis Tag

 

<*p*>The <*b*>emphasis tag (⟨em⟩), or “em” tag, denotes text that is emphasized more than the text around it. Although this tag is usually rendered in italics, it shouldn’t be used in place of the italics tag, rather it should be used for text that needs to be emphasized for some reason.

 

 

Save the changes and switch to your browser then refresh to see the results:

 

 

The words represent and emphasis now stand out as bold. Adding the bold tag has not added anything except the visual representation of the bold text on the web page. We can achieve the same effect with the strong tag by merely replacing it with the bold tag for each word <*strong*>represents and <*strong*>emphasis. We get exactly the same result as before.

 

Try this out. You may be wondering: what is the difference between the two tags? In terms of visual representation, there is no difference whatsoever, they both highlight the text in question by making it bold.

 

However, there is a difference when it comes to semantic meaning. When you use the bold tag, you are merely adding a visual stylistic element to a piece of text and you are not inferring any type of special relevance or meaning. You just want to make a piece of text bold.

 

However, when you use the strong tag, you are giving that piece of text a semantic meaning, in other words these words in between the strong tag have a strong importance. So, when a screen reader reads the text that is in between a strong tag, if it is capable of doing a different vocal inflection, it will know to emphasize that piece of text to get that importance across to the listener.

 

The italic and emphasis tags both do the same thing. Let’s italicize the headings for each heading that describes the two tags using the <i> and <em> tags respectively:

 

<*h2*><*i*>The Italic Tag

 

<*h2*><*em*>The Emphasis Tag

 

We need both an opening and closing tag for each of the tags to italicize the words, so make sure to nest them inside the opening and closing <*h2*> tags. Save and switch over to your browser, and you will notice that both the headings are now italicized:

 

 

In the same way that adding a bold tag visually highlights a word, adding an <*i*> just italicizes the word without adding any semantic meaning. Using <*em*> on the other hand, adds semantic meaning to your markup. It’s telling screen readers, for example, that this piece of text needs to be emphasized.

 

HTML Parent/Child Structure

 

All HTML documents follow a structured parent child relationship. As we’ve already created a web page, we did so by making sure the first line in the document was the <!DOCTYPE html>, then the html element then the head and so on. The following is a diagram of the parent and child relationship of a simple web page:

 

The very first element is the <!DOCTYPE html>, which specifies the version of HTML that the document will be using. The root element is the html tag and everything in the document from there onward is nested inside this element. The elements are also called nodes and all the nodes together are called a node tree – as the structure looks like an inverted tree with the root at the top.

 

So, the head and body nodes are siblings since they both share one parent, which is the html node. The head node has two children inside it, the meta and the title tags. So, the term parent/child relationship comes from the fact that the containing element is referred to as the parent of the element that is contained within it. In this structure, the meta and the title tags are the children of the head tag and both are descendants of the html tag.

 

In the example webpage shown in the diagram, the body node has several <*p*>elements as children. Similar to the meta and the title tags, all of these <*p*> tags are siblings. If the <*p*> tags had any nested elements inside them, like an em or strong tag, then they would become parents to these nested elements.

 

To show the parent-child relationships of nodes in the code, web developers make use of the white space by indenting the children inside their parent containers. We have been doing this already with our code:

 

[_<!DOCTYPE html> _]

[_<*html* _][_lang=“en”> _
_<*head*> _]

[_<*meta*charset=“utf-8” /> _]

[_<*title*>Hello World _]

[_ _
_<*body*> _]

<*h1*>Understanding HTML

 

<*p*>HTML is the building blocks of web pages

[_ It specifies the structure of documents._]

 

<*p*>HTML plays an important part in web documents along with Cascading Style Sheets.

[_ _]

[_ _
]

 

 

[
**]

  • *

Day Two

 

Hyperlinks

 

One of the core components of web pages is the hyperlink. The World Wide Web as we know it today is built on hyperlinks with millions of pages interlinked on the Internet. The hyperlink provides the ability to link from one web page or resource to another. Linking your web page to another external page is just one part of the linking system in HTML. There are several types of links. These include:

  • Links from one website to an external one
  • Link to another page within the same site
  • Link to another region on the same web page

 

The first time that you encounter the anchor element, it might be a bit confusing because when you think of the logical naming for linking web pages, it would be the link element. Well, that would seem to make sense,but it’s not what the link element is used for.Instead, the link element is used to request external resources for the page such as a CSS or JavaScript file.To create a link on the page, we use the anchor element or tag.This tag is at the center of all linking on the World Wide Web. The anchor tag element takes both an opening and closing tag. Let’s explore the way you would create a link using an anchor tag:

 

 

The above shows how you would create a link using the anchor element. You would write the opening a tag and the word [_href _]as an attribute, and this is the hyper link reference. Then, you would write the equals symbol followed by the URL, the location of the page that you are linking to.

 

In this case, it’s Google’s home page. It’s important to wrap the URL inside the quotes otherwise the link will not work. Next you have the text that will actually be the link which is clicked, in this example it is Google – however this can be whatever you like, usually it’s a reference to the name of the web page or resource that you are linking to. Creating links will always follow this pattern.

 

[
**]

  • *

Linkto an external web page or another page within the same site

 

Let’s now create a link to one of the most visited pages on the web, Wikipedia. In particular, we will link to the Wikipedia page for the anchor tag element. I have added a short description of what the anchor tag does as a paragraph and then we will add a link using the word anchor tag:

 

<*h2*>Anchor tag

<*p*>In computing, a hyperlink is a reference to data that the reader can directly follow either by clicking. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks. <*a* href=“https://en.wikipedia.org/wiki/Hyperlink”>An anchor tag is used to link web pages

 

Make sure to add the above HTML content in your HTML file or open the 9_hyperlinks.html file from the exercise files:

 

 

Linking to another region within the same page

 

In addition to linking to external pages on the web, anchor tags allow you to jump to a specific section within a document. This type of linking within a single page can be extremely helpful in enhancing your site’s navigation, especially when you have a page with lots of content that needs scrolling. Linking to sections on your site follows the same process for linking to external pages. I have a page with some dummy text separated into three sections. If you open the file 9a_hyperlinks.html:

 

 

I have created three paragraphs that will act as the link for each section, so next we will create a link to section 1, 2 and 3. In order make these three paragraphs links, we need to follow a two-step process. The first step is to create an ID for each section that we want to create a link for. So, in the HTML for the web page, scroll to the first <*h2*> tag heading that says Section 1 that will act as the anchor text for the first section and add an id attribute with the value one:

 

<*h2*id=“one”>Section 1

 

We have added an id attribute with a value of one. We will look at IDs in more detail later on, but essentially, ID’s are unique attributes that you can assign to elements. This means that if you give an element an ID, that will be unique to that element only. In this case, we have given the ID of ‘one’ to the first h2 heading title of the sections.

 

The second step is to now use this unique ID to create a link using the a tag on the text that we have already created to act as the link for each section. To do that, just scroll to where it says Link to section 1 and then we’re going to add a link using the a tag as before, but only this time we will precede the link with a pound or hash symbol as follows:

 

<*p*><*a*href=”#one”>Link to section 1

 

We can repeat this two-step process to create links for the two other sections on the page. Create an ID attribute for each h2 title heading with values of two and three respectively:

 

<*h2*id=“two”>Section 2

<*h2*id=“three”>Section 3

 

Then use the unique IDs to create links on the two remaining paragraphs that act as the text, which will become links:

 

<*p*><*a*href=”#one”>Link to Section 1

<*p*><*a*href=”#two”>Link to Section 2

<*p*><*a*href=”#three”>Link to Section 3

 

Let’s save the changes and switch to the browser to see the results:

 

 

As you can see from the screenshot above, all the paragraph texts have now become links to each respective section. Clicking on each link will take you to that section further down the page.

Relative and absolute paths

 

The two most common types of links are links to other pages on the same website, and links to external resources on other websites on the web. Both of these types of links use the atag to create the link between the web pages, and the only difference is how you link to them using the href attribute values, which are also known as paths.

 

When linking to another page on the same website, you will use a relative path. This means that the URL or path does not include the domain. For example, if you want to link to the about page on your site and it happens to be called www.mysite.com, then you wouldn’t include the domain name as in: www.mysite.com/about. Instead, your href attribute would have a value of just the name of the page so it would be: <*a*href =’’about.html”>About Us, because the link is pointing to another page on the same website which you are already on. So, there is no need to give the full URL address to get to the page you are just accessing another page on the same website.

 

Also, the about page could be inside another directory called pages, for example. This will also be reflected in the href value: <*a*href=”pages/about.html”>About Us.

 

If the page you are linking to is on an external location, then you will need to use an absolute path. In this instance, the href attribute value must include the full domain. For example, if I want to link to the about page of Facebook, the path would include the full domain plus the name of the about page, which they have just called facebook: http://www.facebook.com/facebook.

 

Opening links in a new window

 

So far, all of the links that we have created open on the same window or tab in the browser. But sometimes the user wants to open the link on a new window or tab, so that they can come back to it after going to the link. This is a feature that is available in hyperlinks that can be done easily by adding another attribute after the href called target. To open the links in a new window or tab, just use this attribute along with the value of blank. So, if we wanted to open the about page of Facebook in a new window or tab, we would just add the target attribute with a value of underscore followed by the word blank:

 

<*a*href=”http://www.facebook.com/facebook”target=”_blank>About Us

 

Thetarget attribute determines exactly where the link will be displayed, and the [blank_] value specifies a new window.

 

[
**]

  • *

Lists

 

There will be many different situations where you will need to use lists. In HTML, there are three types of lists: ordered, unordered, definition. We will explore the most common used lists, which are ordered and unordered lists.

 

Ordered Lists

 

As the name suggests, these are lists where each item in the list is ordered with a number. For example, if you had a set of instructions that need to follow a particular order, you would use an ordered list. You can create an ordered list using the <*ol*> tag element, which acts as a container for all the items in the list. The individual list items that live inside the <*ol*> tag will be placed between an opening <*li*> and closing <*li*> list element. Note that li has been shortened from list. Let’s create an ordered list of directions:

 

<*ol*>

<*li*>Go straight on main road

<*li*>At the first traffic light turn right

<*li*>Keep going straight until you see a large building on the left

      

 

With ordered lists, you can create a list that is numbered, this means that you don’t have to explicitly specify each number on the list item. Each ordered list will start from one and count upwards up to the number of <*li*>elements that you add in between the <*ol*> tag. In our example, we only have three list elements, which means that the numbering will start from one and end at three.

 

[
**]

  • *

Unordered Lists

 

These are lists that begin with a bullet point instead of number like its ordered list counterpart. Creating an unordered list is almost identical to ordered lists, the main difference is that instead of using the <*ol*> ordered list tag element, you use the <*ul*> unordered list tag. In the same way that the <*ol*> tag was used as the container for the list elements, the <*ul*> acts as the container for each of the unordered list items that reside in between the opening and closing tags. We will use an unordered list to list the different technologies used to create websites on the web:

 

<*ul*>

<*li*>HTML

<*li*>CSS

<*li*>JavaScript

      

 

Add this to the 10_lists.html file after the ordered lists and see the result in the browser:

 

Lists are primarily a way of grouping things together, and lists are not just to display a series of items. You can use lists to group similar items together. The navigation links that you see on websites is an unordered list that has been set to display as inline using CSS. We will explore how we can style lists in the CSS section.

 

[
**]

  • *

Images

 

Media files play an integral part in making the web interesting and engaging for users. Rich media complements plain text in many ways and images are at the heart of making the web what it is today. Images have been included on websites for a long time, but support for different types of images has improved over the years.

 

As you would expect, HTML lets you add images to your web pages using the <*img*> element. The <*img*> tag is one of the few self-closing tags in HTML and this also means that it doesn’t wrap any other content besides an image.

 

I have created a new file called 11_images.html and this is a standard web page like the ones that we have been using with the previous examples. Now in order for the image to display using the <*img*> tag, we need to use an attribute src whose value is a URL, and this URL is usually relative to the server where a website is hosted.

 

To add an image to the web page, we will use the <*img*> and give it a src attribute which stands for source, i.e. the location of the image resource. We will also add another attribute, which will specify the width of the image in pixels. Although you can control this with CSS, you can also control the height and width using this inline-style format, as our image is very big:

 

<*img*src=“images/beach.jpg” width=“600px” />

 

Along with the srcand width attributes, we can add an altattribute, which stands for alternative text and this describes the content of an image. This alt attribute is picked up by search engines like Google, and also screen readers to help convey the purpose of the image. Simply add this after the width attribute in your code:

 

<*img*src=“images/beach.jpg” width=“600px” alt=“relaxing on the beach”/>

 

Note that this attribute does not add anything to the visual image, it is only used by search engines and screen readers.

 

Types of images

 

Images come in a variety of different formats, and the most common formats are gif, jpg and png images. All major browsers, Chrome, Firefox, Internet Explorer and Safari, support these file formats. The jpg format provides the most quality with high color counts while maintaining an appropriate file size. The gif and the png format are used for images with low color counts or large areas with the same color.

 

 

[
**]

  • *

Tables

 

The web is made of rich media including text and images, but another important element that is used to present information is a table. Tables are used to present information in a structured and visually appealing way. Things like sports scores, list of employee names, email addresses, and recipes can be presented with tables. HTML gives you the option to display information in a tabular format, using columns and rows. So, if you want to represent data from a spreadsheet on a web page, you can easily display this using HTML tables. There are many uses for using tables to present data, so we’ll explore how to display information using tables.

 

It’s worth mentioning that tables are little bit more involved than other HTML elements like paragraphs and images, because in order to construct a table, we need to use elements to represent the individual table, the rows that contain those cells, as well as the table itself.

 

You start out creating an HTML table by using the <*table*> element. This element has an opening <*table*>and closing tag, and it wraps all the table rows and table cells, inside of it much like a container. I have the file 12_tables.html,and inside this file we will create our table element, which acts as a container for all of the other elements that make up a table:

 

<*table*>

 

This is the first thing that we need to do when creating a table. You’ll also notice that I have not typed any attributes. That’s because tables have no attributes. Previous versions of HTML had attributes, however, these have all now been removed, and you shouldn’t add any attributes to the table element.

 

Next, we need to add a table row. Tables are made up of rows of information, that go across the page. There are no columns that go up and down. Columns in HTML are implicit and come about as result of any number of cells that we add to each row. To add a table row, we add an opening and closing <*tr*>tag inside of the table element:

 

<*table*>

<*tr*>

 

Now that we have a table row, we need a table cell to contain our data. There shouldn’t be any content outside of a table cell, such as inside a row, for example. To add a table cell, we simply insert a pair of opening and closing <*td*> tags inside our table row element:

 

<*h1*>Most Popular Programming Languages

<*table*>

<*tr*>

<*td*>Position</*td*>

</*tr*>

 

Now that we have a table cell, we can add some data inside it. We will be creating a table of popular programming languages. If you save what you have added so far and view it in the browser, you will see that we have a column, which is the heading for the position of the programming language:

 

 

We can create more columns by listing multiple <*td*>elements one after the other inside the first row. So, we can add two more columns using the <*td*>tag, one for the name of the language and the other will contain the year when the language first came out:

 

<*table*>

<*tr*>

<*td*>Position

<*td*>Name

<*td*>Year

 

If we now preview our table so far, we will see that we have added two more columns:

 

You will notice that our table does not have any borders and the text for each column is not highlighted. As with anything in HTML, you can control the styling, and layout with CSS. We will use another table element called table head denoted by <*th*>. The <*th*> element has an opening and closing tag just like the table cell, we can add our data inside this element and it would display it like the table cell. However, the main difference is that the <*th*>element acts as a header column for the data values that come below it. So, if we replace our <*td*> cells with <*th*> tags:

 

<*table*>

<*tr*>

<*th*>Position

<*th*>Name

<*th*>Year

 

Then save our changes and switch to the browser to see the result:

 

 

We now have three column headings that have been emboldened, which will act as our headings for the table. Now that we have added all the columns, we will add four more rows along with table cells for each position number, name and year:

 

<*table*>

<*tr*>

<*th*>Position

<*th*>Name

<*th*>Year

<*tr*>

<*td*>1

<*td*>JavaScript

<*td*>1995

 

<*tr*>

<*td*>2

<*td*>Java

<*td*>1995

 

<*tr*>

<*td*>3

<*td*>Ruby

<*td*>1995

<*tr*>

<*td*>4

<*td*>Python

<*td*>1991

 

We have added four more rows to the table to show the most popular programming languages. Once you’ve added the rows and the table cells, save and preview the table in the browser. Depending on your browser, it should look something like this:

 

 

Structuring Tables

 

There is more to tables than just table rows and table cells. We can add extra structure for search engines and screen readers. Also, adding extra structure will come in useful when you want to apply styling, as you can target the additional elements with CSS.

 

Table Head and Body Elements

 

Similar to the structure of an HTML document, where we have a head and a body, we can also add a head and a body to our table. Now, we can’t use the same HTML elements, we can use another HTML element called the table head element or <*thead*>. This element will wrap around the first table row that contains our three <*th*> tags:

 

<*thead*>

<*tr*>

<*th*>Position

<*th*>Name

<*th*>Year

 

The table head elements are not required to create a table, but it’s nice to define it for search engine crawlers and screen readers, and it’s also helpful for styling. When you save and preview this change, you’ll notice that it doesn’t actually add anything to the visual representation, however we can now target this element using CSS and apply styling.

 

Next we will add a table body element <*tbody*>. The table body will wrap all of the content of our table, except anything that actually labels our columns, like the table head. Here is our table with a table head and table body elements added:

 

<*table*>

<*thead*>

<*tr*>

<*td*>Position

<*td*>Name

<*td*>Year

<*tbody*>

<*tr*>

<*td*>1

<*td*>JavaScript

<*td*>1995

 

<*tr*>

<*td*>2

<*td*>Java

<*td*>1995

 

<*tr*>

<*td*>3

<*td*>Ruby

<*td*>1995

<*tr*>

<*td*>4

<*td*>Python

<*td*>1991

 

Once again, adding this element will not add anything visual to our table, however it will add meaning to our table structure and we can now target different parts of the table easily with CSS for styling.

 

[
**]

  • *

Table Foot Element

 

We have a table head and a table body. So, the next logical element to have would be a table footer element, and that’s exactly what we’re going to add next. However, you may be wondering why we would need a table footer if we already have table headers that label columns and rows? As with the table head and body elements, there isn’t a strict requirement for the table footer.

 

It’s a nice element to have that should contain a summary of the table. This could be some final cells that are sums, totals, and averages for each column, or, meta-information about the table, such as how frequently the table is updated, copyright information or perhaps the source of the data within the table.

 

Now, you would think that the table footer would go at the bottom of the table. However, the table footer element <*tfoot*> is placed right after the table head element and just before the table body element. In order to get content inside the table footer element, we will need to add a table row and table cell tags inside it:

Let’s add it to our table:

 

<*tfoot*>

<*tr*>

<*td*>

[_Source: Wikipedia      _]

 

Add this piece right after the closing table head tag and just before the opening table body tag, then save the changes and view the results in the browser:

 

 

[
**]

  • *

Table Caption Element

 

Another nice structural element for tables is the caption element. This element is basically a title for the table, and it should come immediately after the opening table tag. This is a really useful element to include in your table, as it quickly summarizes what a table might contain. Also, some screen reading software and search engines will pick up the caption and so will have an idea of what the table is about.

 

To add the table caption element, just place an opening and closing caption tag <*caption*> just after the opening table tag:

 

<*caption*>Most Popular Languages

 

This will add a nice table title at the top of the table, so save and switch to the browser and refresh the page to see the results:

 

 

 

[
**]

  • *

Forms

 

Forms are an essential part of the web, as the web is a two-way communication medium. As we’ve seen, there are lots of HTML elements for displaying information, and conversely, there are also lots of HTML elements for accepting input. The term ‘form’ usually refers to a printed document that contains spaces for you to fill in information. In HTML, forms are used to accept input from the user. This could be for contacting someone, buying a product or even registering to vote. Forms are an important part of web pages, and we’ll learn about all of the most important form elements that web developers use on a daily basis.

 

To learn about forms, we’re going to create a simple sign up form for a web app. We are going to focus on creating the form layout and not worry about where the form will submit to and how to process the submitted information, because we will need server processing to achieve this. For this part, I will be starting with the file 13__forms.html_ and we will be building out the form one step at a time.

Form Element

 

The first element that we will learn about is the form tag element <*form*>. This element acts as the container for all the other form related elements that go inside the form. So, let’s start by typing this out into the file:
p.

<*form*>

 

 

If you save and preview this on the browser, you will not actually see anything, as this element is the starting point for forms. Something worth noting about forms is that you cannot have forms nested inside other forms because this will simply not work. We mentioned previously that our form won’t actually submit anywhere for processing, however this can be achieved using a server side language such as Node.js, PHP, Ruby, or Python.

 

Part of processing the data involves two important attributes that are added to the opening form tag and they are the action and method attributes. The action attribute specifies the address to which this form will be sent to, but since we don’t have any server side program that can process this form, I will just insert form.html as the value.

 

The method attribute specifies the method that I would like the browser to use to submit the form. There are several different methods that we can use, but usually when submitting a form to a serve,r the post method is used. Here is how the table element looks like when we’ve added the attributes:

 

<*form*action=*form.html*”method=”post”>

 

 

Another possible value that we could have used for the method is a GET. POST corresponds to the HTTP POST method. This means that data from the body of the form is sent, or posted, to the server. The GET corresponds to the HTTP GET method, and in this case, the data is sent inside of the URL, and parameters are separated with a question mark. Most of the time, you’ll use the POST method.

 

Input Elements

 

Now that we have created the containing form element, we will add an input element <input>. The input element is the most commonly used form element and we’ll start out with some simple text fields but later on, we’ll reuse the input element again in other ways for other types of input. We’re going to make a simple text field where the user can type in their name. So, let’s type it out and then go through the code:

 

<*form*action=“form.html” method=“post”>

<*input*type=“text” id=“name” name=“user_name” />

 

We have created a self-closing input element and added three attributes. The type attribute indicates what kind of input we want. There are many possible values for this particular attribute, such as email, tel for telephone, and password just to name a few. We’ll be working with more input types a bit later on.

 

The id attribute is not required, but it’s a good idea to add one. In some cases, this is helpful for targeting elements with CSS or JavaScript. However, in our examples, we’ll need the id attributes so that we can associate labels to specific form controls. We’ll learn more about the label element very soon.

 

The name attribute is needed so that, when a form is submitted to server-side code, the server can understand the form data and process the values appropriately. We’re going to prefix all our name values with user and an underscore so that it’s easier to tell the difference between the name and the ID. Let’s save changes and then switch to the browser, refresh and see the result:

 

 

 

Let’s add a few more text input fields, one for the email address and one for the password:

 

<*form*action=“form.html” method=“post”>

<*input*type=“text” id=“name” name=“user_name”/>

 

<*input*type=“email” id=“email” name=“user_email” />

<*input*type=“password” id=“password” name=“user_password” />

 

Notice how we are reusing the input element, but for each instance we are specifying a different value for the type attribute. There are many more values that we can use to get different input values. For a comprehensive list of all these values, visit this link https://goo.gl/3sQgYC. Now we can save, switch to the browser refresh and view the results so far:

 

 

So, here we have three input elements. The first one is for our name, the second one is for an email address, and the last one is a password. You will notice that in the final input element, when you start typing into the field, you’ll see that it automatically blocks out the password that is typed in. Using different values for the type attribute will produce different results.

 

As I’ve mentioned previously, there are many use cases for the input element and we will be using it again in a different way soon. A quick note on the layout of the input fields: you will have noticed that they are horizontally positioned next to each other. This is because we have no CSS styling applied that dictates how they are positioned.

 

[
**]

  • *

Text Area Element

 

The input element is great for entering names, usernames and passwords, however, sometimes a single line of text isn’t enough and a simple input element won’t work. For example, maybe you have a contact form and you need a place for people to type a message. In this case, it’s best to use the textarea element <*textarea*>.

 

In our form, we will add a text area so that users can type in sentences. So, after the password input element, add the following code for a textarea:

 

<*textarea*id=“bio” name=“user_bio”>

 

 

If we save and switch back to the browser and refresh, you can see that the text area allows us to type in multiple lines:

 

 

On the bottom right corner of the text area element is a little triangle. What this means is that we can resize the text area if we wanted to. As you can see, the textareaelement is different from the input element, in that it isn’t a self-closing tag. You need to type an opening and a closing tag for it to work.

 

In most browsers, a text area is resizable by the user. There are ways to prevent this if you like, but it is highly recommended to leave this default behavior unmodified. That way, if the user would like more space to type in any direction, they can adjust it however they want.

 

[
**]

  • *

Button Element

 

A form is not complete without a submit button and in HTML, there are a couple of ways for creating a button, and you will likely see one or the other when you look at the source code of other web pages. We’re going to look at both ways of creating a button starting with using the input element again. As you’ve already seen, the input tag can be used to create different elements on the web page simply by specifying a different type value.

 

When using the input tag to create a button, we give the type attribute a value of button, and we add another attribute called value, whose value will be the text for the button. Let’s code this out. Put the following markup after the text area element:

 

<*input*type=“button” value=“Submit” id=“submit”>

 

As you can see, we have used the input tag again. Along with specifying button as the type, we need to also specify a value attribute and the value for this attribute will be the text that is displayed on the button. Let’s save this, switch to the browser and refresh:

 

The second way that we can create a button is using the button element <*button*>. Unlike the input element, the button element has a closing tag. To add a button using the <*button*>is straightforward:

 

<*button*type=“submit” id=“submit”>Submit

 

The type value in this particular case is submit. But there are two other types called Reset and Button. The Reset type will automatically clear all form data when it’s clicked. The Button type has no default behavior, and it’s mostly intended to be used in combination with JavaScript. The type value we’ve used here is submit. As the name implies, the default behavior of the submit type is to submit the form and send all the data over to the server. Let’s save this and switch to the browser and refresh:

 

 

You will notice that there is no change in the output on the web page. You can use either the input element or the button element to create a button in HTML.

 

 

[
**]

  • *

Labels and Fieldsets

 

At the moment, it’s difficult for the user to tell which form control does what. There’s no way to know if the bio field is for their email or if the email field is for their password. As you have already seen, a form can be created with just the form element and input tags. However, it’s helpful to the user if the form is organized with labels and fieldset elements.

 

Let’s start by adding a label for the name field. We will use the label tag

<*label*for=“name”>Name:

<*input*type=“text” id=“name” name=“user_name” />

 

For the label to be added to the correct field, we need to specify a for attribute and the value for this will be the id of the name field, which happens to be called name. This is why we added IDs to our form controls so that we can add labels and reference each field with an id. Save your changes then switch to your browser and refresh:

 

 

As you can see, this has now added a label for the name field. The user can distinguish what needs to be entered in this field. Let’s add a label for each of the form controls:

 

<*label*for=“name”>Name:

<*input*type=“text“id=“name” name=“user_name” />

 

<*label*for=“email”>Email:

<*input*type=“email” id=“email” name=“user_email” />

 

<*label*for=“password”>Password:

<*input*type=“password” id=“password” name=“user_password” />

 

<*label*for=“bio”>Your bio:

<*textarea*id=“bio” name=“user_bio”>

 

Now that we have added labels for each of the form controls, we can save our changes and switch to the browser and refresh to see the result:

 

 

Our form is starting to take shape and the user can now fill out the form and know what is required in each form field. Let’s now look at how we can use fieldset to group similar form controls together.

 

Fieldset and Legend

 

The main purpose of a fieldset is to group together form controls. Sometimes, certain form controls belong together in a logical grouping. In our case, we will create two groups, one for basic information and one for information that will show up in the user’s profile. Wrapping our form controls using the fieldset element can do this.

 

We’ll wrap all the input fields and the labels in a fieldset element and the text area and its label can be wrapped in another fieldset:
p.

<*fieldset*>

<*label*for=“name”>Name:

<*input*type=“text“id=“name” name=“user_name” />

<*label*for=“email”>Email:

<*input*type=“email” id=“email” name=“user_email” />

<*label*for=“password”>Password:

<*input*type=“password” id=“password” name=“user_password” />

 

<*fieldset*>

<*label*for=“bio”>Your bio:

<*textarea*id=“bio” name=“user_bio”>

<*button* type=“submit” id=“submit”>Submit

 

This creates a logical grouping of the form controls, all the input elements and their labels are grouped into one fieldset and the textarea element and its label are put into another logical group. If you had more fields, you could use more fieldset to group them together. If we save and switch over to the browser, then refresh, we can see these logical groupings applied visually:

 

 

The default user agent or browser CSS applies a border to each fieldset to show that they are grouped together in a fieldset. We can use CSS to override the default styling and apply our own custom CSS.

 

In addition to grouping the form elements into fieldset, we can also label the different logical groupings and we can achieve this using the HTML legend element. The legend element has both an opening and closing tag and we place this just after the first opening fieldset tag for each logical grouping:

 

<*fieldset*>

<*legend*>Basic Info

 

<*label*for=“name”>Name:

<*input*type=“text” id=“name” name=“user_name” />

 

<*label*for=“email”>Email:

<*input*type=“email” id=“email” name=“user_email” />

<*label*for=“password”>Password:

<*input*type=“password” id=“password” name=“user_password” />

 

<*fieldset*>

<*legend*>Profile

 

<*label*for=“bio”>Your bio:

<*textarea*id=“bio” name=“user_bio”>

 

<*button* type=“submit” id=“submit”>Submit

 

The legend element will label each fieldset. I have labelled the first fieldset basic info and the second one profile. Let’s save our changes and then switch to the browser and refresh to see the results:

 

As you can see once again, the default browser styling is being applied to the legend element. You can easily change this using CSS. If you think back to the last time you filled out a form, it is more than likely you were presented with predefined options to choose from at some point. We can add predefined options using menus, radio buttons, or checkboxes.

 

Select Menus

 

Depending on the type of predefined options that you are presenting to your user, you will at some point have the need to list several options for the user to choose from. In this situation, it’s best to go with a select menu. Let’s say that in our form we want to capture the job title of the person filling out our form. For this we are going to list four job titles: Web Designer, User Experience, Front-end Developer, and Back-end Developer. We will present these options as a select menu.

 

So, under the biography, which is represented by the textarea element, we will add our select menu options using the