Today’s Class – Web Security Workshop

  • Ensure Basic Website Security
  • Research These Terms
    • Upload the Complete File on MyKangan
  • Internet Security
    • Protect Fixed Internet Connection and IP Address
    • Use and Maintain Antivirus Software
    • Protect Shared Network Resources From Intrusion
    • Following Security Protocols
    • Disable Control Protocol
    • NETBIOS and TCP/IP
  • Assessment Task
  • Feedback

Ensure Basic Website Security

Today we will have to insert a workshop on basic Website security.

This is the unit of competency that we will cover:

Read the units’ elements:

  • Determine Business Security Requirements
  • Ensure Web Server Security
  • Ensure Protocol Security

Research These Terms

Use this link TechTerms.com, Webopedia.com and find your own web dictionary to research the terms below:

  • What is a (Web) Host/(Web) Hosting?
  • What does ISP stand for?
  • Example of 2 free hosting services (provide links)
  • What is FTP?
  • What is a Domain name?
  • Explain IP Address and give an example!
  • What is the difference between a static and a dynamic IP address?
  • Find and list prices for a domain name made up of your name on http://who.is/
  • What is the difference between a server and a PC?
  • What is a Web Server?
  • What is a Gateway?
  • Give an example for a Gateway.
  • What is the purpose of a Firewall and where is it located?
  • What is meant by Malware?
  • Give 3 examples for Malware!
  • How can you protect your computer against Malware?
    Give three examples of software designed to protect your computer!
  • Define HTTP.
  • Define HTTPS. How does it differ from HTTP?
  • What is a URL?
  • Define SSL.
  • Explain the acronym TCP! How does it relate to IP?

Upload the Complete File on MyKangan

Create a new Word Document and insert all your definitions in there with the source of your information. Next upload this as a Day 1 Task on MyKangan in ICAWEB408A-Ensure Basic Website Security.

Visual Example of a Network

Visual Example of a Network connected to the Internet: Example of the Internet displayed as networks.

Example of a Network with Routers , Servers, Host PCs - Courtesy of: The TPC/IP Guide
Example of a Network with Routers , Servers, Host PCs – Courtesy of: The TPC/IP Guide (click on image for link)

You can view the different routers that your host PC will visit when accessing a Web page:

Launch the command prompt from a Windows-based computer click: Start > All Programs > Accessories
> Command Prompt. Type tracert and hit enter. This process is called tracing route to a website.

tracert command
tracert command

Internet Security

I would like to thank Anonymous alias JB for the most of the documentation below.

Read all the information below to be able to complete your assessment task for this unit.

Protect Fixed Internet Connection and IP Address

The IP address is always visible to the outside world. Internally, you can reduce its visibility for non-technical persons but not eliminate knowledge of the address.

  • Security updates on server/gateway.

Security exploitation is commonplace today and so it is essential that security patches for gateway machines are kept current.

  • Only gateway devices should have public IP addresses, not internal network computers, which should be on a private network address scheme.

Use and Maintain Antivirus Software

It is paramount to not just have Antivirus software installed, but to maintain currency .

Read: Internet Security GCF Learn Free

Protect Shared Network Resources From Intrusion

Sharing is the primary productivity benefit of networking. We have to share resources on the network such as printers and file folders in order to be productive. Some of those resources might be shared outside the local network (eg the incoming mail server) but most local network files and hardware are not meant for use outside the organisation and need to be protected. This may also include computerised machine tools used in manufacture and the building air-conditioning and lighting which may be computer controlled.

TCP/IP is the modern network topology. A key feature of the protocol is that different types of traffic (eg Email, web, telephone) are sent to different ‘ports’. There are 65535 Ports available of which the first 1024 are reserved. Of these 1024 reserved ports, only the first 256 are in common use. That means there are tens of thousands of potential gateways into your network that are not in active use. From a security point of view, these open ports are like open doors to a building, with one important difference. Although they are open, there may not be anything on the other side of the door (an empty room). However, Trojans exploit these ports for communication and open ports are a leading cause of the spread of DDOS and other security threats. The primary function provided by all Firewall services is to control the range of open ports. Only those ports intended to be available for use should be open on the firewall. (Note: KANGAN does not seem to apply this restriction.)

  • Firewall

It is necessary to protect the interface between the local network and the internet by the use of a Firewall.  A Firewall will allow management of what links (protocols/ports) are available between the local network and the internet. For example, it would be possible to only allow Email traffic.

A Firewall may either be software running on the gateway or most likely today an Appliance that sits between the Gateway and the Internet. The advantage of an Appliance is that it is purpose built for managing security risks.

  • Password Strength

Weak passwords are the single most common cause of security failure.

Read: Passwords: The First Step to Safety GCF Learn Free

Following Security Protocols

Ensure that personal computer protocols and preferences follow security protocols. (Too many uses of the word protocol here and with different nuances of meaning).

  • As the risk of an unexpected new threat is always there, it is essential that there are rules for how information about the internal network is managed. These include, establishing minimum password lengths and types, where business files are saved and how or if visitors are allowed any computer access.
  • Ensure that all staff understand security issues and in particular the role of HTTPS in creating secure data links; how to handle suspicious email and what to do if they suspect their computer is infected by a virus or otherwise compromised.
  • Ensure that processes exist to install and maintain Antivirus on all workstations.
  • Induction program for new staff on computer security and use procedures.

Disable Control Protocol

Disable control protocol or internet protocol bindings for file and printer sharing. (This is not relevant to modern Windows releases which implement security over file and printer access on the TCP/IP network.)

  • When a computer is directly connected to the internet, (e.g. at Home) shared printers and shared files are exposed to the internet and this can be exploited, particularly if passwords on the files/printers do not exist or are weak. At home, disabling file and printer sharing would prevent sharing of things such as iTunes on the local network. The better strategy is to make sure you have very strong passwords on the printer and file shares.
  • Do not disable or uninstall File and Printer sharing on a Business network. Disabling this will mean that the network cannot operate effectively in sharing data and services, which is its main purpose. In commercial environments (e.g. Kangan), TCP/IP is usually the only network protocol in use and the gateway server/appliance is the first level of defence against outside access. Most modern networks store shared files only on the server with robust security measures controlled by the server software.

NETBIOS and TCP/IP

Ensure that network basic input/output system (NETBIOS) over TCP/IP is disabled.

NETBIOS is a network Applications Programming Interface (API) that was used prior to Windows 2000 / XP to identify the individual computers on the network. Essentially it was the means by which data was directed across the network, by applications, to the computer that required it. It is not really a network protocol as such, more like a utility that software can implement to communicate between machines. It is not secure as it was developed in the context that the network was ‘trusted’ and only local (not internet exposed). NETBIOS is easily exploited to gain unauthorised access.

  • NETBIOS exists by default in all Windows releases using TCP/IP, including Windows 8.  NETBIOS should not be implemented on any current systems and must be disabled.
  • You can disable NETBIOS using Group Policy on the Server or by individually disabling under Control Panel/ Local Network Connections / TCP/IP Advanced Settings / WINS

When Windows 2000 / XP first came out, NETBIOS was required to allow for some applications to work across networks that also had Windows98 machines. Those applications and services that depend on NetBIOS over TCP/IP no longer function once NetBIOS over TCP/IP is disabled.

Assessment Task

Please download the assessment task here (on Wednesday) and upload to MyKangan.

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

Today’s Class

  • Introduction
  • Storyboarding for Multimedia
  • Day 1 Task
  • Storyboarding for Webdesigners
  • Storyboard Templates
  • Assessment Task
  • Feedback

Introduction

This workshop is about creating storyboards. A storyboard is a number of drawings, descriptions and annotations that help organising a story visually.

A storyboard is helpful in establishing a number of steps within a story. It will support you in organising the elements and give your story a clear focus.

Storyboards are used in a number of fields and industries:

  • film and TV
  • animation
  • choreography
  • theatre
  • dance
  • opera
  • web design
  • game design
  • writing
  • other multimedia fields

Storyboarding a film is quite different from storyboarding a website.

Storyboards can be created using software or it can be created with pen and paper.

Pen and Paper

When you create a storyboard on paper I recommend to use colours and plenty of annotations.

Example of a storyboard with annotations. Courtesy of Sarah Pritchard.
Example of a storyboard with annotations. Courtesy of Sarah Pritchard.

Software

Most software packages will allow you to create storyboards:

  • Adobe Photoshop
  • Adobe Illustrator
  • Corel Draw
  • MS Word
  • MS PowerPoint

There are also some specialised software packages for creating storyboards:

  • StoryBoard Artist Studio
  • StoryBoard Pro
  • Inspiration

There are also numerous websites that allow you to create storyboards:

Storyboarding for Multimedia

Please follow the link below and read How to Do a Rough Storyboard by Jane Stevens.

After reading the post please complete the task below.

Day 1 Task

Please open the file and complete in class: Day 1 Task – Create Storyboard

Storyboarding for Webdesigners

Webdesigners benefit from storyboarding. It helps organising content and ensures that every element is included in a logical place according to topic and site.

Read the post on Storyboarding Your Website (Source: nmasse.com).

Storyboard Templates

Below are a number of links for storyboard templates:

Search Google Docs for Templates

Storyboard Template

Storyboard template (Courtesy of http://www.cwrl.utexas.edu )

Assessment Task

The assessment task will be included in (clustered with)  C1 – Design Simple Website Layouts.

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

Banner_Cert IV WebBTech-designSimpleWebsite

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6      Link to this Unit on MyKangan

Today’s Class

  • Dreamweaver – Session 4
  • Feedback
Part of a table created in Dreamweaver. The colour is Olive.
Part of a table created in Dreamweaver. The colour is Olive.

Dreamweaver – Session 4

We will commence today’s Dreamweaver session by looking at the same content from Tuesday’s class.

Please open Dreamweaver and then transfer the content from the links below (Tables):

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

Today’s Class

  • Assessment Task 1
  • CSS Tutorial on W3Schools.com
  • Feedback

Assessment Task 1

Continue on Assessment Task 1. Use your copy or the file below (if you have not started yet.) Assessment 1 CSS Tracking

CSS Tutorial on W3Schools.com

Today I will ask you to work through these chapters alone and fill your findings in the Assessment 1 CSS Tracking!

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

 

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6     Link to this Class on MyKangan

Icons-Social-Media

Today’s Class

  • Units of Competency
  • Assessment 1
  • Feedback

Units of Competency

This class is a cluster of:

There will be one assessment delivered from:

  • ICAWEB413A Optimise Search Engines
  • ICAWEB424A Evaluate and Select a Web Hosting Service

Assessment 1

Please complete the attached assessment task and upload on MyKangan by the due date.

C2 – Assessment 1 SNS

You can work on the assessment in class.

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

Link to all Weeks    Week 1     Week 2     Week 3     Week 4      Week 5     Week 6

Today’s Class

  • Last Week and Your Homework
  • Assessment Task 1
  • CSS Tutorial on W3Schools.com
  • Feedback

Last Week and Your Homework

Your homework was to read

Let us see what you recall:

  • What styles of fonts were mentioned (they were referred to as generic font families)?
  • What code do you use to specify a Sans Serif font?
  • How can you set the font size for a paragraph?
  • Where in a HTML would you place the style information for colouring a link?
  • What is the code for it?
  • Is your Assessment 1 (CSS Tracking) document updated?

Assessment Task 1

Continue on Assessment Task 1. Use your copy or the file below (if you have not started yet.) Assessment 1 CSS Tracking

CSS Tutorial on W3Schools.com

Today I will ask you to work through these chapters alone and fill your findings in the Assessment 1 CSS Tracking!

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

Link to all Weeks     Week 1     Week 2     Week 3    Week 4      Week 5     Week 6     Link to this Class on MyKangan

Today’s Class

  • Units of Competency
  • Last Week
  • Social Web in HTML
  • In-class Task

Units of Competency

This class is a cluster of:

There will be one assessment delivered from:

  • ICAWEB413A Optimise Search Engines
  • ICAWEB424A Evaluate and Select a Web Hosting Service

Last Week

Last week we discussed aspects of social networking and how we relate to it. Let us look at the class discussion in the Forum on MyKangan. (The link requires for you to be signed into MyKangan).

Some of the discussion points and evaluations:

Facebook

How interactive is the site?  The site is very interactive as a user can communicate with others through many ways (e.g messaging, chat, comments, statuses, posts, sharing media) 9/10

How intuitive is the navigation? Facebook isnt very inituitive, especially for beginners new users, there isnt really much of a tutorial on how to connect with friends, upload images, posts, etc. And the navigation is a little bit hard to use. 6/10

How responsive is the site (speed)? Facebook loads very fast on a desktop/laptop but i find it tends to be slow and laggy on a smart phone and can take awhile to load/refresh. 7/10

Advertisments: are there frequent ads, pop-ups or spam? The ads are all interesting to the user and related to a user’s “likes” (which could be books, movies, games, etc). 7/10

Visuals, layout and graphics: Facebook has a boring blue and white colour scheme, although the layout may be modern and clean it isnt very appealing, its too simple and boring. The website is very text based (especially if you have a lot of “friends” that post alot of statuses, etc), but it does have some images if someone has uploaded them. 4/10

Jesse’s verdict: 6.6/10

by Federico Viola – Thursday, 17 October 2013, 3:06 PM
Okay, I will try the 5 points on Facebook:
  1. How interactive is the site? Facebook is very interactive when it comes to interacting with other users. You can engage them in different ways from chatting to posting on their ‘wall’. I find the wall feature a bit corny and there is no wall anyway, so it is just a page in a text editing software. The fact that you can communicate with others, post songs, documents, videos, photos, graphics and links is excellent. Interactivity:9/10
  2. How intuitive is the site? Facebook is not very intuitive. When you are new to Facebook you do not quite know what to do. It is rather boring to look at and you cannot understand the navigation easily. You get better at it through experience. I would rate it: 5/10
  3. How responsive is the site? It is pretty fast. Mostly happy: 9/10
  4. Advertisements? I do not like ads, I hate pop-ups and that goes even more for spam. Facebook is good in regards to ads, their ads are targeted and generally of interest to me.8/10
  5. Visuals? What visuals? It looks like a text editor! Very boring in layout, in use of images and in colours: 2/10

Federico’s verdict: 6.7/10!

Linked In

  • Linked In is not very interactive because the site is now dated and the only interactions are when you email someone or they contact you.  The topics of interest are not very regular and there is not alot of activity on a daily basis. 6/10
  • The navigation is also dated and like many SNS sites it takes time to navigate around the site to get used to it. 5/10
  • Linked In site speed is fast and there is not a page load time problem. 8/10
  • Linked In doesn’t have ads although I have noticed that they are promoting ads like facebook style ads to appear in the near future.  All members have the ability to advertise their own business. 3/10
  • The visuals and graphics of Linked In are also dated and in need of an upgrade.  You cannot edit your own images to how you want them to look and the whole page layout is boring. 4/10
  • On Linked In you cannot search for a person unless you are logged in.  This makes it good for privacy reasons although if you want to use the paid version you can see who has been searching for you which seems to contradict the privacy aspects of Linked In. 5/10
  • Linked In is 80% text based and 20% images. 2/10

Paul’s verdict:  33/70!

Social Web in HTML

We will look at ways to include content in a Social Networking website and how to incorporate content from your website on another site.

You can use HTML to embed sound, video, websites and other objects.

Iframe

Iframe is a command that allows you to embed a website or a video into a frame. Example for code:

iframe code

Screenshot of Iframe
Screenshot of Iframe

Read more about Iframes on W3Schools!

Iframe for YouTube Video

You can embed a YouTube video with Iframe:

This code can be found directly on the YouTube website by clicking on Share and Embed:

YouTube provides the code that allows you to embed the file. The video viewing size can be changed on YouTube.
YouTube provides the code that allows you to embed the file. The video viewing size can be changed on YouTube.

Read more about YouTube Iframe on W3Schools.

Embed Sound and Objects

Read more about embedding sound, video and objects on W3Schools: HTML Media  HTML Object  HTML Audio  HTML Video

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

Link to all Weeks    Week 1     Week 2     Week 3     Week 4      Week 5     Week 6

Today’s Class

  • Last Week
  • Assessment Task 1
  • CSS Tutorial on W3Schools.com
  • Feedback

Last Week

Last week we worked on CSS. What do you recall?

  • Define CSS Id
  • What is the HTML code for an id and where do you insert it?
  • Define CSS Class
  • What is the HTML code for a class and where do you insert it?
  • What is the code for inserting a link to external CSS?

Assessment Task 1

Continue on Assessment Task 1. Use your copy or the file below (if you have not started yet.)

Assessment 1 CSS Tracking

CSS Tutorial on W3Schools.com

We will cover:

In class we worked to here!

Homework

Read the two pages below and add to your Assignment 1 CSS Tracking

Next Class

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

Link to all Classes     Week 3     Week 4      Week 5     Week 6     Week 7     Week 8

Today’s Class

  • Assessment Task
  • Inclass Demonstration
  • Feedback

Assessment Task

Use the W3Schools TryIt Editor and Notepad to create the home page for a website of your choice with HTML and CSS.

Content: include a

  • banner with an image and title,
  • menu with 5 menu items. The menu items need to be links. Link them to a file with the name of the menu item (it will be an incomplete link).
  • 2 sections (divs) with text content
  • 1 section with an image
  • footer with a Copyright statement including this year and your name.

The images can be sourced online. Please aim for Creative Commons images. You may use www.morguefile.com or other websites for this purpose.

Work on the assessment in class and during the week and have ready to be handed in as html file. The CSS component can be either internal or as an external CSS document.

Inclass Demonstration

We will work through the steps to create a website in HTML and CSS:

Start off with the HTML script:

We start with the DOCTYPE declaration and the HTML tags followed by the Head and Body tags:

<!DOCTYPE html>

<html>

</html>

_____

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Note: Add the closing tag straight away to make sure that you do not forget it!

Add your title in the Head as well as your main meta data:

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>  (Add your own title here)

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”” />  (Either write your description straight away or do it later. This description will show in a Google search and it is important to write something that will be relevant to the webside/ web page. Keep it short, but make sure not to skip over important information that would get a user to visit your site!)

<meta name=”author” content=”Federico Viola” />(put your name in here!)

</head>

<body>

</body>

</html>

Now create your divs in html

It is important to sketch out your site beforehand. Write down all the dimensions for the various elements. Overall dimensions, example: width 960px x height 690px, dimensions of the banner/header, dimensions and format of the menu, dimensions of various content boxes.

Divs are basically spaces that you reserve. They are like 2D boxes that allow you to place content, either images, text, video or audio. You can give the background a colour and you can create outlines.

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />

<meta name=”author” content=”Federico Viola” />

</head>

<body>

<div id=”wrapper”>  (This will be the div for the overall webpage. It will be like a frame for all the elements.)

<div id=”header”>

<h1>This is the header/banner</h1>

</div>  (This closes the header div.)

<div id=”container”>  (This will be the div for the menu and content divs)

<div id=”menu”>

<p>Menu</p>

</div>  (This closes the menu div.)

<div id=”content1″>

<p>Content1</p>

</div>  (This closes the content1 div.)

<div id=”content2″>

<p>Content2</p>

</div>  (This closes the content2 div.)

<div id=”content3″>

<p>Content3</p>

</div>  (This closes the content3 div.)

</div>  (This closes the container div.)

<div id=”footer”>

<p>Copyright Statement</p>

</div>  (This closes the footer div.)

</body>

</html>

Now create your CSS

You can create external CSS, in which case you will have to save the CSS file as name.css. This will allow you to change your CSS individually and it is a faster way to update websites. This is particualrly important if you use your standard CSS on  various sites. CSS is not only responsible for colours and style, but is important for standard font and layout sizes. You will need to adjust sizes for your layouts and fonts to suit mobile platforms. (You do not need to do this for the assessment though!)

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />

<meta name=”author” content=”Federico Viola” />

<style> (opens an internal CSS style tag)

#wrapper {;}

#header{;}

#container{;}

#menu{;}

#content1{;}

#content2{;}

#content3{;}

#footer{;}

ul{list-style-type:none;}  (this is the ul tag to be used for the menu later in the body, it defines to have no bullet points)

</style>  (always make sure to close html tags)

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<h1>This is the header/banner</h1>

</div>

<div id=”container”>

<div id=”menu”>

<p>Menu</p>

</div>

<div id=”content1″>

<p>Content1</p>

</div>

<div id=”content2″>

<p>Content2</p>

</div>

<div id=”content3″>

<p>Content3</p>

</div>

</div>

<div id=”footer”>

<p>Copyright Statement</p>

</div>

</body>

</html>

Add your dimensions to the CSS

You can create external CSS, in which case you will have to save the CSS file as name.css. This will allow you to change your CSS individually and it is a faster way to update websites. This is particualrly important if you use your standard CSS on  various sites. CSS is not only responsible for colours and style, but is important for standard font and layout sizes. You will need to adjust sizes for your layouts and fonts to suit mobile platforms. (You do not need to do this for the assessment though!)

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />

<meta name=”author” content=”Federico Viola” />

<style> (opens an internal CSS style tag)

#wrapper {width:960px;height:690px;margin:0px;}  (the site will go to the edge due to having no margin)

#header{width:960px;height:140px;margin: 10px 0px;background:#3375FF;} (the header will have 10px margins on top and bottom and no margins on the right and left, the background colour has been specified)

#container{width:960px;height:410px;}  (always make sure to use a semi-colon at the end of a CSS declaration)

#menu{width:100px;height:410px;margin-right:10px;background:#3399FF;

#content1{width:410px;height:200px;margin-right:10px;padding:5px;background:#4CCCFF;}

#content2{width:410px;height:200px;margin-right:10px;padding:5px;background:#3375FF;}

#content3{width:410px;height:410px;padding:5px;background:#0099FF;}

#footer{width:960px; height:140px;}

ul{list-style-type:none;}

</style>  (always make sure to close html tags)

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<h1>This is the header/banner</h1>

</div>

<div id=”container”>

<div id=”menu”>

<p>Menu</p>

</div>

<div id=”content1″>

<p>Content1</p>

</div>

<div id=”content2″>

<p>Content2</p>

</div>

<div id=”content3″>

<p>Content3</p>

</div>

</div>

<div id=”footer”>

<p>Copyright Statement</p>

</div>

</body>

</html>

To be continued

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

Link to all Classes     Week 1     Week 2     Week 3     Week 4      Week 5     week 6

Today’s Class

  • CSS Styling Fonts
  • HTML Tables
  • CSS Styling Tables
  • HTML Lists
  • CSS Styling Lists
  • HTML Blocks
  • HTML Layout
  • Homework
  • Feedback

CSS Styling Fonts

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/css/css_font.asp.

HTML Tables

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/html/html_tables.asp.

CSS Styling Tables

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/css/css_table.asp.

HTML Lists

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/html/html_lists.asp.

CSS Styling Lists

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/css/css_list.asp.

HTML Blocks

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/html/html_blocks.asp.

HTML Layout

Use the supplied links to follow the instructions on W3Schools: http://www.w3schools.com/html/html_layout.asp.

Homework

Please look at this W3Schools example: Basic website created with div elements and change it to create a simple text based website for yourself. Call it something like ‘My first website’, supply a menu with menu items (about me, portfolio, etc) and change dimensions and colours. Add more divs to the HTML.

Save your final work with Notepad as a HTML file and bring to next class!

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!