Artoves : Blend of Technology and Socialism

PHP is one of the most powerful languages of the web. PHP is an application server as well as a programming language that has the capability to do loads of stuff like generate dynamic HTML, connect to databases, apply programming logic to the website code, server side scripting, form handling etc. It is one of the most widely used scripting languages. In order to get it running, you will need to have a basic setup preconfigured which we'll cover later in the course. Just to give you all a head's up, we will start with the trivial "HELLO WORLD" program. Test Code : ( Use this code to display Hello World! in the console ) <?php echo "Hello, World!"; ?> NOTE:  Don't worry about anything else you see on the screen just focus on the code and rest will be discussed later in the tutorials. Save the file as " H ello.php " in the DOCUMENT ROOT of your web-server; for XAMPP users like me its the HTDOCS folder in the installat...

Now the time comes for the webpages to have few graphical content (images) and hyperlinks* . Yes, this is about images and hyperlinks. The images on a webpage produces a pleasing and attractive effect on the observer's side. And if a webpage has within itself the doors which open to new pages , it calls for a great interactive interface. The images on a webpage are managed by the image element in html; <img> tag in specific. The images are specified in the tag with the help of the path address it is situated on your local directory or on your server . This path is incorporated in the "src" or the source attribute of the <img> tag. You also have the "height" and "width" attributes in the <img> tag in order to have a fixed area covered by the exact image you want no matter if its smaller or bigger than your requirement, you can always work it down to your need. Test code : ( Use this code to display images ...

After the few basics components learnt, its actually time for the presentation or content elements to be started with.  By now we already know the basic structure of a webpage and what it consists of, now we need to learn about the inner tags and e lements which are for the presentation of the content . We start with " heading   tags " which are used to display the contained text within it in form of headings which are bolder as well are larger in font size than the normal text to emphasize a special presence of the keyword the following things are about. Everywhere you might see the use of heading and its for the same very purpose in case of webpages to categorize the text associated with it into several related but labelled segments. The heading tags are ranged from <h1> to <h6>   successively with the <h1> as the boldest and largest representation format and <h6> as the smallest and most narrow  among the heading but obviously ...

After all of the learning to set up a basic html5 page, we suddenly are now going to tell the browser that we are using html5 by using the " doctype element ". The doctype * as the name suggest specifies the document type . Being an everyday evolving language, html has several versions and associated technologies and every individual has open options to use any of them according to their preference. The doctype defines information like which version of the html is used to write the document etc. But as of this course of time html5 is the new common among developers and it greatly simplifies the doctype of the html document and shrinks it down to just a simple statement against the old long and terrifying DTD and Xhtml declarations (if you don't know what they are, don't worry; you don't need to). The doctype is defined at the very beginning of the document even before the html element in the webpage. Now since, the doctype is a special element which is j...

Now that we have a page setup, the final touch to the structure of the webpage is to make the browser aware of the character set* it should use to recognize the characters. Technically, t he charset attribute is used to specify the character encoding of the html document . The new standard for the charset used most commonly is the "UTF-8" encoding. The unicode character set is a collection of all the characters represented in a unicode format and UTF-8 is the encodind that corresponds to it. The encoding of the document is information about the document and such information is called the Meta Informaion and hence a "meta" element is used for the purpose.  Metadata* is data (information) about data . The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be parsable or can be understood by the machine . Meta elements are typically used to specify page description, keywords, author of the d...

The head element being discussed in brief now its time that we go to the next section; the " body " element; again with a pair of opening and closing tags <body></body> . <Body> tag is the chief/main display board of the web page . Whatever you wis h to display on your webpage has to be contained within the <body> element. Apart from the graphical enhancements or presentation based and the other few important elements which will be discussed later, all the basic content managing elements are encapsulated within the body element . Whatever text, blocks, sectors, segments, columns etc. are displayed in the web page are to be a part of body element . Test code : ( Use this code to display the content in main content area of the webpage ) <html> <head>  <title> My page still has a title within head tag </title> </head> <body> I can see my text appearing in the main...

Next in our list comes the 'head' element which is the child of  the 'html' element . The head element is a container for all the information about the document . Elements inside <head></head> can include scripts, instruct the browser where to find style sheets, provide meta information, and much more . The following tags can be added to the head section which will be discussed in detail later: 1.<title> 2.<base> 3.<link> 4.<meta> ... 5.<script> 6.<style>. etc.   Now as we can see the title element is actually a part of head element . The head element is also similar to the html element pertaining to an opening and closing tag like <head></head> . Therefore, the previous code can be modified as: Test code:(Use this code to see if title bar displays the title)   <html> <head> <title> My page still has a title within head tag </title> </head> <htm...

After writing the opening and closing html tags, the first element we are going to focus on is the " TITLE " tag which displays the name or title of the html document . This is the name that appears on the top most of the web browser on the titlebar . It is used very similar to the "html tag"; an opening tag and a closing tag and the content or the text to be displayed goes between the tags like: <title>Name of page</title> Here's a simple test code: ( Use this code to see if title bar displays the title of the page correctly.) <html> <title> My page has a title </title> <html> Note:   Copy the test code to the editor and save it with any filename with extention '.html' or '.htm' to make it working on the browser. Right click the page and choose open with : browser name( internet explorer, firefox, google chrome ) and you will see the title of the page on top.

Now that we have got everything ready lets start with our part! An html page is just like another document that you keep in your official files packed and stuffed! And having said that, it also consists of defined elements to describe the structure of the document like, it has a heading, a page title, few paragraphs, etc. I HOPE YOU GOT THE IDEA.  Now likewise, these elements form the layout of the page in an HTML document also and they have a fixed syntax on HOW  and WHERE they need to be placed. The html elements are always written with the angle brackets " < "   and " > " for the web browser to understand and distinguish between html elements and the text wrapped in them. In html terminology these angle bracketed elements are called TAGS* .  Most of the times these tags exist in pairs, i.e. opening and closing tags to be specific. The content is wrapped between these pair of tags in order to apply the properties and behaviour of that specific eleme...

Web is all about presentation of varied textual and graphical elements along with the beautification, animation & effects to enhance its visibility . Web is based on various languages typically as html, php, ajax etc. But, the most important and genuine hands behind web development is laid by the Hypertext Markup Language abbreviated as HTML . Writing html code is not a big deal with constant practice and easy understanding. So, lets just start with our journey into the world of Web designing / development with few basic necessities: What do you need ? 1. A text editor (even as simple as Notepad ) 2. A working system 3. Specially You ! Seriously that's all you need. You can also checkout few of the other text editors mentioned but if you are using one. You are good to go with it. Few of the popular ones are : Notepad++ Sublime text Adobe Dreamweaver (paid) Coffee cup Komodo edit Netbeans Apatana Studio     These are few of the most widely...

Hello everyone !  Artoves WebArt  provide all the basic learning for the   web designing / development   step by step by introducing tools and new techniques to help you build  better web experience . To start with Web Designing / Development first a brief introduction of  Web*  is shared with you and then it carries on to learning the procedures. The   World Wide Web  (abbreviated as  WWW  or  W3 , commonly known as the Web, or the " Information Superhighway "),   is a system of interlinked hypertext documents accessed via the Internet . With a web browser, one can view web pages that may contain text, images, videos, and other multimedia, and navigate between them via  hyperlinks* . Using concepts from his earlier   hypertext systems  like ENQUIRE, Britis h engineer and computer scientist  Sir Tim Berners-Lee , now Director of the  World Wide Web Consortium   ( W3C ), wrote a ...