Introduction to Websites and Website Management
Objectives
• To define websites • To learn how to develop a simple website • To learn best practices in web management • To manage and customize a webpage
By the end of this module
Participants should be able to:-
• Understand the basic structures of a typical website • Master elementary skills in HTML, CSS and PHP web management programming skills
Introduction
What is a Website: A Web site refers to the location on the Internet of the Web pages and related files which will be displayed using a program called a Web browser
Working with Well-Formed Web Pages
• A
web page
is an "HTML Document". • This is what a very simple HTML document looks like:
A Simple Web Page This is about as simple as a web page can get.
•
Key Elements Of An Effective Website Appearance
– A site must be visually appealing, polished and professional. Remember, it's reflecting your company, your products and your services. website may be the first, and only, impression a potential customer receives of your company.
– An attractive site is far more likely to generate a positive impression and keep visitors on your site once they arrive. Ideas like this are what PR professionals pay attention to keep their businesses successful.
Key Elements (cont.)
• •
Content
Along with style, your site must have substance. Remember that your audience is looking for information that will help them make a decision, so it should be informative and relevant. Use this opportunity to increase visitor confidence in your company's knowledge and competence.
Functionality
• Every component of your site should work quickly and correctly. Broken or poorly constructed components will only leave your visitors frustrated and disillusioned with your company. Across the spectrum, everything should work as expected, including hyperlinks, contact forms, site search, event registration, and so on.
Error-free copy
Remember the exposure your website will get. Double-check your facts and figures, as you don't know who may be quoting you tomorrow. Nor do you want to be recognized or remembered for typos, incorrect grammar and punctuation, or misspellings. Spelling mistakes and bad grammar are as unforgivable on a website as they are in other company materials.
Key Elements (cont.)
•
Usability
– A critical, but often overlooked component of a successful website is its degree of usability. Your site must be easy to read, navigate, and understand. Some key usability elements include: – Simplicity – Fast-loading pages – Minimal scroll – Consistent layout: – Prominent, logical navigation – Descriptive link text – Cross-platform/browser compatibility – Screen Resolution
HTML
What is HTML?
It Stands for
Hyper Text Markup Language; which
is a language for describing web pages. – A scripting language which forms a set tags, that describe document content; – HTML documents contain tags and plain text which can also be refereed to as
“Web pages.”
HTML Editors
– HTML Tags are written in text editors which are later saved with the extension .HTML. That means HTML can be edited by using HTML/ Text editors like: • Adobe Dreamweaver / CS • Notepad • WordPad • Kompozer • HTMLkit
HTML Page Structure
Below is a visualization of an HTML page structure: •
This a heading
This is a paragraph.
This is another paragraph.
•
Activity One:
30 minutes
A Practice on HTML
HTML Tags
• Markup tags or HTML tags are keywords surrounded by
angle brackets
like
,
,
that are normally written in pairs
like
and
Example:
content
Basic Tags
HTML headings headings are defined with the
to tags.
Example
This is a heading
HTML Paragraphs paragraphs are defined with the
tag.
Example
This is a paragraph.
HTML Links links are defined with the
tag.
Example This is a link HTML Images Images are defined with the ![]()
tag.
Example 
Elements
• An HTML element is everything from the start tag to the end tag:
This is my first paragraph.
Element
Empty HTML Elements
– HTML elements with no content are called empty elements.
Example:
is an empty element without a closing tag (the
tag defines a line break).
Attributes
Attributes provide
additional information
element, they are always specified in
tag.
about an
the start
Attributes come in name/value pairs like:
name="value"
Attribute Example In HTML links are defined with the tag and the link address is specified in the
href attribute
: • Example • This is a link
Headings
• Headings are defined with the
to tags.
defines the most important heading. defines the least important heading.
Example
This is a heading
This is a heading
This is a heading
Comments
Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.
Comments are written like this: Example •
Paragraphs
Paragraphs are defined with the
tag.
Example
This is a paragraph
This is another paragraph
Line Breaks
We use the
tag to create a line break (a new line) without starting a new paragraph: Example
This is
a para
graph with line breaks
The
is an empty element. It has no end tag.
Formatting
HTML uses tags like and for formatting output, like
bold
or
italic
text.
These HTML tags are called formatting tags
Tag
– – – – – – – – –
Description
Defines bold text Defines emphasized text Defines a part of text in an alternate voice or mood Defines smaller text Defines important text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text
Links
A hyperlink or links are words, group of words, or image that you can click on to jump to another document.
In HTML the tag defines a hyperlink.
• Link Syntax The HTML code for a link is simple, as follows:
Link text
Example
Visit my page
Link Attributes
• The
target
attribute specifies where to open the linked document.
Example
Visit my page! • The id attribute can be used to create a bookmark inside an HTML document.
Example
An anchor with an id inside an HTML document: Useful Tips Section
Heads
• The
tag is a container for all the head elements. Elements inside can include scripts, instruct the browser where to find style sheets, provide meta information, and more.
Elements That Can be added in the Head Section • The
Element • The <base> Element • The <link> Element • The <style> Element • The <meta> Element</p>
<a id="p26"></a>
<h3><b>Head Elements</b></h3>
<p><b>Tag Description</b></p>
<p>– <head> document – <title> Defines the title of a document – <base> target for all Defines information about the Defines a default address or a default links on a page – <link> Defines the relationship between a document and an external resource – <meta> document – <script> – <style> Defines metadata about an HTML Defines a client-side script Defines style information for a document</p>
<a id="p27"></a>
<h3><b>Activity Two: Working with Text editors Creating a simple web page</b></h3>
<a id="p28"></a>
<h3><b>CSS ~ Cascading Style Sheet</b></h3>
<h3>•</h3>
<h3><b>What is a CSS?</b></h3>
<h3><b>CSS</b></h3>
<h3>stands for</h3>
<h3><b>C</b></h3>
<h3>ascading</h3>
<h3><b>S</b></h3>
<h3>tyle</h3>
<h3><b>S</b></h3>
<h3>heets, they are tags used to define</h3>
<h3><b>how to display</b></h3>
<h3>HTML elements.</h3>
<a id="p29"></a>
<h3><b>CSS Syntax</b></h3>
<p>• A CSS rule has two main parts: a </p>
<h3><b>selector, </b></h3>
<p>and one or more </p>
<h3><b>declarations</b></h3>
<p>:</p>
<a id="p30"></a>
<h3><b>CSS Syntax</b></h3>
<p>• A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets: p { color : red; text-align : center;} To make the CSS more readable, you can put one declaration on each line, like this:</p>
<p><b><i>Example</i></b></p>
<p>p { color: red; text-align: center; }</p>
<a id="p31"></a>
<h3><b>Comments in CSS</b></h3>
<p>• Comments are lines of code used to explain your code, and may help you when you want to edit the source code later • One thing about comments is that they are ignored by browsers.</p>
<p>A CSS comment begins with "/*", and ends with "*/", like this: /*This is a comment*/</p>
<p><b>Example</b></p>
<p>p } { text-align: /*This is another comment*/ color: center; black; font-family: arial;</p>
<a id="p32"></a>
<h3><b>ID and Classes</b></h3>
<p>• Apart from setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".</p>
<p>•</p>
<p><b>The id Selector</b></p>
<p>The id selector is used to specify a style for a single, unique element. It uses the id attribute of the HTML element, and is defined with a "#".</p>
<p>i.e. The style rule below will be applied to the element with id="para1": – Example • #para1 { text-align:center; color:red; }</p>
<a id="p33"></a>
<h3><b>The Class Selector</b></h3>
<p>The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.</p>
<p>This allows you to set a particular style for many HTML elements with the same class. It uses the HTML class attribute, and is defined with a "." In the example below, all HTML elements with class="center" will be center-aligned:</p>
<p><b><i>Example 1:</i></b></p>
<p>.center {text-align:center;}</p>
<p><b><i>Example 2:</i></b></p>
<p>p.center {text-align:center;}</p>
<a id="p34"></a>
<h3><b>CSS How To's</b></h3>
<p>• There are three ways of inserting a style sheet: 1. External style sheet ideal when the style is applied to many pages 2. Internal style sheet used when a single document has a unique style. 3. Inline style relevant tag. you use the style attribute in the </p>
<a id="p35"></a>
<h3><b>CSS Styling</b></h3>
<p>• Knowing that CSS is used to define</p>
<h3><b>display how to </b></h3>
<p>HTML elements, we can now see how it will be used in different parts of an HTML documents to give varied results.</p>
<a id="p36"></a>
<h3><b>Styling Background</b></h3>
<p>CSS background properties are used to define the background effects of an element. CSS properties used for background effects: – background-color – background-image – background-repeat – background-attachment – background-position</p>
<a id="p37"></a>
<h1>Background Colour</h1>
<p>The background-color property specifies the background color of an element. The background color of a page is defined in the body selector:</p>
<p><b><i>Example</i></b></p>
<p>body {background-color:#b0c4de;} With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb (255,0,0)" a color name - like "red" In the example below, the h1, p, and div elements have different background colors: Example h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;}</p>
<a id="p38"></a>
<h3>Background Image</h3>
<p>• The background-image property specifies an image to use as the background of an element.</p>
<p>• By default, the image is repeated so it covers the entire element.</p>
<p>• The background image for a page can be set like this:</p>
<p><b><i>Example</i></b></p>
<p>body {background-image: url('paper.gif');}</p>
<a id="p39"></a>
<h3><b>All CSS Background Properties</b></h3>
<p><b>Property</b></p>
<p>• Background</p>
<p><b>Description</b></p>
<p>Sets all the background properties in one declaration • background-attachment Sets whether a background image is fixed or scrolls with the rest of the page • background-color Sets the background color of an element • background-image Sets the background image for an element • background-position Sets the starting position of a background image • background-repeat Sets how a background image will be repeated</p>
<a id="p40"></a>
<h3><b>Styling Text</b></h3>
<p>Text is styled with text formatting properties.</p>
<p>An Example could be that the heading uses the text-align, text-transform, and color properties. A paragraph could be indented, aligned, and the space between characters is specified.</p>
<p> Text Colour Text Alignment Text Decoration</p>
<a id="p41"></a>
<h3><b>Text Colour</b></h3>
<p>• The color property is used to set the color of the text.</p>
<p>• With CSS, a color is most often specified by: – a HEX value - like "#ff0000" – an RGB value - like "rgb(255,0,0)" – a color name - like "red“</p>
<p><b><i>Example</i></b></p>
<p>body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}</p>
<a id="p42"></a>
<h3><b>Text Alignment</b></h3>
<p>The text-align property is used to set the horizontal alignment of a text.</p>
<p><b><i>Example</i></b></p>
<p>h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}</p>
<a id="p43"></a>
<h3><b>Text Decoration</b></h3>
<p>The text-decoration property is used to set or remove decorations from text.</p>
<p>The text-decoration property is mostly used to remove underlines from links for design purposes:</p>
<p><b>Example</b></p>
<p>a {text-decoration:none;} It can also be used to decorate text:</p>
<p><b>Example</b></p>
<p>h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}</p>
<a id="p44"></a>
<h3><b>Text Transformation</b></h3>
<p>The text-transform property is used to specify uppercase and lowercase letters in a text.</p>
<p>It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.</p>
<p><b><i>Example</i></b></p>
<p>p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}</p>
<a id="p45"></a>
<h3><b>Text Indentation</b></h3>
<p>The text-indent property is used to specify the indentation of the first line of a text.</p>
<p><b><i>Example</i></b></p>
<p>p {text-indent:50px;}</p>
<a id="p46"></a>
<h3><b>All CSS Text Properties</b></h3>
<p><b>Property Description</b></p>
<p>• Color • Direction • letter-spacing Sets the color of text Specifies the text direction/writing direction Increases or decreases the space between characters in a text • line-height Sets the line height • text-align • text-decoration Specifies the decoration added to text • text-indent Specifies the horizontal alignment of text Specifies the indentation of the first line in a text block text-shadow Specifies the shadow effect added to text • text-transform • vertical-align • white-space Controls the capitalization of text unicode-bidi Sets the vertical alignment of an element Specifies how white-space inside an element is handled • word-spacing Increases or decreases the space between words</p>
<a id="p47"></a>
<h3><b>Fonts</b></h3>
<p>CSS font properties define the font family, boldness, size, and the style of a text.</p>
<p><b>CSS Font Families</b></p>
<p>• • In CSS, there are two types of font family names:</p>
<p><b>generic family</b></p>
<p>"Monospace")</p>
<p><b>font family</b></p>
<p> - a group of font families with a similar look (like "Serif" or a specific font family (like "Times New Roman" or "Arial“)</p>
<a id="p48"></a>
<h3><b>Links</b></h3>
<p>Links can be styled in different ways with any CSS property (e.g. color, font-family, background, etc.).</p>
<p>In addition, links can be styled differently depending on what</p>
<p><b>state</b></p>
<p>they are in.</p>
<p>The four links states are: – a:link - a normal, unvisited link – a:visited - a link the user has visited – a:hover - a link when the user mouses over it – a:active - a link the moment it is clicked</p>
<p><b><i>Example</i></b></p>
<p>a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */</p>
<a id="p49"></a>
<h3><b>Lists</b></h3>
<p>The CSS list properties allow you to: – Set different list item markers for ordered lists – Set different list item markers for unordered lists – Set an image as the list item marker In HTML, there are two types of lists: – unordered lists - the list items are marked with bullets – ordered lists - the list items are marked with numbers or letters But with CSS, lists can be styled further, and images can be used as the list item marker.</p>
<a id="p50"></a>
<h3><b>Tables</b></h3>
<p>In CSS tables can be greatly improved by styling several elements which may include: • Table Borders By Using the border property you can define the behavior of a table border.</p>
<p><b><i>Example:</i></b></p>
<p>The example below specifies a black border for table, th, and td elements: table, th, td { border: 1px solid black; }</p>
<a id="p51"></a>
<h1>Collapse Borders</h1>
<p>The border-collapse property sets whether the table Borders are collapsed into a single border or separated:</p>
<p><b><i>Example</i></b></p>
<p>table { border-collapse:collapse; } table,th, td { border: 1px solid black; }</p>
<a id="p52"></a>
<h3><b>Table Width and Height</b></h3>
<p>Width and height of a table is defined by the width and height properties.</p>
<p>The example below sets the width of the table to 100%, and the height of the the elements to 50px:</p>
<p><b><i>Example</i></b></p>
<p>table { width:100%; } th { height:50px; }</p>
<a id="p53"></a>
<h3><b>Table Text Alignment</b></h3>
<p>The text in a table is aligned with the text-align and vertical-align Properties. The text-align property sets the horizontal alignment, like left, right, or center:</p>
<p><b><i>Example</i></b></p>
<p>} td { text-align:right; The vertical-align property sets the vertical alignment, like top, bottom, or middle:</p>
<p><b><i>Example</i></b></p>
<p>} td { height:50px; vertical-align:bottom;</p>
<a id="p54"></a>
<h3>Table Color</h3>
<p>The example below specifies the color of the borders, and the text and background color of the elements:</p>
<p><b><i>Example</i></b></p>
<p>table, td, th { border:1px solid green; } th } { background-color:green; color:white;</p>
<a id="p55"></a>
<h3><b>What is PHP</b></h3>
<p>• PHP stands for PHP </p>
<h3><b>H</b></h3>
<p>ypertext</p>
<h3><b>P</b></h3>
<p>reprocessor, it is a widely used, open source scripting language that is executed on the Server.</p>
<p>• Its files can contain text, HTML, JavaScript code, and PHP Code which when they are executed on the server, the result is returned to the browser as plain HTML. </p>
<a id="p56"></a>
<h3><b>What Can PHP Do?</b></h3>
<p>– Offers many advanced features for professional programmers.</p>
<p>– It can generate dynamic page content – Can create, open, read, write, and close files on the server – Can collect form data – Can send and receive cookies – Can add, delete, modify data in your database – Can restrict users to access some pages on your website – Can encrypt data</p>
<a id="p57"></a>
<h3><b>Basic PHP Syntax</b></h3>
<p>A PHP script can be placed anywhere in the document and it starts with</p>
<p><b><?php</b></p>
<p>and ends with</p>
<p><b>?></b></p>
<p>:</p>
<p><b><i>Example</i></b></p>
<p>– <?php</p>
<p>// PHP code goes here ?> The default file extension for PHP files is ".php".</p>
<a id="p58"></a>
<h3><b>Comments in PHP</b></h3>
<p>• Like HTML PHP also has comments</p>
<p><b><i>Example</i></b></p>
<p><!DOCTYPE html> <html> <body> <?php</p>
<p>//This is a PHP comment line /*This is a PHP comment block */ ?> </body> </html></p>
<a id="p59"></a>
<h3><b>Variables in PHP</b></h3>
<p>• In programming Variables are "containers" for storing information:</p>
<p><b><i>Example</i></b></p>
<p><?php</p>
<p>$x=5; $y=6; $z=$x+$y; echo $z; ?></p>
<a id="p60"></a>
<h3><b>Variables in PHP</b></h3>
<p>Variable can have short names (like x and y) or more descriptive names (age, carname, totalvolume).</p>
<p>Rules for PHP variables: – A variable starts with the $ sign, followed by the name of the variable – A variable name must begin with a letter or the underscore character – A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ ) – A variable name should not contain spaces – Variable names are case sensitive ($y and $Y are two different variables)</p>
<a id="p61"></a>
<h3><b>Creating (Declaring) PHP Variables</b></h3>
<p>PHP has no command for declaring a variable. A variable is created the moment you first assign a value to it: – $txt="Hello world!"; $x=5; After the execution of the statements above, the variable the </p>
<p><b>txt</b></p>
<p>will hold the value</p>
<p><b>Hello world!</b></p>
<p>, and variable</p>
<p><b>x </b></p>
<p>will hold the value</p>
<p><b>5</b></p>
<p>.</p>
<a id="p62"></a>
<h3><b>PHP Variable Scopes </b></h3>
<p>The scope of a variable is the part of the script where the variable can be referenced/used.</p>
<p>PHP has four different variable scopes: – Local: A variable declared</p>
<p><b>within</b></p>
<p>a PHP function is local and can only be accessed within that function: – Global: A variable that is defined outside of any function, has a global scope. Global variables can be accessed from any part of the script.</p>
<p>– Static: When a function is completed, all of its variables are normally deleted. However, sometimes you want a local variable to not be deleted.</p>
<p>– Parameter: A parameter is a local variable whose value is passed to the function by the calling code.</p>
<a id="p63"></a>
<h3><b>Local Scope</b></h3>
<p>This is a variable declared</p>
<p><b>within</b></p>
<p>a PHP function, which means can only be accessed within that function: • Example – <?php</p>
<p>$x=5; // global scope function myTest() } { echo $x; // local scope myTest(); ?></p>
<a id="p64"></a>
<h2><b>Global Scope</b></h2>
<p>• Global scope variable are those defined outside of any function.</p>
<p><b><i>Example</i></b></p>
<p>– <?php</p>
<p>$x=5; // global scope $y=10; // global scope } function myTest() { global $x,$y; $y=$x+$y; myTest(); echo $y; // outputs 15 ?></p>
<a id="p65"></a>
<h2><b>Static Scope</b></h2>
<p>• Sometimes you may want a local variable to not be deleted. Because normally when a function is completed, all of its variables are deleted. To do this, use the</p>
<p><b>static</b></p>
<p>keyword when you first declare the variable: –</p>
<p><b>Example</b></p>
<p><?php</p>
<p>} function myTest() { static $x=0; echo $x; $x++; myTest(); myTest(); myTest(); ?></p>
<a id="p66"></a>
<h3>Parameter Scope</h3>
<p>• A parameter is a local variable whose value is passed to the function by the calling code.</p>
<p>– Example <?php</p>
<p>} function myTest($x) { echo $x; myTest(5); ?></p>
<a id="p67"></a>
<h3><b>Working with Variables in PHP</b></h3>
<h3>•</h3>
<h3><b>String Variables</b></h3>
<p>String variables are used for values that contain characters.</p>
<p>– Example <?php</p>
<p>$txt="Hello world!"; echo $txt; ?></p>
<a id="p68"></a>
<h3><b>Working with Functions in PHP</b></h3>
<p>• strlen() function • strpos() function • The PHP strlen() function <?php</p>
<p>echo strlen("Hello world!"); ?> • The PHP strpos() function <?php</p>
<p>echo strpos("Hello world!","world"); ?></p>
<a id="p69"></a>
<h3><b>Operators in PHP</b></h3>
<p>• Concatenation Operator join two string values together.</p>
<p>Written as (.) Is used to • PHP Arithmetic Operators add values together in PHP.</p>
<p>Written as (+) is used to • PHP Assignment Operators – used to assign values to variables in PHP.</p>
<p>Written as (=) is • PHP Incrementing/Decrementing Operators • PHP Comparison Operators • PHP Logical Operators • PHP Array Operators</p>
<a id="p70"></a>
<h1>FEEDBACK</h1>
<p>This work is licensed under a Creative Commons Attribution ShareAlike 3.0 Unported License .</p>
<p>27/04/2020 70</p>
</div>
</section>
</div>
</div>
</div>
</main>
<footer>
<div class="container mt-3">
<div class="row justify-content-between">
<div class="col">
<a href="/">
<img src="/theme/studyslide/static/logo-slideum.png" />
</a>
</div>
</div>
<div class="row mt-3">
<ul class="col-sm-6 list-unstyled">
<li>
<h6 class="mb-3">Company</h6>
<li>
<i class="fa fa-location-arrow"></i>
Nicosia Constantinou Palaiologou 16, Palouriotissa, 1040
<li>
<i class="fa fa-phone"></i>
+357 64-733-402
<li>
<i class="fa fa-envelope"></i>
info@slideum.com </ul>
<ul class="col-6 col-sm-3 list-unstyled">
<li>
<h6 class="mb-3">Links</h6>
<li>
<a href="/about">About</a>
<li>
<a href="/contacts">Contact</a>
<li>
<a href="/faq">Help / FAQ</a>
</ul>
<ul class="col-6 col-sm-3 list-unstyled">
<li>
<h6 class="mb-3">Legal</h6>
<li>
<a href="/terms">Terms of Service</a>
<li>
<a href="/privacy">Privacy policy</a>
<li>
<a href="/page.html?code=public.usefull.cookie">Cookie policy</a>
<li>
<a href="/page.html?code=public.usefull.disclaimer">Disclaimer</a>
</ul>
</div>
<hr>
<p>slideum.com ©
2024, Inc. All rights reserved.</p>
</div>
</footer>
<div class="modal directory" id="directory-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Directory</h5>
<button class="close" type="button" data-dismiss="modal">×</button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>
<script src="/theme/common/static/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="/theme/common/static/jquery_extra/dist/jquery-extra.js"></script>
<script src="/theme/common/static/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="/theme/common/static/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<script>
var __path_directory = [ ]
!function __draw_directory(data, root, uuid)
{
var ul = $('<ul>', uuid &&
{
id: 'category' + uuid,
class: !__path_directory.includes(uuid) ? 'collapse' : null
});
for (var item in data)
{
var li = $('<li>').appendTo(ul);
if (item = data[item], item.children)
{
li.append('<a href=#category' + item.id + ' data-toggle=collapse>')
__draw_directory(item.children, li, item.id);
}
else
{
li.append('<a href=' + item.url + '>');
}
var a = $('> a', li).addClass('item').text(item.name)
.append($('<a class="link fa fa-external-link" href=' + item.url + '>'));
if (item.id === +__path_directory.slice(-1))
{
a.addClass('active');
}
/*
if (item.id !== __path_directory[0])
{
a.addClass('collapsed');
}
*/
}
root.append(ul);
}
([{"id":1,"name":"Food and cooking","url":"/catalog/Food+and+cooking","children":null},{"id":2,"name":"Education","url":"/catalog/Education","children":null},{"id":3,"name":"Healthcare","url":"/catalog/Healthcare","children":null},{"id":4,"name":"Real estate","url":"/catalog/Real+estate","children":null},{"id":5,"name":"Religion ","url":"/catalog/Religion+","children":null},{"id":6,"name":"Science and nature","url":"/catalog/Science+and+nature","children":null},{"id":7,"name":"Internet","url":"/catalog/Internet","children":null},{"id":8,"name":"Sport","url":"/catalog/Sport","children":null},{"id":9,"name":"Technical documentation","url":"/catalog/Technical+documentation","children":null},{"id":10,"name":"Travel","url":"/catalog/Travel","children":null},{"id":11,"name":"Art and Design","url":"/catalog/Art+and+Design","children":null},{"id":12,"name":"Automotive","url":"/catalog/Automotive","children":null},{"id":13,"name":"Business","url":"/catalog/Business","children":null},{"id":14,"name":"Government","url":"/catalog/Government","children":null}], $('#directory-aside'));
var __root_directory = $('#directory-aside > ul');
$('#directory-aside')
.on('show.bs.collapse', function()
{
//console.log('show.collapse')
})
.on('hide.bs.collapse', function()
{
//console.log('hide.collapse')
});
$('#directory-modal')
.on('show.bs.modal', function()
{
$('[class$="body"]', this).prepend(__root_directory);
})
.on('hide.bs.modal', function()
{
$('#directory-aside').prepend(__root_directory);
});
$('.directory-mobile').on('click', function(e)
{
e.preventDefault();
});
$('.directory .link').on('click', function(e)
{
e.stopPropagation();
});
</script>
<script>
function scrollToViewport()
{
$('html, body').stop().animate(
{
scrollTop: $('.navbar').outerHeight()
},
1000);
}
setTimeout(scrollToViewport, 1000);
$(window).on('orientationchange', scrollToViewport);
$('[data-toggle="tooltip"]').tooltip();
</script>
<script async src="//s7.addthis.com/js/300/addthis_widget.js#pubid=#sp('addthis_pub_id')"></script>
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter28397281 = new Ya.Metrika({
id:28397281
});
} catch(e) { }
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function () { n.parentNode.insertBefore(s, n); };
s.type = "text/javascript";
s.async = true;
s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="//mc.yandex.ru/watch/28397281" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<style>
@media screen and (max-width: 768px)
{
.cc-revoke
{
display: none;
}}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function() {
window.cookieconsent.initialise(
{
content:
{
href: "https://slideum.com/dmca"
},
location: true,
palette:
{
button:
{
background: "#fff",
text: "#237afc"
},
popup:
{
background: "#007bff"
},
},
position: "bottom-right",
revokable: true,
theme: "classic",
type: "opt-in"
})});
</script>
</body>
</html>