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