HTML/CSS/JavaScript Programming Exercises

HTML/CSS/JavaScript Tutorials

YouTube Tutorials for HTML/CSS/JavaScript

HTML/CSS Reference

http://htmldog.com/references/

JavaScript Reference

https://developer.mozilla.org/bm/docs/Web/JavaScript/Reference

Essetial Library, Framework and Teamplates

Common HTML Tags & Attributes

<link> commonly used to establish a link to a style sheet.
<meta> commonly used to define a character set or keyword meta information.

<div> tag defines a division or a section in an HTML document.
<div id> attribute is used to uniquely identify an HTML element

<p> tag defines a paragraph that contains text.
<span> tag is used to group inline-elements in a document.

<h1> to <h6> Headings varying in weight
<ol> ordered list
<ul> unordered list
<li> list items inside <ol> or <ul> elements.

<table> creates a table
<tr> table row
<th> table header
<td> table cell

<a> tag defines a “clickable” hyperlink to another webpage or other online content.
<a href> (hypertext reference) attribute defines the link.

<img> image tag with attributes, src and alt
<img src> (source)– defines the image name, type and location.
<img alt> (alternate) – defines a text description for the image.

<br> inserts a single line break.
<hr> horizontal rule tag is used to show a thematic break, by default renders as a simple horizontal line.
<em> defines emphasised text and renders, by default as italic.
<strong> defines important text and renders, by default as bold.

HTML Tag Usage

<tagname>Element content</tagname>
<tagname attribute_name>Element content</tagname>
<tagname attribute_name="attribute_value">Element content</tagname>

CSS Property Usage

<style>
    selector { property1:value1; property2:value2;}

    selector1, selector2, selector3 {
        property1:value1;
        property2:value2;
        property3:value3;
    }
</style>

jQuery Library Usage

<script src="bower_components/jquery/jquery.js"></script>
<script>
    $(function() {
        $("#ID").METHOD();
    });
</script>

JSON Syntax

var obj = {
    "key1":"value1",
    "key2":["v1", "v2", "v3"],
    "key3":{"key":"value"}
};

In JSON, keys must be strings and written with double quotes.

Publish Website Online

1. Buy a domina name

2. Rent a webhost

3a. Upload your files to webhost (Windows/MacOS)

https://cyberduck.io/

3b. Use ssh to access your server and scp to copy files from local to remote (Linux/MacOS)

# Replace the following CAPITAL letters as appreciate
$ ssh -P PORT_NUMBER USERNAME@IP_ADDRESS                            # ex. ssh -P 2222 abc@123.123.1.1
$ scp -P PORT_NUMBER LOCAL_DIR USERNAME@IP_ADDRESS:ROMOTE_DIR       # ex. scp -P 2222 ./file abc@123.123.1.1:~/

Install LAMP (Linux, Apache, MySQL, PHP)

1. Install Apache

$ sudo apt-get update
$ sudo apt-get install apache2
# Check Apache
# Open Browser with address http://localhost

2. Install PHP

$ sudo apt-get install php
$ sudo /etc/init.d/apache2 restart
# Check PHP
$ sudo vim /var/www/html/hello.php
# Open Browser with address http://localhost/hello.php

3. Install MySQL

$ sudo apt-get install mysql-server
# Check MySQL
$ mysql -u root -p
$ \q

4. Install phpMyAdmin

$ sudo apt-get install phpmyadmin
# Check phpMyAdmin
$ sudo vim /etc/php/7.0/apache2/php.ini
# uncomment extension=msql.so
# Add the following in the php.ini file
# Include /etc/phpmyadmin/apache.conf
$ sudo ln -s /etc/phpmyadmin/apache.conf /etc/apache2/conf-available/phpmyadmin.conf
$ sudo ln -s /usr/share/phpmyadmin /var/www/html/phpmyadmin
$ sudo service apache2 restart
$ sudo /etc/init.d/apache2 restart
# Open Browser with address http://localhost/phpmyadmin/

* Settings for Files Served to the Client

# Directory of Apache Configuration File
/etc/apache2/apache2.conf           # (Linux)
/etc/apache2/httpd.conf             # (MacOS)

# Apache Web Root by default
/var/www/html/                      # (Linux)
/Library/WebServer/Documents/       # (MacOS)

# Setting File Permissions
$ chown USER_NAME FILE_NAME
$ chmod 755 DIRECTORY          # chmod  o+w  DIRECTORY
$ chmod 644 DIRECTORY

# Apache Error Logs
/var/log/apache2/error.log

shengchiliu/Webpages