HTML + CSS step by step (2014)

Chapter 1: Introduction To HTML And CSS

“Walking on water and developing software from a specification are easy if both are frozen.”- Edward Berard

In this chapter, you will learn about HTML and CSS, including:

• HTML

• Elements, Tags, and Attributes

When creating a website you have to keep two things in mind: its contents and its presentation.HTML is markup language that was created so that programmers could handle paragraphs, headers, line breaks and the like, to make a web page. The markup language was created before the cascade style sheets. The latest HTML version is the HTML 5 which has introduced new features to the markup language. This makes the markup language far more flexible, user-friendly and adaptable than it was initially.

Cascade style sheets (CSS) were created to handle the presentation of a web page. It is a presentation language that determines how the content of a web page will appear. So, the two are separate from and independent of one another. One enables programmers to handle the content while the other allows them to determine how it will appear.

HTML

To understand how HTML and CSS function together you must get an idea of what the 2 are and how they function.

Let’s start with 3 terms: elements, tags and attributes.

Elements, Tags And Attributes

These were made to define the structure of a web page. So, it allows you to decide where you want to place the header, when to divide the paragraph and how to use more than one headers in a structured HTML document.

Angle brackets (<>) are used around the elements. These enable the web browser to interpret and then, implement what the programmer wants it to do. The element is inside the angle bracket.

You see, the world wide web needs to interpret codes to implement them. Different codes are used by various programmers and how these are interpreted is what affects the content on the web page. Here are a few examples:

The elements and the angle brackets form, what are known as, tags. There are opening tags and closing tags. The text is inserted between the two and everything inserted between the two is then, changed to look a certain way. So, let’s say you want to italicize the following statement: “My name is Joe”. This is how you will go about italicizing it:

My name is Joe

The markup language will enable the internet to interpret this statements as follows:

My name is Joe

is the opening tag and is the closing tag. Also, such tags are referred to as anchor texts. An opening tag and a closing one forms an anchored text.

Attributes are used so more information can be provided about an element. Here are common attributes:

id- this is used to identify elements

class- this is utilized to classify elements

src- programmers use this to specify a source for content that can be embedded into the document.

Href- this attribute is used to link users to another website.

You will find that these are usually inserted inside the opening tags and are constituted of the attribute’s name, value, the equal to (=) sign and an attribute value. Here’s an example:

<a href="http://google.com/">Google</a>

This can be used to hyperlink the word “Google”. So, anyone who visits the website can click on Google and go to the webpage. Let’s break this down now:

<a- the element

href="http://google.com/">- the attribute

</a>- the tag

Questions

1. What is the difference between a tag and an element?

2. What is the difference between HTML and CSS?