Getting Started with Web Development Thursday September 28, 2017 Instructor: Holly Hames

Transcription

1 Getting Started with Web Development Thursday September 28, 2017 Instructor: Holly Hames

2 OUTLINE What you need to publish a webpage; 1. Domain 2. Hosting 3. Code Address / URL how a webpage is found Viewing webpages in a browser Essential web page components HTML Code Links, how everything gets connected Class Project: write HTML code, and view your page in a browser

3 Required for Live Site Domain o Choose a name, it must be unique, pay renewal fee every year Hosting o Selecting a Hosting company, pay renewal fee every year Code o The website will be written in code, there are several ways to do this, and a variety of languages. Cost will depend on many factors.

4 URL WEB ADDRESS The Webpage: your browser displays the address / URL in the top area called the ADDRESS BAR

5 URL PROTOCOL DOMAIN PROTOCOL DOMAIN PATH

6 CHOOSING A DOMAIN Pick a Topic for your site Domain Registrar company you purchase domain from, read all the fine print Domains are renewed yearly Recommended: purchase a set of TLD.com /.ca /.net

7 HOSTING How it Works The hosting computer is called a Server Always on Serves page when a browser makes a request What are you paying for? Equipment Storage space Additional features Support

8 CODE Browsers read HTML and display the code as the page you see; text, images, video, audio, and links The files will be stored on a server when you want the site live Test your files in your browser before uploading We are using HTML for this project, and will view them in the browser

9 Web Page Elements All web pages will have a head and a body all other areas are optional Head, does the thinking Body, is the display Links, connect the content to other content Paths, are the map to the file, such as an image

10 A good reference is the W3Schools This reference is always up to date HTML Hyper Text Markup Language

11 CLASS PROJECT HTML Webpage File Management Write HTML Add Formatting Add Links Add Images View Your page in a browser

12 File Management 1. Create a folder on the desktop 2. Name the folder 3. You will save your files to this folder 4. A full website will have a main folder and sub-folders for organization Note where your files are located, and the names, this will make them easier to find.

13 Lets Try It! We will use NotePad, and write a simple webpage We will then view the page you create in a browser

14 BASIC HTML WEBPAGE

15 Visible Content What you place between the BODY tags will be displayed on the webpage Add your text and images between the BODY tags in your page Next we save the file, follow the steps on the next slide to create an HTML document from your NotePad program.

16 HTML formatting tags used on text

17 SAVING THE FILE Save as Set the encoding to UTF-8 File Name: remove the default.txt file extension Name file: index.html Save to your folder on Desktop

18 OPEN YOUR FILE IN A BROWSER Go to Desktop Locate File Icon Right Click Select Open With From Pop Out Menu, select FireFox or other browser

19 Links Adding Links allows navigation to other locations Link Text: this is what is displayed on screen The link also has code to give the required information. The code is not visible when the page is displayed Common link format is to show an underline, and may have different colour text. These are visual cues that the text is a link

20 In HTML, links are defined with the <a> tag Link Syntax <a href="url">link text</a> Example: <a href=" our School</a>

21 Connect this page to others on the web by using links

22 Adding Images The Web is Visual Communication

23 The src attribute specifies the URL (web address) of the image

24 Display your page in the Browser Make single changes as you build the page, test after you add each element

25 A good hosting company will offer: Have a good reputation, ask friends Toll Free number for support Provides the services you need Consider a Canadian data server your data is stored in Canada Choose a Host There are lots of Hosting companies to choose from

26 Code Use code editor, NotePad, NotePad++ Use a editing software such as Adobe Dreamweaver Download freeware or Shareware Mac equivalent of NotePad is TextEdit Pay a developer to write Buy a package or support for freeware or shareware core Purchase a less technical solution WIX Squarespace

27 What s Next You now have the basic concepts Burnaby CCE offers a WordPress class to show you how to use the WordPress core to create a full website Starts Oct 6, this class runs 6 weeks and is suited to new users WordPress is ideal for setting up a Blog, or Static site including e-commerce

28 WORDPRESS FOR BEGINNERS Learn the basics of creating a website with WordPress, the most popular Content Management System (CMS) for many of today's websites. Create and edit web content. Explore WordPress themes (templates) to change the appearance of your website. Learn how you can expand the function of your website by using plug-ins. Students will also learn how to set up domain names and web hosting for a self-hosted WordPress website. Students without prior knowledge will benefit greatly from taking Website Basics beforehand. 6 sessions Thu Oct 5 Nov 9, 2017