Transcript File - Mr Mc Garry`s Website

Weebly and ECDL Software
Introduction Links
Click the DVD on the weebly home page.
Click X to get out of pop up screens first.
 https://www.youtube.com/watch?v=mM9
uhe27YbA#t=23


Beginners Guide

The basics about the internet
Web Design Course
This course is intended to give you an introduction into web
design so that you can build upon this knowledge using the
Internet into your futures.
Websites and Apps are how products and services are being
bought and sold more and more nowadays.
It cuts down your costs when you sell directly to customers
online 24/7.
Setting up your own business and web presence is essential in
the dynamic world Students are facing today and is a great life
skill to be able to make money for yourself. Plus, if you loose
your job, can’t find a job, want to impress your manager and
improve his or her business model, want to promote anything
or simply want to work in the area of business and computers
this is for you.
The Aim of this course






I’m a teacher but I’m not a web designer nor a web
programmer who do this full time but I’ve taken this
on, as I believe it will be very useful for my students
and I think you’ll enjoy it once you put the extra
effort in online furthering your own skills to your
mixed level of abilities.
To be able to build your own first webpage.
To learn about basic web design programming.
To be introduced to App development languages
Your Project for the Year:
To further your research online and to build the best
possible website or App to your ability.
Units 1-5






Overview and Software options
Hyperlinks will take you to the Unit you want by
double clicking when in slide show view.
Unit One: Introduction and set up. Slide 8
Unit 2: HTML Programming NotePad Slide 17
Unit 3: Unit 4: Graphics and Images 30
Unit 4: The Law and Security 33
The Internet means
The physical structure (servers, routers,
cables, fibre optics and satellite
connections.
 A global network of networks that allows
people, business and communities to
communicate with each other.

Software used for web
designing.
Weebly is free for schools to use.
 Scoilnet blogs is free for schools to use
 Dreamweaver easiest to use and
expensive
 Frontpage is arguably one of the best but
difficult to use.
 Coffee Cup and Square Space is cheapest.
(30 day free trial)
 Microsoft freeware/shareware can be

Different Devices use different
types of coding for programming.
Unit 1 of ECDL Webstarter
Introduction
 Uploading Web Pages
 Advantages of Web Publishing
 Registering web space
 Unit One Quiz

-Web Concepts
TCP/IP – stands for transmission control
protocol/ internet protocol and is the method
computers use to communicate on the internet.
E.g www or ftp or email or chatrooms
 FTP- File Transfer Protocol – language that helps
you upload and download files from the internet
hosting company/ E.g Using File Zila to upload
to Hosting365(Hosts Irish.ie web names)
 Hyperlinks clicks on them and they bring you
other locations on the website.
 Webserver a type of server dedicated to storing
web based files

Web Concepts




Web page is a page that can contain a mix of
text, images, sound and video. A number of
webpages and the home(index page) together
make a website. Browser E.g Internet explorer.
HTTP/S: language that enables communication
on the www and S adds higher security
URL: Uniform Resource Locater: Full web
address in other words.
HTML: Hypertext Mark Up Language – codes
and programming language behind the web.
Plain text but need software. E.g the Java
programming language
Todays Plan Outcomes
Type letter of permission to principal to get
started.
 Type a letter to parents for 10 euro funding
each to become shareholder
 Do up plan and timetable for class by class
market research
 Griffin do up timetable and location for sales
time at lunch time
 Most will pay a euro on average
 Want quotes
 1-3 most common will buy

Copy codes from websites
Click tools on a website and view source.
 Word wrap and consider width of the
browser or you’ll find your texts won’t fit on
to your webpage properly so plan ahead.
Wix.com
 Free Web Design
 W3schools.com
 Shirenet.net
 Can copy and edit tags, tables and pages
etc

STEP ONE before you create a
new website
Check to see if your website name has
been already taken by clicking on a
domain registration website such as;
 www.register365.ie or www.weebly.com
 This website also gives you an option to
pay for hosting. E.g about 180 per year
annual service fee. However, there are
free hosting companies available too. With
some you may have to insert their address
or advertise a banner for them.

Free Hosting Companies
E.g www.eircom.net
 www.angelfire.com
 www.madasafish.com
 www.geocities.com
 www.tripod.co.uk
 www.biz.nf, www.000webhost.com
 www.myownfreehost.net
 When uploading web pages you need a space
on a hosting company e.g Eircom then an FTP
e.g File Zila to upload and edit pages.

Step Two

Create your webpages maybe starting with a
template from web software such as coffee cup. Or
for a more basic website and to get used to writing
code use notepad, with a browser(internet explorer)
and next step is to save you’re work to a yellow
folder on your own P.C before uploading.

When uploading web pages you need a space
on a hosting company e.g Eircom then an FTP
e.g File Zila to upload and edit pages.
Step 3
Register with a Hosting company.
 There will be a step by step guide on most
websites.
 You will need to create a new email account
and also you will be creating a hosting account
or mywebspace with a username and
password. Always write down usernames and
passwords so you don’t forget. In the
username field type your website address or
wherever it asks you to depending on the
website you have entered.

Test to see if registered
It will say this is a test page if not
registered or page cannot be found.
 You may need to go back to start and click
update your site also click refresh on your
browser or you’ve made a typo error
somewhere and not followed their step by
step guides properly so start again.

Unit Two
WebDesign Programming







Click start, programs, accessories, notepad
In notepad we will edit and type HTML code
<TAG> Open tag </TAG> Close tag.
See notepad one.txt HTML tag goes in twice
start and finish webpage
Head tag- Title, style and script. Only appears
once
Title- Use Clear title for your page for search
engines to find easily. Appears at very top and
bottom. Once
Body tag - Actual contents of the page, e.g this
is my first webpage
Getting started





Register your name with a hosting company e.g
register365.ie and see if its new.
www.angelfire.com
To create a webpage you need an editor e,g
notepad or more advanced software
Create programming codes and tags in notepad
Save sample in notepad as intro.html or
index.html and click save as html file after you
put your name instead of Mr Mc Garry in
between the title tags from the programming I
put up for you.
Web pages only use 70% of a webpage to allow
for pixels, monitor types etc
Getting started on your first web
page

Close notepad and now open this intro.html from
webstarter folder using Windows or File Explorer.
Also, save it as a text file so you can edit later. It
may already have turned into a webpage and then
to see the text code click view source on the
menu bar. Right click and make sure menu bar is
clicked on.
To make text bold start and end with <B>
….</B>. Italics <I>. Type other
sentences between the two body tags
using bold and save.
 Save changes to your html file and press
FN with F5 to update your webpage

More advanced codes
BR makes a new line break otherwise it
will continue to write in one line across.
 Pre for blank spaces but change font to
Verdana.
 If you google codes e.g for color u ‘ll find
shortcuts 000000 black FFFFFF white
 e.g H1 to H6 most important to least
heading

Anchors
<A HREF=“unit1html>Home page</A>
 <A/> tags make things link up. To link
from one page to another. HREF means
Reference for Hyperlink
 To link jump from top to bottom of page
type =“#top”
 <Name=“top”> directed to the name

Software Editor
E.G Download a free trial of coffee cup for
30 days at home etc.
 Gifs are too big. Use PNG, JPEG instead
 HTM is docs. HTML is windows
 Upload your webpages with FTP
upload(e.g download File Zila for free)
 Index or Intro page is usually your home
page where all other webpages link to

Order of how to insert
tags/code
<HEAD>
<TITLE>
<HTML>
<BODY>
<P>
<P>
Key Terms
HTML is a webpage
 Head is for titles, style and script
 Title tags go inside the head tags.
 Body or with tags <BODY> open tag you
must type before you add the main
contents of your webpage and </BODY>
to close tag. Insert this tag right after the
head tag.

Go to webstarter folder
Demonstrate the examples to the class
starting with the easiest example.
 EXAMPLE ONE

Unit 2 continued HTML
• Colour Codes
– Black
– White
– Red
– Green
– Blue
– Yellow
– Purple
000000
FFFFFF
FF0000
00FF00
0000FF
FFFF00
FF00FF
Ordered Lists
• <OL> type=1(or A or I try here) start =0>
• This means that we’re going to start a number
type list starting from 0
• <Li> Monday
• <LI> Tuesday
• Means each line
• </OL>
• Means end number list
Code for bullet point lists
•
•
•
•
<UL type=disk>(sq or circle either write here)
<li> Apples
<LI> Oranges
</UL>
Horizontal Rule/Alignment
• Check widths of webpages by clicking view
source to get a feel for whats’s normal 70%.
• <HR> is used to draw a horiz line across the
browser window
• It is possible to add attributes to this. E.g
Align, size and or width
• <HR align=“center” size =3 width=70%>
• Go to example 4
Unit 3 Images and Graphics
•
•
•
•
Insert image using the software you chose.
Insert table
Save as a html webpage
Keep in between the <td> tags and change
the width to suit the table
• PNG is an increasingly popular graphics format
Frames on a Webpage
• Borders and boxes so that everything doesn’t
just merge together on your webpages.
• See website example ~ ecdlwebstarter
• Software like Coffee Cup come with Frame
designers to make this easier.
• You can insert scroll bar to move up and down
or across your frames
• You can also add forms by clicking insert
forms, add buttons
Unit 4 The Law and Security
• You need permission from the owner before you
can copy any part of a webpage.
• Copyright is the right of the owner to reproduce
or permit others to reproduce their work.
• Have up-to-date Anti Virus software to combat
ever present viruses
• Firewall is a combination of HW and SW to limit
access to certain networks.
• A cookie – Text files about you saved to a local
computer and your actions while online
To advance from this point
• You need web design software such as coffee cup.
You can download it for a 30 free trial and use the
self help guides.
• Also, you can download an FTP called File Zila for
free to upload webpages onto a webserver as
discussed previously. Publisher can be used for
pictures.
• In class we are going to move on to Weebly which
is the easiest way to build a website without a
need for much HTML programming
Summary
•
•
•
We learned about the Internet and its elements.
We learned that there are many types of software to do Web Design and the
easiest is weebly.
We learned how to do HTML programming using NotePad as editor including
programming for;
–
–
–
–
–
–
–
–
–
–
–
–
How to register and test Domain name
FTP transfers using FileZilla or Weebly
Home index/intro page
Tags and Anchors
<Br > line breaks and <pre> type as written codes
The order tags must come in
Linking pages
Ordered and unordered Lists
The horizontal Rule
Adding Colour-Fonts, Texts, Background,Bold
Graphics and Images
Law and Security
SEO Optimization DVD
• To help improve your websites page rank on
search engines such as Google click the link
below;
• SEO page Ranking on Weebly