Embed Size (px)
Citation preview
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
<!doctype html>
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. <title> </title> start tag end tag
Now add a title to your ‘index.html’ file between the <title> tags (e.g. Fred’s Home Page)
The html document structure is a ‘nesting’ (think ‘Russian Dolls’!)
The <head> area
The <head> area contains the <title>
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.
<meta> tags
<meta> 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 <meta> tags.
Links to relevant ‘css’ and ‘javascript’ files for your website will also appear in the <head> area.
The <body> area
The <body> area will contain the content of the page that a user of the website will see.
Now add a sentence between the <body> 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
