Web Design (2) Brackets - introduction

Brackets Brackets is a web design code editor It is an open-source project initiated by Adobe (creator of Dreamweaver) Web developers from around the world are contributing to build a better code editor

Let’s get started ! In Windows Explorer, open the folder “CU3A Web Design Group”; and then the sub-folder “My Web Sites”. Create here a sub-sub-folder, giving it the name of your website ( e.g. Fred’s First Website) !

Now… Move into this new folder a copy of the “blank.html” file, which is in your “Web Site Resources” folder. (remember to hold down the Ctrl key for copying!) And rename the “blank.html” file, “index.html”

Time to open ‘Brackets’ !! (oh, the anticipation!) In Brackets, click on the top left hand drop- down box and select ‘Open Folder’ Go to the folder of your new website in Windows Explorer, highlight it and click on ‘Select Folder’ Notice your website name in the drop-down box And, below that, your ‘index.html’ file.

Your Web Site Home Page – index.html Click on the ‘index.html’ file Let’s now look at the structure of an html document This instructs the browser to use the latest (and probably ultimate) version of html (namely html5) in reading your document.

Tags Notice that the HTML document (Hypertext Markup Language) contains various ‘tag’ types, which will surround the contents. e.g. start tag end tag Now add a title to your ‘index.html’ file between the tags (e.g. Fred’s Home Page) The html document structure is a ‘nesting’ (think ‘Russian Dolls’!)

The area The area contains the When a browser is examining a web site to see if it is a match for a search, it will look at the ‘index.html’ document. If the web site is selected, the title will be displayed to the enquirer.

tags tags provide information about the html document to the browser. Optimization of the site is improved, the more relevant information (‘keywords’) that are included in the tags. Links to relevant ‘css’ and ‘javascript’ files for your website will also appear in the area.

The area The area will contain the content of the page that a user of the website will see. Now add a sentence between the tags (e.g. Welcome to Fred’s Website……)

What would your page look like live on the Internet? Let’s find out ! In the top right hand corner is a wavy line. This is the ‘Live Preview’ icon. Click on it now to answer the above question! Notice (a) that your sentence appears on the web page And (b) the page title appears on the page tab

Saving your work Now leave the Live Preview (by clicking the ‘x’ in the tab) In the tool bar click on ‘File’ and select ‘Save’ Exit ‘Brackets’ by clicking the ‘x’ in the top right hand corner of the Brackets window