HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.
Search engines use the headings to index the structure and content of your web pages.
The HTML <p> element defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.
| Element | Function |
|---|---|
<b> |
Specifies bold text without any extra importance. |
<i> |
Defines a part of text in an alternate voice or mood. The content of the tag is usually displayed in italic. |
<sup> |
Defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW |
<sub> |
Defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O. |
<br /> |
Inserts a single line break. |
<hr /> |
Stands for horizontal rule and is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections. |
<strong> |
gives text a strong emphasis which traditionally means that the text is displayed as bold by the browser. |
<em> |
It renders as emphasized text. |
<blockquote> |
specifies a section that is quoted from another source. Browsers usually indent <blockquote> elements. |
<q> |
Defines a short quotation. Browsers normally insert quotation marks around the quotation. |
<abbr> |
Defines an abbreviation or an acronym, like “HTML”, “Mr.”, “Dec.”, “ASAP”, “ATM”. |
<cite> |
Defines the title of a work (e.g. a book, a song, a movie). |
<dfn> |
Rrepresents the defining instance of a term in HTML. The defining instance is often the first use of a term in a document. |
<address> |
defines the contact information for the author/owner of a document or an article. The contact information can be an email address, URL, physical address, phone number, social media handle. |
<ins> |
Defines a text that has been inserted into a document. |
<del> |
Defines text that has been deleted from a document. |
<s> |
specifies text that is no longer correct, accurate or relevant. |
<ins> |
defines the title of a work (e.g. a book, a song, a movie). |
CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed. A CSS rule contains two parts: a selector and a declaration.
- Selectors indicate which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas.
- Declarations indicate how the elements referred to in the selector should be styled. Declarations are split parts (a property and a value),into two and are separated by a colon. CSS declarations sit inside curly brackets and each is made up of two parts: a property and a value, separated by a colon. You can specify several properties in one declaration, each separated by a semi-colon.
- Properties indicate the aspects of the element you want to change. For example, color, font, width, height and border.
- Values specify the settings you want to use for the chosen properties. For example, if you want to specify a color property then the value is the color you want the text in these elements to be.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Using External CSS</title>
<link href="css/styles.css" type="text/css"
rel="stylesheet" />
</head>
<body>
<h1>Potatoes</h1>
<p>There are dozens of different potato
varieties. They are usually described as
early, second early and maincrop.</p>
</body>
</html>
CSS:
body {
font-family: arial;
background-color: rgb(185,179,175);}
h1 {
color: rgb(255,255,255);}
<!DOCTYPE html>
<html>
<head>
<title>Using Internal CSS</title>
<style type="text/css">
body {
font-family: arial;
background-color: rgb(185,179,175);}
h1 {
color: rgb(255,255,255);}
</style>
</head>
<body>
<h1>Potatoes</h1>
<p>There are dozens of different potato
varieties. They are usually described as
early, second early and maincrop.</p>
</body>
</html>
In CSS, selectors are patterns used to select the element(s) you want to style.
- Universal Selector: Applies to all elements in the document.
- Type selector: Matches element names.
- Class selector: Matches an element whose class attribute has a value that matches the one specified after the period (or full stop) symbol.
- Id selector: Matches an element whose id attribute has a value that matches the one specified after the pound or hash symbol.
- Child Selector: Matches an element that is a direct child of another.
- Descendant Selector: Matches an element that is a descendent of another specified element (not just a direct child of that element).
- Adjacent sibling selector: Matches an element that is the next sibling of another.
- General sibling selector: Matches an element that is a sibling of another, although it does not have to be the directly preceding element.
All the styles in a page will “cascade” into a new “virtual” style sheet by the following rules:
So, an inline style has the highest priority, and will override external and internal styles and browser defaults.
In CSS, inheritance controls what happens when no value is specified for a property on an element. CSS properties can be categorized in two types:
JavaScript Variable
<variable-name>;<variable-name> = <value>;In the above example, we have declared three variables using var keyword: one, two and three. We have assigned values to variables one and two at the same time when we declared it, whereas variable three is declared but does not hold any value yet, so it’s value will be ‘undefined’.
JavaScript variables can hold many data types: numbers, strings, objects, Booleans.
var length = 16; // Numbervar lastName = "Johnson"; // Stringvar x = {firstName:"John", lastName:"Doe"}; // Object
Booleans can only have two values: true or false.
The Concept of Data Types
In programming, data types is an important concept.
To be able to operate on variables, it is important to know something about the type.var cars = ["Saab", "Volvo", "BMW"];var cars = ["Saab", "Volvo", "BMW"];
var name = cars[0]; // name=Saab;+ Addition- Subtraction* Multiplication** Exponentiation/ Division% Modulus (Division Remainder)++ Increment-- Decrementx = y x = y+= x += y x = x + y-= x -= y x = x - y*= x *= y x = x * y/= x /= y x = x / y%= x %= y x = x % y**= x **= y x = x ** yvar txt1 = "John";var txt2 = "Doe";var txt3 = txt1 + " " + txt2;x = 5== equal to x == 8 falsex == 5 truex == "5" true=== equal value and equal type x === 5 truex === "5" false!= not equal x != 8 true!== not equal value or not equal type x !== 5 falsex !== "5" truex !== 8 true> greater than x > 8 false< less than x < 8 true>= greater than or equal to x >= 8 false<= less than or equal to x <= 8 truex = 6 and y = 3:&& and (x < 10 && y > 1) is true|| or (x == 5 || y == 5) is false! not !(x == y) is trueVery often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this. In JavaScript we have the following conditional statements:
if to specify a block of code to be executed, if a specified condition is true.else to specify a block of code to be executed, if the same condition is false.else if to specify a new condition to test, if the first condition is false.if (hour < 18) { greeting = "Good day";}
if (hour < 18) { greeting = "Good day";}
else { greeting = "Good evening";}
if (time < 10) { greeting = "Good morning";}
else if (time < 20) { greeting = "Good day";}
else { greeting = "Good evening";}