Basic HTML & CSS

by Admin / Monday, 24 June 2019 / Published in C#, Web Development application

HTML Basics

HTML (Hypertext Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content.HTML are generally used to describe a web page’s appearance/presentation (CSS) or functionality/behavior (JavaScript).

“Hypertext” refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web.

A Simple HTML Document

HTML uses “markup” to annotate text, images, and other content for display in a Web browser. HTML markup includes special “elements” such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>,

<video> and many others.

HTML Elements

An HTML element usually consists of a start tag and an end tag, with the content inserted in between

The opening tag:This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.
The closing tag:This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
The content:This is the content of the element, which in this case, is just text.
The element:The opening tag, the closing tag and the content together comprise the element.

HTML Attributes

Attributes provide additional information about HTML elements.

Attributes contain extra information about the element that you don’t want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value. The class attribute allows you to give the element an identifier that can be used later to target the element with style information and other things.

Nested HTML Elements

HTML elements can be nested (elements can contain elements).

All HTML documents consist of nested HTML elements.

This example contains four HTML elements:

In the example above, we opened the <p> element first, then the <strong> element; therefore, we have to close the <strong> element first, then the <p> element.

HTML Empty Elements

HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag (the <br> tag defines a line break):

This contains two attributes, but there is no closing </img> tag and no inner content. This is because an image element doesn’t wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.

Anatomy of an HTML Document

<!DOCTYPE html>— the doctype. It is required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However these days, they don’t do much, and are basically just needed to make sure your document behaves correctly. That’s all you need to know for now.
<html></html>— the <html> This element wraps all the content on the entire page and is sometimes known as the root element.
<head></head>— the <head> This element acts as a container for all the stuff you want to include on the HTML page that isn’t the content you are showing to your page’s viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations and more.
<meta charset=”utf-8″>— This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this and it can help avoid some problems later on.
<title></title>— the <title> This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favourite it.
<body></body>— the <body> This contains all the content that you want to show to web users when they visit your page, whether that’s text, images, videos, games, playable audio tracks or whatever else.

Lists

Marking up lists always consist of at least 2 elements. Lists are two types

Ordered list
Unordered list

Ordered List

Ordered list are for lists where the order of the items does matter, such as a recipe. These are wrapped in an <ol> element.

Unordered List

Unordered lists are for lists where the order of the items doesn’t matter, such as a shopping list. These are wrapped in a <ul> element.

Links

Links are very important — they are what makes the web a web!

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.

To add a link, we need to use a simple element — <a> — “a” being the short form for “anchor”.

We also fill in the value of this attribute with the web address that you want the link to link to:

Reference Links:

CSS Basics

Cascading Stylesheets — or CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

Web browsers apply CSS rules to a document to affect how they are displayed. A CSS rule is formed from:

A set of properties, which have values set to update how the HTML content is displayed.
A selector, which selectsthe element(s) we want to apply the updated property values to.

At its most basic level, CSS consists of two building blocks:

Properties: Human-readable identifiers that indicate which stylistic features (e.g., font, width, background color) you want to change.
Values: Each specified property is given a value, which indicates how you want to change those stylistic features (e.g., what you want to change the font, width, or background color to.)

CSS is case-sensitive so be careful with your capitalization. CSS has been adopted by all major browsers and allows you to control:

color
fonts
positioning
spacing
sizing
decorations
transitions

How to Use CSS?

There are three main ways to apply CSS styling. You can apply inline styles directly to HTML elements with the style-attribute. Alternatively, you can place CSS rules within style-tags in an HTML document. Finally, you can write CSS rules in an external style sheet, then reference that file in the HTML document. Even though the first two options have their use cases, most developers prefer external style sheets because they keep the styles separate from the HTML elements. This improves the readability and reusability of your code. The idea behind CSS is that you can use a selector to target an HTML element in the DOM (Document Object Model) and then apply a variety of attributes to that element to change the way it is displayed on the page.

External Style Sheet

With an external style sheet, we can change the look of an entire website by changing just one file!

Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

Example:

Inline style sheet

An inline style may be used to apply a unique style for a single element.

Example:

Internal style sheet

An internal style sheet may be used if one single page has a unique style.

Example:

CSS Selector

In CSS, selectors are used to target the HTML elements on our web pages that we want to style

There are three types of selectors:

ID Selectors
Class Selectors
Groping Selectors

ID Selectors

The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one unique element!