Skip to content

Latest commit

 

History

History
118 lines (70 loc) · 3.99 KB

Web_Development.md

File metadata and controls

118 lines (70 loc) · 3.99 KB

#Introduction Useful website for web development:

There are 3 main languages all web developers must learn:

  • HTML to define the content of web pages
  • CSS to specify the layout of webpages
  • Javascript to program the behaviour of webpages

Languages

HTML

Webpages can be created and modified using professional HTML editors, but to start learning HTML, open up a simple text editor (i.e. Notepad++) and save it with .htm suffix and set the encoding to UTF-8

HTML documents

All HTML docments must start wit a document type declaration:

The HTML document itself begins with and ends with

The visible part of the HTML document is between and 

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

HTML consists of TAGs

Several important tags:

  • HTML links are defined with the tag, the href attribute specifies the link`s destination: <a href="https://www.w3schools.com">This is a link</a>
  • HTML images are defined with the tag, the source file (src), alternative text, widt and height are provided as attributes: <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
  • The element is a container for metadata and is placed betzeen the tag and the tag. Metadata is not displayed and usually defines the document title, character set, styles, links, scripts and other meta information. https://www.w3schools.com/html/html_head.asp
    • : specify which character set is used
    • <title>: defines title of the document in the browser tab, search engines, favorite tabs
    • : used to link to external style sheets
    • <script>: define client-side Javascripts

CSS

css = Cascading Style sheet. It is not a programming language nor a markup language, it is a style sheet language. Apply styles selectively to elements in HTML documents.

We need to apply the CSS to your HTML document. Otherwise, the CSS styling won't affect how your browser displays the HTML document. Open your index.html file and and paste the following line somewhere in the 

<link href="styles/style.css" rel="stylesheet" type="text/css">

Save index.html and load it in your browser

JavaScript

JavaScript comments:

  • Single line comments: //
  • multiline comments: start /* and end */

JavaScript funcitons:

function name(parameter1, parameter2, parameter3) {
    code to be executed
}

Meaning of the parentheses surrounding a function:

(function() {
    var Dom = YAHOO.util.Dom,
    Event = YAHOO.util.Event,
    layout = null,
        ...
})();

It is a self-executing anonymous function. The first set of parentheses contain the expressions to be executed, and the second set of parentheses executes those expressions. It is a useful construct when trying to hide variables from the parent namespace. All the code within the function is contained in the private scope of the function, meaning it can't be accessed at all from outside the function, making it truly private

How is it related to each other?

Folder structure

Create a folder structure to connect all of the files above

Main_folder:

  • index.html
  • styles directory: holding CSS code, styling the content
  • script directory: contains all JavaScript code used to add interactive functionality to your site
  • images directory: contains the images you use on your website

Development environment

There are some webapps allowing you to enter HTML, CSS an JvaScript and then display the result of that code when rendered as a website all in one browser tab.

https://jsfiddle.net/