Asterix HTML - User contributions [en-gb]

2020-05-12

2023-11-18T19:07:30Z

Prothumia: Created page with "This is '''Design brief 1 of 4'''. You already have the hard copy of this brief. == Introduction (*) == Since the inception of the Internet, HTML code has formed the backbone of all the web pages developed online. HTML or Hypertext Markup Language can be written in a text editor such as Notepad, and once saved as an HTML file, it can be viewed within a web browser as a web page. HTML makes use of a series of tags which contain formatting inst..."

This is '''Design brief 1 of 4'''. You already have the hard copy of this brief.

== Introduction (*) ==

Since the inception of the Internet, [[HTML]] code has formed the backbone of all the web pages developed online. [[HTML]] or Hypertext Markup Language can be written in a text editor such as [[Notepad]], and once saved as an [[HTML]] file, it can be viewed within a web browser as a web page. [[HTML]] makes use of a series of [[tags]] which contain formatting instructions for the web browser to interpret and to display in the browser.

It is imperative for any prospective web designer to be able to read and code [[HTML]].

== The scenario (*) ==

The company, '''Top Websites''' has approached you to design a web page, using [[HTML]] and [[Notepad]], which lists your [[top 20]] websites. Your web page is to include a banner, designed in [https://www.adobe.com/africa/products/illustrator.html Illustrator] or [https://www.adobe.com/africa/products/photoshop.html Photoshop], and thumbnail screen shots of the websites which must serve as links to the site you are referencing. You are also required to give a brief description of each website and discuss why you have chosen the site as one of your [[top 20]].

The website needs to reflect a design theme through the use of layout, imagery and colour.

== Requirements (*) ==

=== Word document ===

You are required to research your top 20 websites online, remember to record the absolute URL (eg https://www.w3schools.com/), a screenshot of the website, description and reason for choosing the site to feature in your [[top 20]].

=== Root folder ===

Containing all the pages created and an [[top 20|images folder]] with re-sized and optimaised images used in the site.

=== HTML web page ===

Hand coded in [[Notepad]] using [[HTML]]

=== Web banner ===

Designed in [https://www.adobe.com/africa/products/illustrator.html Illustrator] or [https://www.adobe.com/africa/products/photoshop.html Photoshop] and must include your own logo for '''Top Websites'''.

=== List of your top 20 ===

Include a screen shot thumbnail, description and reason why you have chosen the site as one of your [[top 20]].

=== Images ===

All the images used in your website will need to be re-sized, optimised and served within the root folder of your website in an [[top 20|images folder]].

=== Footer ===

[https://en.wikipedia.org/wiki/Copyright Copyright information] and an [[mail|email]] to the [https://en.wikipedia.org/wiki/Webmaster webmaster] or [https://en.wikipedia.org/wiki/Designer designer] of the web page.

== Tasks ==

=== Task 1 ===

AC1.1 The student has created [[HTML|HTML code]], using a [[Notepad|text editor]]/[[NetBeans|HTML editor]]

* Research top 20 websites
* Provide reasons for selection
* Scamp ideas for look and feel
* Create [[HTML]] code using an editor ([[Notepad]])

=== Task 2 ===

AC1.2 The student has produced a web page using [[HTML|HTML code]]

* Produced all pages using [[HTML|HTML code]]

== Module outcomes ==

Please be aware of the Module Outcomes as well as the Assessment Criteria as these are imperative to having competence in this Module.

{| class="wikitable"
! Learning Outcomes
! Assessment
criteria
! colspan="2" | Assessor Decision
! Internal
moderation
|-
| rowspan="13" | LO 1

The student applies HTML
code to design web pages
| rowspan="5" | Task 1
AC 1.1

The student has created
HTML code using a text
editor/HTML editor
| NYP
| Have you met all the relevant outcomes
| rowspan="5" |
|-
| P
| All the relevant outcomes have been met
|-
| rowspan="3" | M
| Identify and apply strategies to find acceptable solutions
|-
| Select/design and apply appropriate methods/techniques
|-
| Present and communicate appropriate findings
|-
| rowspan="8" | Task 2
AC 1.2

The student has produced
a web page using HTML
| NYP
| Have you met all the relevant outcomes
| rowspan="8" |
|-
| P
| All the relevant outcomes have been met
|-
| rowspan="3" | M
| Identify and apply strategies to find acceptable solutions
|-
| Select/design and apply appropriate methods/techniques
|-
| Present and communicate appropriate findings
|-
| rowspan="3" | D
| Use critical reflection to evaluate own work and justify valid conclusions
|-
| Take responsibility for managing and organising activities
|-
| Demonstrate convergent/lateral and creative thinking
|}

'''Note''' : This design brief and all its parts should be filed in your [[PoE]].

== Lecturer's comments & action plan ==

* My primary drive for this brief is not to see how pretty your pictures are. What I want is confidence that you are connected to your [[website]]s and know how to load web pages onto the Internet
* My primary drive for this brief is not to see how pretty your code is. All I want is see is pages and pages on the Internet

=== Task 1 ===

Use the training I have given you on [[web development]]

=== Task 2 ===

[[Cyber]] now has not one!- but <big>'''three'''</big> [[top 20]] websites!

If [[student|you]] want good marks for this task, you might want to track what [[Cyber|Cyber's]] doing...

== Deadline ==

As announced on lectures..

NEWS : As per lectures, we are giving ''"students an opportunity to get up-to-speed with outstanding work"''

* '''Catch-up week 1 :''' Review week 18-22 May 2020
* '''Catch-up week 2 :''' Catch-up period extended 25-29 May 2020

''"Classes will resume on Monday 1 June"''

This sounds like a good thing!

Seeing only 3 students have completed their 1st submission, I'll push the submission dates of this brief out to match this!

=== 1st submission ===

==== Midnight 2020-06-02 ====

It's a Tuesday!

=== 2nd submission ===

I have set this to one week after the 1st submission

==== Midnight 2020-06-09 ====

It's a Tuesday!

== Your grading ==

=== Task 1 ===

[[WATCH THIS SPACE]]

=== Task 2 ===

[[WATCH THIS SPACE]]

== Notes ==

(*) This is verbatim. Know that I do not agree with all aspects of what I am writing up for you

* A clear area of change to this brief is that most of you will have upgraded to [[NetBeans]] as your HTML editor
* Another correction is that it not [[HTML]], but [[PHP]] that has formed the backbone of most of the web pages developed online!- though, that said, [[HTML]] is your first and only stepping stone into the world of [[PHP]].

=== Let me say that again ===

If you don't know [[HTML]], I am not taking you into the world of [[PHP]]! It's like being an infant all over again, where I'm not going to teach you to walk before you have learned how to crawl

=== Let me put this another way ===

Once I have taught you how to write [[HTML]] web pages (and only if you pay attention to me, of course), I would like to teach you how to write [[PHP]] web pages- that write your [[HTML]] pages for you!

Think of it this way : You can't become an English teacher until you know how to speak English...

=== For the record ===

I have informed each of my [[web development]] students, individually, to ensure they are on the same page that I am

Further...

* 2020-04-25 : I reminded all [[student]]s- on lectures- that this brief is due 2020-05-12
* 2020-05-05 : I reminded all [[student]]s- on lectures- that they now have 7 days left
* 2020-05-07 : I reminded all [[student]]s- on lectures- that they now have 5 days left
* 2020-05-08 : I reminded all [[student]]s- on lectures- that they now have 4 days left
* 2020-05-11 : I reminded all [[student]]s- on lectures- that they now have 1 day left

NOTE : Due to the one week extension right in the middle of this, we are starting all over again...

[[WATCH THIS SPACE]]


[[Main Page]] |
[[Basic web design]] |
[[navigation table|Navigation]] |
[[Ranking]] |
[[support website|Support]] |
[http://www.asterix.co.za/ Asterix Home]


[[Category:Design‏‎]]
[[Category:Lecture‏‎]]

Setting up a PHP project

2023-11-18T19:06:48Z

Prothumia: Created page with "See [https://netbeans.org/kb/docs/php/quickstart.html NetBeans IDE PHP Quick Start Tutorial] for more. == PHP Application == To start setting up a PHP project... Inside NetBeans, you'll see a, "Projects" tab... Inside this tab, right click and hit, "New Project..." Then on the frame that open up, select "PHP"... Then click on "PHP Application"... The other options you see here, such as PHP Application with Existing Sources would also interest you, but lets ke..."

See [https://netbeans.org/kb/docs/php/quickstart.html NetBeans IDE PHP Quick Start Tutorial] for more.

== PHP Application ==

To start setting up a PHP project...

Inside NetBeans, you'll see a, "Projects" tab...
Inside this tab, right click and hit, "New Project..."
Then on the frame that open up, select "PHP"...
Then click on "PHP Application"...

The other options you see here, such as [[PHP Application with Existing Sources]] would also interest you, but lets keep this simple for now ....one simple step at a time, where you and me stay on the same page

After clicking on "PHP Application", click on, "Next" to get to '''New PHP Project'''

== Name and Location ==

Each of you will fill in your own Project name in here, for example, [[fox|Fox.Asterix.co.za]]

=== Sources Folder ===

There's something filled in here that you probably do not want to fiddle with!- unless you really know what you're doing on a computer and that you have a clear vision of what data files you want stored where!

The nice thing about NetBeans is that once you've decided to put a project somewhere on your computer, it stays there! ....with all the bits and pieces that you'll want to add!- such as images and recordings and more web pages, etc etc

So, bottom line, rather don't fiddle with what, "Sources Folder" is set to!

=== PHP Version ===

Leave this set to, PHP 7.0. If and when I start to teach you [[PHP]], you need to be sure that I have set your [[subdomain]] server, on the Internet, to deliver PHP 7 to your web pages.

If I get this wrong on the server side, the [[PHP]] work you do might not work properly!

=== Default Encoding ===

[https://en.wikipedia.org/wiki/UTF-8 UTF-8] is fine. Don't change that. This is rocket-science stuff waiting for you to discover AFTER I have finished a year with you!

=== Put NetBeans metadata into a separate directory ===

Leave this as it is .....no tick here!

Just leave the metadata to do what it wants. This is more rocket-science waiting for later, after I've finished a year with you! You'll find this in the world I'm taking you into. If you see something, rather don't touch!- unless I tell you to!

Now let's click, "Next" and see what happens...

== Run Configuration ==

....needs to be very carefully set! There is a bit of work coming up for you here!- so do not rush through this!

=== Run As ===

Set this to, "Remote Web Site ([[FTP]], SFTP)"

Be sure to be sitting down and all strapped in! This is where you see the magic that replaces your need of something like [[FileZilla]]! This is where you are going to point your [[NetBeans]] PHP project to your own place on the Internet!

NOTE: Don't fuss about this being a, "PHP project"! PHP is backwards compatible with HTML!- so all I am doing here is making sure that if and when I start to teach you PHP, you don't need to make any changes to your NetBeans project!

=== Project URL ===

Set this to your own URL, for example, [http://fox.asterix.co.za/]

=== Remote Connection ===

You need to manage your remote ([[FTP]]) connections. This is where you set setup and test your remote connections, and then ensure you have the correct connection associated with your project

To ensure that you have the right [[FTP]] access codes connected to this PHP project, click on, "Manage" (on the line that says, "Remote Connection"). You'll have the, "Manage Remote Connections" panel in front of you.

==== Manage Remote Connections ====

This part is interesting and potential tricky, so do not rush and keep your wits about you!

* Be sure to have your [[FTP]] access codes on hand!- the FTP username and password that I gave you for [[FileZilla]]! You'll need that same information here!
* Once you have told your project that it runs as a remote website, you have to ensure that you have the right FTP access codes connected to this PHP project.

Click, "Add.." to get the, "Create New Connection" panel to pop up....

[[Fox]], I want to set the, "Connection Name" (in your case) to, "fox.asterix.co.za"

This is the same as your [[subdomain]] name and I'd like you to look at the style I am using here- all lower case and just the basic domain name without "http://" at the start or "/" at the end. It is not critical you follow this style of naming your [[FTP]] connections, but this is the way I want you to do for now!

Leave the, "Connection Type" set to, "FTP" and click OK

=== Getting your connection to work ===

Now you are in a place where you get to mess around with your [[FTP]] access codes, trying to do things like remember your username and password, and get a number of other settings right

* Hostname : Your [[subdomain]] name- for example, "fox.asterix.co.za"
* Username : The same [[FTP]] username I gave you for [[FileZilla]]
* Password : The same [[FTP]] password I gave you for [[FileZilla]]

Be sure to press the, "Test Connection" button to make sure your connection works!
If you connection does not work, that there is something wrong with your access codes.

NOTE : This is where you build up your collection of [[FTP]] connections, when you are working with more than one website. For example, this is where I will have a set of keys for each of you, so that I'll be able to access any of your websites, if-and-when I need.

WARNING : You must see, '''"Connection succeeded"''' when you test!

Now let's look at some of the other settings on this panel....

=== Timeout ===

I like to push this up from 30 seconds to 200 seconds! Sometimes out Internet is slow in South Africa and I am hosting your domains somewhere between California and Virginia! And don't forget we have an undersea Internet cable to South Africa that might not be working properly

=== Initial Directory ===

This is a tricky one to get right!. Let's leave this as just, "/" for now, and see if we need to come back to fix this later.

Now press, "OK" to get back to panel that is called, "New PHP Project"

== New PHP Project (continued) ==

Don't rush, there are still settings to look at here!

The first thing you must do is ensure that the, "Remote Connection:" is now pointed to the right place

=== Upload Directory ===

Remove whatever you see there, leave just the, "?" ...this is also a tricky setting, that we might need to come back to later

=== Upload Files ===

Think about this one! '''CAREFULLY!'''

I like to set, '''Upload Files:''' to, '''On Save''', but that's because I have more data than I know what to do with! '''On Save''' is telling my [[NetBeans]] that every time I hit Ctrl-S (or find and click the, "Save" button!), NetBeans will immediately synchronize whatever I am working on with my website on the Internet!

This is a very clean way of working, where your website that is live on the Internet, is keeping up with you ....every single step of the way!

'''.... OR ....'''

If you are trying to save a bit of data, then leave '''Upload Files:''' set to, '''On Run'''. This will tell [[NetBeans]] to only synchronize all your local work, with your website on the Internet, when you press,"Run"

This is not such a clean way of working. Sometimes this is confusing. It's almost like working the way you were before (with [[Notepad]] and [[FileZilla]]), where you first edit in one place, and then have to remember to upload all your work later

At least you have an option! If you have enough data, use the, '''On Save''' option

Besides, the files you are going to be working with are not all that big .....just a couple of kilobytes per HTMP page perhaps. Other big files, like images, you don't go changing them every day, do you now!?

Right, this is where it's safe to hit, "Finish" ....but, just for fun, let's see what pops up when we hit, "Next" instead!

== PHP Frameworks ==

Just all sorts of rocket-science stuff we don't need! So just hit, "Next" again....

== Composer ==

More stuff you don't need! Let's just hit, "Finish" like I said we could!

== All done! ==

If you did everything right, your very first [[HTML|PHP project for HTML]] is up!


[[Main Page]] |
[[Basic web design]] |
[[navigation table|Navigation]] |
[[Ranking]] |
[[support website|Support]] |
[http://www.asterix.co.za/ Asterix Home]


[[Category:Software]]

Software requirement

2023-11-18T19:05:49Z

Prothumia: Created page with "Welcome to your very first Cyber-Lecture on how to drive the Internet. Today I'll make sure you know what development software to download, as per my initial statement on this == I gave you options == In the very least, you need to have FileZilla loaded onto your computer. Then you can carry on building your website just like in class. But that is beginner's way of working, where you have learned the basics of what you need to do... * Fir..."

Welcome to your very first Cyber-Lecture on how to drive the Internet. Today I'll make sure you know what development software to download, as per [[My first words|my initial statement on this]]

== I gave you options ==

In the very least, you need to have [[FileZilla]] loaded onto your computer. Then you can carry on building your [[website]] just like in class. But that is beginner's way of working, where you have learned the basics of what you need to do...

* First write up simple [[HTML]] pages (in [[Notepad]])
* Then post those pages to your website (via [[FileZilla]])

If you haven't got the data you need to download better environments, then I will still support you, should you decide to stay in the world of using [[Notepad]] and [[FileZilla]] as your tools of the trade

=== Better options ===

For those of you who want to download better software, let's get started. Here you have two options...

* You can download the smaller program called [[Brackets]]. This program does not need [[Java]]. It's just an editor that's much better than [[Notepad]], but you still need [[FileZilla]] to do your [[FTP]] work, or
* You can download the [[NetBeans|NetBeans IDE]], for the fullest experience and highest productivity in the world of web development

[[NetBeans]] does not need [[FileZilla]], but [[NetBeans]] does need a [[Java|Java Development Kit]]

QUESTIONS?

[[Dragon]] : well, [[NetBeans]] sounds like the better option
[[Phoenix]] : It does make life much easier

It's a wonderful environment!

* It does [[HTML]]
* It does [[PHP]]
* It does [[JavaScript]]
* It does [[Java]]
* It does [https://en.wikipedia.org/wiki/C%2B%2B C++]

...and more!

The [[NetBeans]] package I will point you too is the one that starts out with [[HTML]] and [[PHP]]. The one I want is about 112 MB

But before we talk about [[NetBeans]] too much, we must got our [[Java]] loaded up!

== Download Java 8 ==

[[Phoenix]], I know you have all the code already, but [[Dragon]]? [[Fox]]?- [[Black]]? Do any of you have any Java installed?

[[Dragon]] : no
[[Black]] : Not yet. I just have [[Brackets]] at the moment

Well let's see if we can find the code and make a start. [[Phoenix]], I want to put an [[Easter egg|Easter Egg]] on this, but you're excluded from the competition! Let's see who can find the right installation code first!

[[Phoenix]] : Sure thing

I want you all to search for the latest [[Java|JDK 8]]. Just put that into your favorite search engine and see what you get, but don't install anything yet, not until we are all on the same page

HINT : I want to be on the [https://www.oracle.com/ Oracle.com] website. Oracle are the people who bought [https://en.wikipedia.org/wiki/Sun_Microsystems Sun MicroSystems] who invented [[Java]]

[[Dragon]] [https://www.oracle.com/java/technologies/javase-jdk8-downloads.html Java SE Development Kit 8 Downloads] this one?

Bingo! Well done! You win the [[Easter egg|Easter Egg]]! ...but because of distance learning, would you like me to eat if for you now or later?

=== Which Java version ===

Right! Next question! Looking at the page [[Dragon]] has found for us, which option are we going to download?

[[Phoenix]] : We have a bit of a problem, [[Dragon]] has just been hit with load shedding.
[[Phoenix]] : Apparently it isn't load shedding. A substation thing blew.

"A substation thing blew" .....high voltage transmissions systems are not designed to be switched on and off several times week. We are at risk of seeing more and more of this

"which option are we going to download?" ....depend on if you are using Apple!- or Windows!- and if you are using Windows, is that 32-bit Windows or 64-bit Windows?

And [[Black]], what operating system are you on

[[Black]] : Microsoft Windows. Windows 10 64-bit

So in your case, [[Black]], tell me which [[Java|JDK (Java Development Kit)]] YOU want to download

For you, it should be the "Windows x64" one
The one that says it's 210.92 MB
And called jdk-8u241-windows-x64.exe

Right?

[[Black]] : Correct

Well then, what are you waiting for! If you have enough data, click on the file and let's see what happens

=== You've be asked to login ===

Oracle is a huge resource. They do databases, IDE's of their own, virtualization platforms, Unis and linux. So setup and account with Oracle and look after your log in information with them! They really are a nice group of people, doing all sorts of great work

When you find Windows just can't keep up with you, let me know if you'd like to try [https://en.wikipedia.org/wiki/Solaris_(operating_system) Solaris]

[[Black]] : My internet is just a bit slow

NOTE : To find out your version of Windows, on My Computer (or This PC) > Right Click > Properties

[[Phoenix]], Oracle even holds MySQL!- that you and me started chatting about

Right, lets move on, while you think about getting your [[Java|JDK downloaded]]!

== Download NetBeans 8.2 ==

Okay [[Phoenix]], this time you're included. Let's see who can find the right page first! GO!

[[Phoenix]] : Isn't this the newer version?

I have reason to want version 8.2, but to answer your question, yes, there are newer versions

[[Phoenix]] : Scroll down

(You might've had the right one there, but I'd rather be on the proper website for this)

* [https://netbeans.org/downloads/old/8.2/ NetBeans 8.2] on NetBweans.org

USE ONLY THIS PAGE, to download the bundle of NetBeans 8.2 that I want you to have on your computer. But once again, before you download anything, be sure to select the correct bundle

[[Phoenix]] : HTML5/JavaScript or All

I want the PHP bundle!- and in this case you'll see that the HTML5/JavaScript and PHP bundles are the same thing. You'll see the PHP bundle is up to 112 MB, while the All bundle is 221 MB

=== The, "All" bundle ===

The "All" bundle is a bit bigger, but it includes everything! We are hoping to do a bit of Java programming, at some point towards the end of the year. I don't want to do tonnes of Java coding, but I would like to give everyone a taste of what Java's all about

So you decide which one to download. I'd say go for the smaller one, the "PHP bundle", and then only when we need more, we can simply tell our [[NetBeans]] to download and add-in the extra functions that we want

[[Phoenix]] : Does the PHP bundle have what we need for now?

Yes! that's a very good point actually! Thank you, [[Phoenix]], for your offer to assist our students to get everything running

[[Phoenix]] : Just don't want anyone to make mistake at the start and then find them later.

True. I am always a little nervous about installing programs onto computers, but these programs shouldn't give you any trouble. They have both been around a long time

QUESTION: Have you read everything that I posted at the top of this Chat Group? Be sure to confirm with me that you have!

[[Phoenix]] : Yup
[[Black]] : Yes

=== Installing NetBeans ===

Once you've installed [[Java|JDK 8]], you need to install [[NetBeans]]. Both are painless installs, but I am here just in case you find you have any issues

Progress anyone?

[[Phoenix]] : You know mine is already installed
[[Phoenix]] : How far are you guys

There is quite a bit of work involved, to setup your very first, "PHP Project" in NetBeans, so as soon as you have your [[NetBeans]] up and running let's make a start on that

[[Phoenix]] : If I remember correctly it can take sometime for it to install.

Yes. Be careful to allow the installation program to do everything that it has to. Do not rush.

=== PHP Project ===

Once you have [[NetBeans]] running, there's a number of steps to work through to get your first PHP project up.

Remember that I've told you that [[PHP]] is backwards compatible with [[HTML]]! That means that even though I want you to develop a PHP project, we are STILL only going to develop HTML pages. This will help us later in the year, when I introduce you to a bit of [[PHP]]

[[Phoenix]] : Would you mind looking at my code, it is not making sense.

Let me see the code first. I think I'll want to work on this with you separably, after this lecture. Will that be okay.

[[Dragon]] : my power just came back on

Hi [[Dragon]]! Great! ...read and catch up!

[[Dragon]] : hi! alright will do

And, yes, as soon as everyone is talking to me here, we need to put quite a bit of effort into working with tables

Discussion on [[main page table]]

But tell you what- I still want to see the borders for a number of weeks, until all our students catch up, but what you can do for me is this...

Discussion on [[hidden page]]

Regarding your rolling cubes, It's good stuff!- with some [[CSS]] to whet everyone's appetites!

[[Phoenix]] : It is 90% [[CSS]] to turn the blocks into links I may need to use some [[JavaScript]]

=== Shft-Alt-F ===

Go onto a [[HTML]] page you are working on and make a number of alignment errors in the code, and then use Ctrl-Alt-F on your code, and tell me what you see. Shft-Alt-F tells [[NetBeans]] to reformat your entire HTML page!

...to the rules that you control in Tools > Options > Editor > Formatting

This is where you put your style into how you want your code to look!

== Websites ==

I've been looking at everyone's websites! Where are your logos!

[[Phoenix]] : I have done a rough of my logo for my website, would you mind having a look at it

Your website looks stunning, but I'm not sure where the logo is. The table is supposed to have a top row with the logo in it. And the top row is supposed to span all three columns

I want to get to the point that everything is inside the table. Some students don't have a, [[Contact Us]] page working yet!

== Closing ==

Right, students of [[web development]]- just THREE minutes to go the the end of our very first [[lecture|Cyber-Lecture]]! Did you have fun!?

Done! Can I go now? ...and don't forget!- I'm right here on [[Skype]]

== Notes ==

* For first term, everything on your [[web page]]s had to be in a [[main page table]]
* For second term, I am going to show you how to use [[float]]s instead!


[[Main Page]] |
[[Basic web design]] |
[[navigation table|Navigation]] |
[[Ranking]] |
[[support website|Support]] |
[http://www.asterix.co.za/ Asterix Home]


[[Category:Design]]
[[Category:Lecture]]

Introduction to CSS

2023-11-18T19:04:44Z

Prothumia: Created page with "Here is an introduction to Cascading Style Sheets (CSS) into our coding of HTML pages! '''Case study''' [http://red.asterix.co.za/original/ Red.Asterix.co.za/original] is a simple, single-paged website that I have put up for you. This is quite an old web page- from 2008!- so let's see if it still works Hit '''Ctrl-'+'''' if you need, just to get a bit closer to what I'm about to tell you. And spend some time playing with this page. Click here, cli..."

Here is an introduction to [[CSS|Cascading Style Sheets (CSS)]] into our coding of [[HTML|HTML pages]]!

'''Case study'''

[http://red.asterix.co.za/original/ Red.Asterix.co.za/original] is a simple, single-paged website that I have put up for you. This is quite an old web page- from 2008!- so let's see if it still works

Hit '''Ctrl-'+'''' if you need, just to get a bit closer to what I'm about to tell you.
And spend some time playing with this page. Click here, click there, click everywhere!

Take your browser out of maximise and change the width of your browser to see how my web page behaves.
You'll see my motorbike on the right hand side knows how to stay in the right place

== Testing of web pages ==

Clicking on my images in Firefox works well- showing you a bigger image (which is what I wanted!), but, alas, Chrome thinks I want to download the images when I click on them! This is why I test your web pages in multiply browsers.

The marks I'll award you will be based on the browser that gives me the worst result for your work! For example, if I was making the persona who wrote this page, Peter Zulu 8E, I'd mark him according to what Chrome is showing me!- viz: That the thumbnails are not launching a bigger image for the website visitor to see.

To be reasonable, I'll only test your work on Firefox, Chrome and Edge

== View page source ==

Once you've got to know my web page, hit '''Ctrl-U''' on my web page to view my source code.

...or, if you'd rather do this the long way around, feel free to use your mouse to first right-click on my web page ...and then slowly move your pointer to the bit that says, "View page source" ...and click!

(All this is the same on both Firefox and Chrome- at least on the computer I'm using now)

Yes, [[Dragon]], it really does look neat! You are going to [[CSS|love CSS]]!

== Style! ==

[[Phoenix]] : Are you calling a css file into the code or doing the css code in the html file?

This is a good question!- we'll work on both of these options over the next couple of weeks

When you see a tag that you do not know, ask! There are clues here, as to what comes next. Use [https://www.w3schools.com/ W3Schools] to read up on these tags and others you might see. Here, look...

=== [https://www.w3schools.com/tags/tag_link.asp link tag] ===

It's this <link> tag that is pointing to my [[CSS|CSS file]], that you are unable to see on my web server. The only thing you can see is the [[HTML]] that makes up my [[home|index.html]] web page.

When you want to see my [[CSS|CSS file]], I will have to give it to you! ...but first.....

Do you see my <link> tag, that I have in the <head> of this web page? Here is a reformatted version of this line, to emphasise what I want you to see......

<pre>
<link
rel = "stylesheet"
href = "rearViewMirror.css"
type = "text/css"
/>
</pre>

This is how you tell your HTML page to make use of a style sheet that is stored somewhere on your web server. Look at the bit that says '''href''' and you will see the name of the [[CSS|CSS file]] that [http://red.asterix.co.za/original/ this web page] makes use of

Now before we look into [[CSS]], I want you to get a copy of this web page running on your very own computer!

== Local copy of this web page ==

I want you to look at my page source and do the following

* Hit '''Ctrl-A''' which will select all the text on my web page
* Hit '''Ctrl-C''' which will copy what you have just selected onto your clipboard
* Use Notepad to open a file called '''mirror.html''' on your desktop (or some place you're not going to lose later)
* Hit '''Ctrl-V''' which will paste what's on your clipboard into [[Notepad]]
* Tell Notepad to save this file
* Close Notepad

And keep fingers crossed that you've remembered what I've said about turning, "Hide extensions of known file types" off. Be careful to not end up with a file named '''mirror.html.txt'''

Now you can tell your current Internet browser to open your local copy of '''mirror.html'''

QUESTION : What do you see?

Yes, [[Phoenix]]! ...no style!

==== Mirror folder ====

You are about to end up with a number of files. It would be best for you to open a folder called "Mirror" (let's all use a folder called "Mirror", to help me see what you have on your computer later!)

Place your '''mirror.html''' into your Mirror folder

=== And what else is missing ===

Before anyone asks for a copy of my style sheet, we want to get our images to work!

QUESTION : What do you see? I would like to know.

[[Dragon]] : ''"the same thing just more stripped down and no pictures"''

Good! That is exactly what I want you to see! It means that you only have '''mirror.html''' in your Mirror folder. Now go back to [http://red.asterix.co.za/original/ my website] and fetch the missing images, to put into your Mirror folder!- right next to '''mirror.html'''

Look at the code to see lines like this one...

<pre>
<a href="batoutofhell.bmp">
<img class="RightThumb" src="bat1icon.jpg" alt="Bat Out Of Hell" />
</a>
</pre>

This tells you that there are two images that you need...

* The smaller one is '''bat1icon.jpg''' that I use as a thumbnail
* The bigger one is '''batoutofhell.bmp''' that I use as my full size image

Get all of of the images that are used into your "Mirror" folder!- and be sure to not change any filenames! Some of them are lo-res for thumbnails, some are a bit bigger for when a visitor wants to see a larger version of the image

Now tell your Internet browser to refresh your page with your local copy of '''mirror.html''' and tell me what you see!

[[Dragon]] : pictures!

GOOD! You know how to get images downloaded and put into the correct location! Well done! I think you deserve an [[easter egg|Easter Egg]] for this!

So, [[Dragon]]! What you see is images, but the style is still missing! Right!?

[[Dragon]] : yes theres no style

Yes! [[student|Everyone]], I want you to focus on some tags in my code, before I start to tell you about [[CSS]]

== Setting the style ==

=== Use of [https://www.w3schools.com/tags/tag_span.asp span tag] ===

Look for this line....

<pre>
The skies were pure
</pre>

Here I am using a tag. You will also see that I have not told what to do! In fact, right now (without [[CSS]]!), is doing nothing. All I have done here, is put a into my code, that I can use later in CSS!

Look to see that I have used in a number of places in my code...

=== Use of [https://www.w3schools.com/tags/tag_div.asp div tag] ===

There is something else I want you to notice in my code- my use of well placed <div> tags

I have well placed, '''divisions''' in my HTML code!

Be sure to see this, before we move on! Let's put the start of one division here, for us to talk about..

<pre>
<div>The skies were pure and the fields were green ..... </div>
</pre>

Right, we'll talk about [[tags|these tags]] again a bit later

== Now it gets interesting ==

Think about these questions...

# How do we make what is inside my '''span tags''' turn into capitals?
# How do we make what is inside my '''span tags''' turn blue?
# How do we make the very first letter of what I have in my '''div tag''' do a number of things?
## it turns red!
## it drops a line!
## it is now italic!
# How do we make everything in my '''div''' tag turn yellow! (except for what is inside my '''span tag''')
# Why is some of my text in red? (...not just the first letter of my '''div tags''')
# How did we make the background turn black?
# How did some text become centered?

It's easy! I use a cascading style sheet!- to tell '''div''' and '''span''' and other tags to do what I want them to!

== Who is ready to see my style sheet? ==

[[Phoenix]] : Ready
[[Dragon]] : ready

GREAT! ...and are you looking forward to this!?

[[Dragon]] : somewhat ...said with a big smile!

This stuff is brilliant! ...'''<big>Here is <big>[[RearViewMirror.css|my style sheet]]</big></big>'''

Open this style sheet in [[Notepad]] and READ the file! Try see answers to the questions that I have just asked you!

Also note that the filename of my style sheet is exactly correct! It is a perfect match...

* letter-for-letter
* case-for-case

...to the filename that my <link> tag is asking for

Once you have this CSS file sitting right next to your '''mirror.html''', hit refresh (F5) and tell me what you see!

[[Dragon]] : it works!

Yes! The style simply flows in!

== Deprecated tags ==

=== [https://www.w3schools.com/tags/tag_font.asp font tag] ===

Be sure to know which tags are deprecated or no longer supported! If you use tags that are deprecated and/or no longer supported, I will mark you down ...let's use a word like... badly! Let me say that again: Do not use tags that are deprecated and/or no longer supported on any web pages that you build for me.

In other words, if the persona Peter Zulu 8E was in my Web Development class this year, I'd fail [his web page], for two reasons...

* It works on Firefox, but it does not work properly on Chrome!
* It still has tags!

The fact that my web page has declared itself to be [[HTML|HTML 4.0]] is no excuse!- as per the line right at the top of my web page. Here, look...

<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
</pre>

I might be lenient in the use of deprecated tags, but I certifiably will not allow any tags flagged as, "not supported" on any web pages you work on for me- even if that is in regard to [[HTML|HTML 5]].

Now that I have pointed you to the [https://www.w3schools.com/tags/tag_doctype.asp HTML <!DOCTYPE> declaration], I am placing a mark onto your usage of this tag!- onto ever web page you have on your website.

== Closing ==

Now my lecture is done. You have now been dropped into the shallow end of the pool, regarding [[CSS|cascading style sheets]]! I have given you the start that you need!

Now what I want you to do is play with the code

* Change the colours
* Change the fonts

Get to know how [[CSS]] looks and how it connects. And, yes, there is stuff for me to explain to you!- like why do some things you see start with a ',' (a dot)

We'll work through details like this in my next lecture

=== Next steps ===

Somebody ask me if you can now add some CSS to your website

[[Phoenix]] : Can I please
[[Munki]] : Please

You new goal is make your websites look [http://red.asterix.co.za/ just like this], except for the wording that you will have on your own website. Start by writing something about yourself into the [[center]] of your [portfolio|[portfolio.html]] pages (such as [http://phoenix.asterix.co.za/portfolio.html this one for Phoinix])

This is to show me that you know how to get [[CSS]] started on your [[web page]]s. Once you have shown me this and you have all your web pages in place, all on the same [[CSS|CSS file]], I will allow you to change what you have in your CSS files- to set your individual styling on your [[website]]s

== Notes ==

* Be sure to note how neat my CSS file is! Keep it this way, or lose marks when I look at your [[CSS]]
* For more, go to the [https://www.w3schools.com/css/ CSS Tutorial] on W3Schools


[[Main Page]] |
[[Basic web design]] |
[[navigation table|Navigation]] |
[[Ranking]] |
[[support website|Support]] |
[http://www.asterix.co.za/ Asterix Home]


[[Category:Design]]
[[Category:Lecture]]

Support website

2023-11-18T19:01:41Z

Prothumia: Created page with "There are a number of resources we would like to add to your subdomain. For example.. == Your basic websites == Besides your root website, you should have at least the following additional websites on your subdomain... * /build * /demo * /library * /original * /top20 * /top20/images * /XXXXXX See website for more You are supposed to already have at l..."

There are a number of resources [[Cyber|we]] would like to add to your [[subdomain]]. For example..

== Your basic websites ==

Besides your root [[website]], you should have at least the following additional websites on your [[subdomain]]...

* [[build|/build]]
* [[demo|/demo]]
* [[library|/library]]
* [[original|/original]]
* [[Top 20|/top20]]
* [[Top 20|/top20/images]]
* [[archive|/XXXXXX]]

See [[website]] for more

[[student|You]] are supposed to already have at least eight websites under your control If this is not the case, then I can see that you are falling behind and most probably not even connected to your root [[website]]. If [[student|you]] do not have these [[website]]s under your control yet, [[student|you]] should [[Skype|talk to me]] as soon as possible

'''HOWEVER :''' Please read what I have said about an option if you [[Main Page#An option for no software.21|are not connected]] to your website

== Your advanced resources ==

* [[Available websites]]
* [[Archive|Cloud storage]]
* [[Free online storage|Online storage]]
* [[Web application]]s

Should [[student|you]] be interested, contact me on [[Skype]]

== Notes ==

Once you are connected to your root [[website]], getting all this to work is easy

* HINT : If [[student|you]] know how to create a folder on your computer and put files into it, then you already know now to create a [[website|new website]] on the Internet


[[Main Page]] |
[[Basic web design]] |
[[navigation table|Navigation]] |
[[Ranking]] |
[[support website|Support]] |
[http://www.asterix.co.za/ Asterix Home]


[[Category:Advanced]]
[[Category:Design]]

Ranking

2023-11-18T19:00:52Z

Prothumia: Created page with "Currently, this table has value as a set of links to the areas of your website that I want you to work on. Also, there are example websites here that use the same coding techniques that you are being taught. Look at the code on the web pages that you see and learn how to make your own web pages better {| class="wikitable" ! colspan="3" style="text-align: center;" | All pages ! style="text-align: center;" | Asterix ! style="text-align: cen..."

Currently, this table has value as a set of links to the areas of your [[website]] that I want you to work on. Also, there are example [[website]]s here that use the same coding techniques that you are being taught. Look at the code on the [[web page]]s that you see and learn how to make your own [[web page]]s better

{| class="wikitable"
! colspan="3" style="text-align: center;" | [[All pages]]
! style="text-align: center;" | [[Cyber|Asterix]]
! style="text-align: center;" | [[Cyber|Red]]
! style="text-align: center;" | [[Cyber|Green]]
! style="text-align: center;" | [[Cyber|Asterix /build]]
! style="text-align: center;" | [[Cyber|Red /build]]
! style="text-align: center;" | [[Cyber|Green /build]]
|-
| style="text-align: center;" | 1
| [[Home]]
| style="text-align: center;" | 5
| style="text-align: center;" | [http://www.asterix.co.za 1]
| style="text-align: center;" | [http://red.asterix.co.za 1]
| style="text-align: center;" | [http://green.asterix.co.za 2]
| style="text-align: center;" | [http://www.asterix.co.za/build/ 3]
| style="text-align: center;" | [http://red.asterix.co.za/build/ 4]
| style="text-align: center;" | [http://green.asterix.co.za/build/ 2]
|-
| style="text-align: center;" | 2
| [[Portfolio]]
| style="text-align: center;" | 5
| style="text-align: center;" | [http://www.asterix.co.za/portfolio.html 2]
| style="text-align: center;" | [http://red.asterix.co.za/portfolio.html 1]
| style="text-align: center;" | [http://green.asterix.co.za/portfolio.html 2]
| style="text-align: center;" | [http://www.asterix.co.za/build/portfolio.html 3]
| style="text-align: center;" | [http://red.asterix.co.za/build/portfolio.html 4]
| style="text-align: center;" | [http://green.asterix.co.za/build/portfolio.html 2]
|-
| style="text-align: center;" | 3
| [[Brief]]
| style="text-align: center;" | 5
| style="text-align: center;" | [http://www.asterix.co.za/brief.html 1]
| style="text-align: center;" |
| style="text-align: center;" | [http://green.asterix.co.za/brief.html 2]
| style="text-align: center;" | [http://www.asterix.co.za/build/brief.html 3]
| style="text-align: center;" | [http://red.asterix.co.za/build/brief.html 4]
| style="text-align: center;" | [http://green.asterix.co.za/build/brief.html 2]
|-
| style="text-align: center;" | 4
| [[About Us]]
| style="text-align: center;" | 5
| style="text-align: center;" | [http://www.asterix.co.za/about.html 1]
| style="text-align: center;" | [http://red.asterix.co.za/about.html 1]
| style="text-align: center;" | [http://green.asterix.co.za/about.html 2]
| style="text-align: center;" | [http://www.asterix.co.za/build/about.html 3]
| style="text-align: center;" | [http://red.asterix.co.za/build/about.html 4]
| style="text-align: center;" | [http://green.asterix.co.za/build/about.html 2]
|-
| style="text-align: center;" | 5
| [[Contact Us]]
| style="text-align: center;" | 5
| style="text-align: center;" | [http://www.asterix.co.za/contact.html 1]
| style="text-align: center;" |
| style="text-align: center;" | [http://green.asterix.co.za/contact.html 2]
| style="text-align: center;" | [http://www.asterix.co.za/build/contact.html 3]
| style="text-align: center;" | [http://red.asterix.co.za/build/contact.html 4]
| style="text-align: center;" | [http://green.asterix.co.za/build/contact.html 2]
|-
| style="text-align: center;" | 6
| [[build|/build]]
| style="text-align: center;" | 3
| style="text-align: center;" | [http://www.asterix.co.za/build/ 3]
| style="text-align: center;" | [http://red.asterix.co.za/build/ 3]
| style="text-align: center;" | [http://green.asterix.co.za/build/ 2]
| style="text-align: center;" |
| style="text-align: center;" |
| style="text-align: center;" |
|-
| style="text-align: center;" | 7
| [[library|/library]]
| style="text-align: center;" | 3
| style="text-align: center;" | [http://www.asterix.co.za/library/ 3]
| style="text-align: center;" | [http://red.asterix.co.za/library/ 3]
| style="text-align: center;" | [http://green.asterix.co.za/library/ 3]
| style="text-align: center;" |
| style="text-align: center;" |
| style="text-align: center;" |
|-
| style="text-align: center;" | 8
| [[original|/original]]
| style="text-align: center;" | 3
| style="text-align: center;" | [http://www.asterix.co.za/original/ 1]
| style="text-align: center;" | [http://red.asterix.co.za/original/ 2]
| style="text-align: center;" | [http://green.asterix.co.za/original/ 2]
| style="text-align: center;" |
| style="text-align: center;" |
| style="text-align: center;" |
|-
| style="text-align: center;" | 9
| [[top 20|/top20]]
| style="text-align: center;" | 7
| style="text-align: center;" | [http://www.asterix.co.za/top20/ 3]
| style="text-align: center;" | [http://red.asterix.co.za/top20/ 2]
| style="text-align: center;" | [http://green.asterix.co.za/top20/ 4]
| style="text-align: center;" |
| style="text-align: center;" |
| style="text-align: center;" |
|-
| style="text-align: center;" | 10
| [[Logo]]
| style="text-align: center;" | 2
| style="text-align: center;" | 0
| style="text-align: center;" | 0
| style="text-align: center;" | 1
| style="text-align: center;" | 1
| style="text-align: center;" | 2
| style="text-align: center;" | 1
|-
| style="text-align: center;" | 11
| [[Navigation table|Navigation]]
| style="text-align: center;" | 4
| style="text-align: center;" | 2
| style="text-align: center;" | 1
| style="text-align: center;" | 3
| style="text-align: center;" | 3
| style="text-align: center;" | 4
| style="text-align: center;" | 3
|-
| style="text-align: center;" | 12
| [[Navigation buttons|Buttons]]
| style="text-align: center;" | 2
| style="text-align: center;" | [http://www.asterix.co.za/portfolio-buttons.html 1]
| style="text-align: center;" | 0
| style="text-align: center;" | 0
| style="text-align: center;" | 0
| style="text-align: center;" | 0
| style="text-align: center;" | 0
|-
| style="text-align: center;" | 13
| [[Footer]]
| style="text-align: center;" | 4
| style="text-align: center;" | 0
| style="text-align: center;" | 1
| style="text-align: center;" | 0
| style="text-align: center;" | 3
| style="text-align: center;" | 4
| style="text-align: center;" | 0
|-
| style="text-align: center;" | 14
| [[Image]]
| style="text-align: center;" | 2
| style="text-align: center;" | 1
| style="text-align: center;" | 2
| style="text-align: center;" | 1
| style="text-align: center;" | 0
| style="text-align: center;" | 2
| style="text-align: center;" | 1
|-
| style="text-align: center;" | 15
| [[Tags|HTML tags]]
| style="text-align: center;" | 3
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
|-
| style="text-align: center;" | 16
| [[Comments|HTML comments]]
| style="text-align: center;" | 3
| style="text-align: center;" | 1
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
|-
| style="text-align: center;" | 17
| [[Formatting|HTML formatting]]
| style="text-align: center;" | 3
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
|-
| style="text-align: center;" | 18
| [[CSS|CSS rules]]
| style="text-align: center;" | 3
| style="text-align: center;" | 1
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
|-
| style="text-align: center;" | 19
| [[Comments|CSS comments]]
| style="text-align: center;" | 3
| style="text-align: center;" | 2
| style="text-align: center;" | 1
| style="text-align: center;" | 0
| style="text-align: center;" | 2
| style="text-align: center;" | 1
| style="text-align: center;" | 0
|-
| style="text-align: center;" | 20
| [[Formatting|CCS formatting]]
| style="text-align: center;" | 3
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
|-
| style="text-align: center;" | 21
| [[filename|File and folder names]]
| style="text-align: center;" | 2
| style="text-align: center;" | 1
| style="text-align: center;" | 1
| style="text-align: center;" | 1
| style="text-align: center;" | 1
| style="text-align: center;" | 1
| style="text-align: center;" | 1
|-
| style="text-align: center;" | 22
| [[center|Content]]
| style="text-align: center;" | 3
| style="text-align: center;" | 1
| style="text-align: center;" | 0
| style="text-align: center;" | 1
| style="text-align: center;" | 2
| style="text-align: center;" | 3
| style="text-align: center;" | 2
|-
| style="text-align: center;" | 23
| [[Collaboration]]
| style="text-align: center;" | 3
| style="text-align: center;" | 0
| style="text-align: center;" | 0
| style="text-align: center;" | 0
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 0
|-
| style="text-align: center;" | 24
| [[Multimedia]]
| style="text-align: center;" | 3
| style="text-align: center;" | 0
| style="text-align: center;" | 0
| style="text-align: center;" | 0
| style="text-align: center;" | 0
| style="text-align: center;" | 2
| style="text-align: center;" | 1
|-
| style="text-align: center;" | 25
| [[Archive]]
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 2
| style="text-align: center;" | 0
| style="text-align: center;" | 0
| style="text-align: center;" | 0
|-
| style="text-align: center;" | 26
| [[Archive|Cloud storage]]
| style="text-align: center;" | 2
| style="text-align: center;" | 1
| style="text-align: center;" | 1
| style="text-align: center;" | 1
| style="text-align: center;" | 0
| style="text-align: center;" | 0
| style="text-align: center;" | 0
|-
| style="text-align: center;" | 27
| [[available websites|Domains]]
| style="text-align: center;" | 1
| style="text-align: center;" | 1
| style="text-align: center;" | 0
| style="text-align: center;" | 0
| style="text-align: center;" | 0
| style="text-align: center;" | 0
| style="text-align: center;" | 0
|-
| style="text-align: center;" | 28
| [[NetBeans]]
| style="text-align: center;" | 3
| style="text-align: center;" | 3
| style="text-align: center;" | 3
| style="text-align: center;" | 3
| style="text-align: center;" | 3
| style="text-align: center;" | 3
| style="text-align: center;" | 3
|-
| style="text-align: center;" | 29
| [[Events]]
| style="text-align: center;" | 9
| style="text-align: center;" | 4
| style="text-align: center;" | 4
| style="text-align: center;" | 3
| style="text-align: center;" | 4
| style="text-align: center;" | 4
| style="text-align: center;" | 3
|-
| style="text-align: center;" | 30
| [[Skype]]
| style="text-align: center;" | 9
| style="text-align: center;" | 3
| style="text-align: center;" | 3
| style="text-align: center;" | 3
| style="text-align: center;" | 3
| style="text-align: center;" | 3
| style="text-align: center;" | 3
|-
| style="text-align: center;" | 31
| [[wiki]]
| style="text-align: center;" | 4
| style="text-align: center;" | 1
| style="text-align: center;" | 1
| style="text-align: center;" | 2
| style="text-align: center;" | 3
| style="text-align: center;" | 4
| style="text-align: center;" | 2
|-
| style="text-align: center;" | 32
| [[Mail]]
| style="text-align: center;" | 2
| style="text-align: center;" | 1
| style="text-align: center;" | 1
| style="text-align: center;" | 1
| style="text-align: center;" | 1
| style="text-align: center;" | 1
| style="text-align: center;" | 1
|-
| style="text-align: center;" | 33
| [[Other]]
| style="text-align: center;" | 2
| style="text-align: center;" | 1
| style="text-align: center;" | 1
| style="text-align: center;" | 1
| style="text-align: center;" | 1
| style="text-align: center;" | 1
| style="text-align: center;" | 1
|-
| style="text-align: center;" |
| [[ranking|Total]]
| style="text-align: center;" | 100
| style="text-align: center;" | 49
| style="text-align: center;" | 45
| style="text-align: center;" | 54
| style="text-align: center;" | 54
| style="text-align: center;" | 67
| style="text-align: center;" | 42
|}

== Notes ==

* What you see here in an indication of [https://en.wikipedia.org/wiki/Performance_indicator key performance areas] in our current levels of [[web development]]
* I'll mark these [[website]]s as we progress through the year, so that [[student|you'll]] have a benchmark to compare your own [[website]] to
* There are a few bonus marks available


[[Main Page]] |
[[Basic web design]] |
[[navigation table|Navigation]] |
[[Ranking]] |
[[support website|Support]] |
[http://www.asterix.co.za/ Asterix Home]


[[Category:Design]]
[[Category:Participation]]

Main Page

2023-11-18T19:00:17Z

Prothumia:

What I am trying to show you here is how your [[website]] might be graded in terms of technical content and quality. Please do not forget that the only real marks that count towards your success, is the marking of each of your final submissions of the briefs that you have to work on throughout the year.

Also note that that marking is according to the standards that you are aware of, in the marking of any of your briefs for any of your modules.

I have said many times, that the ranking you see here is simply to help you build your [[web development]] skills that will, in turn, help you with your briefs that you need to work on.

== Let's start here ==

* [[Ranking]]
* [[Support website|Support]]

== Software required ==

* The best option for this [[web development]] course, if you have data, is [[Java]] and [[NetBeans]]
* To save data when you get started, you could use [[Brackets]] and [[FileZilla]]
* To use even less data, you could stay on [[Notepad]], but you will still need [[FileZilla]]

=== An option for no software! ===

If [[student|you]] are struggling to get access to the Internet, for whatever reason, there is still plenty of hope for you

# I have offered a number of times to load your website files onto your [[website]] for you. All you need to do is [[Skype]] your files to me
# If you continue to find it difficult to connect to your [[website]], then simply let me work with your website files on my own computer!

In an effort to help you as much as possible, now that we are in second term already, let us look at what is important!

* It is important to work on your [[HTML]] skills
* It is important to work on your [[CSS]] skills
* It is important to connect your [[image]]s to your [[web page]]s

At this stage, it is becoming less important to get you connected to your [[website]]. We can get back to this later, when you are ready

== Other platforms ==

=== Google classroom ===

We are using [https://edu.google.com Google's education products] as an additional resource

Google says, ''"Working to support education through our products, programs, and philanthropy"''

Login to your Google account and use the Google Classroom access code you have been given

=== New platforms? ===

To further assist in your distance learning, there are other options that you might find in your future. To work with remote clients, need to be ready to find new ways of working

[[WATCH THIS SPACE]]

== Link ==

* [[Lecture]]s
* [[getting started|Getting started with wiki]]
* [https://www.w3schools.com/ W3Schools]
* [https://netbeans.org/kb/docs/webclient/html5-gettingstarted.html NetBeans HTML5 Applications]

== Notes ==

* Everything you need to succeed with your web development course is on your lectures on [[Skype]]
* This wiki is an attempt to make that we have said in lectures more easily available to [[student|you]] and in a form that supports the [[website]]s that you are trying to build
* Anything that is in this wiki that you have not seen in lectures on [[Skype]] is purely additional information to assist you


[[Main Page]] |
[[Basic web design]] |
[[navigation table|Navigation]] |
[[Ranking]] |
[[support website|Support]] |
[http://www.asterix.co.za/ Asterix Home]


[[Category:Help]]