HTML

HTML stands for HyperText Markup Language. It is a standard markup language for
web page creation. It allows the creation and structure of sections, paragraphs, and
links using HTML elements (the building blocks of a web page) such as tags and
attributes.
It is also worth noting that HTML is not considered a programming language as it can’t
create dynamic functionality.
The average website includes several different HTML pages. For instance, a home page,
an about page, and a contact page would all have separate HTML files.
HTML documents are files that end with a .html or .htm extension. A web browser
reads the HTML file and renders its content so that internet users can view it.
All HTML pages have a series of HTML elements, consisting of a set of tags and
attributes. HTML elements are the building blocks of a web page. A tag tells the web
browser where an element begins and ends, whereas an attribute describes the
characteristics of an element.

The three main parts of an element are:

• Opening tag – used to state where an element starts to take effect. The tag is
wrapped with opening and closing angle brackets. For example, use the start tag
<p> to create a paragraph.

• Content – this is the output that other users see.

• Closing tag – the same as the opening tag, but with a forward slash before the
element name. For example, </p> to end a paragraph.
HTML IMAGES

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

• src - Specifies the path to the image

• alt - Specifies an alternate text for the image

Syntax
<img src="url" alt="alternatetext">

HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

HTML Links - Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

HTML tables

HTML tables allow web developers to arrange data into rows and columns.

A table in HTML consists of table cells inside rows and columns.

Everything between <td> and </td> are the content of the table cell.

Each table row starts with a <tr> and ends with a </tr> tag.

<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
</tr>
</table>
HTML forms
<form> is a HTML element to collect input data with containing interac�ve controls. It provides facili�es to
input text, number, values, email, password, and control fields such as checkboxes, radio butons, submit
butons, etc., or in other words, form is a container that contains input elements like text, email, number,
radio butons, checkboxes, submit butons, etc. Forms are generally used when you want to collect data
from the user. For example, a user wants to buy a bag online, so he/she has to first enter their shipping
address in the address form and then add their payment details in the payment form to place an order.
Forms are created by placing input fields within paragraphs, preformated text, lists and tables. This gives
considerable flexibility in designing the layout of forms.
Form elements
These are the following HTML <form> elements:
<label>: It defines label for <form> elements.
<input>: It is used to get input data from the form in various types such as text, password, email, etc by
changing its type.
<buton>: It defines a clickable buton to control other elements or execute a func�onality.
<select>: It is used to create a drop-down list.
<textarea>: It is used to get input long text content.
<fieldset>: It is used to draw a box around other form elements and group the related data.
<legend>: It defines cap�on for fieldset elements.
<datalist>: It is used to specify pre-defined list op�ons for input controls.
<output>: It displays the output of performed calcula�ons.
<op�on>: It is used to define op�ons in a drop-down list.
<optgroup>: It is used to define group-related op�ons in a drop-down list.
 XHTML
XHTML is an acronym for Extensible HyperText Markup Language. It is a subset of the Standard
Generalized Markup Language (SGML) which is a system for organizing and defining parts of a document,
like titles, or headings, or paragraphs, or images, through markup, also known as tagging. XHTML is the
most widely used language used to create documents on the World Wide Web, and is considered a
replacement for HTML, the original web markup language.

While web browsers translate XHTML into a human-readable document, XHTML should not be used to
control the appearance of a web page—that is what CSS is for.

XHTML Elements

XHTML elements are the building blocks of a XHTML document. The W3C has defined several XHTML
elements that correspond to common types of information found in documents, such as

• headings
• paragraphs
• quotes
• blockquotes
• lists
• images

Here are some things to notice:

1. Each XHTML element has its own name--in this case, P for paragraph. The element name describes
the type of informa�on.
2. Most elements have 2 tags: an opening tag and a closing tag.
3. Opening tags can contain any number of atributes. Atributes hold addi�onal informa�on about
the element or its content
4. Atributes consist of the atribute name and the atribute value.
5. If there are 2 tags, as there is here, that element likely encloses PCDATA. PCDATA is just a technical
term for any text content that we want to appear on screen.

Differences of XHTML from HTML

• <!DOCTYPE> is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory
• Elements must always be properly nested
• Elements must always be closed
• Elements must always be in lowercase
• Attribute names must always be in lowercase
• Attribute values must always be quoted
• Attribute minimization is forbidden
 CSS - Cascading Style Sheets

CSS was developed by W3C (World Wide Web Consortium) in 1996 for a rather simple reason. HTML

element was not designed to have tags that would help format the page. You were only supposed to

write the markup for the web page.

Tags like <font> were introduced in HTML version 3.2, and it caused quite a lot of trouble for web

developers. Since web pages have different fonts, coloured backgrounds, and multiple styles, it was a

long, painful, and expensive process to rewrite the code. Thus, CSS was created by W3C to solve this

problem.

CSS is not technically a necessity, but you probably would not want to look at a web page that

features only HTML elements as it would look completely bare-boned.

CSS Advantages on Web Pages

The difference between a web page that implements CSS and one that does not is massive and surely

noticeable.

You might have seen a website that fails to load completely and has a white background colour with

most of the text being blue and black. This means that the CSS part of the web page did not load

correctly or it doesn’t exist altogether.

That is what web pages with only HTML look like, and I think you would agree that that’s not very

appealing.

Before using CSS, all of the stylizing had to be included into the HTML markup. This means web

developers had to separately describe the background colour, font size, alignments, etc.

CSS lets you stylize everything on a different file, thus creating the design there and later integrating

the CSS files on top of the HTML markup. This makes the actual HTML markup much cleaner and

easier to maintain.

In short, with CSS features you do not need to repeatedly describe how individual elements look. This

saves time, shortens the code, and makes it not as prone to errors.

CSS lets you have multiple styles on one HTML page, therefore making the customization possibilities

almost endless. Nowadays, this is becoming more a necessity than a commodity.

CSS Fonts
The CSS font is used to set the font’s content of the HTML element. There are many font proper�es in CSS
which are men�oned and briefly discussed below:
CSS font-family Property: The font-family property specifies the font of an element.
CSS font-style Property: If we want to give designing to any type of text then we can make the use of CSS
font-style property.
CSS font-weight Property: The font-weight property of the CSS is used to set the weight or thickness of the
font being used with the HTML Text.
CSS font-variant Property: The font-variant property is used to converted all lowercase leters into
uppercase leters.
CSS font-size Property: The font-size property in CSS is used to set the font size of text in HTML document.
CSS font-stretch Property: The font-stretch property in CSS is used to set the text wider or narrower.
CSS font-kerning Property: This property is used to control the usage of the Kerning Informa�on that has
been stored in the Font.
CSS Color property is used to set the color of HTML elements. This property is used to set font color,
background color etc.
Color of an element can be defined in the following ways:

• Built-In Color
• RGB Format
• RGBA Format
• Hexadecimal Nota�on
• HSL
• HSLA

Box Model
The CSS box model is a container that contains mul�ple proper�es including borders, margin, padding, and
the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for
customizing the layout of different elements. The web browser renders every element as a rectangular box
according to the CSS box model. Box-Model has mul�ple proper�es in CSS. Some of them are given below:
• content: This property is used to displays the text, images, etc, that can be sized using the width &
height property.
• padding: This property is used to create space around the element, inside any defined border.
• border: This property is used to cover the content & any padding, & also allows to set the style,
color, and width of the border.
• margin: This property is used to create space around the element ie., around the border area.
The following figure illustrates the Box model in CSS.

• Content Area: This area consists of content like text, images, or other media content. It is bounded
by the content edge and its dimensions are given by content-box width and height.
• Padding Area: It includes the element’s padding. This area is the space around the content area and
within the border-box. Its dimensions are given by the width of the padding-box and the height of
the padding-box.
• Border Area: It is the area between the box’s padding and margin. Its dimensions are given by the
width and height of the border.
• Margin Area: This area consists of space between border and margin. The dimensions of the Margin
area are the margin-box width and the margin-box height. It is useful to separate the element from
its neighbours.

APPLYING CSS TO HTML AND XHTML

CSS can be applied to HTML or XHTML using three methods: linked, embedded, and inline. In the linked
method, the CSS is stored in a separate file, instead of directly in the HTML page. In the embedded
method, CSS is stored as part of the HTML page, in the header section. In the inline method, CSS is stored
directly in the style attributes of the HTML tags, as <div style="font-weight:bold">Bold Font</div> .
The neatest method is probably the linked one, but the other ones are convenient and quick in the phases
of prototyping a web page. The embedded and inline methods do not require having a separate file. The
inline method saves you the trouble of considering what CSS classes your document should have. For a
larger site, in which many web pages share the same styling, and in which the styling should be
customizable by the user, the linked method is the only viable option.
The methods are treated in detail in the following sections.

Linking
With linked CSS, CSS rules are stored in a separate file. To refer to that file from the HTML page, add
the link element (and its closing element within XHTML) to the head element, as shown in the following
example, which assumes that the stylesheet is stored in the file named "style.css".
 <head>
<title>Example Web Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

The link element in the example has three attributes. The first, rel , tells the browser the type of the target
of the link. The second, type , tells the browser what type of stylesheet it is. And the third, href , tells the
browser under which URL to find the stylesheet. In the example, the URL is relative, but it can also be
absolute.
The "style.css" with a single rule contains only the following text:

p{
font-weight:bold;
}

This tells the browser that the text in the paragraph ( p ) element should be rendered as bold.
Example rendering:
Text that will be formatted.
The source code for the complete HTML document is thus as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Web Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Text that will be formatted.</p>
</body>
</html>

Embedding
Dynamically generated webpages may need to use embedded CSS, but this should be kept to a minimum.
Even in dynamic pages, any CSS that is common to multiple pages should generally be moved to a linked
stylesheet.
Embedded CSS is CSS that is located in the header of the HTML document that requires styling. For
example we would like the text in this HTML document to appear bold.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Web Page</title>
</head>
<body>
<p>
Text that will be formatted.
</p>
</body>
</html>
The CSS may be placed in the document's header section:

<head>
<title>Example Web Page</title>
<style type="text/css">
p{
font-weight:bold;
}
</style>
</head>

The CSS is contained in a style element. Setting the element's type attribute to text/css tells the browser
that the enclosed sheetstyle is written in CSS and should be used to format the page. If the attribute type is
missing or set to an unrecognized value, the CSS will not be applied to the page.
The bit of CSS in this example tells the browser to make all the text found in any paragraph ( p ) elements
bold. The text on the page would look like this:
Text that will be formatted.
Here is the complete document including the CSS.

<!DOCTYPE html">
<html lang="en">
<head>
<title>Example Web Page</title>
<style type="text/css">
p{
font-weight:bold;
color:green;
}
</style>
</head>
<body>
<p>
Text that will be formatted.
</p>
</body>
</html>

Remember, you should use linked stylesheets in preference to embedded stylesheets whenever possible.
That will allow easy replacement of the general style information without having to keep track of styles
within the various HTML files.

Inlining
Inline CSS is specified directly in the opening tag of the element you want it to apply to. It is entered into
the style attribute within HTML or XHTML 1.1.
For example

<div style="font-weight:bold; color:red;">Bold Font</div>

is rendered as:
Bold Font

As mentioned, you should in general prefer linked CSS to embedded CSS, and both are preferred over inline CSS.