Easiest Way To Learn HTML5 and CSS3 Coding

Lesson 1 - Introduction, Terminology, The Website You Will Design, Essential Tags and Inline Style Rule

Section 1- Introduction

Welcome to "Easiest Way to Learn HTML5 and CSS3 Coding©." This is a self-paced course guaranteed to remove the veil from the mystery of Internet coding.

As the course’s title indicates, this class is intended to be easy. You may consider this course as a gateway to learning higher level Internet coding in the future. By the end of this course, you will learn enough to create web pages from scrap. This is my guarantee to you.

Hi! My name is Anil Shrivastava. I learned coding (programming) Internet pages a few years back. As you can see, I can create my own web site. You are reading one now.

In this class you will learn two Internet related languages:

HTML5
CSS3

To be efficient in creating web pages, you will need to learn a third language, JavaScript. I cover that in a separate class. Right now, HTML5 and CSS3 should suffice your need as a starter.

When I took classes in HTML5 and CSS3, I found it difficult to comprehend the topics because they were front heavy. I had to struggle understanding the syntax and programming structure. In this course, you will start creating the web page from very start and will learn the syntax and coding as you progress.

In the end, you will have a nice template with a complete understanding of HTML5 and CSS3 languages. You will also learn additional techniques to be more creative in your future designs.

I also found it difficult to remember nomenclatures and jargons in the middle of the course, so I have included them in Lesson 1, Section 2 for familiarity with essential terms before you start writing the syntax. Please make yourself familiar with those commonly used terms because you will be using them frequently throughout this course and beyond.

Let’s go to Section 2 of this Lesson and get started.

Section 2 – Terminology

I hope you are doing well, so far. Here are the terminologies and their explanations that you must know in order to learn Internet Coding. The terminologies are not grouped alphabetically. They are grouped according to the sequence you will come across in this course:

HTML (Hypertext Markup Language): HTML is a computer language for creating websites. It is called hypertext because this allows us to move around the web using hyperlinks. It is called markup because they make use of tags (i.e. <>) with markup instructions.

Hyperlink: This is called hyperlink because we can click on an image or text to access another document or image.

HTML5: Fifth version of HTML language.

Tags: Tags are enclosed symbols that look like this<>. They store attributes to perform actions as per the instruction. Every start tag <> must have a closing tag also shown with a forward slash </>.

Essential Tags: The following five tags are essential to using HTML5.

Note: <!DOCTYPE html> does not require a closing tag.

Attributes: Attributes are used inside a tag consisting of a property (name) and a value such as <background-color=”red”>. Here background-color is the name of the attribute and red is the value.

Element: Elements are items that are defined by attributes. Examples of elements are paragraph <p>, heading <h1, h2> or body <body>. For example, you may say that I want my paragraph left aligned. Here paragraph is an element, align is a property and left is a value.

CSS (Cascading Style Sheets): CSS is a complementary language to give style to the structure created by HTML. By style we mean aesthetics such as, color, background, fonts and all that pizazz.

CSS3: Third version of Cascading Style Sheets.

Code: Writing any computer software (programming) in any computer language.

User Agent: Anything that can access Web pages. They include all devices such as smartphones and Web browsers.

Internet: The Internet is a network of billions of computers and other electronic devices world over and in space communicating with each other.

WWW (World Wide Web): WWW is also called Web. The Web is a collection of different websites accessible through the Internet.

HTTP (Hypertext Transfer Protocol): is the set of rules for transferring files, such as text, graphic images, sound, video, and other multimedia files on the World Wide Web.

World Wide Web Consortium (W3C): W3C was founded by Tim Berners-Lee, the inventor of the World Wide Web. W3C decides standards for the World Wide Web (www) to ensure that every nation and service providers use core principles and components that are decided by W3C.

Syntax: In coding or a computer language, syntax refers to the rules that can be used to form a correctly structured program using a given programming language.

Domain: Domain name is the address of your website that people type in the browser URL bar to visit your website. An example of a domain is yahoo.com and is part of the URL such as https://www.yahoo.com. The standard top-level domains are:

com - Commercial business
edu - Educational institution
gov - Government agencies
mil - Military
net - Networks organizations
org - Organizations (non profit)

URL (Uniform Resource Locator): Also known as a web address, a URL is a standardized naming convention for addressing documents accessible over the Internet and Intranet. An example of a URL is https://www.nytimes.com, which is the URL for the newspaper, The New York Times.

Browser: A browser is a software package or mobile app that displays web pages, graphics, and most online content. Popular web browsers include Chrome, Firefox, Internet Explorer, Microsoft Edge, and Safari, but there are many others.

Metadata: Metadata is data (information) about data. In HTML5, metadata go inside the element and are used to specify page description, keywords, author, etc. (It will be clear to you as we start writing the syntax)

Note:You may not remember all the terminologies mentioned above. At least, you know where they are. Refer to those when you need to. This will get naturally embeded in your memory by the end of this course.

Now, let us move on to Section 3.

Section 3 – The Website You Will Design

Now that you are familiar with the essential terms that you will be using throughout this course, it will be easier for you to follow the rest of this course. So, let us get right into it by creating a new folder (directory) named Intro HTML5 for this course. Feel free to put this folder on your desktop or wherever you can reach that easily.

We will start making a website named Global Family right away using HTML5. We will link this to CSS3 in later Lessons. I am teaching this the way I would have preferred to learn with minimum stress and anxiety, so bear with me.

At the end of this course, you will create a website that will look like as shown on the next page.

Now, create another folder (a subfolder) named global family inside the directory (folder) Intro HTML5 that you just created. You need to open Notepad in Windows or TextEdit in Mac OS to write your program (code) in HTML5. You may use Dreamweaver, Expression Web, or some other fancy editor, if you have them, but I’ll prefer that you use Notepad in Windows or TextEdit in Mac OS to keep things simple. After all, the name of this course is Easiest Way to Learn HTML5 and CSS3 Coding.

Start typing the following in your Notepad or Text Editor:

<!DOCTYPE html>

<html>

<head>

<title>Global Family</title>

</head>

</html>

Let us not save it yet. Let us pause here and try to understand what we have coded, so far. HTML5 and CSS3 codes are written using lower case. However, DOCTYPE is written using the upper case. This line is not a part of actual coding, so it does not matter. Just to jog your memory, all the attributes are written inside a tag. Remember, tags are enclosed symbols that look like this<>. They store attributes to perform actions as per the instruction. Every start tag <> must have a closing tag also shown with a forward slash </>.

However, since DOCTYPE is not a part of the actual coding, it does not need a closing tag. This tag indicates that the page is written in HTML5. That is all you need to know about this.

The <html> tag marks the start of the HTML document, and </html> marks the end of the document.

(Below is our end product that we will have at the end of this course)

<head>...</head>: The <head> tag marks the beginning of the head section (or metadata section) of the document. This section contains tags and information about the document such as title of the website rather than content. The </head> section marks the end of that section.

<title>...</title>: This is the document title that appears in the Web browser's title bar or tabs and in search engine results. You must place the actual text of the title between the <title> and </title> tags and keep it brief (six words or fewer). In the webpage we are designing, the title looks like this:

Global Family

Style rules: There are three kinds of “style rules” we use in designing internet pages and websites, Inline, Internal and External. We will learn those in detail later. Right now, all you need to know is:

Inline style rule: Applies to a single element on a single page.
Internal style rule: Can apply to multiple elements within a single page.
External style rule: Can apply to multiple elements on multiple pages within the site.

You just wrote the following:

Save the above as “global family.html” inside Global Family subfolder that you created inside the main folder Intro HTML5. Click on “global family.html”. This will open a web page with only a title, “Global Family” in the top left corner of the page.

Next, we will start putting contents on the page that you are creating, So, let us move over to Section 4.

Section 4 – Essential Tags and Inline Style Rule

If you remember, we mentioned some essential tags for writing HTML codes in Lesson 1, Section 2 as follows:

Essential Tags: The following five tags are essential to using HTML5.

Now, open the file, ‘global family.html.’ Delete previous contents and type the following:

<!DOCTYPE html>

<html>

<head>

<title>Global Family</title>

</head>

<body>

<h1> Global Family</h1>

A family that keeps together

</body>

</html>

How To Open an HTML File

Right click once on the HTML file you want to open. A window will open that will ask you, "Open with." Place your cursor there. A new window will open with options. Click on Notepad or whatever you want your program to open with.

Save the above as “global family.html” in your Global Family folder that you created. Open the file “global family.html”. This will open a web page that should look like the following, if you wrote everything correctly:

Global Family

A family that keeps together

Now, delete what you wrote before on your coding page and replace that with the following:

<!DOCTYPE html>

<html>

<head>

<title>Global Family</title>

</head>

<body>

<h1 style="color:red; text-align:center;">Global Family</h1>

A family that keeps together

</body>

</html>

Save the above as “global family.html” in your Global Family folder that you created. Click on that file. This will open a web page that should look like the following, if you wrote the program correctly:

Global Family

A family that keeps together

Explanation

You just created a heading named global family; you centered the heading and made it red. You also created a slogan that says “A family that keeps together.” You used <h1> </h1> tags to create heading.

1. You can create six different heading sizes <h1> through <h6>. You can also create as many h1,h2,h3,h4,h5,h6 headings on your webpage as needed. They do not have to be in sequence. h1 heading is the largest in size, h2 is smaller and so on.

1. You also used “Inline style rule” to center your contents and to give your <h1> header the red color. To do that, you wrote this:
<h1 style=”color:red;tex-align:center;”>Global Family</h1>.
You also introduced a new tag <p> </p>. This tag is used to change the paragraph. We used a separate Inline styling tag for <p></p> to center the content on the page by writing: <p style="text-align:center;">
An Inline Stylerule looks like this: <h1 style=”color:red;tex-align:center;”>Global Family</h1>. Here h1 heading is the element for which you wrote the attributes. For the names or properties of the attribute, you wrote "color" and "text-align" and for value you wrote "red" and "center." You gave the name to h1 heading as "Global Family." In the end you closed the element by writing </h1>
Remember, attributes start after equal sign (=) with (") in the beginning and must end with a semi-colon (;) followed by (") after the last value.

This is the Inline Style Rule that you will use quite often. Consider the above as your reference to use it in the future.

Style makes a webpage/website attractive by giving it color, font sizes, alignment, etc. Without Style, a webpage/website will look quite bland.

Style Rules (Types): There are three types of style rules (also known as Style Class) you can use in designing a website. They are:

Inline

Internal

External

Inline Style Rule applies to a single element on a single page. (An element is what goes inside a tag <>)

Internal style Rule applies to multiple elements within a single page.

External Style Rule applies to multiple elements on multiple pages.

This is all you need to know right now. Let us move on to Lesson 2.

Assignment

Practice writing the above program at least five times on your own. Ponder what you are doing. Once you do that, things will be more aparent to you. Read this lesson several times.