Ultimate Responsive Web Design with HTML5 and CSS3: Create Visually Stunning, Responsive Websites Effortlessly with HTML5 and CSS3

CHAPTER 1

Getting Started

Introduction

In this foundational chapter, we kick off our web development journey by setting up essential tools. We will learn to install modern web browsers for real-time testing across platforms. Next, we will delve into the world of text editors to choose the right one for HTML and CSS coding.

Additionally, we will look at text formatting where we will explore the art of text formatting in web design. Finally, we will gain control over fonts, sizes, alignment, and more using HTML and CSS. This chapter aims to equip the readers to master the basics for creating visually appealing, readable, and accessible web content.

Structure

In this chapter, we will discuss the following topics:

Downloading Web Browser

Downloading Text Editor

Introduction to HTML and HTML Tags

Elements and Attributes

Introduction to Text Formatting

Paragraph

Preformatted Text

Comments

Headings

Horizontal Line

Bold Tags (,)

Italic Tags (,)

Delete Tag

Insert Tag

Superscript and Subscript Tags

Other Tags

Font Properties in HTML (Size, Family, Weight, Style)

Images

Lists

Requirements

Hello, first of all, welcome! It takes guts to discipline yourself and work towards a goal.

Before we embark on this journey, let us take a look at the requirements that need to be met in order to start building a website following this book. We need two main tools:

Web browser

Text Editor

Web Browser

Web browsers play a crucial role in web development by serving as the primary interface through which developers create, test, and interact with websites and web applications.

Figure 1.1: Web browsers

Here are some key functions of web browsers in web development:

Rendering or displaying HTML, CSS, and JavaScript.

Live Preview: Developers can use browsers for live previewing and debugging their code during the development process.

Developer Tools: Web browsers provide built-in developer tools that allow developers to inspect and manipulate the - Document Object Model (DOM), styles, and network requests.

Cross-Browser Testing: Web developers need to ensure that their websites work consistently across different browsers.

Compatibility Testing: Browsers allow developers to test websites on different devices, screen sizes, and resolutions to ensure a responsive and compatible design.

There are several web browsers for web development. Throughout the book, we will use Google chrome which is the most popular and has the most user base, thereby having an edge over its competitors. This is a browser developed and maintained by Google.

We will also be using the Mozilla Firefox browser. You can download them using the following links:

Head over to the website https://www.google.com/chrome/, download it and run the installation on your computer if you don’t already have it.

The second browser is Mozilla Firefox. Head over to Mozilla’s website to download it for your operating system. Alternatively, you can download it at https://www.mozilla.org/en-US/firefox/new/

Other notable mentions also include Microsoft Edge which comes installed with the latest versions of windows operating systems by default.

Now you might be wondering, which one is the best? Well, any one of these three will do, especially Google Chrome but it is suggested getting at least all or Chrome and Firefox for the right balance. The reason being you might need to test your website across different browsers to ensure they work as expected without anything breaking.

Text Editor

A text editor is a fundamental tool in programming, providing an environment for creating, editing, and managing text-based files, including code files. Here are some of the key functions of a text editor:

Code Editing: Text editors are primarily used for writing and editing code in various programming languages, such as HTML and CSS.

File Management: They allow developers to create, open, save, and organize files and directories. Developers can navigate through project files and directories seamlessly, facilitating efficient file management.

Customization: Many text editors are highly customizable, allowing developers to personalize the editor’s appearance, themes, and functionality.

Autocomplete and Suggestions: Text editors often provide autocomplete and suggestion features that help developers write code more efficiently by suggesting keywords, functions, and variable names.

Popular text editors in web development include Visual Studio Code (VS Code), Sublime Text, Atom, and Notepad++, each offering a range of features to support the coding process. Developers often choose a text editor based on personal preference, workflow requirements, and the specific features they need for their projects.

It is recommended to use VS Code to get the full benefits from this book. You can download it from here: https://code.visualstudio.com/download. Otherwise, if you’re very comfortable with a text editor of your choice, you can go ahead and use that.

Once it has been downloaded, open the downloaded file and go through the installation process.

And that’s it. We are done with the tools required to begin our awesome journey.

Introduction to HTML

HTML stands for Hyper Text Markup Language. It is the standard markup language used to create and design documents on the World Wide Web. It forms the backbone of web pages by defining the structure and content within a document.

It is a markup language and not a programming language. You might have heard of programming/scripting languages like C/C++, PHP, JavaScript, Python, Java, among others. A markup language is quite different because they are used to control the presentation, formatting, and organization of text in web pages, documents, and other types of content.

The tags start with an opening tag and this denotes the start of that content or element, and a closing tag (which is not always the case) denotes the end of that content/element.

For instance, if we want to define a paragraph of text with the words "Hello World", we would use a paragraph tag which is written this way:

Hello World!

You should note that not all tags require you to close them after opening them. These are called self-closing tags. Self-closing tags in HTML are tags that don’t have a closing tag because they don’t contain any content. Usually, they terminate themselves with a forward slash before the closing angle bracket. Examples of such tags include:

Image Tag ()

Line Break Tag (
)

Input Tag ()

Link Tag for Stylesheets ()

Usually, they are for tags/elements that have content provided through attributes (which we will be taking a look at later).

Let’s see how we can begin writing HTML code using the tools we downloaded earlier (VS Code and Browser).

First, open up the visual studio code text editor. You should have something similar to this starter page of the text editor:

Figure 1.2: Starter page of VS Code

On the top menu, click File > New Text File. To make this easier, on Windows you can use the shortcut key CTRL+N.

A new text file tab opens with some options. Click on Select a language (Figure 1.3) and select HTML from the list (Figure 1.4).

Figure 1.3: Selecting a language

Figure 1.4 shows the list of languages:

Figure 1.4: Selecting HTML

After completing the previous step, the current file is now a proper formatted blank HTML File. We now need to fill this with HTML content.

To start, type exclamation !. After typing this, a list of dropdowns will be suggested. Just hit Tab button or click the first exclamation symbol and a HTML starter code will be automatically generated. This automatic way of filling the code for us is known as Emmet.

Emmet is a powerful toolkit that allows you to write HTML/XML tags using CSS-like expressions. It is widely used by web developers to boost their productivity when working with HTML/XML and CSS. Emmet is built right into Visual Studio Code, so you don’t need to install any additional extensions.

You are going to end up with a code similar to this if you followed the steps correctly:

Figure 1.5: Automatically generated HTML starter code using Emmet

We will be going through this starter code in a bit.

Note:In case you will be using a different text editor which doesn’t support Emmet, typing code similar to the following image should be fine.

Figure 1.6: Alternative starter code

Now, let’s go through the generated code. Taking a look at VS code, there are numbers to each line of code to the left. Let us start from line 1 (refer to Figure 1.5).

On line 1 or at the very top of our code, we have the which is called the doctype document declaration. This line of code just tells the browser that this is an HTML document or file and not a text document, a pdf, a mp3 or any other file but an HTML type so render or treat it as one.

On line 2, we have en>. The is the root tag or the main container which houses everything. There is also another text close to it(lang=en). This is called an attribute (which we will learn about later). All it is doing is telling us the default language is English("en").

Next line is line 3 and this is the tag/element and its closing tag on line 6. This tag contains the title, stylesheets, links among others. Within this are the meta tags. Before delving into the tags inside of the tag. Let us check out the other structures which make up the basic HTML skeleton of a webpage.

On line 8, there is the element with its corresponding closing tag ending on line 10. This tag contains the visible contents you see on any web page. In short, the body is what you usually see on websites like the images/pictures, text, videos and many more. This is where we will be writing our html codes.

The HTML tag ends on line 11 and this tells the browser that we are done and we should close everything up.

Going back to the tag, inside of this are the meta tags, title, stylesheets, and links. These are:

Meta Tags: Meta tags are special HTML tags that provide metadata or information about a webpage’s content. They are not directly visible to users browsing the site. Meta tags are added within the section of a webpage’s HTML code. They help with a bunch of functions such as helping search engines understand the content and relevance of a webpage, which can improve its visibility and ranking in search results. In these examples:

charset attribute: This meta tag specifies the character encoding for the HTML document. The "UTF-8 value in this meta tag Specifies the character encoding for the HTML document. In this case, it declares that the webpage uses the UTF-8-character encoding, which stands for Unicode Transformation Format - 8-bit." Character encoding is crucial because it tells browsers how to interpret and display the characters in a webpage’s content. UTF-8 is the most widely used character encoding on the web, as it covers a broad range of characters and symbols from various languages.

By specifying the character encoding in the tag, you ensure that browsers display the webpage’s text correctly, preventing errors and improving the user experience for visitors who use different languages or access the site from various locations.

The next meta tag has three attributes namely name, content, and initial scale. This meta tag provides instructions to the browser on how to control the webpage’s dimensions and scaling on different devices, especially mobile devices. Let’s break down its components:

name: The name attribute specifies that this meta tag is defining the viewport settings.

content: This attribute’s value which is "width=device-width" sets the width of the viewport to the width of the device’s screen. This is crucial for ensuring that the webpage adjusts its layout to fit the screen size of different devices.

initial-scale: This attribute sets the initial zoom level when the page is first loaded. A value of 1.0 means that the page should be displayed at normal scale, without zooming in or out.

Title Tag: The tag in HTML is used to define the title of a webpage. It provides a brief, concise description of the page’s content and is displayed in various contexts, such as

Browser title bar or tab: The title appears at the top of the browser window or in the tab representing the webpage.

Search engine results: Search engines like Google use the title tag content to display the webpage title in their search results.

Social media sharing: When a web page is shared on social media platforms, the title tag often populates the title of the shared post.

This may sound like a lot to take in but most of the time, you won’t even be needing to remember all of this. You just have to know how it works because you will be automatically generating them every time.

Now that we are familiar with this starter code/mockup/boilerplate, let us go ahead to create our first web page.

First, let us change the title of our website to something suitable for instance hello world and in the body, type the paragraph tag

You should have something similar to this if you did everything correctly:

Figure 1.7: Using

tag to display text

Next step is to save this file and open it up in the web browser.

At the very top of the text editor click File>Save as and choose a suitable location for your file. It is recommended to create a new folder for this. In the file name option, save the file as index.html or just type index as the file extension is already recognized as html and finally save the file.

Figure 1.8: Saving a file name

You might be wondering why we are saving the filename as "index.html" and not any other name. There are several reasons for this, including:

Historical reasons: The practice of using index.html as the homepage filename dates back to the early days of the web. At that time, web pages were much simpler and consisted mainly of text and hyperlinks. The index.html filename provided a way to identify the main page of a website and differentiate it from other files.

Default behavior of web servers: Most web servers are configured to automatically serve the file named index.html when a user visits a website without specifying a specific page. This means that if someone types https://yourwebsite.com in their browser, they will see the page named index.html.

Consistency and convenience: By using index.html as the standard filename for the homepage, developers and webmasters can ensure consistency across different websites and platforms. This makes it easier for users to understand how to navigate a website and find the information they are looking for.

Security considerations: By default, most web servers will hide the contents of directories if no index.html file is present. This helps to prevent sensitive information from being accidentally exposed to the public.

SEO optimization: Search engines often give higher ranking to websites with a clear and well-defined homepage named index.html. This can help to improve the visibility of your website in search results.

Although index.html is the standard, it is important to remember that web development is flexible. While it is generally a good practice to stick to conventions, ultimately the choice of filename is up to the developer and should be based on their specific needs and preferences.

Now that we are done saving this file, let us open it up in a browser of our (Firefox is used here).

After opening this in the browser, it displays:

Figure 1.9: Our created webpage in Firefox browser

You can see the title on the tab which says hello world and our paragraph of text just how we specified it. This is how easy it is to create a webpage.

Let us explore more of this in the upcoming chapters.

Elements and Attributes

In web development and markup languages such as HTML, elements and attributes are fundamental concepts. Understanding elements and attributes is crucial for building well-structured, functional, and visually appealing websites. Let us delve into these.

Elements

An element is a fundamental building block of a HTML document. An element simply consists of a start tag and an end tag with some content within. Some tags like the
tag is an element even though it doesn’t have a closing tag (referred to as a self-closing tag).

Example:

This is a paragraph tag

In the preceding

" This is a paragraph tag" is the content, and

Elements can be a block-level type (for example,

There is also an inline-level type (for example, and ). Some elements are semantic, conveying meaning (such as

Attributes

An HTML attribute gives or provides additional information about an element or tag, whilst also modifying them. They are always included in the opening tag and are composed of a name and a value, separated by an equal sign.

Example:

center>An example text

align is the attribute name, and

center is the attribute’s value.

In summary, elements define the structure and content of HTML documents, while attributes provide additional information or properties to customize the behavior of those elements. Understanding how to use elements and attributes is fundamental to creating well-structured and functional web pages.

Let’s take a look at a practical example.

Figure 1.10: A

element

On line 9 in Figure 1.10, there is a paragraph of text in a

element. This is how it currently looks like:

Figure 1.11: Results of the

element

Now, we will center this block of text in the middle of the web page by using the align attribute and giving it a value of center.

Figure 1.12: The align attribute

Ignore the align being in a red-colored text for now and let us look at our changes after saving the file and reloading in the browser.

Figure 1.13: Results of using the align attribute to center the

element

You noticed we just modified the paragraph by shifting it to the middle of the page using the align attribute and giving it a value of center.

An important and quick reminder: In HTML, the align attribute used to be employed to control the alignment of certain elements. However, it’s important to note that the align attribute is now considered deprecated in HTML5, and its usage is discouraged. This is why VS Code marked the text as a red color. This is only used as an example because we haven’t touched on some other tags yet so this was just for demonstration purpose.

Instead, styles are typically applied using CSS for better separation of content and presentation which we will be diving into later.

One more example is the tag (which will be discussed an upcoming section):

image.jpg alt=A beautiful landscape>

The attributes in the preceding tag is:

src (specifies the source URL or location of the image),

alt (provides alternative text for accessibility)

These examples demonstrate how attributes are used to customize the behavior or appearance of HTML elements.

In summary, HTML elements are the structural components that define the content of webpages, while attributes provide further details and characteristics of those elements, enhancing the capabilities and presentation of the web content. Understanding elements and attributes is crucial for building well-structured, functional, and visually appealing websites.

Text Formatting

We will be learning about some of the common