Dera's Blogspot

[deraskytobzy]

A dynamic website is a site that contains dynamic pages such as templates, contents, scripts etc. In a nutshell, the dynamic website displays various content types every time it is browsed. The web page can be changed with the reader that opens the page, character of consumer interplay, or day time.

Server-Side Scripting

Server-side content is spawned while the page is loading. Therefore, web pages, that variate when a website is loaded, use server-side scripting. That means that websites made with the help of server-side scripting are generated at the moment when the user is downloading different webpages. The websites created with the help of such scripting are those created with the help of such CMS (Content Management System) like WordPress, Joomla, Drupal, etc.

Wordpress

WordPress is a popular Content Management System built using PHP and MySQL. Originally associated with blogging, it is now used for news websites, eCommerce sites, forums, galleries, commercial sites etc. It is used by 39% of the web. You will need access to a server to put up files and access them via a web browser. You also have one MySQL database setup.

Secure File Transfer Protocol

To access the server and put files on it, you need an SFTP Client. This is a piece of software that allows you to securely transfer files to a server.

SFTP Software You need to download and install an SFTP Client For PC or MacOS: 

FileZilla https://filezilla-project.org/ 

WinSCP https://winscp.net/eng/download.php

 macOS: CyberDuck https://cyberduck.io/

[deraskytobzy]

CSS Grid 

A very effective tool for accurate grid layouts is CSS Grid. There are lots it can do - with a view to using it for a general page layout.

Grid A grid is a series of horizontal and vertical lines that intersect. One set will define columns, the other will define rows. CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements

[deraskytobzy]

Flex Box

The Flex-box is a "one-dimensional" type of design. It provides space distribution between items and efficient alignment methods. The Flex-box enables a container to alter the width, height and order of its objects to better fill the available space. A flex-box container extends objects or shrinks them to fill the available free space. It is direction-agnostic and versatile. Depending on the screen size, it will adjust it.

[deraskytobzy]

Why we Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

There are 3 main parts to CSS rules:

The Selector

Properties

Values

Ways to select 

Element 

Class 

Id 

Position in document

All this ways to select can be clearly shown in the image above.

[deraskytobzy]

What is CSS?

CSS stands for Cascading Style Sheets

CSS describes how HTML elements are to be displayed on screen, paper, or in other media

CSS saves a lot of work. It can control the layout of multiple web pages all at once

External stylesheets are stored in CSS files

What are the 3 types of CSS? 

    There are three ways you can use to implement CSS: 

internal

external, and 

inline styles.

With CSS we can control: 

Text (style, colour, line-height, etc.) 

Colour (background, borders etc.) 

Size (text, columns etc.) 

Position (of text, of images, of divisions)

To link a CSS file with the HTML we use the <link> element

<link rel=“stylesheet” href=style.css” />

[deraskytobzy]

HTML structure

Header

webpages usually have a masthead that contain some or all of the following: 

The site name, logo or branding 

A login form 

Navigation 

A search form 

Social Media links

Nav

The <nav> element represents a pages major navigation block, such as the main menu or a table of contents. This can be illustrated below

footer

A <footer> usually lies at the bottom of a page or section and contains information like contact details, copyright information, links etc.

[deraskytobzy]

HTML LINKS

Links are created using the <a>  element as found in the first image. The content between the opening and closing tags is what the user clicks on to visit the link. The link destination is handled by the href attribute. This also can be applied in the footer as well.

for example <a href=“Tumblr.com”> Tumblr</a>

[deraskytobzy]

HTML For Beginners The Easy Way: Start Learning HTML & CSS Today

HTML for Absolute Beginners

The History of HTML

HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. It stands for Hyper Text Markup Language.

Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether. The latest version is known as HTML5.

A Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things: tags and attributes.

What Are HTML Tags?

Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is: <h1>.

Most tags must be opened <h1> and closed </h1> in order to function.

What are HTML Attributes?

Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.

An example of an attribute is:

<img src="mydog.jpg" alt="A photo of my dog.">

In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.

HTML Editors

Now that we’ve gotten the basic theory out of the way. It’s time to learn how to build our first website.

First off, we must ensure that we have the right tools. Most important, we need an HTML editor.

There are many choices on the market. Here are a handful of the most popular:

Sublime text editor

Notepad ++

Atom

To be continued in my next post........ see you soon.