SMM10803 INTRODUCTION TO PROGRAMMING LANGUAGES

 CHAPTER 1: INTRODUCTION TO PROGRAMMING LANGUAGES

  • The basic knowledge in web programming languages such as HTML, CSS, JAVA, XML, PHP, VBScript, Android
  • Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document. HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as <img /> and <input /> directly introduce content into the page. Other tags such as <p> surround and provide information about document text and may include other tags as sub-elements. Browsers do not display tags, but use them to interpret the content of the page.
  • Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content. Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device. The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.
  • Java is a general-purpose programming language that is class-based, object-oriented, and designed to have as few implementation dependencies as possible. It is intended to let application developers write once, run anywhere (WORA), meaning that compiled Java code can run on all platforms that support Java without the need for recompilation. Java applications are typically compiled to bytecode that can run on any Java virtual machine (JVM) regardless of the underlying computer architecture. The syntax of Java is similar to C and C++, but it has fewer low-level facilities than either of them. As of 2019, Java was one of the most popular programming languages in use according to GitHub, particularly for client-server web applications.
  • Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. XML was designed to describe data. HTML was designed to display data. XML is a markup language much like HTML. XML was designed to describe data, not to display data. XML tags are not predefined. You must define your own tags. XML is designed to be self-descriptive. XML is not a replacement for HTML. XML and HTML were designed with different goals. XML was designed to describe data, with focus on what data is while HTML was designed to display data, with focus on how data looks. HTML is about displaying information, while XML is about carrying information.
  • PHP is a general-purpose programming language originally designed for web development. It was originally created by Rasmus Lerdorf in 1994. The PHP reference implementation is now produced by The PHP Group. PHP originally stood for Personal Home Page, but it now stands for the recursive initialism PHP: Hypertext Preprocessor. PHP code may be executed with a command line interface (CLI), embedded into HTML code, or used in combination with various web template systems, web content management systems, and web frameworks. PHP code is usually processed by a PHP interpreter implemented as a module in a web server or as a Common Gateway Interface (CGI) executable. The web server outputs the results of the interpreted and executed PHP code, which may be any type of data, such as generated HTML code or binary image data. PHP can be used for many programming tasks outside of the web context, such as standalone graphical application and robotic drone control.
  • Microsoft VBScript (Visual Basic Script) is a general-purpose, lightweight and active scripting language developed by Microsoft that is modeled on Visual Basic. VBScript ("Microsoft Visual Basic Scripting Edition") is an Active Scripting language developed by Microsoft that is modeled on Visual Basic. It allows Microsoft Windows system administrators to generate powerful tools for managing computers with error handling, subroutines, and other advanced programming constructs. It can give the user complete control over many aspects of their computing environment. Nowadays, VBScript is the primary scripting language for Quick Test Professional (QTP), which is a test automation tool. This tutorial will teach you how to use VBScript in your day-to-day life of any Web-based or automation project development.
  • Android software development is the process by which new applications are created for devices running the Android operating system. Google states that "Android apps can be written using Kotlin, Java, and C++ languages" using the Android software development kit (SDK), while using other languages is also possible. All non-JVM languages, such as Go, JavaScript, C, C++ or assembly, need the help of JVM language code, that may be supplied by tools, likely with restricted API support. Some programming languages and tools allow cross-platform app support (i.e. for both Android and iOS). Third party tools, development environments, and language support have also continued to evolve and expand since the initial SDK was released in 2008. In addition, with major business entities like Walmart, Amazon, and Bank of America eyeing to engage and sell through mobiles, mobile application development is witnessing a transformation. The official Android app distribution mechanism to end users is Google Play; it also allows staged gradual app release, as well as distribution of pre-release app versions to testers.

CHAPTER 2: INTRODUCTION TO HTML (HYPERTEXT MARKUP LANGUAGE

HTML Introduction
  • Hypertext Markup Language is the Hyper Text Markup Language for creating web pages and web applications.
  • HTML elements are the building blocks of HTML pages
  • HTML elements are represented by tags
  • HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
  • Browsers do not display the HTML tags, but use them to render the content of the page
  • The <!DOCTYPE html> declaration defines this document to be HTML5
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the document
  • The <title> element specifies a title for the document
  • The <body> element contains the visible page content
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph
HTML Tags
  • HTML tags are element names surrounded by angle brackets:
  • <tagname>content goes here...</tagname>
  • HTML tags normally come in pairs like <p> and </p>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, but with a forward slash inserted before the tag name 
  • The start tag is also called the opening tag, and the end tag the closing tag.
Web Browsers
  • The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.
  • The browser does not display the HTML tags, but uses them to determine how to display the document:

HTML Editors
  • Web pages can be created and modified by using professional HTML editors. But, user still can use Notepad or TextEdit to write the HTML coding.
  • Step 1: Open Notepad or TextEdit
  • Step 2: Write some HTML 
  • Step 3: Save the HTML Page
  • Step 4: View HTML Page in browser
HTML Basic

HTML Paragraphs
  • HTML paragraphs are defined with the <p> tag:
HTML Links
  • HTML links are defined with the <a> tag: <a href="https://portal.unimap.edu.my">
  • The link's destination is specified in the href attribute.
  • Attributes are used to provide additional information about HTML elements.
HTML Images
  • HTML images are defined with the <img> tag.
  • The source file (src), alternative text (alt), width, and height are provided as attributes:
  • <img src=“flower.jpg" alt=“my flower" width="104" height="142">
HTML Buttons
  • HTML buttons are defined with the <button> tag:
HTML Lists
  • HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag, followed by <li> tags (list items):
HTML Elements
  • An HTML element usually consists of a start tag and end tag, with the content inserted in between: <tagname>Content goes here...</tagname>
  • The HTML element is everything from the start tag to the end tag:
  • Example of <tagname>.........</tagname>
    • <html></html>
    • <body></body>
    • <h></h>
    • <p></p>
    • <br>  empty element without a closing tag (the <br> tag defines a line break):
    • Empty elements can be "closed" in the opening tag like this: <br />.
  • HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.
  • HTML tags are not case sensitive: <P> means the same as <p>.
  • The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.
HTML Attributes
  • All HTML elements can have attributes
  • Attributes provide additional information about an element
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name="value“
  • The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a vision impaired person, can "hear" the element. The alt attribute is also useful if the image does not exist: <img src=“logo.jpg“ alt=“this is UniMAP logo">
The href Attribute
  • HTML images are defined with the <img> tag.
  • HTML links are defined with the <a> tag. The link address is specified in the href attribute:
  • <a href="https://portal.unimap.edu.my">This is a link</a>
The src Attribute
  • The filename of the image source is specified in the src attribute: <img src=“logo.jpg">
The width and height Attributes
  • Images in HTML have a set of size attributes, which specifies the width and height of the image:
  • <img src=“logo.jpg“ width=“150“ height=“100“ >
  • The image size is specified in pixels: width=“150" means 150 pixels wide.
The alt Attribute
  • The alt attribute specifies an alternative text to be used, when an image cannot be displayed. <img src=“logo.jpg“ alt=“this is UniMAP logo">
The style Attribute
  • The style attribute is used to specify the styling of an element, like color, font, size etc. <p style="color:red">I am a paragraph</p>
The lang Attribute
  • The language of the document can be declared in the <html> tag.
  • The language is declared with the lang attribute.
  • Declaring a language is important for accessibility applications (screen readers) and search engines:
  • <!DOCTYPE html> <html lang="en-US"> <body>... </body> </html>
The title Attribute
  • Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:
HTML Headings
  • All HTML elements can have attributes
  • 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.
  • Browsers automatically add some white space (a margin) before and after a heading.
  • <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.
  • Use HTML headings for headings only. Don't use headings to make
  • text BIG or bold.
  • All HTML elements can have attributes
  • Attributes provide additional information about an element
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name="value“
  • Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:
The href Attribute
  • HTML images are defined with the <img> tag.
  • HTML links are defined with the <a> tag. The link address is specified in the href attribute: <a href="https://portal.unimap.edu.my">This is a link</a>
HTML Horizontal Rules
  • The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
  • The <hr> element is used to separate content (or define a change) in an HTML page:
CHAPTER 3: CASCADING STYLE SHEET (CSS)
  • Introduction to CSS
  • Managing CSS
  • CSS structure
CHAPTER 4: INTRODUCTION TO PHP (HYPERTEXT PREPROCESSOR)
  • PHP overview
  • PHP install
  • PHP syntax
  • PHP variables
  • PHP echo/print
  • PHP forms
CHAPTER 5: INTRODUCTION TO JAVA
  • Contents
  • Introduction
  • Java platform overview
  • The basic concept Java programming
CHAPTER 6: INTRODUCTION TO PYTHON
  • Introduction to Python
  • The basic concept of Python programming
CHAPTER 7: INTRODUCTION TO ANDROID
  • The introduction to Android
  • The basic workflow of Android Programming
  • Manage, write, build and run your app
  • Configure, debug and test your build app
  • Publish your app
CHAPTER 8: INTRODUCTION TO DATABASE
  • Database basics
  • Creating and working with a database 
  • Finding, filtering and formatting data

Comments