Web Authoring

1. Web Authoring By Justin Francis-McLeish

2. Introduction.  Welcome. Firstly before we get started, I believe that you already know the basics of operating/navigating your way through web pages on the internet and have little knowledge of how to create and structure a website adequately. Throughout this presentation, I will effectively teach you: • Exactly what makes up a web page. • About the different tags/codes. • About the term "CSS". • Difference between HTML and XHTML. • Terminology words.

3. What makes up a web page? Text Fonts Web page construction (Slide 1, Slide 2, Slide 3 Colours Metadata Hyperlinks Images Tables

4. Web Page. • Firstly we need to know what a web page is, so what is a web page?  • A web page is much like a document that can be viewed/accessed on the World Wide Web.  • Now that we know what a web page is, let's get started. When you want to view a web page on different websites you will need to use a program which it's technical term is a 'browser'. The browser acts as a key to the internet. There are a variety different browsers and they all operate slightly different from each other but they all allow you to surf the Internet and view different websites. On the right side of the screen, there are some popular browsers we use nowadays, Internet Explorer, Safari, Google Chrome and Firefox.

5. Web page construction • Every single web page that's on the World Wide Web are written in html which stands for HyperText Markup Language, this will ensure that your browser will recognise it. This is also why all websites have the same starting URL address, starting with "http" or "https" (the 's' in https stands for secure). Our browsers are very stupid, if your website isn't written in html, your browser or any others will be able to recognise it. Html was designed to be a programming language so that all browsers can read, program and regulate every webpage. However you create a website using the programs such as Dreamweaver, iWeb or any others, html is involved behind the scenes ensuring that your browser will recognise it. • In the first paragraph, you're probably wondering why I never mentioned the word 'Internet'. The Internet and the World Wide Web are totally different things. The 'Internet' is much like a global network/server that connects billions of computers all over the world. Whereas the world wide web or as you call it, "www." basically sits in the Uniform Resource Locator (URL) address bar that gets activated when website designers use html or xhtml to create webpages also once users press “enter”. This is a consistent language all browsers use to communicate with each other . It basically describes what is on the web page. A prime example is www.youtube.com.

6. More on web pages.. Pros & Cons of Static websites Pros & Cons of Dynamic websites Static or Dynamic? There are two different types of websites, Static and Dynamic. A static website is a website that stays the same that can't be changed by the user. Static websites tend to go out of date. Whereas Dynamic websites can be changed and updated frequently. An example of a Dynamic website is the BBC website, information such as the weather and news has to constantly be updated on the website. Advantages: Quick to create Cheap to create and host. Disadvantages: Site isn't useful or sometimes not reliable. It requires web development knowledge to update information. Advantages:  More functional Easier to update Updated information brings back users. Disadvantages: Slower/more expensive to create. Hosting costs more money.

7. More on web pages.. Web pages are constructed in specific sections, it is a protocol (rule) that all pages in all websites must follow, especially the same template/style. Webpages contain many different sections such as a header, sidebars, menu, content and a footer. Here is an example (Enlarge picture if needed): Below tells you what goes in what area.

8. Text • Adding text to your webpage is the easiest part of web design. It is the main possession of any website, all websites are built reliant on text to describe, explain, introduce and assist the user on the website. Text can be accessed by everyone. For blind users or users with vision-impairments, they can use a reader software. Bearing in mind, when inputting text on your page, it's not a clever idea if you copy and paste text from Microsoft word as there are codes behind the scenes. It can result in users not being able to view the text if their browser doesn't support the codes for word. To resolve this problem you would have to save the document as html first, there are some programs that aid you to sort out text so that its appropriate for your website. • Remember when inputting text into your website that all spelling and grammar is correct. Having bad grammar and spelling doesn't make your website presentable or look professional. It also makes it harder for vision impairment software's to pronounce your un-spelt words and poorly grammared sentences . It can alsodetract users from your website if nothing makes sense to them. Lastly, you have to be wary of the American and English spelling.

9. Fonts • There are many different fonts out there that you can choose from for your website. However, although there are so many you can choose from, choosing a new font to put on your website wouldn't be beneficial as html sends a command to the users computer to put text into the font that you've specifically chosen. Sometimes, older computers wouldn't be able to view your text, it will come up in code form because that font isn't available on theirs. Serif and Comic sans-serif are examples of new fonts. It's best if you use Times Roman or Ariel since those are the font's that have been around for a very long time, meaning all computers will have it.

10. Colour • There are millions of colours out there which means there are more codes. Despite adding text, adding colour to your website has got to be the easiest and the most effective way to attracting your audience through colour psychology. It brings out a mood and stands out your theme for you website. However, you have to be wary of your colour choices, it's not a clever an idea to put the colours red and green into your website due to users that are colour blind. Also when choosing colours, make sure that your text is readable, this means you shouldn't pick dark colours like black or a dark shade of grey; it will be difficult for mobile users to read. • Web colour, or 'web-safe-colour' are used during the development of creating a website, to apply different shades of colours from lets say, purple, to indigo, to violet to amethyst. The colours use what is called "Hexidecimal Coding" which is it's technical term that decides and apply the perfect shade for that colour. The codes always begin with a '#' sign combined with numbers from 0-9 and letters from A-F. Red, Green, Blue (or RGB) colours each have two digits which represents the 6 digit value which the Hexidecimal refers to, e.g. the code for the colour red is '#FF0000'. 

11. Images • Images are used frequently on websites and they can be found all over the internet. They're very popular on websites for aesthetic reasons and to attract their audience. Logo is an example of an image, it's prominent and it makes the website "official", it makes it easier for users to identify them and it differentiates from others. There are three main different types of image formats that are used on the web, .jpg, .png and .gif. These three formats are used on websites because of the high quality image resolution it gives. Many websites support these three image formats without use of a plug-in, alternative formats aren't supported by them. • JPG: (also known as JPEG) is one of the favourable and most used format for saving images or digital graphic files. Once a JPG file is saved, it uses "lossy" compression, which means that the file size gets decreased, making it edible to use on websites. • GIF: Is a format that saves files using 256 8-bit colours; they're mainly used for graphics on websites. When gif images with limited amount of colours are compressed, the quality of the image isn't sacrificed when the file size is reduced. Gif files can be optimized so that it has a small file size without losing the quality of the image. • PNG: Images saved in a png format has an outstanding quality with a small file size. 

12. Tables • I can guarantee you know what a table looks like, wide boxes or "cells" which are seperated by a variety of lines giving them rows on both sides. Tables are used on websites to sort out and present numerical data in an organised manner. Back in the days, tables were very difficult to use since there was a lot of coding behind it all. However as technology is advancing, you can download a software called 'Dreamweaver' which is used for web design, tables can easily be made when you use the CSS style sheet and data input in a straightforward manner. Older browsers would find it easier to recognise tables but CSS replaces the ways designing websites and tables are being used again for what they were designed which is presenting data and listing information. • Now for some coding, this may take a while to memorise but hopefully you'll be able to differentiate the two. Rows are represented by <tr> and </tr> tags, whereas cells are represented with <td> and </td> tags. <tr> stands for 'Table Row' and <td> stands for 'Table Data' . • Google Shopping is a prime example that uses tables to list information.

13. Hyperlinks • Surely you must of heard of the word 'hyperlink' before, at least a few times, when surfing the world wide web. Ahyperlink is found all over the world wide web. Every time you search something up for example YouTube, you can only open the YouTube page if you click the hyperlink. Hyperlinks is basically textual piece of data which navigate users to different pages and anywhere on the world wide web. Hyperlinks are much like an interactive button that gets activated when they're clicked on. They're very useful. You can easily recognise the difference between a hyperlink and a normal piece of text, most hyperlinks are underlined which indicates to the user that the text is clickable. Also when you hover your mouse over a hyperlink, the arrow changes to a hand pointing to the link, it may not happen all the time but your mouse will be brought into virtual contact with the hyperlink. • Another way to navigate your way through the world wide web is to type the web address in the URL address bar, its easier and saves time.

14. Metadata • Metadata is all about data, data that's in a form of a meta tag which describes different pieces of information about the content, images etc. that's on the website. The information will include things such as the size of the image, how many bytes it contains, colour depth (maybe), resolution and maybe the date that it was made and published online. On a webpage, information provided  consists of the size, colour and font of the text. For images, the author and publisher, how long the document is and when it was written. • Not all HTML is used for layout and format. Some codes are used for special purposes such as metadata. For example, the following tags <META name="Description" content= "Description of site"> are used to make sure that search engines properly index your website. It is very important to select and use the best keywords and phrases to describe the site to help improve the site's ranking with search engines. • If that didn't make complete sense, metadata just makes searching for things easier. For instance, every time you search something up into Google, you're automatically activating different metadata for different websites and images.

15. HTML • We've already discovered that the term 'HTML' stands for Hyper Text Markup Language and that it is basically the groundwork for any website or web page, and that it is a data format which is used to transmit information to browsers about a web-page's structure, this includes things like: colours, the different font of text to use, sizes of images, tables etc. basically commanding whatever data is on a page of a document. This will ensure that the browser will able to set up the page successfully. However, when inputting information, everything has to be precise, if there is any there is any minor information that's incorrect, even a small error will cause the web browser to not successfully respond/load, it may sometimes load with errors on the page or not load at all. The information you input has to be exact, there is no room for any errors. • Nowadays, HTML5 is the latest version that has the most updated structure/markup language (syntax) which designers use to design web pages.  It defines the structure and content of webpages i.e. it provides a basic framework on which all kinds of web elements are shared on the web. We use html to place all the elements onto pages.

16. XHTML • XHTML however, stands for eXstenisble Hyper Text Markup Language which is a more advanced and stricter version of html. It offers more control over all visual features of a website. It was solely designed to allow users without internet connections on their PC/laptop, to connect and gain access the internet off a smaller device like a mobile phone. The difference between HTML and XHTML is that XHTML is cruel when it comes to mistakes, everything  has to be perfect. HTML will probably load even with a slight mistake and browsers will forgive slight syntax errors, whereas XHTML won't load at all.

17. Codes and Tags. • Absolutely all HTML codes are placed within a less than "<" and greater than ">" bracket, elements are included between the brackets which implement a command. The elements is followed by an attribute which is a word that describes the property of the command, it directs the browser on how to carry out the command. Remember our browsers are stupid. When coding it is important that you separate the element and attribute by a space followed by an equals "=" sign. Below I've done an example of what a basic document layout of a web-page looks like (enlarge the picture):

18. CSS • CSS stands for Cascading Style Sheets and it's main use is to create the whole layout of a document for a web-page. CSS separates document content that's written in HTML from document presentations, that includes elements such as colours, layouts and fonts. Many websites on the internet use CSS to neatly make their web-pages with text, images, tables etc. look professional. Fundamentally CSS is used for making documents arranged well as possible, basically defining everything on the page.  • CSS can used in many ways, especially if you know how to code. If you have the ability to code when using CSS, you'll have the ability to control animation, transitions, 2d and 3d images, backgrounds, borders, RGB  colours, Gradients, Box and text shadows effectively. That's not all, with CSS you can style your  layouts, fonts and media queries (how websites look on devices like phones, tablets etc.). A benefit of using CSS is that you have a choice of different styles for text. If you wanted to have a consistent text colour, font and size, CSS saves you time and makes it manageable. However, CSS style sheets prevail over internal tags from html like fonts. To sort out this problem, all you would have to do is pick a style, apply it to the text and the it will be applied for all the other text on the page. An internal tag is a tag that only effects the page you're working on, whereas an external tags effects all the pages. • To sum up, when you display text on a document, you have the ability to adjust the style of the text into anything, this includes changing the colour, underlining your text, making your text bolder or in italic form, all of this is achievable with CSS. If you wanted to change, lets say the text on a specific paragraph, all you have to do is highlight the text, click the "Style 1" option and click which colour/font/boldness/underlined you want.

19. Authoring • Authoring specifies a HTML documentand the text that's included within, so it basically refers to the content in a website. It essentially sums up the whole production of the software, content, design and the purpose for its audience. Before constructing your website, you must have an ambiguous idea of who your target audience. You also need to attempt to design a product categorically for that specific audience, collect relevant pictures, information, technique i.e. carousel slideshow for little children maybe? etc., something that will appeal to them. The end result of your website must have a meaning and a purpose.

20. File transfer protocol (FTP) • Lastly, FTP. I think you've already gathered that it stands for "File Transfer Protocol", its basically a way of dispatching files to another location, that could be via online or offline. The 'files' I am reflecting on gets sent round the world, they're emails. E-mails get sent around every minute,every day,everywhere around the world, it's the easiest, quickest and dependable way of communicating with others. Nowadays, it is common to use FTP for downloading and uploading files from serves online. The term 'uploading' is used when an admin or user puts something on a website i.e. a video. If that wasn't clear enough, all videos that are on YouTube have been uploaded by users and so have images on Google Images. Downloading is a term used when a user has taken information from the world wide web and saving it on their computer or a hard drive for their own use. • There is another protocol I haven't mentioned and that isTCP/IP(Transmission Control Protocol/Internet Protocol). TCP/IP is used to connect servers to the internet, it's also relates to the speed of your internet connection. Using the e-mail example, every time you send and receive e-mails, its because of FTP and TCP/IP network protocols.